/* ============================================================
   ALabs for Kids — Modern Unified Design System
   Warm, rounded, modern tech aesthetic with glassmorphism,
   crisp typography, soft glow highlights, and subtle micro-motion.
   ============================================================ */
:root{
  --ink:#110e26;
  --muted:#5e5b74;
  --line:#e8e5f2;
  --line-hover:#d2cded;
  --bg:#ffffff;
  --soft:#faf9fd;
  --brand:#5845eb;
  --brand-dk:#4030c7;
  --brand-soft:#f0eeff;
  --coral:#ff6b4a;
  --coral-soft:#fff1ec;
  --amber:#f5a623;
  --amber-soft:#fff7e8;
  --mint:#0ea77a;
  --mint-soft:#e6f8f1;
  --red:#d64545;
  --red-soft:#fdecec;
  --radius:20px;
  --maxw:1060px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand); transition:color .14s ease;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* ---------- header & navigation ---------- */
header.top{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(232,229,242,.8);
  box-shadow:0 4px 20px -6px rgba(17,14,38,.03);
}
.top .wrap{display:flex; align-items:center; gap:16px; height:68px;}

/* ---------- always-on-top announcement bar ---------- */
.always-on-top-bar{
  background:linear-gradient(90deg, #130d2d 0%, #291a6e 40%, #0d382f 100%);
  border-bottom:1px solid rgba(255,255,255,.14);
  color:#ffffff;
  position:relative;
  z-index:2;
  font-size:13.5px;
  line-height:1.4;
  overflow:hidden;
}
.always-on-top-bar::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation:aot-shimmer 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes aot-shimmer{
  0%{transform:translateX(-100%);}
  40%,100%{transform:translateX(100%);}
}
.top .wrap.aot-inner{
  height:auto !important;
  min-height:38px;
  padding:7px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}
.aot-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:99px;
  padding:2px 10px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.3px;
  color:#a7f3d0;
  text-transform:uppercase;
  flex-shrink:0;
}
.aot-pulse{
  width:6px; height:6px; border-radius:50%; background:#10b981;
  box-shadow:0 0 8px #10b981;
  animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.aot-text{
  font-weight:600;
  color:rgba(255,255,255,.95);
  letter-spacing:-.15px;
}
.aot-cta{
  display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  color:#ffffff !important;
  font-size:12px;
  font-weight:700;
  padding:3px 12px;
  border-radius:99px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(16,185,129,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  flex-shrink:0;
}
.aot-cta:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 4px 14px rgba(16,185,129,.55);
}
@media(max-width:768px){
  .top .wrap.aot-inner{
    padding:6px 14px;
    gap:8px;
    font-size:12px;
  }
  .aot-text{font-size:11.5px;}
  .aot-pill{display:none;}
  .aot-cta{padding:2.5px 10px; font-size:11.5px;}
}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.3px; text-decoration:none; color:var(--ink);}
.brand .brand-logo{
  height:42px; width:auto; border-radius:10px; flex:none; object-fit:contain;
  transition:transform .2s cubic-bezier(.2,1.4,.4,1);
}
.brand:hover .brand-logo{transform:rotate(-3deg) scale(1.08);}
.brand-title{display:flex; align-items:baseline; gap:6px; font-size:19px; font-weight:800; letter-spacing:-.6px;}
.brand-title .tagline{
  font-size:11.5px; font-weight:700; color:var(--brand-dk); background:var(--brand-soft);
  padding:2px 8px; border-radius:99px; letter-spacing:0;
}
.top nav{margin-left:auto; display:flex; align-items:center; gap:20px;}
.top nav a.nav-link{
  color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:600;
  position:relative; padding:4px 0;
}
.top nav a.nav-link:hover{color:var(--brand);}
.top nav a.nav-link.active{color:var(--brand); font-weight:700;}
.top nav a.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2.5px;
  border-radius:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:left;
  transition:transform .24s cubic-bezier(.22,.7,.3,1);
}
.top nav a.nav-link:hover::after,
.top nav a.nav-link.active::after{transform:scaleX(1);}

.langbtn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:99px; padding:7px 15px; font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:inherit;
  box-shadow:0 2px 6px -2px rgba(17,14,38,.04);
  transition:all .14s ease;
}
.langbtn:hover{border-color:var(--brand); color:var(--brand); box-shadow:0 4px 12px -2px rgba(88,69,235,.15);}

