:root{
  --navy-900:#0b1e3d;
  --navy-800:#122a52;
  --navy-700:#1b3a6b;
  --blue-500:#2f6fe4;
  --purple-500:#8b5cf6;
  --purple-400:#a78bfa;
  --sky-500:#38bdf8;
  --blue-400:#38bdf8;
  --orange-500:#ff8a3d;
  --yellow-400:#ffb020;
  --bg:#f6f8fc;
  --white:#ffffff;
  --ink:#101a30;
  --muted:#5b6779;
  --line:#e6eaf2;
  --radius:16px;
  --shadow-sm:0 4px 16px rgba(15,42,74,0.06);
  --shadow-md:0 12px 32px rgba(15,42,74,0.10);
  --shadow-lg:0 24px 60px rgba(15,42,74,0.14);
  --font-head:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  max-width:100vw;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;touch-action:manipulation;}
button{touch-action:manipulation;}
.reveal{will-change:opacity,transform;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;position:relative;z-index:1;}
h1,h2,h3{font-family:var(--font-head);color:var(--navy-900);letter-spacing:-0.01em;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--blue-500);background:rgba(47,111,228,0.08);
  padding:7px 14px;border-radius:20px;margin-bottom:16px;
}
/* Sections used the full 96px top+bottom by default, but several other
   sections (Hero, Stats, Founder, Why, Top Earners) already have their
   own hand-tuned tighter padding — the mismatch between those and every
   plain `.section` (Courses/Calculator/How-It-Works/Team/Testimonials/
   Certificates/FAQ, all default 96/96) was producing wildly inconsistent
   gaps between sections (as small as ~70px, as large as ~190px) so the
   page read as disjointed blocks rather than one flowing page. Trimmed
   the shared default so the whole page's rhythm is far more even —
   individual sections' own overrides (colours, #why, Founder, etc.) are
   untouched. */
.section{padding:48px 0;position:relative;}
/* Skills marquee section is short/light content (no card grid below it
   like other sections), so the default padding+padding gap to the next
   section reads as an oversized empty gap — trim just this section's
   bottom padding to tighten it further still. */
#why{padding-bottom:18px;}
@media(max-width:768px){ #why{padding-bottom:10px;} }
.section-head{max-width:600px;margin:0 auto 44px;text-align:center;position:relative;z-index:1;}
.section-head::before{content:'';display:block;width:52px;height:4px;border-radius:4px;margin:0 auto 18px;background:linear-gradient(90deg,var(--sky-500),var(--purple-500));}
.section-head h2{font-size:clamp(26px,4vw,38px);line-height:1.18;font-weight:700;}
.section-head p{margin-top:12px;color:var(--muted);font-size:16px;}
@media(max-width:768px){ .section{padding:28px 0;} .section-head{margin-bottom:32px;} }
/* Team section — matches its white/gold theme */
#team .eyebrow{color:#92640a;background:rgba(245,158,11,0.12);}
#team .section-head::before{background:linear-gradient(90deg,#fde68a,#f59e0b 55%,#d97706);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:12px;font-weight:600;font-size:15px;
  min-height:48px;transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--blue-500),var(--purple-500));
  color:#fff;box-shadow:var(--shadow-md);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(27,58,107,0.28);}
.btn-accent{
  background:linear-gradient(135deg,var(--orange-500),var(--yellow-400));
  color:#fff;box-shadow:0 10px 24px rgba(255,138,61,0.3);
}
.btn-accent:hover{transform:translateY(-2px);}
.btn-outline{border:1.5px solid var(--line);color:var(--navy-900);background:#fff;}
.btn-outline:hover{border-color:var(--blue-500);color:var(--blue-500);}
/* ---- Get Started (nav + drawer) — always green ---- */
.btn-getstarted{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;box-shadow:0 10px 24px -6px rgba(21,128,61,0.45);}
.btn-getstarted:hover{transform:translateY(-2px);box-shadow:0 14px 30px -6px rgba(21,128,61,0.55);}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.9,.32,1),transform .7s cubic-bezier(.22,.9,.32,1);}
.reveal.in{opacity:1;transform:translateY(0);}
/* stronger scroll-in animation for the earning calculator card */
.reveal-pop{opacity:0;transform:translateY(38px) scale(.94);transition:opacity .8s cubic-bezier(.22,.9,.32,1),transform .8s cubic-bezier(.22,.9,.32,1);}
.reveal-pop.in{opacity:1;transform:translateY(0) scale(1);}

/* ===== Icon system (replaces emoji site-wide) ===== */
.s2i-icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0;}
.s2i-icon-wrap svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1);}

/* ===== Global micro-animations ===== */
@keyframes s2iFadeInUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes s2iFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes s2iPulseRing{0%{box-shadow:0 0 0 0 rgba(139,92,246,.4);}70%{box-shadow:0 0 0 12px rgba(139,92,246,0);}100%{box-shadow:0 0 0 0 rgba(139,92,246,0);}}
@keyframes s2iSpinSlow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* shimmer sweep on primary CTAs */
.btn-primary,.pkg-btn-buy{position:relative;overflow:hidden;}
.btn-primary::after,.pkg-btn-buy::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .65s cubic-bezier(.22,.9,.32,1);pointer-events:none;
}
.btn-primary:hover::after,.pkg-btn-buy:hover::after{left:130%;}

/* smoother card lift on hover, applies to any existing hover-transform cards */
.course-card,.pkg-card,.d-card,.d-stat,.mc-card,.qa-card{transition:transform .35s cubic-bezier(.22,.9,.32,1),box-shadow .35s cubic-bezier(.22,.9,.32,1) !important;}

/* icon nudge on interactive hover */
a:hover .s2i-icon-wrap svg,button:hover .s2i-icon-wrap svg,.d-nav-item:hover .s2i-icon-wrap svg,.qa-card:hover .s2i-icon-wrap svg,.dash-side a:hover .s2i-icon-wrap svg{transform:scale(1.18) rotate(-6deg);}

/* staggered grid reveal */
.course-grid.reveal-stagger > *,.pkgs-grid > .reveal,.mc-grid > *{opacity:0;animation:s2iFadeInUp .6s cubic-bezier(.22,.9,.32,1) forwards;}
.course-grid.reveal-stagger > *:nth-child(1),.pkgs-grid > .reveal:nth-child(1){animation-delay:.05s;}
.course-grid.reveal-stagger > *:nth-child(2),.pkgs-grid > .reveal:nth-child(2){animation-delay:.12s;}
.course-grid.reveal-stagger > *:nth-child(3),.pkgs-grid > .reveal:nth-child(3){animation-delay:.19s;}
.course-grid.reveal-stagger > *:nth-child(4),.pkgs-grid > .reveal:nth-child(4){animation-delay:.26s;}
.course-grid.reveal-stagger > *:nth-child(5),.pkgs-grid > .reveal:nth-child(5){animation-delay:.33s;}
.course-grid.reveal-stagger > *:nth-child(6),.pkgs-grid > .reveal:nth-child(6){animation-delay:.4s;}

/* gentle float for standout/featured cards */
.pkg-tier-card.top{animation:s2iFloat 4.5s ease-in-out infinite;}
.pkg-tier-card.top:hover{animation-play-state:paused;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in,.pkg-tier-card.top,.course-grid.reveal-stagger > *,.pkgs-grid > .reveal,.mc-grid > *{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;}
}

/* ===== HEADER / NAVBAR ===== */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,0.97);
  border-bottom:1px solid var(--line);
}
/* backdrop-filter:blur on a position:sticky element forces the browser to
   continuously re-sample/blur everything behind it on every scroll frame —
   one of the most expensive things you can ask a phone browser to do,
   especially mid-range Android. Desktop scrolling is rarely a perf problem,
   so the frosted-glass look stays there; mobile gets a solid (still
   slightly translucent) background instead — same visual family, none of
   the scroll cost. */
@media(min-width:769px){
  header{ background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:1180px;margin:0 auto;}
.logo{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--navy-900);}
.logo span{background:linear-gradient(135deg,var(--sky-500),var(--purple-500));-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-links{display:flex;gap:28px;font-size:14.5px;font-weight:600;color:var(--navy-800);}
.nav-links a:hover{color:var(--blue-500);}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-login{font-size:14.5px;font-weight:600;color:var(--navy-800);padding:10px 6px;}
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;align-items:center;border-radius:50%;
  background:var(--s2i-menu-btn-bg, linear-gradient(150deg,#7dd3fc,#38bdf8 55%,#0ea5e9 130%));
  box-shadow:0 4px 14px -2px rgba(56,189,248,0.55),0 0 0 1px rgba(255,255,255,0.25) inset,0 -3px 6px rgba(0,0,0,0.15) inset;
  border:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;
}
.hamburger:hover{transform:translateY(-2px);box-shadow:0 8px 20px -2px rgba(56,189,248,0.65),0 0 0 1px rgba(255,255,255,0.3) inset,0 -3px 6px rgba(0,0,0,0.15) inset;}
.hamburger:active{transform:translateY(0);}
.hamburger span{width:20px;height:2.4px;background:#fff;border-radius:2px;transition:.3s;box-shadow:0 1px 2px rgba(0,0,0,0.2);}
/* Mobile-only quick-login icon button, sits just left of the hamburger —
   the "Login" text link is hidden on mobile (see the media query below),
   so this gives mobile visitors one-tap access to login.html without
   opening the full drawer menu. */
.nav-login-icon{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;flex-shrink:0;margin-right:8px;
  background:#fff;border:1.5px solid rgba(47,111,228,0.25);color:var(--blue-500);
  box-shadow:0 4px 12px -2px rgba(47,111,228,0.25);
  -webkit-tap-highlight-color:transparent;outline:none;
}
/* The global icon-hover effect (scale+rotate, see a:hover .s2i-icon-wrap svg
   further down) fires on this too since it's an <a> — on mobile a tap
   simulates :hover, so the icon visibly tilted on every touch. This icon
   should just stay put, so cancel it here specifically (higher specificity
   than the global rule, so it wins). */
.nav-login-icon:hover .s2i-icon-wrap svg{transform:none;}
@media(max-width:900px){
  .nav-links,.nav-right .btn-primary,.nav-right .btn-getstarted,.nav-right .nav-login{display:none;}
  .hamburger{display:flex;}
  .nav-login-icon{display:flex;}
}
/* mobile drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(11,30,61,0.4);z-index:299;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.drawer-overlay.open{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:78%;max-width:320px;
  background:#fff;z-index:300;padding:24px;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;gap:6px;box-shadow:-10px 0 40px rgba(0,0,0,0.15);
}
.drawer.open{transform:translateX(0);}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.drawer-close{width:44px;height:44px;font-size:26px;color:var(--navy-900);}
.drawer a{padding:14px 8px;font-weight:600;font-size:16px;color:var(--navy-900);border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center;}
.drawer .btn{margin-top:16px;width:100%;}
/* ---- Prominent LOGIN box at top of drawer ---- */
.drawer-login-box{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#0b3fa3;
  color:#fff !important;font-weight:800 !important;font-size:15.5px !important;
  border-radius:14px;padding:14px !important;margin:10px 0 !important;border-bottom:none !important;
  box-shadow:0 10px 22px -8px rgba(11,63,163,0.55);
}
.drawer-login-box:active{transform:scale(0.98);}

/* ===== POSTER / BANNER (bold, energetic, optional image) ===== */
.poster{padding-top:6px;}
.poster-card{
  background:linear-gradient(120deg,#0b1e3d,#1b3a6b 45%,#2f6fe4 82%,#38bdf8 130%);
  border-radius:22px;padding:0;color:#fff;
  display:flex;flex-wrap:wrap;align-items:stretch;
  box-shadow:0 20px 50px -18px rgba(47,111,228,0.45);position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}
.poster-card::after{content:'';position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,0.35),transparent 70%);}
.poster-card::before{content:'';position:absolute;left:-50px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,0.28),transparent 70%);}
.poster-img{width:180px;min-height:100%;object-fit:cover;flex-shrink:0;display:none;}
.poster-img[src]:not([src=""]){display:block;}
.poster-body{
  flex:1;padding:30px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  position:relative;z-index:1;
}
.poster-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:#7dd3fc;}
.poster-card h3{color:#fff;font-size:clamp(18px,2.6vw,24px);position:relative;z-index:1;}
.poster-card p{color:rgba(255,255,255,0.82);font-size:14px;margin-top:6px;position:relative;z-index:1;}
.poster-card .btn{position:relative;z-index:1;background:#fff;color:#1b3a6b;font-weight:700;box-shadow:0 8px 20px -6px rgba(0,0,0,0.35);}
.poster-card .btn:hover{background:#eafcff;transform:translateY(-1px);}
@media(max-width:640px){.poster-img{width:100%;height:130px;}.poster-body{padding:22px 20px;}}

/* ===== POSTER CAROUSEL (admin posters, auto-scroll one after another) ===== */
.poster-carousel-wrap{margin-top:0;position:relative;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px -18px rgba(47,111,228,0.4);border:1px solid var(--line);}
.poster-carousel{position:relative;width:100%;aspect-ratio:16/7;background:linear-gradient(135deg,var(--navy-800),var(--purple-500));}
/* Cycling is driven entirely by a browser-native CSS animation (see
   renderPosterCarousel() in index.html, which generates the exact
   @keyframes for however many posters exist and staggers each slide's
   animation-delay) — no JS timer runs after the initial render, so this
   can't silently stop the way a setInterval-based approach could.
   Pausing on hover is pure CSS too. */
.poster-slide{position:absolute;inset:0;opacity:0;display:flex;align-items:flex-end;background-size:cover;background-position:center;}
.poster-carousel-wrap:hover .poster-slide,
.poster-carousel-wrap:hover .poster-carousel-dots span{animation-play-state:paused;}
.poster-slide-overlay{width:100%;padding:22px 26px;background:linear-gradient(0deg,rgba(11,30,61,0.85),transparent 85%);color:#fff;}
.poster-slide-overlay h4{font-size:clamp(15px,2.2vw,20px);font-weight:800;margin-bottom:4px;}
.poster-slide-overlay p{font-size:12.5px;color:rgba(255,255,255,0.85);}
.poster-carousel-dots{position:absolute;bottom:10px;right:16px;display:flex;gap:6px;z-index:2;}
/* Prev/next arrows — deliberately subtle (low default opacity, small),
   so they read as "available if you want them" rather than a loud UI
   element competing with the poster image itself. Purely a hover/opacity
   transition, no continuous animation. */
.poster-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,30,61,0.28);color:#fff;opacity:0.55;
  transition:opacity .2s ease,background .2s ease;
}
.poster-carousel-wrap:hover .poster-nav{opacity:0.85;}
.poster-nav:hover{background:rgba(11,30,61,0.5);opacity:1 !important;}
.poster-nav.prev{left:10px;}
.poster-nav.next{right:10px;}
@media(max-width:560px){.poster-nav{width:28px;height:28px;}}
.poster-carousel-dots span{width:7px;height:7px;border-radius:50%;background:#fff;opacity:0.45;}
@media(prefers-reduced-motion:reduce){.poster-slide,.poster-carousel-dots span{animation:none !important;opacity:1 !important;}}
@media(max-width:640px){.poster-carousel{aspect-ratio:4/3;}}

/* ---- Motivation video row (fixed 2nd poster slide) ---- */

/* ===== HERO ===== */
.hero{padding:18px 0 6px;position:relative;}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:26px;}
/* ---- Glass-transparent card around the whole intro block — White/Purple
   theme. "Glass" look comes from a translucent white gradient + soft
   border + layered static shadows (NOT backdrop-filter:blur, which is the
   single biggest cause of jank on phones — this reads as glass without
   that cost). No continuous animation on the card itself anymore either
   (was floating every frame before); everything here is now a one-time
   paint, which is as smooth as it gets. ---- */
.hero-intro{
  width:100%;max-width:820px;text-align:center;position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,0.72),rgba(250,247,255,0.6) 55%,rgba(245,237,255,0.68));
  border-radius:30px;padding:40px 34px 34px;
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 18px 14px -14px rgba(139,92,246,0.10),
    0 40px 50px -24px rgba(139,92,246,0.20),
    0 70px 90px -40px rgba(88,28,135,0.16);
  overflow:hidden;
}
.hero-intro::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0.5;
  background-image:radial-gradient(rgba(139,92,246,0.10) 1px,transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 30%,#000,transparent 80%);
  mask-image:radial-gradient(60% 60% at 50% 30%,#000,transparent 80%);
}
.hero-intro::after{
  content:'';position:absolute;top:-70px;right:-70px;width:220px;height:220px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(139,92,246,0.20),transparent 70%);
}
.hero-intro > *{position:relative;z-index:1;}
.hero h1{line-height:1.15;font-weight:800;}
/* Line 1 — "Welcome to SKILL2INDIA" — sized (via vw, calibrated with
   generous margin) to always fit on a single line, on any screen, without
   needing white-space:nowrap (so on the rare device it doesn't quite fit,
   it wraps gracefully instead of clipping). */
