/* ══════════════════════════════════════════
   UPOMA SCIENCE ACADEMY — EMERALD DARK THEME
   ══════════════════════════════════════════ */
:root {
  /* Dark palette */
  --bg:      #060b18;
  --bg2:     #0c1225;
  --surface: #111827;
  --card:    rgba(255,255,255,.05);
  --cborder: rgba(255,255,255,.08);
  /* Brand */
  --em:  #10b981;   /* emerald */
  --em2: #059669;
  --cy:  #06b6d4;   /* cyan */
  --am:  #f59e0b;   /* amber */
  --vi:  #a78bfa;   /* violet */
  --pi:  #f472b6;   /* pink */
  /* Light palette */
  --lt:  #f8fafc;
  --lt2: #ffffff;
  --tx:  #0f172a;
  --tx2: #475569;
  --bd:  #e2e8f0;
  /* Utility */
  --ok:  #22c55e;
  --r:   14px;
  --r2:  8px;
  --tr:  all .28s cubic-bezier(.4,0,.2,1);
  --sh:  0 4px 24px rgba(0,0,0,.12);
  --sh2: 0 16px 48px rgba(0,0,0,.2);
  --gshadow: 0 0 40px rgba(16,185,129,.15);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:15px }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--tx); background:var(--lt); overflow-x:hidden; line-height:1.65;
}
a { text-decoration:none; color:inherit }
ul { list-style:none }
img { max-width:100%; display:block }

/* ── Layout ── */
.container { max-width:1160px; margin:0 auto; padding:0 24px }
.sec { padding:80px 0 }
.sec-light { background:var(--lt) }
.sec-dark  { background:var(--bg2) }
.hidden { display:none !important }
.fw { width:100% }

/* ── Utility text ── */
.eyebrow {
  font-size:.7rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--em); margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before {
  content:''; width:24px; height:2px;
  background:linear-gradient(to right,var(--em),var(--cy));
  border-radius:1px; display:inline-block;
}
.eyebrow.light { color:var(--em) }

/* ── Section header ── */
.sec-head { text-align:center; margin-bottom:48px }
.sec-head .eyebrow { justify-content:center }
.sec-head h2 {
  font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800;
  color:var(--tx); line-height:1.15; margin-top:6px; margin-bottom:10px;
  letter-spacing:-.4px;
}
.sec-head h2 em { color:var(--em); font-style:normal }
.sec-head p { color:var(--tx2); font-size:.9rem; max-width:500px; margin:0 auto }
.sec-head.light h2 { color:#fff }
.sec-head.light p { color:rgba(255,255,255,.6) }

/* ══════════════ NAV ══════════════ */
#hdr {
  position:sticky; top:0; z-index:1000;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:var(--tr);
}
#hdr::before {
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:rgba(6,11,24,.92);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
#hdr.scrolled { box-shadow:0 4px 30px rgba(0,0,0,.4) }
.nav-wrap {
  max-width:1160px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.logo { display:flex; align-items:center; gap:10px }
.logo-mark {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--em),var(--cy));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem;
  animation:atomSpin 10s linear infinite;
  box-shadow:0 0 16px rgba(16,185,129,.35);
}
@keyframes atomSpin { 100% { transform:rotate(360deg) } }
.logo-words strong { color:#fff; font-size:.95rem; font-weight:800; display:block; line-height:1.1 }
.logo-words span { color:var(--em); font-size:.6rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase }
.nav-menu { display:flex; align-items:center; gap:2px }
.nlink {
  font-size:.78rem; font-weight:500; color:rgba(255,255,255,.6);
  padding:6px 11px; border-radius:7px; transition:var(--tr); white-space:nowrap;
}
.nlink:hover, .nlink.active { color:#fff; background:rgba(255,255,255,.07) }
.nav-enroll {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,var(--em),var(--cy));
  color:#fff; font-size:.78rem; font-weight:700;
  padding:7px 16px; border-radius:20px; margin-left:6px;
  box-shadow:0 4px 14px rgba(16,185,129,.3); transition:var(--tr);
}
.nav-enroll:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,185,129,.4) }

