/*
Theme Name: Future Ready Theme
Author: Abdhesh
Version: 1.0
*/

:root{
  --o:#E8590C;--o2:#F07820;--y:#F5A623;
  --g:linear-gradient(135deg,#E8590C,#F5A623);
  --bg:#F8F5F0;--surface:#FFFFFF;--s2:#F2EDE6;
  --bd:#E5DDD4;--bd2:#CEC4B4;
  --ink:#1A1208;--i2:#3A3020;--i3:#5C5040;--i4:#8A7A68;--i5:#B8A898;
  --obg:#FFF3ED;--obr:rgba(232,89,12,.15);
  --sh1:0 1px 4px rgba(26,18,8,.08);
  --sh2:0 4px 20px rgba(26,18,8,.10),0 1px 4px rgba(26,18,8,.06);
  --sh3:0 8px 36px rgba(26,18,8,.12),0 2px 8px rgba(26,18,8,.06);
  --sh4:0 20px 60px rgba(26,18,8,.15),0 4px 16px rgba(26,18,8,.08);
  --r:10px;--r2:16px;--r3:24px;
  --f:'Plus Jakarta Sans',sans-serif;
  --fs:'Fraunces',serif;
  --tr:all .25s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--g);border-radius:3px}
a{text-decoration:none;color:inherit}button{font-family:var(--f);cursor:pointer}
.page{display:none}.page.active{display:block}

