:root{--ink:#14213d;--muted:#5a6478;--bg:#fff;--alt:#f4f6fb;--brand:#12317f;--brand2:#0a1f55;--accent:#f5a524;--line:#e3e7f0;--r:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Heebo,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;font-size:17px}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}.narrow{max-width:760px}
.top{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-weight:800;font-size:1.25rem;color:var(--ink);display:flex;align-items:center;gap:10px}
.brand img{height:54px;width:auto;display:block}.mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--brand);color:#fff;font-size:1.2rem}
nav{display:flex;align-items:center;gap:22px}nav a{color:var(--ink);font-weight:500}nav a.on{color:var(--brand)}
.burger{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:12px 26px;border-radius:999px;font-weight:700;transition:.15s}
.btn:hover{background:var(--brand2);transform:translateY(-1px)}.btn.small{padding:8px 18px;color:#fff}
.btn.ghost{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}.btn.ghost:hover{background:var(--brand);color:#fff}
.hero{background:linear-gradient(135deg,#0a1f55,#12317f 60%,#1d4aa8);color:#fff;padding:90px 0 80px}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.2;margin:.3em 0}
.hero .lead{font-size:1.2rem;max-width:620px;opacity:.92;margin-bottom:28px}
.eyebrow{display:inline-block;background:rgba(255,255,255,.15);padding:4px 14px;border-radius:999px;font-weight:500;margin:0}
.hero .btn{background:var(--accent);color:#1a1a1a}.hero .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.sec{padding:64px 0}.sec.alt{background:var(--alt)}
h1{font-size:2.2rem;line-height:1.25;margin:.4em 0}h2{font-size:1.8rem;margin:0 0 .3em}
.sub{color:var(--muted);margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:28px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;color:var(--ink);transition:.15s}
.card:hover{box-shadow:0 10px 30px rgba(20,33,61,.1);transform:translateY(-3px)}
.card h3{margin:.5em 0 .2em;font-size:1.3rem}.card p{color:var(--muted);margin:0 0 .8em}.more{color:var(--brand);font-weight:700}
.tag{display:inline-block;font-size:.8rem;font-weight:700;padding:3px 12px;border-radius:999px}.t1{background:#e4ecff;color:var(--brand2)}.t2{background:#fff0d4;color:#8a5a00}
.tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:24px}
.track{background:#fff;border-radius:12px;padding:16px 18px;border:1px solid var(--line);display:flex;flex-direction:column}.track span{color:var(--muted);font-size:.95rem}
.quote{margin:24px 0 0;background:var(--alt);border-radius:var(--r);padding:30px;font-size:1.25rem;border-right:5px solid var(--accent)}.quote cite{display:block;margin-top:12px;font-size:.95rem;color:var(--muted);font-style:normal}
.cta{background:var(--ink);color:#fff;text-align:center;padding:60px 0}.cta p{opacity:.85}.cta .btn{background:var(--accent);color:#1a1a1a}.cta .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.crumb{display:block;margin-bottom:12px;color:var(--muted)}.lead2{font-size:1.2rem;color:var(--muted)}
.box{background:var(--alt);border-radius:var(--r);padding:20px 24px;margin:24px 0;border:1px solid var(--line)}.box h3{margin-top:0}
.contact{display:grid;gap:14px;margin-top:24px}.box.big{display:flex;justify-content:space-between;align-items:center;margin:0;color:var(--ink)}.box.big:hover{border-color:var(--brand)}
.post{display:block;padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink)}.post h3{margin:0}.post span{color:var(--muted);font-size:.9rem}
.post-body{margin-top:20px}
footer{background:#0e1730;color:#cfd6e6;padding:40px 0 20px}footer a{color:#fff}.foot{display:flex;gap:40px;justify-content:space-between;flex-wrap:wrap}.foot p{margin:.2em 0}.copy{margin-top:24px;opacity:.6;font-size:.9rem}
@media(max-width:760px){
.burger{display:block}nav{display:none;position:absolute;top:68px;right:0;left:0;background:#fff;flex-direction:column;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--line);gap:14px}
.open nav{display:flex}.hero{padding:60px 0}.sec{padding:44px 0}h1{font-size:1.8rem}}

.herogrid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}.herologo{background:#fff;border-radius:24px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}.herologo img{width:100%;height:auto;display:block}@media(max-width:760px){.herogrid{grid-template-columns:1fr}.herologo{max-width:260px}}

.about{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start}
.aboutimg img{width:100%;height:auto;border-radius:24px;box-shadow:0 20px 50px rgba(20,33,61,.2);display:block}
.abouttxt h1{margin-top:0}.sign{margin-top:1.4em;font-size:1.15rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.facts div{background:var(--alt);border-radius:14px;padding:14px;text-align:center;border:1px solid var(--line)}
.facts b{display:block;font-size:1.6rem;color:var(--brand)}.facts span{font-size:.85rem;color:var(--muted);line-height:1.3;display:block}
@media(max-width:760px){.about{grid-template-columns:1fr;gap:28px}.aboutimg{max-width:260px;margin:0 auto}.facts{grid-template-columns:1fr}}

.heroimg{position:relative}
.heroimg img{width:100%;height:440px;object-fit:cover;object-position:50% 20%;border-radius:28px;display:block;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.badge{position:absolute;bottom:-18px;right:-14px;background:var(--accent);color:#1a1a1a;border-radius:18px;padding:12px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.badge b{font-size:1.9rem;line-height:1}.badge span{font-size:.85rem;line-height:1.25;font-weight:500}
@media(max-width:760px){.heroimg img{height:300px}.badge{right:10px}}

.slider{position:relative;margin-top:24px}
.slider .slide{margin:0;transition:opacity .6s,transform .6s}

.slider .slide.on{animation:slidein .6s ease}
@keyframes slidein{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:.2s}
.dots button.on{background:var(--brand);width:26px;border-radius:999px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.slider .slide.on{animation:none}}

/* hero entrance animation */
.hero{position:relative;overflow:hidden}
.herogrid{position:relative;z-index:1}
.herotext>*{opacity:0;animation:rise .45s cubic-bezier(.2,.7,.2,1) forwards}
.herotext>.eyebrow{animation-delay:0s}.herotext h1{animation:none;opacity:1}
.herotext .lead{animation-delay:.2s}.herotext>.btn{animation-delay:.28s}
.hero h1 .ln{display:block;opacity:0;animation:rise .45s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .ln:nth-child(1){animation-delay:.05s}.hero h1 .ln:nth-child(2){animation-delay:.14s}
.hero h1 .hl{background:linear-gradient(90deg,#ffd27a,#f5a524);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.heroimg{opacity:0;animation:rise .5s .1s cubic-bezier(.2,.7,.2,1) forwards}
.badge{animation:pop .4s .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.floaters{position:absolute;inset:0;pointer-events:none;z-index:0}
.floaters i{position:absolute;font-style:normal;font-weight:700;color:rgba(255,255,255,.1);font-size:3rem;animation:drift 14s ease-in-out infinite}
.floaters i:nth-child(1){top:12%;left:6%;font-size:4.5rem}
.floaters i:nth-child(2){top:62%;left:12%;animation-delay:-3s}
.floaters i:nth-child(3){top:20%;left:38%;animation-delay:-6s;font-size:3.6rem}
.floaters i:nth-child(4){top:70%;left:44%;animation-delay:-2s;font-size:4rem}
.floaters i:nth-child(5){top:8%;left:62%;animation-delay:-8s}
.floaters i:nth-child(6){top:80%;left:70%;animation-delay:-5s}
.floaters i:nth-child(7){top:45%;left:28%;animation-delay:-10s;font-size:2.4rem}
.floaters i:nth-child(8){top:50%;left:90%;animation-delay:-4s;font-size:3.4rem}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(8deg)}}
/* stats band */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:34px;padding-bottom:34px;text-align:center}
.stat b{display:block;font-size:2.8rem;line-height:1.1;color:var(--brand);font-weight:800}
.stat>span{color:var(--muted);font-size:.98rem}
@media(max-width:760px){.statgrid{gap:8px}.stat b{font-size:1.9rem}.stat>span{font-size:.8rem;display:block;line-height:1.3}}
@media(prefers-reduced-motion:reduce){.herotext>*,.hero h1 .ln,.heroimg{opacity:1;animation:none}.floaters i,.badge{animation:none}}

/* topic floaters (override) */
.floaters svg.fl{position:absolute;width:150px;height:auto;color:rgba(255,255,255,.34);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:drift 14s ease-in-out infinite}
.floaters svg .f{fill:currentColor;stroke:none}.floaters svg .f[class~="f"]{fill:currentColor}
.floaters svg .t{fill:currentColor;stroke:none;font-family:Heebo,system-ui,sans-serif;font-weight:700}
.fl.bell{top:1%;left:44%;width:120px}.fl.lim{top:2%;left:62%;animation-delay:-6s;width:100px}.fl.reg{top:1%;left:78%;animation-delay:-8s;width:120px}
.fl.func{top:80%;left:44%;animation-delay:-3s;width:120px}.fl.hyp{top:81%;left:60%;animation-delay:-2s;width:125px}.fl.anova{top:80%;left:77%;animation-delay:-5s;width:115px}
.fl.integ{top:42%;left:2%;animation-delay:-10s;width:130px}.fl.sig{top:20%;left:92%;animation-delay:-4s;width:90px}
@media(max-width:760px){.floaters svg.fl{width:90px!important}.fl.integ,.fl.sig,.fl.lim{display:none}}

/* static background pattern across the whole hero */
.floaters svg.fl{animation:none!important;color:rgba(255,255,255,.2);height:auto}
@media(max-width:760px){.floaters svg.fl{width:80px!important}}

html{scroll-padding-top:76px}

/* illustrated tracks */
.teach{display:grid;grid-template-columns:1fr minmax(240px,320px);gap:48px;align-items:start}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.tcard h3{margin:0 0 10px;font-size:1.2rem}.tcard p{margin:10px 0 0;font-size:.9rem;color:var(--muted);line-height:1.5}
.tbox{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;transition:transform .25s}
.tbox svg{width:52%;height:auto}.tcard:hover .tbox{transform:translateY(-4px)}
.ttext h2{font-size:2rem}.btn.navy{background:#1a2b8a;border-radius:4px;padding:12px 40px}.btn.navy:hover{background:var(--brand2)}
@media(max-width:900px){.teach{grid-template-columns:1fr}.ttext{order:-1}.tgrid{grid-template-columns:repeat(2,1fr)}}
/* contact section */
.contactsec{background:#dcdcf7;padding:64px 0}
.cgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.cinfo h2{font-size:2rem}.cinfo p{margin:.3em 0}.cinfo a{color:var(--ink)}
.cform label{display:block;font-weight:700;margin-bottom:14px}
.cform input,.cform textarea{display:block;width:100%;background:transparent;border:0;border-bottom:3px solid #111;padding:8px 2px;font:inherit;font-weight:400;outline:none}
.cform input:focus,.cform textarea:focus{border-bottom-color:var(--brand)}
.btn.wide{width:100%;border:0;cursor:pointer;font:inherit;font-weight:700;margin-top:6px}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}
/* floating whatsapp */
.wafab{position:fixed;left:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#1a2b8a;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:20;transition:transform .2s}
.wafab:hover{transform:scale(1.08)}

/* fix: stable slider height + no horizontal overflow during slide animation */
html,body{overflow-x:clip}
.slider{display:grid;overflow:hidden}
.slider .slide{grid-area:1/1;visibility:hidden;opacity:0;margin:0}
.slider .slide.on{visibility:visible;opacity:1}
.slider .dots{grid-area:2/1}
@keyframes slidein{from{opacity:0;transform:translateX(0) translateY(12px)}to{opacity:1;transform:none}}

.box li.syl{margin-bottom:.6em}.box li.syl ul{margin:.4em 0 0;padding-inline-start:1.2em;list-style:disc}.box li.syl ul li{margin:.2em 0;color:var(--muted)}

.box li.syl ol{margin:.4em 0 0;padding-inline-start:1.4em;list-style:decimal}.box li.syl ol li{margin:.35em 0;color:var(--muted)}.box li.syl ol li b{color:var(--ink)}

.box li.syl .wk{display:inline-block;font-size:.78rem;background:#e4ecff;color:var(--brand2);border-radius:999px;padding:0 9px;margin-inline-end:6px;font-weight:700}

/* students area + login */
.btn.small.ghostnav{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.btn.small.ghostnav:hover{background:var(--brand);color:#fff}
.loginbox{text-align:center;padding:32px 24px}
.gbtn{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:999px;padding:11px 24px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12);transition:.15s}
.gbtn:hover{box-shadow:0 4px 14px rgba(0,0,0,.18)}
.sub.small{font-size:.9rem;margin-top:14px}
.whobar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--alt);border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin-bottom:8px}
.linkbtn{background:none;border:0;color:var(--brand);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
[hidden]{display:none!important}
@media(max-width:760px){nav .ghostnav{align-self:flex-start}}

.tag+.tag{margin-inline-start:6px}

/* members area */
.members{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}.members h3{margin:0 0 4px}
.mbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.mbtns .btn.ghost{background:transparent}.mbtns .btn.ghost:hover{background:var(--brand);color:#fff}
.h2s{font-size:1.4rem;margin:.6em 0 .4em}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tabs a,.tabs button{padding:8px 18px;border-radius:999px;border:0;background:var(--alt);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.tabs a.on,.tabs button.on{background:var(--brand);color:#fff}
.ann .annbody{white-space:pre-wrap;margin:.4em 0}.ann h3{margin:0}
.links{list-style:none;padding:0;margin:0}.links li{padding:7px 0;border-bottom:1px solid var(--line)}.links li:last-child{border:0}
.links .wk{display:inline-block;font-size:.8rem;background:#e4ecff;color:var(--brand2);border-radius:999px;padding:0 9px;font-weight:700}
.wk{display:inline-block}
/* admin */
.wrap .box label,#cform label,#addform label{display:block;font-weight:700;margin:10px 0}
.box input[type=text],.box input[type=url],.box input[type=date],.box textarea,.box select,.sfilter{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-weight:400;background:#fff;margin-top:4px}
.chk{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 12px}.chk label{font-weight:400;margin:0}
.sfilter{margin:18px 0 8px}
.tablewrap{overflow-x:auto}.stt{width:100%;border-collapse:collapse;font-size:.92rem}.stt th,.stt td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center}.stt th:first-child,.stt td:first-child{text-align:start}.stt .em{font-family:ui-monospace,monospace}
.crow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.flash{position:fixed;bottom:20px;right:20px;left:20px;max-width:360px;margin:auto;background:#0e1730;color:#fff;padding:10px 16px;border-radius:12px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s;z-index:30}
.flash.show{opacity:1}.flash.bad{background:#b3261e}
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.chapters .box.chap{margin:0}
.vlist{margin:10px 0 0;padding-inline-start:26px;line-height:2}
.vlist a{text-decoration:underline}
.nm{width:100%;min-width:120px;border:1px solid transparent;background:transparent;font:inherit;padding:4px 6px;border-radius:6px}.nm:hover,.nm:focus{border-color:var(--line);background:#fff}
.sfrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}.sfrow .sfilter{flex:1;min-width:180px;margin:0}.cfl{display:flex;gap:6px;align-items:center;font-weight:700}
.btn.small.ghostnav.loggedin{display:inline-flex;flex-direction:column;align-items:center;line-height:1.2;padding:5px 18px;border-radius:22px}
.ghostnav.loggedin small{font-size:.72rem;font-weight:500;opacity:.8;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* press feedback (touch + mouse) */
.btn,.card,.gbtn,.tabs a,.tabs button{-webkit-tap-highlight-color:transparent}
.btn:active,.gbtn:active,.tabs a:active,.tabs button:active{transform:scale(.97);transition-duration:.08s}
.card:active{transform:scale(.985);transition-duration:.08s}
@media(prefers-reduced-motion:reduce){.btn:active,.gbtn:active,.card:active,.tabs a:active,.tabs button:active{transform:none}}
/* chapters editor */
.chbox{margin:14px 0}.chhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.chname{flex:1;min-width:200px;font:inherit;font-weight:800;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.vrow{display:flex;gap:8px;align-items:center;margin:6px 0;flex-wrap:wrap}.vn{width:26px;color:#5b6477;text-align:center}
.vt{flex:2;min-width:160px}.vu{flex:2;min-width:160px;font-size:.85rem}
.vrow input{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff}
.vb{border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;height:34px;cursor:pointer;font:inherit}.vb:hover{background:var(--alt)}
.vadd{border-top:1px dashed var(--line);padding-top:10px;margin-top:10px}
.chnew{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
details#bulkbox{margin-top:16px}details#bulkbox summary{cursor:pointer;font-weight:700}