/* ══════ BGadiEdu — design system ══════ */
:root{
  --indigo:#3A3287; --indigo-2:#4A419E; --cyan:#00A0E3; --cyan-d:#0079AC; --magenta:#D51F6E; --amber:#F5A623;
  --ink:#241E58; --ink-2:#5C567F; --ink-3:#8B87A8;
  --bg:#fff; --surface:#F8F9FD; --tint:#F2F6FE; --border:#E6E9F5; --border-2:#F0F2F9;
  --d:'Sora',system-ui,sans-serif; --b:'Inter',system-ui,sans-serif; --m:'IBM Plex Mono',monospace;
  --sh-1:0 1px 2px rgba(36,30,88,.05);
  --sh-2:0 4px 18px -5px rgba(36,30,88,.10), 0 1px 3px rgba(36,30,88,.05);
  --sh-3:0 30px 70px -22px rgba(58,50,135,.28), 0 10px 28px -14px rgba(36,30,88,.14);
  --sh-c:0 8px 24px -8px rgba(0,160,227,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--b);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a,button{font:inherit;color:inherit;text-decoration:none;cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
img,svg{display:block}

/* [hidden] is styled by the browser at user-agent level, so ANY class rule that
   sets display beats it -- and the element stays on screen while the code
   believes it is gone. This is the single most common way a toggle "does
   nothing". State it once, loudly, and stop rediscovering it. */
[hidden]{display:none !important}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
h1,h2,h3{font-family:var(--d);letter-spacing:-.035em;line-height:1.06;font-weight:700}

/* ── announcement ── */
.ann{background:linear-gradient(94deg,var(--indigo),#5B4FC4 46%,var(--cyan));color:#fff;font-size:13px;text-align:center;padding:9px 20px}
.ann b{font-weight:600}
.ann a{color:#fff;font-weight:600;margin-left:8px;border-bottom:1px solid rgba(255,255,255,.5)}

/* ── brand lockup ── */
.lockup{display:inline-flex;align-items:center;gap:9px}
.lockup img{height:30px;width:auto;object-fit:contain}
.lockup-edu{font-family:var(--d);font-size:19px;font-weight:700;letter-spacing:-.04em;
  padding-left:9px;border-left:1px solid var(--border);
  background:linear-gradient(96deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.lockup.light img{filter:brightness(0) invert(1)}
.lockup.light .lockup-edu{border-left-color:rgba(255,255,255,.22);
  background:linear-gradient(96deg,#7DD3F5,#F573A5);-webkit-background-clip:text;background-clip:text;color:transparent}
.side .brand .lockup img{height:26px}

/* ── nav ── */
nav.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
nav.site.solid{border-color:var(--border);box-shadow:0 1px 20px -6px rgba(36,30,88,.10)}
.nrow{display:flex;align-items:center;gap:36px;height:68px;position:relative}
.brand img{height:30px;width:auto}
.nlinks{display:flex;gap:2px;align-items:center}
.nlinks a{padding:8px 13px;border-radius:8px;font-size:14px;font-weight:450;color:var(--ink-2);transition:color .18s,background .18s;position:relative}
.nlinks a:hover,.nlinks a.on{color:var(--indigo);background:var(--tint)}
.nlinks a:after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.nlinks a:hover:after,.nlinks a.on:after{transform:scaleX(1)}
.nact{margin-left:auto;display:flex;gap:10px;align-items:center}
.nact .sign{font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 12px}
.nact .sign:hover{color:var(--indigo)}
.burger{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);align-items:center;justify-content:center}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:14.5px;font-weight:550;white-space:nowrap;
  background:linear-gradient(180deg,#12ACEC,var(--cyan));color:#fff;box-shadow:var(--sh-c), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(0,160,227,.6), inset 0 1px 0 rgba(255,255,255,.3);filter:saturate(1.1)}
.btn:active{transform:none}
.btn.dark{background:linear-gradient(180deg,var(--indigo-2),var(--indigo));box-shadow:0 8px 24px -8px rgba(58,50,135,.5), inset 0 1px 0 rgba(255,255,255,.2)}
.btn.line{background:#fff;color:var(--indigo);border:1px solid var(--border);box-shadow:var(--sh-1)}
.btn.line:hover{border-color:#CFD5EC;box-shadow:var(--sh-2)}
.btn.lg{padding:13px 24px;font-size:15px;border-radius:11px}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:8px}
.btn.block{width:100%}

/* ── hero ── */
.hero{position:relative;overflow:hidden;padding:76px 0 0;background:var(--bg)}
.hero:before{content:"";position:absolute;inset:-10% -10% auto -10%;height:130%;pointer-events:none;
  background:radial-gradient(46% 52% at 82% 6%,rgba(0,160,227,.20),transparent 64%),
             radial-gradient(38% 44% at 6% 2%,rgba(213,31,110,.13),transparent 62%),
             radial-gradient(46% 40% at 60% 96%,rgba(245,166,35,.14),transparent 64%),
             radial-gradient(40% 44% at 22% 78%,rgba(58,50,135,.10),transparent 64%);
  animation:drift 22s ease-in-out infinite alternate}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:linear-gradient(rgba(58,50,135,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(58,50,135,.055) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(76% 70% at 50% 4%,#000,transparent 74%);mask-image:radial-gradient(76% 70% at 50% 4%,#000,transparent 74%)}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2.2%,1.4%,0) scale(1.06)}100%{transform:translate3d(1.8%,-1.6%,0) scale(1.03)}}
.hero .wrap{position:relative;z-index:1}
.hgrid{display:grid;grid-template-columns:1fr 1.04fr;gap:54px;align-items:center;padding-bottom:74px}
.badge{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--ink-2);
  border:1px solid var(--border);background:rgba(255,255,255,.8);padding:5px 13px 5px 6px;border-radius:30px;box-shadow:var(--sh-1);backdrop-filter:blur(8px)}
.badge b{background:linear-gradient(96deg,var(--cyan),var(--magenta));color:#fff;font-size:10px;font-family:var(--m);letter-spacing:.06em;padding:3px 8px;border-radius:20px;font-weight:500;position:relative;overflow:hidden}
.badge b:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-100%);animation:sweep 3.4s ease-in-out 1.4s infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(220%)}}
h1{font-size:clamp(38px,4.7vw,59px);margin:22px 0 20px;font-weight:700;color:var(--indigo)}
h1 .grad{background:linear-gradient(96deg,var(--cyan) 4%,#5B4FC4 46%,var(--magenta) 94%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:shim 7s ease-in-out infinite}
@keyframes shim{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hsub{font-size:17.5px;line-height:1.6;color:var(--ink-2);max-width:47ch}
.hact{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hnote{font-size:13px;color:var(--ink-3);margin-top:18px}
.hnote b{color:var(--ink-2);font-weight:550}

/* ── product frame ── */
.frame{border-radius:16px;background:linear-gradient(150deg,rgba(0,160,227,.5),rgba(213,31,110,.34) 52%,rgba(245,166,35,.42));padding:1.5px;box-shadow:var(--sh-3);
  background-size:300% 300%;animation:rot 9s ease infinite;
  transform:perspective(1900px) rotateY(-7deg) rotateX(2.4deg);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.frame:hover{transform:perspective(1900px) rotateY(-2.5deg) rotateX(.8deg)}
@keyframes rot{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.win{background:#fff;border-radius:15px;overflow:hidden}
.wbar{display:flex;align-items:center;gap:7px;padding:10px 13px;background:var(--surface);border-bottom:1px solid var(--border)}
.wbar i{width:9px;height:9px;border-radius:50%}
.wbar i:nth-child(1){background:#FF6259}.wbar i:nth-child(2){background:#FFBD2E}.wbar i:nth-child(3){background:#28CA42}
.wurl{margin-left:8px;font-family:var(--m);font-size:10.5px;color:var(--ink-3);background:#fff;border:1px solid var(--border);border-radius:6px;padding:3px 10px}
.wbody{padding:18px;font-size:13px}
.wtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.wtop h4{font-family:var(--d);font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--indigo)}
.wtop span{font-size:11px;color:var(--ink-3)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.kpi{border:1px solid var(--border);border-radius:10px;padding:11px;background:linear-gradient(170deg,#fff,var(--surface))}
.kpi .l{font-size:9.5px;font-family:var(--m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-family:var(--d);font-size:20px;font-weight:700;letter-spacing:-.03em;margin-top:4px;color:var(--indigo)}
.wrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border-2);font-size:12.5px}
.wrow b{font-weight:550;color:var(--ink)}
.tag{font-family:var(--m);font-size:9.5px;padding:3px 8px;border-radius:6px;font-weight:500;white-space:nowrap}
.tag.g{background:rgba(0,160,227,.11);color:var(--cyan-d)}
.tag.r{background:rgba(213,31,110,.1);color:var(--magenta)}
.tag.y{background:rgba(245,166,35,.16);color:#94600A}
.tag.n{background:var(--surface);color:var(--ink-3)}
.spark{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(170deg,#fff,var(--tint))}
.livedot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:5px;animation:live 2s ease-in-out infinite}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(0,160,227,.55)}50%{box-shadow:0 0 0 5px rgba(0,160,227,0)}}

/* ── logo strip ── */
.strip{border-top:1px solid var(--border);padding:28px 0 34px;position:relative;z-index:1}
.strip p{text-align:center;font-size:11px;font-family:var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mqt{display:flex;gap:50px;width:max-content;animation:slide 32s linear infinite;align-items:center}
.mq:hover .mqt{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mqt span{font-family:var(--d);font-size:16px;font-weight:600;color:#B4B0C8;letter-spacing:-.02em;transition:color .25s}
.mqt span:hover{color:var(--indigo)}

/* ── sections ── */
section{padding:96px 0}
.shead{max-width:660px;margin-bottom:52px}
.shead h2{font-size:clamp(29px,3.3vw,40px);margin:14px 0 16px;color:var(--indigo)}
.shead p{font-size:17px;line-height:1.62;color:var(--ink-2)}
.center{margin-inline:auto;text-align:center}
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

.metrics{background:linear-gradient(180deg,var(--tint),#fff);border-block:1px solid var(--border);padding:54px 0}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mcell{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 24px;box-shadow:var(--sh-1);position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.mcell:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.mcell:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.mgrid.in .mcell:before{transform:scaleX(1)}
.mgrid.in .mcell:nth-child(2):before{transition-delay:.1s}
.mgrid.in .mcell:nth-child(3):before{transition-delay:.2s}
.mgrid.in .mcell:nth-child(4):before{transition-delay:.3s}
.mcell .v{font-family:var(--d);font-size:clamp(28px,3vw,38px);font-weight:700;letter-spacing:-.04em;color:var(--indigo)}
.mcell .l{font-size:13.5px;color:var(--ink-2);margin-top:7px}

/* ── feature rows ── */
.feat{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;padding:56px 0}
.feat.rev>div:first-child{order:2}
.feat h3{font-size:clamp(24px,2.5vw,31px);margin:14px 0 16px;color:var(--indigo)}
.feat>div>p{font-size:16.5px;line-height:1.62;color:var(--ink-2)}
.ul{margin-top:24px;display:flex;flex-direction:column;gap:13px}
.li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--ink-2)}
.li b{color:var(--ink);font-weight:600}
.tick{flex:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(150deg,rgba(0,160,227,.16),rgba(0,160,227,.07));color:var(--cyan-d);display:grid;place-items:center;font-size:10px;font-weight:700;margin-top:2px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.li:hover .tick{transform:scale(1.22) rotate(-8deg)}
.panel{border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--sh-2);overflow:hidden;transition:box-shadow .35s,transform .35s;position:relative}
.panel:hover{box-shadow:0 22px 50px -18px rgba(58,50,135,.22);transform:translateY(-2px)}
.panel:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;opacity:0;transition:opacity .4s;background:linear-gradient(120deg,transparent 42%,rgba(0,160,227,.07) 50%,transparent 58%)}
.panel:hover:after{opacity:1}
.ph{padding:14px 18px;border-bottom:1px solid var(--border-2);display:flex;justify-content:space-between;align-items:center;gap:10px;background:linear-gradient(180deg,var(--tint),var(--surface))}
.ph b{font-family:var(--d);font-size:13.5px;font-weight:600;letter-spacing:-.02em;color:var(--indigo)}
.pb{padding:18px}
.callout{border-left:2px solid var(--cyan);background:linear-gradient(90deg,rgba(0,160,227,.07),rgba(0,160,227,0));padding:14px 16px;border-radius:0 9px 9px 0;font-size:13.5px;line-height:1.62;color:var(--ink-2);margin-top:16px}
.callout b{color:var(--ink)}

/* ── tabs ── */
.tabs{display:inline-flex;gap:3px;padding:4px;background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:36px;flex-wrap:wrap;box-shadow:var(--sh-1)}
.tab{padding:8px 16px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink-2);transition:all .2s}
.tab:hover{color:var(--indigo);background:var(--tint)}
.tab.on{background:linear-gradient(180deg,var(--indigo-2),var(--indigo));color:#fff;font-weight:600;box-shadow:0 4px 12px -4px rgba(58,50,135,.5)}
.tp{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;animation:f .4s cubic-bezier(.2,.8,.2,1)}
@keyframes f{from{opacity:0;transform:translateY(10px)}}

/* ── cards ── */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.scard{border:1px solid var(--border);background:#fff;border-radius:14px;padding:24px;box-shadow:var(--sh-1);transition:transform .3s,box-shadow .3s,border-color .3s}
.scard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#D8DEF2}
.scard h4{font-family:var(--d);font-size:15px;font-weight:600;margin:16px 0 8px;letter-spacing:-.02em;color:var(--indigo)}
.scard p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.sic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:16px;color:#fff;box-shadow:0 6px 16px -6px var(--c)}

/* ── AI tutor chat ── */
.chat .msg{margin-bottom:10px;max-width:90%}
.chat .msg b{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:4px}
.chat .msg p{font-size:13.5px;line-height:1.55;padding:10px 13px;border-radius:12px}
.chat .msg.s{margin-left:auto;text-align:right}
.chat .msg.s b{text-align:right}
.chat .msg.s p{background:var(--surface);color:var(--ink-2);border:1px solid var(--border);border-bottom-right-radius:4px}
.chat .msg.t p{background:linear-gradient(150deg,rgba(0,160,227,.12),rgba(91,79,196,.09));color:var(--ink);
  border:1px solid rgba(0,160,227,.2);border-bottom-left-radius:4px}
.chat .msg.t p i{color:var(--indigo);font-style:italic}

/* ── classroom tools ── */
.toolgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tool{border:1px solid var(--border);border-radius:14px;padding:20px;background:#fff;box-shadow:var(--sh-1);
  transition:transform .28s,box-shadow .28s,border-color .28s}
.tool:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#D8DEF2}
.tool .tic{font-size:22px;line-height:1;display:block;margin-bottom:12px}
.tool b{font-family:var(--d);font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--indigo);display:block}
.tool span{display:block;font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:6px}

/* ── gamification ── */
.gamegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.game{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:14px;padding:22px;background:#fff;
  box-shadow:var(--sh-1);transition:transform .28s,box-shadow .28s}
.game:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.game:before{content:"";position:absolute;inset:auto auto -30px -30px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,160,227,.12),transparent 70%)}
.game .gic{font-size:22px;line-height:1;display:block}
.game .gv{font-family:var(--d);font-size:26px;font-weight:700;letter-spacing:-.04em;color:var(--indigo);margin:12px 0 2px}
.game b{font-size:14px;font-weight:600;color:var(--ink);display:block}
.game span{display:block;font-size:12.5px;line-height:1.55;color:var(--ink-3);margin-top:6px}

/* ── subject module tweaks ── */
.course.soon{opacity:.72}
.course.soon .top{background:linear-gradient(160deg,var(--surface),#fff)}
.course .top{align-items:center}

/* ── quote ── */
.quote{max-width:920px;margin:0 auto;text-align:center;position:relative}
.quote:before{content:"";position:absolute;inset:-60px -40px;background:radial-gradient(50% 60% at 50% 50%,rgba(0,160,227,.09),transparent 70%);pointer-events:none}
.quote blockquote{font-family:var(--d);font-size:clamp(21px,2.4vw,30px);font-weight:600;line-height:1.4;letter-spacing:-.03em;color:var(--indigo);position:relative}
.quote .who{display:flex;gap:13px;align-items:center;justify-content:center;margin-top:32px;position:relative}
.quote .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,var(--indigo),var(--magenta));display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px;box-shadow:0 8px 20px -8px rgba(213,31,110,.6)}
.quote .who div{text-align:left}
.quote .who b{font-size:14.5px;font-weight:600;display:block;color:var(--ink)}
.quote .who span{font-size:13px;color:var(--ink-3)}

/* ── pricing ── */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.price{border:1px solid var(--border);border-radius:16px;padding:28px;background:#fff;box-shadow:var(--sh-1);transition:box-shadow .35s,transform .35s}
.price:hover{box-shadow:var(--sh-2);transform:translateY(-4px)}
.price.hi{position:relative;border:none;padding:1.5px;background:linear-gradient(150deg,var(--cyan),#5B4FC4 50%,var(--magenta));box-shadow:var(--sh-3);background-size:300% 300%;animation:rot 9s ease infinite}
.price.hi:hover{transform:translateY(-6px)}
.price.hi .inner{background:#fff;border-radius:15px;padding:28px}
.rec{position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(96deg,var(--cyan),var(--magenta));color:#fff;padding:4px 13px;border-radius:20px;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(213,31,110,.6)}
.price h3{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--indigo)}
.amt{font-family:var(--d);font-size:42px;font-weight:700;letter-spacing:-.045em;margin:16px 0 2px;display:flex;align-items:baseline;gap:6px;color:var(--indigo)}
.amt small{font-family:var(--b);font-size:13.5px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.price p.note{font-size:13.5px;color:var(--ink-3);min-height:20px}
.price .btn{width:100%;margin:22px 0 20px}
.price .ul{gap:11px;margin:0}
.price .li{font-size:14px}

/* ── faq ── */
.faq{max-width:800px;margin:0 auto}
details{border-bottom:1px solid var(--border)}
summary{padding:22px 4px;font-family:var(--d);font-size:16.5px;font-weight:600;letter-spacing:-.02em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;transition:color .2s;color:var(--indigo)}
summary:hover{color:var(--cyan)}
summary::-webkit-details-marker{display:none}
summary:after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
details[open] summary:after{transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--cyan)}
details p{padding:0 4px 24px;font-size:15px;line-height:1.68;color:var(--ink-2);max-width:70ch}

/* ── cta ── */
.ctab{border-radius:22px;padding:1.5px;background:linear-gradient(140deg,var(--cyan),#5B4FC4 48%,var(--magenta));box-shadow:var(--sh-3);background-size:300% 300%;animation:rot 9s ease infinite}
.ctai{background:linear-gradient(165deg,#fff,var(--tint));border-radius:21px;padding:62px 40px;text-align:center;position:relative;overflow:hidden}
.ctai:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 66% at 12% 8%,rgba(0,160,227,.16),transparent 64%),radial-gradient(38% 62% at 90% 94%,rgba(213,31,110,.13),transparent 64%),radial-gradient(30% 50% at 60% 100%,rgba(245,166,35,.14),transparent 64%)}
.ctai>*{position:relative}
.ctai h2{font-size:clamp(28px,3.4vw,42px);color:var(--indigo)}
.ctai p{color:var(--ink-2);font-size:17px;max-width:48ch;margin:16px auto 0}

/* ── footer ── */
footer{background:var(--surface);border-top:1px solid var(--border);padding:60px 0 28px}
.fgrid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:40px;padding-bottom:42px;border-bottom:1px solid var(--border)}
.fgrid h5{font-family:var(--m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-weight:500}
.fgrid a{display:block;font-size:14px;color:var(--ink-2);padding:6px 0;transition:color .18s}
.fgrid a:hover{color:var(--cyan)}
.fgrid>div:first-child p{font-size:14px;color:var(--ink-3);line-height:1.62;margin-top:16px;max-width:32ch}
.fbot{display:flex;justify-content:space-between;gap:20px;padding-top:24px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}

/* ── page header (inner pages) ── */
.phead{position:relative;overflow:hidden;padding:64px 0 52px;background:linear-gradient(180deg,var(--tint),#fff);border-bottom:1px solid var(--border)}
.phead:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 70% at 88% 0%,rgba(0,160,227,.16),transparent 62%),radial-gradient(34% 60% at 4% 100%,rgba(213,31,110,.10),transparent 62%)}
.phead .wrap{position:relative}
.phead h1{font-size:clamp(32px,4vw,48px);margin:14px 0 14px}
.phead p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:56ch}

/* ── forms ── */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:13px;font-weight:550;color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:var(--b);font-size:14.5px;color:var(--ink);background:#fff;
  border:1px solid var(--border);border-radius:10px;padding:11px 13px;transition:border-color .2s,box-shadow .2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,160,227,.14)}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:12px;color:var(--ink-3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.note-ok,.note-err{border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.55}
.note-ok{background:rgba(0,160,227,.09);color:var(--cyan-d);border:1px solid rgba(0,160,227,.25)}
.note-err{background:rgba(213,31,110,.07);color:var(--magenta);border:1px solid rgba(213,31,110,.22)}

/* ── band picker (courses) ── */
.picks{display:grid;gap:10px}
.picks.c4{grid-template-columns:repeat(4,1fr)}
.pick.band{display:block;text-align:left;padding:18px;border:1px solid var(--border);border-radius:14px;background:#fff;
  box-shadow:var(--sh-1);transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}
.pick.band:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#CFD5EC}
.pick.band .em{font-size:24px;line-height:1;display:block;margin-bottom:10px}
.pick.band b{display:block;font-family:var(--d);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--indigo)}
.pick.band span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px}
.pick.band.on{border-color:transparent;background:linear-gradient(170deg,var(--indigo-2),var(--indigo));
  box-shadow:0 14px 34px -14px rgba(58,50,135,.7)}
.pick.band.on b{color:#fff}
.pick.band.on span{color:rgba(255,255,255,.7)}
.boardrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.boardrow .classes{flex:1}
.classes{display:flex;flex-wrap:wrap;gap:6px}
.classes a{font-family:var(--m);font-size:12px;padding:7px 11px;border-radius:8px;border:1px solid var(--border);
  color:var(--ink-2);background:#fff;transition:.15s}
.classes a:hover{border-color:var(--cyan);color:var(--cyan-d)}
.classes a.on{background:linear-gradient(180deg,var(--indigo-2),var(--indigo));color:#fff;border-color:transparent}

/* ── teaching model grid ── */
.incgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
.inc{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--border-2)}
.inc b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.inc span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-top:3px}

/* ── curricula cards ── */
.boardgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bcard{border:1px solid var(--border);border-radius:14px;padding:20px;background:#fff;box-shadow:var(--sh-1);
  transition:transform .25s,box-shadow .25s}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.bcard b{font-family:var(--d);font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:var(--indigo)}
.bcard span{display:block;font-size:13px;line-height:1.55;color:var(--ink-2);margin:7px 0 12px}
.bcard a{font-size:13px;font-weight:600;color:var(--cyan-d)}

/* ── course grid ── */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.course{border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--sh-1);overflow:hidden;transition:transform .3s,box-shadow .3s}
.course:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.course.lead{border-color:transparent;box-shadow:var(--sh-2),0 0 0 1.5px rgba(0,160,227,.35)}
.course.lead .top{background:linear-gradient(160deg,rgba(0,160,227,.10),#fff)}
.course .top{padding:20px;background:linear-gradient(160deg,var(--tint),#fff);border-bottom:1px solid var(--border-2);display:flex;gap:14px;align-items:center}
.course .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:#fff;flex:none}
.course h3{font-size:17px;font-weight:600;color:var(--indigo);letter-spacing:-.02em}
.course .top span{font-size:12px;color:var(--ink-3)}
.course .bot{padding:18px 20px 20px}
.course .bot p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{font-family:var(--m);font-size:10px;letter-spacing:.04em;padding:4px 9px;border-radius:20px;background:var(--surface);color:var(--ink-2);border:1px solid var(--border)}

/* ── auth ── */
.authwrap{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:48px 20px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--tint),#fff)}
.authwrap:before{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(30% 40% at 78% 12%,rgba(0,160,227,.18),transparent 62%),radial-gradient(28% 38% at 14% 88%,rgba(213,31,110,.12),transparent 62%);animation:drift 22s ease-in-out infinite alternate}
.authcard{position:relative;width:100%;max-width:420px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:var(--sh-3)}
.authcard h1{font-size:26px;margin:0 0 6px}
.authcard>p.sub{font-size:14.5px;color:var(--ink-2);margin-bottom:22px}
.demo{margin-top:22px;border-top:1px solid var(--border-2);padding-top:16px}
.demo h6{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:10px}
.demo .row{display:flex;gap:8px;flex-wrap:wrap}
.demo button{font-size:12px;padding:6px 11px;border-radius:8px;border:1px solid var(--border);color:var(--ink-2);background:#fff;transition:.2s}
.demo button:hover{border-color:var(--cyan);color:var(--cyan-d)}

/* ── responsive ── */
@media(max-width:980px){
  .hgrid,.feat,.tp{grid-template-columns:1fr;gap:44px}
  .feat.rev>div:first-child{order:0}
  .frame{transform:none}.frame:hover{transform:none}
  .mgrid,.sgrid,.cgrid,.boardgrid,.toolgrid,.gamegrid{grid-template-columns:1fr 1fr}
  .picks.c4{grid-template-columns:1fr 1fr}
  .incgrid{grid-template-columns:1fr;gap:0}
  .pgrid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .fgrid{grid-template-columns:1fr 1fr;gap:32px}
  .nlinks{display:none}
  .nlinks.open{display:flex !important;position:fixed;top:60px;left:0;right:0;width:100%;
    background:#fff;border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;
    padding:8px 16px 14px;box-shadow:0 16px 34px -14px rgba(36,30,88,.4);z-index:9999;
    max-height:calc(100vh - 60px);overflow-y:auto}
  .burger{display:flex}
  section{padding:70px 0}
}
@media(max-width:560px){.mgrid,.sgrid,.fgrid,.cgrid,.two,.boardgrid,.picks.c4,.toolgrid,.gamegrid{grid-template-columns:1fr}.ctai{padding:44px 22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.frame{transform:none}#prog{display:none}}

/* ── scroll progress ── */
#prog{position:fixed;top:0;left:0;height:2.5px;z-index:80;width:0;
  background:linear-gradient(90deg,var(--cyan),#5B4FC4 50%,var(--magenta));box-shadow:0 0 12px rgba(0,160,227,.6);transition:width .08s linear}

/* ── entrance ── */
.en{opacity:0;animation:enter .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.frame.en{animation:enterF 1.1s cubic-bezier(.16,1,.3,1) .28s forwards}
@keyframes enterF{from{opacity:0;transform:perspective(1900px) rotateY(-16deg) rotateX(7deg) translateY(38px) scale(.94)}
  to{opacity:1;transform:perspective(1900px) rotateY(-7deg) rotateX(2.4deg)}}
.sline{stroke-dasharray:640;stroke-dashoffset:640}
.frame.en .sline{animation:draw 1.9s cubic-bezier(.4,0,.2,1) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sfill,.sdot{opacity:0}
.frame.en .sfill{animation:fadeIn .9s ease 1.5s forwards}
.frame.en .sdot{animation:fadeIn .5s ease 2.1s forwards}
@keyframes fadeIn{to{opacity:1}}
.gbar{transform:scaleY(0);transform-origin:bottom;transition:transform .85s cubic-bezier(.16,1,.3,1)}
.in .gbar{transform:scaleY(1)}
.stag>.wrow{opacity:0;transform:translateY(10px);animation:rowIn .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rowIn{to{opacity:1;transform:none}}
details[open] p{animation:enter .4s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){
  .en{opacity:1}.sline{stroke-dashoffset:0}.sfill,.sdot{opacity:1}.gbar{transform:none}
  .stag>.wrow{opacity:1;transform:none}}

/* ============================================================
   Mobile header fixes -- tidy the nav on phones so it does not
   crowd or overflow. Burger opens the links + actions.
   ============================================================ */
@media(max-width:980px){
  .nrow{gap:14px;height:60px}
  .brand img{height:26px}

  /* the dropdown holds the nav links */
  .nlinks.open{gap:2px;padding:10px}
  .nlinks.open a{padding:12px 14px;font-size:15px;border-radius:10px}
  .nlinks.open a:after{display:none}

  /* keep Sign in + Get started on the bar, just compact */
  .nact{margin-left:auto;gap:7px}
  .nact .sign{display:inline-block;font-size:13px;padding:7px 8px}
  .nact .btn{padding:8px 13px;font-size:13px;border-radius:9px}

  .burger{display:flex;font-size:20px;line-height:1;color:var(--indigo)}
  /* auth link inside the dropdown is not needed now that Sign in stays on the bar */
  .nlinks .m-auth{display:none}
}

/* auth links inside the dropdown are hidden on desktop */
.nlinks .m-auth{display:none}

@media(max-width:560px){
  .nrow{gap:8px;height:56px;padding-inline:2px}
  .nlinks.open{top:56px;max-height:calc(100vh - 56px)}
  .brand img{height:22px}
  /* tighter still on small phones so logo + Sign in + Get started + burger all fit */
  .nact{gap:5px}
  .nact .sign{font-size:12.5px;padding:6px 6px}
  .nact .btn{padding:7px 11px;font-size:12.5px;border-radius:8px}
  .burger{width:34px;height:34px}
  .ann{font-size:11.5px;padding:8px 12px;line-height:1.4}
  .ann a{display:inline-block;margin-left:4px}
}