/* TYPOGRAPHY */
.t-hero{font-family:var(--fs);font-size:clamp(38px,6.5vw,78px);line-height:1.05;letter-spacing:-1px;color:var(--ink)}
.t-h2{font-family:var(--fs);font-size:clamp(26px,4vw,50px);line-height:1.12;letter-spacing:-.5px;color:var(--ink)}
.t-h3{font-size:clamp(17px,2vw,21px);font-weight:800;line-height:1.3;color:var(--ink)}
.t-lead{font-size:clamp(15px,1.8vw,17px);font-weight:400;line-height:1.8;color:var(--i3)}
.t-body{font-size:14px;line-height:1.75;color:var(--i3)}
.t-sm{font-size:13px;color:var(--i4)}
.t-xs{font-size:11px;color:var(--i5);letter-spacing:.5px}
.gt{background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.italic{font-style:italic}

/* LAYOUT */
.w{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.ws{max-width:720px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.sec{padding:clamp(60px,9vw,120px) 0}
.ssec{padding:clamp(36px,5vw,64px) 0}
.divider{height:1px;background:var(--bd)}
.tc{text-align:center}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}.mb24{margin-bottom:24px}.mb32{margin-bottom:32px}.mb40{margin-bottom:40px}.mb48{margin-bottom:48px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}
@media(max-width:960px){.hi-mob{display:none!important}}
@media(max-width:600px){.hi-sm{display:none!important}}

/* CHIP */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--obg);border:1px solid var(--obr);color:var(--o)}
.chip-g{background:var(--s2);border:1px solid var(--bd);color:var(--i3);font-size:11px;font-weight:600;padding:4px 11px;border-radius:16px;display:inline-flex;align-items:center}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-weight:700;font-size:14px;padding:13px 26px;border-radius:var(--r);border:none;cursor:pointer;transition:var(--tr);white-space:nowrap;text-decoration:none;letter-spacing:.2px}
.btn-p{background:var(--g);color:#fff;box-shadow:0 4px 16px rgba(232,89,12,.3)}.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,89,12,.4)}
.btn-d{background:var(--ink);color:#fff}.btn-d:hover{background:var(--i2);transform:translateY(-2px);box-shadow:var(--sh2)}
.btn-o{background:transparent;color:var(--ink);border:2px solid var(--bd2)}.btn-o:hover{border-color:var(--o);color:var(--o)}
.btn-g{background:transparent;color:var(--o);border:2px solid var(--o)}.btn-g:hover{background:var(--obg)}
.btn-lg{padding:15px 32px;font-size:15px}
.btn-sm{padding:9px 18px;font-size:12px}
.btn-fw{width:100%;justify-content:center}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:9000;background:rgba(248,245,240,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--bd)}
.nav-i{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,56px);display:flex;align-items:center;height:64px;gap:20px}
.nav-logo svg{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links button{background:none;border:none;padding:7px 12px;font-size:13px;font-weight:600;color:var(--i3);border-radius:8px;cursor:pointer;transition:var(--tr)}
.nav-links button:hover,.nav-links button.active{color:var(--o);background:var(--obg)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-tel{font-size:13px;font-weight:700}
@media(max-width:900px){.nav-links{display:none}.nav-tel{display:none}}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:64px;background:var(--surface);position:relative;overflow:hidden}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(232,89,12,.1) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse 60% 80% at 72% 50%,black,transparent);pointer-events:none}
.hero-glow{position:absolute;top:-100px;right:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(232,89,12,.07),transparent 65%);pointer-events:none;border-radius:50%}
.hero-l{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:center;width:100%}
@media(max-width:960px){.hero-l{grid-template-columns:1fr}}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:var(--obg);border:1px solid var(--obr);border-radius:30px;padding:7px 16px;margin-bottom:22px}
.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--o);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.hero-proof{display:flex;gap:32px;padding-top:32px;border-top:1px solid var(--bd);flex-wrap:wrap}
.pnum{font-family:var(--fs);font-size:30px;font-weight:700;line-height:1;color:var(--ink)}.pnum em{color:var(--o);font-style:normal}
.plbl{font-size:12px;color:var(--i4);margin-top:4px;font-weight:500}
/* Hero Visual */
.hv-card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r3);padding:26px;box-shadow:var(--sh4)}
.hv-fl{position:absolute;bottom:-16px;right:-16px;background:var(--ink);border-radius:var(--r2);padding:18px 22px;color:#fff;box-shadow:var(--sh4);min-width:170px}
.hv-badge{position:absolute;top:-12px;left:22px;background:var(--g);border-radius:var(--r);padding:9px 15px;color:#fff;font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(232,89,12,.35)}
.hv-row{display:flex;align-items:center;gap:11px;padding:10px 13px;background:var(--bg);border:1px solid var(--bd);border-radius:9px;margin-bottom:7px;transition:var(--tr)}
.hv-row:last-child{margin-bottom:0}
.hv-row:hover{border-color:var(--obr);background:var(--obg)}
.hv-row-tag{margin-left:auto;font-size:10px;font-weight:700;background:var(--obg);color:var(--o);border:1px solid var(--obr);padding:2px 8px;border-radius:12px}

/* WHY */
.why-g{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh1)}
@media(max-width:900px){.why-g{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.why-g{grid-template-columns:1fr}}
.why-c{padding:32px 24px;border-right:1px solid var(--bd);background:var(--surface);transition:var(--tr)}
.why-c:last-child{border-right:none}
.why-c:hover{background:var(--obg)}
.why-no{font-family:var(--fs);font-size:12px;font-weight:700;color:var(--o);letter-spacing:2px;margin-bottom:14px}
.why-ico{width:46px;height:46px;border-radius:12px;background:var(--obg);border:1px solid var(--obr);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:15px}
.why-c h3{font-size:15px;font-weight:700;margin-bottom:8px}
.why-c p{font-size:13px;color:var(--i4);line-height:1.7}

/* COURSES */
.indie-note{display:flex;align-items:flex-start;gap:13px;background:var(--surface);border:1px solid var(--bd);border-radius:var(--r2);padding:18px 22px;box-shadow:var(--sh1);margin-bottom:36px}
.indie-note h4{font-size:14px;font-weight:700;margin-bottom:5px}
.indie-note p{font-size:13px;color:var(--i4);line-height:1.65}
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:700px){.course-grid{grid-template-columns:1fr}}
.cc{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh1);transition:var(--tr);display:flex;flex-direction:column}
.cc:hover{transform:translateY(-5px);box-shadow:var(--sh4);border-color:var(--obr)}
.cc-top{height:5px;background:var(--g)}
.cc-body{padding:28px;flex:1;display:flex;flex-direction:column}
.cc-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.cc-ico{width:56px;height:56px;border-radius:14px;background:var(--obg);border:1px solid var(--obr);display:flex;align-items:center;justify-content:center;font-size:26px}
.cc-num{font-family:var(--fs);font-size:42px;font-weight:300;color:var(--bd2);line-height:1;letter-spacing:-2px}
.cc-title{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:9px;line-height:1.25}
.cc-desc{font-size:13px;color:var(--i4);line-height:1.7;margin-bottom:20px;flex:1}
.cc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.cc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid var(--bd)}
.cc-lbl{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--o)}

