/* ============================================================
   Gamistu Landing — Components
   Source: docs/marketing-response/_design-system-decoded/index.html
   Extracted subset: Button, Input, Badge, Avatar, Card (mascot-card),
   Helio mascot (6 states), Lesson tile (9 types) + supporting keyframes.
   ============================================================ */

/* ============================== Button ============================== */
.btn{font-family:var(--font-body);font-weight:600;font-size:14px;border-radius:var(--r-md);padding:10px 20px;
  border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:all .15s var(--ease-out);line-height:1;position:relative;overflow:hidden}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--indigo-100),0 0 0 4px var(--indigo-500)}
.btn-primary{background:linear-gradient(180deg,var(--indigo-500),var(--indigo-600));color:#fff;
  box-shadow:0 1px 0 0 rgba(255,255,255,.15) inset,0 8px 16px -8px rgba(99,102,241,.5)}
.btn-primary:hover{background:linear-gradient(180deg,var(--indigo-600),var(--indigo-700));transform:translateY(-1px);
  box-shadow:0 1px 0 0 rgba(255,255,255,.15) inset,0 12px 20px -8px rgba(99,102,241,.6)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:var(--indigo-50);color:var(--indigo-700);border-color:var(--indigo-100)}
.btn-secondary:hover{background:var(--indigo-100)}
.btn-ghost{background:transparent;color:var(--text-primary)}
.btn-ghost:hover{background:var(--bg-muted)}
.btn-destructive{background:var(--error);color:#fff}
.btn-destructive:hover{filter:brightness(.92)}
.btn-sm{padding:6px 14px;font-size:13px;border-radius:var(--r)}
.btn-lg{padding:14px 28px;font-size:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary::after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s var(--ease-out)}
.btn-primary:hover::after{left:140%}

/* ============================== Input / Form ============================== */
.input,.textarea,.select{font-family:var(--font-body);font-size:14px;padding:10px 12px;border:1px solid var(--border-strong);
  border-radius:var(--r);background:#fff;color:var(--text-primary);min-width:240px;transition:all .15s var(--ease-out)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--indigo-500);box-shadow:0 0 0 3px var(--indigo-100)}
.textarea{min-height:96px;font-family:inherit;resize:vertical}
.input::placeholder{color:var(--text-muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--text-primary)}
.field .hint{font-size:12px;color:var(--text-muted)}
.field .err{font-size:12px;color:var(--error)}
.field.error .input{border-color:var(--error);box-shadow:0 0 0 3px #FEE2E2}

/* ============================== Badge / Chip ============================== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;font-family:var(--font-body);line-height:18px}
.badge.indigo{background:var(--indigo-100);color:var(--indigo-700)}
.badge.mint{background:var(--mint-100);color:var(--mint-700)}
.badge.amber{background:#FEF3C7;color:#92400E}
.badge.rose{background:#FFE4E6;color:#9F1239}
.badge.gray{background:var(--bg-muted);color:var(--text-secondary)}
.badge.outline{background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary)}
.badge.glow{background:var(--indigo-500);color:#fff;box-shadow:0 0 12px rgba(99,102,241,.5)}
.chip-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;
  font-weight:500;background:var(--indigo-50);color:var(--indigo-700);border:1px solid var(--indigo-100);
  transition:all .15s var(--ease-out)}
.chip-pill:hover{background:var(--indigo-100)}
.chip-pill .x{color:var(--indigo-500);cursor:pointer;font-size:14px}

/* ============================== Avatar ============================== */
.avatar{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,var(--indigo-400),var(--indigo-600));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;font-size:14px;flex:0 0 auto;box-shadow:0 4px 12px -4px rgba(99,102,241,.4)}
.avatar.sm{width:28px;height:28px;font-size:11px}
.avatar.lg{width:56px;height:56px;font-size:18px}
.avatar.mint{background:linear-gradient(135deg,var(--mint-400),var(--mint-600));box-shadow:0 4px 12px -4px rgba(16,185,129,.4)}
.avatar.amber{background:linear-gradient(135deg,#FCD34D,#D97706);box-shadow:0 4px 12px -4px rgba(217,119,6,.4)}
.avatar-stack{display:flex}
.avatar-stack .avatar{border:2px solid var(--bg-surface);margin-left:-8px}
.avatar-stack .avatar:first-child{margin-left:0}

/* ============================== Card (mascot-card pattern) ============================== */
.card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-2xl);
  padding:18px;display:flex;flex-direction:column;gap:12px;
  transition:all .3s var(--ease-out);position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);border-color:var(--indigo-200);box-shadow:var(--shadow-lg)}
.card.center{align-items:center;text-align:center}

/* Mascot stage (used for Helio rotating section) */
.mascot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.mascot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mascot-grid{grid-template-columns:1fr}}
.mascot-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-2xl);
  padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  transition:all .3s var(--ease-out);position:relative;overflow:hidden}