.hero h1 .hero-line1{font-size:clamp(17px,5.6vw,44px);display:block;}
/* Line 2 — the tagline — deliberately smaller (relative em, scales with
   line 1) so its longer text also comfortably stays on one line; reads
   as a subtitle under the brand name, which is the more premium pairing
   anyway. */
.hero h1 .hero-line2{font-size:0.52em;display:block;font-weight:700;color:var(--navy-800);margin-top:10px;letter-spacing:0;text-transform:none;}
/* Accent word (brand name) — solid colour + uppercase display (the stored
   text itself stays whatever an admin typed, e.g. "Skill2India"; this is
   purely a visual transform) + a soft glow tuned to match its own colour. */
.hero h1 .accent{
  color:var(--hero-accent-color,#1e3a8a);
  text-transform:uppercase;letter-spacing:0.01em;
  position:relative;display:inline-block;
  text-shadow:0 6px 24px var(--hero-accent-glow,rgba(30,58,138,0.28));
}
/* Stylish yellow underline — slightly tilted (hand-drawn feel) rounded
   gradient bar with a soft glow. Static (no keyframe) — a decoration
   should never be a source of jank, so this is a one-time paint only. */
.hero h1 .accent::after{
  content:'';position:absolute;left:3%;right:3%;bottom:-4px;height:5px;border-radius:6px;
  background:linear-gradient(90deg,var(--hero-underline-color2,#fde047),var(--hero-underline-color,#f59e0b) 50%,var(--hero-underline-color2,#fde047));
  box-shadow:0 3px 12px -2px var(--hero-underline-glow,rgba(245,158,11,0.55));
  transform:rotate(-2.5deg);transform-origin:center;
}
.hero .lede{margin:18px auto 0;color:var(--muted);font-size:18px;line-height:1.6;max-width:560px;}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center;}

/* ---- Premium badge above heading — colour admin-editable via --hero-badge-*
   vars (set in JS from a single hex, see applyHeroColors()). Pulse is
   transform/opacity only — no box-shadow keyframe — for max smoothness. ---- */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--hero-badge-text,#5b21b6);background:var(--hero-badge-bg,linear-gradient(135deg,rgba(56,189,248,0.14),rgba(139,92,246,0.14)));
  border:1px solid var(--hero-badge-border,rgba(139,92,246,0.28));padding:7px 16px 7px 14px;border-radius:999px;margin-bottom:16px;
  box-shadow:0 4px 14px -6px var(--hero-badge-glow,rgba(139,92,246,0.35));
  animation:heroBadgePulse 3s ease-in-out infinite;will-change:transform;
}
.hero-badge span[data-icon]{color:var(--hero-badge-icon,#8b5cf6);flex-shrink:0;display:flex;}
@keyframes heroBadgePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
.hero.s2i-hero-paused .hero-badge{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.hero-badge{animation:none !important;}}

/* ---- CTA buttons — icon spacing, colours admin-editable, one-time shine
   sweep on the primary. Scoped to .hero-cta only — the sitewide
   .btn-primary/.btn-outline used everywhere else are untouched. ---- */
.hero-cta .btn span[data-icon]{display:flex;flex-shrink:0;}
.hero-cta .btn-primary{
  background:linear-gradient(135deg,var(--hero-btn-from,var(--blue-500)),var(--hero-btn-to,var(--purple-500)));
  color:var(--hero-btn-text,#fff);
}
.hero-cta .btn-outline{border-color:var(--line);color:var(--navy-900);}
.hero-cta .btn-outline:hover{border-color:var(--hero-outline-color,var(--blue-500));color:var(--hero-outline-color,var(--blue-500));}
.hero-btn-shine{position:relative;overflow:hidden;}
.hero-btn-shine::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,0.55) 50%,transparent 65%);
  background-size:220% 100%;background-position:220% 0;
}
.hero-btn-shine:hover::after{opacity:1;animation:heroBtnShine .9s ease forwards;}
@keyframes heroBtnShine{from{background-position:220% 0;}to{background-position:-60% 0;}}

/* ---- Trust row: avatar-stack + verified line, under the CTAs ---- */
.hero-trust-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;flex-wrap:wrap;}
.hero-avatar-stack{display:flex;flex-shrink:0;}
.hero-avatar{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12px;border:2px solid #fff;margin-left:-10px;
  box-shadow:0 2px 6px rgba(20,30,60,0.18);
}
.hero-avatar-stack .hero-avatar:first-child{margin-left:0;}
.hero-trust-text{font-size:12.5px;color:var(--muted);line-height:1.5;text-align:left;}
.hero-trust-text b{color:var(--navy-900);}
.hero-trust-verified{display:flex;align-items:center;gap:5px;color:#16a34a;font-weight:600;font-size:11.5px;margin-top:1px;}
.hero-trust-verified svg{flex-shrink:0;}

/* ---- Social-proof ticker — glowing ripple dot + gradient border ---- */
.hero-proof-pill{
  display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid rgba(139,92,246,0.22);border-radius:999px;padding:8px 16px 8px 12px;
  font-size:12.5px;font-weight:600;color:var(--ink);
  box-shadow:0 4px 14px rgba(20,30,60,0.08),0 0 0 1px rgba(255,255,255,0.6) inset;
  animation:socialProofFade .5s ease;
}
.hero-proof-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;display:inline-block;}
.hero-proof-ring{position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #22c55e;animation:heroProofRipple 1.8s ease-out infinite;}
.hero.s2i-hero-paused .hero-proof-ring{animation-play-state:paused;}
@keyframes heroProofRipple{0%{transform:scale(0.6);opacity:0.9;}100%{transform:scale(2.2);opacity:0;}}
.hero-proof-time{color:var(--muted);font-weight:500;}
@media(prefers-reduced-motion:reduce){.hero-proof-ring{animation:none !important;opacity:0;}}

/* ---- Floating stat badges on the hero visual (paused off-screen via the
   existing .hero-visual/.hv-anim-paused zone already wired in app-shell.js) ---- */
.hero-float-badge{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px;
  font-size:11.5px;font-weight:700;color:var(--navy-900);box-shadow:0 8px 20px -8px rgba(20,30,60,0.3);
  animation:heroFloatBadgeMove 4.5s ease-in-out infinite;will-change:transform;
}
.hero-float-badge b{color:var(--blue-500);}
.hero-float-badge svg{flex-shrink:0;}
.hero-float-badge-a{top:10px;right:10px;color:#f59e0b;}
.hero-float-badge-a svg{color:#f59e0b;}
.hero-float-badge-a b{color:#d97706;}
.hero-float-badge-b{bottom:14px;left:10px;animation-delay:1.4s;}
.hero-float-badge-b svg{color:#f472b6;}
.hero-float-badge-b b{color:#db2777;}
@keyframes heroFloatBadgeMove{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.hero-visual.hv-anim-paused .hero-float-badge{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.hero-float-badge{animation:none !important;}}
@media(max-width:560px){.hero-float-badge{display:none;}}

/* ---- Bottom scroll hint ---- */
.hero-scroll-hint{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  margin:14px auto 0;width:fit-content;font-size:11.5px;font-weight:600;color:var(--muted);
  animation:heroScrollBounce 2s ease-in-out infinite;
}
.hero-scroll-hint span[data-icon]{display:flex;}
@keyframes heroScrollBounce{0%,100%{transform:translateY(0);opacity:0.7;}50%{transform:translateY(6px);opacity:1;}}
.hero.s2i-hero-paused .hero-scroll-hint{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.hero-scroll-hint{animation:none !important;}}
@media(max-width:900px){.hero-scroll-hint{display:none;}}

.hero-visual{
  position:relative;background:#fff;border-radius:24px;padding:26px 26px 18px;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
  width:100%;max-width:640px;margin:0 auto;
}
.hero-visual::after{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:linear-gradient(160deg,rgba(56,189,248,0.10),rgba(139,92,246,0.10) 55%,rgba(255,138,61,0.08));
}
.hv-glow{
  position:absolute;left:8%;right:8%;top:12%;height:60%;border-radius:50%;
  background:radial-gradient(60% 60% at 50% 50%,rgba(139,92,246,0.28),transparent 70%);
  filter:blur(28px);z-index:0;
}
/* ===== HERO SKILLS VISUAL — 4 switchable styles (tree/orbs/bubbles/cards).
   Skills float or sit as glowing gradient chips; same admin-editable list
   (Admin Panel → Skill Tree) drives all of them plus the falling-text
   strip below. Everything is clipped to the card so nothing pokes outside
   the box at any breakpoint. ===== */
.hero-visual{overflow:hidden;}
.hero-visual.cards-mode{overflow:visible;}
.tree-canopy-glow{
  position:absolute;left:6%;right:6%;top:6%;height:72%;border-radius:50%;
  background:radial-gradient(55% 55% at 50% 46%,rgba(56,189,248,0.24),rgba(139,92,246,0.16) 55%,transparent 74%);
  filter:blur(24px);z-index:0;
}
.skill-tree-stage{position:relative;z-index:1;width:100%;overflow:hidden;border-radius:16px;}
.skill-tree-stage.style-tree,.skill-tree-stage.style-orbs,.skill-tree-stage.style-bubbles{aspect-ratio:460/300;}
.skill-tree-stage.style-cards{aspect-ratio:unset;overflow:visible;}
.skill-tree-stage.style-classic{aspect-ratio:460/380;}

/* shared chip text truncation (used by tree/orb/bubble pills) */
.skill-orb-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

/* ---- Style: TREE ---- */
.tree-svg{position:absolute;inset:0;width:100%;height:100%;}
.tree-branch{animation:treeBranchSway 5.5s ease-in-out infinite;transform-origin:230px 235px;}
.tree-branch.b2{animation-duration:6.2s;animation-delay:.3s;}
.tree-branch.b3{animation-duration:5s;animation-delay:.6s;}
.tree-branch.b4{animation-duration:6.6s;animation-delay:.15s;}
.tree-branch.b5{animation-duration:5.8s;animation-delay:.45s;}
@keyframes treeBranchSway{0%,100%{transform:rotate(-0.6deg);}50%{transform:rotate(0.6deg);}}
.tree-leaves{position:absolute;inset:0;z-index:2;}
.tree-leaf{
  position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;max-width:150px;
  box-shadow:0 10px 22px -8px var(--leaf-glow,rgba(16,185,129,0.55)),0 0 0 1px rgba(255,255,255,0.22) inset;
  background:linear-gradient(135deg,var(--leaf-c1,#16a34a),var(--leaf-c2,#0d9488));
  animation:leafSway 3.6s ease-in-out infinite;
}
.tree-leaf::before{content:"🌿";font-size:9.5px;filter:drop-shadow(0 0 3px rgba(255,255,255,0.5));flex-shrink:0;}
.tree-leaf.sz-sm{font-size:10px;padding:5px 10px;}
.tree-leaf.sz-lg{font-size:11.5px;padding:7px 13px;}
@keyframes leafSway{0%,100%{transform:translate(-50%,-50%) rotate(-3deg) translateY(0);}50%{transform:translate(-50%,-50%) rotate(3deg) translateY(-4px);}}

/* ---- Style: ORBS ---- */
.orb-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.orb-links path{stroke:url(#orbLinkGrad);stroke-width:1.2;fill:none;opacity:0.4;animation:orbLinkPulse 3.4s ease-in-out infinite;}
.orb-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:64px;height:64px;}
.orb-center-core{
  position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--blue-500),var(--purple-500));
  box-shadow:0 14px 30px -10px rgba(47,111,228,0.55),0 0 0 1px rgba(255,255,255,0.25) inset;
  animation:orbCoreFloat 4.5s ease-in-out infinite;
}
.orb-center-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(56,189,248,0.5);animation:orbRingPulse 2.8s ease-out infinite;}
.orb-center-ring.r2{animation-delay:1.1s;border-color:rgba(139,92,246,0.4);}
@keyframes orbRingPulse{0%{transform:scale(1);opacity:0.7;}100%{transform:scale(2.3);opacity:0;}}
@keyframes orbCoreFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes orbLinkPulse{0%,100%{opacity:0.22;}50%{opacity:0.5;}}
.skill-orbs{position:absolute;inset:0;z-index:2;}
.skill-orb{
  position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;max-width:150px;
  box-shadow:0 10px 22px -8px var(--leaf-glow,rgba(56,189,248,0.5)),0 0 0 1px rgba(255,255,255,0.22) inset;
  background:linear-gradient(135deg,var(--leaf-c1,#2563eb),var(--leaf-c2,#7c3aed));
  animation:orbFloat 4.2s ease-in-out infinite;
}
.skill-orb::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,0.8);flex-shrink:0;}
.skill-orb.sz-sm{font-size:10px;padding:5px 11px;}
.skill-orb.sz-lg{font-size:11.5px;padding:8px 15px;}
@keyframes orbFloat{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-7px);}}

/* ---- Style: BUBBLES — soft glassy floating bubbles, no hub/lines ---- */
.skill-bubbles{position:absolute;inset:0;z-index:2;}
.skill-bubble{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  padding:10px 8px;border-radius:50%;width:78px;height:78px;text-align:center;font-size:10px;font-weight:800;color:#fff;
  box-shadow:0 12px 26px -10px var(--leaf-glow,rgba(56,189,248,0.5)),0 0 0 1px rgba(255,255,255,0.3) inset,inset 0 10px 14px rgba(255,255,255,0.25);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,0.55),transparent 42%),linear-gradient(150deg,var(--leaf-c1,#2563eb),var(--leaf-c2,#7c3aed));
  animation:bubbleFloat ease-in-out infinite;
}
.skill-bubble .skill-orb-txt{white-space:normal;line-height:1.15;max-width:60px;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;}
.skill-bubble.sz-sm{width:58px;height:58px;font-size:9px;}
.skill-bubble.sz-lg{width:92px;height:92px;font-size:11px;}
@keyframes bubbleFloat{0%,100%{transform:translate(-50%,-50%) translateY(0) translateX(0);}50%{transform:translate(-50%,-50%) translateY(-9px) translateX(4px);}}

/* ---- Style: CARDS (default) — clean static grid, one-time fade-in only ---- */
.skill-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:4px;}
.skill-card{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px 12px;box-shadow:0 6px 16px -10px rgba(30,20,80,0.18);transition:transform .2s ease,box-shadow .2s ease;
}
.skill-card:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(30,20,80,0.28);}
.skill-card-icon{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,0.3);}
.skill-card-txt{font-size:12.5px;font-weight:700;color:var(--navy-900);line-height:1.25;}
@media(min-width:640px){.skill-cards-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}

/* ---- Style: CLASSIC — original laptop illustration, revived with a
   premium animation layer: ambient glow pulse behind the whole
   illustration, floating+tilting graduation cap with a pulsing bead,
   a diagonal shine sweeping across the laptop screen, floating chips
   (labels from the admin skill list) with a pulsing "live" dot on the
   first one. Chip positions stay inside safe bounds so nothing clips. */
.hv-ambient-glow{
  position:absolute;left:8%;right:8%;top:8%;height:70%;border-radius:50%;
  background:radial-gradient(55% 55% at 50% 45%,rgba(47,111,228,0.22),rgba(139,92,246,0.14) 55%,transparent 75%);
  filter:blur(30px);z-index:0;animation:hvGlowPulse 4.5s ease-in-out infinite;
}
@keyframes hvGlowPulse{0%,100%{opacity:0.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
@keyframes socialProofFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.s2i-copy-flash{ animation:s2iCopyFlash .4s ease; }
@keyframes s2iCopyFlash{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
/* Five infinite animations run on this hero cluster (glow pulse, float,
   tilt, bead pulse, shine sweep) — fine while it's on-screen, but with no
   pause-when-offscreen they'd burn CPU/battery forever once the user
   scrolls past, even though nothing is visible. .hv-anim-paused (toggled
   by an IntersectionObserver in app-shell.js) stops all of them the moment
   the hero leaves the viewport, and resumes instantly when it's back. */
/* ---- Marquee tracks (course-grid ticker, testimonial ticker) ----
   These scroll continuously (28s/22s loops) forever by default — same
   waste-when-offscreen problem as the hero cluster above. Paused via the
   same IntersectionObserver technique, using their own wrapper class as
   the toggle target so they don't interfere with the hero's rules. */
.s2i-marquee-paused .marquee-track,
.s2i-marquee-paused .testi-marquee-track{ animation-play-state:paused; }
.hv-anim-paused .hv-ambient-glow,
.hv-anim-paused .hv-svg,
.hv-anim-paused .hv-cap,
.hv-anim-paused .hv-cap-bead,
.hv-anim-paused .hv-shine,
.hv-anim-paused .hv-dot-live::after,
.hv-anim-paused .tree-branch,
.hv-anim-paused .tree-leaf,
.hv-anim-paused .orb-links path,
.hv-anim-paused .orb-center-core,
.hv-anim-paused .orb-center-ring,
.hv-anim-paused .skill-orb,
.hv-anim-paused .skill-bubble,
.hv-anim-paused .network-wire-flow,
.hv-anim-paused .network-hub::after,
.hv-anim-paused .network-card{ animation-play-state:paused; }
.hv-illus{position:relative;z-index:1;}
.hv-svg{width:100%;height:auto;display:block;animation:hvFloat 6.5s ease-in-out infinite;}
.hv-cap{transform-origin:334px 60px;animation:hvTilt 5s ease-in-out infinite;}
.hv-cap-bead{animation:hvBeadPulse 2.2s ease-in-out infinite;transform-origin:406px 94px;}
.hv-shine{animation:hvShine 3.6s ease-in-out infinite;}
@keyframes hvFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes hvTilt{0%,100%{transform:rotate(-3deg) translateY(0);}50%{transform:rotate(3deg) translateY(-6px);}}
@keyframes hvBeadPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.35);opacity:0.7;}}
@keyframes hvShine{0%{transform:translateX(-40px) rotate(24deg);opacity:0;}15%{opacity:0.9;}45%{opacity:0;}100%{transform:translateX(420px) rotate(24deg);opacity:0;}}
.hv-chip{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;max-width:150px;
  background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -8px rgba(47,111,228,0.35),var(--shadow-md);
  border-radius:999px;padding:9px 15px;font-size:12px;font-weight:700;
  color:var(--navy-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:hvFloat 5.4s ease-in-out infinite;
}
.hv-chip-icon{color:var(--blue-500);filter:drop-shadow(0 0 4px rgba(56,189,248,0.55));display:inline-flex;flex-shrink:0;}
.hv-dot-live{width:8px;height:8px;border-radius:50%;background:var(--orange-500);flex-shrink:0;position:relative;}
/* Was an animated box-shadow ring (expensive). Now a separate pseudo-
   element ring that only animates transform+opacity — same "live pulse"
   look, essentially free to run continuously. */
.hv-dot-live::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  border:4px solid rgba(255,138,61,0.2);
  animation:hvDotPulse 1.8s ease-in-out infinite;
}
@keyframes hvDotPulse{0%,100%{transform:scale(1);opacity:0.7;}50%{transform:scale(1.35);opacity:0.15;}}
@media(max-width:560px){
  .hv-chip{font-size:10.5px;padding:6px 11px;max-width:110px;}
}
@media(prefers-reduced-motion:reduce){.hv-svg,.hv-cap,.hv-cap-bead,.hv-shine,.hv-chip,.hv-dot-live::after,.hv-ambient-glow{animation:none !important;opacity:1 !important;}}

/* ---- Style: NETWORK — logo hub + 8 wired cards with an animated
   "electric current" flow along each connector. Every card label comes
   from the admin skill list. Stage uses a taller aspect ratio (3 rows
   of cards need more vertical room than the 460x300 landscape styles). */
.skill-tree-stage.style-network{aspect-ratio:460/420;}
.skill-tree-stage.style-photo{aspect-ratio:900/987;}
.hero-photo-slideshow{position:relative;width:100%;height:100%;}
.hero-photo-img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset;
  position:absolute;inset:0;opacity:0;transition:opacity .8s ease;
}
.hero-photo-img.active{opacity:1;animation:ldrPop .6s ease both;}
.hero-photo-img:not(.active){pointer-events:none;}
@keyframes ldrPop{from{opacity:0;transform:scale(0.97);}to{opacity:1;transform:scale(1);}}
.hero-photo-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2;}
.hero-photo-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5);transition:background .3s ease,width .3s ease;}
.hero-photo-dot.active{background:#fff;width:16px;border-radius:4px;}
.network-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.network-wire{stroke:url(#wireGrad);stroke-width:6;fill:none;stroke-linecap:round;opacity:0.45;}
.network-wire-flow{
  stroke:#a5e6ff;stroke-width:3;fill:none;stroke-linecap:round;
  stroke-dasharray:9 20;filter:drop-shadow(0 0 4px #7dd3fc) drop-shadow(0 0 8px rgba(56,189,248,0.7));
  animation:wireFlow 1.4s linear infinite;
}
@keyframes wireFlow{to{stroke-dashoffset:-58;}}
/* Bigger, more "professional" centre badge — exactly centred in the
   stage via left/top:50% + translate(-50%,-50%), with a crisp double
   ring border and a stronger glow so it reads as the clear focal point. */
.network-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:132px;height:132px;border-radius:30px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--blue-500),var(--purple-500));
  box-shadow:0 20px 44px -12px rgba(47,111,228,0.6),0 0 0 1px rgba(255,255,255,0.3) inset,0 0 0 6px rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.35);
}
.network-hub img{width:60%;height:60%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.3));}
/* Was an animated box-shadow (recalculated/repainted every frame — one of
   the more expensive things a browser can animate). Replaced with a
   separate ring layer that only animates transform+opacity — visually
   almost identical "pulse", essentially free to run continuously. */