/* TRANSFORM */
.tf-sec{background:var(--ink);color:#fff}
.tf-sec .t-h2{color:#fff}
.tf-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center;margin-top:48px}
@media(max-width:768px){.tf-grid{grid-template-columns:1fr}.tf-arr{display:none!important}}
.tf-col{padding:40px;border-radius:var(--r3)}
.tf-col.bf{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.tf-col.af{background:rgba(232,89,12,.08);border:1px solid rgba(232,89,12,.22)}
.tf-lbl{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:6px 13px;border-radius:6px;margin-bottom:22px}
.bf .tf-lbl{background:rgba(255,255,255,.05);color:rgba(255,255,255,.3)}
.af .tf-lbl{background:rgba(232,89,12,.15);color:var(--o2)}
.tf-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.tf-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.6}
.bf .tf-list li{color:rgba(255,255,255,.4)}
.af .tf-list li{color:rgba(255,255,255,.88)}
.tf-list li::before{content:'';width:5px;height:5px;border-radius:50%;margin-top:7px;flex-shrink:0}
.bf .tf-list li::before{background:rgba(255,255,255,.2)}
.af .tf-list li::before{background:var(--o)}
.tf-arr{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px}
.tf-circ{width:50px;height:50px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;box-shadow:0 8px 24px rgba(232,89,12,.35)}
.tf-sub{font-size:10px;color:rgba(255,255,255,.3);font-weight:600;letter-spacing:2px;text-transform:uppercase;text-align:center}

/* JOURNEY */
.jrn-sec{background:var(--surface)}
.jrn-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
@media(max-width:768px){.jrn-steps{grid-template-columns:1fr 1fr}}
.jrn-line{position:absolute;top:28px;left:12%;right:12%;height:2px;background:var(--g);z-index:0}
@media(max-width:768px){.jrn-line{display:none}}
.jrn-step{text-align:center;padding:0 14px 28px;position:relative;z-index:1}
.step-b{width:56px;height:56px;border-radius:50%;background:var(--surface);border:3px solid var(--o);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:18px;font-weight:800;color:var(--o);box-shadow:0 0 0 7px var(--obg),var(--sh1)}
.jrn-step h3{font-size:15px;font-weight:700;margin-bottom:7px}
.jrn-step p{font-size:13px;color:var(--i4);line-height:1.65}

/* TESTIMONIALS */
.testi-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.testi-g{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.testi-g{grid-template-columns:1fr}}
.tc-c{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r3);padding:26px;box-shadow:var(--sh1);transition:var(--tr)}
.tc-c:hover{box-shadow:var(--sh3);transform:translateY(-3px)}
.tc-stars{display:flex;gap:3px;margin-bottom:13px}
.tc-stars span{color:var(--y);font-size:13px}
.tc-text{font-size:14px;color:var(--i3);line-height:1.8;margin-bottom:18px;font-style:italic}
.tc-auth{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--bd)}
.tc-av{width:40px;height:40px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}
.tc-name{font-size:14px;font-weight:700}
.tc-role{font-size:11px;color:var(--o);font-weight:600}