/* Dropdown */
.has-drop { position:relative }
.drop-panel {
  position:absolute; top:calc(100% + 8px); left:0;
  background:var(--surface); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r); min-width:220px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:var(--tr);
}
.has-drop:hover .drop-panel { opacity:1; visibility:visible; transform:translateY(0) }
.drop-panel a {
  display:flex; align-items:center; gap:10px;
  padding:11px 18px; color:rgba(255,255,255,.7); font-size:.82rem;
  transition:var(--tr); border-bottom:1px solid rgba(255,255,255,.04);
}
.drop-panel a:last-child { border-bottom:none }
.drop-panel a i { color:var(--em); width:16px }
.drop-panel a:hover { background:rgba(255,255,255,.05); color:#fff; padding-left:22px }

/* Hamburger */
#ham { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px }
#ham span { width:22px; height:2px; background:rgba(255,255,255,.7); border-radius:1px; transition:var(--tr); display:block }

/* Buttons */
.cta-primary {
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,var(--em),var(--cy));
  color:#fff; font-size:.83rem; font-weight:700;
  padding:11px 24px; border-radius:28px; border:none; cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 4px 16px rgba(16,185,129,.3); transition:var(--tr);
}
.cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(16,185,129,.45) }
.cta-ghost {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.85);
  font-size:.83rem; font-weight:600; padding:11px 22px;
  border-radius:28px; border:1.5px solid rgba(255,255,255,.15);
  transition:var(--tr); cursor:pointer;
}
.cta-ghost:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3) }

/* ══════════════ HERO ══════════════ */
.hero-section {
  position:relative; height:calc(100vh - 60px);
  min-height:580px; overflow:hidden; background:var(--bg);
}
.hero-bg { position:absolute; inset:0; pointer-events:none }
.orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.5;
  animation:orbFloat 8s ease-in-out infinite;
}
.orb1 { width:400px; height:400px; background:rgba(16,185,129,.25); top:-80px; right:-80px; animation-delay:0s }
.orb2 { width:300px; height:300px; background:rgba(6,182,212,.2); bottom:-60px; left:20%; animation-delay:2.5s }
.orb3 { width:250px; height:250px; background:rgba(167,139,250,.15); top:40%; left:-60px; animation-delay:5s }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1) }
  50%      { transform:translate(20px,-20px) scale(1.05) }
}
#particleCanvas { position:absolute; inset:0; width:100%; height:100% }

/* Slider */
.slider-container { position:relative; width:100%; height:100%; z-index:2 }
.hslide {
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; transition:opacity .75s ease; pointer-events:none;
}
.hslide.active { opacity:1; pointer-events:all }
.hs-inner {
  max-width:1160px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  width:100%;
}
/* Content */
.hs-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(16,185,129,.12); color:var(--em);
  border:1px solid rgba(16,185,129,.25);
  font-size:.68rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; margin-bottom:16px;
}
.badge-dot {
  width:7px; height:7px; border-radius:50%; background:var(--em);
  box-shadow:0 0 8px var(--em);
  animation:dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} }
.hs-content h1 {
  font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900;
  color:#fff; line-height:1.1; margin-bottom:14px; letter-spacing:-.8px;
}
.grad-text {
  background:linear-gradient(135deg,var(--em),var(--cy));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hs-content p { color:rgba(255,255,255,.65); font-size:.9rem; margin-bottom:24px; max-width:420px; line-height:1.7 }
.hs-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px }
.hs-chips { display:flex; gap:10px; flex-wrap:wrap }
.hs-chips span {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7); font-size:.72rem; font-weight:600;
  padding:4px 10px; border-radius:12px;
}
.hs-chips i { color:var(--em); font-size:.75rem }

