:root{--blue:#3b3468;--navy:#3b3468;--deep:#2d2750;--indigo:#3b3468;--sky:#38bdf8;--accent:#ff7a1a;--accent-d:#e8650a;--bg:#fff;--peach:#fff4e6;--mut:#6b6788;--r:6px;--grad:linear-gradient(135deg,#ffb23e,#ff7a1a);--sh:0 10px 35px rgba(59,52,104,.10)}
*,*::before,*::after{border:0!important;font-style:normal!important}
body{font-family:'Poppins','Noto Serif Bengali',sans-serif;background:#fff;color:#2b2750;line-height:1.75}
body h1,body h2,body h3,body h4{font-weight:700;color:var(--navy);line-height:1.35;letter-spacing:-.01em}
body .text-slate-600,body .text-slate-500{color:var(--mut)}
.wrap{max-width:1200px;width:100%;margin:0 auto}.sec{padding:4.5rem 1rem}
.grad{background:var(--grad)}
.glow{background:linear-gradient(180deg,#fff1de 0,#fff 90%)}
.kicker{display:block;color:var(--accent);font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.pill{display:inline-block;background:var(--grad);color:#fff;font-size:.78rem;font-weight:600;padding:.25rem .9rem;border-radius:var(--r);margin-bottom:1rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--r);font-weight:600;font-size:.92rem;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn-accent{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(255,122,26,.32)}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,122,26,.42)}
.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:var(--deep)}
.btn-ghost,.btn-light{background:#fff;color:var(--navy);box-shadow:0 4px 16px rgba(59,52,104,.14)}.btn-ghost:hover,.btn-light:hover{background:var(--navy);color:#fff}
.playc{width:3rem;height:3rem;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;box-shadow:0 4px 16px rgba(255,122,26,.3);flex:none}

.card{background:#fff;border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh)}
a.card,article.card{transition:box-shadow .15s,transform .15s}a.card:hover,article.card:hover{box-shadow:0 16px 40px rgba(59,52,104,.18);transform:translateY(-2px)}
.input{width:100%;border-radius:var(--r);padding:.65rem .9rem;background:#fff;box-shadow:0 2px 12px rgba(59,52,104,.14)}.input:focus{box-shadow:0 2px 12px rgba(255,122,26,.35)}
.input:focus,.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.err{color:#dc2626;font-size:.8rem;margin-top:.2rem}
.tab{padding:.45rem 1.1rem;border-radius:var(--r);font-weight:600;font-size:.88rem;background:var(--peach);color:var(--accent-d)}.tab.on{background:var(--grad);color:#fff}
.badge{display:inline-block;font-size:.76rem;font-weight:600;padding:.1rem .7rem;border-radius:var(--r);background:var(--peach);color:var(--accent-d)}
.ico{width:2.9rem;height:2.9rem;border-radius:var(--r);background:var(--peach);color:var(--accent);display:grid;place-items:center;font-size:1.15rem;flex:none}
.ico.g{background:var(--grad);color:#fff}.ico.sm{width:2.3rem;height:2.3rem;font-size:.95rem}.card .ico+h3{margin-top:.9rem}
.modal{position:fixed;inset:0;background:rgba(45,39,80,.6);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal.open{display:flex}
.acc-body{display:none}.acc.open .acc-body{display:block}.acc.open .fa-chevron-down{transform:rotate(180deg)}.acc.open{box-shadow:0 14px 34px rgba(255,122,26,.2)}
.tbl{width:100%;font-size:.9rem}.tbl th{text-align:left;background:#fff;color:var(--navy);font-weight:700;padding:.7rem 1rem;white-space:nowrap}.tbl td{padding:.7rem 1rem;white-space:nowrap}.tbl tr:nth-child(even) td{background:#fffaf4}.tbl tr:hover td{background:var(--peach)}
.toast{position:fixed;bottom:1rem;left:1rem;background:var(--navy);color:#fff;padding:.8rem 1.2rem;border-radius:var(--r);z-index:200}
.fab-group{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:12px;z-index:90}
.fab{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;color:#fff;border:0;cursor:pointer;box-shadow:0 6px 16px rgba(59,52,104,.25)}
.fab-wa{background:#25d366}.fab-top{background:var(--grad);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}.fab-top.show{opacity:1;visibility:visible;transform:none}

/* Header & footer */
.hdr{background:#fff;box-shadow:0 4px 22px rgba(59,52,104,.10);color:#2b2750}
.nav-a{padding:.5rem .85rem;font-weight:500;font-size:.92rem;color:var(--navy);transition:color .15s}.nav-a:hover,.nav-a.on{color:var(--accent)}
.dd{display:none;position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:var(--r);min-width:13rem;padding:.4rem;box-shadow:0 14px 34px rgba(59,52,104,.18);z-index:50}.dd.open{display:block}
.dd a{display:block;padding:.5rem .8rem;border-radius:var(--r);color:var(--navy)!important}.dd a:hover{background:var(--peach)}
.mob-a{display:block;padding:.8rem 0;font-weight:500;color:var(--navy)}.mob-a.on{color:var(--accent)}
.foot{background:#fff;color:var(--mut);box-shadow:0 -8px 28px rgba(59,52,104,.08)}
.foot h4{color:var(--navy);margin-bottom:.6rem}.foot-a{display:block;padding:.2rem 0;font-size:.95rem;transition:color .15s}.foot-a:hover{color:var(--accent)}
.soc{width:2.4rem;height:2.4rem;border-radius:var(--r);background:var(--peach);display:grid;place-items:center;color:var(--accent)}

/* Home */
.hero{background:linear-gradient(180deg,#fff1de 0,#fff 92%)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.35}
.lead{font-size:1.05rem;color:var(--mut);max-width:32rem;margin-top:1.25rem}
.hero-art{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto}
.disc{position:absolute;left:6%;top:12%;width:88%;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,#ffc04f,#ff7a1a)}
.hero-art img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%;height:auto}
.dots{position:absolute;right:0;top:6%;width:90px;height:90px;background-image:radial-gradient(var(--accent) 2px,transparent 2px);background-size:15px 15px;opacity:.6}
.fcard{position:absolute;display:flex;gap:.7rem;align-items:center;background:#fff;border-radius:var(--r);padding:.65rem .9rem;box-shadow:var(--sh);font-size:.78rem;line-height:1.4;z-index:2}
.fcard small{display:block;color:var(--mut)}.fcard b{color:var(--navy);font-size:.95rem}
.f1{top:3%;right:0}.f2{left:0;top:40%}.f3{right:-2%;bottom:12%;flex-direction:column;align-items:flex-start}
.mini{display:flex;gap:5px;align-items:flex-end;height:46px}.mini i{width:11px;background:var(--grad);border-radius:2px}.mini i:nth-child(even){background:#9d92e6}
.pull{padding-top:0;margin-top:-3.5rem;position:relative;z-index:5}
.join{padding:2rem 1.5rem;text-align:center}.join h2{font-size:1.4rem}
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}@media(min-width:768px){.chips{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.chips{grid-template-columns:repeat(6,1fr)}}
.chip{display:flex;gap:.6rem;align-items:center;justify-content:center;padding:.7rem;border-radius:var(--r);transition:background .15s;text-align:left;line-height:1.3}.chip:hover{background:var(--peach)}.chip i{color:var(--accent);font-size:1.2rem}.chip b{display:block;color:var(--navy);font-size:.95rem}.chip small{color:var(--mut)}
.about-art{position:relative;width:100%;max-width:480px;margin:0 auto}
.blob{position:relative;overflow:hidden;aspect-ratio:1.05;border-radius:58% 42% 52% 48%/54% 46% 54% 46%;background:var(--grad)}
.blob img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:84%;height:auto}
.badge25{position:absolute;left:-.5rem;top:-.5rem;width:8.5rem;height:8.5rem;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center;text-align:center;line-height:1.3;font-size:.78rem;color:var(--navy);padding:1rem;z-index:2}.badge25 b{display:block;font-size:2.2rem;color:var(--accent);line-height:1.1}
.arrow{display:none;position:absolute;left:-3.2rem;top:2.2rem;width:2.6rem}@media(min-width:1024px){.arrow{display:block}}
.fitem{display:flex;gap:1rem;margin-top:1.4rem}.fitem b{display:block;color:var(--navy)}.fitem p{color:var(--mut);font-size:.9rem}
.svc{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:1.6rem 1.4rem;text-align:left}
.svc i.big{font-size:1.4rem;width:3rem;height:3rem;display:grid;place-items:center;border-radius:var(--r);background:var(--grad);color:#fff}
.svc h3{margin-top:1.1rem;font-size:1.08rem}.svc p{color:var(--mut);font-size:.9rem;margin-top:.4rem}
.svc.hl{background:var(--grad)}.svc.hl h3,.svc.hl p{color:#fff}.svc.hl i.big{background:#fff;color:var(--accent)}
@media(min-width:1024px){.svcs .svc:nth-child(even){transform:translateY(16px)}}
.dark{position:relative;overflow:hidden;background:var(--navy);color:#d9d6ee;text-align:center;background-image:radial-gradient(circle at 12% 20%,rgba(255,255,255,.07) 0 140px,transparent 141px),radial-gradient(circle at 90% 85%,rgba(255,122,26,.18) 0 160px,transparent 161px)}
.dark h2{color:#fff;font-size:clamp(1.8rem,4vw,3rem);max-width:46rem;margin:0 auto}
.dstats{display:grid;gap:2rem;margin-top:3rem}@media(min-width:640px){.dstats{grid-template-columns:repeat(3,1fr)}}
.dstats b{display:block;font-size:2.4rem;color:#ffa33a;line-height:1.2}.dstats span{font-size:.85rem;color:#d9d6ee}
.ctag{padding:2.5rem;background:var(--grad);color:#fff}.ctag h2{color:#fff}.ctag p{color:#fff3e6}
.ctag .btn-accent{background:#fff;color:var(--accent-d);box-shadow:none}.ctag .btn-accent:hover{background:var(--navy);color:#fff}
.hero-list{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.75rem;font-size:.9rem}
.hero-list li{display:flex;gap:.5rem;align-items:center}.hero-list i{color:#fff;background:var(--accent);width:1.2rem;height:1.2rem;border-radius:var(--r);display:grid;place-items:center;font-size:.6rem;flex:none}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(min-width:1024px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:1.5rem 1rem;text-align:center;background:#fff;border-radius:var(--r);box-shadow:var(--sh)}
.stat b{display:block;font-size:2.2rem;font-weight:700;line-height:1.3;color:var(--accent)}.stat span{color:var(--mut);font-size:.9rem}
.frame{position:relative;padding:1.75rem}
.frame::before{content:"";position:absolute;left:0;top:0;width:6rem;height:6rem;border-radius:50%;background:var(--grad);opacity:.35}
.frame::after{content:"";position:absolute;right:.5rem;bottom:0;width:4rem;height:6rem;border-radius:var(--r);background:var(--peach)}
.frame .card{position:relative;z-index:1}
.person{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}.person img{width:3rem;height:3rem;border-radius:50%;object-fit:cover;object-position:top;background:var(--grad)}.person b{display:block;color:var(--navy);line-height:1.3}.person small{color:var(--mut)}
.playbtn{width:5rem;height:5rem;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;font-size:1.5rem;box-shadow:0 0 0 12px rgba(255,255,255,.3)}
.steps{counter-reset:s;display:grid;gap:1.5rem}@media(min-width:768px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;position:relative;padding-top:3.4rem}
.steps li::before{content:counter(s,bengali);position:absolute;top:0;left:0;width:2.6rem;height:2.6rem;border-radius:var(--r);background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;z-index:1}
@media(min-width:768px){.steps li:not(:last-child)::after{content:"";position:absolute;top:1.3rem;left:3.2rem;right:.5rem;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);opacity:.5}}
.steps h3{font-size:1.05rem}.steps p{color:var(--mut);font-size:.92rem}
.quote{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:1.6rem}.quote::before{content:"\201C";display:block;font-size:3rem;line-height:.6;color:var(--accent);font-weight:700}.quote p{font-size:1.05rem}.quote footer{margin-top:.75rem;font-size:.88rem;color:var(--mut);font-weight:600}
.checks li{display:flex;gap:.75rem;align-items:flex-start;margin:.7rem 0}.checks i{color:#fff;background:var(--accent);width:1.4rem;height:1.4rem;border-radius:var(--r);display:grid;place-items:center;font-size:.65rem;flex:none;margin-top:.2rem}
.info{display:flex;gap:1rem;align-items:flex-start}.info b{display:block;color:var(--navy)}.info p{color:var(--mut)}
.cta{overflow:hidden}.cta-art{width:15rem;height:13rem;background:radial-gradient(circle at 50% 62%,#ffa33a 0 52%,transparent 53%);display:flex;align-items:flex-end;justify-content:center}.cta-art img{height:100%;width:auto}

/* Inner banner */
.banner{background:linear-gradient(180deg,#fff1de 0,#fff 100%);color:#2b2750}
.banner.sec{padding:5rem 1rem;position:relative;overflow:hidden}.banner .wrap{position:relative;z-index:1}
.banner h1{color:var(--navy);font-size:clamp(2rem,4.5vw,3.25rem)}.banner p{color:var(--mut)!important}
@media(min-width:1024px){.banner::after{content:"";position:absolute;right:max(1rem,calc((100vw - 1200px)/2));top:50%;transform:translateY(-50%);width:400px;height:310px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 300'%3E%3Cpath fill='%23ffa33a' d='M200 20C300 0 370 70 360 160C350 250 270 290 190 280C100 270 30 220 40 140C50 70 110 40 200 20Z'/%3E%3Ccircle cx='70' cy='60' r='34' fill='%233b3468'/%3E%3Cpath d='M120 220H270L120 100Z' fill='none' stroke='%23fff' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M120 200h20v20' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Ctext x='205' y='95' font-size='32' font-weight='700' fill='%233b3468' font-family='Poppins,sans-serif'%3Ea%C2%B2+b%C2%B2=c%C2%B2%3C/text%3E%3Ctext x='292' y='238' font-size='48' fill='%23fff' font-family='Poppins,sans-serif'%3E%CF%80%3C/text%3E%3C/svg%3E")}}
.crumb{font-size:.85rem;color:var(--mut);margin-bottom:.75rem}.crumb a{background:var(--peach);color:var(--accent-d);padding:.1rem .7rem;border-radius:var(--r);font-weight:600}.crumb a:hover{text-decoration:underline}

/* Popup */
.pop-box{width:100%;max-width:26rem;padding:0;overflow:hidden;position:relative;box-shadow:0 24px 60px rgba(45,39,80,.4);animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
.pop-art{background:var(--grad);height:11rem;position:relative;overflow:hidden}
.pop-art::before{content:"";position:absolute;left:1.5rem;top:1.5rem;width:4rem;height:4rem;border-radius:50%;background:rgba(255,255,255,.4)}
.pop-art img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto}
.pop-x{position:absolute;right:.75rem;top:.75rem;width:2.2rem;height:2.2rem;border-radius:var(--r);background:#fff;color:var(--navy);display:grid;place-items:center;z-index:2;box-shadow:0 2px 10px rgba(59,52,104,.2)}

/* Dashboard & utilities */
html,body{overflow-x:clip}
header,.dtop{transition:transform .25s ease}.bar-hide{transform:translateY(-110%)}
.dtop{box-shadow:0 4px 18px rgba(59,52,104,.10)}.dash-main{background:#fff}.dash-main h1{font-size:1.6rem}
.dash-main .ico.sm{background:var(--peach);color:var(--accent)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.6rem 1rem;z-index:300;border-radius:var(--r)}.skip:focus{left:8px;top:8px}
.bar{height:8px;background:#f1edf7;border-radius:var(--r);overflow:hidden}.bar span{display:block;height:100%;background:var(--grad)}
.donut{--p:0;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),#f1edf7 0);display:grid;place-items:center;position:relative;flex:none}
.donut::after{content:"";position:absolute;inset:12px;background:#fff;border-radius:50%}.donut b{position:relative;z-index:1;color:var(--navy)}
.chart{display:flex;align-items:flex-end;gap:.75rem;height:170px}.chart>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.25rem;font-size:.72rem;color:#475569}
.chart i{display:block;width:100%;background:var(--grad);border-radius:var(--r) var(--r) 0 0}.chart b{color:var(--navy)}
.b-ok{background:#dcfce7;color:#166534}.b-warn{background:#fef3c7;color:#92400e}.b-bad{background:#fee2e2;color:#991b1b}
.sk{height:210px;border-radius:var(--r);background:#f4f0fa;animation:sk 1.2s ease-in-out infinite alternate}@keyframes sk{to{background:#fffaf4}}
.notif.read{opacity:.5}.tool{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}.dd.rm{position:fixed}
@media(prefers-reduced-motion:reduce){.pop-box{animation:none}.btn,a.card{transition:none}}

/* Footer CTA */
.fcta{position:relative;overflow:hidden;display:grid;gap:1.5rem;align-items:center;background:var(--grad);border-radius:var(--r);padding:2rem;margin-top:-3rem;color:#fff;box-shadow:0 20px 50px rgba(255,122,26,.35)}
@media(min-width:900px){.fcta{grid-template-columns:auto 1fr auto;padding:2.25rem 2.5rem}}
.fcta::before,.fcta::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.fcta::before{width:14rem;height:14rem;right:-3rem;top:-6rem}.fcta::after{width:8rem;height:8rem;left:38%;bottom:-4.5rem}
.fcta>*{position:relative;z-index:1}
.fcta-ic{width:4rem;height:4rem;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;font-size:1.6rem}
.fcta h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem)}.fcta p{color:#fff3e6;margin-top:.25rem;max-width:34rem}
.fcta-b{display:flex;gap:.75rem;flex-wrap:wrap}
.btn-wa{background:#fff;color:var(--accent-d);box-shadow:0 6px 18px rgba(45,39,80,.18)}.btn-wa:hover{background:var(--navy);color:#fff}
.btn-wt{background:rgba(255,255,255,.2);color:#fff}.btn-wt:hover{background:#fff;color:var(--accent-d)}
.pagehead p{margin-top:.15rem}
.dstat{display:flex;gap:1rem;align-items:center}.dstat b{display:block;color:var(--navy);font-size:1.35rem;line-height:1.3}.dstat span{font-size:.85rem;color:var(--mut)}
.tip{display:flex;gap:1rem;align-items:flex-start;margin-top:1.5rem}.tip b{display:block;color:var(--navy)}.tip p{color:var(--mut);font-size:.92rem}
.feature{display:grid;gap:0;overflow:hidden;padding:0}@media(min-width:768px){.feature{grid-template-columns:.9fr 1.1fr}}
.feature-art{background:var(--grad);min-height:12rem;display:grid;place-items:center;color:#fff;font-size:3.2rem;font-weight:700}
.feature-body{padding:1.75rem}

/* Home: merged CTA card (demo + contact) */
body[data-page="home"] .fcta{display:none}
.ctag-m{padding:2rem;color:#fff}.ctag-m h3{color:#fff;font-size:1.45rem;line-height:1.3}
.ctag-div{height:1px;background:rgba(255,255,255,.35);margin:1.5rem 0}

/* Home FAQ: equal column heights on desktop + recorded classes card */
.rec{padding:2rem;margin-top:.75rem}.rec h3{margin-top:.25rem}
.faq-main #faqList{display:flex;flex-direction:column}

/* ===== Home redesign (scoped) — matches hero style ===== */
body[data-page="home"] .h-sec{padding:5rem 1rem}
body[data-page="home"] .h-soft{background:linear-gradient(180deg,#fff9f2 0,#fff 100%)}
body[data-page="home"] section:not(.hero) .pill{font-size:.85rem}
.h-head{text-align:center;max-width:640px;margin:0 auto 3rem}
.h-head h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.h-head .pill,.h-sec .pill{margin-bottom:.9rem}
.h-ico{width:3.2rem;height:3.2rem;border-radius:14px;background:var(--grad);color:#fff;display:inline-grid;place-items:center;flex:none;box-shadow:0 8px 20px rgba(255,122,26,.28)}
.h-ico.big{width:3.6rem;height:3.6rem;font-size:1.25rem;border-radius:16px}
/* strip (students + class chips) */
.h-strip{padding:0 1rem}
.h-strip-card{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:2.25rem;margin-top:-4.5rem;position:relative;z-index:5;display:grid;gap:1.75rem}
.h-strip-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:.5rem}
.h-strip-head p{color:var(--mut);margin-top:.35rem}
@media(min-width:1024px){.h-strip-card{grid-template-columns:.8fr 1.2fr;align-items:center;padding:2.5rem}}
body[data-page="home"] .chips{margin-top:0;grid-template-columns:repeat(2,1fr)}
body[data-page="home"] .chip{background:#fff9f2;border-radius:16px;padding:.9rem 1rem;display:flex;align-items:center;gap:.75rem;transition:transform .15s,box-shadow .15s}
body[data-page="home"] .chip:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(255,122,26,.18)}
body[data-page="home"] .chip i{width:2.4rem;height:2.4rem;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none}
body[data-page="home"] .chip b{display:block;color:var(--navy)}
body[data-page="home"] .chip small{color:var(--mut)}
/* about: stat panel */
.h-stat-panel{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(160deg,#ffb23e,#ff7a1a);color:#fff;padding:2.75rem 2.25rem;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;box-shadow:0 24px 50px rgba(255,122,26,.28)}
.h-stat-panel .relative{position:relative}
.h-ring{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.25);pointer-events:none}
.h-ring.r1{width:320px;height:320px;right:-120px;top:-120px}
.h-ring.r2{width:200px;height:200px;left:-80px;bottom:-80px;background:rgba(255,255,255,.08);border-color:transparent}
.h-big{display:block;font-size:clamp(4.5rem,9vw,7rem);font-weight:800;line-height:1}
.h-big em{font-style:normal;font-size:.5em;vertical-align:top}
.h-big-l{font-size:1.15rem;margin-top:.5rem;color:#fff3e6}
.h-mini{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.h-mini>div{background:rgba(255,255,255,.16);border-radius:16px;padding:1rem 1.1rem;backdrop-filter:blur(4px)}
.h-mini b{display:block;font-size:1.5rem}
.h-mini span{font-size:.85rem;color:#fff3e6}
.h-teacher{display:flex;align-items:center;gap:.9rem;background:#fff;color:var(--navy);border-radius:18px;padding:1rem 1.2rem}
.h-teacher small{display:block;color:var(--mut)}
.h-avatar{width:3rem;height:3rem;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none}
.h-feat-grid{display:grid;gap:1rem}
@media(min-width:640px){.h-feat-grid{grid-template-columns:1fr 1fr}}
.h-feat{background:#fff;border-radius:20px;box-shadow:var(--sh);padding:1.5rem;transition:transform .15s}
.h-feat:hover{transform:translateY(-3px)}
.h-feat b{display:block;margin-top:.9rem;color:var(--navy)}
.h-feat p{color:var(--mut);font-size:.92rem;margin-top:.3rem}
/* why: cards */
body[data-page="home"] .svc{border-radius:22px;padding:2rem 1.6rem;transition:transform .2s,box-shadow .2s}
body[data-page="home"] .svc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(59,52,104,.16)}
body[data-page="home"] .svc.hl{background:linear-gradient(160deg,#ffb23e,#ff7a1a);color:#fff}
body[data-page="home"] .svc.hl h3{color:#fff}
body[data-page="home"] .svc.hl p{color:#fff3e6}
body[data-page="home"] .svc.hl .h-ico{background:#fff;color:var(--accent)}
body[data-page="home"] .svc h3{font-size:1.08rem;margin-top:1.1rem}
body[data-page="home"] .svc p{color:var(--mut);font-size:.93rem;margin-top:.4rem}
@media(min-width:1024px){body[data-page="home"] .svcs .svc:nth-child(even){transform:none}}
body[data-page="home"] .svc:hover{transform:translateY(-4px)}
/* dark stats */
body[data-page="home"] .dark h2{margin-top:.9rem}
.dstats>div{background:rgba(255,255,255,.07);border-radius:20px;padding:1.75rem 1rem;border:1px solid rgba(255,255,255,.1)}
/* routine */
.h-table-card{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:1.25rem;overflow-x:auto}
.h-table-card .tbl{font-size:.95rem}
.h-table-card .tbl th{background:#fff9f2;border-radius:0;padding:.9rem 1.1rem}
.h-table-card .tbl td{padding:.95rem 1.1rem}
.h-table-card .tbl tr:nth-child(even){background:transparent}
.h-table-card .tbl tr:not(:first-child){border-top:1px solid #f1ecf7}
.h-table-card .tbl tr:not(:first-child):hover td{background:#fff9f2}
/* steps: numbered cards */
body[data-page="home"] .steps{gap:1.25rem;counter-reset:s}
body[data-page="home"] .steps li{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:2rem 1.5rem 1.75rem;margin-top:0}
body[data-page="home"] .steps li::after{display:none}
body[data-page="home"] .steps li h3{margin-top:0}
body[data-page="home"] .steps li p{color:var(--mut);font-size:.93rem}
/* quotes */
body[data-page="home"] .quote{border-radius:22px;padding:2rem 1.8rem}
body[data-page="home"] .quote p{font-size:1.02rem;color:var(--navy)}
body[data-page="home"] .quote footer{color:var(--accent-d)}
@media(max-width:640px){body[data-page="home"] .h-stat-panel{padding:2rem 1.5rem}.h-strip-card{padding:1.5rem;margin-top:-3rem}body[data-page="home"] .chips{grid-template-columns:1fr 1fr}.h-head{margin-bottom:2rem}}
body[data-page="home"] .steps li::before{left:1.5rem;top:1.5rem;width:2.8rem;height:2.8rem;border-radius:14px}
body[data-page="home"] .steps li h3{padding-top:3.4rem}
body[data-page="home"] .chip{justify-content:flex-start;text-align:left}

/* ===== Strip card redesign (structure unchanged) ===== */
.h-strip-card{padding:0;overflow:hidden;gap:0;background:#fff}
.h-strip-head{background:linear-gradient(160deg,#ffb23e,#ff7a1a);color:#fff;padding:2rem 1.75rem;position:relative;overflow:hidden}
.h-strip-head::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.h-strip-head h2{color:#fff;position:relative;z-index:1}
.h-strip-head p{color:#fff3e6;position:relative;z-index:1}
.h-strip-head .pill{background:#fff;color:var(--accent-d);position:relative;z-index:1}
.h-strip-card .chips{padding:1.75rem;margin-top:0;gap:1rem}
body[data-page="home"] .chip{background:#fff;box-shadow:0 6px 18px rgba(59,52,104,.08);border-radius:18px;padding:1rem;position:relative;overflow:hidden}
body[data-page="home"] .chip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cc,var(--accent))}
body[data-page="home"] .chip i{background:var(--cc,var(--accent));box-shadow:0 8px 18px rgba(0,0,0,.12);width:2.6rem;height:2.6rem;border-radius:50%}
body[data-page="home"] .chip:nth-child(1),body[data-page="home"] .chip:nth-child(2){--cc:#38bdf8}
body[data-page="home"] .chip:nth-child(3),body[data-page="home"] .chip:nth-child(4){--cc:#ff7a1a}
body[data-page="home"] .chip:nth-child(5),body[data-page="home"] .chip:nth-child(6){--cc:#3b3468}
body[data-page="home"] .chip small{font-size:.8rem}
@media(min-width:1024px){.h-strip-card{grid-template-columns:.75fr 1.25fr}.h-strip-head{padding:3rem 2.5rem;display:flex;flex-direction:column;justify-content:center}.h-strip-card .chips{padding:2.5rem}}
@media(max-width:640px){body[data-page="home"] .chip{padding:.8rem}body[data-page="home"] .chip i{width:2.2rem;height:2.2rem}}

/* ===== Header & footer menus (all public pages) ===== */
body[data-layout="pub"] .nav-a{position:relative;padding:.5rem .9rem;border-radius:999px;transition:background .18s,color .18s}
body[data-layout="pub"] .nav-a:hover{background:#fff1de;color:var(--accent-d)}
body[data-layout="pub"] .nav-a.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(255,122,26,.28)}
body[data-layout="pub"] .hdr{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid #f3ead9}
body[data-layout="pub"] .dd{border-radius:16px;box-shadow:0 18px 40px rgba(59,52,104,.16);padding:.5rem;overflow:hidden}
body[data-layout="pub"] .dd a{display:block;padding:.6rem .9rem;border-radius:10px;transition:background .15s,color .15s}
body[data-layout="pub"] .dd a:hover{background:#fff1de;color:var(--accent-d)}
body[data-layout="pub"] .foot-a{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;transition:color .15s,transform .15s}
body[data-layout="pub"] .foot-a::before{content:"›";color:var(--accent);font-weight:700;opacity:0;transform:translateX(-6px);transition:.15s}
body[data-layout="pub"] .foot-a:hover{color:var(--accent-d);transform:translateX(4px)}
body[data-layout="pub"] .foot-a:hover::before{opacity:1;transform:none}
body[data-layout="pub"] .soc{width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:#fff1de;color:var(--accent-d);font-size:1rem;transition:.2s;cursor:pointer}
body[data-layout="pub"] .soc:hover{background:var(--grad);color:#fff;transform:translateY(-2px)}

/* ===== Home items ===== */
body[data-page="home"] .h-ico{transition:transform .2s}
body[data-page="home"] .h-feat:hover .h-ico,body[data-page="home"] .svc:hover .h-ico{transform:rotate(-6deg) scale(1.06)}
body[data-page="home"] .h-feat:nth-child(2) .h-ico{background:linear-gradient(135deg,#38bdf8,#0ea5e9);box-shadow:0 8px 20px rgba(14,165,233,.28)}
body[data-page="home"] .svc:nth-child(2) .h-ico{background:linear-gradient(135deg,#38bdf8,#0ea5e9);box-shadow:0 8px 20px rgba(14,165,233,.28)}
body[data-page="home"] .svc:nth-child(3) .h-ico{background:linear-gradient(135deg,#7c74b8,#3b3468);box-shadow:0 8px 20px rgba(59,52,104,.28)}
body[data-page="home"] .svc:nth-child(4) .h-ico{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 8px 20px rgba(16,185,129,.28)}
body[data-page="home"] .svc.hl .h-ico{background:#fff;color:var(--accent)}
body[data-page="home"] .svc{position:relative;overflow:hidden}
body[data-page="home"] .svc::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:rgba(255,122,26,.07)}
body[data-page="home"] .svc.hl::after{background:rgba(255,255,255,.15)}
body[data-page="home"] .h-feat{position:relative;overflow:hidden}
body[data-page="home"] .h-feat::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s}
body[data-page="home"] .h-feat:hover::before{transform:scaleX(1)}
body[data-page="home"] .dstats>div{transition:transform .2s,background .2s}
body[data-page="home"] .dstats>div:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
body[data-page="home"] .steps li{transition:transform .2s,box-shadow .2s}
body[data-page="home"] .steps li:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(59,52,104,.16)}
body[data-page="home"] .steps li:nth-child(2)::before{background:linear-gradient(135deg,#38bdf8,#0ea5e9)}
body[data-page="home"] .steps li:nth-child(3)::before{background:linear-gradient(135deg,#7c74b8,#3b3468)}
body[data-page="home"] .steps li:nth-child(4)::before{background:linear-gradient(135deg,#34d399,#10b981)}
body[data-page="home"] .quote{position:relative;transition:transform .2s}
body[data-page="home"] .quote:hover{transform:translateY(-4px)}
body[data-page="home"] .quote footer{display:flex;align-items:center;gap:.5rem;font-weight:600}
body[data-page="home"] .quote footer::before{content:"";width:1.6rem;height:2px;background:var(--accent);border-radius:2px}
body[data-page="home"] .tbl td:first-child{font-weight:600;color:var(--navy)}
body[data-page="home"] .tbl td:nth-child(3){color:var(--accent-d);font-weight:600}
body[data-page="home"] .btn{position:relative}
body[data-page="home"] .btn-accent:hover i{transform:translateX(3px)}
body[data-page="home"] .btn i{transition:transform .2s}
#courseGrid article.card{position:relative;overflow:hidden;padding-top:1.7rem}
#courseGrid article.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:var(--grad)}
#courseGrid article.card[data-ver="en"]::before{background:linear-gradient(90deg,#38bdf8,#3b3468)}
#courseGrid article.card .badge{background:#fff1de;color:var(--accent-d)}
#courseGrid article.card[data-ver="en"] .badge{background:#e0f2fe;color:#0369a1}
@media(min-width:1024px){.h-strip-card{align-items:stretch}}
.h-strip-head .pill{align-self:flex-start;display:inline-block}

/* ===== Online learning feature card (6px radius, no top/left border) ===== */
.h-learn{background:#fff;border-radius:6px;box-shadow:var(--sh);display:grid;gap:2.5rem;align-items:center;padding:2.5rem 1.5rem;overflow:hidden}
.h-learn-text h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-top:.9rem}
.h-learn-text p{font-size:1.02rem;max-width:30rem}
.h-learn-art{background:linear-gradient(160deg,#fff9f2,#fff1de);border-radius:6px;padding:1.5rem;display:flex;justify-content:center}
.h-learn-art img{width:100%;max-width:520px;height:auto;display:block}
@media(min-width:1024px){.h-learn{grid-template-columns:.9fr 1.1fr;padding:3rem 3.25rem;gap:3rem}}
body[data-page="home"] .h-learn .btn{border-radius:6px}

/* ===== 6px radius everywhere; no top/left borders ===== */
*:not(.hero):not(.hero *):not(.fab):not(.fab-group),*:not(.hero):not(.hero *):not(.fab)::before,*:not(.hero):not(.hero *):not(.fab)::after{border-radius:6px!important;border-top:0!important;border-left:0!important}
.fab,.fab-group .fab{border-radius:50%!important}
body[data-page="home"] .chip::before,body[data-page="home"] .h-feat::before,#courseGrid article.card::before{display:none!important}
body[data-page="home"] .h-table-card .tbl tr:not(:first-child){border-top:0!important}
body[data-page="home"] .h-table-card .tbl tr:not(:first-child){box-shadow:inset 0 -1px 0 #f1ecf7}

/* ===== Chip + icon images ===== */
body[data-page="home"] .chip-ic{width:2.6rem;height:2.6rem;flex:none;background:#fff1de;border-radius:6px;padding:.4rem;object-fit:contain}
body[data-page="home"] .chip{background:#fff9f2;box-shadow:none}
body[data-page="home"] .chip:hover{background:#fff1de}
body[data-page="home"] .chip i{display:none}
.h-img-ico{background:#fff1de!important;box-shadow:0 6px 16px rgba(255,122,26,.18)!important}
.h-img-ico img{width:62%;height:62%;object-fit:contain}
.svc.hl .h-img-ico{background:#fff1de!important}

/* ===== Course thumbnail ===== */
.thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#ffb23e,#ff7a1a);overflow:hidden;display:grid;place-items:center;margin-bottom:.4rem}
article.card[data-ver="en"] .thumb{background:linear-gradient(135deg,#38bdf8,#3b3468)}
.thumb-ic{width:34%;height:auto;opacity:.9;background:#fff;padding:.7rem;border-radius:6px}
.thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== Home background ===== */
body[data-page="home"]{background-color:#fffdf9;background-image:radial-gradient(circle at 8% 12%,rgba(255,178,62,.16) 0,transparent 32%),radial-gradient(circle at 94% 46%,rgba(56,189,248,.10) 0,transparent 30%),radial-gradient(circle at 20% 82%,rgba(255,122,26,.10) 0,transparent 28%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%233b3468%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221.6%22%20font-family%3D%22serif%22%20font-size%3D%2226%22%3E%3Ctext%20x%3D%2218%22%20y%3D%2248%22%3E%CF%80%3C/text%3E%3Ctext%20x%3D%22128%22%20y%3D%2236%22%3E%E2%88%91%3C/text%3E%3Ctext%20x%3D%2270%22%20y%3D%22120%22%3E%E2%88%9A%3C/text%3E%3Ctext%20x%3D%22168%22%20y%3D%22118%22%3E%E2%88%AB%3C/text%3E%3Ctext%20x%3D%2222%22%20y%3D%22186%22%3E%C3%B7%3C/text%3E%3Ctext%20x%3D%22120%22%20y%3D%22190%22%3E%C3%97%3C/text%3E%3Ctext%20x%3D%22184%22%20y%3D%22200%22%3E%E2%88%9E%3C/text%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2292%22%20r%3D%226%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2284%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22/%3E%3C/g%3E%3C/svg%3E");background-size:auto,auto,auto,220px 220px;background-attachment:scroll}
body[data-page="home"] .h-soft{background:none}
body[data-page="home"] .h-sec{background:transparent}
body[data-page="home"] .h-strip,body[data-page="home"] .h-strip *{}

/* ===== Header (navbar) redesign — all public pages ===== */
body[data-layout="pub"] .hdr{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);box-shadow:0 1px 0 #f1e6d4,0 12px 30px rgba(59,52,104,.06)}
body[data-layout="pub"] .hdr .wrap{height:76px}
body[data-layout="pub"] .hdr nav.hidden{gap:.25rem}
body[data-layout="pub"] .nav-a{position:relative;margin:0 .55rem;padding:.55rem .15rem;border-radius:6px;color:var(--navy);font-weight:600;font-size:.95rem;background:none;transition:color .18s}
body[data-layout="pub"] .nav-a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:6px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s}
body[data-layout="pub"] .nav-a:hover{background:none;color:var(--accent-d)}
body[data-layout="pub"] .nav-a:hover::after{transform:scaleX(1)}
body[data-layout="pub"] .nav-a.on{background:none;color:var(--accent-d);box-shadow:none}
body[data-layout="pub"] .nav-a.on::after{transform:scaleX(1)}
body[data-layout="pub"] .hdr .btn-accent{padding:.6rem 1.2rem;box-shadow:0 6px 16px rgba(255,122,26,.25)}
body[data-layout="pub"] .dd{background:#fff;border-radius:6px;box-shadow:0 18px 40px rgba(59,52,104,.18);padding:.45rem;min-width:200px;margin-top:.6rem}
body[data-layout="pub"] .dd a{color:var(--navy);font-weight:600;font-size:.92rem;padding:.6rem .85rem}
body[data-layout="pub"] .dd a:hover{background:#fff1de;color:var(--accent-d);padding-left:1.1rem;transition:.15s}
body[data-layout="pub"] #mobMenu{background:#fff;padding:1rem .5rem 1.25rem;box-shadow:0 14px 30px rgba(59,52,104,.12)}
body[data-layout="pub"] .mob-a{padding:.75rem 1rem;color:var(--navy);font-weight:600;border-radius:6px}
body[data-layout="pub"] .mob-a:hover,body[data-layout="pub"] .mob-a.on{background:#fff1de;color:var(--accent-d)}

/* ===== Footer redesign — all public pages ===== */
body[data-layout="pub"] .foot{background:linear-gradient(160deg,#3b3468 0,#2a2550 100%);color:#c9c5e8;box-shadow:none;margin-top:4.5rem;padding-bottom:1.5rem;position:relative;overflow:hidden}
body[data-layout="pub"] .foot::before{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,178,62,.22),transparent 70%);pointer-events:none}
body[data-layout="pub"] .foot .wrap{position:relative;z-index:1}
body[data-layout="pub"] .foot h4{color:#fff;font-size:1rem;margin-bottom:1rem;padding-bottom:.7rem;position:relative}
body[data-layout="pub"] .foot h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:6px;background:var(--grad)}
body[data-layout="pub"] .foot p,body[data-layout="pub"] .foot .text-sm{color:#c9c5e8}
body[data-layout="pub"] .foot img{background:#fff;padding:.5rem .75rem;border-radius:6px;height:2.6rem;width:auto}
body[data-layout="pub"] .foot-a{color:#c9c5e8;font-size:.95rem;padding:.35rem 0}
body[data-layout="pub"] .foot-a:hover{color:#ffb23e}
body[data-layout="pub"] .soc{background:rgba(255,255,255,.1);color:#fff}
body[data-layout="pub"] .soc:hover{background:var(--grad);color:#fff;transform:translateY(-3px)}
body[data-layout="pub"] .foot .wrap>p:last-child{color:#9e99c7;font-size:.85rem;padding:1.25rem 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);margin-top:1rem}
body[data-layout="pub"] .foot .fcta{margin-top:-4.5rem;box-shadow:0 24px 50px rgba(0,0,0,.25)}
body[data-layout="pub"] .foot-a{display:block}
body[data-layout="pub"] .foot-a::before{display:none}

/* ===== Navbar & footer as 1200px centered panels (6px radius) ===== */
body[data-layout="pub"] .hdr{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;padding-top:.9rem;padding-bottom:0}
body[data-layout="pub"] .hdr>.wrap{max-width:1200px;background:rgba(255,255,255,.97);border-radius:6px;padding:0 1.5rem;box-shadow:0 12px 30px rgba(59,52,104,.10);backdrop-filter:blur(12px)}
body[data-layout="pub"] #mobMenu{max-width:1200px;margin:0 auto;border-radius:6px}

body[data-layout="pub"] .foot{background:transparent!important;box-shadow:none!important;margin-top:4.5rem;padding:0 1rem 1.5rem}
body[data-layout="pub"] .foot::before{display:none}
body[data-layout="pub"] .foot>.wrap{max-width:1200px;background:linear-gradient(160deg,#3b3468 0,#2a2550 100%);border-radius:6px;padding:2.5rem 2.5rem 1.5rem;box-shadow:0 20px 50px rgba(59,52,104,.18)}

/* ===== Course details page (1200px, recorded classes, locks) ===== */
.cd-hero{background:linear-gradient(135deg,#2140c4 0,#0a2a9a 60%,#001f8a 100%);color:#fff;border-radius:6px;padding:2.5rem;display:grid;gap:2rem;align-items:center;box-shadow:0 24px 50px rgba(10,42,154,.25);position:relative;overflow:hidden}
.cd-hero::after{content:"";position:absolute;right:-80px;bottom:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,213,74,.25),transparent 70%)}
.cd-hero h1{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin-top:.8rem;position:relative;z-index:1}
.cd-hero .crumb{position:relative;z-index:1}
.cd-hero-text{position:relative;z-index:1}
.cd-badge{display:inline-block;background:#ffd54a;color:#0a2a9a;font-weight:700;font-size:.8rem;padding:.25rem .8rem;border-radius:6px}
.cd-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;list-style:none}
.cd-meta li{background:rgba(255,255,255,.14);padding:.45rem .85rem;border-radius:6px;font-size:.88rem;display:flex;gap:.5rem;align-items:center}
.cd-hero-art{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.08);z-index:1;display:grid;place-items:center}
.cd-hero-art img:not(.cd-fallback){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd-fallback{width:30%;height:auto;background:#fff;padding:.8rem}
@media(min-width:1024px){.cd-hero{grid-template-columns:1fr 1fr;padding:2.75rem}}
.cd-block{background:#fff;border-radius:6px;box-shadow:var(--sh);padding:1.75rem}
.cd-block h2{font-size:1.2rem;margin-bottom:.8rem}
.cd-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cd-count{background:#fff1de;color:var(--accent-d);padding:.25rem .8rem;border-radius:6px;font-size:.8rem;font-weight:700}
.cd-points{display:grid;gap:1rem;margin-top:1.25rem}
@media(min-width:640px){.cd-points{grid-template-columns:repeat(3,1fr)}}
.cd-points>div{background:#fff9f2;padding:1.1rem;border-radius:6px;display:grid;gap:.25rem}
.cd-points i{width:2.6rem;height:2.6rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;margin-bottom:.4rem}
.cd-points b{color:var(--navy)}
.cd-points span{font-size:.86rem;color:var(--mut)}
.cd-outcomes{display:grid;gap:1rem}
@media(min-width:768px){.cd-outcomes{grid-template-columns:repeat(3,1fr)}}
.cd-outcomes>div{background:#fff9f2;border-radius:6px;padding:1.2rem;display:grid;gap:.6rem}
.cd-outcomes p{margin:0;color:var(--navy);font-weight:600;font-size:.95rem}
.cd-n{width:2.2rem;height:2.2rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;font-weight:700}
/* video list */
.vid-list{display:grid;gap:1rem}
.vid{display:grid;grid-template-columns:220px 1fr;gap:1.25rem;padding:1rem;align-items:center}
.vid-media{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0a2a9a}
.vid-media iframe{width:100%;height:100%;border:0;display:block}
.vid-play{position:relative;display:block;width:100%;height:100%;padding:0;cursor:pointer;background:#000}
.vid-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .2s}
.vid-play:hover img{opacity:1}
.vid-play span{position:absolute;inset:0;margin:auto;width:3rem;height:3rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.vid-lock,.vid-soon{width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:.4rem;background:linear-gradient(160deg,#3b3468,#2a2550);color:#fff;font-size:1.6rem}
.vid-soon span{font-size:.85rem}
.vid-body h3{font-size:1.02rem;margin:.5rem 0 .15rem}
.vid-top{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.vid-no{width:2rem;height:2rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;font-weight:700;font-size:.9rem}
.vid-free,.vid-open,.vid-paid{padding:.2rem .6rem;border-radius:6px;font-size:.76rem;font-weight:700;display:inline-flex;gap:.3rem;align-items:center}
.vid-free{background:#dcfce7;color:#15803d}
.vid-open{background:#e0f2fe;color:#0369a1}
.vid-paid{background:#fff1de;color:var(--accent-d)}
.vid-btn{margin-top:.7rem;padding:.5rem 1rem;font-size:.88rem}
.is-locked{background:#fbfaff}
@media(max-width:640px){.vid{grid-template-columns:1fr}}
.cd-teacher{padding:1.5rem}
.cd-teacher img{width:5rem;height:5rem;border-radius:6px}
/* sidebar */
.cd-aside{display:grid;gap:1.25rem}
.cd-price{padding:1.75rem;background:linear-gradient(180deg,#fff9f2,#fff)}
.cd-price-l{font-size:.85rem;color:var(--mut);font-weight:600}
.cd-price-v{font-size:2.3rem;font-weight:800;color:var(--navy);line-height:1.2;margin:.2rem 0 .8rem}
.cd-price-v span{font-size:.9rem;font-weight:500;color:var(--mut)}
.cd-ticks{list-style:none;display:grid;gap:.5rem;margin-bottom:1.2rem}
.cd-ticks li{display:flex;gap:.6rem;align-items:center;color:var(--mut);font-size:.92rem}
.cd-ticks i{color:#16a34a}
.cd-status{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem}
.cd-status b{color:var(--navy)}
.cd-status p{margin-top:.2rem}
.cd-status-ic{width:2.8rem;height:2.8rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;flex:none}
.cd-hero .crumb a{background:transparent!important;color:#fff!important;padding:0}
.cd-hero .crumb{color:rgba(255,255,255,.85)}

/* ===== Inner pages: banner header as a 1200px brand panel (matches course details) ===== */
body[data-layout="pub"] .banner{background:transparent!important;padding:3rem 1rem 0}
body[data-layout="pub"] .banner::after{display:none!important}
body[data-layout="pub"] .banner .wrap{max-width:1200px;background:linear-gradient(135deg,#2140c4 0,#0a2a9a 60%,#001f8a 100%);color:#fff;border-radius:6px;padding:2.75rem 2.5rem;box-shadow:0 24px 50px rgba(10,42,154,.22);position:relative;overflow:hidden}
body[data-layout="pub"] .banner .wrap::after{content:"";position:absolute;right:-70px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,213,74,.22),transparent 70%);pointer-events:none}
body[data-layout="pub"] .banner .wrap>*{position:relative;z-index:1}
body[data-layout="pub"] .banner h1{color:#fff!important}
body[data-layout="pub"] .banner p{color:#dbe4ff!important}
body[data-layout="pub"] .banner .crumb{color:rgba(255,255,255,.8)!important}
body[data-layout="pub"] .banner .crumb a{color:#fff!important;background:transparent!important;padding:0}
body[data-layout="pub"] .banner .btn-ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
body[data-layout="pub"] .banner .btn-ghost:hover{background:#fff;color:var(--navy)}
@media(min-width:768px){body[data-layout="pub"] .banner .wrap{padding:3.25rem 3rem}}

/* demo-class preview cover */
.demo-cover{position:relative;overflow:hidden;background:#0a2a9a}
.demo-cover img{width:100%;height:100%;object-fit:cover;display:block}
.demo-cover-play{position:absolute;inset:0;margin:auto;width:4rem;height:4rem;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:1.3rem;box-shadow:0 10px 26px rgba(0,0,0,.35);border-radius:6px;width:4rem;height:4rem;top:50%;left:50%;transform:translate(-50%,-50%)}

/* related / grid course cards: make sure thumbnail sizing applies everywhere */
.card .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#ffb23e,#ff7a1a);overflow:hidden;display:grid;place-items:center;margin-bottom:.4rem;border-radius:6px}
.card[data-ver="en"] .thumb{background:linear-gradient(135deg,#38bdf8,#3b3468)}
.card .thumb-ic{width:34%;height:auto;max-width:96px;opacity:.9;background:#fff;padding:.7rem;border-radius:6px}
.card .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== Inner public pages: same design language as the home page (home untouched) ===== */
body[data-layout="pub"]:not([data-page="home"]){background-color:#fffdf9;background-image:radial-gradient(circle at 8% 12%,rgba(255,178,62,.16) 0,transparent 32%),radial-gradient(circle at 94% 46%,rgba(56,189,248,.10) 0,transparent 30%),radial-gradient(circle at 20% 82%,rgba(255,122,26,.10) 0,transparent 28%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%233b3468%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221.6%22%20font-family%3D%22serif%22%20font-size%3D%2226%22%3E%3Ctext%20x%3D%2218%22%20y%3D%2248%22%3E%CF%80%3C/text%3E%3Ctext%20x%3D%22128%22%20y%3D%2236%22%3E%E2%88%91%3C/text%3E%3Ctext%20x%3D%2270%22%20y%3D%22120%22%3E%E2%88%9A%3C/text%3E%3Ctext%20x%3D%22168%22%20y%3D%22118%22%3E%E2%88%AB%3C/text%3E%3Ctext%20x%3D%2222%22%20y%3D%22186%22%3E%C3%B7%3C/text%3E%3Ctext%20x%3D%22120%22%20y%3D%22190%22%3E%C3%97%3C/text%3E%3Ctext%20x%3D%22184%22%20y%3D%22200%22%3E%E2%88%9E%3C/text%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2292%22%20r%3D%226%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2284%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22/%3E%3C/g%3E%3C/svg%3E");background-size:auto,auto,auto,220px 220px}
body[data-layout="pub"]:not([data-page="home"]) .kicker{display:inline-block;background:#fff1de;color:var(--accent-d);padding:.3rem .9rem;border-radius:6px;font-size:.82rem;font-weight:700;margin-bottom:.8rem}
body[data-layout="pub"]:not([data-page="home"]) main section.sec{background:transparent}
body[data-layout="pub"]:not([data-page="home"]) main .card{background:#fff;border-radius:6px;box-shadow:var(--sh);padding:1.75rem}
body[data-layout="pub"]:not([data-page="home"]) main a.card:hover,body[data-layout="pub"]:not([data-page="home"]) main article.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(59,52,104,.16)}
body[data-layout="pub"]:not([data-page="home"]) main h2{letter-spacing:-.01em}
body[data-layout="pub"]:not([data-page="home"]) .input{background:#fff9f2;box-shadow:none;padding:.75rem 1rem;color:var(--navy)}
body[data-layout="pub"]:not([data-page="home"]) .input:focus{background:#fff;box-shadow:0 0 0 3px rgba(255,122,26,.25)}
body[data-layout="pub"]:not([data-page="home"]) label>span{display:block;margin-bottom:.35rem;color:var(--navy)}
body[data-layout="pub"]:not([data-page="home"]) .checks{display:grid;gap:.75rem;margin-top:1rem}
body[data-layout="pub"]:not([data-page="home"]) .checks li{display:flex;gap:.75rem;align-items:flex-start;color:var(--mut)}
body[data-layout="pub"]:not([data-page="home"]) .checks i{width:1.7rem;height:1.7rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;font-size:.72rem;flex:none}
body[data-layout="pub"]:not([data-page="home"]) .ico{width:2.8rem;height:2.8rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;box-shadow:0 8px 18px rgba(255,122,26,.25);flex:none}
body[data-layout="pub"]:not([data-page="home"]) .badge{background:#fff1de;color:var(--accent-d);font-weight:700}
body[data-layout="pub"]:not([data-page="home"]) .tbl th{background:#fff9f2}
body[data-layout="pub"]:not([data-page="home"]) .tbl td,body[data-layout="pub"]:not([data-page="home"]) .tbl th{padding:.9rem 1.1rem}
body[data-layout="pub"]:not([data-page="home"]) .tbl tr:not(:first-child){box-shadow:inset 0 -1px 0 #f1ecf7}
body[data-layout="pub"]:not([data-page="home"]) .acc{padding:1.1rem 1.4rem;margin-bottom:.9rem}
body[data-layout="pub"]:not([data-page="home"]) .acc button{color:var(--navy)}
body[data-layout="pub"]:not([data-page="home"]) .acc.open{background:#fff9f2}
body[data-layout="pub"]:not([data-page="home"]) .svc{border-radius:6px;padding:2rem 1.6rem}
body[data-layout="pub"]:not([data-page="home"]) .svc.hl{background:linear-gradient(160deg,#ffb23e,#ff7a1a);color:#fff}
body[data-layout="pub"]:not([data-page="home"]) .svc.hl h3{color:#fff}
body[data-layout="pub"]:not([data-page="home"]) .svc.hl p{color:#fff3e6}
body[data-layout="pub"]:not([data-page="home"]) .svc.hl .ico{background:#fff;color:var(--accent)}
body[data-layout="pub"]:not([data-page="home"]) .quote{border-radius:6px}
body[data-layout="pub"]:not([data-page="home"]) .pill{display:inline-block}
body[data-layout="pub"]:not([data-page="home"]) .person{background:#fff;border-radius:6px;padding:1rem 1.2rem;box-shadow:var(--sh)}
body[data-layout="pub"]:not([data-page="home"]) .join,body[data-layout="pub"]:not([data-page="home"]) .cta{background:#fff}

/* ===== Body background: soft & blurred so content stays readable ===== */
body[data-layout="pub"]{background-color:#fffdf9!important;background-image:none!important}
body[data-layout="pub"]::before{content:"";position:fixed;inset:-40px;z-index:-1;pointer-events:none;background-color:#eceef3;background-image:radial-gradient(circle at 8% 12%,rgba(255,178,62,.16) 0,transparent 32%),radial-gradient(circle at 94% 46%,rgba(56,189,248,.10) 0,transparent 30%),radial-gradient(circle at 20% 82%,rgba(255,122,26,.10) 0,transparent 28%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%233b3468%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221.6%22%20font-family%3D%22serif%22%20font-size%3D%2226%22%3E%3Ctext%20x%3D%2218%22%20y%3D%2248%22%3E%CF%80%3C/text%3E%3Ctext%20x%3D%22128%22%20y%3D%2236%22%3E%E2%88%91%3C/text%3E%3Ctext%20x%3D%2270%22%20y%3D%22120%22%3E%E2%88%9A%3C/text%3E%3Ctext%20x%3D%22168%22%20y%3D%22118%22%3E%E2%88%AB%3C/text%3E%3Ctext%20x%3D%2222%22%20y%3D%22186%22%3E%C3%B7%3C/text%3E%3Ctext%20x%3D%22120%22%20y%3D%22190%22%3E%C3%97%3C/text%3E%3Ctext%20x%3D%22184%22%20y%3D%22200%22%3E%E2%88%9E%3C/text%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2292%22%20r%3D%226%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2284%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22/%3E%3C/g%3E%3C/svg%3E");background-size:auto,auto,auto,220px 220px;filter:blur(6px) grayscale(1);opacity:.85}

/* ===== Every card carries a matching decorative accent ===== */
body[data-layout="pub"] .card{position:relative;overflow:hidden}
body[data-layout="pub"] .card::after{content:"";position:absolute;right:-18px;bottom:-18px;width:120px;height:120px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 300'%3E%3Cpath fill='%23ffa33a' d='M200 20C300 0 370 70 360 160C350 250 270 290 190 280C100 270 30 220 40 140C50 70 110 40 200 20Z'/%3E%3Ccircle cx='70' cy='60' r='34' fill='%233b3468'/%3E%3Cpath d='M120 220H270L120 100Z' fill='none' stroke='%23fff' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M120 200h20v20' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Ctext x='205' y='95' font-size='32' font-weight='700' fill='%233b3468' font-family='Poppins,sans-serif'%3Ea%C2%B2+b%C2%B2=c%C2%B2%3C/text%3E%3Ctext x='292' y='238' font-size='48' fill='%23fff' font-family='Poppins,sans-serif'%3E%CF%80%3C/text%3E%3C/svg%3E") center/contain no-repeat;opacity:.9;pointer-events:none}
body[data-layout="pub"] .card.ctag::after{opacity:.35}
body[data-layout="pub"] .card.dark::after{display:none}

/* ===== Readable text on orange/gradient call-to-action blocks ===== */
.fcta p,.ctag p,.ctag-m p,.cta-art p{color:#fff!important;font-weight:500;opacity:1!important}
.fcta h2,.ctag h2,.ctag h3,.ctag-m h3{color:#fff!important}

/* ===== Course details: player + lessons (desktop & mobile) ===== */
.cd-main{display:flex;flex-direction:column;gap:1.25rem;margin-top:2rem}
.cd-player{padding:1rem}
.cdp-box{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0a2a9a}
.cdp-box iframe,.cdp-video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0a2a9a}
.cdp-yt{position:absolute;inset:0;width:100%;height:100%;padding:0;cursor:pointer;background:#000}
.cdp-yt img{width:100%;height:100%;object-fit:cover;display:block}
.cdp-yt span{position:absolute;inset:0;margin:auto;width:4rem;height:4rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;font-size:1.2rem;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.cdp-cap{display:flex;gap:.8rem;align-items:center;padding:1rem .4rem .2rem}
.cdp-cap b{display:block;color:var(--navy);font-size:1.05rem}
.cdp-cap small{color:var(--mut)}
.cd-n{width:2.2rem;height:2.2rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;font-weight:700;flex:none}
.cd-side{display:contents}
.cd-list,.cd-price{padding:1.5rem}
.cd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.cd-head h2{font-size:1.15rem}
.cd-count{background:#fff1de;color:var(--accent-d);padding:.25rem .75rem;border-radius:6px;font-size:.8rem;font-weight:700}
.cd-items{display:grid;gap:.6rem;margin-top:1rem}
.cdl-item{display:flex;gap:.8rem;align-items:center;width:100%;text-align:left;background:#fff9f2;padding:.75rem;border-radius:6px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.cdl-item:not(:disabled):hover{transform:translateX(3px);box-shadow:0 8px 18px rgba(255,122,26,.15)}
.cdl-item.is-on{background:linear-gradient(135deg,#ffb23e,#ff7a1a);color:#fff}
.cdl-item.is-on .cdl-t b,.cdl-item.is-on .cdl-t small,.cdl-item.is-on i{color:#fff}
.cdl-item.is-on .cdl-n{background:#fff;color:var(--accent-d)}
.cdl-item.is-locked{background:#f5f3fb;cursor:not-allowed;opacity:.85}
.cdl-item.is-locked .cdl-n{background:#c9c5e8}
.cdl-t{flex:1;min-width:0;display:grid;gap:.1rem}
.cdl-t b{color:var(--navy);font-size:.92rem;line-height:1.4}
.cdl-t small{color:var(--mut);font-size:.76rem}
.cdl-item>i{color:var(--accent-d);flex:none}
.cd-acts{display:grid;gap:.5rem;margin-top:1rem}
.cd-price-l{font-size:.85rem;color:var(--mut);font-weight:600}
.cd-price-v{font-size:2.2rem;font-weight:800;color:var(--navy);line-height:1.2;margin:.2rem 0 .8rem}
.cd-price-v span{font-size:.9rem;font-weight:500;color:var(--mut)}
.cd-ticks{list-style:none;display:grid;gap:.5rem;margin-bottom:1.2rem}
.cd-ticks li{display:flex;gap:.6rem;align-items:center;color:var(--mut);font-size:.92rem}
.cd-ticks i{color:#16a34a}
.cd-rest{display:grid;gap:1.25rem}
.cd-block{padding:1.6rem}
.cd-block h2,.cd-teacher h2{font-size:1.15rem;margin-bottom:.7rem}
.cd-points{display:grid;gap:.9rem;margin-top:1.1rem}
.cd-points>div{background:#fff9f2;padding:1rem;border-radius:6px;display:grid;gap:.2rem}
.cd-points i{width:2.4rem;height:2.4rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;margin-bottom:.3rem}
.cd-points b{color:var(--navy)}
.cd-points span{font-size:.86rem;color:var(--mut)}
.cd-teacher{display:flex;gap:1.2rem;align-items:center;padding:1.4rem}
.cd-teacher img{width:5rem;height:5rem;border-radius:6px;object-fit:cover;object-position:top;background:#f4f0fa;flex:none}
.cd-teacher h2{margin-bottom:.1rem}
.cd-mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;box-shadow:0 -10px 30px rgba(59,52,104,.14);padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cd-mbar small{display:block;color:var(--mut)}
.cd-mbar b{color:var(--navy);font-size:1.2rem}
.cd-mbar .btn{padding:.7rem 1.4rem}
body[data-layout="pub"] .cd-mbar{}
@media(min-width:1024px){
  .cd-mbar{display:none}
  .cd-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"player side" "rest side";gap:1.5rem;align-items:start}
  .cd-player{grid-area:player}
  .cd-rest{grid-area:rest}
  .cd-side{grid-area:side;display:grid;gap:1.25rem;position:sticky;top:6rem;align-self:start}
  .cd-player{padding:1.2rem}
}
@media(max-width:1023px){
  .cd-main{display:flex;flex-direction:column}
  .cd-player{order:1} .cd-side{display:contents} .cd-list{order:2} .cd-price{order:3} .cd-rest{order:4}
  body[data-page] main{padding-bottom:5.5rem}
}
@media(max-width:640px){
  .cd-hero{padding:1.5rem} .cd-hero h1{font-size:1.45rem}
  .cd-block{padding:1.2rem} .cd-list,.cd-price{padding:1.2rem}
  .cd-points{grid-template-columns:1fr}
  .cdp-cap{padding:.8rem .2rem 0}
  .cdp-yt span{width:3.2rem;height:3.2rem}
  .cd-teacher{flex-direction:column;text-align:center}
}

.cdl-n{width:2rem;height:2rem;background:var(--grad);color:#fff;display:grid;place-items:center;border-radius:6px;font-weight:700;font-size:.85rem;flex:none}
.cd-player::after{display:none}

/* keep card accents subtle and clear of interactive controls */
body[data-layout="pub"] .card::after{opacity:.28;width:110px;height:110px;right:-14px;bottom:-14px}
body[data-layout="pub"] .acc::after,body[data-layout="pub"] .cdl-item::after{display:none}

/* ===== Public pages: tighter section rhythm ===== */
body[data-layout="pub"] .sec{padding:3.25rem 1rem}
body[data-layout="pub"] .h-sec{padding:3.5rem 1rem}
body[data-layout="pub"] .h-head{margin-bottom:2.25rem}
body[data-layout="pub"] .banner.sec{padding:2.25rem 1rem 0}
body[data-layout="pub"] .dark.sec{padding:3.5rem 1rem!important}
body[data-layout="pub"] main{padding-bottom:0}
body[data-layout="pub"] .foot{margin-top:3rem}
@media(max-width:640px){body[data-layout="pub"] .sec,body[data-layout="pub"] .h-sec{padding:2.25rem 1rem}}

/* ===== Section backgrounds: a different related design for each section ===== */
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner){position:relative;overflow:hidden;isolation:isolate}
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner)>*{position:relative;z-index:1}
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner)::before,
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner)::after{content:"";position:absolute;pointer-events:none;z-index:0}
/* 1: soft ring top-right */
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner):nth-of-type(4n+1)::before{width:340px;height:340px;right:-120px;top:-120px;border-radius:50%;border:44px solid rgba(255,122,26,.07)}
/* 2: dot grid bottom-left */
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner):nth-of-type(4n+2)::before{width:220px;height:220px;left:-30px;bottom:-30px;background-image:radial-gradient(rgba(59,52,104,.14) 2px,transparent 2.5px);background-size:18px 18px;opacity:.9}
/* 3: diagonal stripes top-left */
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner):nth-of-type(4n+3)::before{width:260px;height:260px;left:-60px;top:-60px;background:repeating-linear-gradient(135deg,rgba(56,189,248,.12) 0 10px,transparent 10px 22px);border-radius:6px}
/* 4: blue blob bottom-right */
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner):nth-of-type(4n+4)::before{width:300px;height:300px;right:-90px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.16),transparent 70%)}
/* secondary accent per section (math symbols) */
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner)::after{width:160px;height:160px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 300'%3E%3Cpath fill='%23ffa33a' d='M200 20C300 0 370 70 360 160C350 250 270 290 190 280C100 270 30 220 40 140C50 70 110 40 200 20Z'/%3E%3Ccircle cx='70' cy='60' r='34' fill='%233b3468'/%3E%3Cpath d='M120 220H270L120 100Z' fill='none' stroke='%23fff' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M120 200h20v20' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Ctext x='205' y='95' font-size='32' font-weight='700' fill='%233b3468' font-family='Poppins,sans-serif'%3Ea%C2%B2+b%C2%B2=c%C2%B2%3C/text%3E%3Ctext x='292' y='238' font-size='48' fill='%23fff' font-family='Poppins,sans-serif'%3E%CF%80%3C/text%3E%3C/svg%3E") center/contain no-repeat;opacity:.55;right:4%;bottom:14px}
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner):nth-of-type(even)::after{left:4%;right:auto;top:14px;bottom:auto}
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner):nth-of-type(odd){background:linear-gradient(180deg,rgba(255,249,242,.75),rgba(255,255,255,0) 90%)}

/* ===== Cards: alternate decorative accents ===== */
body[data-layout="pub"] .card:nth-child(even)::after{background:radial-gradient(circle,transparent 52%,rgba(255,122,26,.22) 53%,transparent 60%),radial-gradient(circle,transparent 30%,rgba(56,189,248,.14) 31%,transparent 38%);background-size:100% 100%;width:120px;height:120px;background-repeat:no-repeat}
body[data-layout="pub"] .card:nth-child(3n)::after{background:repeating-linear-gradient(45deg,rgba(59,52,104,.07) 0 6px,transparent 6px 14px);border-radius:6px}

/* ===== Menus: colored markers on dropdown and mobile items ===== */
body[data-layout="pub"] .dd a{display:flex;align-items:center;gap:.6rem}
body[data-layout="pub"] .dd a::before{content:"";width:8px;height:8px;border-radius:6px;background:var(--grad);flex:none}
body[data-layout="pub"] .mob-a{display:flex;align-items:center;gap:.6rem}
body[data-layout="pub"] .mob-a::before{content:"";width:8px;height:8px;border-radius:6px;background:var(--grad);flex:none}
body[data-layout="pub"] .foot-a:nth-child(odd){}

/* ===== Every element with a background gets a related decorative layer (behind its content) ===== */
body[data-layout="pub"] .card,
body[data-layout="pub"] .svc,
body[data-layout="pub"] .h-feat,
body[data-layout="pub"] .quote,
body[data-layout="pub"] .chip,
body[data-layout="pub"] .steps li,
body[data-layout="pub"] .h-learn,
body[data-layout="pub"] .h-table-card,
body[data-layout="pub"] .dstats>div,
body[data-layout="pub"] .h-mini>div,
body[data-layout="pub"] .h-teacher,
body[data-layout="pub"] .cd-points>div,
body[data-layout="pub"] .cd-outcomes>div,
body[data-layout="pub"] .cdl-item,
body[data-layout="pub"] .acc,
body[data-layout="pub"] .person,
body[data-layout="pub"] .dd,
body[data-layout="pub"] .thumb,
body[data-layout="pub"] .h-learn-art,
body[data-layout="pub"] .h-strip-card,
body[data-layout="pub"] .cd-player,
body[data-layout="pub"] .hdr>.wrap,
body[data-layout="pub"] .foot>.wrap,
body[data-layout="pub"] .fcta,
body[data-layout="pub"] .cd-status,
body[data-layout="pub"] .cd-teacher,
body[data-layout="pub"] .card.ctag,
body[data-layout="pub"] .ctag-m,
body[data-layout="pub"] .h-stat-panel{position:relative;overflow:hidden;isolation:isolate}
body[data-layout="pub"] .cd-hero{isolation:isolate}
body[data-layout="pub"] .card:nth-child(4n+1)::before,
body[data-layout="pub"] .svc:nth-child(4n+1)::before,
body[data-layout="pub"] .h-feat:nth-child(4n+1)::before,
body[data-layout="pub"] .quote:nth-child(4n+1)::before,
body[data-layout="pub"] .chip:nth-child(4n+1)::before,
body[data-layout="pub"] .steps li:nth-child(4n+1)::before,
body[data-layout="pub"] .h-learn:nth-child(4n+1)::before,
body[data-layout="pub"] .h-table-card:nth-child(4n+1)::before,
body[data-layout="pub"] .dstats>div:nth-child(4n+1)::before,
body[data-layout="pub"] .h-mini>div:nth-child(4n+1)::before,
body[data-layout="pub"] .h-teacher:nth-child(4n+1)::before,
body[data-layout="pub"] .cd-points>div:nth-child(4n+1)::before,
body[data-layout="pub"] .cd-outcomes>div:nth-child(4n+1)::before,
body[data-layout="pub"] .cdl-item:nth-child(4n+1)::before,
body[data-layout="pub"] .acc:nth-child(4n+1)::before,
body[data-layout="pub"] .person:nth-child(4n+1)::before,
body[data-layout="pub"] .dd:nth-child(4n+1)::before,
body[data-layout="pub"] .thumb:nth-child(4n+1)::before,
body[data-layout="pub"] .h-learn-art:nth-child(4n+1)::before,
body[data-layout="pub"] .h-strip-card:nth-child(4n+1)::before,
body[data-layout="pub"] .cd-player:nth-child(4n+1)::before,
body[data-layout="pub"] .hdr>.wrap:nth-child(4n+1)::before,
body[data-layout="pub"] .foot>.wrap:nth-child(4n+1)::before,
body[data-layout="pub"] .fcta:nth-child(4n+1)::before,
body[data-layout="pub"] .cd-status:nth-child(4n+1)::before,
body[data-layout="pub"] .cd-teacher:nth-child(4n+1)::before,
body[data-layout="pub"] .card.ctag:nth-child(4n+1)::before,
body[data-layout="pub"] .ctag-m:nth-child(4n+1)::before,
body[data-layout="pub"] .h-stat-panel:nth-child(4n+1)::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:0;bottom:0;width:42%;height:52%;background-image:radial-gradient(rgba(59,52,104,.13) 2px,transparent 2.5px);background-size:16px 16px;border-radius:6px}
body[data-layout="pub"] .card:nth-child(4n+2)::before,
body[data-layout="pub"] .svc:nth-child(4n+2)::before,
body[data-layout="pub"] .h-feat:nth-child(4n+2)::before,
body[data-layout="pub"] .quote:nth-child(4n+2)::before,
body[data-layout="pub"] .chip:nth-child(4n+2)::before,
body[data-layout="pub"] .steps li:nth-child(4n+2)::before,
body[data-layout="pub"] .h-learn:nth-child(4n+2)::before,
body[data-layout="pub"] .h-table-card:nth-child(4n+2)::before,
body[data-layout="pub"] .dstats>div:nth-child(4n+2)::before,
body[data-layout="pub"] .h-mini>div:nth-child(4n+2)::before,
body[data-layout="pub"] .h-teacher:nth-child(4n+2)::before,
body[data-layout="pub"] .cd-points>div:nth-child(4n+2)::before,
body[data-layout="pub"] .cd-outcomes>div:nth-child(4n+2)::before,
body[data-layout="pub"] .cdl-item:nth-child(4n+2)::before,
body[data-layout="pub"] .acc:nth-child(4n+2)::before,
body[data-layout="pub"] .person:nth-child(4n+2)::before,
body[data-layout="pub"] .dd:nth-child(4n+2)::before,
body[data-layout="pub"] .thumb:nth-child(4n+2)::before,
body[data-layout="pub"] .h-learn-art:nth-child(4n+2)::before,
body[data-layout="pub"] .h-strip-card:nth-child(4n+2)::before,
body[data-layout="pub"] .cd-player:nth-child(4n+2)::before,
body[data-layout="pub"] .hdr>.wrap:nth-child(4n+2)::before,
body[data-layout="pub"] .foot>.wrap:nth-child(4n+2)::before,
body[data-layout="pub"] .fcta:nth-child(4n+2)::before,
body[data-layout="pub"] .cd-status:nth-child(4n+2)::before,
body[data-layout="pub"] .cd-teacher:nth-child(4n+2)::before,
body[data-layout="pub"] .card.ctag:nth-child(4n+2)::before,
body[data-layout="pub"] .ctag-m:nth-child(4n+2)::before,
body[data-layout="pub"] .h-stat-panel:nth-child(4n+2)::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:0;top:0;width:38%;height:46%;background:repeating-linear-gradient(135deg,rgba(56,189,248,.12) 0 8px,transparent 8px 18px);border-radius:6px}
body[data-layout="pub"] .card:nth-child(4n+3)::before,
body[data-layout="pub"] .svc:nth-child(4n+3)::before,
body[data-layout="pub"] .h-feat:nth-child(4n+3)::before,
body[data-layout="pub"] .quote:nth-child(4n+3)::before,
body[data-layout="pub"] .chip:nth-child(4n+3)::before,
body[data-layout="pub"] .steps li:nth-child(4n+3)::before,
body[data-layout="pub"] .h-learn:nth-child(4n+3)::before,
body[data-layout="pub"] .h-table-card:nth-child(4n+3)::before,
body[data-layout="pub"] .dstats>div:nth-child(4n+3)::before,
body[data-layout="pub"] .h-mini>div:nth-child(4n+3)::before,
body[data-layout="pub"] .h-teacher:nth-child(4n+3)::before,
body[data-layout="pub"] .cd-points>div:nth-child(4n+3)::before,
body[data-layout="pub"] .cd-outcomes>div:nth-child(4n+3)::before,
body[data-layout="pub"] .cdl-item:nth-child(4n+3)::before,
body[data-layout="pub"] .acc:nth-child(4n+3)::before,
body[data-layout="pub"] .person:nth-child(4n+3)::before,
body[data-layout="pub"] .dd:nth-child(4n+3)::before,
body[data-layout="pub"] .thumb:nth-child(4n+3)::before,
body[data-layout="pub"] .h-learn-art:nth-child(4n+3)::before,
body[data-layout="pub"] .h-strip-card:nth-child(4n+3)::before,
body[data-layout="pub"] .cd-player:nth-child(4n+3)::before,
body[data-layout="pub"] .hdr>.wrap:nth-child(4n+3)::before,
body[data-layout="pub"] .foot>.wrap:nth-child(4n+3)::before,
body[data-layout="pub"] .fcta:nth-child(4n+3)::before,
body[data-layout="pub"] .cd-status:nth-child(4n+3)::before,
body[data-layout="pub"] .cd-teacher:nth-child(4n+3)::before,
body[data-layout="pub"] .card.ctag:nth-child(4n+3)::before,
body[data-layout="pub"] .ctag-m:nth-child(4n+3)::before,
body[data-layout="pub"] .h-stat-panel:nth-child(4n+3)::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;border:24px solid rgba(255,122,26,.09)}
body[data-layout="pub"] .card:nth-child(4n+4)::before,
body[data-layout="pub"] .svc:nth-child(4n+4)::before,
body[data-layout="pub"] .h-feat:nth-child(4n+4)::before,
body[data-layout="pub"] .quote:nth-child(4n+4)::before,
body[data-layout="pub"] .chip:nth-child(4n+4)::before,
body[data-layout="pub"] .steps li:nth-child(4n+4)::before,
body[data-layout="pub"] .h-learn:nth-child(4n+4)::before,
body[data-layout="pub"] .h-table-card:nth-child(4n+4)::before,
body[data-layout="pub"] .dstats>div:nth-child(4n+4)::before,
body[data-layout="pub"] .h-mini>div:nth-child(4n+4)::before,
body[data-layout="pub"] .h-teacher:nth-child(4n+4)::before,
body[data-layout="pub"] .cd-points>div:nth-child(4n+4)::before,
body[data-layout="pub"] .cd-outcomes>div:nth-child(4n+4)::before,
body[data-layout="pub"] .cdl-item:nth-child(4n+4)::before,
body[data-layout="pub"] .acc:nth-child(4n+4)::before,
body[data-layout="pub"] .person:nth-child(4n+4)::before,
body[data-layout="pub"] .dd:nth-child(4n+4)::before,
body[data-layout="pub"] .thumb:nth-child(4n+4)::before,
body[data-layout="pub"] .h-learn-art:nth-child(4n+4)::before,
body[data-layout="pub"] .h-strip-card:nth-child(4n+4)::before,
body[data-layout="pub"] .cd-player:nth-child(4n+4)::before,
body[data-layout="pub"] .hdr>.wrap:nth-child(4n+4)::before,
body[data-layout="pub"] .foot>.wrap:nth-child(4n+4)::before,
body[data-layout="pub"] .fcta:nth-child(4n+4)::before,
body[data-layout="pub"] .cd-status:nth-child(4n+4)::before,
body[data-layout="pub"] .cd-teacher:nth-child(4n+4)::before,
body[data-layout="pub"] .card.ctag:nth-child(4n+4)::before,
body[data-layout="pub"] .ctag-m:nth-child(4n+4)::before,
body[data-layout="pub"] .h-stat-panel:nth-child(4n+4)::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.14),transparent 70%)}

/* keep section-level math accents clear of inputs and buttons */
body[data-layout="pub"] main>section:not(.hero):not(.dark):not(.banner)::after{opacity:.22;width:120px;height:120px}

/* ===== Course details: remove the empty band under the navbar ===== */
body[data-layout="pub"] main section.sec:has(#courseDetail){padding-top:1.25rem}
body[data-layout="pub"] main section.sec:has(#courseDetail) .wrap>.mt-8{margin-top:0!important}
body[data-layout="pub"] #courseDetail>.cd-hero{margin-top:0}

/* ===== Animations (site-wide; hero kept as designed; respects reduced-motion) ===== */
@media (prefers-reduced-motion: no-preference){
  .js-rv .rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
  .js-rv .rv.in{opacity:1;transform:none}
  @keyframes slideDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  body[data-layout="pub"] .hdr{animation:slideDown .6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  body[data-layout="pub"] main .card::after{animation:floatY 7s ease-in-out infinite}
  @keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  body[data-layout="pub"] .banner .wrap,body[data-layout="pub"] .cd-hero{background-size:200% 200%;animation:drift 14s ease infinite}
  body[data-layout="pub"] .btn-accent{position:relative;overflow:hidden}
  body[data-layout="pub"] .btn-accent::after{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);pointer-events:none}
  body[data-layout="pub"] .btn-accent:hover::after{left:130%;transition:left .7s ease}
  body[data-layout="pub"] .btn:active{transform:scale(.97)}
  body[data-layout="pub"] .thumb img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  body[data-layout="pub"] .card:hover .thumb img{transform:scale(1.06)}
  body[data-layout="pub"] .chip img{transition:transform .3s}
  body[data-layout="pub"] .chip:hover img{transform:rotate(-8deg) scale(1.08)}
  body[data-layout="pub"] .h-ico,body[data-layout="pub"] .ico{transition:transform .3s}
  body[data-layout="pub"] .card:hover .ico{transform:rotate(-6deg) scale(1.06)}
  @keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
  .fab-wa{animation:wa-pulse 2.6s ease-out infinite}
  body[data-layout="pub"] .cdl-item.is-on{animation:slideIn .4s ease both}
  @keyframes slideIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
  body[data-layout="pub"] .acc.open .acc-body{animation:fadeDown .35s ease both}
  @keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  body[data-layout="pub"] .pill{animation:floatY 5s ease-in-out infinite}
  body[data-layout="pub"] .toast{animation:slideDown .4s ease both}
}