.mascot-card:hover{transform:translateY(-3px);border-color:var(--indigo-200);box-shadow:var(--shadow-lg)}
.mascot-stage{width:100%;aspect-ratio:1/1;border-radius:var(--r-xl);
  background:radial-gradient(circle at 50% 60%,var(--indigo-50),var(--bg-surface) 70%);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mascot-stage::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(99,102,241,.06) 1px,transparent 1px),
                  linear-gradient(90deg,rgba(99,102,241,.06) 1px,transparent 1px);
  background-size:16px 16px;mask:radial-gradient(circle at center,transparent 30%,#000)}
.mascot-name{font-family:var(--font-display);font-weight:700;font-size:15px}
.mascot-use{font-size:12px;color:var(--text-secondary);line-height:18px}

/* ============================== Helio mascot ============================== */
/* CSS-only sun-circle with eyes + mouth via pseudo-elements */
.helio{width:62%;height:62%;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#FDE68A 0%,#FBBF24 40%,#F59E0B 100%);
  box-shadow:0 0 40px rgba(245,158,11,.4),inset -4px -4px 12px rgba(180,83,9,.18);
  position:relative;z-index:1;transition:transform .4s var(--ease-bounce)}
.mascot-card:hover .helio{transform:scale(1.06) rotate(-3deg)}
.helio::before{content:"";position:absolute;inset:-16%;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(251,191,36,.6) 0deg 8deg,transparent 8deg 45deg,
    rgba(251,191,36,.6) 45deg 53deg,transparent 53deg 90deg,
    rgba(251,191,36,.6) 90deg 98deg,transparent 98deg 135deg,
    rgba(251,191,36,.6) 135deg 143deg,transparent 143deg 180deg,
    rgba(251,191,36,.6) 180deg 188deg,transparent 188deg 225deg,
    rgba(251,191,36,.6) 225deg 233deg,transparent 233deg 270deg,
    rgba(251,191,36,.6) 270deg 278deg,transparent 278deg 315deg,
    rgba(251,191,36,.6) 315deg 323deg,transparent 323deg 360deg);
  mask:radial-gradient(circle,transparent 56%,#000 56% 62%,transparent 62%);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 56% 62%,transparent 62%);
  opacity:.7;animation:spinSlow 24s linear infinite}
.face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;z-index:2}
.eyes{display:flex;gap:18%;width:50%;justify-content:center;margin-top:38%}
.eye{width:10px;height:10px;border-radius:50%;background:#1F2937}
.mouth{width:22%;height:10%;border:2px solid #1F2937;border-top:0;border-radius:0 0 999px 999px;margin-top:6px}

/* 6 pose variants — neutral (default above) + 5 below */
.helio.cheer{background:radial-gradient(circle at 30% 30%,#FEF3C7,#34D399 70%,#10B981)}
.helio.cheer .eye{height:3px;border-radius:2px;background:transparent;border-top:2px solid #1F2937;width:12px;transform:rotate(15deg)}
.helio.cheer .eye:last-child{transform:rotate(-15deg)}
.helio.cheer .mouth{width:30%;height:18%;border-width:3px}

.helio.thinking{background:radial-gradient(circle at 30% 30%,var(--indigo-200),var(--indigo-500) 70%);
  animation:floatY 3s ease-in-out infinite}
.helio.thinking .mouth{width:8%;height:8%;border:0;border-radius:50%;background:#1F2937}
.helio.thinking::after{content:"...";position:absolute;top:-22%;right:-8%;font-family:var(--font-display);
  font-weight:700;font-size:24px;color:var(--indigo-600);letter-spacing:1px;animation:thinkDots 1.4s ease-in-out infinite}

.helio.confused{background:radial-gradient(circle at 30% 30%,#FECACA,#F87171 70%,#EF4444)}
.helio.confused .eye{transform:rotate(0)}
.helio.confused .mouth{width:18%;height:18%;border:2px solid #1F2937;border-bottom:0;border-radius:999px 999px 0 0}

.helio.asleep{background:radial-gradient(circle at 30% 30%,#E0E7FF,var(--indigo-300) 70%);opacity:.85}
.helio.asleep .eye{height:3px;border-radius:2px;background:transparent;border-top:2px solid #1F2937;width:14px}
.helio.asleep .mouth{display:none}
.helio.asleep::after{content:"z";position:absolute;top:-16%;right:-8%;font-family:var(--font-display);
  font-weight:800;font-size:28px;color:var(--indigo-500);animation:zzz 2.4s ease-in-out infinite}

.helio.celebrate{background:radial-gradient(circle at 30% 30%,#FBBF24,var(--mint-400) 60%,var(--indigo-500));
  box-shadow:0 0 60px rgba(99,102,241,.6),inset -4px -4px 12px rgba(0,0,0,.1);
  animation:floatY 2.2s var(--ease-bounce) infinite}
.helio.celebrate .eye{transform:rotate(15deg);background:transparent;border-top:2px solid #1F2937;height:3px;width:12px}
.helio.celebrate .eye:last-child{transform:rotate(-15deg)}
.helio.celebrate .mouth{width:40%;height:24%;border-width:3px}

/* ============================== Lesson tile (9 types) ============================== */
.lesson-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:820px){.lesson-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.lesson-grid{grid-template-columns:repeat(2,1fr)}}
.lesson-tile{aspect-ratio:1/1;background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:var(--r-xl);padding:14px;display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;transition:all .2s var(--ease-out);position:relative;overflow:hidden}
.lesson-tile:hover{transform:translateY(-2px);border-color:var(--indigo-300);box-shadow:var(--shadow-md)}
.lesson-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,var(--accent,var(--indigo-100)));opacity:.4;pointer-events:none}
.lesson-icon{width:36px;height:36px;border-radius:10px;background:var(--accent,var(--indigo-100));
  color:var(--accent-fg,var(--indigo-700));display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.02em;z-index:1}
.lesson-name{font-size:13px;font-weight:600;color:var(--text-primary);z-index:1}
.lesson-tile .v15{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);z-index:1}
.lesson-tile.reading{--accent:#E0E7FF;--accent-fg:var(--indigo-700)}
.lesson-tile.quiz{--accent:#D1FAE5;--accent-fg:var(--mint-700)}
.lesson-tile.tf{--accent:#FEF3C7;--accent-fg:#92400E}
.lesson-tile.open{--accent:#FFE4E6;--accent-fg:#9F1239}
.lesson-tile.flash{--accent:#E0F2FE;--accent-fg:#075985}
.lesson-tile.video{--accent:#F3E8FF;--accent-fg:#6B21A8}
.lesson-tile.image{--accent:#FCE7F3;--accent-fg:#9D174D}
.lesson-tile.cap{--accent:#FED7AA;--accent-fg:#9A3412}
.lesson-tile.reserved{--accent:var(--bg-muted);--accent-fg:var(--text-muted);opacity:.6}

/* ============================== Page-wide fixed background ============================== */
/* Stays static while scrolling; fades out as user moves past hero */
.page-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:#0F172A;
  opacity:var(--bg-fade,1);transition:opacity .15s linear;
  filter:blur(var(--bg-blur,0px))}
.page-bg .hero-frames{position:absolute;inset:0;overflow:hidden}
.page-bg .hero-frame{position:absolute;inset:0;background-size:cover;background-position:center right;
  opacity:0;animation:frameCycle 8s ease-in-out infinite;will-change:opacity}
.page-bg .hero-frame.f1{background-image:url("../img/hero/frame-1.jpg");animation-delay:0s}
.page-bg .hero-frame.f2{background-image:url("../img/hero/frame-2.jpg");animation-delay:2s}
.page-bg .hero-frame.f3{background-image:url("../img/hero/frame-3.jpg");animation-delay:4s}
.page-bg .hero-frame.f4{background-image:url("../img/hero/frame-4.jpg");animation-delay:6s}
.page-bg .hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(9,9,11,.72) 0%,rgba(9,9,11,.5) 35%,rgba(9,9,11,.15) 60%,transparent 100%),
    linear-gradient(180deg,transparent 55%,rgba(9,9,11,.55) 100%)}

/* ============================== Ambient overlay (động "đè lên") ============================== */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:var(--bg-fade,1);transition:opacity .15s linear}

/* Floating dust motes — small dots rising slowly */
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(253,230,138,.65);
  box-shadow:0 0 8px rgba(253,230,138,.6);animation:moteRise linear infinite;will-change:transform,opacity}
.mote.m1{left:12%;animation-duration:14s;animation-delay:0s}
.mote.m2{left:24%;animation-duration:18s;animation-delay:3s;background:rgba(165,180,252,.55);box-shadow:0 0 8px rgba(165,180,252,.55)}
.mote.m3{left:36%;animation-duration:12s;animation-delay:1.5s}
.mote.m4{left:48%;animation-duration:16s;animation-delay:5s;background:rgba(110,231,183,.5);box-shadow:0 0 8px rgba(110,231,183,.5)}
.mote.m5{left:18%;animation-duration:20s;animation-delay:2s}
.mote.m6{left:42%;animation-duration:15s;animation-delay:7s;background:rgba(165,180,252,.55);box-shadow:0 0 6px rgba(165,180,252,.55)}
.mote.m7{left:30%;animation-duration:13s;animation-delay:4s;background:rgba(110,231,183,.5);box-shadow:0 0 6px rgba(110,231,183,.5)}
.mote.m8{left:8%;animation-duration:17s;animation-delay:6s}

/* Bokeh orbs — bigger soft floating */
.orb{position:absolute;border-radius:50%;filter:blur(20px);opacity:.4;
  animation:orbDrift ease-in-out infinite alternate;will-change:transform}
.orb.o1{width:120px;height:120px;background:radial-gradient(circle,rgba(165,180,252,.7),transparent 70%);
  top:18%;left:6%;animation-duration:11s}
.orb.o2{width:90px;height:90px;background:radial-gradient(circle,rgba(252,211,77,.6),transparent 70%);
  top:54%;left:32%;animation-duration:14s;animation-delay:2s}
.orb.o3{width:140px;height:140px;background:radial-gradient(circle,rgba(110,231,183,.6),transparent 70%);
  top:38%;left:14%;animation-duration:9s;animation-delay:4s}

/* Light flare — slow rotating sunbeam from top-left */
.flare{position:absolute;top:-30%;left:-10%;width:80%;height:80%;
  background:conic-gradient(from 25deg,transparent,rgba(252,211,77,.06) 8%,transparent 16%,
    transparent 70%,rgba(165,180,252,.05) 78%,transparent 86%);
  filter:blur(30px);animation:flareSpin 40s linear infinite}

/* Hero — transparent so page-bg shows through */
.hero{position:relative;padding:120px 0 96px;overflow:hidden;
  min-height:580px;color:#F8FAFC;background:transparent}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* Sparkle dots (hero-local, above ambient) */
.hero-bg .sparkle{position:absolute;border-radius:50%;pointer-events:none;
  box-shadow:0 0 12px currentColor;animation:sparkleTwinkle 3s ease-in-out infinite;z-index:2}
.hero-bg .sparkle::before{content:"";position:absolute;inset:0;background:currentColor;border-radius:50%}
.hero-bg .sparkle.s1{width:6px;height:6px;color:var(--mint-300);top:22%;left:18%;animation-delay:0s}
.hero-bg .sparkle.s2{width:5px;height:5px;color:#FCD34D;top:38%;left:8%;animation-delay:.8s}
.hero-bg .sparkle.s3{width:7px;height:7px;color:var(--indigo-300);top:62%;left:22%;animation-delay:1.4s}
.hero-bg .sparkle.s4{width:5px;height:5px;color:var(--mint-400);top:18%;left:40%;animation-delay:2s}
.hero-bg .sparkle.s5{width:6px;height:6px;color:#FCD34D;bottom:24%;left:36%;animation-delay:.4s}
.hero-bg .sparkle.s6{width:5px;height:5px;color:var(--indigo-300);bottom:12%;left:14%;animation-delay:1.7s}

/* Divider sparkle (light bg) — used outside hero */
.divider-sparkle .sparkle{position:absolute;border-radius:50%;
  box-shadow:0 0 12px currentColor;animation:sparkleTwinkle 3s ease-in-out infinite}
.divider-sparkle .sparkle::before{content:"";position:absolute;inset:0;background:currentColor;border-radius:50%}
.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.1fr) 1fr;gap:48px;align-items:center}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;gap:24px}}
.hero .eyebrow{color:var(--mint-300)}
.hero h1{margin-top:14px;text-wrap:balance;font-size:64px;line-height:1.08;color:#F8FAFC;
  text-shadow:0 2px 24px rgba(0,0,0,.5)}
@media(max-width:720px){.hero h1{font-size:42px;line-height:1.12}}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,#A5B4FC,#6EE7B7 50%,#FCD34D);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradientShift 6s ease-in-out infinite;
  -webkit-text-fill-color:transparent}
.hero .lede{color:#E2E8F0;max-width:54ch;text-shadow:0 1px 12px rgba(0,0,0,.4)}
/* Word reveal — js adds .word spans, stagger via --i */
.hero h1 .word{display:inline-block;opacity:0;transform:translateY(20px);
  animation:wordRise .65s var(--ease-out) forwards;animation-delay:calc(80ms * var(--i,0))}
.hero h1 .word.space{width:.28em}
.hero .lede{opacity:0;transform:translateY(12px);animation:wordRise .6s var(--ease-out) .7s forwards}
.hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;
  opacity:0;animation:wordRise .5s var(--ease-out) 1s forwards}
.hero-meta .badge{font-family:var(--font-mono);padding:6px 12px;font-size:12px;
  background:rgba(255,255,255,.1);color:#F8FAFC;border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-meta .badge.amber{background:rgba(252,211,77,.18);color:#FDE68A;border-color:rgba(252,211,77,.4);
  box-shadow:0 4px 12px -4px rgba(245,158,11,.4)}
.hero-meta .badge.mint{background:rgba(110,231,183,.18);color:#A7F3D0;border-color:rgba(110,231,183,.4);
  box-shadow:0 4px 12px -4px rgba(16,185,129,.4)}
.hero-meta .badge.indigo{background:rgba(165,180,252,.18);color:#C7D2FE;border-color:rgba(165,180,252,.4)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;
  opacity:0;animation:wordRise .5s var(--ease-out) .9s forwards}
.hero-cta .btn-primary{transform:translateZ(0)}
.hero-cta .btn-primary:hover{transform:translateY(-2px) scale(1.02)}
/* Secondary on dark hero — glassmorphism */
.hero-cta .btn-secondary{background:rgba(255,255,255,.1);color:#F8FAFC;border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-cta .btn-secondary:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.hero-card{position:relative;padding:24px;border-radius:20px;
  background:linear-gradient(180deg,rgba(15,23,42,.55),rgba(15,23,42,.35));
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);color:#F8FAFC;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;transform:translateY(20px) scale(.96);
  animation:cardRise .7s var(--ease-bounce) .5s forwards;
  transition:transform .3s var(--ease-out);max-width:340px;margin-left:auto}
@media(max-width:980px){.hero-card{max-width:none;margin-left:0}}
.hero-card:hover{transform:translateY(-4px) rotate(-.5deg)}
.hero-card h4{color:var(--mint-300)}
.hero-card .row{border-bottom-color:rgba(255,255,255,.1);color:#E2E8F0}
.hero-card .row .k{color:#94A3B8}
.hero-card .row .v{color:#F8FAFC}
.hero-card .helio-stage{position:relative;width:100px;height:100px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 60%,rgba(110,231,183,.18),rgba(15,23,42,.4) 75%);
  border-radius:var(--r-xl);overflow:visible;border:1px solid rgba(255,255,255,.08)}
.hero-card .helio-stage .helio{width:78%;height:78%}
.chat-bubble{position:relative;background:linear-gradient(135deg,var(--indigo-500),var(--indigo-700));
  color:#fff;padding:10px 14px;border-radius:14px;font-size:13px;line-height:18px;font-weight:500;
  box-shadow:0 8px 20px -8px rgba(99,102,241,.6);margin:0 0 14px;text-align:center;
  animation:bubblePop .5s var(--ease-bounce) 1.1s both}
.chat-bubble::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:var(--indigo-700)}
.chat-bubble strong{color:#FDE68A;font-weight:700}
.hero-card h4{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo-600);margin-bottom:12px}
.hero-card .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-default);font-size:13px}
.hero-card .row:last-child{border-bottom:0}
.hero-card .row .k{color:var(--text-secondary)}
.hero-card .row .v{font-weight:600;color:var(--text-primary)}
.hero-card .row .v.mono{font-family:var(--font-mono);font-size:12px}

/* ============================== Section primitive ============================== */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
@media(max-width:520px){.container{padding:0 16px}}
section.s{padding:72px 0;border-bottom:1px solid rgba(228,228,231,.45);
  background:rgba(250,250,250,.43);
  backdrop-filter:blur(34px) saturate(180%) brightness(108%);
  -webkit-backdrop-filter:blur(34px) saturate(180%) brightness(108%);
  position:relative;z-index:2}
section.s:last-of-type{border-bottom:0}
section.s.transparent{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
section.s.opaque{background:var(--bg-base);backdrop-filter:none;-webkit-backdrop-filter:none}
.section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.section-num{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--indigo-600),var(--indigo-700));
  border:1px solid rgba(99,102,241,.4);
  padding:6px 12px;border-radius:999px;
  box-shadow:0 4px 12px -2px rgba(99,102,241,.45),0 1px 0 0 rgba(255,255,255,.2) inset}
section.s h2{font-size:38px;line-height:1.18;font-weight:800;color:#0B1020;
  text-shadow:0 1px 0 rgba(255,255,255,.65),0 2px 12px rgba(255,255,255,.5)}
@media(max-width:720px){section.s h2{font-size:30px;line-height:1.2}}
.section-desc{color:#18181B;font-size:16px;line-height:24px;max-width:64ch;margin:10px 0 36px;font-weight:600;
  text-shadow:0 1px 0 rgba(255,255,255,.45)}

/* ============================== Pain card (multi-accent playful) ============================== */
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:720px){.pain-grid{grid-template-columns:1fr}}
.pain-card{padding:28px;background:rgba(255,255,255,.77);border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-2xl);position:relative;overflow:hidden;cursor:default;
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 8px 32px -12px rgba(15,23,42,.18);
  opacity:0;transform:translateY(24px);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out)}
.pain-card.in{opacity:1;transform:translateY(0);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out);
  transition-delay:calc(80ms * var(--i,0))}
.pain-card::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 50%,var(--card-tint,var(--indigo-50)));
  opacity:.35;transition:opacity .3s var(--ease-out);pointer-events:none}
.pain-card::after{content:"";position:absolute;top:-30px;right:-30px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,var(--card-blob,rgba(99,102,241,.18)),transparent 70%);
  pointer-events:none;transition:transform .4s var(--ease-out)}
.pain-card:hover::after{transform:scale(1.4) rotate(20deg)}
.pain-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 24px 40px -20px var(--card-shadow,rgba(99,102,241,.35));border-color:var(--card-border,var(--indigo-200))}
.pain-card .pain-icon{width:52px;height:52px;border-radius:14px;background:var(--card-icon-bg,var(--indigo-100));
  color:var(--card-icon-fg,var(--indigo-700));display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:24px;margin-bottom:14px;position:relative;z-index:1;
  box-shadow:0 6px 16px -8px var(--card-icon-shadow,rgba(99,102,241,.4));
  transition:transform .3s var(--ease-bounce)}