.btn{
  position:relative; overflow:hidden;
  display:inline-block; border:0; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg, #6352f2 0%, #4634d9 100%);
  color:#fff; text-decoration:none;
  padding:14px 28px; border-radius:99px; font-size:15.5px; font-weight:700;
  box-shadow:0 6px 20px -4px rgba(88,69,235,.36);
  transition:transform .2s cubic-bezier(.2,1,.3,1), background .2s ease, box-shadow .2s ease;
  z-index:1;
}
.btn::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.32) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.btn:hover::after{
  transform:translateX(120%);
}
.btn:hover{
  background:linear-gradient(135deg, #5340ec 0%, #3a28cb 100%);
  transform:translateY(-3px);
  box-shadow:0 12px 28px -4px rgba(88,69,235,.46);
}
.btn:active{transform:translateY(0) scale(.975); box-shadow:0 4px 12px -2px rgba(88,69,235,.3);}
.btn.ghost{
  background:rgba(255,255,255,.94); color:var(--ink); border:1px solid var(--line);
  box-shadow:0 2px 8px -2px rgba(17,14,38,.04);
}
.btn.ghost::after{
  background:linear-gradient(120deg, transparent 20%, rgba(88,69,235,.15) 50%, transparent 80%);
}
.btn.ghost:hover{
  border-color:var(--brand); color:var(--brand);
  transform:translateY(-3px);
  box-shadow:0 8px 22px -4px rgba(88,69,235,.18);
}
.btn.ghost:active{transform:translateY(0) scale(.975);}
.btn.sm{padding:9px 20px; font-size:14px;}
.btn[disabled]{opacity:.55; cursor:default; transform:none; box-shadow:none;}

/* ---------- page hero for subpages ---------- */
.page-hero{
  padding:56px 0 48px;
  background:
    radial-gradient(750px 380px at 8% -6%, #ece9ff 0%, rgba(255,255,255,0) 65%),
    radial-gradient(550px 320px at 92% 5%, #fff0ea 0%, rgba(255,255,255,0) 60%),
    #ffffff;
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{
  font-size:clamp(30px,4.5vw,46px); line-height:1.14; letter-spacing:-1.4px;
  margin:0 0 16px; font-weight:800; color:var(--ink);
}
.page-hero .lede{
  font-size:clamp(16px,1.8vw,18.5px); color:var(--muted); max-width:62ch; margin:0; line-height:1.6;
}

/* ---------- main hero ---------- */
.hero{
  padding:88px 0 76px;
  background:
    radial-gradient(850px 420px at 5% -8%, #ece9ff 0%, rgba(255,255,255,0) 65%),
    radial-gradient(650px 380px at 95% 2%, #fff0ea 0%, rgba(255,255,255,0) 62%),
    radial-gradient(420px 300px at 50% 100%, #f6f5ff 0%, rgba(255,255,255,0) 70%),
    #ffffff;
  position:relative; overflow:hidden;
}
.hero .wrap{position:relative; z-index:2;}
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.95); border:1px solid var(--line);
  box-shadow:0 2px 10px -2px rgba(88,69,235,.08);
  color:var(--brand-dk); font-size:13px; font-weight:700;
  padding:7px 16px; border-radius:99px; margin-bottom:22px;
  backdrop-filter:blur(8px);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kicker:hover{
  transform:translateY(-2px);
  border-color:#cfc7fc;
  box-shadow:0 6px 16px -3px rgba(88,69,235,.14);
}
.kicker::before{
  content:""; width:7px; height:7px; border-radius:99px; background:var(--coral);
  box-shadow:0 0 8px rgba(255,107,74,.6);
  animation:kicker-pulse 2.2s ease-in-out infinite;
}
@keyframes kicker-pulse{
  0%, 100%{transform:scale(1); opacity:1; box-shadow:0 0 8px rgba(255,107,74,.6);}
  50%{transform:scale(1.4); opacity:0.8; box-shadow:0 0 16px rgba(255,107,74,.9);}
}

.hero h1{
  font-size:clamp(34px,5.6vw,56px); line-height:1.08; letter-spacing:-1.8px;
  margin:0 0 22px; max-width:15ch; font-weight:800; color:var(--ink);
}
.hero .lede{font-size:clamp(16.5px,2vw,19.5px); color:var(--muted); max-width:54ch; margin:0 0 22px; line-height:1.6;}
.hero-quote{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.94); border:1px solid #dcd7fa; border-left:4px solid var(--brand);
  border-radius:14px; padding:13px 18px; margin:0 0 26px; max-width:56ch;
  box-shadow:0 4px 16px -4px rgba(88,69,235,.1);
  position:relative; overflow:hidden;
  transition:transform .22s cubic-bezier(.2,1,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.hero-quote:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -4px rgba(88,69,235,.16);
  border-color:var(--brand);
}
.hero-quote::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform:translateX(-100%);
  animation:quote-sheen 7s infinite cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
@keyframes quote-sheen{
  0%, 75%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
.hero-quote .hq-icon{font-size:20px; flex:none; position:relative; z-index:1;}
.hero-quote p{
  font-size:15px; font-weight:600; color:var(--ink); margin:0; line-height:1.5; position:relative; z-index:1;
}
.hero .cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:38px;}
.pills span{
  background:rgba(255,255,255,.95); border:1px solid var(--line); border-radius:99px;
  padding:8px 17px; font-size:13.5px; color:var(--muted); font-weight:600;
  box-shadow:0 2px 8px -2px rgba(17,14,38,.04);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pills span:hover{
  transform:translateY(-2px); border-color:#d4cefa;
  box-shadow:0 4px 12px -2px rgba(88,69,235,.12);
}

/* ---------- hero layout & brand visual ---------- */
.hero-grid{
  display:grid; grid-template-columns:1.24fr 0.86fr; gap:44px; align-items:center;
}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
}
/* Ambient background motion glow orbs — vibrant, living gradients */
.ambient-orbs{
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.orb{
  position:absolute; border-radius:50%; filter:blur(55px); opacity:0.55;
  mix-blend-mode:multiply; will-change:transform;
}
.orb-1{
  width:520px; height:520px; background:radial-gradient(circle, rgba(99,82,242,0.48) 0%, rgba(139,92,246,0.22) 60%, transparent 80%);
  top:-120px; left:-80px;
  animation:drift-orb-1 8s ease-in-out infinite alternate;
}
.orb-2{
  width:480px; height:480px; background:radial-gradient(circle, rgba(255,107,74,0.42) 0%, rgba(245,166,35,0.20) 60%, transparent 80%);
  top:-50px; right:-80px;
  animation:drift-orb-2 9s ease-in-out infinite alternate;
}
.orb-3{
  width:440px; height:440px; background:radial-gradient(circle, rgba(14,167,122,0.38) 0%, rgba(99,82,242,0.16) 60%, transparent 80%);
  bottom:-140px; left:35%;
  animation:drift-orb-3 10s ease-in-out infinite alternate;
}

@keyframes drift-orb-1{
  0%{transform:translate(0, 0) scale(1);}
  50%{transform:translate(70px, 45px) scale(1.12);}
  100%{transform:translate(-40px, 80px) scale(0.94);}
}
@keyframes drift-orb-2{
  0%{transform:translate(0, 0) scale(1);}
  50%{transform:translate(-75px, 55px) scale(1.15);}
  100%{transform:translate(50px, 70px) scale(0.90);}
}
@keyframes drift-orb-3{
  0%{transform:translate(0, 0) scale(1);}
  50%{transform:translate(60px, -45px) scale(1.12);}
  100%{transform:translate(-60px, -25px) scale(0.94);}
}

/* Floating tech chips in Hero with distinct animated motion */
.hero-visual{position:relative; perspective:1200px;}
.hero-card-wrap{
  position:relative; display:block; max-width:440px; margin:0 auto;
  transform-style:preserve-3d; transition:transform .14s ease-out;
}
.float-badge{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 12px 28px -4px rgba(17,14,38,.10), 0 4px 12px -1px rgba(88,69,235,.15);
  border-radius:99px; padding:9px 16px; font-size:13px; font-weight:700; color:var(--ink);
  z-index:4; cursor:default; white-space:nowrap; user-select:none;
  transition:transform .24s cubic-bezier(.2,1.4,.4,1), box-shadow .24s ease, border-color .24s ease;
  will-change:transform;
}
.float-badge:hover{
  transform:scale(1.12) translateY(-6px) !important;
  box-shadow:0 18px 36px -4px rgba(88,69,235,.30);
  border-color:var(--brand);
}
.fb-dot{width:9px; height:9px; border-radius:99px; position:relative; flex:none;}
.fb-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:99px;
  animation:radar-pulse 2s cubic-bezier(.2,.8,.4,1) infinite;
}
.fb-mint{background:var(--mint);}
.fb-mint::after{background:rgba(14,167,122,.55);}
.fb-brand{background:var(--brand);}
.fb-brand::after{background:rgba(88,69,235,.55);}
.fb-amber{background:var(--amber);}
.fb-amber::after{background:rgba(245,166,35,.55);}
.fb-coral{background:var(--coral);}
.fb-coral::after{background:rgba(255,107,74,.55);}

@keyframes radar-pulse{
  0%{transform:scale(0.8); opacity:0.95;}
  100%{transform:scale(2.8); opacity:0;}
}

.fb-1{top:-18px; left:-28px; animation:float-chip-1 3.4s ease-in-out infinite;}
.fb-2{top:20px; right:-32px; animation:float-chip-2 3.8s ease-in-out infinite;}
.fb-3{bottom:60px; left:-34px; animation:float-chip-3 3.5s ease-in-out infinite;}
.fb-4{bottom:-16px; right:-22px; animation:float-chip-4 4.1s ease-in-out infinite;}

@keyframes float-chip-1{
  0%{transform:translate(0, 0) rotate(0deg);}
  50%{transform:translate(8px, -18px) rotate(2.5deg);}
  100%{transform:translate(0, 0) rotate(0deg);}
}
@keyframes float-chip-2{
  0%{transform:translate(0, 0) rotate(0deg);}
  50%{transform:translate(-10px, -16px) rotate(-2.5deg);}
  100%{transform:translate(0, 0) rotate(0deg);}
}
@keyframes float-chip-3{
  0%{transform:translate(0, 0) rotate(0deg);}
  50%{transform:translate(10px, 16px) rotate(-2deg);}
  100%{transform:translate(0, 0) rotate(0deg);}
}
@keyframes float-chip-4{
  0%{transform:translate(0, 0) rotate(0deg);}
  50%{transform:translate(-8px, 18px) rotate(2deg);}
  100%{transform:translate(0, 0) rotate(0deg);}
}

@media(max-width:920px){
  .fb-1{top:-12px; left:4px;}
  .fb-2{top:12px; right:4px;}
  .fb-3{bottom:48px; left:4px;}
  .fb-4{bottom:-10px; right:4px;}
  .float-badge{padding:7px 13px; font-size:12px;}
}
@media(max-width:540px){
  .float-badge{display:none;}
}

.hero-brand-card{
  background:#ffffff; border:1.5px solid rgba(220,215,250,.9); border-radius:28px;
  padding:24px 20px 18px;
  box-shadow:0 20px 48px -12px rgba(88,69,235,.18), 0 0 0 1px rgba(88,69,235,.08);
  text-align:center; position:relative; max-width:440px; margin:0 auto;
  transition:transform .28s cubic-bezier(.2,1,.3,1), box-shadow .28s ease;
  z-index:2;
  animation:hero-card-pulse 5s ease-in-out infinite alternate;
}
@keyframes hero-card-pulse{
  0%{box-shadow:0 20px 48px -12px rgba(88,69,235,.18), 0 0 30px -6px rgba(88,69,235,.12);}
  50%{box-shadow:0 24px 54px -10px rgba(14,167,122,.22), 0 0 36px -6px rgba(14,167,122,.15);}
  100%{box-shadow:0 20px 48px -12px rgba(255,107,74,.20), 0 0 32px -6px rgba(255,107,74,.14);}
}
.hero-brand-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -10px rgba(88,69,235,.26);
}
.hero-brand-img{
  width:100%; height:auto; max-height:260px; object-fit:contain; border-radius:16px; display:block; margin:0 auto;
}
.hero-brand-caption{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.hbc-badge{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  background:var(--brand-soft); color:var(--brand-dk); padding:4px 12px; border-radius:99px; margin-bottom:6px;
}
.hero-brand-caption p{
  font-size:13.5px; font-weight:600; color:var(--muted); margin:0; line-height:1.45;
}

/* ---------- live status indicator in header ---------- */
.live-indicator{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(14,167,122,.08); border:1px solid rgba(14,167,122,.25);
  border-radius:99px; padding:4px 12px; font-size:12px; font-weight:700; color:#0b7a5a;
  margin-right:auto; margin-left:14px;
}
.pulse-dot{
  width:7px; height:7px; border-radius:99px; background:var(--mint); position:relative; flex:none;
}
.pulse-dot::after{
  content:""; position:absolute; inset:-3px; border-radius:99px; background:rgba(14,167,122,.55);
  animation:live-radar 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}
@keyframes live-radar{
  0%{transform:scale(0.8); opacity:1;}
  100%{transform:scale(2.6); opacity:0;}
}
@media(max-width:768px){.live-indicator{display:none;}}

/* ---------- infinite tech marquee ticker ---------- */
.marquee-band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, #faf9fd 0%, #ffffff 50%, #faf9fd 100%);
  padding:14px 0;
  overflow:hidden;
  position:relative;
  user-select:none;
}
.marquee-band::before, .marquee-band::after{
  content:""; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none;
}
.marquee-band::before{left:0; background:linear-gradient(90deg, #ffffff 0%, transparent 100%);}
.marquee-band::after{right:0; background:linear-gradient(90deg, transparent 0%, #ffffff 100%);}
.marquee-inner{display:flex; overflow:hidden;}
.marquee-track{
  display:flex; gap:16px; flex:none;
  animation:marquee-scroll 34s linear infinite;
  will-change:transform;
}
.marquee-band:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.m-item{
  display:inline-flex; align-items:center; gap:8px;
  background:#ffffff; border:1px solid var(--line); border-radius:99px;
  padding:7px 16px; font-size:13.5px; font-weight:700; color:var(--ink);
  box-shadow:0 2px 8px -2px rgba(17,14,38,.04);
  white-space:nowrap; transition:transform .18s ease, border-color .18s ease;
}
.m-item:hover{
  transform:translateY(-2px); border-color:#cfc7fc; color:var(--brand);
}
.m-dot{width:7px; height:7px; border-radius:99px; flex:none;}
.m-dot.mint{background:var(--mint); box-shadow:0 0 6px rgba(14,167,122,.5);}
.m-dot.brand{background:var(--brand); box-shadow:0 0 6px rgba(88,69,235,.5);}
.m-dot.amber{background:var(--amber); box-shadow:0 0 6px rgba(245,166,35,.5);}
.m-dot.coral{background:var(--coral); box-shadow:0 0 6px rgba(255,107,74,.5);}

/* ---------- sections ---------- */
section{padding:76px 0;}
section.alt{background:var(--soft);}
.sec-head{max-width:60ch; margin-bottom:40px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:var(--brand); margin-bottom:12px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:99px; background:var(--coral);}
.sec-head h2{font-size:clamp(26px,3.4vw,36px); line-height:1.16; letter-spacing:-1.2px; margin:0 0 14px; font-weight:800;}
.sec-head p{color:var(--muted); font-size:17.5px; margin:0; line-height:1.6;}

.grid{display:grid; gap:20px;}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  box-shadow:0 4px 16px -4px rgba(17,14,38,.04);
}
.card h3{font-size:19px; margin:0 0 10px; letter-spacing:-.4px; font-weight:700;}
.card p{color:var(--muted); margin:0; font-size:15.4px;}
.tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.3px;
  padding:5px 12px; border-radius:99px; margin-bottom:14px;
  background:var(--brand-soft); color:var(--brand-dk);
}
.tag.coral{background:var(--coral-soft); color:#c2410c;}
.tag.mint{background:var(--mint-soft); color:#0b7a5a;}
.tag.amber{background:var(--amber-soft); color:#b45309;}

/* ---------- track cards (legacy) ---------- */
.tracks-grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));}
.track-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; display:flex; flex-direction:column; position:relative;
  box-shadow:0 4px 18px -4px rgba(17,14,38,.04);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.track-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px -8px rgba(88,69,235,.12);
}
.track-card.fast{
  border-color:#cfc7fc;
  background:linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
  box-shadow:0 8px 24px -6px rgba(88,69,235,.10);
}
.track-card.fast:hover{border-color:var(--brand);}
.track-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  padding:5px 12px; border-radius:99px; margin-bottom:14px; align-self:flex-start;
}
.track-badge.fast{background:var(--brand-soft); color:var(--brand-dk);}
.track-badge.slow{background:var(--mint-soft); color:#0b7a5a;}
.track-title{font-size:26px; font-weight:800; letter-spacing:-.8px; margin:0 0 6px; color:var(--ink);}
.track-sub{font-size:15px; color:var(--muted); margin:0 0 18px; line-height:1.5;}
.track-rhythm{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--soft); border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; font-size:14px; font-weight:700; color:var(--ink);
  margin-bottom:22px; width:fit-content;
}
.track-card.fast .track-rhythm{background:#f3f1ff; border-color:#dcd7fa; color:var(--brand-dk);}
.track-features{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px;}
.track-features li{
  display:flex; align-items:flex-start; gap:10px; font-size:14.8px; line-height:1.5; color:var(--ink);
}
.track-features li::before{
  content:"✓"; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:99px;
  background:var(--mint-soft); color:var(--mint); font-size:12px; font-weight:800; flex:none; margin-top:1px;
}
.track-card.fast .track-features li::before{
  background:var(--brand-soft); color:var(--brand);
}
.track-footer{
  margin-top:auto; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* ---------- curriculum pillars ---------- */
.pillar-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(235px, 1fr));}

/* ---------- business logic & founder credibility ---------- */
.biz-proof{
  background:linear-gradient(135deg, #f7f6ff 0%, #ffffff 50%, #f0fdf9 100%);
  border:1.5px solid #dcd7fa; border-radius:var(--radius);
  padding:32px 34px; margin-top:34px;
  box-shadow:0 8px 24px -6px rgba(88,69,235,.08);
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:flex-start;
}
@media(max-width:680px){
  .biz-proof{grid-template-columns:1fr; gap:16px; padding:24px;}
}
.biz-badge{
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(135deg, #6352f2 0%, #0ea77a 100%);
  color:#fff; display:grid; place-items:center; font-size:24px; flex:none;
  box-shadow:0 6px 16px -3px rgba(14,167,122,.35);
}
.biz-content h3{font-size:20px; font-weight:800; letter-spacing:-.5px; margin:0 0 8px; color:var(--ink);}
.biz-content p{color:var(--muted); font-size:15px; margin:0 0 14px; line-height:1.62;}
.biz-tags{display:flex; flex-wrap:wrap; gap:8px;}
.biz-tags span{
  background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:99px;
  padding:5px 13px; font-size:12.5px; font-weight:700; color:var(--ink);
}
.pillar-card{
  background:#ffffff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; box-shadow:0 4px 16px -4px rgba(17,14,38,.04);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  display:flex; flex-direction:column;
}
.pillar-card:hover{
  transform:translateY(-3px);
  border-color:#d6d1fa;
  box-shadow:0 10px 26px -6px rgba(88,69,235,.1);
}
.pillar-card.lead{
  border-color:#cfc7fc;
  background:linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
  box-shadow:0 6px 20px -4px rgba(88,69,235,.08);
}
.pillar-head{margin-bottom:18px;}
.pillar-tag{
  font-size:11.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color:var(--brand); margin-bottom:8px; display:inline-block;
}
.pillar-card h3{font-size:20px; font-weight:800; letter-spacing:-.5px; margin:0 0 8px; color:var(--ink);}
.pillar-card p.p-desc{font-size:14.5px; color:var(--muted); margin:0 0 16px; line-height:1.55;}
.pillar-items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.pillar-items li{
  font-size:13.8px; font-weight:600; color:var(--ink);
  padding:9px 12px; background:var(--soft); border-radius:10px; border:1px solid rgba(232,229,242,.7);
  display:flex; align-items:center; gap:10px;
}
.pillar-items li .dot{
  width:7px; height:7px; border-radius:99px; background:var(--brand); flex:none;
}

/* ---------- steps & animated flow line ---------- */
.steps-wrapper{position:relative;}
.step-flow-line{
  position:absolute; top:46px; left:8%; right:8%; height:3px;
  background:linear-gradient(90deg, #5845eb 0%, #ff6b4a 50%, #0ea77a 100%);
  background-size:200% 100%;
  animation:stream-flow 4s linear infinite;
  border-radius:3px;
  z-index:0;
  opacity:0.85;
}
@media(max-width:820px){
  .step-flow-line{display:none;}
}

.step{
  position:relative; z-index:1;
  display:flex; gap:18px; align-items:flex-start;
  background:#ffffff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; box-shadow:0 4px 16px -4px rgba(17,14,38,.04);
  transition:transform .28s cubic-bezier(.2,1,.3,1), box-shadow .28s ease, border-color .22s ease;
}
.step:hover{
  transform:translateY(-6px);
  border-color:#d4cefa;
  box-shadow:0 18px 38px -8px rgba(88,69,235,.16);
}
.step .n{
  position:relative;
  flex:none; width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center; font-weight:800; font-size:18px;
  box-shadow:0 4px 14px -2px rgba(17,14,38,.08);
}
.step:nth-child(1) .n{background:var(--brand-soft); color:var(--brand-dk);}
.step:nth-child(2) .n{background:var(--coral-soft); color:#c2410c;}
.step:nth-child(3) .n{background:var(--mint-soft); color:#0b7a5a;}

.step-ping-ring{
  position:absolute; inset:-5px; border-radius:19px; pointer-events:none;
  animation:step-ring-pulse 2.8s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}
.step:nth-child(1) .step-ping-ring{border:2px solid rgba(88,69,235,.45);}
.step:nth-child(2) .step-ping-ring{border:2px solid rgba(255,107,74,.45); animation-delay:.9s;}
.step:nth-child(3) .step-ping-ring{border:2px solid rgba(14,167,122,.45); animation-delay:1.8s;}

@keyframes step-ring-pulse{
  0%{transform:scale(0.92); opacity:0.85;}
  100%{transform:scale(1.45); opacity:0;}
}

.step-meta{display:flex; align-items:center; gap:6px; margin-bottom:6px;}
.step-icon{font-size:16px; display:inline-block; transition:transform .24s cubic-bezier(.2,1.4,.4,1);}
.step:hover .step-icon{transform:scale(1.35) rotate(-10deg);}
.step-tag{
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
}
.step h3{font-size:18px; margin:0 0 8px; font-weight:700;}
.step p{color:var(--muted); font-size:15px; margin:0; line-height:1.55;}

/* Flow card with living animated border aura */
.flow-hero-card{
  position:relative;
  margin-top:34px;
  border-radius:24px;
  padding:3px;
  background:linear-gradient(90deg, #0ea77a, #5845eb, #ff6b4a, #0ea77a);
  background-size:300% 100%;
  animation:stream-flow 7s linear infinite;
  box-shadow:0 12px 34px -6px rgba(14,167,122,.18);
  transition:transform .24s ease, box-shadow .24s ease;
}
.flow-hero-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px -6px rgba(88,69,235,.26);
}
.flow-card-body{
  background:linear-gradient(135deg, #f3fdf9 0%, #ffffff 50%, #f7f6ff 100%);
  border-radius:21px;
  padding:28px 32px;
}
.flow-card-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.95); border:1px solid rgba(14,167,122,.35);
  box-shadow:0 2px 8px -2px rgba(14,167,122,.15);
  border-radius:99px; padding:5px 14px; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; color:#0b7a5a;
  margin-bottom:14px;
}
.flow-ping-dot{
  width:7px; height:7px; border-radius:99px; background:var(--mint); position:relative; flex:none;
}
.flow-ping-dot::after{
  content:""; position:absolute; inset:-3px; border-radius:99px; background:rgba(14,167,122,.5);
  animation:live-radar 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}
.flow-card-content{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:flex-start;
}
@media(max-width:680px){
  .flow-card-content{grid-template-columns:1fr; gap:14px;}
  .flow-card-body{padding:22px;}
}
.flow-icon-circle{
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(135deg, #e6f8f1 0%, #ede9fe 100%);
  border:1px solid rgba(14,167,122,.25);
  display:grid; place-items:center; font-size:24px; flex:none;
  box-shadow:0 4px 14px -2px rgba(14,167,122,.15);
}
.flow-hourglass{
  display:inline-block;
  animation:flow-sway 4s ease-in-out infinite alternate;
}
@keyframes flow-sway{
  0%{transform:rotate(-8deg) scale(1);}
  50%{transform:rotate(8deg) scale(1.15);}
  100%{transform:rotate(-8deg) scale(1);}
}
.flow-card-content h4{
  font-size:20px; font-weight:800; letter-spacing:-.5px; margin:0 0 8px; color:var(--ink);
}
.flow-card-content p{
  color:var(--muted); font-size:15px; margin:0; line-height:1.62;
}

/* ---------- bundles ---------- */
.bundle{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column;
  box-shadow:0 4px 16px -4px rgba(17,14,38,.04);
}
.bundle .ages{
  align-self:flex-start; margin-bottom:14px; padding:5px 12px; border-radius:99px;
  background:var(--brand-soft); color:var(--brand-dk);
  font-size:11.5px; font-weight:700; letter-spacing:.2px;
}
.bundle h3{font-size:18px; margin:0 0 8px; font-weight:800; letter-spacing:-.4px;}
.bundle p{color:var(--muted); font-size:14.5px; margin:0 0 18px; line-height:1.55;}
.bundle .bp{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-size:14px; color:var(--muted);
}
.bundle .bp b{font-size:24px; font-weight:800; letter-spacing:-.8px; color:var(--ink);}
.bundle.hero-b{
  border-color:#cfc7fc;
  background:linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
  box-shadow:0 8px 26px -6px rgba(88,69,235,.12);
}
.bundle .plan-features{
  list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px;
}
.bundle .plan-features li{
  font-size:13.5px; font-weight:600; color:var(--ink);
  display:flex; align-items:flex-start; gap:8px; line-height:1.45;
}
.bundle .plan-features li::before{
  content:"✓"; font-size:11px; font-weight:800; color:var(--mint);
  width:16px; height:16px; border-radius:50%; background:var(--mint-soft);
  display:grid; place-items:center; flex:none; margin-top:2px;
}
.bundle.hero-b .plan-features li::before{
  color:var(--brand); background:var(--brand-soft);
}

/* ---------- pay-as-you-go fallback ---------- */
.rate{
  display:flex; flex-wrap:wrap; gap:12px 34px; align-items:baseline;
  margin-top:12px; font-size:15.5px;
}
.rate span{color:var(--muted); font-weight:500;}
.rate b{color:var(--ink); font-weight:800; font-size:20px; letter-spacing:-.5px;}

/* Six bundles must read as two even rows of three. */
.gb{grid-template-columns:repeat(3,1fr);}
@media(max-width:860px){ .gb{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .gb{grid-template-columns:1fr;} }

/* ---------- promises ---------- */
.promise{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px;
  box-shadow:0 2px 8px -2px rgba(17,14,38,.03);
}
.promise .dot{
  flex:none; width:12px; height:12px; border-radius:99px; margin-top:7px;
  box-shadow:0 0 10px rgba(88,69,235,.2);
}
.promise:nth-child(1) .dot{background:var(--brand); box-shadow:0 0 10px rgba(88,69,235,.4);}
.promise:nth-child(2) .dot{background:var(--coral); box-shadow:0 0 10px rgba(255,107,74,.4);}
.promise:nth-child(3) .dot{background:var(--mint); box-shadow:0 0 10px rgba(14,167,122,.4);}
.promise:nth-child(4) .dot{background:var(--amber); box-shadow:0 0 10px rgba(245,166,35,.4);}
.promise h3{font-size:17px; margin:0 0 6px; font-weight:700;}
.promise p{color:var(--muted); font-size:15px; margin:0; line-height:1.55;}

/* ---------- faq ---------- */
details.faq{
  border:1px solid var(--line); border-radius:16px;
  background:#fff; margin-bottom:12px; padding:0 24px;
  box-shadow:0 2px 6px -2px rgba(17,14,38,.03);
  transition:border-color .15s ease, box-shadow .15s ease;
}
details.faq:hover{
  border-color:#d4cefa;
  box-shadow:0 4px 14px -3px rgba(17,14,38,.05);
}
details.faq summary{
  cursor:pointer; padding:20px 34px 20px 0; font-weight:700; font-size:16.5px;
  list-style:none; position:relative; color:var(--ink);
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--brand); font-size:22px; font-weight:500;
}
details.faq[open] summary::after{content:"–";}
details.faq .body{padding:0 0 22px; color:var(--muted); font-size:15.4px; max-width:70ch; line-height:1.65;}

/* ---------- cta band ---------- */
.cta-band{
  background:linear-gradient(135deg, #5b4ae6 0%, #3e2ec2 100%);
  border-radius:26px; padding:44px 40px; color:#fff;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
  box-shadow:0 16px 40px -10px rgba(88,69,235,.4); margin-top:20px;
}
.cta-band h3{font-size:28px; margin:0 0 8px; font-weight:800; letter-spacing:-.8px;}
.cta-band p{margin:0; opacity:.9; font-size:16.5px; max-width:44ch;}
.cta-band .btn{background:#fff; color:var(--brand-dk); box-shadow:0 4px 14px rgba(0,0,0,.15); font-weight:700;}
.cta-band .btn:hover{background:#f4f2ff; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.2);}
.cta-band .btn.ghost{
  background:rgba(255,255,255,.12);
  color:#ffffff !important;
  border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(8px);
  box-shadow:none;
}
.cta-band .btn.ghost:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.8);
  color:#ffffff !important;
  transform:translateY(-2px);
}

/* ---------- teaser pricing cards & policy ---------- */
.teaser-plans{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-bottom:18px;
}
@media(max-width:860px){
  .teaser-plans{grid-template-columns:1fr; gap:14px;}
}
.teaser-plan-card{
  background:#ffffff;
  border:1.5px solid var(--line);
  border-radius:20px;
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow:0 4px 16px -4px rgba(17,14,38,.04);
}
.teaser-plan-card:hover{
  transform:translateY(-3px);
  border-color:#cfc7fc;
  box-shadow:0 12px 28px -6px rgba(88,69,235,.12);
}
.teaser-plan-card.featured{
  border-color:#cfc7fc;
  background:linear-gradient(180deg, #faf9ff 0%, #ffffff 100%);
  box-shadow:0 8px 24px -6px rgba(88,69,235,.14);
}
.tp-pill{
  align-self:flex-start;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:99px;
  background:var(--brand-soft);
  color:var(--brand-dk);
  margin-bottom:12px;
}
.tp-pill.best{
  background:linear-gradient(135deg, #5845eb 0%, #7c6dfa 100%);
  color:#ffffff;
  box-shadow:0 2px 8px rgba(88,69,235,.3);
}
.tp-pill.free{
  background:var(--mint-soft);
  color:#0b7a5a;
  border:1px solid rgba(14,167,122,.25);
}
.tp-title{
  font-size:16.5px;
  font-weight:800;
  color:var(--ink);
  margin:0 0 8px;
  letter-spacing:-.3px;
}
.tp-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:10px;
}
.tp-price b{
  font-size:28px;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--brand);
}
.tp-price b.tp-free{
  color:var(--mint);
}
.tp-price span{
  font-size:13.5px;
  color:var(--muted);
  font-weight:600;
}
.tp-desc{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.52;
  margin:0;
}

/* Reassurance & Transparency strip */
.teaser-policy{
  background:linear-gradient(135deg, #f7f6ff 0%, #ffffff 50%, #f0fdf9 100%);
  border:1.5px solid #dcd7fa;
  border-radius:18px;
  padding:16px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px;
  box-shadow:0 6px 18px -4px rgba(88,69,235,.06);
}
.tp-guarantee-item{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.8px;
  color:var(--muted);
  line-height:1.45;
}
.tp-guarantee-item b{
  color:var(--ink);
}
.tp-guarantee-icon{
  font-size:18px;
  flex:none;
}

/* ============================================================
   BOOKING FORM
   ============================================================ */
.book-card{
  background:#fff; border:1px solid var(--line); border-radius:26px;
  padding:38px; max-width:740px; margin:0 auto;
  box-shadow:0 16px 42px -12px rgba(88,69,235,.09), 0 4px 16px -2px rgba(17,14,38,.04);
}
.banner{border-radius:14px; padding:16px 20px; font-size:14.5px; margin-bottom:24px; display:none;}
.banner.warn{background:var(--amber-soft); border:1px solid #f5dda6; color:#7a4f06;}
.banner.err{background:var(--red-soft); border:1px solid #f3c8c8; color:#8c2318;}
.banner b{display:block; margin-bottom:4px;}

.fs{margin-bottom:30px;}
.fs > .fh{display:flex; align-items:center; gap:11px; margin-bottom:16px;}
.fs > .fh .n{
  width:28px; height:28px; border-radius:9px; background:var(--brand-soft);
  color:var(--brand-dk); display:grid; place-items:center;
  font-size:13px; font-weight:800; flex:none;
}
.fs > .fh h3{font-size:17px; margin:0; font-weight:700;}

.row{display:grid; gap:16px; grid-template-columns:1fr 1fr;}
@media(max-width:620px){ .row{grid-template-columns:1fr;} }

label.lb{display:block; font-size:13.8px; font-weight:600; margin-bottom:7px;}
label.lb .opt{color:var(--muted); font-weight:400;}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%; font-family:inherit; font-size:15.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; transition:border-color .12s ease, box-shadow .12s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(91,75,232,.12);
}
textarea{resize:vertical; min-height:88px;}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#e08e8e; background:#fffbfb;}
.msg{color:var(--red); font-size:13.2px; margin-top:6px; display:none;}
.field.bad .msg{display:block;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.daystrip{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px;}
.day{
  flex:none; width:70px; padding:12px 0; border-radius:16px; cursor:pointer;
  border:1px solid var(--line); background:#fff; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  box-shadow:0 2px 6px -2px rgba(17,14,38,.04);
}
.day:hover{border-color:var(--brand); box-shadow:0 4px 12px -2px rgba(88,69,235,.16);}
.day.on{
  background:linear-gradient(135deg, #6352f2 0%, #4835dd 100%);
  border-color:var(--brand); color:#fff;
  box-shadow:0 6px 16px -3px rgba(88,69,235,.38);
}
.day .dw{font-size:11.5px; font-weight:600; opacity:.75; letter-spacing:.3px;}
.day .dn{font-size:20px; font-weight:800; line-height:1.1;}
.day .dm{font-size:11.5px; opacity:.75;}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.chip{
  border:1px solid var(--line); background:#fff; border-radius:99px;
  padding:10px 18px; font-family:inherit; font-size:14.8px; font-weight:600;
  color:var(--ink); cursor:pointer; transition:all .12s ease;
  box-shadow:0 2px 6px -2px rgba(17,14,38,.04);
}
.chip:hover{border-color:var(--brand); color:var(--brand);}
.chip.on{
  background:linear-gradient(135deg, #6352f2 0%, #4835dd 100%);
  border-color:var(--brand); color:#fff;
  box-shadow:0 4px 12px -2px rgba(88,69,235,.35);
}
.slot-note{font-size:13.3px; color:var(--muted); margin-top:12px;}
.slot-empty{color:var(--muted); font-size:14.6px; margin:6px 0;}

.consent{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:14px; padding:17px; background:var(--soft);
}
.consent input{margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--brand);}
.consent .txt{font-size:14.3px; color:var(--muted); line-height:1.6;}
.consent.bad{border-color:#e08e8e; background:#fffbfb;}

.note{border-radius:14px; padding:16px 20px; font-size:14.3px; line-height:1.62;
  background:var(--brand-soft); border:1px solid #dbd6ff; color:#332b8f;}
.note b{color:var(--brand-dk);}

.followup-box{
  margin:20px auto 16px; max-width:440px;
  background:linear-gradient(135deg, rgba(82,67,238,.06), rgba(14,167,122,.08));
  border:1.5px solid rgba(82,67,238,.22);
  border-radius:14px; padding:16px 20px; text-align:center;
  box-shadow:0 6px 20px -4px rgba(82,67,238,.12);
}
#successPanel{display:none; text-align:center; padding:24px 0;}
#successPanel .tick{
  width:64px; height:64px; border-radius:99px; background:var(--mint-soft);
  color:var(--mint); display:grid; place-items:center; font-size:32px; margin:0 auto 20px;
  box-shadow:0 4px 16px -2px rgba(14,167,122,.25);
}
#successPanel h3{font-size:26px; margin:0 0 10px; letter-spacing:-.6px; font-weight:800;}
#successPanel p{color:var(--muted); max-width:44ch; margin:0 auto 8px;}
#successPanel .ref{
  display:inline-block; background:var(--soft); border:1px solid var(--line);
  border-radius:12px; padding:12px 20px; margin:16px 0 6px;
  font:14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
#successPanel .ref b{color:var(--brand-dk);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:44px 0; color:var(--muted); font-size:14px; background:#fff;}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;}
footer .footer-brand-line{margin:0 0 6px; font-size:13.2px; opacity:.9;}
footer .footer-brand-line a{color:var(--brand); font-weight:700; text-decoration:none; transition:color .15s ease, text-decoration .15s ease;}
footer .footer-brand-line a:hover{text-decoration:underline; color:var(--brand-dk);}

/* ============================================================
   MOTION & ANIMATIONS
   ============================================================ */
@keyframes rise{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes riseIn{
  from{opacity:0; transform:translateX(-10px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes pop{
  0%{opacity:0; transform:scale(.75);}
  60%{opacity:1; transform:scale(1.08);}
  100%{opacity:1; transform:scale(1);}
}
@keyframes chip-pop{
  0%{transform:scale(.92);}
  50%{transform:scale(1.06);}
  100%{transform:scale(1);}
}
@keyframes ring{
  from{box-shadow:inset 0 0 0 1.5px #d8d3ff, 0 0 0 0 rgba(91,75,232,.30);}
  to{box-shadow:inset 0 0 0 1.5px #d8d3ff, 0 0 0 15px rgba(91,75,232,0);}
}
@keyframes breathe{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.24); opacity:.75;}
}

/* hero cascade entrance */
html.anim .hero .kicker,
html.anim .hero h1,
html.anim .hero .lede,
html.anim .hero .hero-quote,
html.anim .hero .cta,
html.anim .hero .pills,
html.anim .hero-brand-card,
html.anim .float-badge{animation:rise .68s cubic-bezier(.16,1,.3,1) both;}
html.anim .hero .kicker{animation-delay:.04s;}
html.anim .hero h1{animation-delay:.12s;}
html.anim .hero .lede{animation-delay:.20s;}
html.anim .hero .hero-quote{animation-delay:.26s;}
html.anim .hero .cta{animation-delay:.34s;}
html.anim .hero .pills{animation-delay:.42s;}
html.anim .hero-brand-card{animation-delay:.24s;}
html.anim .fb-1{animation-delay:.40s;}
html.anim .fb-2{animation-delay:.48s;}
html.anim .fb-3{animation-delay:.56s;}
html.anim .fb-4{animation-delay:.64s;}

/* page hero entrance */
html.anim .page-hero .eyebrow,
html.anim .page-hero h1,
html.anim .page-hero .lede{animation:rise .66s cubic-bezier(.16,1,.3,1) both;}
html.anim .page-hero .eyebrow{animation-delay:.05s;}
html.anim .page-hero h1{animation-delay:.14s;}
html.anim .page-hero .lede{animation-delay:.22s;}

/* scroll reveal */
html.anim [data-rv]{opacity:0;}
html.anim [data-rv].in{opacity:1; animation:rise .68s cubic-bezier(.16,1,.3,1) both;}

/* FAQ answers slide in smoothly */
details.faq[open] .body{animation:rise .32s ease both;}

/* ---------- interactive hover, press and focus micro-motion ---------- */
.card, .pillar-card, .track-card, .bundle, .step, .promise, .biz-proof{
  transition:transform .28s cubic-bezier(.2,1,.3,1), border-color .22s ease, box-shadow .28s cubic-bezier(.2,1,.3,1);
}
.card:hover, .pillar-card:hover, .track-card:hover, .bundle:hover{
  transform:translateY(-5px);
  border-color:#d4cefa;
  box-shadow:0 18px 36px -10px rgba(88,69,235,.15), 0 4px 12px -2px rgba(17,14,38,.04);
}
.track-card.fast:hover{
  border-color:var(--brand);
  box-shadow:0 20px 40px -10px rgba(88,69,235,.22);
}
.step:hover{
  transform:translateY(-3px);
  border-color:#d4cefa;
  box-shadow:0 12px 26px -8px rgba(88,69,235,.12);
}
.step .n{transition:transform .24s cubic-bezier(.22,.7,.3,1);}
.step:hover .n{transform:translateY(-3px) rotate(-6deg) scale(1.08);}

.promise:hover{
  transform:translateY(-3px);
  border-color:#dcd7fa;
  box-shadow:0 10px 24px -6px rgba(88,69,235,.10);
}
.promise .dot{transition:transform .22s ease, box-shadow .22s ease;}
.promise:hover .dot{transform:scale(1.4); box-shadow:0 0 12px currentColor;}

.pillar-card:hover .pillar-tag{
  transform:translateX(3px);
  transition:transform .2s ease;
}
.pillar-card:hover .pillar-items li .dot{
  transform:scale(1.35);
  box-shadow:0 0 8px var(--brand);
  transition:transform .2s ease, box-shadow .2s ease;
}

details.faq{
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
details.faq:hover{
  border-color:#d4cefa;
  box-shadow:0 6px 18px -4px rgba(88,69,235,.08);
}
details.faq summary::after{transition:transform .22s ease;}
details.faq summary:hover::after{transform:translateY(-50%) scale(1.2);}

.day,.chip{transition:transform .14s cubic-bezier(.2,1,.3,1), border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;}
.day:hover,.chip:hover{transform:translateY(-2px);}
.day:active,.chip:active{transform:translateY(0) scale(.97);}
.day.on,.chip.on{animation:chip-pop .24s cubic-bezier(.2,1.4,.4,1);}

.brand .brand-logo{transition:transform .3s cubic-bezier(.2,1.4,.4,1);}
.brand:hover .brand-logo{transform:rotate(-6deg) scale(1.08);}

/* ---------- interactive spotlight card glow ---------- */
.spotlight-card{
  position:relative;
  overflow:hidden;
}
.spotlight-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(88,69,235,0.09), transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:1;
}
.spotlight-card:hover::before{
  opacity:1;
}
.spotlight-card > *{
  position:relative;
  z-index:2;
}

/* ---------- live stats & metric strip ---------- */
.stats-strip{
  padding:36px 0;
  background:linear-gradient(180deg, #f8f7ff 0%, #ffffff 50%, #f4faf8 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:540px){
  .stats-grid{grid-template-columns:1fr;}
}
.stat-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 18px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 4px 16px -4px rgba(17,14,38,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:default;
}
.stat-card:hover{
  transform:translateY(-4px);
  border-color:#dcd7fa;
  box-shadow:0 12px 28px -6px rgba(88,69,235,.14);
}
.stat-icon-wrap{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;
  margin-bottom:12px;
  background:var(--soft);
  border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,1.4,.4,1);
}
.stat-card:hover .stat-icon-wrap{
  transform:scale(1.15) rotate(-4deg);
}
.stat-num{
  font-size:36px;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1;
  color:var(--ink);
  margin-bottom:6px;
  display:inline-flex;
  align-items:baseline;
  gap:3px;
}
.stat-counter{
  display:inline-block;
}
.stat-sym{
  font-size:17px;
  font-weight:800;
  color:var(--brand);
}
.stat-label{
  font-size:14.5px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:4px;
}
.stat-sub{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.45;
}

/* ---------- interactive lab terminal showcase ---------- */
.terminal-showcase{
  margin-top:44px;
  background:#0d1117;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 24px 60px -12px rgba(13,17,23,.7), 0 0 32px -8px rgba(88,69,235,.25);
  overflow:hidden;
  position:relative;
}
.terminal-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;
  gap:12px;
}
.window-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.wc-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
}
.wc-red{background:#ff5f56;}
.wc-yellow{background:#ffbd2e;}
.wc-green{background:#27c93f;}
.terminal-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.t-tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:#94a3b8;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  font-family:inherit;
}
.t-tab:hover{
  color:#f1f5f9;
  background:rgba(255,255,255,.07);
}
.t-tab.active{
  color:#ffffff;
  background:rgba(88,69,235,.35);
  border-color:rgba(124,107,255,.6);
  box-shadow:0 0 16px rgba(88,69,235,.3);
}
.terminal-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:#34d399;
  font-family:Consolas, Monaco, monospace;
}
.terminal-status .live-pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 8px #34d399;
  animation:radar-pulse 1.8s infinite;
}
.terminal-body{
  padding:24px 26px;
  font-family:Consolas, "Fira Code", Monaco, "Courier New", monospace;
  font-size:13.5px;
  line-height:1.75;
  color:#e2e8f0;
  min-height:290px;
}
.t-pane{
  display:none;
  opacity:0;
  transition:opacity .25s ease;
}
.t-pane.active{
  display:block;
  opacity:1;
  animation:riseIn .25s ease forwards;
}
.code-line{
  display:flex;
  gap:16px;
  margin-bottom:6px;
}
.code-line .ln{
  user-select:none;
  color:rgba(255,255,255,.2);
  min-width:24px;
  text-align:right;
  font-size:12px;
}
.code-line .lc{
  flex:1;
  word-break:break-word;
}
/* syntax tokens */
.c-prompt{color:#10b981; font-weight:700;}
.c-cmd{color:#f8fafc; font-weight:700;}
.c-kw{color:#f43f5e; font-weight:700;}
.c-fn{color:#60a5fa; font-weight:700;}
.c-str{color:#34d399;}
.c-comment{color:#64748b; font-style:italic;}
.c-cyan{color:#38bdf8;}
.c-amber{color:#fbbf24;}
.c-coral{color:#fb7185;}
.c-mint{color:#34d399;}
.c-dim{color:#94a3b8;}
.c-tag{display:inline-block; padding:1px 7px; border-radius:4px; font-size:11.5px; font-weight:700; margin:0 2px;}
.c-tag.success{background:rgba(16,185,129,.2); color:#34d399; border:1px solid rgba(16,185,129,.35);}
.c-tag.info{background:rgba(56,189,248,.2); color:#38bdf8; border:1px solid rgba(56,189,248,.35);}
.c-tag.warn{background:rgba(251,191,36,.2); color:#fbbf24; border:1px solid rgba(251,191,36,.35);}

.c-cursor{
  display:inline-block;
  width:9px;
  height:17px;
  background:#60a5fa;
  vertical-align:middle;
  margin-left:3px;
  animation:cursor-blink 1s steps(2, start) infinite;
}
@keyframes cursor-blink{
  0%, 100%{opacity:1;}
  50%{opacity:0;}
}

.terminal-foot{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.t-action-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:8px;
  background:rgba(88,69,235,.25);
  border:1px solid rgba(124,107,255,.45);
  color:#c7d2fe;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  font-family:inherit;
}
.t-action-btn:hover{
  background:rgba(88,69,235,.5);
  color:#ffffff;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(88,69,235,.3);
}
.t-action-btn:active{
  transform:translateY(0);
}
.t-hint{
  font-size:12px;
  color:#94a3b8;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* UI/UX interactive sandbox panel */
.ui-interactive-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:20px;
  align-items:center;
}
@media(max-width:768px){
  .ui-interactive-box{grid-template-columns:1fr;}
}
.ui-controls{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ui-ctrl-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ui-ctrl-label{
  font-size:13px;
  font-weight:600;
  color:#cbd5e1;
}
.ui-swatches{
  display:flex;
  gap:8px;
}
.ui-swatch{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease;
}
.ui-swatch:hover{transform:scale(1.2);}
.ui-swatch.active{border-color:#ffffff; transform:scale(1.15);}
.ui-swatch.sw-brand{background:#5845eb;}
.ui-swatch.sw-mint{background:#0ea77a;}
.ui-swatch.sw-coral{background:#ff6b4a;}
.ui-swatch.sw-amber{background:#f59e0b;}

.ui-slider{
  flex:1;
  max-width:140px;
  accent-color:var(--brand);
  cursor:pointer;
}
.ui-toggle-btn{
  padding:4px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}
.ui-toggle-btn:hover{
  background:rgba(255,255,255,.18);
}
.ui-preview-card{
  background:#1e293b;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:20px;
  transition:all .3s cubic-bezier(.2,1,.3,1);
  box-shadow:0 10px 25px rgba(0,0,0,.4);
}
.ui-preview-card.light-mode{
  background:#ffffff;
  color:#0f172a;
  border-color:#e2e8f0;
  box-shadow:0 10px 25px rgba(0,0,0,.1);
}
.ui-preview-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.ui-preview-badge{
  font-size:11px;
  font-weight:800;
  padding:3px 8px;
  border-radius:99px;
  background:#5845eb;
  color:#fff;
  transition:background .25s ease;
}
.ui-preview-title{
  font-size:16px;
  font-weight:800;
  margin:0 0 6px;
  color:inherit;
}
.ui-preview-desc{
  font-size:12.5px;
  opacity:0.8;
  margin:0 0 14px;
  line-height:1.45;
}
.ui-preview-action{
  display:inline-block;
  padding:7px 16px;
  border-radius:8px;
  background:#5845eb;
  color:#fff;
  font-size:12px;
  font-weight:700;
  border:none;
  transition:background .25s ease, border-radius .2s ease;
  cursor:pointer;
}

/* ---------- global neon scroll progress bar ---------- */
.scroll-progress-bar{
  position:fixed;
  top:0; left:0; width:0%; height:3.5px;
  background:linear-gradient(90deg, #5845eb 0%, #0ea77a 40%, #f59e0b 70%, #ff6b4a 100%);
  z-index:999999;
  pointer-events:none;
  transition:width .08s linear;
  box-shadow:0 0 12px rgba(88,69,235,0.65), 0 0 20px rgba(14,167,122,0.45);
}

/* ---------- interactive hero particle canvas ---------- */
.hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  opacity:0.85;
}

/* ---------- dynamic morphing headline word switcher ---------- */
.hero-headline{
  font-size:clamp(34px, 5.2vw, 56px);
  line-height:1.15;
  letter-spacing:-1.8px;
  margin:0 0 22px;
  font-weight:800;
  color:var(--ink);
}
.dynamic-word-tag{
  display:inline-flex;
  align-items:center;
  position:relative;
  background:linear-gradient(135deg, rgba(88,69,235,0.08) 0%, rgba(14,167,122,0.1) 100%);
  border:1.5px solid rgba(88,69,235,0.35);
  padding:2px 14px 4px;
  border-radius:14px;
  box-shadow:0 4px 18px -2px rgba(88,69,235,0.18), inset 0 1px 1px rgba(255,255,255,0.8);
  margin-left:4px;
  white-space:nowrap;
  vertical-align:middle;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.dynamic-word-tag:hover{
  border-color:var(--brand);
  box-shadow:0 6px 24px -2px rgba(88,69,235,0.28);
}
.dynamic-word{
  display:inline-block;
  background:linear-gradient(135deg, #4f39e8 0%, #0ea77a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
  transition:opacity .24s ease, transform .24s ease;
}
.type-cursor{
  display:inline-block;
  color:#5845eb;
  font-weight:300;
  margin-left:3px;
  animation:cursor-blink .8s steps(2, start) infinite;
  user-select:none;
}

/* ---------- interactive click particle bursts ---------- */
.click-sparkle{
  position:fixed;
  pointer-events:none;
  width:7px;
  height:7px;
  border-radius:50%;
  z-index:999998;
  animation:sparkle-pop .6s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes sparkle-pop{
  0%{
    transform:translate(-50%, -50%) translate(0, 0) scale(1);
    opacity:1;
  }
  100%{
    transform:translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0);
    opacity:0;
  }
}

/* ---------- subtle ambient cursor flashlight aura ---------- */
.ambient-cursor-glow{
  position:fixed;
  width:380px;
  height:380px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(88,69,235,0.06) 0%, rgba(14,167,122,0.03) 45%, transparent 70%);
  transform:translate(-50%, -50%);
  z-index:999;
  transition:opacity .4s ease, transform .06s ease-out;
  opacity:0;
}
body:hover .ambient-cursor-glow{
  opacity:1;
}

/* honour reduced motion */
@media (prefers-reduced-motion: reduce){
  html.anim [data-rv]{opacity:1;}
  html.anim [data-rv].in,
  html.anim .hero .kicker,html.anim .hero h1,html.anim .hero .lede,
  html.anim .hero .hero-quote,html.anim .hero .cta,html.anim .hero .pills,
  html.anim .hero-brand-card,html.anim .float-badge,
  html.anim .page-hero .eyebrow,html.anim .page-hero h1,html.anim .page-hero .lede,
  html.anim .kicker::before,
  .orb,
  .float-badge,
  .fb-dot::after,
  .hero-quote::after,
  #successPanel .tick,
  details.faq[open] .body,
  .c-cursor,
  .terminal-status .live-pulse{animation:none !important;}
  .bundle:hover,.step:hover .n,.promise:hover .dot,
  .day:hover,.chip:hover,.brand:hover .brand-logo,
  .card:hover,.pillar-card:hover,.track-card:hover,
  .stat-card:hover,.stat-card:hover .stat-icon-wrap{transform:none !important;}
  .spotlight-card::before{display:none !important;}
  html{scroll-behavior:auto;}
}

@media(max-width:900px){
  .top nav a.nav-link{display:none;}
  .top nav{gap:12px;}
}
@media(max-width:620px){
  section{padding:54px 0;}
  .hero{padding:58px 0 48px;}
  .book-card{padding:24px;}
  .card{padding:22px;}
  .cta-band{padding:32px 24px;}
}