:root{
  /* Light cozy palette */
  --bg: #FAFAF8;           /* off-white */
  --text: #222222;         /* charcoal */
  --muted: #6B7280;        /* soft gray */
  --card: rgba(255,255,255,.82);
  --stroke: rgba(0,0,0,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.10);
  --radius: 20px;

  /* Accents (yellow + soft gray) */
  --a: #F4D35E;            /* butter yellow */
  --b: #FBBF24;            /* warm yellow */
  --c: #9CA3AF;            /* neutral gray accent */
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

/* --- background aurora (soft light) --- */
.aurora{
  position: fixed;
  inset: -30%;
  background:
    radial-gradient(900px 520px at 10% 20%, rgba(244,211,94,.35), transparent 60%),
    radial-gradient(800px 520px at 85% 25%, rgba(251,191,36,.22), transparent 60%),
    radial-gradient(720px 520px at 50% 90%, rgba(156,163,175,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.03), transparent 35%);
  filter: blur(16px);
  z-index: -3;
}

/* --- tiny moving stars (dark dots on light bg) --- */
.stars{
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: .35;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(0,0,0,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 75%, rgba(0,0,0,.28) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 30%, rgba(0,0,0,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 60%, rgba(0,0,0,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 55%, rgba(0,0,0,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(0,0,0,.20) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 12%, rgba(0,0,0,.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 55%, rgba(0,0,0,.18) 50%, transparent 51%);
  animation: floatStars 14s ease-in-out infinite;
}
@keyframes floatStars{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}

/* --- soft paper grain --- */
.grain{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* --- topbar --- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  background: rgba(250,250,248,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}

.spark{
  color: #111;
  text-shadow: 0 0 18px rgba(244,211,94,.65);
}

.name{
  font-weight: 600;
  letter-spacing: .2px;
}

.tag{
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: rgba(0,0,0,.68);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
}

.nav{
  display: flex;
  gap: 10px;
}
.nav a{
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: .2s ease;
}
.nav a:hover{
  color: var(--text);
  border-color: rgba(0,0,0,.10);
  background: rgba(244,211,94,.22);
}

/* --- layout --- */
.wrap{
  max-width: 1020px;
  margin: 0 auto;
  padding: 26px 18px 40px;
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* --- hero --- */
.hero{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  padding: 22px;
  margin-bottom: 16px;
}
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
}

.kicker{
  margin: 0 0 8px;
  color: rgba(0,0,0,.60);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

h1{
  margin: 0;
  font-size: clamp(30px, 4.4vw, 54px);
  letter-spacing: -0.8px;
  line-height: 1.05;
}

.glow{
  background: linear-gradient(135deg, var(--a), var(--b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(244,211,94,.18);
}

.mini{
  opacity: .85;
  font-size: .9em;
}

.sub{
  margin: 10px 0 0;
  color: rgba(0,0,0,.68);
  max-width: 62ch;
  line-height: 1.55;
}

/* Links inside text */
.sub a, p a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid rgba(244,211,94,.85);
}
.sub a:hover, p a:hover{
  background: rgba(244,211,94,.25);
  border-bottom-color: rgba(244,211,94,1);
}

/* Chips */
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.chip{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: rgba(0,0,0,.76);
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
}

/* Buttons */
.cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: #1a1a1a;
  background: linear-gradient(135deg, var(--a), var(--b));
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.btn.ghost{
  background: rgba(255,255,255,.75);
  color: var(--text);
  border: 1px solid rgba(0,0,0,.10);
}

/* right side hero */
.statbox{
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.stat{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
}
.stat-top{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-bottom: 4px;
}
.stat-val{
  font-weight: 600;
  color: rgba(0,0,0,.82);
}

.quote{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(244,211,94,.24), rgba(255,255,255,.70));
}
.quote p{
  margin: 0;
  color: rgba(0,0,0,.80);
  font-size: 15px;
  line-height: 1.45;
}

/* (tu CSS se cortó en "margin-top" — lo dejo arreglado) */
.quote-sub{
  display: block;
  margin-top: 8px;
  color: rgba(0,0,0,.55);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}