/* Visual cards in hero */
.hs-visual { position:relative }
/* Classroom card */
.classroom-card {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); overflow:hidden;
  backdrop-filter:blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,.3), var(--gshadow);
}
.cc-header {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cc-dot { width:9px; height:9px; border-radius:50% }
.cc-dot.r { background:#f87171 }
.cc-dot.y { background:#fbbf24 }
.cc-dot.g { background:var(--em) }
.cc-title { font-size:.72rem; color:rgba(255,255,255,.5); margin-left:4px; font-weight:600 }
.cc-screen {
  padding:16px 14px 10px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  min-height:80px; display:flex; flex-direction:column; justify-content:center;
}
.cc-formula {
  font-size:1.8rem; font-weight:900;
  background:linear-gradient(135deg,#fff,var(--cy));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; transition:opacity .4s;
}
.cc-formula-label { font-size:.66rem; color:rgba(255,255,255,.4); margin-top:4px }
.cc-room {
  padding:10px 14px;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.cc-teacher { display:flex; flex-direction:column; align-items:center; gap:2px }
.cct-head { width:20px; height:20px; border-radius:50%; background:#fcd34d; border:2px solid #f59e0b }
.cct-body { width:22px; height:32px; background:linear-gradient(180deg,#1d4ed8,#1e40af); border-radius:4px 4px 2px 2px }
.cct-pointer {
  width:30px; height:1.5px;
  background:linear-gradient(to right,var(--em),transparent);
  transform:rotate(-20deg) translateX(10px);
  box-shadow:0 0 6px var(--em);
}
.cc-students { display:flex; gap:10px; align-items:flex-end }
.ccs {
  width:20px; height:34px; border-radius:10px 10px 3px 3px;
  background:linear-gradient(180deg,#fcd34d 0 26%,rgba(255,255,255,.2) 26%);
}
.cc-tags { display:flex; gap:5px; padding:8px 14px; border-top:1px solid rgba(255,255,255,.05) }
.ctag {
  font-size:.65rem; font-weight:700; padding:3px 9px; border-radius:8px;
}
.ctag.blue   { background:rgba(6,182,212,.15); color:var(--cy); border:1px solid rgba(6,182,212,.2) }
.ctag.green  { background:rgba(16,185,129,.15); color:var(--em); border:1px solid rgba(16,185,129,.2) }
.ctag.amber  { background:rgba(245,158,11,.15); color:var(--am); border:1px solid rgba(245,158,11,.2) }

/* Floating chips */
.float-chip {
  position:absolute; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.1); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15); border-radius:20px;
  padding:6px 12px; font-size:.7rem; font-weight:700; color:#fff;
  white-space:nowrap; animation:chipFloat 4s ease-in-out infinite;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.float-chip i { color:var(--em) }
.fc1 { top:-14px; right:10px; animation-delay:0s }
.fc2 { bottom:10px; left:-10px; animation-delay:1.3s }
.fc3 { bottom:-18px; right:20px; animation-delay:2.6s }
@keyframes chipFloat {
  0%,100% { transform:translateY(0) }
  50%      { transform:translateY(-8px) }
}

/* JEE visual card */
.jee-visual-card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); padding:20px;
  backdrop-filter:blur(10px); box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.jvc-header {
  font-size:.75rem; font-weight:700; color:rgba(255,255,255,.9);
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.jvc-subjects { display:flex; flex-direction:column; gap:12px; margin-bottom:14px }
.jvs { display:flex; align-items:center; gap:10px }
.jvs-icon {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.jvs strong { display:block; font-size:.78rem; color:rgba(255,255,255,.9); font-weight:600; margin-bottom:4px }
.jvs > div:last-child { flex:1 }
.jvs-bar { height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden }
.jvs-fill { height:100%; border-radius:2px; transition:width 1.5s ease }
.jvc-cta { font-size:.74rem; color:rgba(255,255,255,.5); text-align:center; border-top:1px solid rgba(255,255,255,.07); padding-top:10px }
.jvc-cta strong { color:var(--em) }

/* Exam card */
.exam-card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); overflow:hidden; backdrop-filter:blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.ec-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 14px; background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.72rem; color:rgba(255,255,255,.7);
}
.ec-timer { color:var(--am); font-weight:700 }
.ec-prog { padding:8px 14px; }
.ec-bar { height:4px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-bottom:4px }
.ec-fill { height:100%; width:45%; background:linear-gradient(to right,var(--em),var(--cy)) }
.ec-prog span { font-size:.65rem; color:rgba(255,255,255,.4) }
.ec-q { font-size:.76rem; color:rgba(255,255,255,.85); padding:0 14px 8px; line-height:1.5 }
.ec-opts { display:flex; flex-direction:column; gap:4px; padding:0 14px }
.eco {
  padding:6px 10px; border-radius:5px;
  border:1px solid rgba(255,255,255,.1);
  font-size:.72rem; color:rgba(255,255,255,.6); transition:var(--tr);
}
.eco.correct { border-color:var(--ok); background:rgba(34,197,94,.1); color:#4ade80; box-shadow:0 0 10px rgba(34,197,94,.12) }
.ec-palette { display:flex; gap:4px; padding:10px 14px }
.ep { width:18px; height:18px; border-radius:4px; border:1px solid rgba(255,255,255,.15) }
.ep.done { background:var(--em); border-color:var(--em) }
.ep.active { background:var(--am); border-color:var(--am) }

/* Hero controls */
.hctl {
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15); color:#fff;
  cursor:pointer; font-size:.85rem; transition:var(--tr);
  display:flex; align-items:center; justify-content:center; z-index:10;
}
.hctl:hover { background:var(--em); border-color:var(--em); box-shadow:0 0 20px rgba(16,185,129,.4) }
.hctl.prev { left:20px }
.hctl.next { right:20px }
.hdots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:10 }
.hdot {
  width:8px; height:8px; border-radius:4px;
  background:rgba(255,255,255,.3); border:none; cursor:pointer; transition:var(--tr);
}
.hdot.active { width:26px; background:var(--em); box-shadow:0 0 10px rgba(16,185,129,.5) }
.scroll-hint {
  position:absolute; bottom:20px; left:50px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:rgba(255,255,255,.3); font-size:.65rem; letter-spacing:1px; text-transform:uppercase; z-index:10;
}
.scroll-line { width:1px; height:30px; background:linear-gradient(to bottom,var(--em),transparent) }

/* ══════════════ STATS BAR ══════════════ */
.stats-bar {
  background:var(--surface);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:22px 0;
}
.stats-inner {
  max-width:1160px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.sitem { display:flex; flex-direction:column; align-items:center }
.snum {
  font-size:1.8rem; font-weight:900; line-height:1;
  background:linear-gradient(135deg,#fff,var(--em));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.slabel { font-size:.7rem; color:rgba(255,255,255,.45); margin-top:2px; font-weight:500 }
.sdiv { width:1px; height:36px; background:rgba(255,255,255,.08) }

/* ══════════════ ABOUT ══════════════ */
.about-wrap { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.avis-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.avis-card {
  background:#fff; border-radius:var(--r); padding:22px 18px;
  box-shadow:var(--sh); border:1px solid var(--bd);
  transition:var(--tr); display:flex; flex-direction:column; gap:8px;
}
.avis-card:hover { transform:translateY(-5px); box-shadow:var(--sh2) }
.ac-big i { font-size:1.6rem; color:var(--em) }
.ac-big strong { font-size:.88rem; font-weight:700; color:var(--tx) }
.ac-big p { font-size:.76rem; color:var(--tx2); line-height:1.5 }
.ac-sm { justify-content:center; align-items:center; text-align:center; background:var(--lt) }
.avc-num { font-size:2rem; font-weight:900; color:var(--tx); letter-spacing:-.5px }
.avc-label { font-size:.72rem; color:var(--tx2); font-weight:600 }
.accent-card { background:linear-gradient(135deg,var(--em),var(--cy)) !important; border:none !important }
.accent-card .avc-num { color:#fff }
.accent-card .avc-label { color:rgba(255,255,255,.8) }
.ac-dark { background:var(--bg2) !important; border-color:rgba(255,255,255,.06) !important }
.ac-dark i { color:var(--em) }
.ac-dark strong { color:#fff }
.ac-dark p { color:rgba(255,255,255,.5) }
.spin-icon { animation:atomSpin 6s linear infinite }
.about-right h2 {
  font-size:clamp(1.5rem,3vw,2rem); font-weight:800;
  color:var(--tx); line-height:1.2; margin-bottom:12px; letter-spacing:-.3px;
}
.about-right h2 em { color:var(--em); font-style:normal }
.about-body { font-size:.85rem; color:var(--tx2); line-height:1.75; margin-bottom:18px }
.feature-list { display:flex; flex-direction:column; gap:9px; margin-bottom:24px }
.fitem { display:flex; align-items:center; gap:9px; font-size:.83rem; color:var(--tx); font-weight:500 }
.fitem i { color:var(--em); font-size:.9rem; flex-shrink:0 }

/* ══════════════ COURSES ══════════════ */
.tab-pills { display:flex; justify-content:center; gap:6px; margin-bottom:36px; flex-wrap:wrap }
.tpill {
  padding:8px 20px; border-radius:22px;
  border:1.5px solid rgba(255,255,255,.15);
  background:transparent; color:rgba(255,255,255,.6);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600; font-size:.8rem; cursor:pointer; transition:var(--tr);
}
.tpill:hover { border-color:var(--em); color:var(--em) }
.tpill.active {
  background:linear-gradient(135deg,var(--em),var(--cy));
  border-color:transparent; color:#fff;
  box-shadow:0 4px 16px rgba(16,185,129,.3);
}
.tab-pane { display:none }
.tab-pane.active { display:block }
.course-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.crs-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r); padding:26px 22px; position:relative;
  overflow:hidden; transition:var(--tr);
}
.crs-card:hover {
  background:rgba(255,255,255,.07); transform:translateY(-6px);
  border-color:rgba(16,185,129,.25);
  box-shadow:0 16px 48px rgba(0,0,0,.3), 0 0 30px rgba(16,185,129,.08);
}
.crs-card.featured { border-color:rgba(16,185,129,.25) }
.crs-accent {
  position:absolute; top:0; left:0; right:0; height:3px;
}
.crs-badge {
  position:absolute; top:14px; right:14px;
  background:linear-gradient(135deg,var(--em),var(--cy));
  color:#fff; font-size:.62rem; font-weight:700;
  padding:3px 10px; border-radius:10px;
  box-shadow:0 2px 8px rgba(16,185,129,.3);
}
.crs-icon { font-size:1.6rem; margin-bottom:12px; display:block }
.crs-meta {
  font-size:.65rem; font-weight:700; color:rgba(255,255,255,.4);
  letter-spacing:1px; text-transform:uppercase; margin-bottom:5px;
}
.crs-card h3 { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:8px; line-height:1.3 }
.crs-card p { font-size:.79rem; color:rgba(255,255,255,.55); margin-bottom:12px; line-height:1.6 }
.crs-list { display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
.crs-list li {
  display:flex; align-items:center; gap:7px;
  font-size:.77rem; color:rgba(255,255,255,.65);
}
.crs-list li i { font-size:.45rem; flex-shrink:0 }
.crs-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 0; border-radius:22px; font-size:.78rem; font-weight:700;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.12); transition:var(--tr);
}
.crs-btn:hover { background:rgba(16,185,129,.15); border-color:var(--em); color:var(--em) }
.featured-btn { background:linear-gradient(135deg,var(--em),var(--cy)) !important; color:#fff !important; border:none !important; box-shadow:0 4px 14px rgba(16,185,129,.3) }
.featured-btn:hover { box-shadow:0 8px 24px rgba(16,185,129,.45) !important; color:#fff !important }

/* JEE Tab */
.jee-wrap { display:flex; flex-direction:column; gap:24px }
.jee-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.jcard {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r); padding:20px 18px; transition:var(--tr);
}
.jcard:hover { transform:translateY(-5px); background:rgba(255,255,255,.07); box-shadow:0 12px 36px rgba(0,0,0,.3) }
.jcard-top {
  display:flex; align-items:center; gap:10px;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid; /* color via inline style */
  border-bottom-color:rgba(255,255,255,.08);
}
.jcard-top:is([style*="border-color"]) { border-bottom-color:inherit }
.jcard-ic {
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.jcard-top h3 { font-size:.88rem; font-weight:700; color:#fff }
.jcard-top h3 small { font-size:.72rem; opacity:.6 }
.jcard ul { display:flex; flex-direction:column; gap:6px }
.jcard ul li {
  font-size:.76rem; color:rgba(255,255,255,.55);
  padding-left:12px; position:relative; line-height:1.4;
}
.jcard ul li::before { content:'›'; position:absolute; left:0; color:var(--em) }
.jee-cta {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
  background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(6,182,212,.08));
  border:1px solid rgba(16,185,129,.2); border-radius:var(--r);
  padding:22px 28px;
}
.jee-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(16,185,129,.15); color:var(--em);
  font-size:.65rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:3px 10px; border-radius:10px; margin-bottom:6px;
}
.jee-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--em); box-shadow:0 0 6px var(--em) }
.jee-cta h3 { font-size:1rem; font-weight:700; color:#fff }
.jee-cta h3 span { color:var(--em) }
.jee-cta p { font-size:.79rem; color:rgba(255,255,255,.55); margin-top:3px }

/* ══════════════ FEATURES ══════════════ */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.feat-card {
  background:#fff; border-radius:var(--r); padding:26px 22px;
  box-shadow:var(--sh); border:1px solid var(--bd);
  transition:var(--tr); position:relative; overflow:hidden;
}
.feat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right,var(--ic),transparent);
}
.feat-card:hover { transform:translateY(-6px); box-shadow:var(--sh2) }
.feat-icon {
  width:52px; height:52px; border-radius:13px;
  background:color-mix(in srgb, var(--ic) 12%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--ic); margin-bottom:14px;
  transition:var(--tr); border:1px solid color-mix(in srgb, var(--ic) 20%, transparent);
}
.feat-card:hover .feat-icon { transform:scale(1.1) rotate(-5deg) }
.feat-card h3 { font-size:.9rem; font-weight:700; color:var(--tx); margin-bottom:7px }
.feat-card p { font-size:.8rem; color:var(--tx2); line-height:1.65 }

/* ══════════════ EXAM + MATERIAL ══════════════ */
.exam-material-wrap { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
.em-title {
  font-size:clamp(1.4rem,3vw,2rem); font-weight:800;
  color:#fff; line-height:1.2; margin-bottom:10px; margin-top:6px; letter-spacing:-.3px;
}
.em-title em { color:var(--em); font-style:normal }
.em-body { color:rgba(255,255,255,.6); font-size:.86rem; margin-bottom:20px }
.em-feats { display:flex; flex-direction:column; gap:9px; margin-bottom:24px }
.emf { display:flex; align-items:center; gap:8px; font-size:.82rem; color:rgba(255,255,255,.75); font-weight:500 }
.emf i { color:var(--em) }
.em-btns { display:flex; gap:10px; flex-wrap:wrap }

/* Mock window */
.mock-window {
  background:#0a1020; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
}
.mock-titlebar {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mock-dots { display:flex; gap:5px }
.mock-dots span { width:9px; height:9px; border-radius:50% }
.mock-dots span:nth-child(1) { background:#f87171 }
.mock-dots span:nth-child(2) { background:#fbbf24 }
.mock-dots span:nth-child(3) { background:var(--em) }
.mock-name { flex:1; font-size:.72rem; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:6px }
.mock-name i { color:var(--em) }
.mock-timer-badge { font-size:.7rem; font-weight:700; color:var(--am); background:rgba(245,158,11,.12); padding:3px 9px; border-radius:10px }
.mock-body { padding:14px }
.mprog-wrap { margin-bottom:10px }
.mprog-bar { height:4px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-bottom:4px }
.mprog-fill { height:100%; width:43%; background:linear-gradient(to right,var(--em),var(--cy)) }
.mprog-wrap span { font-size:.65rem; color:rgba(255,255,255,.35) }
.mq-num { font-size:.68rem; font-weight:700; color:var(--cy); margin-bottom:4px; display:block }
.mock-q p { font-size:.8rem; color:rgba(255,255,255,.82); line-height:1.55; margin-bottom:10px }
.mock-opts { display:flex; flex-direction:column; gap:5px; margin-bottom:10px }
.mopt {
  display:flex; align-items:center; gap:8px;
  padding:8px 11px; border-radius:7px;
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.65); font-size:.78rem; cursor:pointer; transition:var(--tr);
}
.mopt.selected { border-color:var(--em); background:rgba(16,185,129,.1); color:var(--em) }
.mopt input { accent-color:var(--em) }
.mock-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.06);
}
.mf-btn {
  padding:5px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:rgba(255,255,255,.6); font-size:.72rem;
  cursor:pointer; transition:var(--tr); font-family:'Plus Jakarta Sans',sans-serif;
}
.mf-btn.primary { background:var(--em); border-color:var(--em); color:#fff }
.mock-palette { display:flex; gap:4px }
.mp {
  width:22px; height:22px; border-radius:5px;
  border:1px solid rgba(255,255,255,.12); font-size:.65rem;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4);
}
.mp.answered { background:var(--em); border-color:var(--em); color:#fff }
.mp.current  { background:var(--am); border-color:var(--am); color:#fff }

/* ══════════════ MATERIAL ══════════════ */
.mat-grid { display:flex; flex-direction:column; gap:0; margin-bottom:16px }
.mat-row {
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--bd);
  transition:var(--tr);
}
.mat-row:last-child { border-bottom:none }
.mat-row:hover { background:rgba(16,185,129,.03); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:8px }
.mat-icon {
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.mat-info { flex:1 }
.mat-info strong { display:block; font-size:.84rem; font-weight:700; color:var(--tx) }
.mat-info span { font-size:.74rem; color:var(--tx2); display:block; margin-bottom:5px }
.mat-tags { display:flex; gap:5px }
.mat-tags span {
  font-size:.62rem; font-weight:700; padding:2px 8px; border-radius:8px;
  background:rgba(16,185,129,.08); color:var(--em2);
  border:1px solid rgba(16,185,129,.15);
}
.mat-dl {
  display:flex; align-items:center; gap:5px;
  background:var(--lt); border:1.5px solid var(--bd);
  border-radius:10px; padding:7px 12px;
  color:var(--em2); font-size:.74rem; font-weight:700;
  transition:var(--tr); flex-shrink:0;
}
.mat-dl:hover { background:var(--em); color:#fff; border-color:var(--em); box-shadow:0 4px 14px rgba(16,185,129,.3) }
.mat-note {
  text-align:center; font-size:.8rem; color:var(--tx2);
  padding:12px; background:rgba(16,185,129,.05);
  border-radius:var(--r2); border:1px solid rgba(16,185,129,.12);
}
.mat-note i { color:var(--em2) }
.mat-note a { color:var(--em2); font-weight:700 }

/* ══════════════ TESTIMONIALS ══════════════ */
.testi-slider-wrap { position:relative; overflow:hidden }
.testi-track {
  display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1);
  margin-bottom:20px;
}
.testi-card {
  min-width:100%; padding:28px 32px; box-sizing:border-box;
  border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
}
.tc-top {
  display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;
}
.tc-av {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem; font-weight:800;
}
.tc-top strong { color:#fff; font-size:.86rem; font-weight:700; display:block }
.tc-top span { color:rgba(255,255,255,.45); font-size:.73rem }
.tc-stars { color:var(--am); font-size:.9rem; letter-spacing:2px; margin-left:auto }
.testi-card p {
  color:rgba(255,255,255,.72); font-size:.87rem; line-height:1.8;
  font-style:italic; border-left:3px solid var(--em); padding-left:14px;
}
.testi-controls {
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.tc-arrow {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#fff; cursor:pointer; font-size:.8rem; transition:var(--tr);
  display:flex; align-items:center; justify-content:center;
}
.tc-arrow:hover { background:var(--em); border-color:var(--em); box-shadow:0 0 16px rgba(16,185,129,.35) }
.testi-dots { display:flex; gap:7px }
.tdot {
  width:7px; height:7px; border-radius:4px;
  background:rgba(255,255,255,.25); transition:var(--tr); cursor:pointer;
}
.tdot.active { width:22px; background:var(--em); box-shadow:0 0 8px rgba(16,185,129,.4) }

/* ══════════════ ENROLL + CONTACT ══════════════ */
.ec-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px }
.ec-form-side h2,
.ec-contact-side h2 {
  font-size:clamp(1.4rem,3vw,2rem); font-weight:800;
  color:var(--tx); line-height:1.2; margin-bottom:12px; margin-top:6px; letter-spacing:-.3px;
}
.ec-form-side h2 em, .ec-contact-side h2 em { color:var(--em); font-style:normal }
.ec-sub { font-size:.84rem; color:var(--tx2); margin-bottom:14px }
.quick-info {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px;
}
.quick-info span {
  display:flex; align-items:center; gap:7px;
  font-size:.79rem; color:var(--tx); font-weight:500;
  background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.12);
  padding:7px 10px; border-radius:var(--r2);
}
.quick-info i { color:var(--em); flex-shrink:0; width:14px }
.enroll-form { display:flex; flex-direction:column; gap:8px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.fg { display:flex; flex-direction:column; gap:4px }
.fg label { font-size:.72rem; font-weight:600; color:var(--tx2) }
.fg input,.fg select,.fg textarea {
  width:100%; padding:10px 12px;
  border:1.5px solid var(--bd); border-radius:var(--r2);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.82rem; color:var(--tx);
  background:#fff; outline:none; transition:var(--tr);
  appearance:none;
}
.fg input:focus,.fg select:focus,.fg textarea:focus {
  border-color:var(--em); box-shadow:0 0 0 3px rgba(16,185,129,.1);
}
.form-note {
  text-align:center; font-size:.71rem; color:var(--tx2);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.form-note i { color:var(--ok) }
.form-done {
  display:flex; align-items:center; gap:12px;
  background:#f0fdf4; border:1px solid #bbf7d0;
  border-radius:var(--r); padding:14px 16px;
  margin-top:6px;
}
.form-done i { font-size:1.5rem; color:var(--ok); flex-shrink:0 }
.form-done strong { display:block; font-size:.86rem; color:#166534 }
.form-done p { font-size:.78rem; color:#166534; opacity:.8 }
.contact-list { display:flex; flex-direction:column; margin-bottom:20px }
.cl-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--bd);
}
.cl-item:last-child { border-bottom:none }
.cl-ic {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(6,182,212,.15));
  border:1px solid rgba(16,185,129,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--em);
}
.cl-item strong { display:block; font-size:.8rem; font-weight:700; color:var(--tx); margin-bottom:2px }
.cl-item p { font-size:.77rem; color:var(--tx2); line-height:1.55 }
.social-links { display:flex; gap:8px }
.social-links a {
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--bd); background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--tx2); font-size:.82rem; transition:var(--tr);
}
.social-links a:hover { background:var(--em); color:#fff; border-color:var(--em); box-shadow:0 4px 14px rgba(16,185,129,.3) }

/* ══════════════ FOOTER ══════════════ */
.site-footer { background:var(--bg); padding:60px 0 0 }
.ft-grid {
  display:grid; grid-template-columns:2fr 1fr 1.2fr 1.5fr; gap:44px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.06);
}
.ft-brand p { color:rgba(255,255,255,.4); font-size:.8rem; margin:12px 0 16px; line-height:1.7 }
.ft-social { display:flex; gap:8px }
.ft-social a {
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12); background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.45); font-size:.78rem; transition:var(--tr);
}
.ft-social a:hover { background:var(--em); color:#fff; border-color:var(--em); box-shadow:0 0 12px rgba(16,185,129,.3) }
.ft-col h4 { color:#fff; font-size:.82rem; font-weight:700; margin-bottom:14px; letter-spacing:.3px }
.ft-col ul { display:flex; flex-direction:column; gap:8px }
.ft-col ul li a { color:rgba(255,255,255,.4); font-size:.78rem; transition:var(--tr); display:flex; align-items:center; gap:5px }
.ft-col ul li a::before { content:'›'; color:var(--em); font-size:.9rem }
.ft-col ul li a:hover { color:#fff; padding-left:4px }
.ft-col p { color:rgba(255,255,255,.4); font-size:.78rem; margin-bottom:10px; line-height:1.6 }
.ft-form {
  display:flex; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); border-radius:22px; overflow:hidden; margin-bottom:12px;
}
.ft-form input {
  flex:1; background:transparent; border:none; padding:9px 14px;
  color:#fff; font-size:.78rem; font-family:'Plus Jakarta Sans',sans-serif; outline:none;
}
.ft-form input::placeholder { color:rgba(255,255,255,.3) }
.ft-form button {
  width:36px; background:var(--em); border:none; color:#fff;
  cursor:pointer; font-size:.8rem; transition:var(--tr);
}
.ft-form button:hover { background:var(--em2) }
.ft-badges { display:flex; flex-direction:column; gap:6px }
.ft-badges span {
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  padding:7px 12px; border-radius:8px;
  color:rgba(255,255,255,.55); font-size:.74rem; cursor:pointer; transition:var(--tr);
}
.ft-badges span:hover { background:rgba(255,255,255,.09); color:#fff }
.ft-badges i { color:#fff }
.ft-bottom { padding:16px 0 }
.ft-bottom-inner {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.ft-bottom p { color:rgba(255,255,255,.28); font-size:.73rem }
.ft-bottom em { color:var(--em); font-style:normal }

/* ══════════════ BTT ══════════════ */
#btt {
  position:fixed; bottom:20px; right:20px; z-index:800;
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--em),var(--cy));
  color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.82rem;
  box-shadow:0 4px 16px rgba(16,185,129,.35);
  opacity:0; visibility:hidden; transition:var(--tr);
}
#btt.vis { opacity:1; visibility:visible }
#btt:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(16,185,129,.5) }

/* ══════════════ SCROLL REVEAL ══════════════ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease }
.reveal.in { opacity:1; transform:none }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1100px) {
  .jee-cards { grid-template-columns:repeat(2,1fr) }
  .ft-grid { grid-template-columns:1fr 1fr; gap:28px }
}
@media (max-width:960px) {
  .hs-inner { grid-template-columns:1fr; gap:32px }
  .hs-visual { display:none }
  .about-wrap { grid-template-columns:1fr; gap:36px }
  .exam-material-wrap { grid-template-columns:1fr; gap:36px }
  .ec-grid { grid-template-columns:1fr; gap:36px }
}
@media (max-width:768px) {
  .nav-menu {
    position:fixed; top:60px; right:-100%; height:calc(100vh - 60px); width:280px;
    background:#0a0f1e;
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    flex-direction:column; padding:16px 12px 24px; gap:2px;
    border-left:1px solid rgba(255,255,255,.1);
    box-shadow:-8px 0 40px rgba(0,0,0,.6);
    transition:right .32s cubic-bezier(.4,0,.2,1); z-index:9999; overflow-y:auto;
    align-items:stretch;
  }
  .nav-menu.open { right:0 }
  /* Mobile nav items */
  .nlink {
    width:100%; padding:13px 16px; border-radius:10px;
    font-size:.95rem; font-weight:600;
    color:rgba(255,255,255,.8);
    border-left:3px solid transparent;
    display:flex; align-items:center;
  }
  .nlink:hover { color:#fff; background:rgba(255,255,255,.08); border-left-color:var(--em) }
  .nlink.active { color:#fff; background:rgba(16,185,129,.12); border-left-color:var(--em) }

  /* Courses toggle chevron */
  .has-drop > .nlink::after {
    content:''; margin-left:auto;
    border:5px solid transparent; border-top-color:rgba(255,255,255,.5);
    margin-top:4px;
  }

  /* Mobile dropdown panel */
  .drop-panel {
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07); border-radius:10px;
    margin:4px 0 4px 12px;
  }
  .drop-panel a {
    padding:11px 16px; font-size:.88rem; font-weight:500;
    color:rgba(255,255,255,.75); border-bottom:1px solid rgba(255,255,255,.05);
  }
  .drop-panel a:last-child { border-bottom:none }
  .drop-panel a:hover { background:rgba(16,185,129,.1); color:#fff; padding-left:20px }

  /* Divider before Enroll button */
  .nav-menu li:last-child { border-top:1px solid rgba(255,255,255,.08); margin-top:8px; padding-top:8px }
  .nav-enroll {
    width:100%; justify-content:center;
    margin:0; padding:13px 0 !important;
    border-radius:12px; font-size:.9rem;
  }
  #ham { display:flex }
  #ham.on span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
  #ham.on span:nth-child(2) { opacity:0 }
  #ham.on span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
  .course-row { grid-template-columns:1fr }
  .feat-grid { grid-template-columns:1fr 1fr }
  .avis-grid { grid-template-columns:1fr 1fr }
  .form-row { grid-template-columns:1fr }
  .quick-info { grid-template-columns:1fr }
  .stats-inner { justify-content:center; gap:20px }
  .sdiv { display:none }
  .ft-grid { grid-template-columns:1fr }
  .ft-bottom-inner { flex-direction:column; align-items:center; gap:4px; text-align:center }
  .scroll-hint { display:none }
  .hctl.prev { left:8px }
  .hctl.next { right:8px }
}
@media (max-width:520px) {
  .sec { padding:56px 0 }
  .feat-grid { grid-template-columns:1fr }
  .jee-cards { grid-template-columns:1fr }
  .avis-grid { grid-template-columns:1fr }
  .hs-content h1 { font-size:1.75rem }
  .hs-actions { flex-direction:column; gap:8px }
  .jee-cta { flex-direction:column }
  .testi-card { padding:20px 18px }
}