.network-hub::after{
  content:'';position:absolute;inset:-6px;border-radius:34px;pointer-events:none;
  border:6px solid rgba(56,189,248,0.3);
  animation:hubRingPulse 3s ease-in-out infinite;will-change:transform;
}
@keyframes hubRingPulse{0%,100%{transform:scale(1);opacity:0.65;}50%{transform:scale(1.07);opacity:0.1;}}
/* Dark glassmorphic cards — frosted-glass background, subtle coloured
   border glow per card, bold white text. */
.network-card{
  position:absolute;transform:translate(-50%,-50%);z-index:2;width:88px;
  background:linear-gradient(155deg,rgba(20,24,45,0.82),rgba(30,22,58,0.78));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:17px;border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 14px 28px -12px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06) inset,0 1px 0 rgba(255,255,255,0.18) inset;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;
  animation:networkCardFloat 3.8s ease-in-out infinite;
}
.network-card-icon{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 16px -6px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.2) inset;}
.network-card-txt{font-size:9.5px;font-weight:800;text-align:center;color:#f1f5fb;text-shadow:0 1px 2px rgba(0,0,0,0.4);line-height:1.2;max-width:74px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
@keyframes networkCardFloat{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-5px);}}
@media(max-width:560px){
  .network-hub{width:96px;height:96px;border-radius:22px;}
  .network-card{width:68px;padding:9px 5px;}
  .network-card-icon{width:25px;height:25px;border-radius:8px;}
  .network-card-txt{font-size:8.5px;max-width:56px;}
  .network-wire,.network-wire-flow{stroke-width:4.5;}
}
@media(prefers-reduced-motion:reduce){.network-hub,.network-card,.network-wire-flow{animation:none !important;opacity:1 !important;}}

/* ---- falling words (tree/orbs/bubbles): glowing chip, click to "flee" ---- */
.tree-falling{position:relative;height:78px;overflow:hidden;margin-top:14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(56,189,248,0.08),rgba(139,92,246,0.04) 60%,transparent);
  border:1px solid rgba(56,189,248,0.15);}
.falling-word{
  position:absolute;top:-26px;font-weight:800;font-size:11px;opacity:0;white-space:nowrap;cursor:pointer;
  padding:5px 11px;border-radius:999px;color:#fff;
  box-shadow:0 6px 14px -6px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.18) inset;
  animation-name:fallDown;animation-timing-function:linear;animation-iteration-count:infinite;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.falling-word:hover{filter:brightness(1.12);}
@keyframes fallDown{0%{transform:translateY(-26px) rotate(-4deg);opacity:0;}12%{opacity:.92;}85%{opacity:.92;}100%{transform:translateY(96px) rotate(4deg);opacity:0;}}
@media(max-width:560px){
  .hero-intro{padding:26px 16px 22px;border-radius:22px;}
  .hero-visual{padding:18px 16px 12px;}
  .hero-badge{font-size:11.5px;padding:6px 13px 6px 12px;}
  .hero-trust-row{gap:9px;}
  .hero-avatar{width:26px;height:26px;font-size:10.5px;}
  .orb-center{width:52px;height:52px;}
  .tree-leaf,.skill-orb{font-size:9.5px;padding:5px 10px;max-width:88px;}
  .tree-leaf.sz-lg,.skill-orb.sz-lg{font-size:10.5px;padding:6px 11px;max-width:96px;}
  .skill-bubble{width:64px;height:64px;font-size:9px;}
  .skill-bubble.sz-sm{width:48px;height:48px;font-size:8px;}
  .skill-bubble.sz-lg{width:76px;height:76px;font-size:9.5px;}
  .tree-falling{height:64px;}
  .falling-word{font-size:10px;max-width:110px;overflow:hidden;text-overflow:ellipsis;}
}
@media(prefers-reduced-motion:reduce){.orb-center-core,.orb-center-ring,.skill-orb,.tree-leaf,.tree-branch,.skill-bubble,.falling-word,.orb-links path{animation:none !important;opacity:1 !important;}}