.pain-card:hover .pain-icon{transform:scale(1.1) rotate(-6deg)}
.pain-card h3{margin-bottom:10px;position:relative;z-index:1;font-size:19px;line-height:26px;font-weight:700;color:#0F172A}
.pain-card p{font-size:14.5px;line-height:22px;color:#3F3F46;position:relative;z-index:1;margin:0;font-weight:500}

/* Per-card accent (multi-color rotation per spec direction "playful + đa accent") */
.pain-card.accent-rose{--card-tint:#FFE4E6;--card-blob:rgba(249,115,115,.22);--card-shadow:rgba(249,115,115,.32);
  --card-border:#FECACA;--card-icon-bg:#FFE4E6;--card-icon-fg:#9F1239;--card-icon-shadow:rgba(249,115,115,.45)}
.pain-card.accent-amber{--card-tint:#FEF3C7;--card-blob:rgba(245,158,11,.22);--card-shadow:rgba(245,158,11,.3);
  --card-border:#FDE68A;--card-icon-bg:#FEF3C7;--card-icon-fg:#92400E;--card-icon-shadow:rgba(245,158,11,.45)}
.pain-card.accent-indigo{--card-tint:#EEF2FF;--card-blob:rgba(99,102,241,.22);--card-shadow:rgba(99,102,241,.32);
  --card-border:var(--indigo-200);--card-icon-bg:var(--indigo-100);--card-icon-fg:var(--indigo-700);--card-icon-shadow:rgba(99,102,241,.45)}
.pain-card.accent-mint{--card-tint:#D1FAE5;--card-blob:rgba(16,185,129,.22);--card-shadow:rgba(16,185,129,.32);
  --card-border:#A7F3D0;--card-icon-bg:#D1FAE5;--card-icon-fg:var(--mint-700);--card-icon-shadow:rgba(16,185,129,.45)}

/* ============================== Keyframes ============================== */
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes thinkDots{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes zzz{0%,100%{transform:translateY(0) rotate(-6deg);opacity:1}50%{transform:translateY(-10px) rotate(6deg);opacity:.6}}
@keyframes meshFloat{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(20px,-20px,0)}}
@keyframes blobDriftA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,30px) scale(1.1)}}
@keyframes blobDriftB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,40px) scale(1.08)}}
@keyframes blobDriftC{0%{transform:translate(0,0) scale(1)}100%{transform:translate(50px,-20px) scale(1.12)}}
@keyframes blobDriftD{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-40px,-30px) scale(1.06)}}
@keyframes sparkleTwinkle{0%,100%{transform:scale(.7);opacity:.4}50%{transform:scale(1.2);opacity:1}}
@keyframes wordRise{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRise{0%{opacity:0;transform:translateY(20px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bubblePop{0%{opacity:0;transform:translateY(8px) scale(.85)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes frameCycle{
  0%{opacity:0}
  8%{opacity:1}
  25%{opacity:1}
  35%{opacity:0}
  100%{opacity:0}
}
@keyframes moteRise{
  0%{transform:translate3d(0,110vh,0) scale(.6);opacity:0}
  10%{opacity:.9}
  90%{opacity:.7}
  100%{transform:translate3d(40px,-20vh,0) scale(1.1);opacity:0}
}
@keyframes orbDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(30px,-20px,0) scale(1.1)}
}
@keyframes flareSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  .hero-frame,.sparkle,.mote,.orb,.flare,.hero h1 em,.helio,.helio.thinking,.helio.celebrate,.helio.asleep::after,.helio.thinking::after{animation:none!important}
  .hero-frame.f1{opacity:1!important}
  .hero h1 .word,.hero .lede,.hero-meta,.hero-cta,.hero-card,.chat-bubble,.pain-card{opacity:1!important;transform:none!important;animation:none!important}
}