/* ============================================================
   osnovna.ba · features.css
   Components added on top of styles.css: app mockups, feature
   explorer, interactive question demo, legal layout, pricing.
   App palette (from app.osnovna.ba "Otok" theme) is scoped to
   the mockups so the site keeps its own blue/yellow/red theme.
   ============================================================ */
:root{
  --app-navy:#1B1F3B;
  --app-bg:#EEF3FA;
  --app-sunset:#FF6B35;
  --app-sun:#FFC857;
  --app-mint:#2BB39A;
  --app-violet:#7C5CFF;
  --app-line:#E3E9F2;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

/* ---------- header / footer additions ---------- */
.nav-login{font-weight:600;font-size:15px;color:var(--ink-2);padding:10px 14px;border-radius:999px;transition:background .18s ease,color .18s ease}
.nav-login:hover{background:var(--bg-2);color:var(--ink)}
.hero .nav-login{color:rgba(255,255,255,.85)}
.hero .nav-login:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-cta{display:flex;align-items:center;gap:8px}
@media (max-width:1000px){.nav-login{display:none}}
.footer-about{color:rgba(255,255,255,.55);font-size:14px;max-width:320px;line-height:1.55;margin:14px 0 18px}
.footer-app{display:flex;gap:10px;flex-wrap:wrap}
.footer-app .btn{padding:10px 16px;font-size:14px}
.site-head .nav-links{gap:2px}

/* ---------- generic helpers ---------- */
.checks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.checks li svg{flex-shrink:0;width:18px;height:18px;color:var(--blue-1);margin-top:3px}
.on-dark .checks li{color:rgba(255,255,255,.86)}
.on-dark .checks li svg{color:var(--yellow)}
.lead-p{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:720px}
.center{text-align:center}
.mt-0{margin-top:0}.mt-24{margin-top:24px}.mt-40{margin-top:40px}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:'Nunito',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:#EAF2FF;color:var(--blue-1)}
.tag.yellow{background:#FFF3CC;color:#7A5200}
.tag.mint{background:#DDF6EC;color:#11684A}
.tag.coral{background:#FFE6E0;color:#B23A22}
.tag.violet{background:#EFEBFF;color:#4C3BBF}
.note{font-size:13.5px;color:var(--muted);line-height:1.55}
kbd{font-family:'Nunito',sans-serif;background:#fff;border:1px solid var(--line);border-bottom-width:3px;border-radius:7px;padding:1px 7px;font-size:13px;font-weight:800}

/* ---------- page hero with illustration ---------- */
.ph-grid{position:relative;z-index:3;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.ph-grid.has-aside{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.ph-aside{position:relative;display:flex;justify-content:center}
@media (max-width:980px){.ph-grid.has-aside{grid-template-columns:1fr}.ph-aside{display:none}}
.page-hero .facts .counter{font:inherit}

/* ---------- KPI band ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 22px 20px;box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.kpi .n{font-family:'Nunito',sans-serif;font-weight:900;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--ink)}
.kpi .n small{font-size:.55em;color:var(--blue-1);margin-left:2px}
.kpi .l{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.4}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--k,#EAF2FF);opacity:.7}
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   PHONE / APP MOCKUPS
   ============================================================ */
.phone{width:300px;max-width:100%;aspect-ratio:300/600;background:#0E1326;border-radius:44px;padding:12px;box-shadow:0 40px 80px -30px rgba(6,20,60,.55),inset 0 0 0 2px rgba(255,255,255,.08);position:relative;flex-shrink:0}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:999px;background:#0E1326;z-index:4}
.phone .screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--app-bg);font-family:'Plus Jakarta Sans',sans-serif;color:var(--app-navy);display:flex;flex-direction:column}
.app-bar{background:var(--app-navy);color:#fff;padding:40px 14px 12px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:12.5px}
.app-bar .logo{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center}
.app-bar .sp{flex:1}
.app-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.12);border-radius:999px;padding:3px 8px;font-size:10.5px;font-weight:800}
.app-body{padding:12px;display:grid;gap:10px;align-content:start;flex:1;overflow:hidden}
.a-card{background:#fff;border-radius:16px;padding:11px 12px;box-shadow:0 1px 0 rgba(27,31,59,.04),0 6px 16px -10px rgba(27,31,59,.25)}
.a-eyebrow{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7A86A3}
.a-title{font-weight:800;font-size:13.5px;line-height:1.25;margin-top:2px}
.a-sub{font-size:10.5px;font-weight:700;color:#7A86A3;margin-top:2px}
.a-btn{display:flex;align-items:center;justify-content:center;background:var(--app-sunset);color:#fff;border-radius:12px;padding:9px;font-weight:800;font-size:12px;box-shadow:0 4px 0 #D9531F}
.a-btn.mint{background:var(--app-mint);box-shadow:0 4px 0 #1E8A76}
.a-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 8px;font-size:9.5px;font-weight:800;background:var(--app-bg)}
.a-row{display:flex;align-items:center;gap:8px}
.a-ico{width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.a-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a-tile{background:#fff;border-radius:14px;padding:10px;border:2px solid transparent;font-size:11px;font-weight:800;line-height:1.25}
.a-tile .a-sub{font-size:9.5px}
.a-tile.hot{border-color:var(--app-violet);box-shadow:0 0 0 4px rgba(124,92,255,.12)}
.a-bar{height:8px;border-radius:999px;background:var(--app-line);overflow:hidden}
.a-bar i{display:block;height:100%;border-radius:inherit;background:var(--app-mint);width:var(--w,40%)}

/* floating decoration chips around mockups */
.mock-stage{position:relative;display:flex;justify-content:center;align-items:center;padding:20px 0}
.mock-chip{position:absolute;z-index:5;background:#fff;color:var(--ink);border-radius:999px;padding:9px 14px 9px 9px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 18px 36px -16px rgba(6,20,60,.45);animation:floaty 6s ease-in-out infinite}
.mock-chip .d{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.mock-chip.c1{top:12%;left:-4%}.mock-chip.c2{bottom:16%;right:-6%;animation-delay:-2s}.mock-chip.c3{top:48%;left:-10%;animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:560px){.mock-chip.c1{left:0}.mock-chip.c2{right:0}.mock-chip.c3{display:none}}

/* ============================================================
   ISLAND — lessons as fields: fog → sketch → coloured → gold
   ============================================================ */
.island{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:12px;border-radius:18px;background:linear-gradient(160deg,#1E2A55,#141B3A);position:relative}
.island .t{aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);border:1.5px dashed rgba(255,255,255,.18);transition:background .5s ease,border-color .5s ease,color .5s ease,transform .5s var(--ease-out)}
.island.big{grid-template-columns:repeat(8,1fr);gap:9px;padding:16px}
.island.big .t{font-size:12px;border-radius:11px}
.island .t.s1{background:rgba(255,255,255,.12);border-style:solid;border-color:rgba(255,255,255,.3);color:#fff}
.island .t.s2{background:var(--app-mint);border:1.5px solid #5ED3BC;color:#fff}
.island .t.s3{background:linear-gradient(150deg,#FFE08A,#F5B80F);border:1.5px solid #FFE9A8;color:#5A3D00;box-shadow:0 0 14px rgba(255,200,87,.55)}
.island .t.now{background:var(--app-sunset);border:1.5px solid #FF9A70;color:#fff;transform:scale(1.08);box-shadow:0 0 0 4px rgba(255,107,53,.25)}
.island-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.island-legend span{display:inline-flex;align-items:center;gap:6px}
.island-legend i{width:14px;height:14px;border-radius:5px;display:inline-block}
.island-legend .l0{background:#2B355E;border:1.5px dashed #6B7AA8}
.island-legend .l1{background:#59638D}
.island-legend .l2{background:var(--app-mint)}
.island-legend .l3{background:#F5B80F}

/* ============================================================
   GEMS
   ============================================================ */
.gems{display:flex;gap:18px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.gem{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--ink-2);text-align:center}
.gem svg{width:64px;height:64px;filter:drop-shadow(0 10px 14px rgba(15,27,51,.22))}
.gem small{display:block;font-weight:500;color:var(--muted);font-size:12px;max-width:120px}
.reveal.in .gem svg{animation:gemPop .7s var(--ease-out) both}
.reveal.in .gem:nth-child(2) svg{animation-delay:.15s}
.reveal.in .gem:nth-child(3) svg{animation-delay:.3s}
.reveal.in .gem:nth-child(4) svg{animation-delay:.45s}
.gem .shine{animation:shine 3.2s ease-in-out infinite}
.gem.cracked svg{animation:crack 3.4s ease-in-out infinite!important}
@keyframes gemPop{from{opacity:0;transform:translateY(16px) scale(.7)}to{opacity:1;transform:none}}
@keyframes shine{0%,70%,100%{opacity:0}80%{opacity:.95}}
@keyframes crack{0%,86%,100%{transform:none}88%{transform:translateX(-3px) rotate(-4deg)}92%{transform:translateX(3px) rotate(4deg)}96%{transform:translateX(-2px)}}

/* ============================================================
   LEAGUE
   ============================================================ */
.league{display:grid;gap:7px;position:relative}
.lg-row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:7px 10px;font-size:11.5px;font-weight:800;transition:transform .7s var(--ease-out)}
.lg-row .pos{width:18px;color:#7A86A3}
.lg-row .av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px}
.lg-row .nm{flex:1}
.lg-row .st{color:#B07A00}
.lg-row.me{background:var(--app-navy);color:#fff}
.lg-row.me .pos,.lg-row.me .st{color:var(--app-sun)}
.lg-zone{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--app-mint);text-transform:uppercase;margin:2px 0 -2px}
.league.anim .lg-row.me{animation:climb 5s var(--ease-out) infinite}
.league.anim .lg-row.down{animation:drop 5s var(--ease-out) infinite}
@keyframes climb{0%,30%{transform:translateY(0)}45%,85%{transform:translateY(calc(-100% - 7px))}100%{transform:translateY(0)}}
@keyframes drop{0%,30%{transform:translateY(0)}45%,85%{transform:translateY(calc(100% + 7px))}100%{transform:translateY(0)}}
.tiers{display:flex;justify-content:space-between;gap:6px;margin-bottom:10px}
.tiers span{flex:1;text-align:center;font-size:8.5px;font-weight:800;letter-spacing:.08em;color:#7A86A3;text-transform:uppercase}
.tiers span b{display:block;width:20px;height:20px;margin:0 auto 3px;transform:rotate(45deg);border-radius:4px;background:var(--c)}
.tiers span.on{color:var(--app-navy)}

/* ============================================================
   STREAK
   ============================================================ */
.streak-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.streak-days .d{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9.5px;font-weight:800;color:#7A86A3}
.streak-days .d i{width:28px;height:28px;border-radius:50%;background:var(--app-line);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;transition:background .4s ease,transform .4s var(--ease-out)}
.reveal.in .streak-days .d.on i{animation:dayOn .5s var(--ease-out) both;background:var(--app-sunset);color:#fff}
.reveal.in .streak-days .d.fz i{animation:dayOn .5s var(--ease-out) both;background:#5BB5F2;color:#fff}
.streak-days .d:nth-child(2) i{animation-delay:.12s!important}.streak-days .d:nth-child(3) i{animation-delay:.24s!important}
.streak-days .d:nth-child(4) i{animation-delay:.36s!important}.streak-days .d:nth-child(5) i{animation-delay:.48s!important}
.streak-days .d:nth-child(6) i{animation-delay:.6s!important}.streak-days .d:nth-child(7) i{animation-delay:.72s!important}
@keyframes dayOn{from{transform:scale(.4);opacity:.3}to{transform:none;opacity:1}}
.flame{display:inline-block;animation:flame 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes flame{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(3deg)}}

/* ============================================================
   REVIEW DECK (spaced repetition)
   ============================================================ */
.deck{position:relative;height:170px}
.deck .card{position:absolute;inset:0;background:#fff;border-radius:16px;padding:14px;box-shadow:0 10px 24px -14px rgba(27,31,59,.4);font-size:12px;font-weight:700;display:flex;flex-direction:column;gap:8px}
.deck .card:nth-child(1){transform:translateY(16px) scale(.9);opacity:.5}
.deck .card:nth-child(2){transform:translateY(8px) scale(.95);opacity:.8}
.deck.anim .card:nth-child(3){animation:deckOut 4.5s var(--ease-out) infinite}
@keyframes deckOut{0%,55%{transform:none;opacity:1}70%{transform:translateX(120%) rotate(12deg);opacity:0}71%{transform:translateY(16px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
.forget{width:100%;height:auto}
.forget path.curve{stroke-dasharray:600;stroke-dashoffset:600}
.reveal.in .forget path.curve{animation:draw 2.2s var(--ease-out) forwards}
.reveal.in .forget path.c2{animation-delay:.5s}.reveal.in .forget path.c3{animation-delay:1s}
.forget .dot{opacity:0}
.reveal.in .forget .dot{animation:fadeIn .4s ease forwards}
.reveal.in .forget .dot.d1{animation-delay:.9s}.reveal.in .forget .dot.d2{animation-delay:1.4s}.reveal.in .forget .dot.d3{animation-delay:1.9s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}

/* ============================================================
   QUICK TEST RING
   ============================================================ */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.ring{--p:0;--target:90;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--app-mint) calc(var(--p)*1%),var(--app-line) 0);display:flex;align-items:center;justify-content:center;margin:0 auto;transition:--p 1.6s var(--ease-out)}
.ring::before{content:"";position:absolute}
.ring .ri{width:92px;height:92px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:900;font-size:26px;color:var(--app-navy)}
.ring .ri small{font-family:'Plus Jakarta Sans';font-size:9.5px;font-weight:800;color:#7A86A3;letter-spacing:.06em}
.reveal.in .ring,.fx-panel.on .ring{--p:var(--target)}
.dots10{display:flex;gap:5px;justify-content:center;margin-top:10px}
.dots10 i{width:12px;height:12px;border-radius:50%;background:var(--app-mint)}
.dots10 i.x{background:#FF6B6B}

/* ============================================================
   TUTOR CHAT (animated)
   ============================================================ */
.tchat{display:flex;flex-direction:column;gap:8px;font-size:11.5px;font-weight:600;line-height:1.45}
.tchat .m{max-width:86%;padding:8px 11px;border-radius:14px;opacity:0;transform:translateY(8px)}
.tchat .m.u{align-self:flex-end;background:var(--app-navy);color:#fff;border-bottom-right-radius:4px}
.tchat .m.b{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;box-shadow:0 4px 12px -8px rgba(27,31,59,.35)}
.tchat .m.b b{color:var(--app-sunset)}
.tchat .typing-dots{align-self:flex-start;background:#fff;border-radius:14px;padding:9px 12px;display:none;gap:4px}
.tchat .typing-dots i{width:6px;height:6px;border-radius:50%;background:#B7C1D6;animation:tdot 1.1s infinite}
.tchat .typing-dots i:nth-child(2){animation-delay:.15s}.tchat .typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,80%,100%{transform:none;opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.tchat .m.show{opacity:1;transform:none;transition:opacity .35s ease,transform .35s var(--ease-out)}
.tchat .typing-dots.show{display:inline-flex}
.tutor-modes{display:flex;gap:6px}
.tutor-modes span{flex:1;text-align:center;background:var(--app-bg);border-radius:10px;padding:6px 4px;font-size:10px;font-weight:800}

/* ============================================================
   PARENT DASHBOARD
   ============================================================ */
.pbars{display:flex;align-items:flex-end;gap:6px;height:80px;padding-top:6px}
.pbars i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#7C5CFF,#5B3FE0);height:6%;transition:height 1s var(--ease-out)}
.reveal.in .pbars i,.fx-panel.on .pbars i{height:var(--h)}
.pbars i:nth-child(2){transition-delay:.06s}.pbars i:nth-child(3){transition-delay:.12s}.pbars i:nth-child(4){transition-delay:.18s}
.pbars i:nth-child(5){transition-delay:.24s}.pbars i:nth-child(6){transition-delay:.3s}.pbars i:nth-child(7){transition-delay:.36s}
.pdays{display:flex;gap:6px;font-size:8.5px;font-weight:800;color:#7A86A3}
.pdays span{flex:1;text-align:center}
.weak{display:flex;flex-wrap:wrap;gap:5px}
.weak span{font-size:10px;font-weight:800;border-radius:999px;padding:3px 8px;background:#FFE9DF;color:#C2410C}
.weak span.ok{background:#DDF6EC;color:#11684A}

/* ============================================================
   DUEL
   ============================================================ */
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center}
.duel .p{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:800}
.duel .p .av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-family:'Nunito',sans-serif;font-weight:800}
.duel .vs{font-family:'Nunito',sans-serif;font-weight:900;font-size:22px;color:var(--app-sunset);animation:vs 1.8s ease-in-out infinite}
@keyframes vs{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.duel .sc{font-family:'Nunito',sans-serif;font-size:22px;font-weight:800}
.reactions{display:flex;gap:6px;justify-content:center;font-size:20px}
.reactions span{animation:bob 2.4s ease-in-out infinite}
.reactions span:nth-child(2){animation-delay:-.4s}.reactions span:nth-child(3){animation-delay:-.8s}.reactions span:nth-child(4){animation-delay:-1.2s}.reactions span:nth-child(5){animation-delay:-1.6s}.reactions span:nth-child(6){animation-delay:-2s}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-6px) rotate(-6deg)}}

/* ============================================================
   ADAPTIVE STAIRS
   ============================================================ */
.stairs{display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:8px;height:150px;position:relative}
.stairs .st{border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,#3B95FF,#0E5BD9);color:#fff;font-weight:700;font-size:12.5px;padding:10px 8px;display:flex;flex-direction:column;justify-content:flex-start;text-align:center;line-height:1.25}
.stairs .st:nth-child(1){height:34%}.stairs .st:nth-child(2){height:55%}.stairs .st:nth-child(3){height:76%}.stairs .st:nth-child(4){height:97%;background:linear-gradient(180deg,#FFD86B,#FFB100);color:#3a2400}
.stairs .st b{font-family:'Nunito',sans-serif;font-size:18px;font-weight:800}
.stairs .climber{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.25);left:calc(12.5% - 13px);bottom:calc(34% + 4px)}
.reveal.in .stairs .climber{animation:climbStairs 6s var(--ease-out) infinite}
@keyframes climbStairs{0%,12%{left:calc(12.5% - 13px);bottom:calc(34% + 4px)}25%,37%{left:calc(37.5% - 13px);bottom:calc(55% + 4px)}50%,62%{left:calc(62.5% - 13px);bottom:calc(76% + 4px)}75%,92%{left:calc(87.5% - 13px);bottom:calc(97% + 4px)}100%{left:calc(12.5% - 13px);bottom:calc(34% + 4px)}}

/* ============================================================
   FEATURE EXPLORER (tabs + phone)
   ============================================================ */
.fx{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center}
.fx-tabs{display:grid;gap:10px}
.fx-tab{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:16px 18px;border-radius:20px;border:1.5px solid var(--line);background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--ease-out);position:relative;overflow:hidden;width:100%}
.fx-tab:hover{border-color:#C9D6EE;transform:translateY(-1px)}
.fx-tab .ic{width:42px;height:42px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:var(--c,#EAF2FF)}
.fx-tab h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:17.5px;margin:0 0 3px;color:var(--ink)}
.fx-tab p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);display:none}
.fx-tab[aria-selected="true"]{border-color:var(--blue-1);box-shadow:0 18px 40px -22px rgba(14,91,217,.5)}
.fx-tab[aria-selected="true"] p{display:block;animation:fadeUp .35s var(--ease-out)}
.fx-tab .prog{position:absolute;left:0;bottom:0;height:3px;background:var(--blue-1);width:0}
.fx-tab[aria-selected="true"] .prog{animation:prog var(--dur,7s) linear forwards}
.fx.paused .fx-tab .prog{animation-play-state:paused}
@keyframes prog{to{width:100%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fx-stage{position:relative;display:flex;justify-content:center}
.fx-stage .phone{width:320px}
.fx-panel{position:absolute;inset:0;padding:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transition:opacity .4s ease,transform .45s var(--ease-out),visibility 0s .45s}
.fx-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .45s var(--ease-out),visibility 0s}
.fx-panels{position:relative;flex:1}
@media (max-width:980px){.fx{grid-template-columns:1fr}.fx-stage{order:-1}}

/* ============================================================
   FEATURE GRID CARDS
   ============================================================ */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-card);transition:transform .25s var(--ease-out),box-shadow .25s ease;display:flex;flex-direction:column;gap:10px}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.fcard .ic{width:48px;height:48px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:var(--c,#EAF2FF)}
.fcard h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:19px;margin:4px 0 0;color:var(--ink)}
.fcard p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.fcard .more{margin-top:auto;padding-top:6px;font-weight:600;font-size:14px;color:var(--blue-1);display:inline-flex;align-items:center;gap:6px}
@media (max-width:980px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}

/* deep-dive rows reuse .frow/.fmedia; media holding a mock */
.fmedia.mock{padding:28px 20px;min-height:380px}
.fmedia .panel{background:#fff;border-radius:20px;padding:16px;width:100%;max-width:380px;box-shadow:0 22px 44px -22px rgba(6,20,60,.5);position:relative;z-index:2;color:var(--app-navy)}
.fmedia .panel + .panel{margin-top:12px}
.fmedia .panel.dark{background:var(--app-navy);color:#fff}
.fmedia::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%);top:-80px;right:-60px}
.fstack{display:flex;flex-direction:column;align-items:center;width:100%}

/* ============================================================
   INTERACTIVE QUESTION DEMO
   ============================================================ */
.qdemo{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 30px 60px -32px rgba(15,27,51,.4);overflow:hidden;max-width:620px;width:100%}
.qd-top{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--app-navy);color:#fff;font-size:13px;font-weight:700}
.qd-top .sp{flex:1}
.qd-top .lvl{display:inline-flex;gap:3px}
.qd-top .lvl i{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.qd-top .lvl i.on{background:var(--app-sun)}
.qd-body{padding:20px 20px 18px}
.qd-q{font-family:'Nunito',sans-serif;font-weight:800;font-size:21px;line-height:1.3;color:var(--ink);margin:0 0 6px}
.qd-help{font-size:13px;color:var(--muted);margin:0 0 14px}
.qd-opts{display:grid;gap:9px}
.qd-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border-radius:14px;border:2px solid var(--line);background:#FAFBFD;font-size:15.5px;font-weight:600;color:var(--ink);transition:border-color .15s ease,background .15s ease,transform .15s ease}
.qd-opt:hover{border-color:#BFD2F5}
.qd-opt .k{width:28px;height:28px;border-radius:9px;background:#fff;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-size:14px;color:var(--muted);flex-shrink:0;font-weight:800}
.qd-opt[aria-pressed="true"]{border-color:var(--blue-1);background:#EEF4FF}
.qd-opt[aria-pressed="true"] .k{background:var(--blue-1);border-color:var(--blue-1);color:#fff}
.qd-opt.ok{border-color:#2BB39A;background:#E5F8F3}
.qd-opt.ok .k{background:#2BB39A;border-color:#2BB39A;color:#fff}
.qd-opt.bad{border-color:#FF7A6A;background:#FFF0ED;animation:shake .35s ease}
.qd-opt.bad .k{background:#FF7A6A;border-color:#FF7A6A;color:#fff}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.qd-input{width:100%;font:inherit;font-size:17px;font-weight:600;padding:13px 14px;border-radius:14px;border:2px solid var(--line);background:#FAFBFD;color:var(--ink)}
.qd-input:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(31,122,239,.12)}
.qd-input.ok{border-color:#2BB39A;background:#E5F8F3}.qd-input.bad{border-color:#FF7A6A;background:#FFF0ED;animation:shake .35s ease}
.qd-tpl{font-size:17px;font-weight:600;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.qd-tpl .qd-input{width:160px;display:inline-block;padding:9px 12px}
.qd-hints{display:grid;gap:8px;margin-top:14px}
.qd-hint{background:#FFF8E1;border:1px solid #FFE6A6;border-radius:12px;padding:10px 12px;font-size:14px;color:#5A4300;line-height:1.5;animation:fadeUp .35s var(--ease-out)}
.qd-hint b{color:#7A5200}
.qd-expl{margin-top:14px;border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.55;animation:fadeUp .35s var(--ease-out)}
.qd-expl.ok{background:#E5F8F3;color:#0F5446}
.qd-expl.bad{background:#FFF0ED;color:#8A2A1A}
.qd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.qd-actions button{font-weight:700;font-size:14.5px;padding:11px 16px;border-radius:999px;transition:transform .15s ease,background .15s ease}
.qd-check{background:var(--app-sunset);color:#fff;box-shadow:0 4px 0 #D9531F;flex:1}
.qd-check:disabled{opacity:.45;cursor:not-allowed}
.qd-hintbtn{background:#FFF3CC;color:#7A5200}
.qd-tutorbtn{background:#EFEBFF;color:#4C3BBF}
.qd-reset{background:var(--bg-2);color:var(--ink-2)}
.qd-foot{display:flex;gap:16px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);background:#FBFCFE}
.qd-foot b{color:var(--ink-2)}
.qd-tutor{margin-top:14px;display:none}
.qd-tutor.show{display:block;animation:fadeUp .35s var(--ease-out)}
.qd-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:960px){.qd-wrap{grid-template-columns:1fr}}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;font-size:.9em;margin:0 2px}
.frac>span:first-child{border-bottom:2px solid currentColor;padding:0 3px 2px}
.frac>span:last-child{padding:2px 3px 0}

/* ============================================================
   SUBJECT MATRIX
   ============================================================ */
.matrix-wrap{overflow-x:auto;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-card)}
.matrix{width:100%;border-collapse:collapse;min-width:720px;font-size:14.5px}
.matrix th,.matrix td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--line)}
.matrix th{font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;color:var(--ink);background:#FAFBFD}
.matrix td:first-child,.matrix th:first-child{text-align:left;padding-left:20px}
.matrix td:first-child a{font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.matrix td:first-child a:hover{color:var(--blue-1)}
.matrix .sw{width:12px;height:12px;border-radius:4px;display:inline-block}
.matrix .cell{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.matrix .cell b{font-family:'Nunito',sans-serif;font-weight:800;font-size:16px;color:var(--ink)}
.matrix .cell small{font-size:11.5px;color:var(--muted)}
.matrix .none{color:#C3CADA}
.matrix tr:last-child td{border-bottom:0}
.reveal.in .matrix .cell{animation:fadeUp .5s var(--ease-out) both}

/* ============================================================
   CURRICULUM — lessons list inside accordion + search
   ============================================================ */
.curric-body .lessons{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.curric-body .lessons li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink-2);padding:6px 0;border-bottom:1px dashed var(--line)}
.curric-body .lessons li .q{margin-left:auto;flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--blue-1);background:#EAF2FF;border-radius:999px;padding:2px 8px;white-space:nowrap}
.curric-body .lessons li svg{width:15px;height:15px;color:var(--mint);flex-shrink:0;margin-top:3px}
@media (max-width:760px){.curric-body .lessons{grid-template-columns:1fr}}
.lsearch{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px;max-width:620px;box-shadow:var(--shadow-card);transition:border-color .2s ease,box-shadow .2s ease}
.lsearch:focus-within{border-color:var(--blue-2);box-shadow:0 0 0 5px rgba(31,122,239,.12)}
.lsearch input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:transparent;color:var(--ink);min-width:0;padding:8px 0}
.lsearch svg{width:20px;height:20px;color:var(--muted);flex-shrink:0}
.lsearch .cnt{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;padding-right:12px}
.lresults{display:grid;gap:8px;margin-top:16px;max-width:820px}
.lres{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:14.5px;animation:fadeUp .25s var(--ease-out)}
.lres .sw{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.lres .t{flex:1;color:var(--ink);font-weight:600;line-height:1.4}
.lres .m{font-size:12px;color:var(--muted);white-space:nowrap}
.lres mark{background:#FFE9A8;color:inherit;border-radius:3px;padding:0 1px}
.lempty{color:var(--muted);font-size:14.5px;padding:10px 4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips button{font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:#fff;border:1.5px solid var(--line);color:var(--ink-2);transition:border-color .15s ease,color .15s ease}
.chips button:hover{border-color:var(--blue-2);color:var(--blue-1)}

/* lesson-title marquee */
.marquee{position:relative;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:10px;width:max-content;animation:marq var(--speed,60s) linear infinite}
.marquee.rev .track{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
.marquee span{white-space:nowrap;font-size:14px;font-weight:600;padding:9px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.marquee span i{width:8px;height:8px;border-radius:50%;background:var(--c,#3B95FF)}
@keyframes marq{to{transform:translateX(-50%)}}

/* subject cards — extra colours for new subjects */
.subj-card.c-eng{background:linear-gradient(155deg,#8A7BFF,#5B3FE0)}
.subj-card.c-eng .go{color:#4C3BBF}
.subj-card.c-mat9{background:linear-gradient(155deg,#2C3E70,#141B3A)}
.subj-card.c-mat9 .go{color:#1B1F3B}
.subj-card.c-fin{background:linear-gradient(155deg,#5FD0C0,#178C7C)}
.subj-card.c-fin .go{color:#0F6E61}
.subj-card .bot .d b{font-weight:700}
.subj-card .soon{position:absolute;top:16px;right:56px;z-index:3}
.fmedia.violet{background:linear-gradient(155deg,#8A7BFF,#5B3FE0)}
.fmedia.navy{background:linear-gradient(155deg,#2C3E70,#141B3A)}
.fmedia.teal{background:linear-gradient(155deg,#5FD0C0,#178C7C)}
.fmedia.sky{background:linear-gradient(155deg,#4FC3E8,#1B6FA8)}

/* ============================================================
   TIMELINE (how a session works)
   ============================================================ */
.tl{position:relative;display:grid;gap:22px;max-width:860px;margin:0 auto;padding-left:44px}
.tl::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--line)}
.tl::after{content:"";position:absolute;left:17px;top:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--blue-1),var(--mint));height:0;transition:height 1.8s var(--ease-out)}
.tl.in::after{height:calc(100% - 16px)}
.tl-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow-card)}
.tl-item::before{content:attr(data-n);position:absolute;left:-44px;top:16px;width:37px;height:37px;border-radius:50%;background:#fff;border:3px solid var(--blue-1);display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:900;color:var(--blue-1);font-size:15px}
.tl-item h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:18.5px;margin:0 0 6px;color:var(--ink)}
.tl-item p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
.tl-item .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ============================================================
   COMPARE / MODE CARDS
   ============================================================ */
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mode{border-radius:22px;padding:22px;color:var(--ink);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:transform .25s var(--ease-out)}
.mode:hover{transform:translateY(-4px)}
.mode .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--c);margin-bottom:12px}
.mode h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:19px;margin:0 0 6px}
.mode p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.mode .meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:1000px){.modes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.modes{grid-template-columns:1fr}}

.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-card);font-size:15px}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare th{background:#FAFBFD;font-family:'Nunito',sans-serif;font-weight:800;color:var(--ink)}
.compare tr:last-child td{border-bottom:0}
.compare td.y{color:#11684A;font-weight:700}
.compare td.n{color:var(--muted)}
.compare-wrap{overflow-x:auto}
.compare-wrap .compare{min-width:640px}

/* ============================================================
   PRICING — token packages
   ============================================================ */
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pk{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:24px 20px;text-align:center;position:relative;box-shadow:var(--shadow-card);transition:transform .25s var(--ease-out),box-shadow .25s ease}
.pk:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.pk.best{border-color:var(--yellow-2);box-shadow:0 0 0 4px rgba(255,199,50,.25),var(--shadow-card)}
.pk .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#1a1206;font-family:'Nunito',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;box-shadow:0 3px 0 var(--yellow-2);white-space:nowrap}
.pk .nm{font-family:'Nunito',sans-serif;font-weight:800;font-size:20px;color:var(--ink)}
.pk .coins{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 4px;font-family:'Nunito',sans-serif;font-weight:900;font-size:34px;color:#B07A00}
.pk .coins .c{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#F5B80F 60%,#C98A00);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.pk .tok{font-size:13px;color:var(--muted);font-weight:600}
.pk .price{font-family:'Nunito',sans-serif;font-weight:900;font-size:28px;color:var(--ink);margin-top:14px}
.pk .per{font-size:12.5px;color:var(--muted);margin-top:2px}
.pk .eq{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink-2);line-height:1.5}
@media (max-width:1000px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pk-grid{grid-template-columns:1fr}}
.costs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cost{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow-card)}
.cost .amt{font-family:'Nunito',sans-serif;font-weight:900;font-size:22px;color:#B07A00;min-width:70px;text-align:center;background:#FFF6D9;border-radius:14px;padding:8px 6px;line-height:1}
.cost .amt small{display:block;font-size:10px;font-weight:600;color:#9A7A2A;letter-spacing:.06em;margin-top:3px;text-transform:uppercase}
.cost .amt.free{color:#11684A;background:#DDF6EC}
.cost .amt.free small{color:#11684A}
.cost h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:16.5px;margin:0 0 4px;color:var(--ink)}
.cost p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
@media (max-width:900px){.costs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.costs{grid-template-columns:1fr}}
.calc{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow-card);display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.calc label{font-weight:600;font-size:14.5px;color:var(--ink);display:flex;justify-content:space-between;margin-bottom:8px}
.calc label output{font-family:'Nunito',sans-serif;color:var(--blue-1);font-size:16px;font-weight:800}
.calc input[type=range]{width:100%;accent-color:var(--blue-1);margin-bottom:18px}
.calc .res{background:linear-gradient(155deg,#0E5BD9,#1F7AEF);color:#fff;border-radius:20px;padding:22px}
.calc .res .big{font-family:'Nunito',sans-serif;font-weight:900;font-size:40px;line-height:1}
.calc .res p{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:14px;line-height:1.5}
@media (max-width:800px){.calc{grid-template-columns:1fr}}

/* ============================================================
   ROLE CARDS (registration)
   ============================================================ */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.role{border-radius:26px;padding:28px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px;transition:transform .25s var(--ease-out),border-color .2s ease}
.role:hover{transform:translateY(-5px);border-color:var(--blue-2)}
.role .em{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--c)}
.role h2{font-family:'Nunito',sans-serif;font-weight:800;font-size:24px;margin:0;color:var(--ink)}
.role p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
.role .checks{margin:4px 0 8px}
.role .btn{margin-top:auto;justify-content:center}
@media (max-width:960px){.roles{grid-template-columns:1fr}}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:92px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow-card);max-height:calc(100vh - 120px);overflow:auto}
.toc h2{font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.toc a{display:flex;gap:8px;font-size:13.5px;line-height:1.35;color:var(--ink-2);padding:6px 8px;border-radius:10px;transition:background .15s ease,color .15s ease}
.toc a::before{counter-increment:t;content:counter(t) ".";font-weight:700;color:var(--muted);min-width:18px}
.toc a:hover{background:var(--bg-2);color:var(--ink)}
.toc a.on{background:#EAF2FF;color:var(--blue-1);font-weight:600}
.toc a.on::before{color:var(--blue-1)}
@media (max-width:960px){.legal-grid{grid-template-columns:1fr}.toc{position:relative;top:0;max-height:none}}
.prose.legal{max-width:none}
.prose.legal h2{scroll-margin-top:96px;display:flex;gap:10px;align-items:baseline}
.prose.legal h2 .no{font-size:.8em;color:var(--blue-1)}
.summary-box{background:linear-gradient(155deg,#EAF2FF,#F6F9FF);border:1px solid #D4E3FB;border-radius:22px;padding:22px 24px;margin-bottom:28px}
.summary-box h2{margin-top:0!important;font-size:21px!important}
.summary-box ul{margin-bottom:0}
.callout{border-radius:16px;padding:14px 16px;margin:0 0 18px;font-size:15px;line-height:1.6;background:#FFF8E1;border:1px solid #FFE6A6;color:#5A4300}
.callout.blue{background:#EAF2FF;border-color:#D4E3FB;color:#123E86}
.callout.mint{background:#E5F8F3;border-color:#BDEBDD;color:#0F5446}
.placeholder{background:#FFE9A8;border-radius:5px;padding:0 5px;color:#5A3D00;font-weight:600}
.dtable-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:16px}
.dtable{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.dtable th,.dtable td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.5}
.dtable th{background:#FAFBFD;color:var(--ink);font-weight:700;font-size:13px}
.dtable tr:last-child td{border-bottom:0}
@media print{.toc,.site-head,.footer,.page-hero-wave,.cta-band{display:none!important}.legal-grid{display:block}}

/* ============================================================
   MISC
   ============================================================ */
.safe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.safe{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:20px;color:#fff}
.safe .ic{font-size:24px;margin-bottom:8px}
.safe h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;margin:0 0 6px}
.safe p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.75)}
@media (max-width:1000px){.safe-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.safe-grid{grid-template-columns:1fr}}
.sec.dark{background:linear-gradient(180deg,#0B1530,#0A1226);color:#fff}
.sec.dark .sec-title{color:#fff}
.sec.dark .sec-sub{color:rgba(255,255,255,.75)}
.sec.dark .sec-eyebrow{color:var(--yellow)}
.sec.dark .sec-eyebrow::before{background:var(--yellow)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.panel-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-card)}
.panel-card h3{font-family:'Nunito',sans-serif;font-weight:800;font-size:19px;margin:0 0 8px;color:var(--ink)}
.panel-card p{margin:0 0 12px;color:var(--ink-2);font-size:15px;line-height:1.55}
.honest{display:flex;gap:14px;align-items:flex-start;background:#F4F6FB;border-radius:18px;padding:16px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.honest .ic{font-size:20px}

/* reduced motion: stop all loops, show end states */
@media (prefers-reduced-motion:reduce){
  .mock-chip,.league.anim .lg-row,.deck.anim .card,.duel .vs,.reactions span,.flame,.gem .shine,.gem.cracked svg,.marquee .track,.stairs .climber,.fx-tab .prog{animation:none!important}
  .ring{transition:none}
  .pbars i{transition:none}
  .tl::after{transition:none}
  .forget path.curve{stroke-dashoffset:0;animation:none!important}
  .forget .dot{opacity:1;animation:none!important}
}

/* ---- home bento: three extra subject cards ---- */
.subject--eng{grid-column:span 4;background:linear-gradient(155deg,#8A7BFF 0%,#5B3FE0 100%)}
.subject--mat9{grid-column:span 4;background:linear-gradient(155deg,#2C3E70 0%,#141B3A 100%)}
.subject--fin{grid-column:span 4;background:linear-gradient(155deg,#5FD0C0 0%,#178C7C 100%)}
.subject--eng .arrow{color:#4C3BBF}.subject--mat9 .arrow{color:#1B1F3B}.subject--fin .arrow{color:#0F6E61}
@media (max-width:1100px){.subject--eng,.subject--mat9{grid-column:span 1;min-height:220px}.subject--fin{grid-column:span 2;min-height:200px}}
@media (max-width:600px){.subject--eng,.subject--mat9,.subject--fin{grid-column:span 1;min-height:180px}}
.hero-trust .facts-inline{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.hero-trust .facts-inline b{color:#fff;font-family:'Nunito',sans-serif;font-size:17px;font-weight:800}
.hero-trust .facts-inline .sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.stats .stat .lbl small{display:block;font-size:12px;opacity:.7;margin-top:2px}
/* 8-card bento: mat(6x2) bhs(6) bio(6) / hem eng fiz (4) / matura fin (6) */
@media (min-width:1101px){
  .subjects .subject--bio{grid-column:span 6}
  .subjects .subject--mat9,.subjects .subject--fin{grid-column:span 6;min-height:220px}
}
/* accordion: keep padding inside the clipped child so closed items show nothing */
.curric-body .inner{padding:0 22px}
.curric-body .inner>.wrapin{padding:4px 0 20px}
.curric-body .topics{margin:0 0 12px;font-size:14.5px;color:var(--ink-2);background:var(--bg-2);border-radius:12px;padding:10px 14px;line-height:1.5}
.curric{max-width:none}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.kpis.k3{grid-template-columns:1fr}}
.legal-grid>*{min-width:0}