/* generic progress bar (used on dashboard pages) */
.hv-bar{height:8px;border-radius:6px;background:var(--line);overflow:hidden;}
.hv-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-500),var(--purple-500));border-radius:6px;}

/* ===== WHY CHOOSE ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.why-card{
  background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.why-icon{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(47,111,228,0.12),rgba(255,138,61,0.12));
  color:var(--blue-500);font-size:20px;margin-bottom:16px;font-weight:700;
}
.why-card h3{font-size:17.5px;margin-bottom:8px;font-weight:700;}
.why-card p{font-size:14px;color:var(--muted);}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;}}

/* ===== COURSES ===== */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px;}

/* ---- Premium package-style course card ---- */
.pkg-card{
  position:relative;border-radius:22px;overflow:hidden;color:#fff;
  box-shadow:0 20px 46px rgba(6,20,14,0.30);display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pkg-card:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(6,20,14,0.4);}
.pkg-badge{
  position:absolute;top:18px;left:18px;z-index:2;
  background:rgba(255,255,255,0.14);border:1.5px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(6px);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;padding:6px 14px;border-radius:30px;
  display:inline-flex;align-items:center;gap:6px;
}
.pkg-cover{padding:46px 22px 18px;display:flex;align-items:center;justify-content:center;min-height:140px;}
.pkg-body{padding:6px 24px 4px;flex:1;display:flex;flex-direction:column;}
.pkg-title{font-size:22px;font-weight:800;line-height:1.2;margin-bottom:10px;}
/* ---- Course/package NAME BOX — 3D badge, colours admin-editable per course ---- */
.pkg-name-badge{
  display:inline-block;align-self:flex-start;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-0.01em;
  padding:9px 18px;border-radius:12px;margin-bottom:14px;max-width:100%;
  box-shadow:0 3px 0 rgba(0,0,0,0.22),0 10px 20px -6px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.35);
  border:1px solid rgba(255,255,255,0.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pkg-card:hover .pkg-name-badge{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,0.22),0 14px 26px -6px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.35);}
.pkg-tagline{
  display:inline-block;font-size:13px;font-weight:600;color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.32);border-radius:30px;padding:9px 16px;margin-bottom:18px;width:fit-content;
}
.pkg-features{list-style:none;margin:0 0 16px;padding:0;}
.pkg-features li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.92);padding:6px 0;}
.pkg-features li .chk{
  width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:#fff;flex-shrink:0;
}
.pkg-commission{
  font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);
  padding:4px 12px;border-radius:20px;display:inline-block;width:fit-content;margin-bottom:6px;
}
.pkg-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:18px 24px 24px;margin-top:auto;border-top:1px solid rgba(255,255,255,.16);
}
.pkg-price-current{font-size:19px;font-weight:800;color:#fff;}
.pkg-price-original{font-size:13px;color:rgba(255,255,255,.55);text-decoration:line-through;margin-left:6px;}
.pkg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;border-radius:10px;font-weight:700;font-size:13px;white-space:nowrap;
}
.pkg-btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);}
.pkg-btn-buy{background:#fff;color:#0b1e3d;}
.pkg-btn-buy:hover{background:rgba(255,255,255,.88);}

/* legacy course-card (kept for course-detail.html sticky elements) */
.course-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease; display:flex;flex-direction:column;
}
.course-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.course-thumb{height:140px;background:linear-gradient(135deg,var(--navy-800),var(--purple-500));position:relative;display:flex;align-items:center;justify-content:center;}
.course-thumb span{color:#fff;font-weight:700;font-family:var(--font-head);opacity:0.85;font-size:14px;}
.course-badge{position:absolute;top:12px;left:12px;background:var(--orange-500);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;}
.course-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.course-body h3{font-size:16.5px;margin-bottom:6px;font-weight:700;}
.course-body p{font-size:13.5px;color:var(--muted);margin-bottom:14px;flex:1;}
.course-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;}
.price-current{font-weight:800;font-size:18px;color:var(--navy-900);}
.price-original{font-size:13px;color:var(--muted);text-decoration:line-through;}
.commission-chip{font-size:12px;font-weight:700;color:var(--blue-500);background:rgba(47,111,228,0.08);padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:14px;width:fit-content;}
.course-actions{display:flex;gap:10px;}
.course-actions .btn{flex:1;padding:11px 14px;font-size:13.5px;min-height:42px;}
.courses-foot{text-align:center;margin-top:38px;}

/* ===== CALCULATOR — premium redesign, fully static (no continuous
   animation — only a one-shot "pop" on the result when it updates,
   triggered by user input, never looping). ===== */
