/* Homepage typography reset — neutralises the global head.php `h1,h2,h3{Fraunces serif}`
   rule for un-classed homepage headings (e.g. .sa-uni) so they default to Inter.
   Uses :where() for 0 specificity inside the rule, so explicit Sora title classes
   (defined later in this file) still win on equal specificity. */
.vp-home :where(h1,h2,h3,h4,h5,h6){font-family:'Inter',sans-serif}

/* Homepage hero spacing — other page stylesheets (pricing.css, news.css) get pulled in
   by the SPA hidden-page loader and their generic `.hero-in{padding:48px 5%}` overrides
   home-extracted.css. Scope under .vp-home (higher specificity) to remove the doubled
   vertical padding (.hero already supplies 64px top / 48px bottom) without affecting other pages. */
.vp-home .hero-in{padding:0 5%}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --r:#DC2626;--r2:#B91C1C;--r3:#FEE2E2;
  --b:#1E3A8A;--b2:#1D4ED8;--b3:#EFF6FF;
  --gold:#F59E0B;--gold2:#FEF3C7;
  --ink:#0F1929;--ink2:#1E2D3D;
  --muted:#64748B;--muted2:#94A3B8;
  --border:#E2E8F0;--border2:#CBD5E1;
  --white:#FFFFFF;--bg:#F8FAFF;--bg2:#F1F5F9;
  --green:#059669;--green2:#ECFDF5;
  --max:1280px;
  --sh:0 4px 24px rgba(15,25,41,.08);
  --sh2:0 20px 60px rgba(15,25,41,.12);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:var(--bg2)}
*::-webkit-scrollbar-thumb{background:var(--r);border-radius:4px}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:'Inter',sans-serif;cursor:pointer}
img{max-width:100%;display:block}

/* ══ MEGA MENU ══ */
.nav-mega-wrap{position:relative}
.nav-mega-wrap>a::after{content:'▾';font-size:.55rem;margin-left:2px;opacity:.5;transition:transform .2s;display:inline-flex;align-items:center;line-height:1;position:relative;top:1px}
.nav-mega-wrap:hover>a::after{transform:rotate(180deg)}
.nav-mega{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  width:720px;
  max-width:calc(100vw - 40px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:0;
  box-shadow:var(--sh2);
  z-index:700;
  overflow:hidden;
  padding-top:12px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  pointer-events:none;
}
/* ONLY show when hovering the Courses wrapper OR the mega menu itself */
.nav-mega-wrap:hover > .nav-mega,
.nav-mega:hover{
  display:block;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
/* SAFE hover bridge - narrow and non-interactive */
.nav-mega-wrap::before{
  content:'';
  position:absolute;
  top:100%;
  left:20%;
  right:20%;
  height:8px;
  z-index:699;
  pointer-events:none;
}

/* ── MEGA MENU COLOR MATCHING (JS-powered) ── */
/* Parent container gets color class via JS on hover */
.nav-mega-grid[data-active-color="red"] .nav-mega-quick-item{
  border-color:rgba(220,38,38,.35);
  color:var(--r);
}
.nav-mega-grid[data-active-color="red"] .nav-mega-quick-item:hover{
  background:rgba(220,38,38,.08);
  border-color:var(--r);
}
.nav-mega-grid[data-active-color="red"] .nav-mega-quick-title{
  color:var(--r);
}
.nav-mega-grid[data-active-color="cyan"] .nav-mega-quick-item{
  border-color:rgba(8,145,178,.35);
  color:#0891B2;
}
.nav-mega-grid[data-active-color="cyan"] .nav-mega-quick-item:hover{
  background:rgba(8,145,178,.08);
  border-color:#0891B2;
}
.nav-mega-grid[data-active-color="cyan"] .nav-mega-quick-title{
  color:#0891B2;
}
.nav-mega-grid[data-active-color="blue"] .nav-mega-quick-item{
  border-color:rgba(29,78,216,.35);
  color:#1D4ED8;
}
.nav-mega-grid[data-active-color="blue"] .nav-mega-quick-item:hover{
  background:rgba(29,78,216,.08);
  border-color:#1D4ED8;
}
.nav-mega-grid[data-active-color="blue"] .nav-mega-quick-title{
  color:#1D4ED8;
}
.nav-mega-grid[data-active-color="purple"] .nav-mega-quick-item{
  border-color:rgba(124,58,237,.35);
  color:#7C3AED;
}
.nav-mega-grid[data-active-color="purple"] .nav-mega-quick-item:hover{
  background:rgba(124,58,237,.08);
  border-color:#7C3AED;
}
.nav-mega-grid[data-active-color="purple"] .nav-mega-quick-title{
  color:#7C3AED;
}
.nav-mega-grid[data-active-color="green"] .nav-mega-quick-item{
  border-color:rgba(5,150,105,.35);
  color:#059669;
}
.nav-mega-grid[data-active-color="green"] .nav-mega-quick-item:hover{
  background:rgba(5,150,105,.08);
  border-color:#059669;
}
.nav-mega-grid[data-active-color="green"] .nav-mega-quick-title{
  color:#059669;
}
.nav-mega-grid[data-active-color="orange"] .nav-mega-quick-item{
  border-color:rgba(245,158,11,.35);
  color:#D97706;
}
.nav-mega-grid[data-active-color="orange"] .nav-mega-quick-item:hover{
  background:rgba(245,158,11,.08);
  border-color:#D97706;
}
.nav-mega-grid[data-active-color="orange"] .nav-mega-quick-title{
  color:#D97706;
}

.nav-mega-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:0;
}
.nav-mega-left{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav-mega-right{
  background:linear-gradient(135deg,#FEF2F2,#EFF6FF);
  padding:20px;
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
}
.nav-mega-title{
  font-family:'Sora',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:4px;
}
.nav-mega-item{
  display:flex;
  align-items:center !important;
  gap:12px;
  padding:12px;
  border-radius:12px;
  cursor:pointer;
  transition:all .18s;
  border:1.5px solid transparent;
}
.nav-mega-item:hover{
  background:var(--bg);
  border-color:var(--border);
  transform:translateX(4px);
}
.nav-mega-icon{
  width:40px;
  height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
  background:#fff;
  border:1.5px solid var(--border);
  line-height:1;
}
.nav-mega-item:hover .nav-mega-icon{
  transform:scale(1.1);
  border-color:var(--r);
}
.nav-mega-text{flex:1;min-width:0}
.nav-mega-name{
  font-family:'Sora',sans-serif;
  font-size:.85rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
  margin-bottom:2px;
}
.nav-mega-desc{
  font-size:.68rem;
  color:var(--muted);
  line-height:1.5;
  font-weight:300;
}
.nav-mega-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:20px;
  font-size:.58rem;
  font-weight:700;
  margin-top:4px;
}
.nav-mega-tag.hot{background:#FEE2E2;color:var(--r);border:1px solid rgba(220,38,38,.15)}
.nav-mega-tag.popular{background:#ECFDF5;color:var(--green);border:1px solid rgba(5,150,105,.15)}
.nav-mega-tag.new{background:#EFF6FF;color:var(--b2);border:1px solid rgba(29,78,216,.15)}

/* Right side - CTA & Quick Links */
.nav-mega-cta{transition:all .2s ease;
  background:linear-gradient(135deg,var(--r),var(--r2));
  border-radius:14px;
  padding:16px;
  color:#fff;
  text-align:center;
}
.nav-mega-cta-title{
  font-family:'Sora',sans-serif;
  font-size:0.95rem;
  font-weight:800;
  margin-bottom:5px;
  line-height:1.2;
}
.nav-mega-cta-desc{
  font-size:.68rem;
  color:rgba(255,255,255,.8);
  line-height:1.4;
  margin-bottom:10px;
  font-weight:300;
}
.nav-mega-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 18px;
  background:#fff;
  color:var(--r);
  border:none;
  border-radius:8px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  text-decoration:none;
}
.nav-mega-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}

.nav-mega-quick{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav-mega-quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.nav-mega-quick-title{
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:4px;
}
.nav-mega-quick-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:8px;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:all .15s;
  background:#fff;
  border:1.5px solid var(--border);
  line-height:1.3;
  white-space:nowrap;
}
.nav-mega-quick-item:hover{
  border-color:var(--r);
  color:var(--r);
  background:var(--r3);
}

/* Mobile Mega Menu */
.mob-mega-section{
  padding:0 5% 16px;
  border-bottom:1px solid var(--border);
}
.mob-mega-title{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
  padding:12px 0 8px;
}
.mob-mega-item{
  display:flex;
  align-items:center !important;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.mob-mega-item:last-child{border:none}
.mob-mega-icon{
  width:36px;
  height:36px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  background:var(--bg);
  flex-shrink:0;
  line-height:1;
}
.mob-mega-text{flex:1}
.mob-mega-name{
  font-size:.85rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
}
.mob-mega-desc{
  font-size:.65rem;
  color:var(--muted);
  margin-top:1px;
}
.mob-mega-cta{
  margin:16px 5% 0;
  padding:16px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:14px;
  color:var(--ink);
  text-align:center;
}
.mob-mega-cta-title{font-family:'Sora',sans-serif;font-size:.95rem;font-weight:800;margin-bottom:6px;color:var(--ink)}
.mob-mega-cta-desc{font-size:.72rem;color:var(--muted);margin-bottom:12px;line-height:1.5}
.mob-mega-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 18px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:all .2s ease;
  box-shadow:0 4px 16px rgba(37,211,102,.35);
}
.mob-mega-cta-btn:hover{
  background:linear-gradient(135deg,#128C7E,#25D366);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,211,102,.45);
}

/* Responsive Mega Menu */
@media(max-width:800px){
  .nav-mega-wrap:hover .nav-mega{display:none}
}

/* ══ WHATSAPP BUTTON ANIMATION ══ */

  50%{box-shadow:0 4px 20px rgba(37,211,102,.45),0 0 0 8px rgba(37,211,102,0)}


  25%{transform:translateY(-2px)}
  75%{transform:translateY(1px)}

@keyframes waShine{
  0%{transform:translateX(-100%) rotate(25deg)}
  100%{transform:translateX(200%) rotate(25deg)}
}

.btn-cta[href*="wa.me"]{
  position:relative;
  overflow:hidden;
  animation:waPulse 2.5s ease-in-out infinite, waBounce 3s ease-in-out infinite;
  transition:all .3s ease;
}
.btn-cta[href*="wa.me"]::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%) rotate(25deg);
  animation:waShine 4s ease-in-out infinite;
  animation-delay:1s;
  pointer-events:none;
}
.btn-cta[href*="wa.me"]:hover{
  animation:waPulse 1.5s ease-in-out infinite, waBounce 2s ease-in-out infinite;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 24px rgba(37,211,102,.5),0 0 0 4px rgba(37,211,102,.15);
}

/* Mobile menu WhatsApp button animation */
.mob-btn-p[href*="wa.me"]{
  position:relative;
  overflow:hidden;
  animation:waPulse 2.5s ease-in-out infinite;
  transition:all .3s ease;
}
.mob-btn-p[href*="wa.me"]::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%) rotate(25deg);
  animation:waShine 4s ease-in-out infinite;
  animation-delay:1s;
  pointer-events:none;
}
.mob-btn-p[href*="wa.me"]:hover{
  animation:waPulse 1.5s ease-in-out infinite;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,211,102,.5),0 0 0 4px rgba(37,211,102,.15);
}


/* Reduced motion support */
@media(prefers-reduced-motion:reduce){
  .btn-cta[href*="wa.me"],.mob-btn-p[href*="wa.me"],
  .btn-cta[href*="wa.me"]::before,.mob-btn-p[href*="wa.me"]::before{
    display:none;
  }
}

/* ══ NAV ══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:all .3s}
.nav.scrolled{box-shadow:var(--sh)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 5%;height:72px;display:flex;align-items:center;gap:12px}
.nav-logo{display:flex;align-items:center;flex-shrink:0;cursor:pointer}
.nav-logo-box{width:174px;height:56px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo-box img{width:100%;height:100%;object-fit:contain;display:block}
.nav-links{display:flex;flex:1;justify-content:center;gap:2px;list-style:none;align-items:center}
.nav-links li{display:flex;align-items:center}
.nav-links a{font-size:.82rem;font-weight:500;color:var(--muted);padding:7px 12px;border-radius:7px;transition:all .15s;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1;text-decoration:none;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--ink);background:var(--bg2);font-weight:600}
/* dropdown */
.nav-dd-wrap{position:relative}
.nav-dd-wrap>a::after{content:'▾';font-size:.55rem;margin-left:2px;opacity:.5;transition:transform .2s;display:inline-flex;align-items:center;line-height:1;position:relative;top:1px}
.nav-dd-wrap:hover>a::after{transform:rotate(180deg)}
.nav-dd{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:14px;padding:7px;min-width:220px;box-shadow:var(--sh2);z-index:800}
.nav-dd-wrap:hover .nav-dd{display:flex;flex-direction:column}
.nav-ddi{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:.81rem;font-weight:500;color:var(--muted);cursor:pointer;border-radius:8px;transition:all .14s;white-space:nowrap}
.nav-ddi:hover{background:var(--bg);color:var(--ink);font-weight:600}
.nav-ddi span{font-size:.95rem}
.nav-right{display:flex;gap:7px;flex-shrink:0}
.btn-ghost{padding:8px 16px;border:1.5px solid var(--border2);border-radius:8px;font-size:.79rem;font-weight:600;color:var(--ink);background:transparent;transition:all .15s}
.btn-ghost:hover{border-color:var(--ink)}
.btn-cta{padding:9px 18px;background:var(--r);color:#fff;border:none;border-radius:8px;font-size:.8rem;font-weight:700;transition:all .2s;white-space:nowrap}
.btn-cta:hover{background:var(--r2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(220,38,38,.35)}
.ham{display:none;flex-direction:column;gap:5px;border:none;background:none;padding:4px;cursor:pointer}
.ham span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s}
.mob-menu{display:none;position:fixed;inset:0;background:#fff;z-index:490;flex-direction:column;padding-top:0;overflow-y:auto;padding-bottom:80px}
.mob-menu.open{display:flex}
.mob-menu ul{list-style:none;padding:0 5% 20px}
.mob-menu ul li a{display:flex;align-items:center !important;gap:10px;padding:14px 0;font-size:1rem;font-weight:500;border-bottom:1px solid var(--border);cursor:pointer;color:var(--ink);line-height:1}
.mob-menu ul li a .nav-icon{width:18px;height:18px;display:inline-flex !important;align-items:center;justify-content:center;flex-shrink:0 !important;margin:0 !important;padding:0 !important;vertical-align:unset !important;opacity:0.75;transition:all .15s ease;position:relative;top:0}
.nav-icon svg{width:100% !important;height:100% !important;display:block;stroke-linecap:round;stroke-linejoin:round}
.mob-menu-btns{padding:0 5% 80px;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.mob-btn-p{width:100%;padding:14px;background:var(--r);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:700;cursor:pointer}
.mob-btn-g{width:100%;padding:13px;background:transparent;color:var(--ink);border:1.5px solid var(--border2);border-radius:10px;font-size:.93rem;font-weight:600;cursor:pointer}

/* ══ UTILS ══ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 5%}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:50px;font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.chip.red{background:var(--r3);color:var(--r);border:1px solid rgba(220,38,38,.2)}
.chip.blue{background:var(--b3);color:var(--b2);border:1px solid rgba(29,78,216,.2)}
.chip.gold{background:var(--gold2);color:#B45309;border:1px solid rgba(245,158,11,.25)}
.chip.green{background:var(--green2);color:var(--green);border:1px solid rgba(5,150,105,.2)}
.chip-dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pls 1.8s ease infinite;flex-shrink:0}
@keyframes pls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
.sec-label{font-size:.67rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--r);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.sec-label::before{content:'';width:18px;height:2px;background:var(--r);border-radius:2px}
.h1{font-family:'Sora',sans-serif;font-size:clamp(2.2rem,4.5vw,4rem);font-weight:800;color:var(--ink);line-height:1.08;letter-spacing:-.03em}
.h2{font-family:'Sora',sans-serif;font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:-.025em}
.h3{font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:700;color:var(--ink)}
.sub{font-size:.92rem;color:var(--muted);line-height:1.78;font-weight:300}
.btn-r{display:inline-flex;align-items:center;gap:7px;padding:13px 24px;background:var(--r);color:#fff;border:none;border-radius:10px;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .22s}
.btn-r:hover{background:var(--r2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(220,38,38,.38)}
.btn-b{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;background:var(--b);color:#fff;border:none;border-radius:10px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-b:hover{background:var(--b2);transform:translateY(-1px)}
.btn-o{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;background:transparent;color:var(--ink);border:1.5px solid var(--border2);border-radius:10px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .18s}
.btn-o:hover{border-color:var(--ink);background:var(--bg)}

/* ══ REVEAL ══ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}.rv.on{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-28px);transition:opacity .6s ease,transform .6s ease}
.rv-l.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(28px);transition:opacity .6s ease,transform .6s ease}
.rv-r.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.95);transition:opacity .5s ease,transform .5s ease}
.rv-s.in{opacity:1;transform:scale(1)}

/* ══ WHATSAPP BUTTON ANIMATION ══ */

  50%{box-shadow:0 4px 20px rgba(37,211,102,.45),0 0 0 8px rgba(37,211,102,0)}


  25%{transform:translateY(-2px)}
  75%{transform:translateY(1px)}

@keyframes waShine{
  0%{transform:translateX(-100%) rotate(25deg)}
  100%{transform:translateX(200%) rotate(25deg)}
}

.btn-cta[href*="wa.me"]{
  position:relative;
  overflow:hidden;
  animation:waPulse 2.5s ease-in-out infinite, waBounce 3s ease-in-out infinite;
  transition:all .3s ease;
}
.btn-cta[href*="wa.me"]::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%) rotate(25deg);
  animation:waShine 4s ease-in-out infinite;
  animation-delay:1s;
  pointer-events:none;
}
.btn-cta[href*="wa.me"]:hover{
  animation:waPulse 1.5s ease-in-out infinite, waBounce 2s ease-in-out infinite;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 24px rgba(37,211,102,.5),0 0 0 4px rgba(37,211,102,.15);
}

/* Mobile menu WhatsApp button animation */
.mob-btn-p[href*="wa.me"]{
  position:relative;
  overflow:hidden;
  animation:waPulse 2.5s ease-in-out infinite;
  transition:all .3s ease;
}
.mob-btn-p[href*="wa.me"]::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%) rotate(25deg);
  animation:waShine 4s ease-in-out infinite;
  animation-delay:1s;
  pointer-events:none;
}
.mob-btn-p[href*="wa.me"]:hover{
  animation:waPulse 1.5s ease-in-out infinite;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,211,102,.5),0 0 0 4px rgba(37,211,102,.15);
}


/* Reduced motion support */
@media(prefers-reduced-motion:reduce){
  .btn-cta[href*="wa.me"],.mob-btn-p[href*="wa.me"],
  .btn-cta[href*="wa.me"]::before,.mob-btn-p[href*="wa.me"]::before{
    display:none;
  }
}

/* ══ NAV ══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:all .3s}
.nav.scrolled{box-shadow:var(--sh)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 5%;height:72px;display:flex;align-items:center;gap:12px}
.nav-logo{display:flex;align-items:center;flex-shrink:0;cursor:pointer}

.nav-logo-box img{width:100%;height:100%;object-fit:contain;display:block}
.nav-links{display:flex;flex:1;justify-content:center;gap:2px;list-style:none;align-items:center}
.nav-links li{display:flex;align-items:center}
.nav-links a{font-size:.82rem;font-weight:500;color:var(--muted);padding:7px 12px;border-radius:7px;transition:all .15s;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1;text-decoration:none;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--ink);background:var(--bg2);font-weight:600}
/* dropdown */
.nav-dd-wrap{position:relative}
.nav-dd-wrap>a::after{content:'▾';font-size:.55rem;margin-left:2px;opacity:.5;transition:transform .2s;display:inline-flex;align-items:center;line-height:1;position:relative;top:1px}
.nav-dd-wrap:hover>a::after{transform:rotate(180deg)}
.nav-dd{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:14px;padding:7px;min-width:220px;box-shadow:var(--sh2);z-index:800}
.nav-dd-wrap:hover .nav-dd{display:flex;flex-direction:column}
.nav-ddi{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:.81rem;font-weight:500;color:var(--muted);cursor:pointer;border-radius:8px;transition:all .14s;white-space:nowrap}
.nav-ddi:hover{background:var(--bg);color:var(--ink);font-weight:600}
.nav-ddi span{font-size:.95rem}
.nav-right{display:flex;gap:7px;flex-shrink:0}
.btn-ghost{padding:8px 16px;border:1.5px solid var(--border2);border-radius:8px;font-size:.79rem;font-weight:600;color:var(--ink);background:transparent;transition:all .15s}
.btn-ghost:hover{border-color:var(--ink)}
.btn-cta{padding:9px 18px;background:var(--r);color:#fff;border:none;border-radius:8px;font-size:.8rem;font-weight:700;transition:all .2s;white-space:nowrap}
.btn-cta:hover{background:var(--r2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(220,38,38,.35)}
.ham{display:none;flex-direction:column;gap:5px;border:none;background:none;padding:4px;cursor:pointer}
.ham span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s}
.mob-menu{display:none;position:fixed;inset:0;background:#fff;z-index:490;flex-direction:column;padding-top:0;overflow-y:auto;padding-bottom:80px}
.mob-menu.open{display:flex}
.mob-menu ul{list-style:none;padding:0 5% 20px}
.mob-menu ul li a{display:flex;align-items:center !important;gap:10px;padding:14px 0;font-size:1rem;font-weight:500;border-bottom:1px solid var(--border);cursor:pointer;color:var(--ink);line-height:1}
.mob-menu ul li a .nav-icon{width:18px;height:18px;display:inline-flex !important;align-items:center;justify-content:center;flex-shrink:0 !important;margin:0 !important;padding:0 !important;vertical-align:unset !important;opacity:0.75;transition:all .15s ease;position:relative;top:0}
.nav-icon svg{width:100% !important;height:100% !important;display:block;stroke-linecap:round;stroke-linejoin:round}
.mob-menu-btns{padding:0 5% 80px;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.mob-btn-p{width:100%;padding:14px;background:var(--r);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:700;cursor:pointer}
.mob-btn-g{width:100%;padding:13px;background:transparent;color:var(--ink);border:1.5px solid var(--border2);border-radius:10px;font-size:.93rem;font-weight:600;cursor:pointer}

/* ══ UTILS ══ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 5%}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:50px;font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.chip.red{background:var(--r3);color:var(--r);border:1px solid rgba(220,38,38,.2)}
.chip.blue{background:var(--b3);color:var(--b2);border:1px solid rgba(29,78,216,.2)}
.chip.gold{background:var(--gold2);color:#B45309;border:1px solid rgba(245,158,11,.25)}
.chip.green{background:var(--green2);color:var(--green);border:1px solid rgba(5,150,105,.2)}
.chip-dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pls 1.8s ease infinite;flex-shrink:0}
@keyframes pls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
.sec-label{font-size:.67rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--r);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.sec-label::before{content:'';width:18px;height:2px;background:var(--r);border-radius:2px}
.h1{font-family:'Sora',sans-serif;font-size:clamp(2.2rem,4.5vw,4rem);font-weight:800;color:var(--ink);line-height:1.08;letter-spacing:-.03em}
.h2{font-family:'Sora',sans-serif;font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:-.025em}
.h3{font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:700;color:var(--ink)}
.sub{font-size:.92rem;color:var(--muted);line-height:1.78;font-weight:300}
.btn-r{display:inline-flex;align-items:center;gap:7px;padding:13px 24px;background:var(--r);color:#fff;border:none;border-radius:10px;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .22s}
.btn-r:hover{background:var(--r2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(220,38,38,.38)}
.btn-b{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;background:var(--b);color:#fff;border:none;border-radius:10px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-b:hover{background:var(--b2);transform:translateY(-1px)}
.btn-o{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;background:transparent;color:var(--ink);border:1.5px solid var(--border2);border-radius:10px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .18s}
.btn-o:hover{border-color:var(--ink);background:var(--bg)}

/* ══ REVEAL ══ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}.rv.on{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-28px);transition:opacity .6s ease,transform .6s ease}
.rv-l.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(28px);transition:opacity .6s ease,transform .6s ease}
.rv-r.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.95);transition:opacity .5s ease,transform .5s ease}
.rv-s.in{opacity:1;transform:scale(1)}

/* Hero grid background */
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:.4}

@keyframes hGridPulse{0%,100%{opacity:.4}50%{opacity:.18}}

/* ── HERO BACKGROUND ANIMATION ── */
.hero-blob{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.hero-blob-1{width:700px;height:700px;top:-180px;right:-120px;background:radial-gradient(circle at 40% 40%,rgba(29,78,216,.13),transparent 70%);filter:blur(80px);animation:hb1 14s ease-in-out infinite}
.hero-blob-2{width:560px;height:560px;bottom:-140px;left:-120px;background:radial-gradient(circle at 60% 60%,rgba(220,38,38,.10),transparent 68%);filter:blur(72px);animation:hb2 18s ease-in-out infinite}
.hero-blob-3{width:400px;height:400px;top:22%;left:34%;background:radial-gradient(circle at 50% 50%,rgba(245,158,11,.07),transparent 65%);filter:blur(64px);animation:hb3 22s ease-in-out infinite}
.hero-shine{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(108deg,transparent 28%,rgba(255,255,255,.05) 50%,transparent 72%);will-change:transform;animation:hShine 10s linear infinite}

/* ── HERO BACKGROUND VIDEO ── */
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero-video-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(248,250,255,0.78)}

@keyframes hb1{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(-80px,60px) scale(1.14)}65%{transform:translate(50px,-70px) scale(.91)}}
@keyframes hb2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(70px,-55px) scale(1.19)}75%{transform:translate(-50px,45px) scale(.86)}}
@keyframes hb3{0%,100%{transform:translate(0,0) scale(1);opacity:.5}50%{transform:translate(-60px,-40px) scale(1.28);opacity:.95}}
@keyframes hShine{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}

@media(max-width:768px){.hero-blob{filter:blur(48px)}.hero-blob-3{display:none}
}
@media(prefers-reduced-motion:reduce){.hero-blob,.hero-shine,.hero-grid-bg,.sec-orb{animation:none}}

/* ════════════════════════════════════════════════════════════
   NEW HERO CARD — Product Programme Card (Replaces Old Visual)
   Desktop-Responsive, Mobile-Optimized, PWA-Ready
════════════════════════════════════════════════════════════ */

/* ── HERO CARD ANIMATIONS ── */
@keyframes hvIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hvRowIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}

/* ── HERO CARD WRAPPER ── */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:480px}
.hv-wrap{position:relative;width:100%;max-width:420px;flex-shrink:0}

/* ── MAIN CARD ── */
.hv-card{
  background:#fff;
  border-radius:22px;
  border:1.5px solid rgba(210,35,35,.18);
  box-shadow:0 32px 80px rgba(15,25,41,.14),0 4px 16px rgba(15,25,41,.06),0 0 0 1px rgba(210,35,35,.06);
  overflow:hidden;
  animation:hvIn .7s cubic-bezier(0.22,1,0.36,1) .15s both;
  transition:border-color .32s ease,box-shadow .32s ease;
}