/* CTA */
.cta-sec{background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(232,89,12,.2),transparent 65%);pointer-events:none;border-radius:50%}
.cta-sec .t-h2{color:#fff}
.cta-sec .t-lead{color:rgba(255,255,255,.6)}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* FOOTER */
footer{background:#23180E;color:rgba(255,255,255,.7);padding:52px 0 26px}
.footer-g{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:44px;margin-bottom:44px}
@media(max-width:900px){.footer-g{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-g{grid-template-columns:1fr}}
.footer-brand svg{height:34px;margin-bottom:13px}
.footer-brand p{font-size:13px;line-height:1.7;color:rgba(255,255,255,.4);max-width:250px;margin-bottom:20px}
.footer-social{display:flex;gap:8px}
.footer-social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.4);transition:var(--tr)}
.footer-social a:hover{background:var(--o);border-color:var(--o);color:#fff}
.fc h4{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:18px}
.fc ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.fc ul li button,.fc ul li a{font-size:13px;color:rgba(255,255,255,.4);background:none;border:none;cursor:pointer;font-family:var(--f);padding:0;text-align:left;transition:color .2s}
.fc ul li button:hover,.fc ul li a:hover{color:var(--o)}
.fci{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px}
.fci span:first-child{font-size:14px;margin-top:1px;flex-shrink:0}
.fci span:last-child{font-size:13px;color:rgba(255,255,255,.4);line-height:1.5}
.footer-btm{padding-top:22px;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.2)}
.footer-copy strong{color:var(--o)}

/* ============ COURSE PAGE ============ */
.course-hero{padding-top:64px;background:var(--surface);border-bottom:1px solid var(--bd)}
.ch-inner{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;padding:clamp(40px,7vw,70px) 0}
@media(max-width:900px){.ch-inner{grid-template-columns:1fr}}
.enroll-card{background:var(--surface);border:2px solid var(--bd);border-radius:var(--r3);padding:24px;box-shadow:var(--sh3);position:sticky;top:76px}
.e-hl{background:var(--obg);border:1px solid var(--obr);border-radius:9px;padding:14px;margin-bottom:16px;text-align:center}
.e-big{font-family:var(--fs);font-size:24px;font-weight:700;color:var(--o)}
.e-sub{font-size:12px;color:var(--i4);margin-top:3px}
.e-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.e-list li{display:flex;gap:7px;font-size:13px;color:var(--i3);align-items:flex-start;line-height:1.5}
.e-list li::before{content:'✓';color:var(--o);font-weight:700;flex-shrink:0}
.e-note{font-size:11px;color:var(--i5);text-align:center;margin-top:8px}

/* TABS */
.tabs-nav{display:flex;background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:32px}
.tab-btn{flex:1;padding:12px 6px;background:none;border:none;font-family:var(--f);font-size:13px;font-weight:600;color:var(--i4);cursor:pointer;transition:var(--tr);border-right:1px solid var(--bd)}
.tab-btn:last-child{border-right:none}
.tab-btn.active{background:var(--g);color:#fff}
.tab-btn:hover:not(.active){background:var(--obg);color:var(--o)}
.tab-panel{display:none}.tab-panel.active{display:block}
.learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:600px){.learn-grid{grid-template-columns:1fr}}
.learn-item{display:flex;align-items:flex-start;gap:9px;padding:12px;background:var(--surface);border:1px solid var(--bd);border-radius:9px;font-size:13px;color:var(--i3);line-height:1.5}
.learn-item::before{content:'✦';color:var(--o);font-size:9px;flex-shrink:0;margin-top:3px;font-weight:700}
.for-who-list{display:flex;flex-direction:column;gap:9px}
.for-who-item{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;background:var(--surface);border:1px solid var(--bd);border-radius:10px;border-left:3px solid var(--o)}
.fwi{font-size:17px;flex-shrink:0}
.fwt{font-size:13px;color:var(--i3);line-height:1.6}

/* MODULE */
.mod-item{border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden;margin-bottom:9px;transition:var(--tr)}
.mod-item.open{border-color:var(--obr);box-shadow:var(--sh2)}
.mod-hdr{display:flex;align-items:center;gap:13px;padding:17px 20px;background:var(--surface);cursor:pointer;transition:var(--tr)}
.mod-hdr:hover,.mod-item.open .mod-hdr{background:var(--obg)}
.mod-n{width:40px;height:40px;border-radius:10px;background:var(--g);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(232,89,12,.28)}
.mod-inf{flex:1}
.mod-t{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.mod-s{font-size:12px;color:var(--i4);margin-top:2px}
.mod-cnt{font-size:11px;font-weight:700;color:var(--o);background:var(--obg);border:1px solid var(--obr);padding:3px 9px;border-radius:15px;white-space:nowrap}
.mod-chev{width:28px;height:28px;border-radius:7px;border:1px solid var(--bd);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--o);transition:var(--tr);flex-shrink:0}
.mod-item.open .mod-chev{transform:rotate(180deg);background:var(--o);color:#fff;border-color:var(--o)}
.mod-body{display:none;border-top:1px solid var(--bd);background:var(--bg)}
.mod-item.open .mod-body{display:block}
.mod-body-inner{padding:22px 20px}
.lesson-list{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:18px}
.lesson-item{display:flex;align-items:center;gap:10px;padding:10px 13px;background:var(--surface);border:1px solid var(--bd);border-radius:8px;font-size:13px;color:var(--i3);cursor:pointer;transition:var(--tr)}
.lesson-item:hover{border-color:var(--obr);background:var(--obg);color:var(--o)}
.l-num{width:22px;height:22px;border-radius:6px;background:var(--s2);border:1px solid var(--bd);font-size:10px;font-weight:700;color:var(--i4);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--tr)}
.lesson-item:hover .l-num{background:var(--o);border-color:var(--o);color:#fff}
.l-lbl{flex:1;font-weight:500}
.l-play{font-size:12px;color:var(--i5);transition:var(--tr)}
.lesson-item:hover .l-play{color:var(--o)}
.mod-badges{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--bd)}
.mb-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:18px;font-size:11px;font-weight:700}
.mb-q{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);color:#8A6000}
.mb-a{background:var(--obg);border:1px solid var(--obr);color:var(--o)}