.calc-card{
  position:relative;background:#fff;border-radius:20px;border:1px solid var(--line);
  box-shadow:var(--shadow-lg);padding:26px;display:grid;grid-template-columns:1fr 1fr;
  gap:26px;align-items:start;overflow:hidden;max-width:820px;margin:0 auto;
}
.calc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue-500),var(--purple-500));
}
.calc-label-txt{display:inline-flex;align-items:center;gap:7px;}
.calc-label-icon{display:flex;color:var(--blue-500);flex-shrink:0;}
.calc-left label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:600;color:var(--navy-800);margin-bottom:6px;}
.calc-field{margin-bottom:14px;}
select,input[type=range]{width:100%;}
select{
  padding:9px 12px;border-radius:9px;border:1.5px solid var(--line);font-size:13.5px;background:#fff;color:var(--ink);min-height:40px;
}
input[type=range]{-webkit-appearance:none;height:6px;background:var(--line);border-radius:6px;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--blue-500);cursor:pointer;box-shadow:0 0 0 5px rgba(47,111,228,0.15);}
.range-val{float:none;font-weight:800;color:var(--purple-500);font-size:13px;}
.calc-result{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-900),var(--purple-500));
  border-radius:14px;padding:20px;color:#fff;text-align:center;
}
.calc-result-watermark{position:absolute;top:-14px;right:-10px;color:rgba(255,255,255,0.08);pointer-events:none;z-index:0;}
.calc-result > *{position:relative;z-index:1;}
.calc-result span{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.75);font-weight:700;}
.calc-result b{display:block;font-size:30px;font-family:var(--font-head);margin:8px 0;}
.calc-result .disclaimer{font-size:10.5px;color:rgba(255,255,255,0.65);line-height:1.45;margin-top:10px;}
.calc-input{
  width:100%;padding:9px 12px;border-radius:9px;border:1.5px solid var(--line);
  font-family:inherit;font-size:13.5px;background:#fff;color:var(--ink);min-height:40px;
}
.calc-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:8px;
  background:linear-gradient(90deg,var(--blue-500),var(--purple-500));outline:none;cursor:pointer;margin-top:4px;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:3.5px solid var(--purple-500);box-shadow:0 4px 12px rgba(0,0,0,0.25);cursor:grab;
}
.calc-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1);}
.calc-slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3.5px solid var(--purple-500);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);cursor:grab;
}
.calc-input:focus,select:focus{outline:none;border-color:var(--purple-500);box-shadow:0 0 0 4px rgba(139,92,246,0.12);}
.calc-range-row{display:flex;align-items:center;gap:14px;}
.calc-range-row input[type=range]{flex:1;}
.calc-num-sm{width:80px;min-height:38px;padding:8px 9px;text-align:center;font-weight:700;}
.calc-hint{display:block;margin-top:6px;font-size:10.5px;color:var(--muted);line-height:1.4;}
.calc-select{
  width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  font-size:13.5px;font-weight:700;color:var(--navy-900);cursor:pointer;margin-top:2px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232f6fe4' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
.calc-select:focus{outline:none;border-color:var(--purple-500);box-shadow:0 0 0 4px rgba(139,92,246,0.12);}
.calc-result b#calcResult{font-size:33px;background:linear-gradient(90deg,#fff,#ffd8b0);-webkit-background-clip:text;background-clip:text;color:transparent;}
/* one-shot "pop" when the result updates — triggered by JS re-adding this
   class on every calculate(); never loops, so it costs nothing at rest */
.calc-result b#calcResult.calc-pop{animation:calcPop .35s ease;}
@keyframes calcPop{0%{transform:scale(1);}40%{transform:scale(1.06);}100%{transform:scale(1);}}
@media(prefers-reduced-motion:reduce){.calc-result b#calcResult.calc-pop{animation:none !important;}}
.calc-break{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;
  border-top:1px solid rgba(255,255,255,0.18);padding-top:12px;
}
.calc-break div{background:rgba(255,255,255,0.08);border-radius:10px;padding:9px 6px;}
.calc-break small{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.65);font-weight:700;}
.calc-break b{font-size:16px;margin:4px 0 0;}
@media(max-width:900px){.calc-card{grid-template-columns:1fr;padding:20px;gap:20px;}}
@media(max-width:560px){.calc-result b#calcResult{font-size:28px;}.calc-num-sm{width:70px;}}

/* ===== TESTIMONIALS — premium redesign, fully static base + one
   GPU-cheap transform-only marquee (already paused off-screen/on-hover
   via the shared .testi-marquee-wrap pause-zone). Each card gets its own
   accent colour (cycled from a palette, set inline as --tc/--tc-soft/
   --tc-glow by renderTestimonials()) so the row reads as vibrant rather
   than one repeated blue tone — same technique already used for the
   Skills chips and Stats cards elsewhere on this page. ===== */
.testi-trust-strip{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 18px;font-size:13px;color:var(--muted);box-shadow:var(--shadow-sm);
}
.testi-trust-strip b{color:var(--navy-900);}
.testi-trust-stars{color:var(--yellow-400);font-size:13px;letter-spacing:1px;}
.testi-slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch;}
.testi-slider::-webkit-scrollbar{height:6px;}
.testi-slider::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;}
.testi-card{
  position:relative;overflow:hidden;
  min-width:300px;scroll-snap-align:start;background:#fff;border-radius:var(--radius);
  border:1px solid var(--tc-soft,var(--line));
  padding:26px;box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease;
}
.testi-card:hover{transform:translateY(-4px);border-color:var(--tc,var(--blue-500));box-shadow:0 22px 44px -22px var(--tc-glow,rgba(11,30,61,0.28));}
.testi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tc,var(--blue-500));}
.testi-quote-mark{position:absolute;top:6px;right:14px;color:var(--tc-soft,rgba(47,111,228,0.08));pointer-events:none;z-index:0;}
.testi-card > *{position:relative;z-index:1;}
.testi-stars{color:var(--yellow-400);font-size:14px;margin-bottom:12px;letter-spacing:2px;}
.testi-quote{font-size:14.5px;color:var(--ink);line-height:1.6;margin-bottom:18px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--tc,linear-gradient(135deg,var(--sky-500),var(--purple-500)));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;
  box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--tc-soft,rgba(47,111,228,0.18));flex-shrink:0;
}
.testi-person-name{display:flex;align-items:center;gap:5px;}
.testi-verified{color:#22c55e;display:flex;flex-shrink:0;}
.testi-person div span{display:block;font-size:12.5px;color:var(--muted);}
.testi-empty{text-align:center;color:var(--muted);padding:30px;font-size:14.5px;}
/* Chat-bubble tail pointing down from the card toward the reader — a
   small static decorative touch, purely CSS triangles, no extra markup
   cost worth mentioning. */
.testi-bubble-tail{position:absolute;bottom:-9px;left:34px;width:16px;height:16px;background:#fff;border-right:1px solid var(--tc-soft,var(--line));border-bottom:1px solid var(--tc-soft,var(--line));transform:rotate(45deg);border-radius:0 0 4px 0;z-index:0;}

/* ===== FOUNDER ===== */
.founder-grid{display:grid;grid-template-columns:0.8fr 1.3fr;gap:48px;align-items:center;}
.founder-photo{aspect-ratio:4/5;border-radius:20px;background:linear-gradient(160deg,var(--purple-500),var(--sky-500));box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.founder-photo span{color:rgba(255,255,255,0.7);font-size:13px;}
.founder-photo img{width:100%;height:100%;object-fit:cover;}
.founder-text .role{color:var(--orange-500);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;}
.founder-text .founder-name{
  font-family:var(--font-head);font-weight:800;font-size:clamp(26px,3.6vw,36px);
  line-height:1.15;margin-bottom:8px;letter-spacing:-0.01em;
}
.founder-text h2{font-size:clamp(17px,2.1vw,20px);margin-bottom:20px;font-weight:600;line-height:1.4;color:var(--muted);}
.founder-text .founder-copy{position:relative;padding-left:20px;border-left:3px solid var(--purple-400);margin-bottom:14px;}
.founder-text .founder-copy p{color:var(--ink);font-size:16px;line-height:1.85;margin-bottom:14px;}
.founder-text .founder-copy p:last-child{margin-bottom:0;}
@media(max-width:900px){.founder-grid{grid-template-columns:1fr;}}

/* ===== FOUNDER — premium, modern (Blue-Purple-White-Yellow) =====
   Scoped entirely under .founder-v2 so about.html's shared .founder-*
   classes (light-background layout above) are completely unaffected —
   this is an index.html-only visual treatment layered on top of the
   same admin-editable elements (data-cms-shared / data-cms ids untouched). */
.founder-v2{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fffaea,#ffffff 60%);
  padding:48px 0 56px;
}
.founder-v2 .fdr-head{margin-bottom:40px;position:relative;z-index:1;}
.founder-v2 .fdr-heading{
  font-family:var(--font-head);font-size:clamp(30px,4.2vw,44px);color:var(--ink);font-weight:800;
  letter-spacing:-0.015em;max-width:640px;line-height:1.15;
}
/* A subtly-glowing gradient underline — the section's one signature
   flourish, kept deliberately light on GPU cost: no animated box-shadow,
   no animated background-position, no blurred duplicate layer. The
   gradient itself is static; only a thin highlight sweeps across it via
   a compositor-only "transform" animation (translateX), which the
   browser can run without repainting anything each frame. Paused when
   scrolled off-screen via the shared .s2i-fdr-paused zone in app-shell.js. */
.fdr-heading-glow{
  position:relative;width:170px;height:2.5px;border-radius:3px;margin-top:16px;overflow:hidden;
  background:linear-gradient(90deg,var(--blue-500),var(--purple-500),var(--yellow-400));
  box-shadow:0 0 5px rgba(139,92,246,0.22);
}
.fdr-heading-glow::after{
  content:'';position:absolute;top:0;left:0;width:36%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.85),transparent);
  transform:translateX(-140%);
  animation:fdrGlowSweep 3.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes fdrGlowSweep{0%{transform:translateX(-140%);}100%{transform:translateX(370%);}}
.s2i-fdr-paused .fdr-heading-glow::after{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.fdr-heading-glow::after{animation:none !important;}}
.founder-v2 .fdr-grid{
  display:grid;grid-template-columns:0.85fr 1.15fr;align-items:center;position:relative;z-index:1;
}
.fdr-photo-col{position:relative;padding:14px;}
.fdr-photo-plate{
  position:absolute;top:22px;left:22px;right:2px;bottom:2px;border-radius:20px;
  background:linear-gradient(135deg,var(--blue-500),var(--purple-500));opacity:0.16;z-index:0;
}
.founder-v2 .founder-photo.fdr-photo{
  position:relative;z-index:2;aspect-ratio:4/5;border-radius:20px;
  border:3px solid var(--yellow-400);
  box-shadow:0 20px 44px -18px rgba(47,111,228,0.35);
}
.fdr-photo-frame{
  position:absolute;inset:0;border-radius:22px;z-index:1;
  border:1.5px solid rgba(139,92,246,0.2);
}
.fdr-photo-tag{
  position:absolute;left:2px;bottom:-14px;z-index:3;
  background:#fff;border:1.5px solid var(--blue-500);color:var(--ink);
  font-weight:700;font-size:12px;letter-spacing:0.02em;padding:8px 15px;border-radius:8px;
  box-shadow:0 10px 22px -8px rgba(15,42,74,0.25);
}
.founder-v2 .fdr-text{
  position:relative;z-index:3;background:#fff;border-radius:20px;
  padding:32px 34px;margin-left:-34px;box-shadow:0 20px 46px -22px rgba(47,111,228,0.28);
  border-top:3px solid var(--yellow-400);
}
.founder-v2 .fdr-text .fdr-about-label{
  color:var(--blue-500);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;
}
.founder-v2 .fdr-text .fdr-name{
  font-family:var(--font-head);font-weight:800;font-size:clamp(26px,3.4vw,34px);
  line-height:1.15;margin-bottom:10px;letter-spacing:-0.01em;color:var(--ink);
}
.founder-v2 .fdr-text h2{font-size:clamp(16px,2vw,19px);margin-bottom:20px;font-weight:600;line-height:1.45;color:var(--muted);}
.founder-v2 .fdr-text .fdr-copy{position:relative;padding-left:20px;border-left:3px solid var(--purple-400);margin-bottom:14px;}
.founder-v2 .fdr-text .fdr-copy p{color:var(--ink);font-size:15.5px;line-height:1.8;margin-bottom:14px;}
.founder-v2 .fdr-text .fdr-copy p:last-child{margin-bottom:0;}
@media(max-width:900px){
  .founder-v2{padding:32px 0 38px;}
  .founder-v2 .fdr-grid{grid-template-columns:1fr;}
  .fdr-photo-col{max-width:320px;margin:0 auto;}
  .founder-v2 .fdr-text{margin-left:0;margin-top:28px;padding:26px 22px;}
}

/* ===== TEAM =====
   scroll-snap-type was "mandatory" — that forces the scroll to always
   snap fully to a card edge, so a swipe that doesn't have quite enough
   velocity gets pulled straight back to where it started, which reads as
   the scroll "getting stuck". "proximity" only snaps when already close
   to a card edge, so it stays comfortable but never fights a real swipe.
   -webkit-overflow-scrolling adds proper momentum scrolling on iOS Safari. */
.team-scroll-wrap{position:relative;}
.team-grid{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:6px 4px 14px;}
/* Subtle scroll arrows, mobile-only (team-grid becomes a static 4-col
   grid on desktop below, nothing to scroll there). Same low-key styling
   as the poster carousel's arrows. */
.team-nav{
  position:absolute;top:44%;transform:translateY(-50%);z-index:2;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.85);color:var(--navy-800);opacity:0.65;
  box-shadow:0 4px 10px -4px rgba(11,30,61,0.25);
  transition:opacity .2s ease,background .2s ease;
}
.team-nav:hover{opacity:1;background:#fff;}
.team-nav.prev{left:-6px;}
.team-nav.next{right:-6px;}
/* ---- White & Gold premium theme ----
   Warm ivory/white card on a cream backdrop, gold-foil accents — a more
   "editorial luxury" feel than the previous blue-purple version. */
.team-card{
  min-width:240px;scroll-snap-align:start;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#fffdf7);border:1px solid #f1e6c8;border-radius:22px;
  padding:26px 20px 26px;box-shadow:0 6px 20px -10px rgba(120,90,10,0.12);
  transition:transform .4s cubic-bezier(.22,.9,.32,1),box-shadow .4s cubic-bezier(.22,.9,.32,1),border-color .4s ease !important;
}
.team-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fde68a,#f59e0b 55%,#d97706);opacity:0;transition:opacity .35s ease;}
.team-card:hover{transform:translateY(-8px);box-shadow:0 26px 50px -18px rgba(217,119,6,0.28);border-color:rgba(245,158,11,0.35);}
.team-card:hover::before{opacity:1;}
/* ---- Premium team photo: rounded-rectangle in a warm gold-foil "frame",
   with a subtle shine overlay, a small gold "verified team member" corner
   badge, and a graceful initials fallback when no photo is uploaded
   (matches this shape too, instead of a plain circle). ---- */
.team-photo-frame{
  width:100%;max-width:150px;aspect-ratio:4/5;margin:0 auto 18px;position:relative;
  border-radius:22px;padding:4px;
  background:linear-gradient(145deg,#fde68a,#f59e0b 55%,#b45309);
  box-shadow:0 14px 30px -12px rgba(217,119,6,0.4),0 2px 6px rgba(120,90,10,0.1);
  transition:transform .4s cubic-bezier(.22,.9,.32,1),box-shadow .4s cubic-bezier(.22,.9,.32,1);
}
.team-card:hover .team-photo-frame{transform:translateY(-3px) scale(1.035) rotate(-0.6deg);box-shadow:0 22px 42px -14px rgba(217,119,6,0.5),0 4px 10px rgba(120,90,10,0.12);}
.team-photo-inner{
  width:100%;height:100%;border-radius:18px;overflow:hidden;position:relative;
  background:#fdf6e3;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.6);
}
.team-photo-inner::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,0.16) 100%);
}
.team-photo-inner img{width:100%;height:100%;object-fit:cover;display:block;}
.team-photo-initials{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:800;color:#7c4a03;letter-spacing:.02em;
  background:linear-gradient(150deg,#fde68a,#f59e0b 70%,#d97706);
}
.team-photo-badge{
  position:absolute;bottom:-6px;right:-6px;width:28px;height:28px;border-radius:50%;
  background:#22c55e;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:800;
  box-shadow:0 4px 10px rgba(15,42,74,0.25);border:2.5px solid #fff;z-index:2;
}
.team-card h3{font-size:16.5px;margin-bottom:6px;font-weight:800;letter-spacing:-.01em;color:#3a2a05;}
.team-card .team-role-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.02em;color:#92640a;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.28);border-radius:999px;padding:4px 13px;margin-bottom:12px;}
.team-card p{font-size:12.5px;color:var(--muted);line-height:1.6;}
@media(min-width:900px){.team-grid{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;} .team-nav{display:none;}}

/* ===== CERTIFICATES ===== */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.cert-card{
  background:#fff;border-radius:var(--radius);border:1px solid var(--line);padding:26px;text-align:center;
  cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;
}
.cert-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.cert-thumb{
  height:120px;border-radius:12px;background:linear-gradient(135deg,var(--navy-800),var(--purple-500));
  margin-bottom:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-head);
}
.cert-card h3{font-size:15.5px;margin-bottom:6px;font-weight:700;}
.cert-card span{font-size:12.5px;color:var(--muted);}
.cert-card .btn{margin-top:16px;width:100%;padding:10px;font-size:13px;min-height:40px;}
@media(max-width:900px){.cert-grid{grid-template-columns:1fr;}}

/* cert modal */
.modal-overlay{position:fixed;inset:0;background:rgba(11,30,61,0.65);z-index:400;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:16px;max-width:560px;width:100%;padding:0;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
.modal-img{height:280px;background:linear-gradient(135deg,var(--navy-800),var(--purple-500));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-head);font-weight:700;font-size:20px;cursor:zoom-in;transition:transform .3s ease;}
.modal-img.zoomed{transform:scale(1.4);cursor:zoom-out;}
.modal-content{padding:24px;}
.modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.9);color:var(--navy-900);font-size:20px;z-index:2;box-shadow:var(--shadow-sm);}

/* ===== TRUST ===== */
.trust-band{background:var(--navy-900);border-radius:20px;padding:40px 32px;}
.trust-band h2{color:#fff;text-align:center;font-size:clamp(22px,3vw,28px);margin-bottom:30px;}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.trust-item{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,0.85);font-size:14px;}
.trust-item i{width:8px;height:8px;border-radius:50%;background:var(--orange-500);margin-top:6px;flex-shrink:0;}
@media(max-width:900px){.trust-grid{grid-template-columns:1fr;}}

/* ===== FOOTER ===== */
footer{background:linear-gradient(160deg,#eafcff 0%,#d6f4fb 45%,#c3edf8 100%);color:var(--navy-800);margin-top:60px;position:relative;overflow:hidden;border-top:1px solid #bfe9f4;}
footer::before{
  content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:900px;height:320px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(56,189,248,0.25),transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.foot-cta-band{position:relative;border-bottom:1px solid rgba(11,30,61,0.10);background:rgba(255,255,255,0.35);}
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:38px 20px;flex-wrap:wrap;}
.foot-cta-text h3{color:var(--navy-900);font-size:24px;}
.foot-cta-text p{color:var(--navy-700);opacity:.85;font-size:14px;margin-top:8px;max-width:420px;}
.foot-cta-btns{display:flex;gap:12px;flex-wrap:wrap;}
.btn-light-outline{border:1.5px solid var(--navy-700);color:var(--navy-800);background:transparent;}
.btn-light-outline:hover{background:rgba(11,30,61,0.08);border-color:var(--navy-900);}
.foot-main{position:relative;padding-top:56px;padding-bottom:24px;}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:34px;margin-bottom:44px;}
.foot-brand p{font-size:13.5px;color:var(--navy-700);opacity:.85;margin-top:14px;max-width:300px;line-height:1.65;}
.foot-logo{font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--navy-900);}
.foot-logo span{color:var(--orange-500);}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:0.07em;color:var(--navy-900);margin-bottom:16px;font-family:var(--font-head);font-weight:800;}
.foot-col a{display:block;font-size:13.5px;color:var(--navy-700);margin-bottom:12px;transition:color .18s ease,transform .18s ease;font-weight:500;}
.foot-col a:hover{color:var(--blue-500);transform:translateX(3px);}
.foot-social{display:flex;gap:10px;margin-top:20px;}
.foot-social a{
  width:38px;height:38px;border-radius:12px;background:#fff;
  border:1px solid rgba(11,30,61,0.10);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(11,30,61,0.08);transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.foot-social a svg{width:18px;height:18px;display:block;}
.foot-social a:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 6px 16px rgba(11,30,61,0.16);}
.foot-bottom{
  border-top:1px solid rgba(11,30,61,0.12);padding-top:22px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--navy-700);opacity:.75;
}
.foot-bottom-links{display:flex;gap:18px;}
.foot-bottom-links a{color:var(--navy-700);}
.foot-bottom-links a:hover{color:var(--blue-500);}
.foot-made{color:var(--navy-700);opacity:.75;}
.foot-credit{
  text-align:center;padding:14px 0 4px;margin-top:4px;border-top:1px solid rgba(11,30,61,0.08);
  font-size:12px;color:var(--navy-700);opacity:.7;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.foot-credit img{height:16px;width:auto;object-fit:contain;}
.foot-credit a{color:var(--blue-500);font-weight:700;opacity:1;}
@media(max-width:1024px){.foot-grid{grid-template-columns:1.4fr repeat(2,1fr);row-gap:34px;}}
@media(max-width:640px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px;}
  .foot-brand{grid-column:1 / -1;}
  .foot-cta{padding:30px 20px;}
  .foot-cta-text h3{font-size:20px;}
  .foot-cta-btns .btn{flex:1;justify-content:center;text-align:center;}
  .foot-bottom{justify-content:center;text-align:center;flex-direction:column;gap:12px;}
}

/* ===== SHARED: PAGE HERO (inner pages) ===== */
.page-hero{padding-top:50px;padding-bottom:10px;}
.page-hero .eyebrow{margin-bottom:14px;}
.page-hero h1{font-size:clamp(28px,4.4vw,42px);font-weight:800;line-height:1.15;}
.page-hero p{color:var(--muted);font-size:16px;margin-top:12px;max-width:560px;}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:14px;}
.breadcrumb a:hover{color:var(--blue-500);}

