/* Smart Learning demos — shared look (dark navy + cyan/violet/pink). Local font, no CDNs. */
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/PlusJakartaSans-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{--navy:#0b1026;--navy2:#12183a;--ink:#e8eefc;--mut:#a9b6d3;--cy:#22d3ee;--cy2:#67e8f9;--vi:#7c3aed;--vi2:#a78bfa;--pk:#ec4899;--pk2:#f472b6;--ok:#34d399;--bad:#fb7185;--warn:#fbbf24;
  --grad:linear-gradient(90deg,#22d3ee,#7c3aed 55%,#ec4899);--gradt:linear-gradient(90deg,#67e8f9,#a78bfa 55%,#f0abfc);
  --glass:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 60%,rgba(236,72,153,.07));--line:rgba(255,255,255,.16);--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html{background:#0b1026}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);line-height:1.55;min-height:100vh;overflow-x:hidden;
  background:radial-gradient(circle at 85% -10%,rgba(124,58,237,.38),transparent 46%),radial-gradient(circle at -5% 105%,rgba(34,211,238,.2),transparent 45%),radial-gradient(circle at 60% 120%,rgba(236,72,153,.14),transparent 40%),var(--navy)}
a{color:var(--cy2)}
button,input,select{font:inherit;color:inherit}
img,svg,canvas,video{max-width:100%}
:focus-visible{outline:3px solid var(--cy);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:#0b1026;padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:10px}

/* Top bar */
.sl-top{position:sticky;top:0;z-index:40;background:rgba(11,16,38,.78);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line)}
.sl-top .in{max-width:1240px;margin:auto;display:flex;align-items:center;gap:12px;padding:10px 20px;min-height:60px}
.sl-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-weight:800;font-size:17px;letter-spacing:-.3px;flex:none}
.sl-brand svg{width:34px;height:34px;flex:none}
.sl-brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-crumb{color:var(--mut);font-size:13px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:12px;border-left:1px solid var(--line)}
.sl-cta{margin-left:auto;flex:none;text-decoration:none;color:#fff;font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:12px;background:var(--grad);box-shadow:0 8px 22px -10px rgba(236,72,153,.7);white-space:nowrap;transition:transform .2s,box-shadow .2s}
.sl-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(236,72,153,.9)}
@media(max-width:900px){.sl-crumb{display:none}}
@media(max-width:620px){.sl-cta .lg{display:none}.sl-top .in{padding:8px 14px}.sl-brand span{font-size:15px}}
@media(max-width:360px){.sl-brand span{display:none}}

/* Layout */
.wrap{max-width:1240px;margin:auto;padding:28px 20px 60px}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a5f3fc;margin-bottom:8px}
h1.t{font-size:clamp(28px,4.4vw,48px);line-height:1.08;letter-spacing:-1.2px;font-weight:800;margin-bottom:10px}
.gt{background:var(--gradt);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mut);font-size:16px;max-width:720px}
.glass{background:var(--glass),rgba(12,16,40,.5);border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 50px -26px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-weight:700;font-size:15px;padding:12px 20px;border-radius:14px;color:#fff;background:var(--grad);box-shadow:0 10px 24px -12px rgba(124,58,237,.9);transition:transform .15s,box-shadow .2s,opacity .2s;min-height:44px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:rgba(103,232,249,.6)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#e2e8f0}
.note{font-size:12.5px;color:var(--mut)}
.sl-foot{max-width:1240px;margin:0 auto;padding:22px 20px 40px;color:#7f8db0;font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08)}
.sl-foot a{color:#a5f3fc;text-decoration:none;font-weight:600}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;z-index:80;background:rgba(18,24,58,.95);border:1px solid var(--line);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;transition:.3s;pointer-events:none;max-width:calc(100vw - 30px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}