/* ── CARD HEADER ── */
.hv-head{
  background:linear-gradient(138deg,#7f1414 0%,#d22323 55%,#e84040 100%);
  padding:20px 22px 18px;
  position:relative;
  overflow:hidden;
  transition:background .32s ease;
}
.hv-head::before{
  content:'';position:absolute;
  top:-48px;right:-22px;
  width:140px;height:140px;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  pointer-events:none;
}
.hv-head::after{
  content:'';position:absolute;
  bottom:-60px;left:-20px;
  width:120px;height:120px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  pointer-events:none;
}
.hv-htop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;position:relative;z-index:1}
.hv-hlabel{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hv-hlive{display:flex;align-items:center;gap:5px;font-size:.6rem;font-weight:600;color:rgba(255,255,255,.92);background:rgba(255,255,255,.16);padding:3px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.22)}
.hv-hlive-dot{width:5px;height:5px;border-radius:50%;background:#4ADE80;animation:pls 1.5s ease infinite;flex-shrink:0}
.hv-hrank{font-family:'Sora',sans-serif;font-size:1.18rem;font-weight:800;color:#fff;position:relative;z-index:1;line-height:1.2}

/* ── COURSE ROWS ── */
.hv-body{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.hv-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 11px;
  background:var(--bg);
  border-radius:10px;
  border:1px solid var(--border);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
  animation:hvRowIn .5s cubic-bezier(0.22,1,0.36,1) both;
}
.hv-row:nth-child(1){animation-delay:.32s}
.hv-row:nth-child(2){animation-delay:.42s}
.hv-row:nth-child(3){animation-delay:.52s}
.hv-row:nth-child(4){animation-delay:.62s}
.hv-row:nth-child(5){animation-delay:.72s}
.hv-row:hover{transform:translateX(4px)}

/* per-row hover colours */
.hv-body .hv-row:nth-child(1):hover{background:rgba(210,35,35,.08);border-color:rgba(210,35,35,.32);box-shadow:4px 4px 18px rgba(210,35,35,.14)}
.hv-body .hv-row:nth-child(2):hover{background:rgba(12,125,155,.08);border-color:rgba(12,125,155,.32);box-shadow:4px 4px 18px rgba(12,125,155,.14)}
.hv-body .hv-row:nth-child(3):hover{background:rgba(29,70,194,.08);border-color:rgba(29,70,194,.32);box-shadow:4px 4px 18px rgba(29,70,194,.14)}
.hv-body .hv-row:nth-child(4):hover{background:rgba(121,55,233,.08);border-color:rgba(121,55,233,.32);box-shadow:4px 4px 18px rgba(121,55,233,.14)}
.hv-body .hv-row:nth-child(5):hover{background:rgba(5,145,102,.08);border-color:rgba(5,145,102,.32);box-shadow:4px 4px 18px rgba(5,145,102,.14)}

/* whole-card header shift on row hover */
.hv-card:has(.hv-body .hv-row:nth-child(1):hover){border-color:rgba(210,35,35,.35)!important;box-shadow:0 32px 80px rgba(210,35,35,.18),0 8px 24px rgba(210,35,35,.10),0 0 0 1px rgba(210,35,35,.08)!important}
.hv-card:has(.hv-body .hv-row:nth-child(1):hover) .hv-head{background:linear-gradient(138deg,#7f1414 0%,#d22323 55%,#e84040 100%)}
.hv-card:has(.hv-body .hv-row:nth-child(2):hover){border-color:rgba(12,125,155,.35)!important;box-shadow:0 32px 80px rgba(12,125,155,.18),0 8px 24px rgba(12,125,155,.10),0 0 0 1px rgba(12,125,155,.08)!important}
.hv-card:has(.hv-body .hv-row:nth-child(2):hover) .hv-head{background:linear-gradient(138deg,#064d60 0%,#0c7d9b 55%,#1292b8 100%)}
.hv-card:has(.hv-body .hv-row:nth-child(3):hover){border-color:rgba(29,70,194,.35)!important;box-shadow:0 32px 80px rgba(29,70,194,.18),0 8px 24px rgba(29,70,194,.10),0 0 0 1px rgba(29,70,194,.08)!important}
.hv-card:has(.hv-body .hv-row:nth-child(3):hover) .hv-head{background:linear-gradient(138deg,#112678 0%,#1d46c2 55%,#2a57d4 100%)}
.hv-card:has(.hv-body .hv-row:nth-child(4):hover){border-color:rgba(121,55,233,.35)!important;box-shadow:0 32px 80px rgba(121,55,233,.18),0 8px 24px rgba(121,55,233,.10),0 0 0 1px rgba(121,55,233,.08)!important}
.hv-card:has(.hv-body .hv-row:nth-child(4):hover) .hv-head{background:linear-gradient(138deg,#3d1a96 0%,#7937e9 55%,#9050f5 100%)}
.hv-card:has(.hv-body .hv-row:nth-child(5):hover){border-color:rgba(5,145,102,.35)!important;box-shadow:0 32px 80px rgba(5,145,102,.18),0 8px 24px rgba(5,145,102,.10),0 0 0 1px rgba(5,145,102,.08)!important}
.hv-card:has(.hv-body .hv-row:nth-child(5):hover) .hv-head{background:linear-gradient(138deg,#023d2c 0%,#059166 55%,#07ad7c 100%)}

.hv-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;margin-top:1px}
.hv-info{flex:1;min-width:0}
.hv-name{font-size:.83rem;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-meta{font-size:.63rem;color:var(--muted);margin-bottom:7px}
.hv-barrow{display:flex;align-items:center;gap:7px}
.hv-bar{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.hv-fill{height:100%;border-radius:2px;width:0;transition:width 1.5s cubic-bezier(0.4,0,0.2,1)}
.hv-pct{font-size:.6rem;font-weight:700;flex-shrink:0;min-width:26px;text-align:right}
.hv-chbadge{font-size:.56rem;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;align-self:flex-start;margin-top:1px}
.hv-chbadge.h{background:var(--green2);color:var(--green)}
.hv-chbadge.m{background:#F5F3FF;color:#7C3AED}

/* ── CARD FOOTER ── */
.hv-foot{padding:10px 14px 14px;border-top:1px solid var(--border);background:#fafcff;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hv-ftxt{font-size:.73rem;color:var(--muted);font-weight:300}
.hv-ftxt strong{color:var(--r);font-weight:700}
.hv-fbtn{display:inline-flex;align-items:center;gap:5px;font-size:.73rem;font-weight:700;color:var(--r);cursor:pointer;transition:gap .14s;white-space:nowrap;flex-shrink:0}
.hv-fbtn:hover{gap:9px}
.hv-fbtn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5}

/* ── FLOATING STAT BADGES ── */
.hv-floatbadge{
  position:absolute;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 13px;
  box-shadow:0 8px 28px rgba(15,25,41,.11),0 2px 8px rgba(15,25,41,.06),inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;align-items:center;gap:9px;
  pointer-events:none;z-index:3;
}
.hv-fbico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0}
.hv-fbval{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:800;color:var(--ink);line-height:1}
.hv-fbval span{color:var(--r)}
.hv-fblbl{font-size:.58rem;color:var(--muted);margin-top:1px}
.hv-fb1{top:20px;left:-60px;animation:float 4.2s ease-in-out infinite}
.hv-fb2{top:20px;right:-60px;animation:float 4.2s ease-in-out infinite 1.6s}

/* ── LIVE COUNSELLOR CHIP ── */
.hv-livechip{
  position:absolute;bottom:28px;right:-28px;
  background:var(--ink);
  border-radius:12px;padding:10px 14px;
  display:flex;align-items:center;gap:9px;
  box-shadow:0 8px 24px rgba(15,25,41,.26),0 2px 8px rgba(15,25,41,.16);
  animation:float 4.2s ease-in-out infinite 2.8s;
  pointer-events:none;z-index:3;
}
.hv-lcdot{width:7px;height:7px;border-radius:50%;background:#4ADE80;animation:pls 1.5s ease infinite;flex-shrink:0;box-shadow:0 0 0 2px rgba(74,222,128,.2)}
.hv-lcname{font-size:.73rem;font-weight:700;color:#fff;line-height:1.2}
.hv-lcsub{font-size:.58rem;color:rgba(255,255,255,.48);margin-top:1px}

/* ── HERO CARD RESPONSIVE ── */
@media(max-width:1060px){
  .hero-visual{min-height:auto;padding:20px 0}
  .hv-wrap{max-width:380px}
}
@media(max-width:768px){
  .hero-visual{padding:0;margin-top:20px}
  .hv-wrap{max-width:100%;width:100%}
  .hv-card{border-radius:18px}
  .hv-head{padding:16px 18px 14px}
  .hv-hrank{font-size:1.05rem}
  .hv-body{padding:8px 10px;gap:5px}
  .hv-row{padding:8px 10px;gap:8px}
  .hv-ico{width:32px;height:32px;font-size:.85rem}
  .hv-name{font-size:.78rem}
  .hv-meta{font-size:.6rem;margin-bottom:5px}
  .hv-chbadge{font-size:.52rem;padding:2px 6px}
  .hv-foot{padding:8px 12px 10px}
  .hv-ftxt{font-size:.68rem}
  .hv-fbtn{font-size:.68rem}
  .hv-floatbadge{padding:8px 10px;border-radius:12px}
  .hv-fbico{width:28px;height:28px;font-size:.78rem}
  .hv-fbval{font-size:.95rem}
  .hv-fblbl{font-size:.52rem}
  .hv-fb1{top:-30px;left:-10px}
  .hv-fb2{top:-30px;right:-10px}
  .hv-livechip{bottom:16px;right:-12px;padding:8px 12px;border-radius:10px}
  .hv-lcname{font-size:.68rem}
  .hv-lcsub{font-size:.52rem}
}
@media(max-width:480px){
  .hv-wrap{max-width:100%}
  .hv-card{border-radius:16px;border-width:1px}
  .hv-head{padding:14px 16px 12px}
  .hv-hlabel{font-size:.55rem}
  .hv-hlive{font-size:.55rem;padding:2px 6px}
  .hv-hrank{font-size:.95rem}
  .hv-body{padding:6px 8px;gap:4px}
  .hv-row{padding:7px 8px;gap:6px;border-radius:8px}
  .hv-ico{width:28px;height:28px;font-size:.78rem}
  .hv-name{font-size:.74rem}
  .hv-meta{font-size:.56rem;margin-bottom:4px}
  .hv-barrow{gap:5px}
  .hv-bar{height:2.5px}
  .hv-pct{font-size:.55rem;min-width:22px}
  .hv-chbadge{font-size:.48rem;padding:2px 5px;margin-top:0}
  .hv-foot{padding:7px 10px 10px}
  .hv-ftxt{font-size:.62rem}
  .hv-fbtn{font-size:.62rem;gap:4px}
  .hv-fbtn svg{width:10px;height:10px}
  .hv-floatbadge{padding:7px 9px;border-radius:10px}
  .hv-fbico{width:24px;height:24px;font-size:.72rem}
  .hv-fbval{font-size:.85rem}
  .hv-fblbl{font-size:.48rem}
  .hv-fb1{top:-24px;left:-6px}
  .hv-fb2{top:-24px;right:-6px}
  .hv-livechip{bottom:12px;right:-8px;padding:7px 10px;border-radius:8px}
  .hv-lcname{font-size:.62rem}
  .hv-lcsub{font-size:.48rem}
  .hv-lcdot{width:6px;height:6px}
}
@media(max-width:360px){
  .hv-row{padding:6px 7px;gap:5px}
  .hv-ico{width:26px;height:26px;font-size:.72rem}
  .hv-name{font-size:.7rem}
  .hv-meta{font-size:.52rem}
  .hv-pct{font-size:.52rem}
  .hv-chbadge{font-size:.45rem;padding:1px 4px}
}

/* ── HERO CARD PWA / TOUCH OPTIMIZATION ── */
@media(hover:none){
  .hv-row:hover{transform:none}
  .hv-row:active{transform:scale(.98)}
}
@supports not (selector(:has(*))){
  /* Fallback for browsers without :has() support */
  .hv-card{border-color:rgba(210,35,35,.18)!important}
}

/* ── ACCESSIBILITY: Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  .hv-card,.hv-row,.hv-floatbadge,.hv-livechip{animation:none}
  .hv-fill{transition:none;width:var(--target-width,0)}
}

/* ── ACCESSIBILITY: High Contrast ── */
@media(prefers-contrast:more){
  .hv-card{border-width:2px}
  .hv-row{border-width:1.5px}
  .hv-name{font-weight:800}
  .hv-hrank{color:#fff}
}

/* ══════════════════════════════
   SECTION 1 — HERO (continued)
══════════════════════════════ */
/* ══════════════════════════════
   SECTION 1 — HERO
══════════════════════════════ */
.hero{min-height:auto;background:#fff;display:flex;align-items:center;padding:8px 0 48px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 80% 50%,#EFF6FF 0%,transparent 60%),radial-gradient(ellipse 40% 60% at 10% 80%,#FEE2E2 0%,transparent 55%)}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:.4;animation:hGridPulse 8s ease-in-out infinite}


.hero-in{max-width:var(--max);margin:0 auto;padding:48px 5%;display:grid;grid-template-columns:1fr 480px;gap:48px;align-items:center;position:relative;z-index:2;width:100%}
/* left */
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.hero-live-badge{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:50px;padding:5px 12px;font-size:.7rem;font-weight:600;color:var(--muted);box-shadow:var(--sh)}
.hero-live-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;animation:pls 1.4s ease infinite;flex-shrink:0;box-shadow:0 0 0 2px rgba(34,197,94,.2)}
.hero-h{font-family:'Sora',sans-serif;font-size:clamp(2.6rem,5vw,4.4rem);font-weight:800;color:var(--ink);line-height:1.05;letter-spacing:-.04em;margin-bottom:20px;transition:opacity .52s cubic-bezier(0.4,0,0.2,1),transform .52s cubic-bezier(0.4,0,0.2,1)}
.hero-h .line-accent{color:var(--r);display:block}
.hero-h .line-stroke{position:relative;display:inline-block;color:var(--ink)}
.hero-h .line-stroke::after{content:'';position:absolute;left:0;bottom:6px;right:0;height:5px;background:linear-gradient(90deg,var(--r),var(--gold));border-radius:3px;transform:rotate(-.5deg)}
/* heading rotation animation states */


/* brand label used in alternate heading */
.hero-brand-word{display:block;font-size:.4em;color:var(--r);letter-spacing:.22em;text-transform:uppercase;font-weight:800;margin-bottom:.32em;line-height:1;opacity:.9}
.hero-sub{font-size:.97rem;color:var(--muted);line-height:1.8;max-width:460px;margin-bottom:32px;font-weight:300}
/* rank search */
.rank-search{background:#fff;border:2px solid var(--border);border-radius:14px;padding:6px 6px 6px 18px;display:flex;align-items:center;gap:8px;box-shadow:var(--sh2);margin-bottom:28px;transition:border .2s}
.rank-search:focus-within{border-color:var(--r)}
.rank-search-ico{font-size:1.1rem;flex-shrink:0}
.rank-search select#programmeSelect{border:none;background:transparent;font-size:.85rem;color:var(--ink);font-weight:600;padding:8px 10px;border-right:1.5px solid var(--border);outline:none;cursor:pointer;flex-shrink:0}
.rank-search input{flex:1;border:none;background:none;font-size:.92rem;color:var(--ink);outline:none;padding:6px 0;min-width:0}
.rank-search input::placeholder{color:var(--muted2)}
.rank-search-btn{background:var(--r);color:#fff;border:none;border-radius:9px;padding:10px 18px;font-size:.84rem;font-weight:700;transition:all .2s;white-space:nowrap}
.rank-search-btn:hover{background:var(--r2)}
.rank-result-preview{background:var(--r3);border:1px solid rgba(220,38,38,.2);border-radius:10px;padding:12px 16px;display:none;align-items:center;gap:10px;margin-bottom:28px;animation:slideDown .3s ease}
.rank-result-preview.show{display:flex}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.rp-ico{font-size:1.3rem;flex-shrink:0}
.rp-text{font-size:.82rem;color:var(--r2);font-weight:600}
.rp-sub{font-size:.73rem;color:var(--r);font-weight:400}
.hero-trust{display:flex;gap:20px;flex-wrap:wrap}
.ht-item{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);font-weight:400}
.ht-ico{width:18px;height:18px;border-radius:5px;background:var(--green2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.62rem}
/* right — visual */
.hero-visual{position:relative;height:480px}
.hero-v-main{position:absolute;inset:0;background:linear-gradient(135deg,#EFF6FF,#F0FDF4);border-radius:24px;overflow:hidden;border:1px solid var(--border)}
.hero-v-main img{width:100%;height:100%;object-fit:cover;opacity:.7}
.hero-v-main::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(15,25,41,.05) 100%)}
/* floating cards */
.hf{position:absolute;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px;padding:12px 16px;box-shadow:var(--sh2);display:flex;align-items:center;gap:10px}
.hf-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.hf-val{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:800;color:var(--ink);line-height:1}
.hf-lbl{font-size:.65rem;color:var(--muted);font-weight:400;margin-top:2px}
.hf1{top:28px;left:-20px;animation:float 4s ease-in-out infinite}
.hf2{bottom:100px;left:-24px;animation:float 4s ease-in-out infinite 1.4s}
.hf3{top:50px;right:-18px;animation:float 4s ease-in-out infinite 2.2s}
.hf4{bottom:30px;right:-10px;animation:float 4s ease-in-out infinite .7s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* mini college cards inside hero visual */
.hero-college-stack{position:absolute;bottom:20px;left:20px;right:20px;display:flex;flex-direction:column;gap:7px}
.hero-c-card{background:rgba(255,255,255,.95);border-radius:10px;padding:10px 13px;display:flex;align-items:center;gap:10px;border:1px solid var(--border);transform:translateX(0);transition:transform .3s}
.hero-c-card.slide-in{animation:slideInCard .5s ease forwards}
@keyframes slideInCard{from{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}
.hcc-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.hcc-name{font-size:.79rem;font-weight:700;color:var(--ink);line-height:1.2}
.hcc-meta{font-size:.65rem;color:var(--muted);margin-top:1px}
.hcc-badge{margin-left:auto;font-size:.58rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.hcc-badge.high{background:var(--green2);color:var(--green)}
.hcc-badge.med{background:var(--gold2);color:#B45309}

/* ══════════════════════════════
   SECTION 2 — PROBLEM STATEMENT
══════════════════════════════ */
.problem-sec{background:#FEF5F5;padding:56px 5%;position:relative;overflow:hidden}
.problem-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 80% at 95% 50%,rgba(220,38,38,.07) 0%,transparent 60%),radial-gradient(ellipse 35% 50% at 5% 15%,rgba(245,158,11,.05) 0%,transparent 55%)}
.problem-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
.problem-left{}
.problem-kicker{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--r);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.problem-kicker::before{content:'';width:18px;height:2px;background:var(--r);border-radius:2px;flex-shrink:0}
.problem-h{font-family:'Sora',sans-serif;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;color:var(--ink);line-height:1.12;letter-spacing:-.03em;margin-bottom:18px}
.problem-h em{font-style:normal;color:var(--r)}
.problem-p{font-size:.88rem;color:var(--muted);line-height:1.8;margin-bottom:28px;font-weight:300}
.problem-stats{display:flex;gap:28px;flex-wrap:wrap}
.ps-item{border-left:2px solid rgba(220,38,38,.35);padding-left:14px}
.ps-num{font-family:'Sora',sans-serif;font-size:1.8rem;font-weight:800;color:var(--ink);line-height:1}
.ps-num em{font-style:normal;color:var(--r)}
.ps-lbl{font-size:.7rem;color:var(--muted);margin-top:3px;font-weight:300}
.problem-right{}
.compare-cards{display:flex;flex-direction:column;gap:12px}
.cc-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:18px 20px;transition:all .22s;box-shadow:0 2px 10px rgba(15,25,41,.05)}
.cc-card:hover{box-shadow:0 8px 28px rgba(15,25,41,.1);transform:translateY(-2px)}
.cc-card.bad{border-left:3px solid #EF4444;background:rgba(239,68,68,.02)}
.cc-card.bad:hover{background:rgba(239,68,68,.04)}
.cc-card.good{border-left:3px solid #22C55E;background:rgba(34,197,94,.04);border-color:rgba(34,197,94,.25)}
.cc-card.good:hover{background:rgba(34,197,94,.07)}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-label{font-size:.80rem;font-weight:600;color:var(--ink);flex:1}
.cc-val{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:800}
.cc-val.bad-v{color:#EF4444}
.cc-val.good-v{color:#22C55E}
.cc-desc{font-size:.72rem;color:var(--muted);margin-top:5px;font-weight:300;line-height:1.55}

/* ══════════════════════════════
   SECTION 4 — COURSE SELECTOR
══════════════════════════════ */
.courses-sec{padding:56px 5%;background:var(--bg)}
.courses-in{max-width:var(--max);margin:0 auto}
.courses-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:28px;scrollbar-width:none}
.courses-tabs::-webkit-scrollbar{display:none}
.ct-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:50px;font-size:.83rem;font-weight:600;border:2px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.ct-btn span{font-size:1rem}
.ct-btn:hover{border-color:var(--r);color:var(--r)}
.ct-btn.on{border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.ct-btn.on.nug{background:linear-gradient(135deg,#DC2626,#B91C1C)}
.ct-btn.on.npg{background:linear-gradient(135deg,#0891B2,#0E7490)}
.ct-btn.on.jee{background:linear-gradient(135deg,#1D4ED8,#1E40AF)}
.ct-btn.on.mba{background:linear-gradient(135deg,#7C3AED,#6D28D9)}
.ct-btn.on.pha{background:linear-gradient(135deg,#059669,#047857)}
.course-panel{display:none;animation:fadeSlide .3s ease}
.course-panel.on{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
@keyframes fadeSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cp-left{}
.cp-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:50px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.cp-h{font-family:'Sora',sans-serif;font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:-.025em;margin-bottom:12px}
.cp-p{font-size:.87rem;color:var(--muted);line-height:1.78;margin-bottom:20px;font-weight:300}
.cp-features{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.cp-feat{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--muted)}
.cp-feat-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.65rem;flex-shrink:0;margin-top:.1em}
.cp-feat strong{color:var(--ink);font-weight:600;display:block;margin-bottom:1px;font-size:.86rem}
.cp-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.cpsr{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:13px;text-align:center}
.cpsr-v{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:800;color:var(--ink);line-height:1}
.cpsr-l{font-size:.66rem;color:var(--muted);margin-top:3px;font-weight:300}
.cp-right{}
.cp-info-card{background:#fff;border:1.5px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--sh)}
.cp-ic-head{padding:22px 22px 18px;position:relative;overflow:hidden}
.cp-ic-head::before{content:'';position:absolute;bottom:-30px;right:-30px;width:120px;height:120px;border-radius:50%;opacity:.12}
.cp-ic-title{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;color:#fff;position:relative;z-index:1;margin-bottom:4px}
.cp-ic-sub{font-size:.72rem;color:rgba(255,255,255,.6);position:relative;z-index:1;font-weight:300}
.cp-ic-body{padding:18px 22px}
.cp-ic-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.cp-ic-row:last-child{border:none}
.cp-ic-key{color:var(--muted);font-weight:400}
.cp-ic-val{color:var(--ink);font-weight:700}
.cp-ic-action{display:flex;flex-direction:column;gap:7px;padding:0 22px 20px}

/* ══════════════════════════════
   SECTION 5 — HOW IT WORKS (compact redesign)
══════════════════════════════ */
.process-sec{padding:48px 5% 40px;background:#fff;position:relative}
.process-in{max-width:var(--max);margin:0 auto}
/* header */
.hiw-header{text-align:center;margin-bottom:32px}
.hiw-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--r);margin-bottom:10px}
.hiw-eyebrow::before,.hiw-eyebrow::after{content:'';display:block;width:20px;height:2px;background:var(--r);border-radius:2px}
.hiw-title{font-family:'Sora',sans-serif;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:-.03em;margin-bottom:8px}
.hiw-title em{font-style:normal;color:var(--r)}
.hiw-sub{font-size:.82rem;color:var(--muted);line-height:1.7;max-width:400px;margin:0 auto;font-weight:300}
/* tab strip */
.hiw-tabs{display:flex;border-radius:12px;border:1.5px solid var(--border);overflow:hidden;margin-bottom:16px;background:var(--bg)}
.hiw-tab{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 8px 10px;cursor:pointer;border:none;background:transparent;border-right:1px solid var(--border);transition:background .2s;position:relative;gap:5px}
.hiw-tab:last-child{border-right:none}
.hiw-tab.on{background:var(--r)}
.hiw-tab-num{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:var(--muted);background:#fff;transition:all .2s;flex-shrink:0;font-family:'Sora',sans-serif}
.hiw-tab.done .hiw-tab-num{background:var(--green2);border-color:var(--green);color:var(--green)}
.hiw-tab.on .hiw-tab-num{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);color:#fff}
.hiw-tab-lbl{font-size:.67rem;font-weight:600;color:var(--muted);text-align:center;line-height:1.25;transition:color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.hiw-tab.on .hiw-tab-lbl{color:#fff}
.hiw-tab.done .hiw-tab-lbl{color:var(--green)}
/* progress bar */
.hiw-progress-track{height:3px;background:var(--border);border-radius:2px;margin-bottom:20px;overflow:hidden}
.hiw-progress-fill{height:100%;background:linear-gradient(90deg,var(--r2),var(--r));border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1);width:25%}
/* panels */
@keyframes hiwSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hiw-panel{display:none;background:var(--bg);border:1.5px solid var(--border);border-radius:16px;overflow:hidden;animation:hiwSlide .3s ease}
.hiw-panel.on{display:grid;grid-template-columns:1fr 260px}
.hiw-panel-left{padding:26px 28px 24px}
.hiw-big-num{font-family:'Sora',sans-serif;font-size:3.5rem;font-weight:900;color:rgba(220,38,38,.07);line-height:1;margin-bottom:-12px;letter-spacing:-.04em}
.hiw-step-title{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em}
.hiw-step-desc{font-size:.82rem;color:var(--muted);line-height:1.76;margin-bottom:14px;font-weight:300;max-width:380px}
.hiw-bullets{list-style:none;display:flex;flex-direction:column;gap:7px}
.hiw-bullet{display:flex;align-items:flex-start;gap:8px;font-size:.79rem;color:var(--muted);line-height:1.5}
.hiw-bullet::before{content:'→';color:var(--r);font-weight:700;flex-shrink:0;margin-top:1px}
.hiw-bullet strong{color:var(--ink);font-weight:600}
.hiw-panel-right{background:linear-gradient(160deg,#EFF6FF,#F0FDF4);border-left:1.5px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 18px;gap:10px}
.hiw-icon-big{font-size:2.8rem;margin-bottom:2px}
.hiw-mini-card{background:#fff;border-radius:10px;border:1.5px solid var(--border);padding:11px 14px;width:100%;box-shadow:0 2px 8px rgba(15,25,41,.06)}
.hiw-mc-label{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:4px}
.hiw-mc-val{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.45}
.hiw-mc-red{color:var(--r)}
.hiw-tag{display:inline-flex;align-items:center;background:var(--r3);color:var(--r);border:1px solid rgba(220,38,38,.2);border-radius:20px;font-size:.62rem;font-weight:700;padding:3px 10px}
/* nav row */
.hiw-nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.hiw-nav-btn{padding:8px 20px;border-radius:8px;font-size:.79rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--muted);transition:all .18s}
.hiw-nav-btn:hover:not([disabled]){border-color:var(--ink);color:var(--ink)}
.hiw-nav-btn[disabled]{opacity:.35;cursor:not-allowed}
.hiw-nav-btn.red{background:var(--r);color:#fff;border-color:var(--r)}
.hiw-nav-btn.red:hover{background:var(--r2)}
.hiw-nav-dots{display:flex;gap:5px}
.hiw-dot{width:6px;height:6px;border-radius:50%;background:var(--border);cursor:pointer;transition:all .22s;border:none}
.hiw-dot.on{background:var(--r);width:18px;border-radius:3px}
/* cta strip */
.hiw-cta-strip{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;padding:14px 20px;background:linear-gradient(135deg,var(--r3),#fff8f8);border:1px solid rgba(220,38,38,.15);border-radius:12px;flex-wrap:wrap}
.hiw-cta-text{font-size:.8rem;color:var(--muted);font-weight:300}
.hiw-cta-text strong{color:var(--ink);font-weight:700}
/* mobile */
@media(max-width:640px){
  .process-sec{padding:40px 5% 36px}
  .hiw-tab-lbl{display:none}
  .hiw-tab{padding:12px 6px}
  .hiw-tab-num{width:30px;height:30px;font-size:.72rem}
  .hiw-panel.on{grid-template-columns:1fr}
  .hiw-panel-right{display:none}
  .hiw-panel-left{padding:18px}
  .hiw-big-num{font-size:2.8rem;margin-bottom:-10px}
  .hiw-step-title{font-size:1rem}
  .hiw-step-desc{font-size:.79rem}
  .hiw-bullet{font-size:.76rem}
  .hiw-nav-btn{padding:7px 14px;font-size:.76rem}
  .hiw-cta-strip{flex-direction:column;text-align:center}
}

/* ══════════════════════════════
   SECTION 6 — SUCCESS WALL
══════════════════════════════ */
.success-sec{padding:56px 5%;background:var(--bg)}
.success-in{max-width:var(--max);margin:0 auto}
.success-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:20px;flex-wrap:wrap}
.success-filter{display:flex;gap:6px;flex-wrap:wrap}
.sf-btn{padding:6px 14px;border-radius:20px;font-size:.74rem;font-weight:600;border:1.5px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .14s}
.sf-btn.on,.sf-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ── SUCCESS CAROUSEL ── */
.sw-carousel-outer{position:relative;overflow:hidden}
.sw-track{display:flex;gap:14px;will-change:transform;transition:transform .52s cubic-bezier(0.4,0,0.2,1)}
.sw-track .sw-card{flex:0 0 calc(25% - 10.5px);min-width:0}
.sw-carousel-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.sw-nav-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;color:var(--muted);flex-shrink:0;padding:0}
.sw-nav-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--bg2);transform:scale(1.08)}
.sw-dots{display:flex;gap:5px;align-items:center}
.sw-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);cursor:pointer;transition:all .28s;border:none;padding:0;flex-shrink:0}
.sw-dot.on{width:24px;border-radius:4px;background:var(--r)}
.sw-prog-wrap{height:3px;background:var(--border);border-radius:2px;margin-top:18px;overflow:hidden}
.sw-prog-bar{height:100%;background:linear-gradient(90deg,var(--r),#FB7185);border-radius:2px;width:0}
.sw-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:18px;transition:all .22s;cursor:pointer;position:relative;overflow:hidden}
.sw-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.sw-card.medical::before{background:linear-gradient(90deg,var(--r),#FB7185)}
.sw-card.engineering::before{background:linear-gradient(90deg,var(--b2),#60A5FA)}
.sw-card.mba::before{background:linear-gradient(90deg,#7C3AED,#A78BFA)}
.sw-card.pharmacy::before{background:linear-gradient(90deg,var(--green),#34D399)}
.sw-card:hover{box-shadow:var(--sh2);transform:translateY(-4px)}
.sw-exam-badge{font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:10px}
.sw-name{font-family:'Sora',sans-serif;font-size:.95rem;font-weight:800;color:var(--ink);margin-bottom:2px}
.sw-rank{font-size:.72rem;color:var(--muted);margin-bottom:9px}
.sw-arrow{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ink);font-weight:600;margin-bottom:8px}
.sw-arrow svg{width:16px;height:16px;flex-shrink:0;stroke:var(--green);fill:none;stroke-width:2.5}
.sw-college{font-size:.75rem;color:var(--green);font-weight:600;line-height:1.3}
.sw-cat{font-size:.65rem;color:var(--muted);margin-top:4px}
.sw-quote{font-size:.74rem;color:var(--muted);font-style:italic;line-height:1.55;border-top:1px solid var(--border);padding-top:9px;margin-top:9px;font-weight:300}
.success-cta-row{margin-top:30px;text-align:center}

/* ══════════════════════════════
   SECTION 7 — WHY VIDYAPAATH (light redesign)
══════════════════════════════ */
.vs-sec{padding:56px 5% 48px;background:var(--bg)}
.vs-in{max-width:860px;margin:0 auto}
/* header */
.wy-hd{text-align:center;margin-bottom:36px}
.wy-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--r);margin-bottom:12px}
.wy-eyebrow::before,.wy-eyebrow::after{content:'';display:block;width:18px;height:2px;background:var(--r);border-radius:2px}
.wy-title{font-family:'Sora',sans-serif;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--ink);line-height:1.12;letter-spacing:-.03em;margin-bottom:8px}
.wy-title em{font-style:normal;color:var(--r)}
.wy-sub{font-size:.82rem;color:var(--muted);line-height:1.7;max-width:420px;margin:0 auto;font-weight:300}
/* trust strip */
.wy-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.wy-trust-card{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:16px;text-align:center;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s}
.wy-trust-card:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.wy-trust-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--r);border-radius:0}
.wy-trust-num{font-family:'Sora',sans-serif;font-size:1.7rem;font-weight:900;color:var(--ink);line-height:1}
.wy-trust-num em{font-style:normal;color:var(--r)}
.wy-trust-num sup{font-size:.85rem;color:var(--muted2);font-weight:400}
.wy-trust-lbl{font-size:.65rem;color:var(--muted);margin-top:5px;font-weight:400;line-height:1.45}
/* two-column grid */
.wy-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;align-items:start}
/* column headers */
.wy-col-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:10px;margin-bottom:8px}
.wy-col-head-vp{background:var(--r)}
.wy-col-head-ag{background:#fff;border:1.5px solid var(--border)}
.wy-col-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;flex-shrink:0}
.wy-col-icon-vp{background:rgba(255,255,255,.2);color:#fff}
.wy-col-icon-ag{background:var(--bg2);color:var(--muted2)}
.wy-col-name{font-size:.81rem;font-weight:700}
.wy-col-name-vp{color:#fff}
.wy-col-name-ag{color:var(--muted2)}
/* rows */
.wy-rows-vp,.wy-rows-ag{display:flex;flex-direction:column;gap:5px}
.wy-row{border-radius:0 8px 8px 0;padding:11px 14px;display:flex;flex-direction:column;gap:3px;transition:box-shadow .18s}
.wy-row-vp{background:#fff;border:1.5px solid var(--r3);border-left:3px solid var(--r)}
.wy-row-ag{background:#fff;border:1.5px solid var(--bg2);border-left:3px solid var(--border2)}
.wy-row-vp:hover{box-shadow:0 2px 12px rgba(220,38,38,.1)}
.wy-feat{font-size:.57rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:2px}
.wy-val{font-size:.79rem;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wy-val-vp{color:var(--ink)}
.wy-val-ag{color:var(--muted2)}
.wy-chk{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--green);flex-shrink:0;font-size:.55rem;color:#fff;font-weight:900;line-height:1}
.wy-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--border);flex-shrink:0;font-size:.55rem;color:var(--border2);font-weight:700;line-height:1}
.wy-warn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#FEF3C7;border:1.5px solid #FDE68A;flex-shrink:0;font-size:.55rem;color:#D97706;font-weight:700;line-height:1}
.wy-badge{display:inline-flex;padding:1px 8px;background:var(--r3);color:var(--r);border:1px solid rgba(220,38,38,.2);border-radius:20px;font-size:.57rem;font-weight:700;letter-spacing:.04em}
/* cta bar */
.wy-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px;background:#fff;border:1.5px solid var(--border);border-radius:12px;border-left:4px solid var(--r);box-shadow:var(--sh)}
.wy-cta-text{font-size:.84rem;color:var(--muted);font-weight:300}
.wy-cta-text strong{color:var(--ink);font-weight:700}
/* ── WHY VIDYAPAATH — MOBILE ── */
@media(max-width:768px){
  .vs-sec{padding:40px 4% 36px}

  /* header */
  .wy-hd{margin-bottom:20px}
  .wy-eyebrow{font-size:.55rem;gap:6px;margin-bottom:8px}
  .wy-eyebrow::before,.wy-eyebrow::after{width:14px}
  .wy-title{font-size:1.3rem;margin-bottom:6px}
  .wy-sub{font-size:.76rem;line-height:1.58}

  /* trust strip — compact */
  .wy-trust{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    margin-bottom:16px
  }
  .wy-trust-card{padding:10px 6px}
  .wy-trust-card::before{height:2px}
  .wy-trust-num{font-size:1.25rem;line-height:1}
  .wy-trust-num sup{font-size:.72rem}
  .wy-trust-lbl{font-size:.56rem;line-height:1.3;margin-top:3px}

  /* ★ KEY FIX: keep 2 columns side-by-side */
  .wy-body{
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-bottom:14px
  }

  /* column headers */
  .wy-col-head{
    padding:8px 10px;
    gap:6px;
    border-radius:8px;
    margin-bottom:5px
  }
  .wy-col-icon{width:20px;height:20px;font-size:.58rem;border-radius:5px}
  .wy-col-name{font-size:.68rem}

  /* rows */
  .wy-rows-vp,.wy-rows-ag{gap:3px}
  .wy-row{
    padding:7px 8px;
    gap:2px;
    border-radius:0 6px 6px 0
  }
  .wy-feat{
    font-size:.46rem;
    letter-spacing:.05em;
    margin-bottom:1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .wy-val{
    font-size:.66rem;
    gap:3px;
    flex-wrap:wrap;
    line-height:1.35
  }
  .wy-chk,.wy-x,.wy-warn{
    width:12px;
    height:12px;
    font-size:.42rem;
    flex-shrink:0
  }
  .wy-badge{
    font-size:.44rem;
    padding:1px 5px;
    letter-spacing:.02em
  }

  /* CTA bar */
  .wy-cta{
    flex-direction:column;
    text-align:center;
    border-left:none;
    border-top:3px solid var(--r);
    padding:14px 12px;
    gap:10px
  }
  .wy-cta .btn-r{
    width:100%;
    justify-content:center;
    padding:11px 18px;
    font-size:.82rem
  }
  .wy-cta-text{font-size:.76rem;line-height:1.55}
}

@media(max-width:480px){
  .vs-sec{padding:32px 3.5% 28px}
  .wy-title{font-size:1.18rem}

  /* trust: even more compact */
  .wy-trust{gap:5px;margin-bottom:14px}
  .wy-trust-card{padding:8px 5px}
  .wy-trust-num{font-size:1.05rem}
  .wy-trust-lbl{font-size:.52rem}

  /* rows: tightest */
  .wy-row{padding:6px 7px}
  .wy-feat{font-size:.42rem}
  .wy-val{font-size:.61rem}
  .wy-col-head{padding:7px 8px}
  .wy-col-name{font-size:.62rem}
  .wy-col-icon{width:18px;height:18px;font-size:.52rem}
}

/* ══════════════════════════════
   SECTION 8 — EXPERTS
══════════════════════════════ */
.experts-sec{padding:56px 5%;background:var(--bg)}
.experts-in{max-width:var(--max);margin:0 auto}
.experts-hd{text-align:center;margin-bottom:48px}
.experts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.exp-card{background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:20px;text-align:center;transition:all .25s;cursor:pointer;position:relative;overflow:hidden}
.exp-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:center;transition:transform .3s}
.exp-card:hover{box-shadow:var(--sh2);transform:translateY(-5px)}
.exp-card:hover::after{transform:scaleX(1)}
.exp-card.r::after{background:linear-gradient(90deg,var(--r),#FB7185)}
.exp-card.b::after{background:linear-gradient(90deg,var(--b2),#60A5FA)}
.exp-card.p::after{background:linear-gradient(90deg,#7C3AED,#A78BFA)}
.exp-card.g::after{background:linear-gradient(90deg,var(--green),#34D399)}
.exp-av{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:800;color:#fff;position:relative}
.exp-av::before{content:'';position:absolute;inset:-3px;border-radius:50%;z-index:-1;opacity:.15}
.exp-av.r{background:linear-gradient(135deg,var(--r),#FB7185)}
.exp-av.b{background:linear-gradient(135deg,var(--b2),#60A5FA)}
.exp-av.p{background:linear-gradient(135deg,#7C3AED,#A78BFA)}
.exp-av.g{background:linear-gradient(135deg,var(--green),#34D399)}
.exp-name{font-family:'Sora',sans-serif;font-size:.97rem;font-weight:800;color:var(--ink);margin-bottom:3px}
.exp-role{font-size:.73rem;color:var(--muted);margin-bottom:12px;font-weight:300}
.exp-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:14px}
.exp-tag{font-size:.6rem;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--bg);color:var(--muted)}
.exp-stat{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:800;color:var(--ink);margin-bottom:2px}
.exp-stat-l{font-size:.67rem;color:var(--muted)}
.exp-divider{width:32px;height:2px;background:var(--border);border-radius:2px;margin:12px auto}

/* ══════════════════════════════
   SECTION 9 — CHAT FAQ
══════════════════════════════ */
.faq-sec{padding:56px 5%;background:#fff}
.faq-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.faq-left{}
.faq-chat{background:var(--bg);border:1.5px solid var(--border);border-radius:20px;overflow:hidden;max-height:520px}
.faq-chat-head{background:var(--ink);padding:16px 20px;display:flex;align-items:center;gap:10px}
.fch-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--r),var(--gold));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0}
.fch-name{font-size:.87rem;font-weight:700;color:#fff}
.fch-status{font-size:.68rem;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px}
.fch-dot{width:5px;height:5px;border-radius:50%;background:#22C55E;flex-shrink:0}
.faq-chat-body{padding:16px;overflow-y:auto;max-height:380px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.chat-q{display:flex;justify-content:flex-end}
.chat-a{display:flex;justify-content:flex-start;gap:8px;align-items:flex-end}
.chat-bubble{padding:11px 15px;border-radius:14px;font-size:.82rem;line-height:1.6;max-width:82%;cursor:pointer;transition:opacity .2s}
.chat-bubble:hover{opacity:.85}
.chat-q .chat-bubble{background:var(--r);color:#fff;border-bottom-right-radius:4px}
.chat-a .chat-bubble{background:#fff;color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:4px;font-weight:300}
.chat-a-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--r),var(--gold));display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:700;color:#fff;flex-shrink:0;margin-bottom:2px}
.chat-q-selector{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 14px}
.cqs-btn{padding:7px 13px;border-radius:20px;font-size:.74rem;font-weight:600;border:1.5px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .14s}
.cqs-btn:hover{border-color:var(--r);color:var(--r);background:var(--r3)}
.faq-right{}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;gap:14px;transition:color .15s}
.faq-q-row:hover{color:var(--r)}
.faq-q-text{font-weight:600;font-size:.9rem;color:var(--ink);flex:1}
.faq-q-row:hover .faq-q-text{color:var(--r)}
.faq-q-ico{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.75rem;transition:all .25s;color:var(--muted)}
.faq-q-row.open .faq-q-ico{background:var(--r);border-color:var(--r);color:#fff;transform:rotate(45deg)}
.faq-ans{display:none;padding:0 0 16px;font-size:.84rem;color:var(--muted);line-height:1.78;font-weight:300}
.faq-ans.open{display:block}

/* ══════════════════════════════
   SECTION 10 — STATS BAR
══════════════════════════════ */
.stats-strip{background:linear-gradient(135deg,var(--b),#0F2C5C);padding:40px 5%}
.stats-strip-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.ssi{text-align:center;padding:16px;border-right:1px solid rgba(255,255,255,.08)}
.ssi:last-child{border:none}
.ssi-num{font-family:'Sora',sans-serif;font-size:2.2rem;font-weight:900;color:#fff;line-height:1;letter-spacing:-.04em}
.ssi-num em{font-style:normal;color:var(--gold)}
.ssi-lbl{font-size:.68rem;color:rgba(255,255,255,.45);margin-top:7px;text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.ssi-sub{font-size:.64rem;color:rgba(245,158,11,.5);margin-top:3px;font-weight:300}

/* ══ FOOTER ══ */
.ft{background:#0D1E35;position:relative;overflow:hidden}
.ft::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.ft-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 5%}
.ft-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:48px;padding:56px 0 40px;border-bottom:1px solid rgba(255,255,255,.06)}
.ft-name{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;margin-bottom:3px}
.ft-name em{font-style:normal;color:var(--gold)}
.ft-tag{font-size:.52rem!important;font-weight:600!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(255,255,255,.25)!important;display:block!important;margin-bottom:12px!important;line-height:1.2!important}
.ft-desc{font-size:.78rem;color:rgba(255,255,255,.35);line-height:1.8;margin-bottom:18px;max-width:280px;font-weight:300}
.ft-pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.ft-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:3px 9px;border-radius:20px;font-size:.61rem;font-weight:500;color:rgba(255,255,255,.4);transition:all .18s;cursor:default}
.ft-pill:hover{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.25);color:rgba(255,100,100,.9)}
.ft-socs{display:flex;gap:7px}
.ft-soc{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:.88rem;transition:all .18s;cursor:pointer;color:#cbd5e1;text-decoration:none}.ft-soc svg{width:17px;height:17px;fill:currentColor;display:block}.ft-soc:hover{color:#fff}
.ft-soc:hover{background:var(--r);border-color:var(--r);transform:translateY(-2px)}
.ft-col h5{font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:15px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07)}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.ft-col ul li span{display:block;padding:6px 8px;font-size:.79rem;color:rgba(255,255,255,.4);cursor:pointer;border-radius:7px;transition:all .15s}
.ft-col ul li span:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);padding-left:13px}
.ft-ci{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.ft-ci:last-of-type{border:none}
.ft-ci-ico{width:32px;height:32px;border-radius:8px;background:rgba(220,38,38,.15);border:1px solid rgba(220,38,38,.18);display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0}
.ft-ci-l{font-size:.57rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.18);margin-bottom:2px}
.ft-ci-v{font-size:.79rem;font-weight:500;color:rgba(255,255,255,.6)}
.ft-ci-v a{color:rgba(255,255,255,.6);transition:color .18s}
.ft-ci-v a:hover{color:var(--gold)}
.ft-live{display:flex;align-items:center;gap:6px;margin-top:12px;padding:7px 12px;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.16);border-radius:7px;font-size:.68rem;font-weight:600;color:#4ADE80}
.ft-live-dot{width:5px;height:5px;border-radius:50%;background:#4ADE80;animation:pls 1.8s infinite;flex-shrink:0}
.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 24px;flex-wrap:wrap}
.ft-copy{font-size:.7rem;color:rgba(255,255,255,.18)}
.ft-copy strong{color:rgba(255,255,255,.32)}
.ft-blinks{display:flex;gap:10px}
.ft-blinks span{font-size:.69rem;color:rgba(255,255,255,.2);cursor:pointer;transition:color .18s}
.ft-blinks span:hover{color:var(--gold)}
.ft-top-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);padding:6px 14px;border-radius:7px;font-size:.7rem;font-weight:700;cursor:pointer;transition:all .18s}
.ft-top-btn:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-1px)}


.notif-toast{position:fixed;top:76px;right:20px;z-index:600;background:var(--green);color:#fff;padding:12px 20px;border-radius:10px;font-size:.84rem;font-weight:600;transform:translateX(200%);transition:transform .3s;pointer-events:none;max-width:280px;line-height:1.4;box-shadow:var(--sh2)}
.notif-toast.show{transform:translateX(0)}

/* ══ NAV ICONS ══ */
.nav-icon{
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:middle;
  margin-right:6px;
  margin-top:-2px;
  opacity:0.7;
  transition:all .15s ease;
  flex-shrink:0;
}
.nav-links a:hover .nav-icon,
.nav-links a.on .nav-icon{
  opacity:1;
  stroke:var(--r);
  transform:scale(1.05);
}
/* .nav-links a override removed - unified in NAV section */

/* ══ RESPONSIVE ══ */
@media(max-width:1060px){
  .hero-in{grid-template-columns:1fr;gap:40px}.hero-visual{display:none}
  .problem-in{grid-template-columns:1fr}

  .course-panel.on{grid-template-columns:1fr}
  .hiw-panel.on{grid-template-columns:1fr}
  .sw-track .sw-card{flex:0 0 calc(50% - 7px)}
  .experts-grid{grid-template-columns:1fr 1fr}
  .faq-in{grid-template-columns:1fr}
  .stats-strip-in{grid-template-columns:repeat(3,1fr)}.ssi:nth-child(3){border-right:none}.ssi:nth-child(4){border-right:1px solid rgba(255,255,255,.08)}
  .ft-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:768px){
  .nav-links,.btn-ghost{display:none}.ham{display:flex}

  .sw-track .sw-card{flex:0 0 calc(50% - 7px)}
  .experts-grid{grid-template-columns:1fr 1fr}
  .stats-strip-in{grid-template-columns:1fr 1fr}.ssi:nth-child(2n){border-right:none}.ssi:nth-child(4){border-right:none}
  .ft-grid{grid-template-columns:1fr}
.hero-h{font-size:clamp(2rem,7vw,3rem)}
  .rank-search{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .rank-search-btn{width:100%}
  .hero-trust{gap:12px}
  .faq-sec,.experts-sec,.success-sec,.process-sec,.courses-sec,.stats-strip,
  
  .cp-stats-row{grid-template-columns:1fr 1fr 1fr}
  .courses-sec,.experts-sec{padding:60px 4%}

  /* ── PROBLEM SECTION (Reality No One Talks About) — MOBILE FIX ── */
  .problem-sec{padding:36px 4% 32px}
  .problem-in{gap:20px}
  .problem-kicker{font-size:.6rem;margin-bottom:8px}
  .problem-h{font-size:clamp(1.3rem,5.5vw,1.65rem);line-height:1.18;margin-bottom:10px}
  .problem-p{font-size:.82rem;line-height:1.65;margin-bottom:16px}
  /* stats → tight 3-col pill card */
  .problem-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    background:#fff;
    border:1.5px solid var(--border);
    border-radius:12px;
    overflow:hidden
  }
  .ps-item{
    border-left:none;
    border-right:1px solid var(--border);
    padding:12px 6px;
    text-align:center
  }
  .ps-item:last-child{border-right:none}
  .ps-num{font-size:1.2rem;line-height:1}
  .ps-lbl{font-size:.57rem;line-height:1.35;margin-top:4px}
  /* compare cards compact */
  .compare-cards{gap:7px}
  .cc-card{padding:11px 13px;border-radius:10px}
  .cc-row{gap:8px}
  .cc-label{font-size:.76rem}
  .cc-val{font-size:.92rem}
  .cc-desc{font-size:.68rem;line-height:1.42;margin-top:3px}
  .compare-cards>.btn-r{padding:11px 16px;font-size:.83rem}
}
@media(max-width:520px){
  .sw-track .sw-card{flex:0 0 100%}
  .experts-grid{grid-template-columns:1fr 1fr}
  .stats-strip-in{grid-template-columns:1fr 1fr}
  
  /* problem section — extra squeeze on very small phones */
  .problem-sec{padding:28px 4% 28px}
  .problem-in{gap:16px}
  .problem-h{font-size:clamp(1.2rem,5vw,1.45rem)}
  .problem-p{font-size:.79rem;margin-bottom:14px}
  .ps-item{padding:10px 4px}
  .ps-num{font-size:1.08rem}
  .ps-lbl{font-size:.53rem}
  .cc-card{padding:10px 12px}
  .cc-label{font-size:.72rem}
  .cc-val{font-size:.86rem}
  .cc-desc{font-size:.65rem}
}

/* ════════════════════════════════════════════════════════════
   DESKTOP NAV COMPACT FIX v2 — Balanced Layout, Reduced Right-Side Pressure
   Fixes: Nav taking too much right-side space on desktop
   Author: Senior Frontend Developer / UI-UX Expert
   Date: 2026-06-05
════════════════════════════════════════════════════════════ */

/* ─── BASE DESKTOP (769px - 899px) — Tightest spacing ─── */
@media (min-width: 769px) and (max-width: 899px) {
  .nav-in {
    padding: 0 2%;
    gap: 4px;
    height: 66px;
  }

  .nav-logo {
    gap: 0;
    flex-shrink: 0;
  }
  .nav-logo-box {
    width: 139px;
    height: 44px;
  }
  .nav-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .nav-links {
    gap: 0;
    justify-content: center;
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
  }
  .nav-links a {
    font-size: 0.7rem;
    padding: 5px 6px;
    gap: 3px;
    border-radius: 5px;
  }
  .nav-icon {
    width: 12px;
    height: 12px;
    margin-right: 3px;
    margin-top: -1px;
  }

  .nav-mega-wrap > a::after,
  .nav-dd-wrap > a::after {
    font-size: 0.45rem;
    margin-left: 1px;
  }

  .nav-mega {
    width: 520px;
    max-width: calc(100vw - 30px);
    top: calc(100% + 4px);
    border-radius: 12px;
    padding-top: 6px;
  }
  .nav-mega-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nav-mega-left {
    padding: 12px;
    gap: 6px;
  }
  .nav-mega-right {
    padding: 12px;
    gap: 10px;
  }
  .nav-mega-item {
    padding: 8px;
    gap: 8px;
    border-radius: 8px;
  }
  .nav-mega-icon {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
    border-radius: 8px;
  }
  .nav-mega-name {
    font-size: 0.74rem;
  }
  .nav-mega-desc {
    font-size: 0.6rem;
  }
  .nav-mega-tag {
    font-size: 0.52rem;
    padding: 2px 6px;
    margin-top: 2px;
  }
  .nav-mega-cta {
    padding: 12px;
    border-radius: 10px;
  }
  .nav-mega-cta-title {
    font-size: 0.85rem;
  }
  .nav-mega-cta-desc {
    font-size: 0.65rem;
    margin-bottom: 10px;
  }
  .nav-mega-cta-btn {
    padding: 7px 12px;
    font-size: 0.7rem;
  }
  .nav-mega-quick-title {
    font-size: 0.58rem;
    margin-bottom: 3px;
  }
  .nav-mega-quick-item {
    padding: 6px 7px;
    font-size: 0.68rem;
    gap: 6px;
  }
  .nav-mega-quick-item svg {
    width: 12px;
    height: 12px;
  }

  .nav-dd {
    min-width: 150px;
    padding: 5px;
    border-radius: 10px;
    top: calc(100% + 6px);
  }
  .nav-ddi {
    padding: 7px 8px;
    font-size: 0.72rem;
    gap: 6px;
  }
  .nav-ddi span {
    font-size: 0.85rem;
  }

  .nav-right {
    gap: 4px;
    flex-shrink: 0;
  }
  .btn-ghost {
    padding: 6px 10px;
    font-size: 0.7rem;
    border-radius: 6px;
    border-width: 1.5px;
  }
  .btn-cta {
    padding: 7px 12px;
    font-size: 0.7rem;
    border-radius: 6px;
  }
  .btn-cta[href*="wa.me"] {
    padding: 7px 12px;
    font-size: 0.7rem;
    gap: 3px;
  }

  .cm-right {
    min-height: 300px;
  }
  .cm-panel {
    padding: 14px;
  }
  .cm-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .cm-header-icon {
    width: 24px;
    height: 24px;
    font-size: 0.82rem;
  }
  .cm-header-title {
    font-size: 0.76rem;
  }
  .cm-header-count {
    font-size: 0.55rem;
    padding: 2px 8px;
  }
  .cm-grid {
    gap: 4px;
  }
  .cm-item {
    padding: 5px 7px;
    font-size: 0.66rem;
    gap: 5px;
  }
  .cm-item-dot {
    width: 5px;
    height: 5px;
  }
  .cm-footer {
    margin-top: 8px;
    padding-top: 6px;
  }
  .cm-footer-text {
    font-size: 0.6rem;
  }
  .cm-footer-link {
    font-size: 0.65rem;
  }
}

/* ─── STANDARD DESKTOP (900px - 1279px) — Balanced spacing ─── */
@media (min-width: 900px) and (max-width: 1279px) {
  .nav-in {
    padding: 0 2.5%;
    gap: 6px;
    height: 68px;
  }

  .nav-logo {
    gap: 0;
    flex-shrink: 0;
  }
  .nav-logo-box {
    width: 158px;
    height: 50px;
  }
  .nav-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .nav-links {
    gap: 0;
    justify-content: center;
    flex: 1;
    max-width: 640px;
    margin: 0 auto;
  }
  .nav-links a {
    font-size: 0.76rem;
    padding: 6px 9px;
    gap: 4px;
    border-radius: 6px;
  }
  .nav-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    margin-top: -1px;
  }

  .nav-mega-wrap > a::after,
  .nav-dd-wrap > a::after {
    font-size: 0.5rem;
    margin-left: 1px;
  }

  .nav-mega {
    width: 600px;
    max-width: calc(100vw - 40px);
    top: calc(100% + 5px);
    border-radius: 14px;
    padding-top: 8px;
  }
  .nav-mega-grid {
    grid-template-columns: 1.1fr 1fr;
  }
  .nav-mega-left {
    padding: 16px;
    gap: 8px;
  }
  .nav-mega-right {
    padding: 16px;
    gap: 12px;
  }
  .nav-mega-item {
    padding: 10px;
    gap: 10px;
    border-radius: 10px;
  }
  .nav-mega-icon {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
    border-radius: 9px;
  }
  .nav-mega-name {
    font-size: 0.78rem;
  }
  .nav-mega-desc {
    font-size: 0.64rem;
  }
  .nav-mega-tag {
    font-size: 0.55rem;
    padding: 2px 7px;
    margin-top: 3px;
  }
  .nav-mega-cta {
    padding: 14px;
    border-radius: 12px;
  }
  .nav-mega-cta-title {
    font-size: 0.9rem;
  }
  .nav-mega-cta-desc {
    font-size: 0.68rem;
    margin-bottom: 10px;
  }
  .nav-mega-cta-btn {
    padding: 8px 14px;
    font-size: 0.74rem;
  }
  .nav-mega-quick-title {
    font-size: 0.6rem;
    margin-bottom: 4px;
  }
  .nav-mega-quick-item {
    padding: 7px 8px;
    font-size: 0.72rem;
    gap: 7px;
  }
  .nav-mega-quick-item svg {
    width: 13px;
    height: 13px;
  }

  .nav-dd {
    min-width: 170px;
    padding: 6px;
    border-radius: 12px;
    top: calc(100% + 8px);
  }
  .nav-ddi {
    padding: 8px 10px;
    font-size: 0.75rem;
    gap: 7px;
  }
  .nav-ddi span {
    font-size: 0.9rem;
  }

  .nav-right {
    gap: 5px;
    flex-shrink: 0;
  }
  .btn-ghost {
    padding: 7px 12px;
    font-size: 0.74rem;
    border-radius: 7px;
    border-width: 1.5px;
  }
  .btn-cta {
    padding: 8px 14px;
    font-size: 0.74rem;
    border-radius: 7px;
  }
  .btn-cta[href*="wa.me"] {
    padding: 8px 14px;
    font-size: 0.74rem;
    gap: 4px;
  }

  .cm-right {
    min-height: 340px;
  }
  .cm-panel {
    padding: 16px;
  }
  .cm-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  .cm-header-icon {
    width: 28px;
    height: 28px;
    font-size: 0.88rem;
  }
  .cm-header-title {
    font-size: 0.8rem;
  }
  .cm-header-count {
    font-size: 0.58rem;
    padding: 2px 9px;
  }
  .cm-grid {
    gap: 5px;
  }
  .cm-item {
    padding: 6px 8px;
    font-size: 0.7rem;
    gap: 6px;
  }
  .cm-item-dot {
    width: 5px;
    height: 5px;
  }
  .cm-footer {
    margin-top: 10px;
    padding-top: 8px;
  }
  .cm-footer-text {
    font-size: 0.62rem;
  }
  .cm-footer-link {
    font-size: 0.68rem;
  }
}

/* ─── WIDE DESKTOP (1280px+) — More breathing room ─── */
@media (min-width: 1280px) {
  .nav-in {
    padding: 0 3.5%;
    gap: 10px;
    height: 64px;
  }

  .nav-logo {
    gap: 0;
  }
  .nav-logo-box {   width: 174px;   height: 56px;   background: transparent;   border-radius: 0;   display: flex;   align-items: center;   justify-content: center;   flex-shrink: 0;  }
  .nav-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .nav-links {
    gap: 1px;
    justify-content: center;
    flex: 1;
    max-width: 780px;
    margin: 0 auto;
  }
  .nav-links a {
    font-size: 0.82rem;
    padding: 7px 11px;
    gap: 5px;
    border-radius: 7px;
  }
  .nav-icon {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }

  .nav-mega {
    width: 680px;
    max-width: calc(100vw - 60px);
    top: calc(100% + 6px);
    border-radius: 16px;
    padding-top: 10px;
  }
  .nav-mega-grid {
    grid-template-columns: 1.15fr 1fr;
  }
  .nav-mega-left {
    padding: 20px;
    gap: 10px;
  }
  .nav-mega-right {
    padding: 20px;
    gap: 14px;
  }
  .nav-mega-item {
    padding: 11px;
    gap: 11px;
    border-radius: 11px;
  }
  .nav-mega-icon {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
  }
  .nav-mega-name {
    font-size: 0.84rem;
  }
  .nav-mega-desc {
    font-size: 0.68rem;
  }
  .nav-mega-cta {
    padding: 16px;
    border-radius: 14px;
  }
  .nav-mega-cta-title {
    font-size: 0.95rem;
  }
  .nav-mega-cta-desc {
    font-size: 0.72rem;
  }
  .nav-mega-cta-btn {
    padding: 9px 16px;
    font-size: 0.78rem;
  }

  .nav-right {
    gap: 7px;
  }
  .btn-ghost {
    padding: 8px 14px;
    font-size: 0.78rem;
  }
  .btn-cta {
    padding: 9px 16px;
    font-size: 0.78rem;
  }
  .btn-cta[href*="wa.me"] {
    padding: 9px 16px;
    font-size: 0.78rem;
  }

  .cm-right {
    min-height: 400px;
  }
  .cm-panel {
    padding: 20px;
  }
  .cm-header {
    margin-bottom: 14px;
    padding-bottom: 11px;
  }
  .cm-header-icon {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
  }
  .cm-header-title {
    font-size: 0.86rem;
  }
  .cm-grid {
    gap: 6px;
  }
  .cm-item {
    padding: 7px 9px;
    font-size: 0.74rem;
  }
}

/* ─── NAV STRUCTURAL FIXES — All Desktop Sizes ─── */
@media (min-width: 769px) {
  /* Prevent nav-right from wrapping or shrinking */
  .nav-right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin-left: 0;
  }

  /* Ensure logo doesn't shrink */
  .nav-logo {
    flex-shrink: 0;
  }

  /* Center nav links properly */
  .nav-links {
    display: flex;
    align-items: center;
  }

  /* Ensure hamburger stays hidden on desktop */
  .ham {
    display: none !important;
  }

  /* Prevent layout shift from mega menu */
  .nav-mega-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Safe hover bridge - narrower */
  .nav-mega-wrap::before {
    left: 25%;
    right: 25%;
    height: 6px;
  }

  /* Ensure dropdown doesn't cause overflow */
  .nav-dd-wrap {
    position: relative;
  }

  /* Prevent body scroll from nav */
  body {
    overflow-x: hidden;
  }
}

/* ─── ULTRA-WIDE (1440px+) — Max comfort but still compact ─── */
@media (min-width: 1440px) {
  .nav-in {
    padding: 0 4%;
    max-width: 1400px;
    margin: 0 auto;
  }

  .nav-links {
    max-width: 850px;
  }

  .nav-mega {
    width: 720px;
  }
}

/* END DESKTOP NAV COMPACT FIX v2 */

/* ════════════════════════════════════════════════════════════
   OTHERS DROPDOWN FIX v3 — Z-Index & Hover Bridge Fix
   Fixes: Dropdown closes when trying to click submenu items
   Root cause: Missing hover bridge + z-index stacking issues
════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  /* ── Base dropdown container ── */
  .nav-dd-wrap {
    position: relative;
    z-index: 850; /* Higher than nav-mega (700) but controlled */
  }

  /* ── The dropdown menu ── */
  .nav-dd {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
    min-width: 200px;
    box-shadow: var(--sh2);
    z-index: 900; /* Above everything */
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    transform: translateX(-50%) translateY(-6px);
    pointer-events: none;
  }

  /* ── Show dropdown on hover ── */
  .nav-dd-wrap:hover .nav-dd {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  /* ── SAFE HOVER BRIDGE — Critical fix ── */
  /* Creates an invisible hoverable area between the trigger and dropdown */
  .nav-dd-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 899;
    pointer-events: auto;
    background: transparent;
  }

  /* ── Dropdown items ── */
  .nav-ddi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.14s;
    white-space: nowrap;
    position: relative;
    z-index: 901;
  }

  .nav-ddi:hover {
    background: var(--bg);
    color: var(--ink);
    font-weight: 600;
  }

  .nav-ddi span {
    font-size: 1rem;
    line-height: 1;
  }

  /* ── Ensure dropdown stays open when hovering over items ── */
  .nav-dd:hover {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
  }

  /* ── Prevent mega menu from interfering ── */
  .nav-mega-wrap {
    z-index: 700;
  }

  .nav-mega {
    z-index: 750;
  }

  /* ── Nav container z-index hierarchy ── */
  .nav {
    z-index: 500;
  }

  .nav-links {
    position: relative;
    z-index: 600;
  }
}

/* END OTHERS DROPDOWN FIX v3 */

/* ══ NEET UG VISUAL PANEL ══ */
.cp-nug-visual{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(15,25,41,.16),0 0 0 1px rgba(220,38,38,.12);min-height:500px;display:flex;flex-direction:column}
.cp-nug-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;flex:1;min-height:500px}
.cp-nug-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,5,5,.08) 0%,rgba(10,5,5,.15) 35%,rgba(12,6,6,.72) 68%,rgba(10,4,4,.92) 100%)}
.cp-nug-overlay2{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 10%,rgba(220,38,38,.06) 0%,transparent 60%)}
.cp-nug-float{position:absolute;bottom:0;left:0;right:0;padding:22px 20px 22px}
.cp-nug-badge-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.cp-nug-badge-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:var(--r);color:#fff;border-radius:50px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cp-nug-badge-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);animation:pls 1.4s ease infinite;flex-shrink:0}
.cp-nug-trust{font-size:.65rem;color:rgba(255,255,255,.5);font-weight:300}
.cp-nug-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cp-nug-stat{background:rgba(255,255,255,.08);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 8px;text-align:center;transition:background .2s}
.cp-nug-stat:hover{background:rgba(255,255,255,.14)}
.cp-nug-stat-v{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:#fff;line-height:1}
.cp-nug-stat-l{font-size:.56rem;color:rgba(255,255,255,.52);margin-top:3px;font-weight:300;text-transform:uppercase;letter-spacing:.05em}
.cp-nug-divider{height:1px;background:rgba(255,255,255,.1);margin-bottom:14px}
.cp-nug-action{display:flex;gap:8px}
.cp-nug-btn-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 16px;background:var(--r);color:#fff;border:none;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap}
.cp-nug-btn-primary:hover{background:var(--r2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(220,38,38,.5)}
.cp-nug-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.cp-nug-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.35)}
.cp-nug-corner-badge{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:10px;padding:8px 13px;border:1px solid rgba(220,38,38,.2);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.cp-nug-corner-label{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--r);margin-bottom:3px}
.cp-nug-corner-price{font-family:'Sora',sans-serif;font-size:.97rem;font-weight:800;color:var(--ink);line-height:1}
.cp-nug-corner-sub{font-size:.55rem;color:var(--muted);font-weight:300;margin-top:1px}

/* ══ NEET PG VISUAL PANEL ══ */
.cp-npg-visual{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(8,145,178,.16),0 0 0 1px rgba(8,145,178,.14);min-height:500px;display:flex;flex-direction:column}
.cp-npg-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;flex:1;min-height:500px}
.cp-npg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,15,35,.05) 0%,rgba(4,15,35,.15) 38%,rgba(3,10,28,.80) 68%,rgba(2,8,22,.96) 100%)}
.cp-npg-overlay2{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 10%,rgba(8,145,178,.1) 0%,transparent 55%)}
.cp-npg-float{position:absolute;bottom:0;left:0;right:0;padding:22px 20px 22px}
.cp-npg-badge-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.cp-npg-badge-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:linear-gradient(135deg,#0891B2,#0E7490);color:#fff;border-radius:50px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cp-npg-badge-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.65);animation:pls 1.4s ease infinite;flex-shrink:0}
.cp-npg-trust{font-size:.65rem;color:rgba(255,255,255,.48);font-weight:300}
.cp-npg-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cp-npg-stat{background:rgba(8,145,178,.14);backdrop-filter:blur(16px);border:1px solid rgba(8,145,178,.32);border-radius:10px;padding:10px 8px;text-align:center;transition:background .2s}
.cp-npg-stat:hover{background:rgba(8,145,178,.26)}
.cp-npg-stat-v{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:#fff;line-height:1}
.cp-npg-stat-l{font-size:.56rem;color:rgba(255,255,255,.5);margin-top:3px;font-weight:300;text-transform:uppercase;letter-spacing:.05em}
.cp-npg-divider{height:1px;background:rgba(8,145,178,.28);margin-bottom:14px}
.cp-npg-action{display:flex;gap:8px}
.cp-npg-btn-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 16px;background:linear-gradient(135deg,#0891B2,#0E7490);color:#fff;border:none;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap}
.cp-npg-btn-primary:hover{background:linear-gradient(135deg,#0E7490,#155E75);transform:translateY(-2px);box-shadow:0 8px 24px rgba(8,145,178,.48)}
.cp-npg-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.cp-npg-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.36)}
.cp-npg-corner-badge{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-radius:10px;padding:8px 13px;border:1px solid rgba(8,145,178,.22);box-shadow:0 4px 16px rgba(0,0,0,.14)}
.cp-npg-corner-label{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0891B2;margin-bottom:3px}
.cp-npg-corner-price{font-family:'Sora',sans-serif;font-size:.97rem;font-weight:800;color:var(--ink);line-height:1}
.cp-npg-corner-sub{font-size:.55rem;color:var(--muted);font-weight:300;margin-top:1px}

/* ══ JEE VISUAL PANEL ══ */
.cp-jee-visual{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(29,78,216,.15),0 0 0 1px rgba(29,78,216,.14);min-height:500px;display:flex;flex-direction:column}
.cp-jee-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;flex:1;min-height:500px}
.cp-jee-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,10,40,.06) 0%,rgba(5,10,40,.18) 36%,rgba(4,8,35,.82) 66%,rgba(3,6,28,.97) 100%)}
.cp-jee-overlay2{position:absolute;inset:0;background:radial-gradient(ellipse at 10% 15%,rgba(29,78,216,.09) 0%,transparent 50%)}
.cp-jee-float{position:absolute;bottom:0;left:0;right:0;padding:22px 20px 22px}
.cp-jee-badge-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.cp-jee-badge-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:linear-gradient(135deg,#1D4ED8,#1E40AF);color:#fff;border-radius:50px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cp-jee-badge-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.65);animation:pls 1.4s ease infinite;flex-shrink:0}
.cp-jee-trust{font-size:.65rem;color:rgba(255,255,255,.46);font-weight:300}
.cp-jee-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cp-jee-stat{background:rgba(29,78,216,.14);backdrop-filter:blur(16px);border:1px solid rgba(99,135,255,.28);border-radius:10px;padding:10px 8px;text-align:center;transition:background .2s}
.cp-jee-stat:hover{background:rgba(29,78,216,.26)}
.cp-jee-stat-v{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:#fff;line-height:1}
.cp-jee-stat-l{font-size:.56rem;color:rgba(255,255,255,.5);margin-top:3px;font-weight:300;text-transform:uppercase;letter-spacing:.05em}
.cp-jee-divider{height:1px;background:rgba(99,135,255,.22);margin-bottom:14px}
.cp-jee-action{display:flex;gap:8px}
.cp-jee-btn-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 16px;background:linear-gradient(135deg,#1D4ED8,#1E40AF);color:#fff;border:none;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap}
.cp-jee-btn-primary:hover{background:linear-gradient(135deg,#1E40AF,#1e3a8a);transform:translateY(-2px);box-shadow:0 8px 24px rgba(29,78,216,.5)}
.cp-jee-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.cp-jee-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.36)}
.cp-jee-corner-badge{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-radius:10px;padding:8px 13px;border:1px solid rgba(29,78,216,.22);box-shadow:0 4px 16px rgba(0,0,0,.14)}
.cp-jee-corner-label{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1D4ED8;margin-bottom:3px}
.cp-jee-corner-price{font-family:'Sora',sans-serif;font-size:.97rem;font-weight:800;color:var(--ink);line-height:1}
.cp-jee-corner-sub{font-size:.55rem;color:var(--muted);font-weight:300;margin-top:1px}
.cp-jee-innovate{position:absolute;top:16px;left:16px;background:rgba(29,78,216,.88);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:7px 11px;text-align:center}
.cp-jee-innovate-line{font-size:.52rem;font-weight:800;color:#fff;letter-spacing:.14em;line-height:1.5;text-transform:uppercase}

/* ══ MBA VISUAL PANEL ══ */
.cp-mba-visual{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(124,58,237,.18),0 0 0 1px rgba(124,58,237,.15);min-height:500px;display:flex;flex-direction:column}
.cp-mba-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;flex:1;min-height:500px}
.cp-mba-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,5,40,.07) 0%,rgba(15,5,40,.2) 36%,rgba(10,3,30,.84) 66%,rgba(8,2,24,.97) 100%)}
.cp-mba-overlay2{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 0%,rgba(124,58,237,.12) 0%,transparent 55%)}
.cp-mba-float{position:absolute;bottom:0;left:0;right:0;padding:22px 20px 22px}
.cp-mba-badge-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.cp-mba-badge-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;border-radius:50px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cp-mba-badge-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.65);animation:pls 1.4s ease infinite;flex-shrink:0}
.cp-mba-trust{font-size:.65rem;color:rgba(255,255,255,.46);font-weight:300}
.cp-mba-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cp-mba-stat{background:rgba(124,58,237,.14);backdrop-filter:blur(16px);border:1px solid rgba(167,139,250,.28);border-radius:10px;padding:10px 8px;text-align:center;transition:background .2s}
.cp-mba-stat:hover{background:rgba(124,58,237,.26)}
.cp-mba-stat-v{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:#fff;line-height:1}
.cp-mba-stat-l{font-size:.56rem;color:rgba(255,255,255,.5);margin-top:3px;font-weight:300;text-transform:uppercase;letter-spacing:.05em}
.cp-mba-divider{height:1px;background:rgba(167,139,250,.22);margin-bottom:14px}
.cp-mba-action{display:flex;gap:8px}
.cp-mba-btn-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 16px;background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;border:none;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap}
.cp-mba-btn-primary:hover{background:linear-gradient(135deg,#6D28D9,#5b21b6);transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.52)}
.cp-mba-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.cp-mba-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.36)}
.cp-mba-corner-badge{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-radius:10px;padding:8px 13px;border:1px solid rgba(124,58,237,.22);box-shadow:0 4px 16px rgba(0,0,0,.14)}
.cp-mba-corner-label{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7C3AED;margin-bottom:3px}
.cp-mba-corner-price{font-family:'Sora',sans-serif;font-size:.97rem;font-weight:800;color:var(--ink);line-height:1}
.cp-mba-corner-sub{font-size:.55rem;color:var(--muted);font-weight:300;margin-top:1px}
.cp-mba-checklist{position:absolute;top:16px;left:16px;background:rgba(124,58,237,.82);backdrop-filter:blur(12px);border:1px solid rgba(167,139,250,.3);border-radius:10px;padding:9px 12px}
.cp-mba-check-item{display:flex;align-items:center;gap:6px;font-size:.58rem;color:#fff;font-weight:600;letter-spacing:.04em;line-height:1.8}
.cp-mba-check-item::before{content:'✓';font-size:.6rem;color:#c4b5fd;font-weight:900;flex-shrink:0}

/* ══ PHARMACY VISUAL PANEL ══ */
.cp-pha-visual{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(5,150,105,.18),0 0 0 1px rgba(5,150,105,.16);min-height:500px;display:flex;flex-direction:column}
.cp-pha-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;flex:1;min-height:500px}
.cp-pha-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2,30,18,.06) 0%,rgba(2,30,18,.18) 36%,rgba(1,22,13,.83) 66%,rgba(1,16,10,.97) 100%)}
.cp-pha-overlay2{position:absolute;inset:0;background:radial-gradient(ellipse at 85% 5%,rgba(5,150,105,.1) 0%,transparent 52%)}
.cp-pha-float{position:absolute;bottom:0;left:0;right:0;padding:22px 20px 22px}
.cp-pha-badge-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.cp-pha-badge-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:linear-gradient(135deg,#059669,#047857);color:#fff;border-radius:50px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cp-pha-badge-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.65);animation:pls 1.4s ease infinite;flex-shrink:0}
.cp-pha-trust{font-size:.65rem;color:rgba(255,255,255,.46);font-weight:300}
.cp-pha-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cp-pha-stat{background:rgba(5,150,105,.14);backdrop-filter:blur(16px);border:1px solid rgba(52,211,153,.28);border-radius:10px;padding:10px 8px;text-align:center;transition:background .2s}
.cp-pha-stat:hover{background:rgba(5,150,105,.26)}
.cp-pha-stat-v{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:#fff;line-height:1}
.cp-pha-stat-l{font-size:.56rem;color:rgba(255,255,255,.5);margin-top:3px;font-weight:300;text-transform:uppercase;letter-spacing:.05em}
.cp-pha-divider{height:1px;background:rgba(52,211,153,.22);margin-bottom:14px}
.cp-pha-action{display:flex;gap:8px}
.cp-pha-btn-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 16px;background:linear-gradient(135deg,#059669,#047857);color:#fff;border:none;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap}
.cp-pha-btn-primary:hover{background:linear-gradient(135deg,#047857,#065f46);transform:translateY(-2px);box-shadow:0 8px 24px rgba(5,150,105,.5)}
.cp-pha-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.cp-pha-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.36)}
.cp-pha-corner-badge{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-radius:10px;padding:8px 13px;border:1px solid rgba(5,150,105,.22);box-shadow:0 4px 16px rgba(0,0,0,.14)}
.cp-pha-corner-label{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#059669;margin-bottom:3px}
.cp-pha-corner-price{font-family:'Sora',sans-serif;font-size:.97rem;font-weight:800;color:var(--ink);line-height:1}
.cp-pha-corner-sub{font-size:.55rem;color:var(--muted);font-weight:300;margin-top:1px}
.cp-pha-rx-badge{position:absolute;top:16px;left:16px;background:rgba(5,150,105,.85);backdrop-filter:blur(12px);border:1px solid rgba(52,211,153,.32);border-radius:10px;padding:9px 13px;display:flex;flex-direction:column;align-items:center;gap:2px}
.cp-pha-rx-symbol{font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:900;color:#fff;line-height:1}
.cp-pha-rx-sub{font-size:.52rem;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.1em;text-transform:uppercase}

/* ════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION FIXES v5 — PWA-Ready Compact Design
   ALL sections: spacing-only fixes, original design preserved
════════════════════════════════════════════════════════════ */

/* ─── TABLETS & PHONES (768px) ─── */
@media(max-width:768px){

  /* ══ VIDEO OVERLAY — slightly more opaque on mobile ══ */
  .hero-video-overlay{background:rgba(248,250,255,0.86)}

  /* ══ SECTION 1: HERO — SPACING ONLY ══ */
  body 
  body .hero-in{
    padding: 36px 5% 28px;
    gap: 32px;
    grid-template-columns: 1fr;
  }
  body .hero-eyebrow{
    margin-bottom: 14px;
    gap: 8px;
  }
  body .hero-live-badge{
    padding: 4px 10px;
    font-size: .65rem;
  }
  body .hero-live-dot{
    width: 6px;
    height: 6px;
  }
  body .hero-h{
    font-size: clamp(2rem, 6.5vw, 2.8rem);
    margin-bottom: 14px;
    line-height: 1.08;
  }
  body .hero-h .line-stroke::after{
    height: 4px;
    bottom: 4px;
  }
  body .hero-sub{
    font-size: .88rem;
    line-height: 1.65;
    max-width: 100%;
    margin-bottom: 22px;
  }
  body .rank-search{
    padding: 5px 5px 5px 14px;
    gap: 6px;
    margin-bottom: 20px;
    border-radius: 12px;
  }
  body .rank-search-ico{
    font-size: 1rem;
  }
  body .rank-search input{
    font-size: .86rem;
    padding: 5px 0;
  }
  body .rank-search-btn{
    padding: 9px 14px;
    font-size: .78rem;
    border-radius: 8px;
  }
  body .rank-result-preview{
    padding: 10px 14px;
    margin-bottom: 20px;
    border-radius: 9px;
  }
  body .rp-ico{
    font-size: 1.15rem;
  }
  body .rp-text{
    font-size: .78rem;
  }
  body .rp-sub{
    font-size: .7rem;
  }
  body .hero-trust{
    gap: 12px;
  }
  body .ht-item{
    font-size: .72rem;
    gap: 5px;
  }
  body .ht-ico{
    width: 16px;
    height: 16px;
    font-size: .58rem;
  }
  body .hero-visual{
    height: auto;
    min-height: 320px;
    max-height: 420px;
  }
  body .hero-v-main{
    border-radius: 18px;
  }
  body .hf{
    padding: 10px 12px;
    border-radius: 12px;
    gap: 8px;
  }
  body .hf-icon{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: .9rem;
  }
  body .hf-val{
    font-size: 1.05rem;
  }
  body .hf-lbl{
    font-size: .58rem;
  }
  body .hf1{
    top: 18px;
    left: -12px;
  }
  body .hf2{
    bottom: 90px;
    left: -14px;
  }
  body .hf3{
    top: 40px;
    right: -12px;
  }
  body .hf4{
    bottom: 24px;
    right: -8px;
  }
  body .hero-college-stack{
    bottom: 14px;
    left: 14px;
    right: 14px;
    gap: 5px;
  }
  body .hero-c-card{
    padding: 8px 10px;
    border-radius: 8px;
    gap: 8px;
  }
  body .hcc-ico{
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: .82rem;
  }
  body .hcc-name{
    font-size: .72rem;
  }
  body .hcc-meta{
    font-size: .58rem;
  }
  body .hcc-badge{
    font-size: .52rem;
    padding: 2px 6px;
  }

  /* ══ SECTION 2: PROBLEM — SPACING ONLY ══ */
  body .problem-sec{
    padding: 36px 4% 32px;
  }
  body .problem-in{
    gap: 20px;
  }
  body .problem-kicker{
    font-size: .6rem;
    margin-bottom: 8px;
  }
  body .problem-h{
    font-size: clamp(1.3rem, 5.5vw, 1.65rem);
    line-height: 1.18;
    margin-bottom: 10px;
  }
  body .problem-p{
    font-size: .82rem;
    line-height: 1.65;
    margin-bottom: 16px;
  }
  body .problem-stats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  body .ps-item{
    border-left: none;
    border-right: 1px solid var(--border);
    padding: 12px 6px;
    text-align: center;
  }
  body .ps-item:last-child{
    border-right: none;
  }
  body .ps-num{
    font-size: 1.2rem;
    line-height: 1;
  }
  body .ps-lbl{
    font-size: .57rem;
    line-height: 1.35;
    margin-top: 4px;
  }
  body .compare-cards{
    gap: 7px;
  }
  body .cc-card{
    padding: 11px 13px;
    border-radius: 10px;
  }
  body .cc-row{
    gap: 8px;
  }
  body .cc-label{
    font-size: .76rem;
  }
  body .cc-val{
    font-size: .92rem;
  }
  body .cc-desc{
    font-size: .68rem;
    line-height: 1.42;
    margin-top: 3px;
  }
  body .compare-cards>.btn-r{
    padding: 11px 16px;
    font-size: .83rem;
  }

  /* ══════════════════════════════
   SECTION 4: OUR PROGRAMMES — FIXED RESPONSIVE LAYOUT
   Desktop: Balanced two-column layout with proper proportions
   Tablet: Slightly adjusted with better visual scaling
   Mobile: Single column stack with adaptive visual height
══════════════════════════════ */

/* ─── DESKTOP BASE (default > 1060px) ─── */
.course-panel.on{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Equal columns instead of 1fr 1.1fr */
  gap: 32px;  /* Slightly larger gap for breathing room */
  align-items: stretch;  /* Stretch both sides to equal height */
}

/* Left side content area */
.cp-left{
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center content */
  min-width: 0;  /* Prevent overflow issues */
}

/* Right side visual area */
.cp-right{
  min-width: 0;  /* Prevent overflow issues */
}

/* Visual panels - responsive height instead of fixed */
.cp-nug-visual,
.cp-npg-visual,
.cp-jee-visual,
.cp-mba-visual,
.cp-pha-visual{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;  /* Reduced from 500px for better proportion */
  height: 100%;  /* Fill available height */
  display: flex;
  flex-direction: column;
}

/* Images should fill the container properly */
.cp-nug-img,
.cp-npg-img,
.cp-jee-img,
.cp-mba-img,
.cp-pha-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  flex: 1;
  min-height: 420px;  /* Match parent */
}

/* ─── TABLET (1060px and below) ─── */
@media(max-width:1060px){
  .course-panel.on{
    grid-template-columns: 1fr 1fr;  /* Keep two columns but tighter */
    gap: 20px;  /* Reduced gap for smaller screens */
  }

  .cp-nug-visual,
  .cp-npg-visual,
  .cp-jee-visual,
  .cp-mba-visual,
  .cp-pha-visual{
    min-height: 360px;  /* Slightly reduced for tablets */
  }

  .cp-nug-img,
  .cp-npg-img,
  .cp-jee-img,
  .cp-mba-img,
  .cp-pha-img{
    min-height: 360px;
  }
}

/* ─── TABLET / SMALL LAPTOP (900px and below) ─── */
@media(max-width:900px){
  .course-panel.on{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .cp-nug-visual,
  .cp-npg-visual,
  .cp-jee-visual,
  .cp-mba-visual,
  .cp-pha-visual{
    min-height: 320px;
    border-radius: 16px;
  }

  .cp-nug-img,
  .cp-npg-img,
  .cp-jee-img,
  .cp-mba-img,
  .cp-pha-img{
    min-height: 320px;
  }

  /* Reduce padding in float areas */
  .cp-nug-float,
  .cp-npg-float,
  .cp-jee-float,
  .cp-mba-float,
  .cp-pha-float{
    padding: 16px 14px;
  }

  /* Smaller stats on tablets */
  .cp-nug-stat-v,
  .cp-npg-stat-v,
  .cp-jee-stat-v,
  .cp-mba-stat-v,
  .cp-pha-stat-v{
    font-size: 0.95rem;
  }

  .cp-nug-stat-l,
  .cp-npg-stat-l,
  .cp-jee-stat-l,
  .cp-mba-stat-l,
  .cp-pha-stat-l{
    font-size: 0.52rem;
  }
}

/* WhatsApp button overrides for anchor tags */
a.cp-nug-btn-primary,
a.cp-npg-btn-primary,
a.cp-jee-btn-primary,
a.cp-mba-btn-primary,
a.cp-pha-btn-primary{
  display: inline-flex;
  text-decoration: none;
}

a.cp-nug-btn-primary:hover,
a.cp-npg-btn-primary:hover,
a.cp-jee-btn-primary:hover,
a.cp-mba-btn-primary:hover,
a.cp-pha-btn-primary:hover{
  background: #128C7E !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,.5);
}

/* Left side WhatsApp button */
a.btn-r[href*="wa.me"]{
  display: inline-flex;
  text-decoration: none;
  background: #25D366;
}

a.btn-r[href*="wa.me"]:hover{
  background: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,.38);
}

/* ─── MOBILE (768px and below) — MAJOR FIX ─── */
@media(max-width:768px){
  body .courses-sec{
    padding: 40px 4% 32px;  /* Slightly reduced padding */
  }

  body .courses-in .h2{
    font-size: clamp(1.4rem, 5vw, 1.8rem);  /* Slightly smaller heading */
    line-height: 1.2;
  }

  body .courses-tabs{
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 4px;  /* Add padding for scrollbar space */
  }

  body .ct-btn{
    padding: 8px 14px;  /* Slightly more compact */
    font-size: 0.75rem;
  }

  body .ct-btn span{
    font-size: 0.9rem;
  }

  /* CRITICAL FIX: Single column stack on mobile */
  body .course-panel.on{
    grid-template-columns: 1fr;  /* Stack vertically */
    gap: 24px;  /* Good gap between stacked sections */
  }

  /* Left side adjustments */
  body .cp-left .cp-h{
    font-size: clamp(1.25rem, 4.5vw, 1.6rem);
    margin-bottom: 10px;
    line-height: 1.2;
  }

  body .cp-left .cp-p{
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 16px;
  }

  body .cp-stats-row{
    gap: 8px;
    margin-bottom: 16px;
  }

  body .cp-stats-row .cpsr{
    padding: 10px 8px;
  }

  body .cpsr-v{
    font-size: 1.1rem;
  }

  body .cpsr-l{
    font-size: 0.58rem;
  }

  body .cp-features{
    gap: 8px;
    margin-bottom: 18px;
  }

  body .cp-feat{
    font-size: 0.82rem;
    gap: 8px;
  }

  body .cp-feat strong{
    font-size: 0.85rem;
  }

  body .cp-feat-ico{
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
  }

  /* Right side visual - CRITICAL FIX for mobile */
  body .cp-right .cp-nug-visual,
  body .cp-right .cp-npg-visual,
  body .cp-right .cp-jee-visual,
  body .cp-right .cp-mba-visual,
  body .cp-right .cp-pha-visual{
    min-height: 280px;  /* Much more reasonable for mobile */
    height: auto;  /* Let it grow with content */
    border-radius: 16px;
  }

  body .cp-right .cp-nug-img,
  body .cp-right .cp-npg-img,
  body .cp-right .cp-jee-img,
  body .cp-right .cp-mba-img,
  body .cp-right .cp-pha-img{
    min-height: 280px;  /* Match parent */
    height: 280px;  /* Fixed height for consistency */
    object-position: center 20%;  /* Focus on upper portion */
  }

  /* Float area - more compact on mobile */
  body .cp-nug-float,
  body .cp-npg-float,
  body .cp-jee-float,
  body .cp-mba-float,
  body .cp-pha-float{
    padding: 14px 12px;
  }

  body .cp-nug-badge-row,
  body .cp-npg-badge-row,
  body .cp-jee-badge-row,
  body .cp-mba-badge-row,
  body .cp-pha-badge-row{
    margin-bottom: 10px;
  }

  body .cp-nug-badge-pill,
  body .cp-npg-badge-pill,
  body .cp-jee-badge-pill,
  body .cp-mba-badge-pill,
  body .cp-pha-badge-pill{
    font-size: 0.55rem;
    padding: 3px 8px;
  }

  /* Stats row in visual - more compact */
  body .cp-nug-stats-row,
  body .cp-npg-stats-row,
  body .cp-jee-stats-row,
  body .cp-mba-stats-row,
  body .cp-pha-stats-row{
    gap: 6px;
    margin-bottom: 10px;
  }

  body .cp-nug-stat,
  body .cp-npg-stat,
  body .cp-jee-stat,
  body .cp-mba-stat,
  body .cp-pha-stat{
    padding: 8px 6px;
  }

  body .cp-nug-stat-v,
  body .cp-npg-stat-v,
  body .cp-jee-stat-v,
  body .cp-mba-stat-v,
  body .cp-pha-stat-v{
    font-size: 0.9rem;
  }

  body .cp-nug-stat-l,
  body .cp-npg-stat-l,
  body .cp-jee-stat-l,
  body .cp-mba-stat-l,
  body .cp-pha-stat-l{
    font-size: 0.48rem;
  }

  body .cp-nug-divider,
  body .cp-npg-divider,
  body .cp-jee-divider,
  body .cp-mba-divider,
  body .cp-pha-divider{
    margin-bottom: 10px;
  }

  /* Action buttons - side by side */
  body .cp-nug-action,
  body .cp-npg-action,
  body .cp-jee-action,
  body .cp-mba-action,
  body .cp-pha-action{
    gap: 8px;
  }

  body .cp-nug-btn-primary,
  body .cp-npg-btn-primary,
  body .cp-jee-btn-primary,
  body .cp-mba-btn-primary,
  body .cp-pha-btn-primary{
    padding: 10px 14px;
    font-size: 0.78rem;
  }

  body .cp-nug-btn-ghost,
  body .cp-npg-btn-ghost,
  body .cp-jee-btn-ghost,
  body .cp-mba-btn-ghost,
  body .cp-pha-btn-ghost{
    padding: 10px 12px;
    font-size: 0.75rem;
  }

  /* Corner badges - smaller on mobile */
  body .cp-nug-corner-badge,
  body .cp-npg-corner-badge,
  body .cp-jee-corner-badge,
  body .cp-mba-corner-badge,
  body .cp-pha-corner-badge{
    padding: 6px 10px;
    border-radius: 8px;
  }

  body .cp-nug-corner-price,
  body .cp-npg-corner-price,
  body .cp-jee-corner-price,
  body .cp-mba-corner-price,
  body .cp-pha-corner-price{
    font-size: 0.85rem;
  }

  body .cp-nug-corner-label,
  body .cp-npg-corner-label,
  body .cp-jee-corner-label,
  body .cp-mba-corner-label,
  body .cp-pha-corner-label{
    font-size: 0.5rem;
  }

  body .cp-nug-corner-sub,
  body .cp-npg-corner-sub,
  body .cp-jee-corner-sub,
  body .cp-mba-corner-sub,
  body .cp-pha-corner-sub{
    font-size: 0.5rem;
  }

  /* Info card adjustments */
  body .cp-ic-head{
    padding: 16px 16px 12px;
  }

  body .cp-ic-title{
    font-size: 0.92rem;
  }

  body .cp-ic-sub{
    font-size: 0.68rem;
  }

  body .cp-ic-body{
    padding: 14px 16px;
  }

  body .cp-ic-row{
    padding: 8px 0;
    font-size: 0.78rem;
  }

  body .cp-ic-action{
    padding: 0 16px 14px;
    gap: 6px;
  }

  /* Left side buttons */
  body .cp-left .btn-r,
  body .cp-left .btn-o{
    padding: 11px 16px;
    font-size: 0.82rem;
  }
}

/* ─── SMALL PHONES (480px and below) ─── */
@media(max-width:480px){
  body .courses-sec{
    padding: 32px 3.5% 28px;
  }

  body .courses-in .h2{
    font-size: 1.25rem;
    margin-bottom: 16px;
  }

  body .courses-tabs{
    gap: 5px;
    margin-bottom: 16px;
  }

  body .ct-btn{
    padding: 7px 12px;
    font-size: 0.72rem;
  }

  body .ct-btn span{
    font-size: 0.85rem;
  }

  body .course-panel.on{
    gap: 20px;  /* Tighter gap for small phones */
  }

  body .cp-left .cp-badge{
    margin-bottom: 8px;
    padding: 3px 8px;
    font-size: 0.58rem;
  }

  body .cp-left .cp-h{
    font-size: 1.15rem;
    margin-bottom: 8px;
  }

  body .cp-left .cp-p{
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  body .cp-stats-row{
    gap: 6px;
    margin-bottom: 14px;
  }

  body .cp-stats-row .cpsr{
    padding: 8px 6px;
  }

  body .cpsr-v{
    font-size: 1rem;
  }

  body .cpsr-l{
    font-size: 0.55rem;
  }

  body .cp-features{
    gap: 6px;
    margin-bottom: 14px;
  }

  body .cp-feat{
    font-size: 0.78rem;
    gap: 6px;
  }

  body .cp-feat strong{
    font-size: 0.8rem;
  }

  body .cp-feat-ico{
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
  }

  /* Right side visual - even more compact */
  body .cp-right .cp-nug-visual,
  body .cp-right .cp-npg-visual,
  body .cp-right .cp-jee-visual,
  body .cp-right .cp-mba-visual,
  body .cp-right .cp-pha-visual{
    min-height: 240px;  /* Even smaller for tiny phones */
    border-radius: 14px;
  }

  body .cp-right .cp-nug-img,
  body .cp-right .cp-npg-img,
  body .cp-right .cp-jee-img,
  body .cp-right .cp-mba-img,
  body .cp-right .cp-pha-img{
    min-height: 240px;
    height: 240px;
    object-position: center 15%;
  }

  /* Float area - ultra compact */
  body .cp-nug-float,
  body .cp-npg-float,
  body .cp-jee-float,
  body .cp-mba-float,
  body .cp-pha-float{
    padding: 12px 10px;
  }

  body .cp-nug-stats-row,
  body .cp-npg-stats-row,
  body .cp-jee-stats-row,
  body .cp-mba-stats-row,
  body .cp-pha-stats-row{
    gap: 4px;
    margin-bottom: 8px;
  }

  body .cp-nug-stat,
  body .cp-npg-stat,
  body .cp-jee-stat,
  body .cp-mba-stat,
  body .cp-pha-stat{
    padding: 6px 4px;
  }

  body .cp-nug-stat-v,
  body .cp-npg-stat-v,
  body .cp-jee-stat-v,
  body .cp-mba-stat-v,
  body .cp-pha-stat-v{
    font-size: 0.82rem;
  }

  body .cp-nug-stat-l,
  body .cp-npg-stat-l,
  body .cp-jee-stat-l,
  body .cp-mba-stat-l,
  body .cp-pha-stat-l{
    font-size: 0.45rem;
  }

  body .cp-nug-divider,
  body .cp-npg-divider,
  body .cp-jee-divider,
  body .cp-mba-divider,
  body .cp-pha-divider{
    margin-bottom: 8px;
  }

  body .cp-nug-action,
  body .cp-npg-action,
  body .cp-jee-action,
  body .cp-mba-action,
  body .cp-pha-action{
    gap: 6px;
  }

  body .cp-nug-btn-primary,
  body .cp-npg-btn-primary,
  body .cp-jee-btn-primary,
  body .cp-mba-btn-primary,
  body .cp-pha-btn-primary{
    padding: 9px 12px;
    font-size: 0.72rem;
  }

  body .cp-nug-btn-ghost,
  body .cp-npg-btn-ghost,
  body .cp-jee-btn-ghost,
  body .cp-mba-btn-ghost,
  body .cp-pha-btn-ghost{
    padding: 9px 10px;
    font-size: 0.68rem;
  }

  /* Corner badges - tiny */
  body .cp-nug-corner-badge,
  body .cp-npg-corner-badge,
  body .cp-jee-corner-badge,
  body .cp-mba-corner-badge,
  body .cp-pha-corner-badge{
    padding: 5px 8px;
    border-radius: 6px;
  }

  body .cp-nug-corner-price,
  body .cp-npg-corner-price,
  body .cp-jee-corner-price,
  body .cp-mba-corner-price,
  body .cp-pha-corner-price{
    font-size: 0.78rem;
  }

  body .cp-nug-corner-label,
  body .cp-npg-corner-label,
  body .cp-jee-corner-label,
  body .cp-mba-corner-label,
  body .cp-pha-corner-label{
    font-size: 0.45rem;
  }

  body .cp-nug-corner-sub,
  body .cp-npg-corner-sub,
  body .cp-jee-corner-sub,
  body .cp-mba-corner-sub,
  body .cp-pha-corner-sub{
    font-size: 0.45rem;
  }

  /* Left side buttons - full width on small phones */
  body .cp-left > div:last-child{
    flex-direction: column;
    gap: 8px;
  }

  body .cp-left .btn-r,
  body .cp-left .btn-o{
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.78rem;
  }
}

/* ─── EXTRA SMALL PHONES (360px and below) ─── */
@media(max-width:360px){
  body .cp-right .cp-nug-visual,
  body .cp-right .cp-npg-visual,
  body .cp-right .cp-jee-visual,
  body .cp-right .cp-mba-visual,
  body .cp-right .cp-pha-visual{
    min-height: 200px;
    border-radius: 12px;
  }

  body .cp-right .cp-nug-img,
  body .cp-right .cp-npg-img,
  body .cp-right .cp-jee-img,
  body .cp-right .cp-mba-img,
  body .cp-right .cp-pha-img{
    min-height: 200px;
    height: 200px;
  }

  body .cp-nug-float,
  body .cp-npg-float,
  body .cp-jee-float,
  body .cp-mba-float,
  body .cp-pha-float{
    padding: 10px 8px;
  }

  body .cp-nug-stat-v,
  body .cp-npg-stat-v,
  body .cp-jee-stat-v,
  body .cp-mba-stat-v,
  body .cp-pha-stat-v{
    font-size: 0.75rem;
  }

  body .cp-nug-stat-l,
  body .cp-npg-stat-l,
  body .cp-jee-stat-l,
  body .cp-mba-stat-l,
  body .cp-pha-stat-l{
    font-size: 0.4rem;
  }
}

/* ════════════════════════════════════════════════════════════
   HERO RANK SEARCH — MOBILE FIX v4
   Fixes: Icon alignment, select centering, clean stacked layout
════════════════════════════════════════════════════════════ */

/* === TABLETS & PHONES (768px and below) === */
@media(max-width:768px){

  /* Container: clean card-style */
  body .rank-search{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 0;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: #fff;
    box-shadow: 0 4px 20px rgba(15,25,41,.08);
    margin-bottom: 20px;
    position: relative;
  }

  /* Icon: absolute top-left, small and subtle */
  body .rank-search .rank-search-ico{
    position: absolute;
    top: 18px;
    left: 16px;
    font-size: 1rem;
    z-index: 2;
    pointer-events: none;
  }

  /* Programme select: full width, left-aligned with icon space */
  body .rank-search select#programmeSelect{
    width: 100%;
    max-width: none;
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    padding: 10px 24px 10px 28px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    text-align: left;
  }

  /* Input: visible border, left-aligned */
  body .rank-search input{
    width: 100%;
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    padding: 12px 0 12px 28px;
    font-size: 0.88rem;
    color: var(--ink);
    background: transparent;
    outline: none;
    text-align: left;
  }
  body .rank-search input::placeholder{
    color: var(--muted2);
    font-size: 0.85rem;
    text-align: left;
  }
  body .rank-search input:focus{
    border-bottom-color: var(--r);
  }

  /* Button: full-width, pill-shaped */
  body .rank-search-btn{
    width: 100%;
    padding: 14px 20px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 100px;
    background: var(--r);
    color: #fff;
    border: none;
    text-align: center;
    justify-content: center;
    margin-top: 8px;
    box-shadow: 0 4px 16px rgba(220,38,38,.35);
    transition: all .2s ease;
    white-space: nowrap;
  }
  body .rank-search-btn:hover{
    background: var(--r2);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(220,38,38,.45);
  }
  body .rank-search-btn:active{
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
  }
}

/* === SMALL PHONES (480px and below) === */
@media(max-width:480px){
  body .rank-search{
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  body .rank-search .rank-search-ico{
    top: 16px;
    left: 14px;
    font-size: 0.95rem;
  }

  body .rank-search select#programmeSelect{
    font-size: 0.85rem;
    padding: 9px 22px 9px 26px;
  }

  body .rank-search input{
    font-size: 0.84rem;
    padding: 10px 0 10px 26px;
  }
  body .rank-search input::placeholder{
    font-size: 0.82rem;
  }

  body .rank-search-btn{
    padding: 12px 18px;
    font-size: 0.88rem;
    margin-top: 6px;
  }
}

/* === EXTRA SMALL PHONES (360px and below) === */
@media(max-width:360px){
  body .rank-search{
    padding: 12px;
    border-radius: 12px;
  }

  body .rank-search .rank-search-ico{
    top: 14px;
    left: 12px;
    font-size: 0.9rem;
  }

  body .rank-search select#programmeSelect{
    font-size: 0.82rem;
    padding: 8px 20px 8px 24px;
  }

  body .rank-search input{
    font-size: 0.8rem;
    padding: 9px 0 9px 24px;
  }

  body .rank-search-btn{
    padding: 11px 16px;
    font-size: 0.85rem;
  }
}

/* === LANDSCAPE PHONES === */
@media(max-width:768px) and (orientation:landscape){
  body .rank-search{
    flex-direction: column;
    padding: 14px;
  }
  body .rank-search select#programmeSelect,
  body .rank-search input,
  body .rank-search-btn{
    width: 100%;
  }
}

/* ─── LANDSCAPE PHONES ─── */
@media(max-width:768px) and (orientation:landscape){
  body .course-panel.on{
    grid-template-columns: 1fr 1fr;  /* Two columns in landscape */
    gap: 16px;
  }

  body .cp-right .cp-nug-visual,
  body .cp-right .cp-npg-visual,
  body .cp-right .cp-jee-visual,
  body .cp-right .cp-mba-visual,
  body .cp-right .cp-pha-visual{
    min-height: 260px;
  }

  body .cp-right .cp-nug-img,
  body .cp-right .cp-npg-img,
  body .cp-right .cp-jee-img,
  body .cp-right .cp-mba-img,
  body .cp-right .cp-pha-img{
    min-height: 260px;
    height: 260px;
  }
}

/* ══ SECTION 5: HOW IT WORKS — SPACING ONLY ══ */
  body .process-sec{
    padding: 40px 4% 32px;
  }
  body .hiw-header{
    margin-bottom: 22px;
  }
  body .hiw-eyebrow{
    font-size: .58rem;
    margin-bottom: 8px;
    gap: 6px;
  }
  body .hiw-eyebrow::before,
  body .hiw-eyebrow::after{
    width: 16px;
  }
  body .hiw-title{
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    margin-bottom: 6px;
    letter-spacing: -.02em;
  }
  body .hiw-sub{
    font-size: .78rem;
    line-height: 1.6;
    max-width: 100%;
  }
  body .hiw-tabs{
    margin-bottom: 12px;
    border-radius: 10px;
  }
  body .hiw-tab{
    padding: 10px 6px 8px;
    gap: 4px;
  }
  body .hiw-tab-num{
    width: 24px;
    height: 24px;
    font-size: .62rem;
    border-width: 1.5px;
  }
  body .hiw-tab-lbl{
    font-size: .62rem;
    max-width: 80px;
  }
  body .hiw-progress-track{
    margin-bottom: 14px;
    height: 2px;
  }
  body .hiw-panel.on{
    border-radius: 14px;
  }
  body .hiw-panel-left{
    padding: 20px 18px 18px;
  }
  body .hiw-big-num{
    font-size: 2.8rem;
    margin-bottom: -8px;
  }
  body .hiw-step-title{
    font-size: 1rem;
    margin-bottom: 6px;
  }
  body .hiw-step-desc{
    font-size: .78rem;
    line-height: 1.65;
    margin-bottom: 10px;
    max-width: 100%;
  }
  body .hiw-bullets{
    gap: 6px;
  }
  body .hiw-bullet{
    font-size: .74rem;
    line-height: 1.45;
    gap: 6px;
  }
  body .hiw-panel-right{
    padding: 16px 14px;
    gap: 8px;
  }
  body .hiw-icon-big{
    font-size: 2.2rem;
    margin-bottom: 0;
  }
  body .hiw-mini-card{
    padding: 9px 11px;
    border-radius: 9px;
  }
  body .hiw-mc-label{
    font-size: .5rem;
    margin-bottom: 3px;
  }
  body .hiw-mc-val{
    font-size: .72rem;
    line-height: 1.4;
  }
  body .hiw-tag{
    font-size: .58rem;
    padding: 2px 8px;
  }
  body .hiw-nav{
    margin-top: 12px;
    gap: 8px;
  }
  body .hiw-nav-btn{
    padding: 7px 16px;
    font-size: .76rem;
  }
  body .hiw-nav-dots{
    gap: 4px;
  }
  body .hiw-dot{
    width: 5px;
    height: 5px;
  }
  body .hiw-dot.on{
    width: 14px;
  }
  body .hiw-cta-strip{
    margin-top: 16px;
    padding: 12px 14px;
    gap: 10px;
  }
  body .hiw-cta-text{
    font-size: .76rem;
  }

  /* ══ SECTION 6: SUCCESS WALL — SPACING ONLY ══ */
  body .success-sec{
    padding: 40px 4% 32px;
  }
  body .success-hd{
    margin-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  body .success-hd .h2{
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
  body .success-filter{
    gap: 5px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  body .success-filter::-webkit-scrollbar{display:none}
  body .sf-btn{
    padding: 5px 12px;
    font-size: .7rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  body .sw-track .sw-card{
    flex: 0 0 calc(50% - 7px);
    padding: 12px;
  }
  body .sw-card::before{height: 2px}
  body .sw-exam-badge{
    font-size: .55rem;
    padding: 2px 6px;
    margin-bottom: 6px;
  }
  body .sw-name{font-size: .85rem}
  body .sw-rank{
    font-size: .68rem;
    margin-bottom: 6px;
  }
  body .sw-arrow{
    font-size: .75rem;
    margin-bottom: 6px;
  }
  body .sw-arrow svg{
    width: 14px;
    height: 14px;
  }
  body .sw-college{font-size: .7rem}
  body .sw-cat{font-size: .6rem}
  body .sw-quote{
    font-size: .68rem;
    padding-top: 7px;
    margin-top: 7px;
    line-height: 1.5;
  }
  body .sw-carousel-nav{
    margin-top: 14px;
    gap: 12px;
  }
  body .sw-nav-btn{
    width: 32px;
    height: 32px;
  }
  body .sw-dots{gap: 4px}
  body .sw-dot{
    width: 6px;
    height: 6px;
  }
  body .sw-dot.on{width: 18px}
  body .sw-prog-wrap{
    margin-top: 12px;
    height: 2px;
  }
  body .success-cta-row{margin-top: 20px}
  body .success-cta-row .btn-r{
    padding: 11px 18px;
    font-size: .82rem;
  }

  /* ══ SECTION 8: EXPERTS / MEET THE TEAM — HORIZONTAL SCROLL CAROUSEL ══ */
  body .experts-sec{
    padding: 40px 4% 32px;
  }
  body .experts-hd{margin-bottom: 24px}
  body .experts-hd .h2{
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
  /* Convert grid to horizontal scroll track */
  body .experts-grid{
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 4px 12px;
    margin: 0 -4px;
  }
  body .experts-grid::-webkit-scrollbar{
    display: none;
  }
  body .experts-grid::after{
    content: '';
    flex: 0 0 4px;
  }
  /* Each card is a scroll snap item */
  body .exp-card{
    flex: 0 0 calc(42% - 6px);
    min-width: 140px;
    max-width: 180px;
    padding: 14px 10px;
    border-radius: 12px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body .exp-card::after{height: 2px}
  body .exp-av{
    width: 48px;
    height: 48px;
    font-size: 1rem;
    margin-bottom: 10px;
  }
  body .exp-name{
    font-size: .82rem;
    margin-bottom: 2px;
  }
  body .exp-role{
    font-size: .65rem;
    margin-bottom: 8px;
  }
  body .exp-tags{
    gap: 3px;
    margin-bottom: 10px;
  }
  body .exp-tag{
    font-size: .52rem;
    padding: 2px 5px;
  }
  body .exp-stat{
    font-size: 1rem;
    margin-bottom: 1px;
  }
  body .exp-stat-l{font-size: .58rem}
  body .exp-divider{
    width: 20px;
    height: 2px;
    margin: 8px auto;
  }

  /* ══ SECTION 10: STATS STRIP — SINGLE LINE COMPACT ══ */
  /* Keep original: dark gradient bg, 5-column grid, white/gold text, borders */
  body .stats-strip{
    padding: 16px 3%;
  }
  body .stats-strip-in{
    /* Force single line: 5 columns, no wrapping */
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
  body .ssi{
    padding: 6px 2px;
    /* Keep original border-right from base CSS */
    min-width: 0;
    overflow: hidden;
  }
  body .ssi-num{
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  body .ssi-lbl{
    font-size: clamp(.38rem, 1.2vw, .48rem);
    margin-top: 2px;
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;
  }
  body .ssi-sub{
    font-size: clamp(.34rem, 1vw, .42rem);
    margin-top: 1px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* ══ SECTION 9: CHAT FAQ / ASK US ANYTHING — SPACING ONLY ══ */
  body .faq-sec{
    padding: 40px 4% 32px;
  }
  body .faq-in{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body .faq-left{order:2}
  body .faq-right{order:1}
  body .faq-chat{
    max-height: 380px;
    border-radius: 14px;
  }
  body .faq-chat-head{padding: 12px 14px}
  body .fch-av{
    width: 30px;
    height: 30px;
    font-size: .7rem;
  }
  body .fch-name{font-size: .8rem}
  body .fch-status{font-size: .62rem}
  body .faq-chat-body{
    padding: 12px;
    max-height: 260px;
    gap: 8px;
  }
  body .chat-bubble{
    padding: 9px 12px;
    font-size: .78rem;
    max-width: 88%;
  }
  body .chat-a-av{
    width: 24px;
    height: 24px;
    font-size: .52rem;
  }
  body .chat-q-selector{
    padding: 0 10px 10px;
    gap: 5px;
  }
  body .cqs-btn{
    padding: 5px 10px;
    font-size: .68rem;
  }
  body .faq-list{gap: 0}
  body .faq-q-row{
    padding: 12px 0;
    gap: 10px;
  }
  body .faq-q-text{font-size: .84rem}
  body .faq-q-ico{
    width: 22px;
    height: 22px;
    font-size: .65rem;
  }
  body .faq-ans{
    padding: 0 0 12px;
    font-size: .78rem;
    line-height: 1.65;
  }

  /* ══ FOOTER — COMPACT MOBILE FIX ══ */
  body .ft{
    padding-top: 0;
  }
  body .ft-grid{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 24px 0 16px;
  }
  body .ft-grid > div:first-child{
    grid-column: 1 / -1;
  }
  body .ft-name{
    font-size: 1.15rem;
    margin-bottom: 2px;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-weight: 800;
  }
  body .ft-tag{
    font-size: .42rem;
    margin-bottom: 6px;
    letter-spacing: .1em;
    font-weight: 600;
  }
  body .ft-desc{
    font-size: .68rem;
    line-height: 1.5;
    margin-bottom: 8px;
    max-width: 100%;
  }
  body .ft-pills{
    gap: 3px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    display: flex;
  }
  body .ft-pill{
    padding: 2px 6px;
    font-size: .52rem;
    gap: 3px;
  }
  body .ft-socs{
    gap: 5px;
  }
  body .ft-soc{
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: .72rem;
  }
  body .ft-col h5{
    font-size: .5rem;
    margin-bottom: 6px;
    padding-bottom: 5px;
    letter-spacing: .16em;
  }
  body .ft-col ul{gap: 0}
  body .ft-col ul li span{
    padding: 3px 5px;
    font-size: .68rem;
    border-radius: 5px;
  }
  body .ft-ci{
    gap: 6px;
    padding: 4px 0;
  }
  body .ft-ci-ico{
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: .68rem;
  }
  body .ft-ci-l{
    font-size: .46rem;
    margin-bottom: 0;
    letter-spacing: .08em;
  }
  body .ft-ci-v{
    font-size: .66rem;
  }
  body .ft-live{
    margin-top: 6px;
    padding: 4px 8px;
    font-size: .55rem;
    gap: 4px;
    border-radius: 5px;
  }
  body .ft-live-dot{
    width: 4px;
    height: 4px;
  }
  body .ft-bot{
    padding: 10px 0 14px;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  body .ft-copy{
    font-size: .58rem;
  }
  body .ft-blinks{
    gap: 6px;
  }
  body .ft-blinks span{
    font-size: .58rem;
  }
  body .ft-top-btn{
    padding: 4px 8px;
    font-size: .58rem;
    border-radius: 5px;
  }
}

/* ─── SMALL PHONES (480px) ─── */
@media(max-width:480px){

  /* ══ HERO — SMALLER SPACING ══ */
  body 
  body .hero-in{
    padding: 28px 4% 24px;
    gap: 24px;
  }
  body .hero-eyebrow{
    margin-bottom: 10px;
    gap: 6px;
  }
  body .hero-live-badge{
    padding: 3px 8px;
    font-size: .6rem;
  }
  body .hero-h{
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    margin-bottom: 10px;
  }
  body .hero-h .line-stroke::after{
    height: 3px;
    bottom: 3px;
  }
  body .hero-sub{
    font-size: .82rem;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  body .rank-search{
    padding: 4px 4px 4px 12px;
    gap: 5px;
    margin-bottom: 14px;
    border-radius: 10px;
    border-width: 1.5px;
  }
  body .rank-search input{
    font-size: .8rem;
  }
  body .rank-search-btn{
    padding: 8px 12px;
    font-size: .72rem;
  }
  body .rank-result-preview{
    padding: 8px 12px;
    margin-bottom: 14px;
  }
  body .rp-text{
    font-size: .72rem;
  }
  body .rp-sub{
    font-size: .65rem;
  }
  body .hero-trust{
    gap: 10px;
  }
  body .ht-item{
    font-size: .68rem;
  }
  body .ht-ico{
    width: 14px;
    height: 14px;
    font-size: .52rem;
  }
  body .hero-visual{
    min-height: 260px;
    max-height: 340px;
  }
  body .hf{
    padding: 8px 10px;
    border-radius: 10px;
    gap: 6px;
  }
  body .hf-icon{
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: .82rem;
  }
  body .hf-val{
    font-size: .95rem;
  }
  body .hf-lbl{
    font-size: .52rem;
  }
  body .hf1{
    top: 12px;
    left: -8px;
  }
  body .hf2{
    bottom: 70px;
    left: -10px;
  }
  body .hf3{
    top: 30px;
    right: -8px;
  }
  body .hf4{
    bottom: 18px;
    right: -6px;
  }
  body .hero-college-stack{
    bottom: 10px;
    left: 10px;
    right: 10px;
    gap: 4px;
  }
  body .hero-c-card{
    padding: 6px 8px;
    border-radius: 7px;
    gap: 6px;
  }
  body .hcc-ico{
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: .72rem;
  }
  body .hcc-name{
    font-size: .65rem;
  }
  body .hcc-meta{
    font-size: .52rem;
  }
  body .hcc-badge{
    font-size: .48rem;
    padding: 1px 5px;
  }

  /* ══ PROBLEM — SMALLER SPACING ══ */
  body .problem-sec{
    padding: 28px 4% 28px;
  }
  body .problem-in{
    gap: 16px;
  }
  body .problem-h{
    font-size: clamp(1.2rem, 5vw, 1.45rem);
    margin-bottom: 8px;
  }
  body .problem-p{
    font-size: .79rem;
    margin-bottom: 14px;
  }
  body .ps-item{
    padding: 10px 4px;
  }
  body .ps-num{
    font-size: 1.08rem;
  }
  body .ps-lbl{
    font-size: .53rem;
  }
  body .cc-card{
    padding: 10px 12px;
  }
  body .cc-label{
    font-size: .72rem;
  }
  body .cc-val{
    font-size: .86rem;
  }
  body .cc-desc{
    font-size: .65rem;
  }

  /* ══ COURSES — SMALLER SPACING ══ */
  body .courses-sec{
    padding: 36px 3.5% 28px;
  }
  body .courses-tabs{
    gap: 5px;
    margin-bottom: 18px;
  }
  body .ct-btn{
    padding: 7px 12px;
    font-size: .72rem;
  }
  body .ct-btn span{
    font-size: .88rem;
  }
  body .course-panel.on{
    gap: 18px;
  }
  body .cp-left .cp-h{
    font-size: 1.2rem;
  }
  body .cp-left .cp-p{
    font-size: .78rem;
    margin-bottom: 12px;
  }
  body .cp-stats-row{
    gap: 5px;
    margin-bottom: 12px;
  }
  body .cp-stats-row .cpsr{
    padding: 8px 5px;
  }
  body .cpsr-v{
    font-size: 1rem;
  }
  body .cp-features{
    gap: 6px;
    margin-bottom: 14px;
  }
  body .cp-feat{
    font-size: .74rem;
  }
  body .cp-left .btn-r,
  body .cp-left .btn-o{
    padding: 10px 14px;
    font-size: .78rem;
  }
  body .cp-right .cp-nug-visual,
  body .cp-right .cp-npg-visual,
  body .cp-right .cp-jee-visual,
  body .cp-right .cp-mba-visual,
  body .cp-right .cp-pha-visual{
    min-height: 320px;
  }
  body .cp-right .cp-nug-img,
  body .cp-right .cp-npg-img,
  body .cp-right .cp-jee-img,
  body .cp-right .cp-mba-img,
  body .cp-right .cp-pha-img{
    min-height: 320px;
    height: 320px;
  }
  body .cp-nug-float,
  body .cp-npg-float,
  body .cp-jee-float,
  body .cp-mba-float,
  body .cp-pha-float{
    padding: 12px 10px 12px;
  }
  body .cp-nug-stats-row,
  body .cp-npg-stats-row,
  body .cp-jee-stats-row,
  body .cp-mba-stats-row,
  body .cp-pha-stats-row{
    gap: 4px;
    margin-bottom: 10px;
  }
  body .cp-nug-stat,
  body .cp-npg-stat,
  body .cp-jee-stat,
  body .cp-mba-stat,
  body .cp-pha-stat{
    padding: 6px 4px;
  }
  body .cp-nug-stat-v,
  body .cp-npg-stat-v,
  body .cp-jee-stat-v,
  body .cp-mba-stat-v,
  body .cp-pha-stat-v{
    font-size: .82rem;
  }
  body .cp-nug-btn-primary,
  body .cp-npg-btn-primary,
  body .cp-jee-btn-primary,
  body .cp-mba-btn-primary,
  body .cp-pha-btn-primary{
    padding: 9px 12px;
    font-size: .72rem;
  }
  body .cp-nug-btn-ghost,
  body .cp-npg-btn-ghost,
  body .cp-jee-btn-ghost,
  body .cp-mba-btn-ghost,
  body .cp-pha-btn-ghost{
    padding: 9px 10px;
    font-size: .68rem;
  }

  /* ══ HOW IT WORKS — SMALLER SPACING ══ */
  body .process-sec{
    padding: 32px 3.5% 28px;
  }
  body .hiw-header{
    margin-bottom: 18px;
  }
  body .hiw-eyebrow{
    font-size: .55rem;
    margin-bottom: 6px;
  }
  body .hiw-title{
    font-size: 1.2rem;
    margin-bottom: 5px;
  }
  body .hiw-sub{
    font-size: .74rem;
    line-height: 1.55;
  }
  body .hiw-tabs{
    margin-bottom: 10px;
    border-radius: 8px;
  }
  body .hiw-tab{
    padding: 8px 4px 6px;
    gap: 3px;
  }
  body .hiw-tab-num{
    width: 22px;
    height: 22px;
    font-size: .58rem;
  }
  body .hiw-tab-lbl{
    font-size: .55rem;
    max-width: 70px;
  }
  body .hiw-progress-track{
    margin-bottom: 12px;
  }
  body .hiw-panel-left{
    padding: 16px 14px 14px;
  }
  body .hiw-big-num{
    font-size: 2.4rem;
    margin-bottom: -6px;
  }
  body .hiw-step-title{
    font-size: .92rem;
  }
  body .hiw-step-desc{
    font-size: .74rem;
    margin-bottom: 8px;
  }
  body .hiw-bullet{
    font-size: .7rem;
    gap: 5px;
  }
  body .hiw-panel-right{
    padding: 12px 10px;
    gap: 6px;
  }
  body .hiw-icon-big{
    font-size: 1.8rem;
  }
  body .hiw-mini-card{
    padding: 7px 9px;
    border-radius: 8px;
  }
  body .hiw-mc-label{
    font-size: .46rem;
  }
  body .hiw-mc-val{
    font-size: .68rem;
  }
  body .hiw-tag{
    font-size: .55rem;
    padding: 2px 6px;
  }
  body .hiw-nav{
    margin-top: 10px;
  }
  body .hiw-nav-btn{
    padding: 6px 12px;
    font-size: .72rem;
  }
  body .hiw-cta-strip{
    margin-top: 14px;
    padding: 10px 12px;
    gap: 8px;
  }
  body .hiw-cta-text{
    font-size: .72rem;
  }

  /* ══ SUCCESS WALL — 1 card per row ══ */
  body .success-sec{
    padding: 32px 3.5% 28px;
  }
  body .sw-track .sw-card{
    flex: 0 0 100%;
    padding: 14px;
  }
  body .sw-name{font-size: .88rem}
  body .sw-quote{font-size: .72rem}
  body .success-hd .h2{font-size: 1.25rem}
  body .sf-btn{
    padding: 4px 10px;
    font-size: .65rem;
  }

  /* ══ EXPERTS — HORIZONTAL SCROLL COMPACT ══ */
  body .experts-sec{
    padding: 32px 3.5% 28px;
  }
  body .experts-grid{
    gap: 10px;
    padding: 3px 3px 10px;
    margin: 0 -3px;
  }
  body .experts-grid::after{
    flex: 0 0 3px;
  }
  body .exp-card{
    flex: 0 0 calc(44% - 5px);
    min-width: 130px;
    max-width: 160px;
    padding: 12px 8px;
    border-radius: 10px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body .exp-av{
    width: 42px;
    height: 42px;
    font-size: .9rem;
    margin-bottom: 8px;
  }
  body .exp-name{font-size: .75rem}
  body .exp-role{
    font-size: .6rem;
    margin-bottom: 6px;
  }
  body .exp-tags{margin-bottom: 8px}
  body .exp-tag{
    font-size: .48rem;
    padding: 2px 4px;
  }
  body .exp-stat{font-size: .92rem}
  body .exp-stat-l{font-size: .52rem}

  /* ══ STATS STRIP — SINGLE LINE ULTRA COMPACT ══ */
  body .stats-strip{
    padding: 12px 2%;
  }
  body .stats-strip-in{
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
  body .ssi{
    padding: 4px 1px;
    min-width: 0;
    overflow: hidden;
  }
  body .ssi-num{
    font-size: clamp(.95rem, 3.5vw, 1.3rem);
    letter-spacing: -.01em;
    white-space: nowrap;
  }
  body .ssi-lbl{
    font-size: clamp(.32rem, 1vw, .4rem);
    margin-top: 1px;
    letter-spacing: .02em;
    line-height: 1.15;
    white-space: nowrap;
  }
  body .ssi-sub{
    font-size: clamp(.28rem, .9vw, .36rem);
    margin-top: 0px;
    line-height: 1.15;
    white-space: nowrap;
  }

  /* ══ FAQ — TIGHTER ══ */
  body .faq-sec{
    padding: 32px 3.5% 28px;
  }
  body .faq-chat{max-height: 340px}
  body .faq-chat-head{padding: 10px 12px}
  body .faq-chat-body{
    padding: 10px;
    max-height: 220px;
  }
  body .chat-bubble{
    padding: 8px 10px;
    font-size: .74rem;
  }
  body .cqs-btn{
    padding: 4px 8px;
    font-size: .62rem;
  }
  body .faq-q-text{font-size: .8rem}
  body .faq-ans{font-size: .74rem}
  /* ══ FOOTER — ULTRA COMPACT (480px) ══ */
  body .ft-grid{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 0 12px;
  }
  body .ft-grid > div:first-child{
    grid-column: auto;
  }
  body .ft-name{
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: 800;
  }
  body .ft-tag{
    font-size: .38rem;
    margin-bottom: 5px;
    letter-spacing: .08em;
    font-weight: 600;
  }
  body .ft-desc{
    font-size: .65rem;
    line-height: 1.45;
    margin-bottom: 8px;
  }
  body .ft-pills{
    margin-bottom: 8px;
    gap: 3px;
    display: flex;
    flex-wrap: wrap;
  }
  body .ft-pill{
    padding: 2px 5px;
    font-size: .48rem;
  }
  body .ft-soc{
    width: 24px;
    height: 24px;
    border-radius: 5px;
    font-size: .68rem;
  }
  body .ft-col h5{
    font-size: .48rem;
    margin-bottom: 5px;
    padding-bottom: 4px;
    letter-spacing: .14em;
  }
  body .ft-col ul{gap: 0}
  body .ft-col ul li span{
    padding: 2px 4px;
    font-size: .65rem;
    border-radius: 4px;
  }
  body .ft-ci{
    gap: 5px;
    padding: 3px 0;
  }
  body .ft-ci-ico{
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: .62rem;
  }
  body .ft-ci-l{
    font-size: .42rem;
    letter-spacing: .06em;
  }
  body .ft-ci-v{
    font-size: .62rem;
  }
  body .ft-live{
    margin-top: 5px;
    padding: 3px 6px;
    font-size: .5rem;
    gap: 3px;
    border-radius: 4px;
  }
  body .ft-bot{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 8px 0 12px;
    gap: 6px;
  }
  body .ft-copy{
    font-size: .54rem;
  }
  body .ft-blinks{
    gap: 5px;
  }
  body .ft-blinks span{
    font-size: .54rem;
  }
  body .ft-top-btn{
    padding: 3px 6px;
    font-size: .54rem;
    border-radius: 4px;
  }
}

/* ════════════════════════════════════════════════════════════
   HEADER / NAV — MOBILE SPACING FIXES v2
   Based on screenshot analysis: logo text too large, CTA oversized,
   hamburger misaligned. Compact but readable.
════════════════════════════════════════════════════════════ */

@media(max-width:768px){
  /* Nav container — compact but not cramped */
  body .nav{
    height: 64px;
  }
  body .nav-in{
    height: 64px;
    padding: 0 4%;
    gap: 10px;
  }

  /* Logo — new VP design, compact */
  body .nav-logo{
    gap: 6px;
    align-items: center;
  }
  body .nav-logo-box{
    width: 148px;
    height: 48px;
    border-radius: 0;
    background: transparent;
    flex-shrink: 0;
  }
  body .nav-logo-box img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Nav links — hidden, hamburger handles navigation */
  body .nav-links{
    display: none !important;
  }

  /* Right side — Sign In + hamburger */
  body .nav-right{
    gap: 8px;
    align-items: center !important;
    margin-left: auto;
    display: flex;
  }
  body .nav-right .btn-cta{
    display: none !important;
  }
  /* Sign In button — compact */
  body .nav-right .btn-ghost{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    padding: 8px 14px;
    font-size: .75rem;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .01em;
    line-height: 1;
  }

  /* Hamburger — better aligned with CTA */
  body .ham{
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    gap: 5px;
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
  }
  body .ham span{
    width: 22px;
    height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: all .3s;
    margin: 0;
    display: block;
  }

  /* Mobile menu — adjust top for smaller nav */
  body .mob-menu{padding-top:0}
  body .mob-menu ul{
    padding: 0 4% 16px;
  }
  body .mob-menu ul li a{
    padding: 12px 0;
    font-size: .95rem;
    border-bottom: 1px solid var(--border);
  }
  body .mob-menu-btns{
    padding: 0 4% 32px;
    gap: 8px;
    margin-top: 8px;
  }
  body .mob-btn-p{
    padding: 12px;
    font-size: .9rem;
    border-radius: 9px;
  }
  body .mob-btn-g{
    padding: 11px;
    font-size: .88rem;
    border-radius: 9px;
  }
}

@media(max-width:480px){
  /* Ultra compact for small phones */
  body .nav{
    height: 58px;
  }
  body .nav-in{
    height: 58px;
    padding: 0 3.5%;
    gap: 8px;
  }

  body .nav-logo{
    gap: 5px;
  }
  body .nav-logo-box{
    width: 131px;
    height: 42px;
    border-radius: 0;
    background: transparent;
  }
  body .nav-logo-box img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  body .nav-right .btn-cta{
    display: none !important;
  }
  body .nav-right .btn-ghost{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    padding: 6px 10px;
    font-size: .68rem;
    border-radius: 7px;
    font-weight: 600;
    line-height: 1;
  }

  body .ham{
    width: 32px;
    height: 32px;
    gap: 4px;
    padding: 3px;
    align-items: center !important;
    justify-content: center;
  }
  body .ham span{
    width: 20px;
    height: 2px;
    margin: 0;
    display: block;
  }

  body .mob-menu{padding-top:0}
  body .mob-menu ul li a{
    padding: 10px 0;
    font-size: .88rem;
  }
  body .mob-menu-btns{
    padding: 0 3.5% 28px;
  }
  body .mob-btn-p{
    padding: 10px;
    font-size: .85rem;
  }
  body .mob-btn-g{
    padding: 9px;
    font-size: .82rem;
  }
}

/* ════════════════════════════════════════════════════════════
   FOOTER LOGO — NEW VP DESIGN
════════════════════════════════════════════════════════════ */

body .ft-name{
  font-family: 'Sora', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 3px;
}
body .ft-name em{
  font-style: normal;
  color: var(--gold);
}
body .ft-tag{
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  display: block;
  margin-bottom: 12px;
  line-height: 1.2;
}

@media(max-width:768px){
  body .ft-name{
    font-size: 1.35rem;
    letter-spacing: .03em;
  }
  body .ft-tag{
    font-size: .48rem;
    letter-spacing: .12em;
    margin-bottom: 10px;
  }
}

@media(max-width:480px){
  body .ft-name{
    font-size: 1.2rem;
    letter-spacing: .02em;
  }
  body .ft-tag{
    font-size: .42rem;
    letter-spacing: .1em;
    margin-bottom: 8px;
  }
}
/* ─── ACCESSIBILITY: Reduced Motion ─── */
@media(prefers-reduced-motion:reduce){
  body .sw-track{transition:none}
  .nav-icon,.nav-links a .nav-icon{transition:none}
}

/* ════════════════════════════════════════════════════════════
   HERO RANK SEARCH — MOBILE FIX v2
   Fixes: Button overflow, cramped layout, poor touch targets
   Author: Senior Frontend Developer / UI-UX Expert
════════════════════════════════════════════════════════════ */

@media(max-width:768px){
  /* Container: allow wrapping on very small screens */
  body .rank-search{
    flex-wrap: wrap;
    padding: 6px 6px 6px 12px;
    gap: 6px;
    border-radius: 12px;
  }

  /* Programme select: compact but readable */
  body .rank-search select#programmeSelect{
    font-size: 0.82rem;
    padding: 6px 8px;
    border-right-width: 1px;
    min-width: 110px;
    max-width: 140px;
    flex-shrink: 0;
  }

  /* Input: flexible but minimum readable width */
  body .rank-search input{
    font-size: 0.85rem;
    padding: 6px 8px;
    min-width: 0;
    flex: 1;
  }

  /* Button: proper touch target, never shrink too small */
  body .rank-search-btn{
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 120px;
    text-align: center;
    justify-content: center;
  }
}

/* Small phones: stack select above input+button row */
@media(max-width:480px){
  body .rank-search{
    padding: 5px 5px 5px 10px;
    gap: 5px;
    border-radius: 10px;
  }

  /* Select goes full width on its own row */
  body .rank-search select#programmeSelect{
    width: 100%;
    max-width: none;
    border-right: none;
    border-bottom: 1.5px solid var(--border);
    padding: 6px 8px;
    font-size: 0.78rem;
    margin-bottom: 2px;
  }

  /* Input and button share second row */
  body .rank-search input{
    font-size: 0.8rem;
    padding: 5px 6px;
    min-width: 0;
  }

  body .rank-search-btn{
    padding: 9px 12px;
    font-size: 0.78rem;
    border-radius: 8px;
    min-width: 100px;
  }
}

/* Extra small phones: single column stack */
@media(max-width:360px){
  body .rank-search{
    flex-direction: column;
    align-items: stretch;
    padding: 6px;
    gap: 5px;
  }

  body .rank-search select#programmeSelect{
    width: 100%;
    border-right: none;
    border-bottom: 1.5px solid var(--border);
    padding: 7px 8px;
    font-size: 0.8rem;
    text-align: center;
  }

  body .rank-search input{
    width: 100%;
    padding: 7px 8px;
    font-size: 0.8rem;
    text-align: center;
  }

  /* Full width button for best CTA visibility */
  body .rank-search-btn{
    width: 100%;
    padding: 11px 16px;
    font-size: 0.85rem;
    border-radius: 10px;
    justify-content: center;
  }
}

/* Landscape phones: keep horizontal but compact */
@media(max-width:768px) and (orientation:landscape){
  body .rank-search{
    flex-wrap: nowrap;
    flex-direction: row;
  }
  body .rank-search select#programmeSelect{
    width: auto;
    border-right: 1.5px solid var(--border);
    border-bottom: none;
    max-width: 130px;
  }
  body .rank-search input{
    flex: 1;
  }
  body .rank-search-btn{
    width: auto;
    min-width: 110px;
  }
}

/* ─── LANDSCAPE PHONES ─── */
@media(max-width:768px) and (orientation:landscape){
  body .hero,
  body .courses-sec,
  body .process-sec,
  body .success-sec,
  body .experts-sec,
  body .faq-sec{
    padding: 28px 4% 24px;
  }
  body .problem-sec,
  body .stats-strip{
    padding: 20px 4%;
  }
}

/* ─── ACCESSIBILITY: High Contrast Mode ─── */
@media (prefers-contrast: more) {
  .nav-icon svg { stroke-width: 2.5; }
  .nav-links a:hover .nav-icon,
  .nav-links a.on .nav-icon { stroke: var(--ink); }
}

/* ════════════════════════════════════════════════════════════
   COURSE BOTTOM NAVIGATION — Mobile Course Switcher
   5 Items: NEET UG | NEET PG | JEE | MBA | PHARMACY
════════════════════════════════════════════════════════════ */

.bottom-nav{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:495;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 24px rgba(15,25,41,.08),0 -1px 4px rgba(15,25,41,.04);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bn-track{
  display:flex;
  align-items:center;
  justify-content:space-around;
  max-width:640px;
  margin:0 auto;
  padding:6px 8px 10px;
  gap:2px;
}
.bn-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:6px 4px;
  border-radius:12px;
  cursor:pointer;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  text-decoration:none;
  color:var(--muted);
  min-width:56px;
  flex:1;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  min-height:48px;
}
.bn-item:active{transform:scale(.92)}
.bn-ico{
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  line-height:1;
  transition:all .2s ease;
  position:relative;
  background:var(--bg2);
  border:1.5px solid transparent;
}
.bn-item.on .bn-ico{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  border-color:currentColor;
}
.bn-label{
  font-size:.58rem;
  font-weight:600;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
  transition:all .18s ease;
  letter-spacing:.02em;
}
.bn-item.on .bn-label{
  font-weight:700;
}
.bn-item.on::after{
  content:'';
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
}
.bn-item[data-bn="nug"] .bn-ico{background:#FEE2E2}
.bn-item[data-bn="nug"].on{color:var(--r)}
.bn-item[data-bn="nug"].on .bn-ico{background:#FEE2E2;border-color:var(--r);box-shadow:0 4px 12px rgba(220,38,38,.3)}
.bn-item[data-bn="npg"] .bn-ico{background:#E0F7FA}
.bn-item[data-bn="npg"].on{color:#0891B2}
.bn-item[data-bn="npg"].on .bn-ico{background:#E0F7FA;border-color:#0891B2;box-shadow:0 4px 12px rgba(8,145,178,.3)}
.bn-item[data-bn="jee"] .bn-ico{background:#EFF6FF}
.bn-item[data-bn="jee"].on{color:#1D4ED8}
.bn-item[data-bn="jee"].on .bn-ico{background:#EFF6FF;border-color:#1D4ED8;box-shadow:0 4px 12px rgba(29,78,216,.3)}
.bn-item[data-bn="mba"] .bn-ico{background:#F5F3FF}
.bn-item[data-bn="mba"].on{color:#7C3AED}
.bn-item[data-bn="mba"].on .bn-ico{background:#F5F3FF;border-color:#7C3AED;box-shadow:0 4px 12px rgba(124,58,237,.3)}
.bn-item[data-bn="pha"] .bn-ico{background:#ECFDF5}
.bn-item[data-bn="pha"].on{color:#059669}
.bn-item[data-bn="pha"].on .bn-ico{background:#ECFDF5;border-color:#059669;box-shadow:0 4px 12px rgba(5,150,105,.3)}
.bn-item[data-bn="law"] .bn-ico{background:#FEF3C7}
.bn-item[data-bn="law"].on{color:#D97706}
.bn-item[data-bn="law"].on .bn-ico{background:#FEF3C7;border-color:#D97706;box-shadow:0 4px 12px rgba(217,119,6,.3)}
@media(max-width:768px){
  .bottom-nav{display:block}
  body{padding-bottom:72px}
  
  
}
@media(max-width:480px){
  .bn-track{padding:5px 4px 8px;gap:1px}
  .bn-item{min-width:52px;padding:5px 2px;gap:2px}
  .bn-ico{width:28px;height:28px;font-size:1rem;border-radius:8px}
  .bn-label{font-size:.52rem}
  body{padding-bottom:66px}
  
}
@media(max-width:360px){
  .bn-item{min-width:48px;padding:4px 1px}
  .bn-ico{width:26px;height:26px;font-size:.9rem}
  .bn-label{font-size:.48rem}
  body{padding-bottom:62px}
}
/* Hide bottom nav only in short landscape (phone landscape) — not tablets */
@media(max-height:500px) and (orientation:landscape){
  .bottom-nav{display:none}
  body{padding-bottom:0}
}
@media(display-mode:standalone){
  .bottom-nav{border-top:none;box-shadow:0 -4px 30px rgba(15,25,41,.12)}
  .bn-track{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .bn-item,.bn-ico{transition:none}
}

/* MQAC v5 CSS */
/* ════════════════════════════════════════════════════════════
   MQAC v5 — ROUNDED PILL BUTTONS WITH SHADOWS
   Elevated iOS-style chips, soft layered shadows, tactile press
════════════════════════════════════════════════════════════ */

.mqac-v5{
  display:none;
  background:linear-gradient(180deg,#fff 0%,#F8FAFF 100%);
  border-bottom:1px solid rgba(226,232,240,.6);
  padding:12px 0 10px;
  position:sticky;
  top:56px;
  z-index:400;
  -webkit-overflow-scrolling:touch;
}

.mqac-v5-scroll{
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 4%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.mqac-v5-scroll::-webkit-scrollbar{
  display:none;
}

/* ── PILL BUTTON ── */
.mqac-v5-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 16px 9px 12px;
  border-radius:100px;
  background:#fff;
  border:1px solid rgba(226,232,240,.8);
  text-decoration:none;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  scroll-snap-align:start;
  position:relative;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* Layered soft shadow — the key design element */
  box-shadow:
    0 1px 2px rgba(15,25,41,.04),
    0 2px 4px rgba(15,25,41,.03),
    0 4px 8px rgba(15,25,41,.02),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:all .18s cubic-bezier(.4,0,.2,1);
  flex-shrink:0;
}

/* Hover lift (desktop) */
@media(hover:hover){
  .mqac-v5-pill:hover{
    transform:translateY(-1px);
    box-shadow:
      0 2px 4px rgba(15,25,41,.06),
      0 4px 8px rgba(15,25,41,.04),
      0 8px 16px rgba(15,25,41,.03),
      inset 0 1px 0 rgba(255,255,255,.8);
    border-color:rgba(203,213,225,.9);
  }
}

/* Active / pressed state */
.mqac-v5-pill:active{
  transform:scale(.96) translateY(0);
  box-shadow:
    0 1px 2px rgba(15,25,41,.03),
    inset 0 2px 4px rgba(15,25,41,.04);
  background:#F8FAFF;
}

/* Active section indicator — BRAND RED ELEVATION */
.mqac-v5-pill.mqac-v5-on{
  background:linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  color:#fff;
  border-color:rgba(220,38,38,.5);
  box-shadow:
    0 2px 8px rgba(220,38,38,.25),
    0 4px 16px rgba(220,38,38,.2),
    0 8px 24px rgba(220,38,38,.15),
    inset 0 1px 0 rgba(255,255,255,.2);
  transform:scale(1.02);
}
.mqac-v5-pill.mqac-v5-on:active{
  transform:scale(.98);
  box-shadow:
    0 1px 4px rgba(220,38,38,.2),
    0 2px 8px rgba(220,38,38,.15),
    inset 0 2px 4px rgba(0,0,0,.1);
}
.mqac-v5-pill.mqac-v5-on .mqac-v5-icon{
  filter:none;
  background:rgba(255,255,255,.25) !important;
  transform:scale(1.1);
}
.mqac-v5-pill.mqac-v5-on .mqac-v5-text{
  font-weight:700;
  letter-spacing:.02em;
}
.mqac-v5-pill.mqac-v5-on .mqac-v5-tag{
  background:#fff;
  color:var(--r);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  animation:none;
}

/* ── ICON ── */
.mqac-v5-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
  line-height:1;
  flex-shrink:0;
  transition:transform .15s ease;
}
.mqac-v5-pill:active .mqac-v5-icon{
  transform:scale(.9);
}

/* Icon backgrounds */
.mqac-v5-icon-rp{background:#FEE2E2}
.mqac-v5-icon-cf{background:#EFF6FF}
.mqac-v5-icon-cc{background:#F5F3FF}
.mqac-v5-icon-hw{background:#ECFDF5}
.mqac-v5-icon-ss{background:#FEF3C7}

/* ── TEXT ── */
.mqac-v5-text{
  position:relative;
  top:.5px;
}

/* ── TAG (Hot/New badge) ── */
.mqac-v5-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:100px;
  font-size:.52rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:linear-gradient(135deg,#7C3AED,#6D28D9);
  color:#fff;
  margin-left:2px;
  box-shadow:0 1px 4px rgba(124,58,237,.3);
  animation:mqacV5TagPulse 2.2s ease-in-out infinite;
}

@keyframes mqacV5TagPulse{
  0%,100%{box-shadow:0 1px 4px rgba(124,58,237,.3)}
  50%{box-shadow:0 2px 8px rgba(124,58,237,.5)}
}

/* ── TABLET/MOBILE SHOW ── */
@media(max-width:768px){
  .mqac-v5{
    display:block;
  }
  .hero{
    padding-top:0;
  }
  .hero-in{
    padding-top:28px;
  }
}

/* ── SMALL PHONE ── */
@media(max-width:480px){
  .mqac-v5{
    top:50px;
    padding:10px 0 8px;
  }
  .mqac-v5-scroll{
    gap:8px;
    padding:2px 3.5%;
  }
  .mqac-v5-pill{
    padding:8px 14px 8px 10px;
    font-size:.72rem;
    gap:6px;
  }
  .mqac-v5-icon{
    width:20px;
    height:20px;
    font-size:.75rem;
  }
  .mqac-v5-tag{
    font-size:.48rem;
    padding:2px 6px;
  }
}

/* ── EXTRA SMALL ── */
@media(max-width:360px){
  .mqac-v5-pill{
    padding:7px 12px 7px 9px;
    font-size:.68rem;
    gap:5px;
  }
  .mqac-v5-icon{
    width:18px;
    height:18px;
    font-size:.7rem;
  }
}

/* ── LANDSCAPE SHORT ── */
@media(max-height:500px) and (orientation:landscape) and (max-width:768px){
  .mqac-v5{
    position:relative;
    top:0;
    padding:8px 0 6px;
  }
  .mqac-v5-pill{
    padding:6px 12px 6px 8px;
    font-size:.68rem;
  }
  .mqac-v5-icon{
    width:18px;
    height:18px;
  }
}

/* ── PWA STANDALONE ── */
@media(display-mode:standalone){
  .mqac-v5{
    top:0;
    border-top:none;
    padding-top:max(12px, env(safe-area-inset-top));
  }
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  .mqac-v5-pill,.mqac-v5-icon{
    transition:none;
  }
  .mqac-v5-tag{
    animation:none;
  }
}

/* ── HIGH CONTRAST ── */
@media(prefers-contrast:more){
  .mqac-v5-pill{
    border-width:2px;
  }
  .mqac-v5-pill.mqac-v5-on{
    border-color:#fff;
  }
}

/* END MQAC v5 CSS */

/* ════════════════════════════════════════════════════════════
   COURSES MEGA MENU — RIGHT PANEL REDESIGN v2
   Professional card layout, hover effects, color coding
════════════════════════════════════════════════════════════ */

/* Right panel container */
.cm-right{
  background:linear-gradient(160deg,#FAFBFF,#F0F4FF);
  border-left:1px solid var(--border);
  padding:0;
  position:relative;
  overflow:hidden;
  min-height:420px;
}

/* Category panel */
.cm-panel{
  position:absolute;
  inset:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transform:translateX(12px);
  transition:all .28s cubic-bezier(.4,0,.2,1);
}
.cm-panel.active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

/* Panel header */
.cm-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:2px solid var(--border);
}
.cm-header-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0;
}
.cm-header-title{
  font-family:'Sora',sans-serif;
  font-size:.9rem;
  font-weight:800;
  color:var(--ink);
  line-height:1.2;
}
.cm-header-count{
  margin-left:auto;
  font-size:.6rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  background:var(--bg2);
  color:var(--muted);
  letter-spacing:.04em;
}

/* Course grid */
.cm-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  overflow-y:auto;
  flex:1;
  padding-right:4px;
}
.cm-grid::-webkit-scrollbar{width:3px}
.cm-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Course item */
.cm-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:8px;
  font-size:.74rem;
  font-weight:500;
  color:var(--ink2);
  cursor:pointer;
  transition:all .18s ease;
  border:1.5px solid transparent;
  line-height:1.35;
}
.cm-item:hover{
  background:#fff;
  border-color:var(--border);
  box-shadow:0 2px 8px rgba(15,25,41,.06);
  transform:translateX(3px);
}
.cm-item-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
  transition:transform .2s ease;
}
.cm-item:hover .cm-item-dot{
  transform:scale(1.4);
}

/* Category color accents */
.cm-eng .cm-header{border-color:rgba(29,78,216,.25)}
.cm-eng .cm-header-icon{background:#EFF6FF}
.cm-eng .cm-item-dot{background:var(--b2)}
.cm-eng .cm-item:hover{border-color:rgba(29,78,216,.2)}

.cm-med .cm-header{border-color:rgba(220,38,38,.25)}
.cm-med .cm-header-icon{background:#FEE2E2}
.cm-med .cm-item-dot{background:var(--r)}
.cm-med .cm-item:hover{border-color:rgba(220,38,38,.2)}

.cm-mba .cm-header{border-color:rgba(124,58,237,.25)}
.cm-mba .cm-header-icon{background:#F5F3FF}
.cm-mba .cm-item-dot{background:#7C3AED}
.cm-mba .cm-item:hover{border-color:rgba(124,58,237,.2)}

.cm-law .cm-header{border-color:rgba(5,150,105,.25)}
.cm-law .cm-header-icon{background:#ECFDF5}
.cm-law .cm-item-dot{background:#059669}
.cm-law .cm-item:hover{border-color:rgba(5,150,105,.2)}

/* Panel footer */
.cm-footer{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cm-footer-text{
  font-size:.65rem;
  color:var(--muted2);
  font-weight:400;
}
.cm-footer-link{
  font-size:.7rem;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  transition:all .15s;
}
.cm-footer-link:hover{
  color:var(--r);
  gap:7px;
}

/* Left items hover highlight */
.nav-mega-item[data-cat]:hover{
  background:rgba(255,255,255,.6);
}
.nav-mega-item[data-cat].highlight{
  background:rgba(255,255,255,.9);
  border-color:var(--border2);
  transform:translateX(6px);
}

/* Responsive */
@media(max-width:900px){
  .cm-grid{grid-template-columns:1fr}
  .cm-right{min-height:360px}
}

/* ══ LAW VISUAL PANEL ══ */
.cp-law-visual{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(217,119,6,.18),0 0 0 1px rgba(217,119,6,.16);min-height:500px;display:flex;flex-direction:column}
.cp-law-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;flex:1;min-height:500px}
.cp-law-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(40,25,5,.06) 0%,rgba(40,25,5,.18) 36%,rgba(30,18,4,.83) 66%,rgba(25,15,3,.97) 100%)}
.cp-law-overlay2{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 10%,rgba(217,119,6,.1) 0%,transparent 52%)}
.cp-law-float{position:absolute;bottom:0;left:0;right:0;padding:22px 20px 22px}
.cp-law-badge-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.cp-law-badge-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:linear-gradient(135deg,#D97706,#B45309);color:#fff;border-radius:50px;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cp-law-badge-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.65);animation:pls 1.4s ease infinite;flex-shrink:0}
.cp-law-trust{font-size:.65rem;color:rgba(255,255,255,.46);font-weight:300}
.cp-law-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cp-law-stat{background:rgba(217,119,6,.14);backdrop-filter:blur(16px);border:1px solid rgba(251,191,36,.28);border-radius:10px;padding:10px 8px;text-align:center;transition:background .2s}
.cp-law-stat:hover{background:rgba(217,119,6,.26)}
.cp-law-stat-v{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:#fff;line-height:1}
.cp-law-stat-l{font-size:.56rem;color:rgba(255,255,255,.5);margin-top:3px;font-weight:300;text-transform:uppercase;letter-spacing:.05em}
.cp-law-divider{height:1px;background:rgba(251,191,36,.22);margin-bottom:14px}
.cp-law-action{display:flex;gap:8px}
.cp-law-btn-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 16px;background:linear-gradient(135deg,#D97706,#B45309);color:#fff;border:none;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap}
.cp-law-btn-primary:hover{background:linear-gradient(135deg,#B45309,#92400E);transform:translateY(-2px);box-shadow:0 8px 24px rgba(217,119,6,.5)}
.cp-law-btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap}
.cp-law-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.36)}
.cp-law-corner-badge{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-radius:10px;padding:8px 13px;border:1px solid rgba(217,119,6,.22);box-shadow:0 4px 16px rgba(0,0,0,.14)}
.cp-law-corner-label{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#D97706;margin-bottom:3px}
.cp-law-corner-price{font-family:'Sora',sans-serif;font-size:.97rem;font-weight:800;color:var(--ink);line-height:1}
.cp-law-corner-sub{font-size:.55rem;color:var(--muted);font-weight:300;margin-top:1px}
.cp-law-nlu-badge{position:absolute;top:16px;left:16px;background:rgba(217,119,6,.85);backdrop-filter:blur(12px);border:1px solid rgba(251,191,36,.32);border-radius:10px;padding:9px 13px;display:flex;flex-direction:column;align-items:center;gap:2px}
.cp-law-nlu-symbol{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:900;color:#fff;line-height:1}
.cp-law-nlu-sub{font-size:.52rem;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.1em;text-transform:uppercase}

/* Law tab button */
.ct-btn.on.law{background:linear-gradient(135deg,#D97706,#B45309)}

/* Hero card row 6 - Law */
.hv-body .hv-row:nth-child(6):hover{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.32);box-shadow:4px 4px 18px rgba(217,119,6,.14)}
.hv-card:has(.hv-body .hv-row:nth-child(6):hover){border-color:rgba(217,119,6,.35)!important;box-shadow:0 32px 80px rgba(217,119,6,.18),0 8px 24px rgba(217,119,6,.10),0 0 0 1px rgba(217,119,6,.08)!important}
.hv-card:has(.hv-body .hv-row:nth-child(6):hover) .hv-head{background:linear-gradient(138deg,#78350F 0%,#D97706 55%,#F59E0B 100%)}

/* Mobile responsive for Law visual */
@media(max-width:768px){
  body .cp-right .cp-law-visual{min-height:280px;height:auto;border-radius:16px}
  body .cp-right .cp-law-img{min-height:280px;height:280px;object-position:center 20%}
  body .cp-law-float{padding:14px 12px}
  body .cp-law-stats-row{gap:6px;margin-bottom:10px}
  body .cp-law-stat{padding:8px 6px}
  body .cp-law-stat-v{font-size:.9rem}
  body .cp-law-stat-l{font-size:.48rem}
  body .cp-law-divider{margin-bottom:10px}
  body .cp-law-action{gap:8px}
  body .cp-law-btn-primary{padding:10px 14px;font-size:.78rem}
  body .cp-law-btn-ghost{padding:10px 12px;font-size:.75rem}
  body .cp-law-corner-badge{padding:6px 10px;border-radius:8px}
  body .cp-law-corner-price{font-size:.85rem}
  body .cp-law-corner-label{font-size:.5rem}
  body .cp-law-corner-sub{font-size:.5rem}
}
@media(max-width:480px){
  body .cp-right .cp-law-visual{min-height:240px;border-radius:14px}
  body .cp-right .cp-law-img{min-height:240px;height:240px;object-position:center 15%}
  body .cp-law-float{padding:12px 10px}
  body .cp-law-stats-row{gap:4px;margin-bottom:8px}
  body .cp-law-stat{padding:6px 4px}
  body .cp-law-stat-v{font-size:.82rem}
  body .cp-law-stat-l{font-size:.45rem}
  body .cp-law-divider{margin-bottom:8px}
  body .cp-law-btn-primary{padding:9px 12px;font-size:.72rem}
  body .cp-law-btn-ghost{padding:9px 10px;font-size:.68rem}
  body .cp-law-corner-badge{padding:5px 8px;border-radius:6px}
  body .cp-law-corner-price{font-size:.78rem}
  body .cp-law-corner-label{font-size:.45rem}
  body .cp-law-corner-sub{font-size:.45rem}
}
@media(max-width:360px){
  body .cp-right .cp-law-visual{min-height:200px;border-radius:12px}
  body .cp-right .cp-law-img{min-height:200px;height:200px}
  body .cp-law-float{padding:10px 8px}
  body .cp-law-stat-v{font-size:.75rem}
  body .cp-law-stat-l{font-size:.4rem}
}

/* Landscape phones */
@media(max-width:768px) and (orientation:landscape){
  body .cp-right .cp-law-visual{min-height:260px}
  body .cp-right .cp-law-img{min-height:260px;height:260px}
}

/* WhatsApp button override for Law */
a.cp-law-btn-primary{display:inline-flex;text-decoration:none}
a.cp-law-btn-primary:hover{background:#128C7E!important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.5)}


/* ══ VIDYAPAATH LOGO ══ */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* Hide the broken old image */
.nav-logo-box {
  display: none !important;
}

/* New logo container */
.vp-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.vp-logo .vp-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: block;
}

.vp-logo .vp-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.vp-logo .vp-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.vp-logo .vp-brand {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
}

.vp-logo .vp-tagline-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.vp-logo .vp-line {
  width: 18px;
  height: 2.5px;
  background: var(--r);
  border-radius: 1px;
  flex-shrink: 0;
}

.vp-logo .vp-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--r);
  letter-spacing: 0.04em;
  text-transform: capitalize;
  line-height: 1.2;
  white-space: nowrap;
}

@media(max-width:768px){
  .vp-logo { gap: 10px; }
  .vp-logo .vp-icon { width: 46px; height: 46px; }
  .vp-logo .vp-brand { font-size: 0.95rem; }
  .vp-logo .vp-tagline { font-size: 0.52rem; }
  .vp-logo .vp-line { width: 14px; height: 2px; }
}

@media(max-width:480px){
  .vp-logo { gap: 8px; }
  .vp-logo .vp-icon { width: 40px; height: 40px; }
  .vp-logo .vp-brand { font-size: 1.05rem; }
  .vp-logo .vp-tagline { font-size: 0.45rem; }
  .vp-logo .vp-line { width: 10px; height: 1.5px; }
  .vp-logo .vp-tagline-wrap { gap: 6px; margin-top: 3px; }
}


.ft-logo {
  margin-bottom: 16px;
}
.ft-logo img {
  width: 220px;
  height: auto;
  display: block;
}
@media(max-width:768px){
  .ft-logo img { width: 180px; }
}
@media(max-width:480px){
  .ft-logo img { width: 160px; }
}


/* ══ LOGIN MODAL ══ */
.login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-overlay.open {
  display: flex;
}
.login-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.3);
  animation: loginSlide 0.35s cubic-bezier(0.22,1,0.36,1);
  position: relative;
}
@keyframes loginSlide {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg2);
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.login-close:hover {
  background: var(--r3);
  color: var(--r);
}
.login-header {
  text-align: center;
  margin-bottom: 28px;
}
.login-header h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.login-header p {
  font-size: 0.85rem;
  color: var(--muted);
}
.login-google {
  width: 100%;
  padding: 14px 20px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 20px;
}
.login-google:hover {
  border-color: var(--ink);
  background: var(--bg);
}
.login-google svg {
  width: 20px;
  height: 20px;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--muted2);
  font-size: 0.8rem;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.login-phone-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  display: block;
}
.login-phone-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.login-country {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.login-phone-input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.login-phone-input:focus {
  border-color: var(--r);
}
.login-phone-input::placeholder {
  color: var(--muted2);
}
.login-code-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.login-code-input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.login-code-input::placeholder {
  color: var(--muted2);
}
.login-send-code {
  padding: 12px 20px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.login-send-code:hover {
  border-color: var(--ink);
}
.login-submit {
  width: 100%;
  padding: 14px;
  background: var(--r);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.login-submit:hover {
  background: var(--r2);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(220,38,38,0.3);
}
.login-terms {
  text-align: center;
  margin-top: 20px;
  font-size: 0.75rem;
  color: var(--muted2);
  line-height: 1.5;
}
.login-terms a {
  color: var(--r);
  text-decoration: none;
}
.login-terms a:hover {
  text-decoration: underline;
}


/* ══ LOGIN MODAL — 2-STEP FLOW ══ */
.login-overlay{display:none;position:fixed;inset:0;background:rgba(10,14,33,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:2000;align-items:center;justify-content:center;padding:20px}
.login-overlay.open{display:flex;animation:loBg .22s ease}
@keyframes loBg{from{opacity:0}to{opacity:1}}
.login-modal{background:#fff;border-radius:24px;width:100%;max-width:410px;padding:34px 30px 26px;box-shadow:0 40px 80px rgba(10,14,33,.3);animation:loSlide .3s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
@keyframes loSlide{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:none}}

/* Close */
.login-close{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:50%;border:none;background:#f1f3f6;color:#64748b;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;line-height:1;font-family:inherit}
.login-close:hover{background:#fee2e2;color:#dc2626;transform:rotate(90deg)}

/* Logo */
.lo-logo{display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.lo-logo span{font-family:'Sora',sans-serif;font-size:1rem;font-weight:800;color:#0f172a;letter-spacing:-.04em}
.lo-logo em{display:inline-block;width:6px;height:6px;background:#dc2626;border-radius:50%;margin:0 2px 6px;font-style:normal}

/* Header */
.login-header{text-align:center;margin-bottom:22px}
.login-header h2{font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:800;color:#0f172a;margin:0 0 4px;letter-spacing:-.04em}
.login-header p{font-size:.82rem;color:#64748b;margin:0}

/* Google btn */
.login-google{width:100%;padding:11px 16px;border:1.5px solid #e2e6ea;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:.88rem;font-weight:600;color:#1e293b;cursor:pointer;transition:all .2s;margin-bottom:14px;font-family:inherit}
.login-google:hover:not(:disabled){border-color:#4285F4;box-shadow:0 4px 16px rgba(66,133,244,.14);transform:translateY(-1px)}
.login-google:disabled{opacity:.6;cursor:not-allowed}
.login-google .lo-spin{width:17px;height:17px;border:2px solid #e2e6ea;border-top-color:#4285F4;border-radius:50%;animation:loSpin .7s linear infinite;display:none}
.login-google.loading .lo-gicon,.login-google.loading .lo-gtext{display:none}
.login-google.loading .lo-spin{display:block}
.login-google.loading::after{content:'Signing in with Google…';font-size:.85rem;color:#64748b}

/* Divider */
.login-divider{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#94a3b8;font-size:.7rem;font-weight:700;letter-spacing:.1em}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:#e8eaed}

/* Label */
.login-phone-label{display:block;font-size:.72rem;font-weight:700;color:#0f172a;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.lo-email-display{display:block;font-size:.75rem;font-weight:400;color:#64748b;text-transform:none;letter-spacing:0;margin-top:2px}

/* Steps */
.lo-step{animation:loFadeIn .25s ease}
.lo-otp-step{display:none}
.lo-otp-step.active{display:block}
@keyframes loFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Email input */
.login-phone-input{width:100%;padding:13px 14px;border:1.5px solid #e2e6ea;border-radius:12px;font-size:.9rem;font-family:inherit;color:#0f172a;outline:none;transition:border-color .18s,box-shadow .18s;background:#f8fafc;box-sizing:border-box;margin-bottom:10px}
.login-phone-input:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1);background:#fff}
.login-phone-input.error{border-color:#ef4444;animation:loShake .35s ease}

/* Send OTP button */
.login-send-otp-btn{width:100%;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,#1E3A8A,#dc2626);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.login-send-otp-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 24px rgba(220,38,38,.28)}
.login-send-otp-btn:disabled{background:linear-gradient(135deg,#94a3b8,#94a3b8);cursor:not-allowed;transform:none;box-shadow:none;opacity:.7}
.login-send-otp-btn .lo-btn-spin{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:loSpin .7s linear infinite;display:none;flex-shrink:0}
.login-send-otp-btn.loading .lo-btn-text{display:none}
.login-send-otp-btn.loading .lo-btn-spin{display:block}
@keyframes loSpin{to{transform:rotate(360deg)}}

/* 6-digit OTP boxes */
.lo-otp-boxes{display:flex;gap:8px;justify-content:center;margin:0 0 10px}
.lo-otp-box{width:44px;height:52px;border:1.5px solid #e2e6ea;border-radius:12px;font-size:1.3rem;font-weight:700;text-align:center;color:#0f172a;font-family:inherit;outline:none;transition:border-color .18s,box-shadow .18s,transform .12s;background:#f8fafc;caret-color:transparent}
.lo-otp-box:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1);background:#fff;transform:scale(1.05)}
.lo-otp-box.filled{border-color:#dc2626;background:#fff}
.lo-otp-box.error{border-color:#ef4444;background:#fff7f7}

/* OTP footer */
.lo-otp-footer{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lo-countdown{font-size:.75rem;color:#64748b;font-weight:500}
.lo-countdown.urgent{color:#d97706}
.lo-resend-link{font-size:.75rem;color:#dc2626;font-weight:700;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;transition:opacity .2s}
.lo-resend-link:disabled{color:#94a3b8;cursor:not-allowed}

/* Feedback */
.lo-feedback{font-size:.79rem;min-height:18px;margin:8px 0;text-align:center;font-weight:600;transition:color .2s;line-height:1.4}

/* Login submit */
.login-submit{width:100%;padding:14px;background:linear-gradient(135deg,#1E3A8A,#dc2626);border:none;border-radius:12px;color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.login-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 24px rgba(220,38,38,.28)}
.login-submit:disabled{background:linear-gradient(135deg,#94a3b8,#94a3b8);cursor:not-allowed;transform:none;box-shadow:none;opacity:.7}
.login-submit .lo-submit-spin{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:loSpin .7s linear infinite;display:none;flex-shrink:0}
.login-submit.loading .lo-submit-text{display:none}
.login-submit.loading .lo-submit-spin{display:block}

/* Back link */
.lo-back-link{display:block;width:100%;margin-top:10px;padding:6px;font-size:.78rem;color:#64748b;background:none;border:none;cursor:pointer;font-family:inherit;text-align:center;transition:color .18s}
.lo-back-link:hover{color:#dc2626}

/* Success */
.lo-success{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 0}
.lo-success.show{display:flex}
.lo-success-icon{width:68px;height:68px;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:popIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.lo-success h3{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:700;color:#0f172a;margin:0 0 6px}
.lo-success p{font-size:.83rem;color:#64748b;margin:0}

/* Terms */
.login-terms{text-align:center;font-size:.72rem;color:#94a3b8;margin-top:14px;line-height:1.5}
.login-terms a{color:#dc2626;text-decoration:none;font-weight:600}
.login-terms a:hover{text-decoration:underline}

/* Nav user pill */
.nav-user-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:30px;border:1.5px solid #e2e6ea;background:#fff;cursor:pointer;transition:all .2s;font-size:.82rem;font-weight:600;color:#0f172a;font-family:inherit}
.nav-user-pill:hover{border-color:#dc2626;box-shadow:0 4px 12px rgba(220,38,38,.12)}
.nav-user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#1E3A8A,#dc2626);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:800;flex-shrink:0;overflow:hidden}
.nav-user-avatar img{width:100%;height:100%;object-fit:cover}
.nav-user-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Animations */
@keyframes loShake{0%,100%{transform:none}20%{transform:translateX(-6px)}60%{transform:translateX(6px)}}

@media(max-width:480px){.login-modal{padding:26px 16px 20px;border-radius:20px}.lo-otp-box{width:38px;height:46px;font-size:1.1rem}.lo-otp-boxes{gap:6px}}

.mob-prog-nav{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 4%;
  background:#fff;
  border-top:1px solid var(--border);
  position:sticky;
  bottom:0;
  z-index:400;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}

.mob-prog-prev,.mob-prog-next{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-radius:10px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--ink);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}

.mob-prog-prev:hover,.mob-prog-next:hover{
  border-color:var(--r);
  color:var(--r);
  background:var(--r3);
}

.mob-prog-prev svg,.mob-prog-next svg{
  width:16px;
  height:16px;
}

.mob-prog-name{
  font-family:'Sora',sans-serif;
  font-size:.9rem;
  font-weight:700;
  color:var(--r);
  text-align:center;
  flex:1;
}


/* Hamburger → X */
.ham{display:none;flex-direction:column;gap:5px;border:none;background:none;padding:6px;cursor:pointer;z-index:700;position:relative}
.ham span{display:block;width:22px;height:2px;background:var(--ink,#0f172a);border-radius:2px;transition:all .28s cubic-bezier(.22,1,.36,1);transform-origin:center}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-user-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:30px;border:1.5px solid #e2e6ea;background:#fff;cursor:pointer;transition:all .2s;font-size:.82rem;font-weight:600;color:#0f172a;font-family:inherit}
.nav-user-pill:hover{border-color:#dc2626;box-shadow:0 4px 12px rgba(220,38,38,.12)}
.nav-user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#1E3A8A,#dc2626);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:800;flex-shrink:0;overflow:hidden}
.nav-user-avatar img{width:100%;height:100%;object-fit:cover}
.nav-user-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ════════════════════════════════════════════════════════
   USER DASHBOARD PANEL
════════════════════════════════════════════════════════ */
/* ══ USER DASHBOARD (v4 redesign) ══ */

/* ── Dash Overlay ── */
.dash-overlay{position:fixed;inset:0;z-index:3000;background:rgba(15,23,42,.7);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:16px}
.dash-modal{background:#fff;border-radius:22px;width:100%;max-width:980px;height:min(90vh,680px);display:flex;overflow:hidden;box-shadow:0 40px 100px rgba(15,23,42,.45),0 0 0 1px rgba(255,255,255,.04);position:relative}

/* ── Sidebar ── */
.dash-sidebar{width:236px;flex-shrink:0;background:linear-gradient(170deg,#1E293B 0%,#0F172A 100%);display:flex;flex-direction:column;padding:0 0 16px}
.dash-user-hero{padding:28px 20px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}
.dash-avatar{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#B91C1C,#7A0E0E);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:800;margin:0 auto 10px;overflow:hidden;border:3px solid rgba(200,146,42,.5)}
.dash-avatar img{width:100%;height:100%;object-fit:cover}
.dash-hero-name{font-family:'Sora',sans-serif;font-size:.9rem;font-weight:700;color:#F8FAFC}
.dash-hero-email{font-size:.7rem;color:rgba(255,255,255,.6);margin-top:3px}
.dash-hero-badge{display:inline-block;margin-top:9px;padding:3px 11px;background:rgba(200,146,42,.22);border:1px solid rgba(200,146,42,.45);border-radius:20px;font-size:.63rem;font-weight:700;color:#FBC84A;letter-spacing:.06em;text-transform:uppercase}

/* ── Nav ── */
.dash-nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.dash-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:none;background:none;color:rgba(255,255,255,.65);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .18s;text-align:left;font-family:inherit;width:100%}
.dash-nav-item svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.dash-nav-item.active{background:linear-gradient(135deg,rgba(220,60,60,.28),rgba(185,28,28,.18));color:#fff;border:1px solid rgba(220,60,60,.35);box-shadow:0 2px 12px rgba(185,28,28,.2)}
.dash-nav-item.active svg{stroke:#FBC84A}
.dash-sidebar-footer{padding:0 12px;display:flex;flex-direction:column;gap:6px}
.dash-wa-btn{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:none;background:rgba(37,211,102,.15);color:#86efac;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;font-family:inherit}
.dash-wa-btn:hover{background:rgba(37,211,102,.22)}
.dash-logout-btn{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:none;background:rgba(220,60,60,.14);color:rgba(255,130,130,.85);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;font-family:inherit}
.dash-logout-btn:hover{background:rgba(185,28,28,.22);color:#fca5a5}
.dash-logout-btn svg,.dash-wa-btn svg{width:15px;height:15px;flex-shrink:0}
.dash-wa-btn svg{fill:#86efac;stroke:none}

/* ── Main panel ── */
.dash-main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;background:#FAFBFF}
.dash-close-desk{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,.06);color:#64748b;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;z-index:10;line-height:1}
.dash-close-desk:hover{background:#fee2e2;color:#dc2626;transform:rotate(90deg)}

/* ── Tab system ── */
.dash-tab-content{display:none;padding:28px 28px 28px;overflow-y:auto;flex:1;animation:fadeInTab .2s ease}
.dash-tab-content.active{display:block}
@keyframes fadeInTab{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes loSpin{to{transform:rotate(360deg)}}

.dash-tab-title{font-family:'Sora',sans-serif;font-size:1.18rem;font-weight:800;color:#0A0202;margin-bottom:4px;letter-spacing:-.02em}
.dash-tab-sub{font-size:.8rem;color:#64748b;margin-bottom:22px}

/* ── Profile tab ── */
.profile-avatar-row{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding:16px;background:#fff;border-radius:14px;border:1.5px solid #E8D5C0}
.profile-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#B91C1C,#7A0E0E);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:800;flex-shrink:0}
.profile-av-name{font-family:'Sora',sans-serif;font-size:.92rem;font-weight:700;color:#0A0202}
.profile-av-sub{font-size:.72rem;color:#64748b;margin-top:2px}
.dash-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.dash-field{display:flex;flex-direction:column;gap:5px}
.dash-field label{font-size:.7rem;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.06em}
.dash-field input,.dash-field select{padding:10px 13px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:.86rem;font-family:inherit;color:#0A0202;outline:none;transition:all .18s;background:#F8FAFC}
.dash-field input:focus,.dash-field select:focus{border-color:#B91C1C;box-shadow:0 0 0 3px rgba(185,28,28,.1);background:#fff}
.dash-readonly{background:#F1F5F9 !important;color:#64748b !important;cursor:not-allowed}
.exam-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.exam-pill{padding:7px 14px;border:1.5px solid #E2E8F0;border-radius:20px;background:#fff;color:#64748b;font-size:.77rem;font-weight:600;cursor:pointer;transition:all .18s;font-family:inherit;border-color:#E8D5C0}
.exam-pill:hover{border-color:#B91C1C;color:#B91C1C}
.exam-pill.active{background:linear-gradient(135deg,#B91C1C,#7A0E0E);border-color:transparent;color:#fff}
.form-footer{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid #E8D5C0}
.save-btn{display:flex;align-items:center;gap:8px;padding:10px 22px;background:linear-gradient(135deg,#B91C1C,#7A0E0E);border:none;border-radius:10px;color:#fff;font-weight:700;font-size:.86rem;cursor:pointer;transition:all .2s;font-family:inherit}
.save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(185,28,28,.3)}
.save-msg{font-size:.79rem;font-weight:600;color:#059669}

/* ── List items (bookings, enquiries, bookmarks, history, downloads) ── */
.list-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid #F1F5F9}
.list-item:last-child{border-bottom:none;padding-bottom:0}
.list-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.li-pending{background:#FEF3C7}
.li-confirmed{background:#D1FAE5}
.li-completed{background:#DBEAFE}
.li-cancelled{background:#FEE2E2}
.li-saved{background:#FDF8F2;border:1.5px solid #E8D5C0}
.li-download{background:#EFF6FF}
.li-enquiry{background:#F3F4F6}
.li-predict{background:linear-gradient(135deg,rgba(185,28,28,.08),rgba(122,14,14,.04));border:1px solid rgba(185,28,28,.12)}
.list-body{flex:1;min-width:0}
.list-ref{font-size:.7rem;color:#94A3B8;font-weight:600;margin-bottom:2px}
.list-title{font-size:.87rem;font-weight:700;color:#0A0202;margin-bottom:4px}
.list-meta{font-size:.74rem;color:#64748b;display:flex;flex-wrap:wrap;gap:10px}
.status-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;align-self:flex-start}
.status-pending{background:#FEF3C7;color:#92400E}
.status-confirmed{background:#D1FAE5;color:#065F46}
.status-completed{background:#DBEAFE;color:#1E40AF}
.status-cancelled{background:#FEE2E2;color:#991B1B}
.status-received{background:#EFF6FF;color:#1D4ED8}
.status-active{background:#D1FAE5;color:#065F46}

/* ── Card wrap ── */
.card-wrap{background:#fff;border:1.5px solid #E8D5C0;border-radius:14px;padding:18px;margin-bottom:14px}
.card-label{font-size:.72rem;font-weight:700;color:#94A3B8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}

/* ── Stats row ── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.stat-card{background:#fff;border:1.5px solid #E8D5C0;border-radius:12px;padding:16px;text-align:center}
.stat-num{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800;color:#B91C1C}
.stat-lbl{font-size:.7rem;color:#64748b;font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.04em}

/* ── CTA Banner ── */
.cta-banner{background:linear-gradient(135deg,#B91C1C,#7A0E0E);border-radius:14px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;color:#fff}
.cta-banner strong{font-size:.87rem;font-weight:700;display:block;margin-bottom:2px}
.cta-banner p{font-size:.74rem;opacity:.8;margin:0}
.cta-book-btn{flex-shrink:0;padding:9px 16px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.38);border-radius:10px;color:#fff;font-size:.79rem;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap;font-family:inherit}
.cta-book-btn:hover{background:rgba(255,255,255,.28)}

/* ── Invoice table ── */
.invoice-table{width:100%;border-collapse:collapse;font-size:.82rem}
.invoice-table th{background:#0A0202;color:rgba(255,255,255,.7);padding:10px 14px;text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.invoice-table td{padding:11px 14px;border-bottom:1px solid #E8D5C0;color:#1A0C06;vertical-align:middle}
.invoice-table tr:nth-child(even) td{background:#FDF8F2}
.invoice-table tr:last-child td{border:none}

/* ── Rank card ── */
.rank-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#fff;border:1.5px solid #E8D5C0;border-radius:12px;margin-bottom:10px}
.rank-card:last-child{margin-bottom:0}
.rank-label{font-size:.82rem;font-weight:700;color:#0A0202}
.rank-score{font-size:.74rem;color:#64748b;margin-top:2px}
.rank-result{text-align:right}
.rank-num{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:#B91C1C}
.rank-cat{font-size:.68rem;color:#64748b;margin-top:1px}

/* ── Settings / Toggles ── */
.settings-card{background:#fff;border:1.5px solid #E8D5C0;border-radius:14px;padding:18px;margin-bottom:14px}
.settings-card-title{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:#374151;margin-bottom:14px}
.settings-card-title svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #F1F5F9}
.toggle-row:last-child{border-bottom:none;padding-bottom:0}
.toggle-label{font-size:.82rem;font-weight:600;color:#0A0202}
.toggle-sub{font-size:.72rem;color:#64748b;margin-top:1px}
.toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;inset:0;background:#E2E8F0;border-radius:12px;cursor:pointer;transition:background .22s}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .22s;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.toggle input:checked+.toggle-track{background:linear-gradient(135deg,#B91C1C,#7A0E0E)}
.toggle input:checked+.toggle-track::after{transform:translateX(20px)}
.settings-link{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #F1F5F9;color:#374151;font-size:.83rem;font-weight:600;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;width:100%;font-family:inherit;transition:color .15s}
.settings-link:last-child{border-bottom:none}
.settings-link:hover{color:#B91C1C}
.danger-card{border-color:#fee2e2 !important}
.danger-text{font-size:.78rem;color:#64748b;margin-bottom:14px;line-height:1.65}
.delete-btn{padding:9px 18px;border:1.5px solid #dc2626;border-radius:9px;background:#fff;color:#dc2626;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .18s;font-family:inherit}
.delete-btn:hover{background:#dc2626;color:#fff}

/* ── Empty state ── */
.empty{text-align:center;padding:36px 20px;color:#94a3b8}
.empty-icon{font-size:2.2rem;margin-bottom:8px}
.empty p{font-weight:700;color:#475569;margin:0 0 4px}
.empty span{font-size:.78rem}

/* ── Bookmark item ── */
.bookmark-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#fff;border:1.5px solid #E8D5C0;border-radius:12px;margin-bottom:8px}
.bookmark-item:last-child{margin-bottom:0}
.bm-name{font-size:.88rem;font-weight:700;color:#0A0202}
.bm-date{font-size:.7rem;color:#94A3B8;margin-top:2px}
.bm-link{padding:6px 13px;background:#B91C1C;color:#fff;border-radius:8px;font-size:.74rem;font-weight:700;text-decoration:none;transition:opacity .15s;flex-shrink:0}
.bm-link:hover{opacity:.85}

/* ── Download item ── */
.download-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1.5px solid #E8D5C0;border-radius:12px;margin-bottom:8px}
.dl-icon{width:36px;height:36px;background:#EFF6FF;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem}
.dl-name{font-size:.86rem;font-weight:700;color:#0A0202}
.dl-date{font-size:.7rem;color:#94A3B8;margin-top:2px}
.dl-btn{margin-left:auto;padding:6px 13px;background:transparent;border:1.5px solid #E8D5C0;border-radius:8px;font-size:.73rem;font-weight:700;color:#475569;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}
.dl-btn:hover{border-color:#B91C1C;color:#B91C1C}

/* ── Preview notice bar ── */

@media(max-width:700px){
  body{padding:0}
  .dash-overlay{align-items:flex-end;padding:0}
  .dash-modal{height:96dvh;border-radius:18px 18px 0 0;max-width:100%;flex-direction:column}
  .dash-sidebar{width:100%;padding:0}
  .dash-user-hero{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
  .dash-avatar{width:40px;height:40px;font-size:.95rem;margin:0}
  .dash-hero-badge{display:none}
  .dash-nav{flex-direction:row;padding:8px 12px;gap:4px;overflow-x:auto;flex:unset;border-bottom:1px solid rgba(255,255,255,.08)}
  .dash-nav::-webkit-scrollbar{display:none}
  .dash-nav-item{padding:7px 10px;flex-shrink:0}
  .dash-nav-item span{font-size:.7rem}
  .dash-nav-item svg{width:14px;height:14px}
  .dash-sidebar-footer{display:none}
  .dash-tab-content{padding:18px}
  .dash-form-row{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(3,1fr)}
  .cta-banner{flex-direction:column;gap:10px}
}

/* Photo upload */
.photo-upload-wrap{position:relative;display:inline-block;cursor:pointer}
.photo-upload-wrap .profile-av{transition:filter .2s}
.photo-upload-wrap:hover .profile-av{filter:brightness(.7)}
.photo-upload-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:0;transition:opacity .2s}
.photo-upload-wrap:hover .photo-upload-btn{opacity:1}
.photo-upload-icon{background:rgba(15,23,42,.8);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.photo-upload-icon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.photo-upload-hint{font-size:.7rem;color:#94A3B8;margin-top:6px;text-align:center}
.photo-upload-input{display:none}
.photo-preview-badge{position:absolute;bottom:0;right:0;width:20px;height:20px;background:#B91C1C;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.photo-preview-badge svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Billing address section */
.section-divider{margin:22px 0 16px;padding-top:18px;border-top:1.5px solid #E8D5C0}
.section-label{font-family:'Sora',sans-serif;font-size:.8rem;font-weight:800;color:#0A0202;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-label svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:#B91C1C}

/* Toast */
#toastStack{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-size:.83rem;font-weight:600;color:#fff;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:toastIn .25s ease;max-width:320px;line-height:1.4}
.toast.out{animation:toastOut .25s ease forwards}
.toast-success{background:linear-gradient(135deg,#059669,#047857)}
.toast-error{background:linear-gradient(135deg,#DC2626,#991B1B)}
.toast-info{background:linear-gradient(135deg,#1D4ED8,#1E40AF)}
.toast-warn{background:linear-gradient(135deg,#D97706,#B45309)}
.toast-icon{font-size:1rem;flex-shrink:0}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.95)}}

/* Confirm modal */
#confirmOverlay{position:fixed;inset:0;z-index:9998;background:rgba(15,23,42,.65);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}
#confirmOverlay.open{display:flex}
.confirm-box{background:#fff;border-radius:18px;padding:28px 24px;max-width:360px;width:calc(100% - 32px);box-shadow:0 24px 60px rgba(0,0,0,.25);text-align:center}
.confirm-icon{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.confirm-icon.danger{background:#FEE2E2}
.confirm-icon.info{background:#DBEAFE}
.confirm-title{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:#0F172A;margin-bottom:8px}
.confirm-msg{font-size:.82rem;color:#64748B;line-height:1.65;margin-bottom:20px}
.confirm-btns{display:flex;gap:10px;justify-content:center}
.confirm-cancel{padding:9px 20px;border:1.5px solid #E2E8F0;border-radius:10px;background:#fff;color:#475569;font-size:.84rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.confirm-cancel:hover{border-color:#CBD5E1;background:#F8FAFC}
.confirm-ok{padding:9px 20px;border:none;border-radius:10px;font-size:.84rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;color:#fff}
.confirm-ok.danger{background:linear-gradient(135deg,#DC2626,#991B1B)}
.confirm-ok.info{background:linear-gradient(135deg,#1D4ED8,#1E40AF)}
.confirm-ok:hover{opacity:.88;transform:translateY(-1px)}

/* Save msg hidden by default */
.save-msg{display:none}
.save-msg.visible{display:block}

/* Button loading state */
.save-btn.loading{opacity:.7;pointer-events:none;cursor:not-allowed}
.save-btn.loading::after{content:'...';margin-left:2px}
.dash-overlay.open{display:flex}

/* ══ MOBILE MENU HEADER ══ */
.mob-header{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 5%;
  background:#fff;
  border-bottom:1px solid #f1f5f9;
}
.mob-header-logo{display:flex !important;align-items:center;min-width:0;flex-shrink:1;overflow:visible}
.mob-header-logo .vp-icon{display:block !important;flex-shrink:0}
.mob-header-logo .vp-icon img{width:36px;height:36px;display:block !important}
.mob-header-logo .vp-text{display:flex !important;flex-direction:column;overflow:visible}
.mob-header-logo .vp-brand{font-size:.92rem;display:block !important}
.mob-header-logo .vp-tagline-wrap{display:flex !important;align-items:center;gap:6px;margin-top:2px;overflow:visible}
.mob-header-logo .vp-tagline{font-size:.54rem;display:inline-block !important;color:#dc2626;white-space:nowrap}
.mob-header-logo .vp-line{width:14px;height:2px;display:inline-block !important;background:#dc2626;border-radius:1px;flex-shrink:0}


.mob-header-actions{display:flex;align-items:center;gap:10px}
.mob-signin-btn{
  padding:7px 16px;border:1.5px solid var(--r,#dc2626);border-radius:20px;
  background:#fff;color:var(--r,#dc2626);font-weight:700;font-size:.78rem;
  cursor:pointer;font-family:inherit;white-space:nowrap;
}
.mob-signin-btn:active{background:var(--r,#dc2626);color:#fff}
.mob-close-btn{
  width:32px;height:32px;border-radius:50%;border:none;
  background:#f1f5f9;color:#64748b;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;padding:0;
}
.mob-close-btn:active{background:#fee2e2;color:var(--r,#dc2626)}
.mob-header .nav-user-pill{padding:5px 10px 5px 4px;font-size:.78rem}
.mob-header .nav-user-avatar{width:24px;height:24px;font-size:.65rem}
.mob-header .nav-user-name{max-width:70px}


/* ══════════════════════════════════════════════
   HERO ANIMATIONS — 5 NEW EFFECTS
══════════════════════════════════════════════ */

/* 1. COUNT-UP NUMBERS — just need tabular-nums for smooth digit changes */
.hv-fbval{font-variant-numeric:tabular-nums}

/* 2. 3D TILT CARD — perspective wrapper + smooth transform */
.hv-wrap{ perspective:1400px }
.hv-card{
  transform-style:preserve-3d;
  transition:transform .12s ease-out,border-color .32s ease,box-shadow .32s ease;
  will-change:transform;
}
.hv-card.tilting{ transition:transform .08s ease-out }
/* Subtle shine layer that follows tilt */
.hv-card::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.35), transparent 45%);
  opacity:0; transition:opacity .25s ease;
  pointer-events:none; z-index:5; mix-blend-mode:overlay;
}
.hv-card.tilting::after{ opacity:1 }

/* 3. SHIMMER SWEEP on "Donation." */
#donationShimmer{ position:relative; display:inline-block; overflow:hidden }
#donationShimmer::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  background-size:220% 100%;
  background-position:150% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:donationShine 3.2s ease-in-out infinite;
  animation-delay:1s;
  pointer-events:none;
}
@keyframes donationShine{
  0%{ background-position:150% 0 }
  35%{ background-position:-50% 0 }
  100%{ background-position:-50% 0 }
}
@media(prefers-reduced-motion:reduce){
  #donationShimmer::before{ animation:none }
}

/* 4. PULSING RADAR RING on Counsellor Online dot */
.hv-lcdot-wrap{ position:relative; width:7px; height:7px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center }
.hv-lcdot-wrap .hv-lcdot{ position:relative; z-index:2 }
.hv-radar-ring{
  position:absolute; inset:50% auto auto 50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  border:1.5px solid #4ADE80;
  opacity:0;
  animation:radarPulse 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.hv-radar-ring2{ animation-delay:1.2s }
@keyframes radarPulse{
  0%{ transform:scale(1); opacity:.7 }
  80%{ transform:scale(5.5); opacity:0 }
  100%{ transform:scale(5.5); opacity:0 }
}

/* 5. AUTO-ROTATING HIGHLIGHT on course rows */
.hv-row{
  transition:background .45s ease, box-shadow .45s ease, transform .35s cubic-bezier(.22,1,.36,1);
  border-radius:14px;
}
.hv-row.hv-spotlight{
  background:linear-gradient(90deg, rgba(220,38,38,.06), rgba(30,58,138,.04));
  box-shadow:inset 3px 0 0 var(--r,#dc2626), 0 4px 16px rgba(15,25,41,.06);
  transform:translateX(3px);
}
.hv-row.hv-spotlight .hv-fill{
  animation:hvBarPulse 1.6s ease-in-out infinite;
}
@keyframes hvBarPulse{
  0%,100%{ filter:brightness(1) }
  50%{ filter:brightness(1.18) }
}
.hv-row.hv-spotlight .hv-ico{
  animation:hvIconPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes hvIconPop{
  0%{ transform:scale(1) rotate(0deg) }
  50%{ transform:scale(1.15) rotate(-6deg) }
  100%{ transform:scale(1) rotate(0deg) }
}
@media(prefers-reduced-motion:reduce){
  .hv-row.hv-spotlight{ transform:none }
  .hv-row.hv-spotlight .hv-fill, .hv-row.hv-spotlight .hv-ico{ animation:none }
}
@media(max-width:768px){
  .hv-card{ transform:none !important }
  .hv-card::after{ display:none }
}


/* ══ PER-LINE STAGGER HEADLINE ROTATION ══ */
.hh-line{
  display:block;
  transition:opacity .55s cubic-bezier(.22,1,.36,1) var(--d,0ms),
             transform .55s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.hh-line.hh-in{
  opacity:0;
  transform:translateY(26px);
}
.hh-line.hh-out{
  opacity:0;
  transform:translateY(-22px);
  transition:opacity .26s ease,transform .26s ease;
}
@media(max-width:480px){
  .hh-line.hh-in{transform:translateY(16px)}
  .hh-line.hh-out{transform:translateY(-14px)}
}
@media(prefers-reduced-motion:reduce){
  .hh-line{transition:none}
  .hh-line.hh-in,.hh-line.hh-out{opacity:1;transform:none}
}


/* ══ AMBIENT BACKGROUND ORBS — ALL SECTIONS ══ */
.sec-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform;z-index:0}
@keyframes hb4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,80px) scale(1.12)}}

/* Ensure sections clip + position their orbs correctly */
.process-sec{overflow:hidden}
.courses-sec,.success-sec,.vs-sec,.experts-sec,.faq-sec{position:relative;overflow:hidden}

/* Content sits above orbs */
.courses-in,.process-in,.success-in,.vs-in,.experts-in,.faq-in{position:relative;z-index:1}

/* Mobile: drop the second orb per section + shrink the first for performance */
@media(max-width:768px){
  .sec-orb-2{display:none}
  .sec-orb{width:240px !important;height:240px !important;filter:blur(50px) !important}
}


/* ══════════════════════════════════════════════
   NOTICE BAR — auto-sliding news/article/event ticker
══════════════════════════════════════════════ */
.notice-bar{position:relative;margin-top:72px;background:linear-gradient(90deg,#0F1929 0%,#1E3A8A 55%,#0F1929 100%);color:#fff;overflow:hidden;transition:max-height .35s ease,opacity .3s ease}
.notice-bar.dismissed{max-height:0;opacity:0;margin-top:0;pointer-events:none}
.notice-in{max-width:var(--max);margin:0 auto;padding:0 5%;display:flex;align-items:center;gap:14px;height:42px}

.notice-live{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#FCA5A5}
.notice-live-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;flex-shrink:0;animation:noticePulse 1.8s ease-in-out infinite}
@keyframes noticePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}

.notice-viewport{flex:1;min-width:0;position:relative;height:100%;overflow:hidden}
.notice-track{position:relative;height:100%}
.notice-item{position:absolute;inset:0;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(100%);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.notice-item.active{opacity:1;transform:translateY(0);pointer-events:auto}
.notice-item.leaving{opacity:0;transform:translateY(-100%);transition:opacity .35s ease,transform .35s ease}
.notice-item:hover .notice-text{text-decoration:underline}

.notice-tag{flex-shrink:0;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;line-height:1.4}
.notice-tag-news{background:rgba(59,130,246,.25);color:#93C5FD}
.notice-tag-article{background:rgba(245,158,11,.25);color:#FCD34D}
.notice-tag-event{background:rgba(34,197,94,.22);color:#86EFAC}

.notice-text{font-size:.83rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.95)}
.notice-date{flex-shrink:0;font-size:.7rem;color:rgba(255,255,255,.48);margin-left:auto;padding-left:10px;font-weight:600}

.notice-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}
.notice-arrow{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;font-family:inherit;padding:0}
.notice-arrow:hover{background:rgba(255,255,255,.18)}
.notice-close{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:none;background:rgba(255,255,255,.05);color:rgba(255,255,255,.65);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;margin-left:2px;font-family:inherit;padding:0;line-height:1}
.notice-close:hover{background:rgba(220,38,38,.35);color:#fff}

@media(max-width:768px){
  .notice-bar{margin-top:64px}
  .notice-bar.dismissed{margin-top:0}
  .notice-in{height:38px;gap:8px;padding:0 12px}
  .notice-date{display:none}
  .notice-tag{font-size:.58rem;padding:2px 6px}
  .notice-text{font-size:.76rem}
}
@media(max-width:480px){
  .notice-bar{margin-top:58px}
  .notice-bar.dismissed{margin-top:0}
  .notice-controls .notice-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .notice-item{transition:opacity .25s ease !important;transform:none !important}
  .notice-live-dot{animation:none}
}


/* ══ WA CHATBOT ══ */
:root {
    --wa-green: #25D366;
    --wa-green-dark: #128C7E;
    --wa-teal: #075E54;
    --wa-light: #DCF8C6;
    --wa-bg: #E5DDD5;
    --wa-white: #ffffff;
    --wa-text: #111827;
    --wa-text-light: #667781;
    --wa-border: #e5e7eb;
    --wa-shadow: 0 10px 40px rgba(0,0,0,0.15);
    --wa-radius: 20px;
  }

  

  

  .demo-container {
    background: var(--wa-white);
    padding: 40px;
    border-radius: var(--wa-radius);
    box-shadow: var(--wa-shadow);
    max-width: 600px;
    text-align: center;
  }

  .demo-container h1 {
    color: var(--wa-text);
    margin-bottom: 12px;
    font-size: 28px;
    font-weight: 700;
  }

  .demo-container p {
    color: var(--wa-text-light);
    margin-bottom: 24px;
    line-height: 1.6;
  }

  .demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecfdf5;
    color: #059669;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .demo-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
  }

  /* ===== WHATSAPP CHAT WIDGET ===== */
  .wa-chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  }

  /* Chat Toggle Button - WhatsApp Green with Animation */
  .wa-chat-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--wa-green);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
      0 0 0 4px rgba(37, 211, 102, 0.2),
      0 0 0 8px rgba(37, 211, 102, 0.1),
      0 8px 32px rgba(37, 211, 102, 0.4),
      0 4px 16px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    animation: wa-pulse 2.5s infinite ease-in-out;
  }

  @keyframes wa-pulse {
    0%, 100% { 
      transform: scale(1); 
      box-shadow: 
        0 0 0 4px rgba(37, 211, 102, 0.2),
        0 0 0 8px rgba(37, 211, 102, 0.1),
        0 8px 32px rgba(37, 211, 102, 0.4),
        0 4px 16px rgba(0,0,0,0.15);
    }
    50% { 
      transform: scale(1.08); 
      box-shadow: 
        0 0 0 6px rgba(37, 211, 102, 0.25),
        0 0 0 12px rgba(37, 211, 102, 0.15),
        0 12px 40px rgba(37, 211, 102, 0.5),
        0 6px 20px rgba(0,0,0,0.2);
    }
  }

  .wa-chat-toggle:hover {
    animation: none;
    transform: scale(1.12) translateY(-4px);
    box-shadow: 
      0 0 0 6px rgba(37, 211, 102, 0.3),
      0 0 0 12px rgba(37, 211, 102, 0.15),
      0 0 0 18px rgba(37, 211, 102, 0.05),
      0 16px 48px rgba(37, 211, 102, 0.5),
      0 8px 24px rgba(0,0,0,0.2);
  }

  .wa-chat-toggle:active {
    transform: scale(0.95);
  }

  .wa-chat-toggle svg {
    width: 32px;
    height: 32px;
    color: white;
    transition: transform 0.3s ease;
  }

  .wa-chat-toggle:hover svg {
    transform: rotate(-5deg) scale(1.1);
  }

  .wa-chat-toggle.open .wa-toggle-open { display: none; }
  .wa-chat-toggle.open .wa-toggle-close { display: block; }

  /* Ripple rings */
  .wa-ripple {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.4);
    animation: ripple-out 2.5s infinite ease-out;
    pointer-events: none;
  }

  .wa-ripple:nth-child(2) { animation-delay: 0.8s; }
  .wa-ripple:nth-child(3) { animation-delay: 1.6s; }

  @keyframes ripple-out {
    0% { width: 60px; height: 60px; opacity: 0.6; border-width: 3px; }
    100% { width: 140px; height: 140px; opacity: 0; border-width: 0px; }
  }

  /* Notification Badge */
  .wa-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: #ef4444;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--wa-green);
    animation: badge-bounce 0.5s ease;
    z-index: 2;
  }

  @keyframes badge-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }

  /* Chat Window */
  .wa-chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    max-width: calc(100vw - 48px);
    height: 520px;
    max-height: calc(100vh - 120px);
    background: var(--wa-white);
    border-radius: var(--wa-radius);
    box-shadow: var(--wa-shadow), 0 0 0 1px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wa-chat-window.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
  }

  /* WhatsApp Header */
  .wa-chat-header {
    background: var(--wa-teal);
    padding: 16px 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
  }

  .wa-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.3);
  }

  .wa-header-info {
    flex: 1;
    min-width: 0;
  }

  .wa-header-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .wa-status-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
    animation: status-pulse 2s infinite;
  }

  @keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  .wa-header-subtitle {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 2px;
  }

  .wa-header-actions {
    display: flex;
    gap: 8px;
  }

  .wa-header-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .wa-header-btn:hover {
    background: rgba(255,255,255,0.25);
  }

  .wa-header-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Messages Area - WhatsApp Style */
  .wa-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--wa-bg);
    scroll-behavior: smooth;
  }

  .wa-chat-messages::-webkit-scrollbar {
    width: 6px;
  }

  .wa-chat-messages::-webkit-scrollbar-track {
    background: transparent;
  }

  .wa-chat-messages::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 3px;
  }

  /* WhatsApp Message Bubbles */
  .wa-message {
    display: flex;
    gap: 8px;
    max-width: 85%;
    animation: message-in 0.3s ease;
    position: relative;
  }

  @keyframes message-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .wa-message.bot {
    align-self: flex-start;
  }

  .wa-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
  }

  .wa-message-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 4px;
  }

  .wa-message.bot .wa-message-avatar {
    background: var(--wa-teal);
    color: white;
  }

  .wa-message.user .wa-message-avatar {
    background: #e5e7eb;
    color: var(--wa-text);
  }

  .wa-message-content {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    max-width: 100%;
  }

  .wa-message.bot .wa-message-content {
    background: var(--wa-white);
    color: var(--wa-text);
    border-top-left-radius: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }

  .wa-message.user .wa-message-content {
    background: var(--wa-light);
    color: var(--wa-text);
    border-top-right-radius: 0;
  }

  .wa-message-time {
    font-size: 11px;
    color: var(--wa-text-light);
    margin-top: 4px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  .wa-checkmarks {
    display: inline-flex;
  }

  .wa-checkmarks svg {
    width: 14px;
    height: 14px;
    color: #53bdeb;
  }

  /* Typing Indicator - WhatsApp Style */
  .wa-typing {
    display: flex;
    gap: 3px;
    padding: 12px 14px;
    align-items: center;
  }

  .wa-typing-dot {
    width: 7px;
    height: 7px;
    background: #8696a0;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
  }

  .wa-typing-dot:nth-child(1) { animation-delay: -0.32s; }
  .wa-typing-dot:nth-child(2) { animation-delay: -0.16s; }

  @keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
  }

  /* Quick Replies */
  .wa-quick-replies {
    display: flex;
    gap: 8px;
    padding: 0 16px 10px;
    flex-wrap: wrap;
    background: var(--wa-bg);
  }

  .wa-quick-reply {
    padding: 8px 14px;
    background: var(--wa-white);
    border: 1px solid var(--wa-border);
    border-radius: 16px;
    font-size: 13px;
    color: var(--wa-teal);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  .wa-quick-reply:hover {
    background: var(--wa-teal);
    color: white;
    border-color: var(--wa-teal);
    transform: translateY(-1px);
  }

  /* WhatsApp CTA Section */
  .wa-cta-section {
    padding: 12px 16px;
    background: var(--wa-bg);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .wa-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--wa-green);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
    width: 100%;
  }

  .wa-cta-btn:hover {
    background: var(--wa-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }

  .wa-cta-btn svg {
    width: 20px;
    height: 20px;
  }

  .wa-cta-note {
    font-size: 12px;
    color: var(--wa-text-light);
    text-align: center;
    line-height: 1.4;
  }

  /* Input Area */
  .wa-chat-input-area {
    padding: 10px 12px 12px;
    background: #f0f2f5;
    border-top: 1px solid var(--wa-border);
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }

  .wa-chat-input {
    flex: 1;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    max-height: 100px;
    min-height: 40px;
    line-height: 1.5;
    transition: all 0.2s;
    background: var(--wa-white);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  .wa-chat-input:focus {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .wa-chat-input::placeholder {
    color: var(--wa-text-light);
  }

  .wa-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wa-green);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .wa-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  }

  .wa-send-btn:active {
    transform: scale(0.95);
  }

  .wa-send-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Welcome Screen */
  .wa-welcome {
    text-align: center;
    padding: 24px 16px;
  }

  .wa-welcome-icon {
    width: 60px;
    height: 60px;
    background: var(--wa-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 28px;
    color: white;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
  }

  .wa-welcome h3 {
    font-size: 16px;
    color: var(--wa-text);
    margin-bottom: 6px;
    font-weight: 600;
  }

  .wa-welcome p {
    font-size: 13px;
    color: var(--wa-text-light);
    line-height: 1.5;
  }

  /* Responsive */
  @media (max-width: 480px) {
    .wa-chat-widget {
      bottom: 16px;
      right: 16px;
    }
    .wa-chat-window {
      width: calc(100vw - 32px);
      height: calc(100vh - 100px);
      right: 0;
      bottom: 76px;
      border-radius: 12px;
    }
    .wa-chat-toggle {
      width: 56px;
      height: 56px;
    }
    .wa-chat-toggle svg {
      width: 28px;
      height: 28px;
    }
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    :root {
      --wa-bg: #0b141a;
      --wa-white: #1f2c34;
      --wa-text: #e9edef;
      --wa-text-light: #8696a0;
      --wa-border: #2a3942;
      --wa-light: #005c4b;
    }
    .wa-chat-messages {
      background: #0b141a;
    }
    .wa-message.bot .wa-message-content {
      background: #1f2c34;
      color: #e9edef;
    }
    .wa-message.user .wa-message-content {
      background: #005c4b;
      color: #e9edef;
    }
    .wa-chat-input {
      background: #2a3942;
      color: #e9edef;
    }
    .wa-chat-input::placeholder {
      color: #8696a0;
    }
    .wa-quick-reply {
      background: #1f2c34;
      border-color: #2a3942;
      color: #53bdeb;
    }
    .wa-quick-reply:hover {
      background: var(--wa-teal);
      color: white;
    }
    .wa-chat-input-area {
      background: #1f2c34;
    }
    .wa-cta-section {
      background: #0b141a;
    }
  }

/* ══ NAV COLLEGE PREDICTOR BUTTON ══ */
.nav-cp-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:#dc2626;color:#fff;border:none;border-radius:10px;font-size:.82rem;font-weight:700;font-family:inherit;white-space:nowrap;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(220,38,38,.35);transition:transform .2s ease,box-shadow .2s ease;animation:cpGlow 2.8s ease-in-out infinite}
.nav-cp-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 28px rgba(220,38,38,.55);animation:none;color:#fff;background:#b91c1c}
.nav-cp-btn::before{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);animation:cpShimmer 2.4s ease-in-out infinite}
.nav-cp-btn:hover::before{animation:none}
.nav-cp-icon{flex-shrink:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.5))}
@keyframes cpGlow{0%,100%{box-shadow:0 4px 18px rgba(220,38,38,.35)}50%{box-shadow:0 6px 28px rgba(220,38,38,.7),0 0 0 5px rgba(220,38,38,.15)}}
@keyframes cpShimmer{0%{left:-60%;opacity:0}15%{opacity:1}60%{left:120%;opacity:1}61%,100%{left:120%;opacity:0}}
@media(max-width:480px){.nav-cp-btn{display:none}}
@media(prefers-reduced-motion:reduce){.nav-cp-btn{animation:none}.nav-cp-btn::before{animation:none;display:none}}


/* ══════════════════════════════════════════════
   STUDY ABROAD SECTION
══════════════════════════════════════════════ */
.sa-sec{padding:64px 5%;background:var(--bg);position:relative;overflow:hidden}
.sa-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1}

/* Header */
.sa-header{text-align:center;margin-bottom:40px}
.sa-eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--r);margin-bottom:12px}
.sa-title{font-family:'Sora',sans-serif;font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:800;color:var(--ink);line-height:1.2;margin-bottom:12px}
.sa-title-accent{color:var(--r)}
.sa-subtitle{font-size:.95rem;color:var(--muted);max-width:580px;margin:0 auto}

/* Tabs */
.sa-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.sa-tab{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;border:2px solid var(--border);border-radius:16px;background:#fff;font-size:.82rem;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;transition:all .25s ease;min-width:100px}
.sa-tab:hover{border-color:var(--r);color:var(--ink);background:var(--bg);transform:translateY(-3px);box-shadow:0 6px 20px rgba(220,38,38,.15)}
.sa-tab-active{background:linear-gradient(135deg,#1E3A8A,#dc2626);color:#fff !important;border-color:transparent !important;box-shadow:0 8px 24px rgba(220,38,38,.32)}

/* ══ SA TABS — FLAG IMAGE CARDS ══ */
.sa-tab-img-wrap{width:64px;height:42px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(15,25,41,.15);flex-shrink:0;transition:transform .25s ease}
.sa-tab:hover .sa-tab-img-wrap{transform:scale(1.06)}
.sa-tab-active .sa-tab-img-wrap{box-shadow:0 3px 12px rgba(0,0,0,.25)}
.sa-tab-flag{width:100%;height:100%;display:block}
.sa-tab-label{font-size:.78rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.sa-tab-active .sa-tab-label{color:#fff}
@media(max-width:768px){
  .sa-tabs{gap:8px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none}
  .sa-tabs::-webkit-scrollbar{display:none}
  .sa-tab{min-width:80px;padding:10px 12px}
  .sa-tab-img-wrap{width:52px;height:34px;border-radius:6px}
  .sa-tab-label{font-size:.72rem}
}
.sa-tab-active:hover{background:#dc2626}
.sa-flag{font-size:1.1rem;line-height:1}

/* Panels */
.sa-panels{position:relative}
.sa-panel{display:none}
.sa-panel-active{display:block;animation:saFadeIn .35s ease}
@keyframes saFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Stats bar */
.sa-stats-bar{display:flex;gap:0;background:#fff;border-radius:16px;border:1px solid var(--border);overflow:hidden;margin-bottom:28px;box-shadow:var(--sh)}
.sa-stat{flex:1;padding:16px 12px;text-align:center;border-right:1px solid var(--border)}
.sa-stat:last-child{border-right:none}
.sa-stat-v{display:block;font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:800;color:var(--ink);white-space:nowrap}
.sa-stat-l{display:block;font-size:.68rem;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* University Cards */
.sa-cards{position:relative;overflow:hidden;margin-bottom:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.sa-cards-track{display:flex;gap:20px;width:max-content;animation:saCardScroll 22s linear infinite}
.sa-cards:hover .sa-cards-track{animation-play-state:paused}
@keyframes saCardScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sa-card{width:280px;flex-shrink:0;background:#fff;border-radius:18px;border:1.5px solid var(--border);padding:22px 20px;transition:all .25s ease;position:relative;overflow:hidden}
.sa-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--r),var(--b));opacity:0;transition:opacity .25s}
.sa-card:hover{border-color:transparent;box-shadow:0 12px 40px rgba(15,25,41,.12);transform:translateY(-4px)}
.sa-card:hover::before{opacity:1}
.sa-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sa-badge{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:6px}
.sa-badge-popular{background:rgba(220,38,38,.1);color:var(--r)}
.sa-badge-new{background:rgba(29,78,216,.1);color:var(--b)}
.sa-badge-premium{background:rgba(245,158,11,.12);color:#B45309}
.sa-est{font-size:.72rem;color:var(--muted);font-weight:600}
.sa-uni{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:12px;min-height:2.8em}
.sa-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sa-meta span{font-size:.74rem;color:var(--muted);background:var(--bg);padding:3px 8px;border-radius:6px;font-weight:500}
.sa-fee-row{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border)}
.sa-fee-label{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.sa-fee{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:800;color:var(--r)}

/* Note */
.sa-note{font-size:.78rem;color:var(--muted);text-align:center;padding:10px 0}

/* CTA */
.sa-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding:32px 36px;background:linear-gradient(135deg,#0F1929,#1E3A8A);border-radius:20px;flex-wrap:wrap}
.sa-cta-text h3{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:6px}
.sa-cta-text p{font-size:.85rem;color:rgba(255,255,255,.7);max-width:480px;line-height:1.5}
.sa-cta-btns{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.sa-cta-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#25D366;color:#fff;border-radius:12px;font-weight:700;font-size:.88rem;text-decoration:none;transition:all .2s;white-space:nowrap}
.sa-cta-primary:hover{background:#1da851;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.4)}
.sa-cta-secondary{display:inline-flex;align-items:center;padding:12px 24px;border:1.5px solid rgba(255,255,255,.3);color:#fff;border-radius:12px;font-weight:600;font-size:.88rem;text-decoration:none;transition:all .2s;white-space:nowrap}
.sa-cta-secondary:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* Responsive */
@media(max-width:900px){
  .sa-cards{grid-template-columns:1fr 1fr;gap:16px}
  .sa-cta{flex-direction:column;text-align:center}
  .sa-cta-btns{justify-content:center}
}
@media(max-width:768px){
  .sa-sec{padding:48px 5%}
  .sa-tabs{gap:8px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .sa-tabs::-webkit-scrollbar{display:none}
  .sa-tab{flex-shrink:0;padding:8px 16px;font-size:.8rem}
  .sa-stats-bar{display:grid;grid-template-columns:1fr 1fr;border-radius:12px}
  .sa-stat{border-right:none;border-bottom:1px solid var(--border)}
  .sa-stat:nth-child(odd){border-right:1px solid var(--border)}
  .sa-stat:nth-last-child(-n+2){border-bottom:none}
  .sa-cards{grid-template-columns:1fr;gap:14px}
  .sa-uni{min-height:unset}
  .sa-cta{padding:24px 20px}
}


/* ══ STUDY ABROAD — WORLD MAP BACKGROUND ══ */
.sa-worldmap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.13;
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.sa-graticule line{
  stroke:#1E3A8A;
  stroke-width:.4;
  stroke-opacity:.6;
}
.sa-continents path{
  fill:rgba(30,58,138,.18);
  stroke:#1E3A8A;
  stroke-width:.8;
}
.sa-flight-paths{opacity:0}/* hidden by default, shown on active tab */
.sa-flight-arc{
  fill:none;
  stroke:#dc2626;
  stroke-width:1.2;
  stroke-dasharray:4 3;
  opacity:.7;
}
.sa-origin-dot{
  fill:#dc2626;
  stroke:#fff;
  stroke-width:1.2;
}
.sa-dot{
  fill:#dc2626;
  stroke:#fff;
  stroke-width:1.5;
}
.sa-dot-label{
  font-size:7px;
  fill:#1E3A8A;
  font-weight:700;
  font-family:'Sora',sans-serif;
  letter-spacing:.03em;
}
.sa-pulse-ring{
  fill:none;
  stroke:#dc2626;
  stroke-width:1.5;
  animation:saMapPulse 2s ease-out infinite;
}
.sa-pulse-ring2{
  animation-delay:.8s;
}
@keyframes saMapPulse{
  0%{r:4;stroke-opacity:.8}
  100%{r:18;stroke-opacity:0}
}
/* Make SVG visible to user but keep below content */
.sa-in{z-index:1;position:relative}
/* Increase opacity on hover of section */
.sa-sec:hover .sa-worldmap{opacity:.2;transition:opacity .4s}
/* Mobile: less prominent */
@media(max-width:768px){
  .sa-worldmap{opacity:.08}
  .sa-dot-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sa-pulse-ring,.sa-pulse-ring2{animation:none;r:6}
}


/* ══ WHY VIDYAPAATH — ANIMATED SVG BACKGROUND ══ */
.wy-bg-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.15;
  overflow:hidden;
}
.vs-in{position:relative;z-index:1}
.vs-sec{position:relative;overflow:hidden}
.wy-bg-svg .wy-nodes circle{transition:r .3s ease}
@media(max-width:768px){.wy-bg-svg{opacity:.08}}
@media(prefers-reduced-motion:reduce){
  .wy-bg-svg *{animation:none !important;animateTransform:none !important}
}


/* ══ OUR PROGRAMMES — ANIMATED SVG BACKGROUND ══ */
.cp-bg-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.18;
  overflow:visible;
}
.courses-sec{position:relative;overflow:hidden}
.courses-in{position:relative;z-index:1}
@media(max-width:768px){.cp-bg-svg{opacity:.07}}
@media(prefers-reduced-motion:reduce){
  .cp-bg-svg *{animation:none !important}
}


/* ══════════════════════════════════════════════
   STATE-WISE NEET-UG SECTION
══════════════════════════════════════════════ */
.sw-sec{padding:64px 0;background:var(--bg);position:relative;overflow:hidden}
.sw-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1;padding:0 5%}

/* Header */
.sw-header{text-align:center;margin-bottom:36px}
.sw-eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.sw-title{font-family:'Sora',sans-serif;font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;color:var(--ink);line-height:1.2;margin-bottom:10px}
.sw-title-accent{color:var(--r)}
.sw-subtitle{font-size:.92rem;color:var(--muted);max-width:560px;margin:0 auto}

/* India map SVG background */
.sw-india-svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:135%;max-width:none;opacity:.1;pointer-events:none;z-index:0}
.sw-india-outline{fill:rgba(30,58,138,.25);stroke:#1E3A8A;stroke-width:1.5}
.sw-india-grid line{stroke:#1E3A8A;stroke-width:.5;stroke-dasharray:3 5;opacity:.4}
.sw-marker .sw-dot{fill:#dc2626;stroke:#fff;stroke-width:1}
.sw-marker .sw-pulse{fill:none;stroke:#dc2626;stroke-width:1.2;animation:swMapPulse 2.2s ease-out infinite}
.sw-marker .sw-pulse2{animation-delay:.9s}
@keyframes swMapPulse{0%{r:3;stroke-opacity:.8}100%{r:16;stroke-opacity:0}}
@media(max-width:768px){.sw-india-svg{opacity:.06}}

/* Auto-sliding marquee */
.sw-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sw-marquee-track{display:flex;gap:14px;width:max-content;animation:swScroll 48s linear infinite}
.sw-marquee:hover .sw-marquee-track{animation-play-state:paused}
@keyframes swScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.sw-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:#fff;border:1.5px solid var(--border);border-radius:30px;font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap;text-decoration:none;flex-shrink:0;transition:all .22s ease;box-shadow:0 2px 8px rgba(15,25,41,.04)}
.sw-pill:hover{border-color:var(--r);background:var(--r3);color:var(--r);transform:translateY(-2px);box-shadow:0 6px 16px rgba(220,38,38,.15)}
.sw-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;transition:background .22s ease}
.sw-pill:hover .sw-pill-dot{background:var(--r)}

.sw-hint{text-align:center;font-size:.78rem;color:var(--muted);margin-top:20px}

@media(max-width:768px){
  .sw-sec{padding:48px 0}
  .sw-marquee-track{animation-duration:34s;gap:10px}
  .sw-pill{padding:9px 16px;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .sw-marquee-track{animation:none;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .sw-marker .sw-pulse,.sw-marker .sw-pulse2{animation:none;opacity:0}
}


/* ══ LOGIN MODAL — WHATSAPP PHONE INPUT ══ */
.lo-wa-icon{vertical-align:-2px;margin-right:5px}
.lo-phone-row{display:flex;align-items:stretch;gap:8px;margin-bottom:10px}
.lo-phone-prefix{display:flex;align-items:center;justify-content:center;padding:0 12px;border:1.5px solid #e2e6ea;border-radius:12px;background:#f1f5f9;font-size:.85rem;font-weight:700;color:#0f172a;flex-shrink:0;white-space:nowrap}
.lo-phone-input-tel{margin-bottom:0 !important;letter-spacing:.04em}


/* ══ FOOTER — REAL LINKS (match existing span styling) ══ */
.ft-col ul li a{display:block;padding:6px 8px;font-size:.79rem;color:rgba(255,255,255,.4);cursor:pointer;border-radius:7px;transition:all .15s;text-decoration:none}
.ft-col ul li a:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);padding-left:13px}
.ft-blinks a{font-size:.69rem;color:rgba(255,255,255,.2);cursor:pointer;transition:color .18s;text-decoration:none}
.ft-blinks a:hover{color:rgba(255,255,255,.6)}


/* ══ SA SECTION — MARQUEE + EXPLORE BTN ══ */
.sa-explore-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.35);border-radius:40px;color:#fff;font-weight:700;font-size:.88rem;text-decoration:none;transition:all .22s ease;backdrop-filter:blur(4px)}
.sa-explore-btn:hover{background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sa-card:hover{border-color:var(--r);box-shadow:0 8px 28px rgba(220,38,38,.1);transform:translateY(-3px)}
.sa-card:hover::before{opacity:1}
@media(max-width:768px){
  .sa-cards-track{animation-duration:16s}
  .sa-card{width:230px;padding:16px 14px}
  .sa-explore-btn{padding:11px 20px;font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){
  .sa-cards-track{animation:none;overflow-x:auto}
}


/* ══ SA SECTION — MOBILE COMPACTION ══ */
@media(max-width:768px){
  /* Section + wrapper */
  .sa-sec{padding:36px 4%}
  .sa-in{padding:0}

  /* Header tighter */
  .sa-header{margin-bottom:20px}
  .sa-eyebrow{font-size:.64rem;margin-bottom:8px}
  .sa-title{font-size:clamp(1.25rem,6vw,1.6rem);margin-bottom:8px}
  .sa-subtitle{font-size:.8rem;line-height:1.4}

  /* Tabs — smaller, horizontal scroll */
  .sa-tabs{gap:8px;margin-bottom:18px;padding-bottom:4px}
  .sa-tab{min-width:70px;padding:8px 10px;gap:5px;border-radius:12px}
  .sa-tab-img-wrap{width:44px;height:30px;border-radius:5px}
  .sa-tab-label{font-size:.65rem}

  /* Stats — horizontal 1-row scrollable instead of 2x2 grid */
  .sa-stats-bar{display:flex;overflow-x:auto;scrollbar-width:none;border-radius:12px;margin-bottom:16px;flex-wrap:nowrap}
  .sa-stats-bar::-webkit-scrollbar{display:none}
  .sa-stat{min-width:90px;flex:0 0 auto;border-right:1px solid var(--border) !important;border-bottom:none !important;padding:12px 10px}
  .sa-stat:last-child{border-right:none !important}
  .sa-stat-v{font-size:.85rem}
  .sa-stat-l{font-size:.6rem}

  /* Cards marquee */
  .sa-card{width:200px;padding:14px 12px}
  .sa-uni{font-size:.85rem;min-height:unset}
  .sa-fee{font-size:1rem}
  .sa-note{font-size:.72rem;padding:6px 0}

  /* CTA — compact */
  .sa-cta{margin-top:20px;padding:16px 14px;gap:12px;border-radius:14px}
  .sa-cta-text h3{font-size:1rem;margin-bottom:4px}
  .sa-cta-text p{display:none}
  .sa-cta-btns{gap:8px;justify-content:center;width:100%}
  .sa-cta-primary,.sa-cta-secondary,.sa-explore-btn{padding:10px 14px;font-size:.78rem;border-radius:10px}
  .sa-cta-primary{flex:1}
  .sa-explore-btn{flex:1;justify-content:center;padding:10px 14px;font-size:.78rem}
}


/* ══ SA CTA BUTTONS — MOBILE LAYOUT FIX ══ */
@media(max-width:768px){
  .sa-cta-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .sa-cta-primary{grid-column:1 / -1;justify-content:center}
  .sa-explore-btn{justify-content:center;padding:10px 12px;font-size:.78rem}
  .sa-cta-secondary{justify-content:center;padding:10px 12px;font-size:.78rem}
}


/* ══ HERO RANK-SEARCH — DEFINITIVE MOBILE FIX ══ */
@media(max-width:768px){
  body .rank-search{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    padding:10px 10px 10px 10px !important;
    gap:8px !important;
    border-radius:14px !important;
    position:relative !important;
    margin-bottom:20px !important;
  }
  /* Icon: absolute, pinned to top-left, vertically centred with select row */
  .rank-search-ico{
    position:absolute !important;
    top:21px !important;
    left:14px !important;
    font-size:1.05rem !important;
    line-height:1 !important;
    z-index:2 !important;
    pointer-events:none !important;
    transform:none !important;
  }
  /* Select: padding-left clears the icon */
  #programmeSelect{
    width:100% !important;
    box-sizing:border-box !important;
    padding:10px 10px 10px 36px !important;
    border:1.5px solid var(--border) !important;
    border-radius:9px !important;
    font-size:.85rem !important;
    font-weight:600 !important;
    background:#f8faff !important;
    color:var(--ink) !important;
    appearance:auto !important;
    -webkit-appearance:auto !important;
    outline:none !important;
  }
  /* Rank input: full-width, clean */
  #rankInput{
    width:100% !important;
    box-sizing:border-box !important;
    padding:10px 12px !important;
    border:1.5px solid var(--border) !important;
    border-radius:9px !important;
    font-size:.85rem !important;
    background:#f8faff !important;
    color:var(--ink) !important;
    outline:none !important;
  }
  /* Button: full-width */
  .rank-search-btn{
    width:100% !important;
    padding:13px 20px !important;
    font-size:.9rem !important;
    border-radius:10px !important;
    text-align:center !important;
    justify-content:center !important;
  }
}


/* ══ AI CHATBOT — TYPING BUBBLE & CHAT UPGRADES ══ */
.wa-typing-bubble{
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 14px;
  min-width:52px;
  background:#f1f5f9;
  border-radius:18px 18px 18px 4px;
}
.wa-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#94a3b8;
  animation:waDotBounce 1.2s infinite ease-in-out;
  flex-shrink:0;
}
.wa-dot:nth-child(1){animation-delay:0s}
.wa-dot:nth-child(2){animation-delay:.2s}
.wa-dot:nth-child(3){animation-delay:.4s}
@keyframes waDotBounce{
  0%,80%,100%{transform:scale(1);opacity:.5}
  40%{transform:scale(1.35);opacity:1}
}
/* Send button disabled state while AI is thinking */
.wa-send-btn:disabled{opacity:.45;cursor:not-allowed}
/* ── dashboard v4 helpers ── */
.dash-save-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:linear-gradient(135deg,#DC2626,#B91C1C);color:#fff;border:none;border-radius:10px;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}
.dash-save-btn:hover{box-shadow:0 8px 24px rgba(220,38,38,.35);transform:translateY(-1px)}
.dash-save-btn .ds-spin{display:none}
.dash-form-footer{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:8px}
.dash-form-footer #profileMsg{font-size:.8rem;color:#059669;font-weight:600}
.dash-empty{color:#94A3B8;font-size:.86rem;padding:28px 0;text-align:center}
.dash-setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;border-bottom:1px solid #E2E8F0;font-size:.86rem;font-weight:500;color:#1E2A3A;cursor:pointer}
.dash-setting-row input{width:18px;height:18px;accent-color:#DC2626;cursor:pointer}
.billing-empty-state{text-align:center;padding:48px 20px;color:#94A3B8}
.billing-empty-state svg{width:48px;height:48px;margin-bottom:14px}
.billing-empty-state p{font-weight:700;color:#1E2A3A;font-size:.95rem;margin-bottom:6px}
.billing-empty-state span{font-size:.82rem}
.btn-o-dash{padding:9px 16px;border:1.5px solid #E2E8F0;background:#fff;border-radius:9px;font-size:.8rem;font-weight:600;color:#1E2A3A;cursor:pointer;font-family:inherit}
.btn-o-dash:hover{border-color:#DC2626;color:#DC2626}
.btn-danger-dash{padding:9px 16px;border:1.5px solid #FECACA;background:#FEF2F2;border-radius:9px;font-size:.8rem;font-weight:600;color:#DC2626;cursor:pointer;font-family:inherit}
.btn-danger-dash:hover{background:#DC2626;color:#fff;border-color:#DC2626}