/* ===== SHARED: FORMS ===== */
.form-card{background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:36px;max-width:440px;margin:0 auto;}
.form-card h2{text-align:center;font-size:24px;margin-bottom:6px;}
.form-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:26px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--navy-800);margin-bottom:7px;}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;border-radius:10px;border:1.5px solid var(--line);
  font-size:14.5px;font-family:var(--font-body);min-height:46px;color:var(--ink);background:#fff;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(47,111,228,0.12);}
.field textarea{min-height:110px;resize:vertical;}
.form-foot{text-align:center;font-size:13.5px;color:var(--muted);margin-top:18px;}
.form-foot a{color:var(--blue-500);font-weight:600;}
.form-card .btn{width:100%;}
.two-col-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.two-col-form{grid-template-columns:1fr;}}

/* ===== SHARED: DASHBOARD ===== */
.dash-shell{display:grid;grid-template-columns:220px 1fr;gap:0;min-height:70vh;min-width:0;}
.dash-side{background:#fff;border-right:1px solid var(--line);padding:26px 16px;min-width:0;}
.dash-side a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--navy-800);margin-bottom:4px;}
.dash-side a.active,.dash-side a:hover{background:rgba(47,111,228,0.08);color:var(--blue-500);}
.dash-main{padding:32px 28px;}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.dash-top h1{font-size:24px;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:32px;}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm);}
.stat-card span{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;}
.stat-card b{display:block;font-size:26px;font-family:var(--font-head);margin-top:8px;color:var(--navy-900);}
.stat-card .delta{font-size:12px;color:var(--blue-500);font-weight:600;margin-top:4px;display:inline-block;}
@media(max-width:900px){.dash-shell{grid-template-columns:1fr;}.dash-side{display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);gap:4px;}.dash-side a{white-space:nowrap;}.stat-grid{grid-template-columns:1fr 1fr;}}

.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);}
.data-table th{background:var(--bg);text-align:left;padding:14px 16px;font-size:12.5px;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);font-weight:700;}
.data-table td{padding:14px 16px;font-size:14px;border-top:1px solid var(--line);color:var(--ink);}
.status-pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;}
.status-paid{background:rgba(47,111,228,0.1);color:var(--blue-500);}
.status-pending{background:rgba(255,138,61,0.12);color:var(--orange-500);}
.table-wrap{overflow-x:auto;}

/* referral link box */
.link-box{display:flex;gap:10px;background:var(--bg);border:1.5px dashed var(--line);border-radius:12px;padding:14px 16px;align-items:center;flex-wrap:wrap;}
.link-box code{flex:1;font-size:13.5px;color:var(--navy-800);word-break:break-all;}

/* ===== ADMIN ===== */
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.tab-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.tab-btn{padding:9px 16px;border-radius:20px;font-size:13.5px;font-weight:600;border:1.5px solid var(--line);color:var(--navy-800);}
.tab-btn.active{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}