/* OUTCOMES */
.oc-card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r3);padding:26px;text-align:center;box-shadow:var(--sh1);transition:var(--tr)}
.oc-card:hover{transform:translateY(-4px);box-shadow:var(--sh3)}
.oc-ico{width:60px;height:60px;border-radius:50%;background:var(--obg);border:2px solid var(--obr);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 15px}
.oc-card h3{font-size:16px;font-weight:700;margin-bottom:9px}
.oc-card p{font-size:13px;color:var(--i4);line-height:1.7}

/* SLIDE READER */
.sr-ov{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:14px}
.sr-ov.open{display:flex}
.sr-modal{background:var(--surface);border-radius:var(--r3);width:100%;max-width:820px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.35)}
.sr-hdr{padding:15px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px;background:var(--bg);flex-shrink:0}
.sr-hdr-mod{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-hdr-course{font-size:11px;color:var(--i4);margin-top:2px}
.sr-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;color:var(--i3);transition:var(--tr);flex-shrink:0}
.sr-close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sr-prog{height:4px;background:var(--bd);flex-shrink:0}
.sr-fill{height:100%;background:var(--g);transition:width .4s}
.sr-thumbs{display:flex;gap:3px;padding:7px 20px;background:var(--bg);border-bottom:1px solid var(--bd);overflow-x:auto;flex-shrink:0}
.sr-thumb{min-width:28px;height:4px;border-radius:2px;background:var(--bd);cursor:pointer;transition:var(--tr);flex:1}
.sr-thumb.done{background:rgba(232,89,12,.3)}
.sr-thumb.current{background:var(--o)}
.sr-content{flex:1;overflow-y:auto;padding:32px 36px}
@media(max-width:600px){.sr-content{padding:20px 16px}}
.sr-slide-num{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--o);margin-bottom:8px}
.sr-slide-title{font-size:clamp(20px,3.5vw,28px);font-weight:800;color:var(--ink);margin-bottom:22px;line-height:1.2}
.sr-bullets{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:24px}
.sr-bullet{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--bg);border:1px solid var(--bd);border-radius:9px;font-size:14px;color:var(--i2);line-height:1.65;border-left:3px solid transparent;transition:var(--tr)}
.sr-bullet:hover{border-left-color:var(--o);background:var(--obg)}
.sr-bullet::before{content:'›';color:var(--o);font-size:16px;font-weight:700;flex-shrink:0;line-height:1.3}
.sr-teach-wrap{background:var(--bg);border:1px solid var(--bd);border-radius:10px;overflow:hidden;margin-bottom:12px}
.sr-teach-tog{display:flex;align-items:center;gap:7px;width:100%;padding:12px 15px;background:none;border:none;font-family:var(--f);font-size:13px;font-weight:700;color:var(--i4);cursor:pointer;transition:var(--tr);text-align:left}
.sr-teach-tog:hover{color:var(--o)}
.sr-teach-body{display:none;padding:4px 15px 14px}
.sr-teach-body.open{display:block}
.sr-teach-body p{font-size:13px;color:var(--i3);line-height:1.8}
.sr-ex{background:var(--surface);border:1px solid var(--bd);border-radius:9px;padding:14px}
.sr-ex-lbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--o);margin-bottom:6px}
.sr-ex-text{font-size:13px;color:var(--i3);line-height:1.75}
.sr-footer{padding:13px 20px;border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);flex-shrink:0;flex-wrap:wrap}
.sr-counter{font-size:13px;color:var(--i4);font-weight:600}
.sr-nav{display:flex;gap:7px}
.sr-nav button{padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;font-family:var(--f);cursor:pointer;transition:var(--tr);border:1px solid var(--bd);background:var(--surface);color:var(--ink)}
.sr-nav button:hover:not(:disabled){border-color:var(--o);color:var(--o)}
.sr-nav button:disabled{opacity:.35;cursor:not-allowed}
.sr-nav button.prim{background:var(--g);color:#fff;border:none;box-shadow:0 4px 12px rgba(232,89,12,.28)}
.sr-nav button.prim:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(232,89,12,.38);color:#fff}

/* FADE IN */
.fi{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fi.vis{opacity:1;transform:none}