/* ===== CHECKOUT ===== */
.checkout-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:start;}
@media(max-width:860px){.checkout-grid{grid-template-columns:1fr;gap:22px;}.summary-card{order:-1;}}
@media(max-width:520px){.qr-square{width:150px;height:150px;}.pay-tabs{gap:8px;}}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-sm);}
.summary-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;}
.summary-row:last-child{border-bottom:none;font-weight:800;font-size:16px;color:var(--navy-900);}
.pay-tabs{display:flex;gap:10px;margin-bottom:20px;}
.pay-tab{flex:1;padding:14px;border-radius:12px;border:1.5px solid var(--line);text-align:center;font-weight:700;font-size:14px;color:var(--navy-800);}
.pay-tab.active{border-color:var(--blue-500);color:var(--blue-500);background:rgba(47,111,228,0.06);}
.qr-box{background:var(--bg);border-radius:14px;padding:26px;text-align:center;}
.qr-square{width:170px;height:170px;margin:0 auto 16px;background:repeating-conic-gradient(var(--navy-900) 0% 25%, #fff 0% 50%) 50% / 20px 20px;border-radius:10px;border:1px solid var(--line);}

/* ===== LOGO IMAGE ===== */
.logo-img{height:38px;width:auto;display:block;}
.drawer-logo-img{height:32px;width:auto;}
.foot-logo-img{height:34px;width:auto;}

/* ===== SKILLS MARQUEE (Why Choose section) — each skill has its own colour,
   set at render time via --sc/--sc-soft/--sc-glow inline vars (see
   skillChips() in the page script). Kept intentionally simple/no outer
   box — the marquee is the whole visual, nothing else competing with it. */
.marquee-wrap{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marqueeScroll 34s linear infinite;will-change:transform;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marqueeScroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.skill-chip{
  display:flex;align-items:center;gap:11px;background:#fff;
  border:1.5px solid var(--sc-soft,var(--line));border-radius:14px;
  padding:11px 20px 11px 11px;box-shadow:var(--shadow-sm);
  white-space:nowrap;font-weight:700;font-size:14.5px;color:var(--navy-900);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
  will-change:transform;
}
.skill-chip:hover{transform:translateY(-3px);border-color:var(--sc,var(--blue-500));box-shadow:0 14px 28px -14px var(--sc-glow,rgba(47,111,228,0.4));}
.skill-chip-icon{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--sc,var(--blue-500));
  box-shadow:0 4px 10px -3px var(--sc-glow,rgba(47,111,228,0.5));
}

/* ===== TESTIMONIAL AUTO-SCROLL ===== */
.testi-marquee-wrap{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);padding:14px 0 34px;}
.testi-marquee-track{display:flex;gap:26px;width:max-content;animation:marqueeScroll 26s linear infinite;will-change:transform;}
.testi-marquee-wrap:hover .testi-marquee-track{animation-play-state:paused;}
.testi-marquee-track .testi-card{
  min-width:340px;max-width:340px;padding:32px;border-radius:22px;
  background:linear-gradient(165deg,#ffffff,#f4f9ff);
  border:1px solid rgba(47,111,228,0.12);
  box-shadow:0 18px 40px -20px rgba(11,30,61,0.22);
}
.testi-marquee-track .testi-quote{font-size:15.5px;line-height:1.7;min-height:96px;}
.testi-marquee-track .testi-avatar{width:52px;height:52px;font-size:16px;box-shadow:0 0 0 3px #fff,0 0 0 4.5px rgba(47,111,228,0.22);background-size:cover;background-position:center;}
.testi-marquee-track .testi-person b{font-size:15px;}
.testi-marquee-track .testi-stars{font-size:16px;}
.testi-marquee-track .testi-quote-mark{top:10px;right:18px;}

/* ===== PACKAGE CALCULATOR ===== */
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.pkg-course-list{max-height:360px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;padding:10px;}
.pkg-course-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;cursor:pointer;transition:background .15s ease;}
.pkg-course-item:hover{background:var(--bg);}
.pkg-course-item input{width:18px;height:18px;accent-color:var(--purple-500);}
.pkg-course-item .pci-title{flex:1;font-size:14px;font-weight:600;}
.pkg-course-item .pci-price{font-size:13px;color:var(--muted);font-weight:700;}
@media(max-width:900px){.pkg-grid{grid-template-columns:1fr;}}

/* ===== CERTIFICATES (business certs) — normal, premium, subtle 3D =====
   Blue-White theme. Kept simple on purpose (3 cards in a clean row) —
   the earlier connecting-diagram treatment fit 4 items in a 2x2 flow but
   felt like too much for 3 plain certificates; this keeps the premium
   bordered "frame" wrapper (corner brackets, dot-grid) for polish, but
   the cards themselves just get a soft 3D tilt on hover, not constant
   ambient motion — lighter on the eye AND on the CPU (see perf note
   below). */
.cert-section-v2{background:linear-gradient(180deg,#f2f7ff,#ffffff 60%);}
.cert-frame{
  position:relative;max-width:720px;margin:0 auto;padding:30px 22px 26px;border-radius:26px;
  background:linear-gradient(155deg,#ffffff,#f3f8ff 60%,#eef4ff);
  border:1.5px solid rgba(47,111,228,0.16);
  box-shadow:0 20px 50px -26px rgba(47,111,228,0.35),inset 0 1px 0 rgba(255,255,255,0.9);
  overflow:hidden;
}
/* Perf note: the frame's glow used to "breathe" via a continuously
   animated box-shadow (expensive — forces a repaint every frame, and
   this ran forever even scrolled off-screen). Dropped in favour of a
   static shadow — still looks premium, costs nothing at rest, and
   removes one more thing that could make the page feel laggy. */
.cert-frame::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0.5;z-index:0;
  background-image:radial-gradient(rgba(47,111,228,0.1) 1px,transparent 1px);
  background-size:16px 16px;
}
.cert-frame-corner{position:absolute;width:18px;height:18px;border:2px solid rgba(47,111,228,0.38);z-index:2;}
.cert-frame-corner.tl{top:10px;left:10px;border-right:none;border-bottom:none;border-radius:6px 0 0 0;}
.cert-frame-corner.tr{top:10px;right:10px;border-left:none;border-bottom:none;border-radius:0 6px 0 0;}
.cert-frame-corner.bl{bottom:10px;left:10px;border-right:none;border-top:none;border-radius:0 0 0 6px;}
.cert-frame-corner.br{bottom:10px;right:10px;border-left:none;border-top:none;border-radius:0 0 6px 0;}

.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:1;}
@media(max-width:700px){.cert-grid{grid-template-columns:1fr;}.cert-frame{padding:24px 14px 20px;border-radius:20px;}}

/* ===== FAQ — accordion below Certificates. Expand/collapse uses the
   grid-template-rows:0fr→1fr trick (no JS height math needed) and is a
   one-shot, user-triggered transition — not a continuous animation — so
   it costs nothing at rest, same "ultra smooth" bar as the rest of the
   page. Toggle is a pure-CSS plus/minus (two bars, the vertical one
   rotates 90deg onto the horizontal one when open) — no icon/SVG needed,
   cheaper than an icon swap and universally recognisable. ===== */
.faq-section{background:linear-gradient(180deg,#ffffff,#f7f9fd 60%);}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.faq-item:hover{transform:translateY(-2px);}
.faq-item.open{border-color:rgba(47,111,228,0.3);box-shadow:0 12px 28px -14px rgba(47,111,228,0.32);}
.faq-q{
  width:100%;display:flex;align-items:center;gap:14px;
  background:none;border:none;text-align:left;cursor:pointer;
  padding:16px 18px;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--navy-900);
}
.faq-num{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sky-500),var(--purple-500));color:#fff;
  font-size:12px;font-weight:800;transition:background .2s ease;
}
.faq-item.open .faq-num{background:linear-gradient(135deg,var(--purple-500),var(--blue-500));}
.faq-q-text{flex:1;}
.faq-q:hover .faq-q-text{color:var(--blue-500);}
/* Pure-CSS plus/minus toggle button */
.faq-toggle{
  position:relative;flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:rgba(47,111,228,0.08);
}
.faq-toggle::before,.faq-toggle::after{
  content:'';position:absolute;top:50%;left:50%;background:var(--blue-500);border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq-toggle::before{width:11px;height:2px;}
.faq-toggle::after{width:2px;height:11px;transition:transform .3s ease;}
.faq-item.open .faq-toggle{background:rgba(47,111,228,0.14);}
.faq-item.open .faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
.faq-item.open .faq-a-wrap{grid-template-rows:1fr;}
.faq-a-inner{overflow:hidden;}
.faq-a{padding:0 18px 18px 58px;font-size:13.5px;color:var(--muted);line-height:1.65;}
@media(prefers-reduced-motion:reduce){.faq-a-wrap{transition:none !important;}.faq-toggle::after{transition:none !important;}}
@media(max-width:560px){.faq-a{padding-left:18px;}}

.cert-seal-card{
  position:relative;background:#fff;
  border:1.5px solid #e4edfb;border-radius:18px;padding:26px 18px 22px;
  text-align:center;box-shadow:0 8px 20px -12px rgba(31,84,190,0.14);
  width:100%;font-family:inherit;perspective:800px;
  /* transform + box-shadow transition only — both are cheap/compositor-
     friendly, no layout or continuous-paint properties involved, so the
     hover tilt stays smooth even on a mid-range phone. */
  transition:transform .3s cubic-bezier(.22,.9,.32,1),box-shadow .3s cubic-bezier(.22,.9,.32,1),border-color .3s ease;
}
.biz-cert-card.cert-seal-card{cursor:pointer;}
.cert-seal-card:hover{
  transform:translateY(-6px) rotateX(4deg);
  box-shadow:0 20px 38px -16px rgba(31,84,190,0.28);border-color:rgba(47,111,228,0.32);
}
.cert-seal-card .biz-cert-badge{
  position:relative;z-index:2;width:60px;height:60px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:12.5px;color:var(--blue-500);
  background:linear-gradient(145deg,#ffffff,#eaf1ff);
  box-shadow:0 10px 20px -8px rgba(47,111,228,0.32),inset 0 1px 0 rgba(255,255,255,0.9),0 0 0 5px rgba(47,111,228,0.07);
  border:1.5px solid rgba(47,111,228,0.25);
}
.cert-seal-card .biz-cert-logo{display:none;position:relative;z-index:2;width:60px;height:60px;border-radius:50%;margin:0 auto 14px;object-fit:contain;background:#fff;border:1.5px solid rgba(47,111,228,0.25);box-shadow:0 10px 20px -8px rgba(47,111,228,0.28);padding:9px;}
.cert-seal-card .biz-cert-logo.has-logo{display:block;}
.cert-seal-card .biz-cert-badge.hide-badge{display:none;}
.cert-seal-card h3,.cert-seal-card span{position:relative;z-index:2;}
.cert-seal-card .biz-cert-view{
  display:block;margin-top:14px;
  font-size:12.5px;font-weight:700;color:var(--blue-500);
}

/* ---- Certificate zoom modal ---- */
.cert-modal-overlay{position:fixed;inset:0;background:rgba(11,30,61,0.68);z-index:900;display:none;align-items:center;justify-content:center;padding:20px;}
.cert-modal-overlay.open{display:flex;}
.cert-modal-card{position:relative;background:#fff;border-radius:18px;max-width:480px;width:100%;padding:32px 26px 26px;text-align:center;box-shadow:var(--shadow-lg);max-height:88vh;overflow-y:auto;}
.cert-modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--bg);font-size:20px;color:var(--navy-800);display:flex;align-items:center;justify-content:center;}
.cert-modal-img{width:100%;border-radius:12px;cursor:zoom-in;margin-top:10px;transition:transform .25s ease;}
.cert-modal-img.zoomed{transform:scale(1.6);cursor:zoom-out;}
.video-modal-card{position:relative;width:100%;max-width:760px;}
.video-modal-body{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:14px;overflow:hidden;}
.video-modal-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-modal-card .cert-modal-close{top:-42px;right:0;background:#fff;}
.testi-video-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-bottom:14px;
  color:var(--purple-500);font-weight:700;font-size:12.5px;padding:14px;border-radius:12px;
  background:rgba(139,92,246,0.08);border:1.5px dashed rgba(139,92,246,0.3);
}
.testi-video-btn:hover{background:rgba(139,92,246,0.14);}

/* ===== STATS COUNTER — White-Yellow theme, compact, ultra-smooth =====
   Solid white cards (no backdrop-filter — cheaper to render than the
   glass look, especially on mobile) on a soft cream/gold backdrop. Each
   card carries its own colour (icon bubble + top accent bar + hover
   glow) from admin-set data, plus a one-time hover shine sweep. */
.stats-section{padding:14px 0;background:linear-gradient(120deg,#fffdf6,#fff8e3 55%,#fef3c7 120%);position:relative;overflow:hidden;}
.stats-orb{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(245,158,11,0.14),transparent 70%);animation:statsOrbFloat 8s ease-in-out infinite;will-change:transform;}
.stats-orb.s2i-stats-paused{animation-play-state:paused;}
.stats-orb-a{width:220px;height:220px;right:-70px;bottom:-70px;}
.stats-orb-b{width:150px;height:150px;left:-50px;top:-50px;animation-delay:1.4s;}
@keyframes statsOrbFloat{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-10px,0);}}
@media(prefers-reduced-motion:reduce){.stats-orb{animation:none !important;}}

.stats-head{text-align:center;margin-bottom:20px;position:relative;z-index:1;}
.stats-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#92640a;background:rgba(245,158,11,0.12);padding:6px 13px;border-radius:20px;margin-bottom:10px;}
.stats-heading{font-family:var(--font-head);color:var(--navy-900);font-size:clamp(18px,2.6vw,24px);font-weight:700;}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative;z-index:1;}
.stat-box{
  position:relative;overflow:hidden;text-align:center;color:var(--navy-900);
  background:#fff;border:1px solid rgba(245,158,11,0.18);border-radius:14px;padding:16px 10px 13px;
  box-shadow:0 6px 16px -10px rgba(120,90,10,0.25);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease;
  will-change:transform;
}
.stat-box:hover{transform:translateY(-4px);border-color:var(--stat-c,#f59e0b);box-shadow:0 16px 28px -14px var(--stat-glow,rgba(245,158,11,0.45));}
.stat-accent{position:absolute;top:0;left:0;right:0;height:3px;background:var(--stat-c,#f59e0b);}
.stat-box::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.75) 50%,transparent 70%);
  background-size:220% 100%;background-position:220% 0;
}
.stat-box:hover::before{opacity:1;animation:statShine .8s ease forwards;}
@keyframes statShine{from{background-position:220% 0;}to{background-position:-60% 0;}}
.stat-icon{
  width:32px;height:32px;border-radius:50%;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--stat-c,#f59e0b);
  box-shadow:0 4px 10px -3px var(--stat-glow,rgba(245,158,11,0.55));
}
.stat-number{font-family:var(--font-head);font-size:clamp(19px,2.8vw,26px);font-weight:800;line-height:1;}
.stat-suffix{font-size:0.55em;margin-left:2px;}
.stat-label{font-size:11px;color:var(--muted);margin-top:5px;font-weight:600;}
@media(prefers-reduced-motion:reduce){.stat-box::before{animation:none !important;}}
@media(max-width:768px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stats-section{padding:8px 0;}
}

/* ===== HOW IT WORKS — compact premium rectangle diagram (2x2 S-flow) =====
   Redesign v2: wrapped in one bordered "frame" rectangle so the whole
   thing reads as a single diagram, not four loose cards — and a 2x2
   layout instead of a long row/column keeps it short both on desktop
   and mobile. Flow order is Top-Left → Top-Right → Bottom-Right →
   Bottom-Left (a clean "S" loop with no crossing lines). */
.how-it-works-section{background:linear-gradient(180deg,#eef4ff,#ffffff 55%,#eef4ff);}
.hiw-diagram{margin-top:6px;}
.hiw-frame{
  position:relative;max-width:640px;margin:0 auto;padding:34px 22px 26px;border-radius:26px;
  background:linear-gradient(155deg,#ffffff,#f3f8ff 60%,#eef4ff);
  border:1.5px solid rgba(47,111,228,0.16);
  box-shadow:0 24px 60px -28px rgba(47,111,228,0.4),inset 0 1px 0 rgba(255,255,255,0.9);
  overflow:hidden;
}
/* Was an animated box-shadow directly on the frame (recalculated/repainted
   every frame — expensive). Now a separate absolutely-positioned layer
   with a STATIC (stronger) shadow that only animates opacity — the
   "breathing" look is visually the same, but opacity is one of the two
   cheapest possible CSS animations (GPU-compositor only, no repaint). */
.hiw-frame::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  box-shadow:0 26px 68px -24px rgba(47,111,228,0.55);opacity:0;
  animation:hiwFrameGlow 5s ease-in-out infinite;
}
.hiw-frame.s2i-hiw-paused::after{animation-play-state:paused;}
/* 🐛 Real bug found in this scan: the 4 hub circles' own float animation
   was never wired into the off-screen pause system — only the frame's
   glow was. They'd keep animating forever even scrolled far away. */
.hiw-frame.s2i-hiw-paused .hiw-hub{animation-play-state:paused;}
@keyframes hiwFrameGlow{0%,100%{opacity:0;}50%{opacity:1;}}
/* faint blueprint-style dot grid backdrop — reinforces the "diagram" feel */
.hiw-frame::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background-image:radial-gradient(rgba(47,111,228,0.12) 1px,transparent 1px);
  background-size:16px 16px;
}
/* four small corner brackets, like a technical-diagram/viewfinder frame */
.hiw-frame-corner{position:absolute;width:18px;height:18px;border:2px solid rgba(47,111,228,0.4);z-index:2;}
.hiw-frame-corner.tl{top:10px;left:10px;border-right:none;border-bottom:none;border-radius:6px 0 0 0;}
.hiw-frame-corner.tr{top:10px;right:10px;border-left:none;border-bottom:none;border-radius:0 6px 0 0;}
.hiw-frame-corner.bl{bottom:10px;left:10px;border-right:none;border-top:none;border-radius:0 0 0 6px;}
.hiw-frame-corner.br{bottom:10px;right:10px;border-left:none;border-top:none;border-radius:0 0 6px 0;}

.hiw-inner{position:relative;z-index:1;}
.hiw-svg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:visible;}
.hiw-svg-path{fill:none;stroke:url(#hiwPathGrad);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.hiw-svg-arrow{fill:rgba(47,111,228,0.55);}
.hiw-flow-dot{filter:drop-shadow(0 0 5px rgba(125,211,252,0.9));}

.hiw-grid{
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"tl tr" "bl br";
  gap:10px 14px;position:relative;z-index:1;perspective:1200px;
}
.hiw-node:nth-child(1){grid-area:tl;}
.hiw-node:nth-child(2){grid-area:tr;}
.hiw-node:nth-child(3){grid-area:br;}
.hiw-node:nth-child(4){grid-area:bl;}
.hiw-node{display:flex;flex-direction:column;align-items:center;text-align:center;}
.hiw-hub{
  position:relative;width:42px;height:42px;border-radius:50%;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#ffffff,#eaf1ff);
  border:1.5px solid rgba(47,111,228,0.25);color:var(--blue-500);
  box-shadow:0 10px 20px -8px rgba(47,111,228,0.35),inset 0 1px 0 rgba(255,255,255,0.9),0 0 0 5px rgba(47,111,228,0.07);
  animation:hiwHubFloat 3.6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 0.18s);
}
@keyframes hiwHubFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.hiw-hub-num{
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-500),var(--purple-500));color:#fff;font-weight:800;font-size:9.5px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px -2px rgba(47,111,228,0.55),0 0 0 3px #fff;
}
.hiw-card{
  background:#fff;border-radius:14px;padding:10px 10px 12px;position:relative;z-index:1;
  border:1.5px solid #e4edfb;box-shadow:0 8px 18px -8px rgba(31,84,190,0.1);
  transition:transform .4s cubic-bezier(.22,.9,.32,1),box-shadow .4s cubic-bezier(.22,.9,.32,1),border-color .4s ease;
  transform-style:preserve-3d;width:100%;
}
.hiw-node:hover .hiw-card{
  transform:translateY(-4px) rotateX(5deg);
  box-shadow:0 20px 36px -14px rgba(47,111,228,0.3);border-color:rgba(47,111,228,0.32);
}
.hiw-node:hover .hiw-hub{box-shadow:0 14px 24px -8px rgba(47,111,228,0.45),inset 0 1px 0 rgba(255,255,255,0.9),0 0 0 6px rgba(47,111,228,0.12);}
.hiw-card h3{font-size:12.5px;margin-bottom:4px;transform:translateZ(8px);line-height:1.25;}
.hiw-card p{font-size:11px;color:var(--muted);line-height:1.4;transform:translateZ(4px);}

@media(max-width:480px){
  .hiw-frame{padding:26px 12px 18px;border-radius:20px;}
  .hiw-grid{gap:8px 10px;}
  .hiw-hub{width:36px;height:36px;}
  .hiw-card{padding:8px 8px 10px;border-radius:12px;}
  .hiw-card h3{font-size:11.5px;}
  .hiw-card p{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
  .hiw-frame::after{animation:none !important;}
  .hiw-hub{animation:none !important;}
  .hiw-svg .hiw-flow-dot{animation:none !important;opacity:0 !important;}
  .hiw-node:hover .hiw-card{transform:translateY(-4px) !important;}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none !important;}
}
@media(max-width:560px){
  .skill-chip{padding:8px 16px 8px 8px;font-size:13.5px;gap:9px;}
  .skill-chip-icon{width:26px;height:26px;}
}

/* ===== TOP EARNERS PREVIEW — premium leaderboard (White / Gold / Blue) ===== */
.top-earners-section{padding-top:28px;background:linear-gradient(180deg,#fffdf6,#ffffff 45%);}
.lb-frame{
  max-width:560px;margin:24px auto 0;padding:10px;border-radius:20px;
  background:linear-gradient(155deg,#ffffff,#fbf8ee 60%,#ffffff);
  border:1.5px solid rgba(234,179,8,0.22);
  box-shadow:0 20px 46px -22px rgba(31,84,190,0.22),inset 0 1px 0 rgba(255,255,255,0.9);
}
.lb-row{
  display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:12px 16px;margin-bottom:8px;box-shadow:0 6px 16px rgba(15,42,74,0.05);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.lb-row:last-child{margin-bottom:0;}
.lb-row:hover{transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(47,111,228,0.18);border-color:rgba(47,111,228,0.25);}
/* Rank-1 row: lifted out visually with a warm gold frame + a slow
   diagonal shimmer sweep — the section's one signature motion. */
.lb-row-top{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#fffbeb,#ffffff 55%);
  border:1.5px solid rgba(234,179,8,0.45);
  box-shadow:0 14px 30px -12px rgba(234,179,8,0.35);
}
.lb-row-top::after{
  content:'';position:absolute;top:0;left:0;width:45%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,0.75),transparent);
  transform:translateX(-140%);
  animation:lbShimmer 4.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes lbShimmer{0%{transform:translateX(-140%);}45%,100%{transform:translateX(290%);}}
.s2i-lb-paused .lb-row-top::after{animation-play-state:paused;}
.lb-rank{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;
}
.lb-rank-gold{background:transparent;width:34px;height:34px;filter:drop-shadow(0 3px 6px rgba(234,179,8,0.5));}
.lb-crown-svg{display:block;}
.lb-rank-silver{background:linear-gradient(135deg,#cbd5e1,#94a3b8);box-shadow:0 4px 10px -2px rgba(100,116,139,0.5);}
.lb-rank-bronze{background:linear-gradient(135deg,#d99a5b,#b45309);box-shadow:0 4px 10px -2px rgba(180,83,9,0.45);}
.lb-rank-plain{background:linear-gradient(135deg,var(--blue-500),var(--purple-500));box-shadow:0 4px 10px -2px rgba(47,111,228,0.4);font-size:12px;}
.lb-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;color:#fff;font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px -2px rgba(15,42,74,0.3);
}
.lb-name{flex:1;font-weight:700;font-size:14px;position:relative;z-index:1;}
.lb-earning{font-weight:800;font-size:14.5px;color:var(--blue-500);position:relative;z-index:1;}
.lb-earning-gold{color:#b45309;}
@media(prefers-reduced-motion:reduce){.lb-row-top::after{animation:none !important;opacity:0;}}
.cert-modal-badge{width:80px;height:80px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:17px;color:#fff;background:linear-gradient(135deg,var(--sky-500),var(--purple-500));}

/* ===== STANDALONE CTA BAND ===== */
.final-cta{
  background:linear-gradient(120deg,var(--navy-900),var(--purple-500) 60%,var(--sky-500) 130%);
  border-radius:24px;padding:50px 30px;text-align:center;color:#fff;box-shadow:var(--shadow-lg);
}
.final-cta h2{color:#fff;}
.final-cta p{color:rgba(255,255,255,0.85);}

/* ===== PREMIUM POLISH (v2 refinement — spacing/animation/depth, no structural change) ===== */
.reveal{transform:translateY(24px) scale(.985);}
.reveal.in{transform:translateY(0) scale(1);}

.hero,#why,#courses,#founder,#certificates,#calculator,#testimonials,.how-it-works-section{overflow:hidden;}
.hero::before,#why::before,#courses::before,#founder::before,#certificates::before,#calculator::before,#testimonials::before,.how-it-works-section::before{
  content:'';position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;opacity:.5;
}
.hero::before{top:-140px;right:-120px;background:radial-gradient(circle,rgba(139,92,246,.22),transparent 70%);}
#why::before{top:-100px;left:-140px;background:radial-gradient(circle,rgba(255,138,61,.16),transparent 70%);}
.how-it-works-section::before{bottom:-160px;right:-160px;background:radial-gradient(circle,rgba(56,189,248,.18),transparent 70%);}
#courses::before{top:-120px;right:-160px;background:radial-gradient(circle,rgba(47,111,228,.14),transparent 70%);}
#founder::before{bottom:-150px;left:-150px;background:radial-gradient(circle,rgba(139,92,246,.16),transparent 70%);}
#certificates::before{top:-120px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,176,32,.14),transparent 70%);}
#calculator::before{top:-120px;left:-140px;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 70%);}
#testimonials::before{bottom:-140px;right:-150px;background:radial-gradient(circle,rgba(56,189,248,.14),transparent 70%);}

/* alternating soft tint for section rhythm (zebra depth, not flat throughout) */
#why,#founder{background:linear-gradient(180deg,rgba(47,111,228,0.028),rgba(139,92,246,0.028));}

/* richer, colour-matched hover glow on key cards — overrides earlier plain hover rules (source order). .team-card excluded — it now has its own dedicated, more elaborate premium hover treatment defined earlier. */
.course-card,.cert-card,.why-card{border:1px solid var(--line);transition:transform .35s cubic-bezier(.22,.9,.32,1),box-shadow .35s cubic-bezier(.22,.9,.32,1),border-color .35s ease !important;}
.course-card:hover,.cert-card:hover,.why-card:hover{transform:translateY(-7px);border-color:rgba(139,92,246,0.35);box-shadow:0 22px 48px -18px rgba(47,111,228,0.28);}

/* soft fade divider between whitespace sections for rhythm without hard edges */
.section + .section{position:relative;}
.section + .section::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(70%,760px);height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--line),transparent);}

/* slightly richer default card shadow so cards feel lifted even at rest */
.course-card,.cert-card{box-shadow:0 6px 20px -10px rgba(15,42,74,0.12);}

@media (prefers-reduced-motion: reduce){
  .hero::before,#why::before,#courses::before,#founder::before,#certificates::before,.how-it-works-section::before{display:none;}
}

/* ---- Pricing Package Cards (used on packages.html, index.html "Enroll Now" section) ---- */
.pkgs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;padding:36px 0 20px;align-items:stretch;}
.pkg-tier-card{
  background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;
  position:relative;transition:transform .2s ease,box-shadow .2s ease;
}
.pkg-tier-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.pkg-tier-card.top{border-color:var(--purple-500);box-shadow:0 20px 50px -20px rgba(139,92,246,0.4);}
.ptc-tier-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--purple-500);margin-bottom:10px;}
.ptc-name{font-size:20px;font-weight:800;margin-bottom:6px;}
.ptc-desc{font-size:13.5px;color:var(--muted);margin-bottom:16px;min-height:38px;}
.ptc-price{font-size:30px;font-weight:800;color:var(--navy-900);margin-bottom:4px;}
.ptc-price small{font-size:13px;font-weight:600;color:var(--muted);}
.ptc-cascade{font-size:12.5px;color:#059669;font-weight:700;margin-bottom:16px;}
.ptc-includes{list-style:none;margin:0 0 20px;padding:0;flex:1;}
.ptc-includes li{display:flex;gap:8px;font-size:13.5px;padding:6px 0;color:var(--ink);}
.ptc-includes li .chk{color:#059669;font-weight:800;flex-shrink:0;}
.ptc-btn{display:block;text-align:center;padding:13px;border-radius:12px;font-weight:700;font-size:14px;background:var(--navy-900);color:#fff;border:none;cursor:pointer;width:100%;}
.pkg-tier-card.top .ptc-btn{background:linear-gradient(135deg,var(--blue-500),var(--purple-500));}
.pkgs-empty{text-align:center;padding:60px 20px;color:var(--muted);}


/* ---- First-Visit Welcome Popup — 3 admin-switchable designs, auto-dismisses in 2.5s ---- */
@keyframes wpFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes wpFadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes wpCardPop{from{opacity:0;transform:translateY(28px) scale(.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes wpCardOut{from{opacity:1;transform:translateY(0) scale(1);}to{opacity:0;transform:translateY(-14px) scale(.95);}}
@keyframes wpShrink{from{width:100%;}to{width:0%;}}
@keyframes wpSparkle{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.15);}}
@keyframes wpShine{0%{background-position:-160% 0;}100%{background-position:160% 0;}}
@keyframes wpAvatarFloat{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-8px) rotate(2deg);}}
@keyframes wpGlowPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0.45);}50%{box-shadow:0 0 0 18px rgba(139,92,246,0);}}
@keyframes wpConfettiFall{0%{transform:translateY(-40px) rotate(0deg);opacity:0;}10%{opacity:1;}100%{transform:translateY(220px) rotate(360deg);opacity:0;}}
@keyframes wpBadgePop{0%{transform:scale(0) rotate(-20deg);}60%{transform:scale(1.15) rotate(6deg);}100%{transform:scale(1) rotate(0deg);}}
@keyframes wpRingSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes wpGoldShimmer{0%{background-position:-160% 0;}100%{background-position:160% 0;}}
@keyframes wpDiamondPulse{0%,100%{transform:scale(1) rotate(45deg);}50%{transform:scale(1.12) rotate(45deg);}}

.wp-overlay{position:fixed;inset:0;z-index:99999;background:rgba(11,30,61,0.55);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:20px;animation:wpFadeIn .4s ease both;}
.wp-overlay.wp-closing{animation:wpFadeOut .35s ease both;}
.wp-card{position:relative;overflow:hidden;max-width:380px;width:100%;border-radius:26px;padding:36px 26px 26px;text-align:center;animation:wpCardPop .55s cubic-bezier(.22,1.4,.36,1) both;}
.wp-overlay.wp-closing .wp-card{animation:wpCardOut .3s ease both;}
.wp-close{position:absolute;top:14px;right:16px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;z-index:3;transition:background .15s ease,transform .15s ease;}
.wp-close:hover{transform:scale(1.1);}
.wp-progress-track{position:absolute;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,0.18);}
.wp-progress-bar{height:100%;animation:wpShrink 2.5s linear forwards;}
.wp-title{font-family:var(--font-head);font-size:23px;font-weight:800;margin-bottom:8px;line-height:1.3;}
.wp-tagline{font-size:15px;font-weight:700;opacity:0.92;}

/* ---- Variant 1: Aurora Glow ---- */
.wp-card.variant-aurora{background:linear-gradient(160deg,#3d5afe 0%,#8b5cf6 60%,#c084fc 100%);color:#fff;box-shadow:0 40px 90px -20px rgba(76,15,150,0.55),0 0 0 1px rgba(255,255,255,0.1) inset;}
.wp-card.variant-aurora .wp-close{background:rgba(255,255,255,0.16);color:#fff;}
.wp-card.variant-aurora .wp-close:hover{background:rgba(255,255,255,0.3);}
.wp-card.variant-aurora .wp-progress-bar{background:#fff;}
.wp-card.variant-aurora .wp-sparkle{position:absolute;color:rgba(255,255,255,0.85);animation:wpSparkle 2.4s ease-in-out infinite;pointer-events:none;}
.wp-card.variant-aurora .wp-avatar{
  width:88px;height:88px;margin:0 auto 18px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 32% 28%,#ffe9a8,#ffb020 60%,#d97706 100%);
  display:flex;align-items:center;justify-content:center;font-size:42px;
  animation:wpAvatarFloat 3.2s ease-in-out infinite, wpGlowPulse 2.6s ease-in-out infinite;
}
.wp-card.variant-aurora .wp-title span{background:linear-gradient(100deg,#ffe9a8 20%,#fff 40%,#ffe9a8 60%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wpShine 3s linear infinite;}

/* ---- Variant 2: Confetti Burst ---- */
.wp-card.variant-confetti{background:#fff;color:var(--ink,#101a30);box-shadow:0 40px 90px -20px rgba(15,42,74,0.35);border:1px solid rgba(0,0,0,0.04);}
.wp-card.variant-confetti .wp-close{background:rgba(0,0,0,0.06);color:var(--ink,#101a30);}
.wp-card.variant-confetti .wp-close:hover{background:rgba(0,0,0,0.12);}
.wp-card.variant-confetti .wp-progress-track{background:rgba(0,0,0,0.08);}
.wp-card.variant-confetti .wp-progress-bar{background:linear-gradient(90deg,#f59e0b,#ec4899);}
.wp-card.variant-confetti .wp-badge{width:78px;height:78px;margin:0 auto 16px;border-radius:24px;background:linear-gradient(135deg,#f59e0b,#ec4899);display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 14px 30px -10px rgba(236,72,153,0.55);animation:wpBadgePop .6s cubic-bezier(.34,1.56,.64,1) both;}
.wp-card.variant-confetti .wp-tagline{color:#6b21a8;}
.wp-confetti-piece{position:absolute;top:-10px;border-radius:2px;pointer-events:none;animation:wpConfettiFall 1.8s ease-in forwards;}

/* ---- Variant 3: Minimal Premium ---- */
.wp-card.variant-minimal{background:linear-gradient(160deg,#0b1e3d,#122a52);color:#fff;box-shadow:0 40px 90px -20px rgba(0,0,0,0.55),0 0 0 1px rgba(255,215,120,0.15) inset;padding-top:40px;}
.wp-card.variant-minimal .wp-close{background:rgba(255,255,255,0.1);color:#ffd166;}
.wp-card.variant-minimal .wp-close:hover{background:rgba(255,255,255,0.2);}
.wp-card.variant-minimal .wp-progress-bar{background:linear-gradient(90deg,#ffd166,#f59e0b);}
.wp-card.variant-minimal::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;background:linear-gradient(120deg,transparent,rgba(255,214,120,0.7),transparent 60%);background-size:220% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:wpGoldShimmer 3.2s linear infinite;pointer-events:none;}
.wp-card.variant-minimal .wp-diamond{width:46px;height:46px;margin:0 auto 22px;background:linear-gradient(135deg,#ffe9a8,#f59e0b);transform:rotate(45deg);animation:wpDiamondPulse 2.6s ease-in-out infinite;box-shadow:0 10px 26px -8px rgba(245,158,11,0.6);}
.wp-card.variant-minimal .wp-title{font-weight:700;letter-spacing:0.01em;}
.wp-card.variant-minimal .wp-title b{color:#ffd166;font-weight:800;}
.wp-card.variant-minimal .wp-tagline{color:#ffd166;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;font-size:12.5px;}

/* ---- Variant 4: Sunrise ---- */
.wp-card.variant-sunrise{background:linear-gradient(160deg,#f97316 0%,#ec4899 55%,#a21caf 100%);color:#fff;box-shadow:0 40px 90px -20px rgba(190,24,93,0.5),0 0 0 1px rgba(255,255,255,0.1) inset;}
.wp-card.variant-sunrise .wp-close{background:rgba(255,255,255,0.16);color:#fff;}
.wp-card.variant-sunrise .wp-close:hover{background:rgba(255,255,255,0.3);}
.wp-card.variant-sunrise .wp-progress-bar{background:#fff;}
.wp-card.variant-sunrise .wp-sunburst{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 70%);animation:wpDiamondPulse 3s ease-in-out infinite;pointer-events:none;}
.wp-card.variant-sunrise .wp-badge{width:78px;height:78px;margin:0 auto 16px;border-radius:50%;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;font-size:38px;position:relative;z-index:1;animation:wpBadgePop .6s cubic-bezier(.34,1.56,.64,1) both;}
.wp-card.variant-sunrise .wp-title{position:relative;z-index:1;}

/* ---- Variant 5: Royal Gold ---- */
.wp-card.variant-royal{background:linear-gradient(165deg,#1e1147 0%,#3b1d6b 55%,#5b2a9e 100%);color:#fff;box-shadow:0 40px 90px -20px rgba(30,17,71,0.6),0 0 0 1px rgba(255,209,102,0.18) inset;}
.wp-card.variant-royal .wp-close{background:rgba(255,255,255,0.14);color:#ffd166;}
.wp-card.variant-royal .wp-close:hover{background:rgba(255,209,102,0.22);}
.wp-card.variant-royal .wp-progress-bar{background:linear-gradient(90deg,#ffd166,#f59e0b);}
.wp-card.variant-royal .wp-crown{font-size:44px;margin-bottom:14px;animation:wpBadgePop .6s cubic-bezier(.34,1.56,.64,1) both;filter:drop-shadow(0 8px 16px rgba(245,158,11,0.5));}
.wp-card.variant-royal .wp-title b{color:#ffd166;}
.wp-card.variant-royal .wp-rule-gold{width:52px;height:2px;margin:12px auto 12px;background:linear-gradient(90deg,transparent,#ffd166,transparent);}
.wp-card.variant-royal .wp-tagline{color:#e9d5ff;letter-spacing:0.04em;font-size:13px;text-transform:uppercase;font-weight:700;}
.wp-card.variant-minimal .wp-rule{width:40px;height:2px;background:linear-gradient(90deg,transparent,#ffd166,transparent);margin:14px auto 16px;}

@media(max-width:420px){ .wp-card{padding:30px 20px 22px;} .wp-title{font-size:20px;} }
@media(prefers-reduced-motion:reduce){ .wp-avatar,.wp-title span,.wp-card,.wp-badge,.wp-diamond,.wp-card.variant-minimal::before{animation:none !important;} }