/* =========================================================
   Samuel Joshi Productions — stylesheet
   ========================================================= */

:root{
  /* premium near-black base with a hint of indigo, so it sits behind
     the pink/purple/blue accents instead of fighting them */
  --ink:#000000;
  --ink-soft:#131226;
  --card:#191830;
  --card-2:#211F3D;

  /* ---------------------------------------------------------------
     COLOUR GRADE — a single blue → purple → pink family, kept to
     just those three hues on purpose (no gold/amber/green/teal) so
     the page reads as one deliberate, minimal grade rather than a
     different accent every section. Hero keeps the signature
     three-stop brand gradient; every other section below just
     changes which two of the three stops it leans on.
     --------------------------------------------------------------- */
  --grad-a:#4A7CFF;
  --grad-b:#A855F7;
  --grad-c:#EC4899;
  --gradient-brand:linear-gradient(120deg, var(--grad-a) 0%, var(--grad-b) 52%, var(--grad-c) 100%);
  --gradient-brand-hover:linear-gradient(120deg, var(--grad-c) 0%, var(--grad-b) 52%, var(--grad-a) 100%);

  /* solid representative accent (kept as --gold for compatibility with the
     many existing text/icon/border rules below) — now the mid-gradient
     purple, so icons, links and borders read consistently against the
     new blue/purple/pink grade */
  --gold:#A855F7;
  --gold-deep:#7C3AED;
  --gold-soft:#E9D5FF;

  --ivory:#F5F3FA;
  --slate:#A6A2BE;
  --line:rgba(255,255,255,0.09);
  --line-strong:rgba(255,255,255,0.16);

  /* the single cool counter-note — clear blue, used only where a section
     needs to visually separate itself from the purple/pink rhythm
     (comparison table, testimonials) rather than every section getting
     its own hue */
  --teal-note:#3B82F6;
  --teal-note-soft:#93C5FD;

  /* ===== per-section accent gradients — all mixed from the same
     blue/purple/pink family (with clear blue reserved for the two
     sections above), so the page reads as one continuous grade instead
     of a different colour every section. Hero keeps the signature
     three-stop brand gradient. ===== */
  --grad-about:linear-gradient(120deg,#4A7CFF 0%,#A855F7 100%);
  --grad-about-hover:linear-gradient(120deg,#A855F7 0%,#4A7CFF 100%);
  --grad-about-deep:#6D28D9;
  --grad-about-glow:rgba(124,58,237,0.35);

  --grad-courses:linear-gradient(120deg,#A855F7 0%,#EC4899 100%);
  --grad-courses-hover:linear-gradient(120deg,#EC4899 0%,#A855F7 100%);
  --grad-courses-deep:#BE185D;
  --grad-courses-glow:rgba(236,72,153,0.35);

  --grad-compare:linear-gradient(120deg,#3B82F6 0%,#60A5FA 100%);
  --grad-compare-hover:linear-gradient(120deg,#60A5FA 0%,#3B82F6 100%);
  --grad-compare-deep:#1D4ED8;
  --grad-compare-glow:rgba(59,130,246,0.35);

  --grad-flagship:linear-gradient(120deg,#EC4899 0%,#A855F7 100%);
  --grad-flagship-hover:linear-gradient(120deg,#A855F7 0%,#EC4899 100%);
  --grad-flagship-deep:#7C3AED;
  --grad-flagship-glow:rgba(168,85,247,0.4);

  --grad-how:linear-gradient(120deg,#A855F7 0%,#4A7CFF 100%);
  --grad-how-hover:linear-gradient(120deg,#4A7CFF 0%,#A855F7 100%);
  --grad-how-deep:#6D28D9;
  --grad-how-glow:rgba(129,140,248,0.35);

  --grad-lead:linear-gradient(120deg,#F472B6 0%,#A855F7 100%);
  --grad-lead-hover:linear-gradient(120deg,#A855F7 0%,#F472B6 100%);
  --grad-lead-deep:#BE185D;
  --grad-lead-glow:rgba(244,114,182,0.35);

  --grad-testimonials:linear-gradient(120deg,#60A5FA 0%,#A78BFA 100%);
  --grad-testimonials-hover:linear-gradient(120deg,#A78BFA 0%,#60A5FA 100%);
  --grad-testimonials-deep:#4C1D95;
  --grad-testimonials-glow:rgba(96,165,250,0.3);

  --grad-gallery:linear-gradient(120deg,#EC4899 0%,#C084FC 100%);
  --grad-gallery-hover:linear-gradient(120deg,#C084FC 0%,#EC4899 100%);
  --grad-gallery-deep:#A21CAF;
  --grad-gallery-glow:rgba(236,72,153,0.35);

  --grad-cta:linear-gradient(120deg,#4A7CFF 0%,#A855F7 100%);
  --grad-cta-hover:linear-gradient(120deg,#A855F7 0%,#4A7CFF 100%);
  --grad-cta-deep:#6D28D9;
  --grad-cta-glow:rgba(74,124,255,0.35);

  --grad-newsletter:linear-gradient(120deg,#A855F7 0%,#60A5FA 100%);
  --grad-newsletter-hover:linear-gradient(120deg,#60A5FA 0%,#A855F7 100%);
  --grad-newsletter-deep:#6D28D9;
  --grad-newsletter-glow:rgba(96,165,250,0.35);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
  position:relative;
}
/* Site-wide ambient gradient — fixed (not repainted on scroll/animated
   per-frame, so it's essentially free performance-wise) soft blue/purple/
   pink glow blobs, matching the page's minimal colour grade. */
body::before{
  content:'';
  position:fixed;inset:0;
  z-index:-1;
  pointer-events:none;
  /* no opaque fallback layer here on purpose — this needs to stay see-through
     so the .kb-backdrop canvas (z-index:-2, i.e. behind this) shows through
     wherever the gradient blobs fade to transparent */
  background:
    radial-gradient(900px 560px at 8% -8%, rgba(74,124,255,0.14), transparent 60%),
    radial-gradient(820px 560px at 96% 6%, rgba(168,85,247,0.13), transparent 58%),
    radial-gradient(1000px 640px at 50% 108%, rgba(236,72,153,0.10), transparent 62%);
  background-repeat:no-repeat;
  animation:ambientDrift 26s ease-in-out infinite;
}
@keyframes ambientDrift{
  0%,100%{background-position:0 0, 0 0, 0 0;}
  50%{background-position:2% -1%, -2% 1%, 0 -1.5%;}
}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none;}
}
h1,h2,h3{font-family:'Poppins',sans-serif;margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media (max-width:700px){.wrap{padding:0 20px;}}
section[id]{scroll-margin-top:78px;}

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:200;
 
  transition:background .3s ease, border-color .3s ease;
  margin:0;
}
header.hero-nav{
  background:transparent;
  border-bottom:none;
}
header.hero-nav.is-scrolled{
  background:rgba(0, 0, 0, 0.55);
  border-bottom:none;
}
/* interior pages (About, Courses, Production, Contact, My Account, …)
   have no hero photo of their own behind the nav, so — unlike the
   home page — the bar always gets a frosted backdrop. This keeps the
   logo/links readable against whatever sits behind them (e.g. the
   Production page's photo slider) instead of floating transparently
   on top and blending into the image. */
header:not(.hero-nav){
  background:rgba(6, 5, 12, 0.92);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.14);
  box-shadow:0 12px 30px rgba(0,0,0,0.55);
}

.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;}

.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:50px;width:auto;}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-text strong{font-family:'Poppins',sans-serif;font-weight:800;font-size:15px;letter-spacing:0.02em;color:var(--ivory);}
.brand-text small{font-size:9.5px;font-weight:700;letter-spacing:0.18em;color:var(--gold);text-transform:uppercase;}

nav.links{display:flex;gap:30px;font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ivory);}
nav.links a{position:relative;padding-bottom:4px;}
nav.links a.active{color:var(--gold);}
nav.links a.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gradient-brand);}
nav.links a:hover{color:var(--gold);}

/* duplicate of .btn-ghost's "Login / Sign up" link, shown only inside
   the mobile dropdown (see @media (max-width:900px) below) — the
   .nav-right one is display:none on mobile, so without this the login
   page becomes unreachable from the header on small screens */
.mobile-account-link{display:none !important;}

/* Hard safety net: this theme is the only thing allowed to render
   header/nav/footer chrome (see UI-ONLY-MODE.md). If WooCommerce,
   Tutor LMS, or a page-builder theme-part ever injects its own
   header, menu, or login control alongside ours — which is what
   caused a second "Login / Sign up" control to appear on the
   course list page — hide it outright rather than letting it stack
   under/around our own header. */
body header:not(#sjp-header),
body .site-header:not(#sjp-header),
body .elementor-location-header,
body nav.main-navigation:not(#navLinks),
body .tutor-header,
body #tutor-header,
body .tutor-mobile-nav,
body .tutor-dashboard-permalinks:not(.account-dashboard-nav *),
body .woocommerce-MyAccount-navigation:not(.account-dashboard-content *):not(.account-dashboard-shell *) {
  display:none !important;
}

.nav{flex-wrap:nowrap;}
.brand{flex-shrink:0;min-width:0;}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.btn-search{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:var(--ivory);
  padding:9px 18px;border-radius:999px;font-size:13px;font-weight:700;
  transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
  flex-shrink:0;
}
.btn-search-icon{width:15px;height:15px;flex-shrink:0;}
.btn-search:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);background:rgba(255,255,255,0.12);}

.btn-ghost{
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, var(--card-2), var(--card));
  padding:9px 18px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ivory);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 -3px 6px rgba(0,0,0,0.4) inset, 0 8px 16px rgba(0,0,0,0.35);
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.btn-ghost:hover{border-color:var(--gold-deep);color:var(--gold);transform:translateY(-1px);}

.btn-login{
  position:relative;
  border:2px solid transparent;
  border-radius:999px;
  padding:13px 26px;
  font-size:15.5px;
  font-weight:800;
  color:var(--ivory);
  background:
    linear-gradient(120deg, #09090d 0%, #09090d 100%) padding-box,
    linear-gradient(120deg, #EC4899 0%, #4A7CFF 52%, #EC4899 100%) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 0 0;
  animation: snakeMove 4s linear infinite;
  box-shadow:0 1px 0 rgba(255,255,255,0.08) inset;
}
.btn-login:hover{
  transform:translateY(-1px);
}

.btn-enroll{
  position:relative;
  background:linear-gradient(120deg, #b2216a 0%, #b3326c 52%, #4F46E5 80%);
  border:2px solid rgba(255,255,255,0.95);
  color:#fff;
  padding:11px 20px 11px 18px;
  padding-right:52px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  transition:transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  animation:heartbeat 1.8s ease-in-out infinite;
}
.btn-enroll::after{
  content:'→';
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:#fff;
}
.btn-enroll:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(236,72,153,0.18);
  border-color:rgba(255,255,255,1);
  animation-play-state:paused;
}

/* pill button — 3D gradient "raised" finish, Gemini multicolor gradient */
.btn-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(120deg, var(--grad-a) 0%, var(--grad-b) 52%, var(--grad-c) 100%);
  color:#0c0c12;
  padding:11px 20px 11px 22px;border-radius:999px;
  font-size:12.5px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -3px 6px rgba(0,0,0,0.25) inset,
    0 10px 24px rgba(120,80,220,0.35),
    0 2px 0 var(--gold-deep);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-pill span{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:#0c0c12;color:var(--gold-soft);
  font-size:14px;font-weight:800;line-height:1;
  font-style:italic;
}

.btn-pill:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -3px 6px rgba(0,0,0,0.25) inset,
    0 14px 30px rgba(120,80,220,0.45),
    0 3px 0 var(--gold-deep);
}
.btn-pill:active{
  transform:translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -2px 4px rgba(0,0,0,0.3) inset,
    0 4px 12px rgba(120,80,220,0.3),
    0 1px 0 var(--gold-deep);
}

/* heartbeat pulse — draws the eye to Enroll Now without being hover-only */
.btn-pill--heartbeat{animation:heartbeat 1.8s ease-in-out infinite;}
.btn-pill--heartbeat:hover{animation-play-state:paused;}
@keyframes heartbeat{
  0%, 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(168,85,247,0.45);}
  15%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(168,85,247,0.22);}
  30%{transform:scale(0.98);box-shadow:0 0 0 0 rgba(168,85,247,0);}
  45%{transform:scale(1.05);box-shadow:0 0 0 4px rgba(168,85,247,0.15);}
  60%{transform:scale(1);box-shadow:0 0 0 0 rgba(168,85,247,0);}
}
@media (prefers-reduced-motion: reduce){
  .btn-pill--heartbeat{animation:none;}
}

/* UNIQUE HAMBURGER — brand-gradient bars that morph into an X on open,
   instead of plain static ivory bars. burger.is-open is toggled in
   main.js alongside nav.links.open. */
.burger{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:6px;width:36px;height:36px;background:none;border:none;padding:0;
  position:relative;
}
.burger span{
  display:block;height:2.5px;width:22px;border-radius:2px;
  background:linear-gradient(120deg, var(--grad-a) 0%, var(--grad-b) 52%, var(--grad-c) 100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease, width .2s ease;
}
.burger span:nth-child(1){transform-origin:center;}
.burger span:nth-child(3){transform-origin:center;}
.burger.is-open span:nth-child(1){transform:translateY(8.5px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;width:0;}
.burger.is-open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg);}

@media (max-width:900px){
  nav.links{
    position:absolute;top:100%;left:0;right:0;
    background:var(--ink-soft);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 32px 18px;
    display:none;
  }
  nav.links.open{display:flex;}
  nav.links a{padding:12px 0;border-bottom:1px solid var(--line);}
  .btn-ghost{display:none;}
  .account-menu{display:none;}
  .mobile-account-link{
    display:block !important;color:var(--gold);font-weight:800;
    border-bottom:1px solid var(--line);
  }
  .burger{display:flex;}
}

/* =========================================================
   HERO — full-bleed photo background
   ========================================================= */
.hero{position:relative;overflow:hidden;min-height:70vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:8px;perspective:1400px;}

/* =========================================================
   HERO — pinned exploded-keyboard scroll animation
   GSAP ScrollTrigger pins .hero-pin-sticky in place (and inserts its
   own spacer element to hold the scroll distance — no manual wrapper
   div needed) while Hero.jsx scrubs the canvas frame + progress
   readout off scroll position. Same "scroll IS the timeline" pin
   mechanic as the parallax-keys reference.
   ========================================================= */
.hero{overflow:visible;min-height:0;padding-top:0;display:block;perspective:none;}
.hero-pin-sticky{
  position:relative;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  align-items:center;
  background:var(--ink) url('/keyboard-frames/frame-001.webp') center/cover no-repeat;
}
.hero-kb-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none;
  filter:saturate(1.18) contrast(1.1) brightness(0.95);
}
.hero-pin-sticky .hero-overlay{
  z-index:2;
  background:linear-gradient(120deg, rgba(4,6,14,0.74) 0%, rgba(4,6,14,0.24) 48%, rgba(4,6,14,0.68) 100%),
            rgba(0,0,0,0.56);
}
.hero-pin-sticky .hero-content{
  position:relative;z-index:3;padding:0 32px 0;
  margin-top:auto;margin-bottom:auto;
  margin-left:auto;margin-right:auto;
  max-width:860px;
  width:min(100%,860px);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  will-change:opacity,transform;
}


/* small badge pill above the headline, matching the reference's
   "SAM — STUDIO FOR APPLIED MUSIC" eyebrow */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  background:rgba(243,244,244,0.06);
  border:1px solid rgba(243,244,244,0.14);
  color:var(--slate);font-size:11px;font-weight:700;letter-spacing:0.14em;
  margin-bottom:22px;
}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--gradient-brand);flex-shrink:0;}

.hero-btn-ghost{
  background:transparent;border:1px solid rgba(243,244,244,0.28);
  color:var(--ivory);padding:12px 22px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:0.03em;
  transition:border-color .2s ease, background .2s ease;
}
.hero-btn-ghost:hover{border-color:rgba(243,244,244,0.6);background:rgba(243,244,244,0.06);}

/* bottom-right scrub-progress readout, matching the reference's
   fill bar + percentage in the corner while the hero is pinned.
   The percentage label itself (.hero-progress-num) is commented out
   in front-page.php and the combo-offer-marquee sits in its place
   inside this same box — sized by its own .combo-offer-marquee
   rules, this container is untouched. */
.hero-progress{
  position:absolute;right:20px;top:500px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero-progress-label{
  font-size:13px;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;
  color:#ffffff;
  writing-mode:vertical-rl;
}
.hero-progress-track{width:3px;height:72px;border-radius:3px;background:rgba(243,244,244,0.18);overflow:hidden;display:block;}
.hero-progress-fill{display:block;width:100%;height:0%;background:var(--gradient-brand);}
/* centre everything inside the pinned hero — headline, sub copy,
   actions and feature row all sit on the vertical mid-line instead
   of hugging the left edge */
.hero-pin-sticky .hero-title,
.hero-pin-sticky .line-wrap{width:100%;}
.hero-pin-sticky .hero-sub{margin-left:center;margin-right:center;}
.hero-pin-sticky .hero-actions{
  justify-content:center;
  width:min(100%,920px);
  margin:0 auto 1.2rem;
  gap:24px;
}
.hero-pin-sticky .hero-features{
  justify-content:center;
  width:min(100%,780px);
  margin:3rem auto 0;
  gap:14px;
}
.hero-pin-sticky .hero-link{align-items:center;}

/* combo-offer-marquee: given its own fixed slot at the bottom of the
   hero's flex column (flex:0 0 auto — never grows/shrinks), while
   .hero-content just above it takes flex:1 and centers its own
   contents vertically in whatever space remains. That keeps the
   marquee permanently flush against the true bottom edge without an
   auto-margin tug-of-war, and stretches it to full browser width with
   the standard full-bleed trick (100vw + negative side margins) so
   it isn't capped by the 860px hero-content column. */
.hero-pin-sticky .combo-offer-marquee{
  flex:0 0 auto;
  margin-top:0;
  margin-bottom:0;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
  z-index:4;
  transform: translateY(12vh);
}

/* course-list-top-marquee: same full-bleed red banner treatment as
   the hero's combo-offer-marquee, but for the standalone duplicate
   placed at the very top of the course-list page (outside .wrap,
   so it needs its own edge-to-edge width + no wrap-container gap). */
.course-list-top-marquee{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:0;
  border-radius:0;
}

.hero-keywords-edge{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.hero-keywords-bar{
  width:100%;
  padding:26px 0;
  border-radius:0;
  border-top:1px dashed rgba(147, 131, 255, 0.45);
  border-bottom:1px dashed rgba(147, 131, 255, 0.45);
  background:rgba(18, 12, 44, 0.32);
  backdrop-filter:blur(32px);
  box-shadow:inset 0 0 0 1px rgba(147, 131, 255, 0.06), 0 24px 65px rgba(10, 4, 35, 0.18);
  overflow:hidden;
}
.hero-keywords-track{
  display:flex;
  gap:3.5rem;
  animation:heroKeywords 14s linear infinite;
  will-change:transform;
  padding:0 42px;
}
.hero-keyword{
  font-family:'Space Grotesk','Poppins',sans-serif;
  font-size:1.15rem;
  font-weight:900;
  letter-spacing:0.7em;
  text-transform:uppercase;
  color:rgba(245, 245, 255, 0.98);
  text-shadow:0 0 14px rgba(255, 255, 255, 0.16);
  white-space:nowrap;
  border-bottom:1px dashed rgba(245, 245, 255, 0.32);
  padding-bottom:2px;
}
.hero-keyword::before{
  content:'*';
  margin-right:0.9rem;
  color:rgba(143, 118, 255, 0.95);
  opacity:0.95;
}
.hero-keyword:first-child::before{content:'';margin-right:0;}
.hero-keywords-edge:hover .hero-keywords-track{animation-play-state:paused;}

@keyframes heroKeywords{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (max-width:700px){
  .hero-pin-sticky .hero-content{padding:0 20px 48px;}
  .hero-progress{right:14px;top:500px;}
  .hero-progress-track{height:50px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-pin-sticky{height:88vh;}
}

/* rotating background photos */
.hero-bg{position:absolute;inset:0;z-index:0;will-change:transform;transform:translateZ(0);}
.hero-bg-slide{
  position:absolute;inset:0;
  background-repeat:no-repeat;
  background-color:var(--ink);
  background-size:cover;
  background-position:center 12%;
 
  opacity:0;transition:opacity 1.6s ease;
}
.hero-bg-slide.is-active{opacity:1;}

/* ---------------------------------------------------------------
   3D PARALLAX LAYERS
   Each layer moves at a different rate on mouse move, driven from
   Hero.jsx via refs (not CSS transitions, so the JS rAF loop stays
   the single source of motion smoothing).
   - .hero-bg          -> back plane, smallest movement
   - .hero-parallax-particles -> mid plane, drifts opposite to bg
   - .hero-fg-person   -> front plane, largest movement, closest to viewer
   - .hero-content     -> tilts in 3D (rotateX/rotateY) for the "card" feel
   --------------------------------------------------------------- */
.hero-parallax-particles{
  position:absolute; inset:-6%; z-index:1;
  pointer-events:none; will-change:transform;
}
.hero-parallax-particles span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(224,183,90,0.9) 0%, rgba(224,183,90,0) 70%);
  filter:blur(1px);
}
.hero-parallax-particles span:nth-child(1){width:10px;height:10px;top:18%;left:12%;}
.hero-parallax-particles span:nth-child(2){width:6px;height:6px;top:32%;left:76%;}
.hero-parallax-particles span:nth-child(3){width:14px;height:14px;top:58%;left:22%;opacity:.7;}
.hero-parallax-particles span:nth-child(4){width:5px;height:5px;top:70%;left:64%;}
.hero-parallax-particles span:nth-child(5){width:9px;height:9px;top:14%;left:52%;opacity:.6;}
.hero-parallax-particles span:nth-child(6){width:7px;height:7px;top:82%;left:38%;}
.hero-parallax-particles span:nth-child(7){width:12px;height:12px;top:46%;left:90%;opacity:.5;}
.hero-parallax-particles span:nth-child(8){width:5px;height:5px;top:8%;left:85%;}

.hero-fg-person{
  position:absolute; z-index:2;
  right:2%; bottom:0;
  height:104%;
  pointer-events:none; will-change:transform;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-fg-person.is-active{opacity:1;}
.hero-fg-person img{
  height:100%; width:auto; display:block;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,0.55));
}
@media (max-width:900px){
  .hero-fg-person{right:-4%; height:88%; opacity:0.9;}
}
@media (max-width:640px){
  .hero-fg-person{display:none;}
}

#courses{position:relative;overflow:hidden;}
#courses .wrap{position:relative;z-index:1;}
.course-list-section{position:relative;overflow:hidden;}
.course-list-section .course-list-layout{position:relative;z-index:1;}
.scroll-frame-backdrop-wrap{position:absolute;inset:0;}
.courses-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.courses-bg::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.38);}
.courses-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(40px);opacity:0.78;transform:scale(1.03);}
.courses-bg-video--sharp{filter:blur(1px);opacity:0.9;transform:scale(1.01);}
/* Courses (course list) page only — a touch more contrast over the
   video so the cards and filters read clearly; home page's Courses
   section backdrop is untouched */
.course-list-section .courses-bg::before{background:rgba(0, 0, 0, 0.4);}
/* smoother playback: GPU-composited layer avoids the small stutter a
   plain <video> can show right at the loop point */
.course-list-section .courses-bg-video{
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0) scale(1.01);
}
#about{position:relative;overflow:hidden;}
#about .wrap{position:relative;z-index:1;}
.about-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.about-bg::before{content:'';position:absolute;inset:0;background:rgb(0, 0, 0);}
.about-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(20px);opacity:0.5;transform:scale(1.02);}
/* -------------------------------------------------------------
   Per-photo framing. Each photo is a different shape/composition,
   so each gets its own background-position (and, if needed,
   background-size) instead of sharing one setting.

   HOW TO TWEAK:
   background-position is "horizontal vertical".
   For the vertical value: 0% = top of the photo is fully shown
   (crops the bottom), 100% = bottom of the photo is fully shown
   (crops the top). 50% is centered. Nudge the number up/down in
   small steps (5-10%) and refresh to see the change.

   background-size: cover always fills the frame — to show MORE
   of the photo (zoom out) instead of just repositioning, raise
   this above "cover", e.g. 130% or 150%. Any exposed edge falls
   back to the dark --ink color, which blends into the overlay.
   ----------------------------------------------------------- */

/* slide 1 — performance/keyboard shot: keep more of the top of
   frame in view (hand + mic), so a lower percentage than default */
.slide-1{background-size: 100%; background-position: center 80%; left: 30px; }
.slide-2{background-size: 100%; background-position: top 80%;}
/*.slide-3{background-size: 100%; background-position: center 50%;}*/
/* slide 3 — JCFM portrait: face was cropped out entirely;
   shift the visible window up so the face is in frame */


.hero-overlay{
  position:absolute;inset:0;
  z-index:2;
  background:linear-gradient(120deg, rgba(4,6,14,0.74) 0%, rgba(4,6,14,0.24) 48%, rgba(4,6,14,0.68) 100%), rgba(0,0,0,0.56);
}

.eyebrow{font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px;}

/* content sits above the photo, tilts in 3D on mouse move */
.hero-content{position:relative;z-index:3;padding:96px 32px 100px;transform-style:preserve-3d;will-change:transform;}

/* centre the hero content horizontally within the hero section */
.hero .hero-content{
  margin:0 auto;
  max-width:860px;
  width:min(100%,860px);
}

.hero-title{font-family:'Space Grotesk','Poppins',sans-serif;font-weight:900;line-height:0.92;letter-spacing:-0.03em;}
.line-wrap{display:block;overflow:hidden;}
.hero-title .line{display:block;font-size:clamp(54px,6.8vw,100px);line-height:0.92;letter-spacing:-0.03em;color:rgba(255,255,255,0.98);text-shadow:0 22px 48px rgba(0,0,0,0.28);}
.hero-title .line.accent{
  color:var(--gold);
  font-size:clamp(26px,3.6vw,40px);
  font-weight:900;
  letter-spacing:0.02em;
  text-transform:none;
  margin-top:14px;
}

/* KEYBOARD — solid fill that fades out toward the bottom of the letters
   (kept gentler than earlier passes — most of the letter stays solid,
   only the lower portion fades) */
.hero-title-fade{
  display:inline-block;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 46%, rgba(0,0,0,0) 92%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 46%, rgba(0,0,0,0) 92%);
}
/* LEARN | CREATE | GROW — reads as a gold-to-white gradient rather than
   a fade into darkness: the fill itself shifts from brand gold at the
   top to white at the bottom, and the mask only trims the very edge
   (stopping at partial opacity, never fully transparent) so the white
   is always what shows through, not black. */
.hero-title-fade-sub{
  display:inline-block;
  background-image:linear-gradient(180deg, var(--gold) 0%, #fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 58%, rgba(0,0,0,0.55) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 58%, rgba(0,0,0,0.55) 100%);
}
/* ESSENTIALS — outline only, no white fill, with a small gold spark
   (plus a fainter trailing spark behind it) that weaves left to right
   along the letters on a loop, like a light tracing the outline */
.hero-title-stroke{
  display:inline-block;
  position:relative;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,0.98);
  text-stroke:1.5px rgba(255,255,255,0.98);
  text-shadow:none;
}
.hero-title-stroke::before,
.hero-title-stroke::after{
  content:none;
}

.hero-sub{font-size:16px;color:rgba(196,196,210,0.72);max-width:600px;margin:24px auto 22px;line-height:1.9;letter-spacing:0.015em;}

.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px;margin-bottom:1rem;}

.btn-pill--light{background:var(--ivory);}
.btn-pill--light span{background:#141414;color:var(--ivory);}
.btn-pill--light:hover{background:#fff;}

.hero-link{display:inline-flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ivory);}
.hero-link .underline{display:block;width:56px;height:3px;border-radius:999px;background:var(--gold);transition:width .22s ease, background .22s ease;}
.hero-link:hover{color:var(--gold);}
.hero-link:hover .underline{width:100%;background:linear-gradient(120deg, #F59E0B 0%, #EC4899 100%);}

.hero-features{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8rem;}
.hero-feature{display:flex;align-items:center;gap:12px;}
.hero-feature .ico{width:22px;height:22px;flex-shrink:0;color:var(--gold);}
.hero-feature span{font-size:14px;font-weight:600;line-height:1.4;color:var(--ivory);}
@media (max-width:520px){.hero-features{gap:12px;}}


/* background photo dots */
.hero-dots{position:absolute;right:32px;bottom:28px;z-index:5;display:flex;gap:6px;}
.hero-dots button{width:20px;height:3px;border-radius:2px;background:rgba(245,240,230,0.3);border:none;padding:0;}
.hero-dots button.on{background:var(--gradient-brand);width:32px;}

/* --- fade in while rising up: starts invisible, drifts upward into place --- */
.reveal{
  opacity:0;
  transform:translateY(38px);
  animation:heroReveal .9s cubic-bezier(.22,.68,.32,1) forwards;
  animation-delay:calc(var(--d, 0) * 0.12s + 0.15s);
}
@keyframes heroReveal{
  to{opacity:1;transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  .reveal{animation:none;opacity:1;transform:none;}
  .hero-bg-slide{transition:none;}
}

@media (max-width:900px){
  .hero{min-height:82vh;}
  .hero-content{padding:100px 20px 70px;}
  .hero-dots{right:20px;bottom:14px;}
}

/* stats bar */
.stats-bar{background:rgba(20,18,14,0.55);backdrop-filter:blur(6px);border:1px solid rgba(245,240,230,0.08);border-radius:10px;padding:22px 12px;margin-top:24px;position:relative;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 8px 20px rgba(0,0,0,0.3);} 
.stat{display:flex;align-items:center;gap:14px;padding:0 20px;border-right:1px solid rgba(245,240,230,0.08);}
.stat:last-child{border-right:none;}
.stat .ico{width:32px;height:32px;flex-shrink:0;color:var(--gold);opacity:0.85;}
.stat .num{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:var(--ivory);}
.stat .lbl{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:0.05em;}
@media (max-width:820px){.stats-bar{grid-template-columns:repeat(2,1fr);row-gap:20px;} .stat{border-right:none;}}

/* =========================================================
   SECTION SHELL
   ========================================================= */
section{padding:76px 0;}
.section-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;}
.section-top h2{font-family:'Space Grotesk','Poppins',sans-serif;font-size:clamp(32px,4.5vw,48px);font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;}
.view-all{color:var(--gold);font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px;}

/* --- big titles slide in from the left, supporting content from the right --- */
.reveal-left{opacity:0;transform:translateX(-70px);transition:opacity .75s ease, transform .75s cubic-bezier(.22,.68,.32,1);}
section.in-view .reveal-left{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(70px);transition:opacity .75s ease, transform .75s cubic-bezier(.22,.68,.32,1);}
section.in-view .reveal-right{opacity:1;transform:translateX(0);}
@media (prefers-reduced-motion: reduce){
  .reveal-left, .reveal-right{transition:none; opacity:1; transform:none;}
}

/* page headers (no scroll-observer, they're visible on load) get the same
   left-in treatment for the big title */
.page-header h1{animation:titleSlideLeft .8s cubic-bezier(.22,.68,.32,1) forwards; opacity:0; transform:translateX(-70px);}
@keyframes titleSlideLeft{ to{opacity:1; transform:translateX(0);} }
.page-header-sub{animation:subFadeUp .8s cubic-bezier(.22,.68,.32,1) .22s forwards; opacity:0; transform:translateY(22px);}
@keyframes subFadeUp{ to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){
  .page-header h1{animation:none; opacity:1; transform:none;}
  .page-header-sub{animation:none; opacity:1; transform:none;}
}

/* course cards */
.courses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1200px;}
.course-card{position:relative;z-index:0;background:linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, rgba(74,124,255,0.05) 0%, rgba(74,124,255,0.85) 16%, rgba(168,85,247,0.85) 34%, rgba(255,79,216,0.85) 50%, rgba(168,85,247,0.85) 66%, rgba(74,124,255,0.85) 84%, rgba(74,124,255,0.05) 100%) border-box;border:3px solid transparent;border-radius:12px;overflow:hidden;transition:background-position .3s ease, box-shadow .2s ease;
  background-origin:border-box;
  background-clip:padding-box, border-box;
  background-size: 300% 100%, 300% 100%;
  animation: snakeMove 6s linear infinite;
}
.course-card:hover{box-shadow:0 24px 50px rgba(29,84,109,0.28);}
.course-card .thumb{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#000;}
.course-card .thumb img{width:100%;height:100%;object-fit:cover;opacity:0.92;}
.course-card .thumb .card-level{position:absolute;top:14px;left:14px;color:#fff;font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;z-index:2;}
.course-card .body{padding:20px 22px 22px;position:relative;z-index:1;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));}
.course-card .tagrow{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:6px;}
.course-card h3{font-size:19px;font-weight:700;margin-bottom:8px;color:#fff;}
.course-card p{font-size:13.5px;color:var(--slate);line-height:1.55;margin-bottom:10px;min-height:42px;}
/* card-learn-more: was a plain slate-gray underlined text link (same
   look as any default inline link on the site). Now that the course
   description paragraph is gone, this is the only text sitting between
   the title and the price/buy row, so it gets its own distinct
   treatment — accent-colored, no underline, small sliding arrow on
   hover — so it reads as a deliberate call-to-action rather than
   leftover link styling. */
.card-learn-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--gold);
  text-decoration:none;
  margin:2px 0 18px;
  padding-bottom:4px;
  border-bottom:1.5px solid rgba(212,175,90,0.35);
  transition:gap .2s ease, color .2s ease, border-color .2s ease;
}
.card-learn-more::after{
  content:"\2192";
  font-size:15px;
  line-height:1;
  transition:transform .2s ease;
}
.card-learn-more:hover{color:var(--gold-soft);gap:10px;border-color:var(--gold-soft);}
.card-learn-more:hover::after{transform:translateX(3px);}

/* the short course-overview paragraph that used to sit between the title
   and "Learn more" is being dropped from the card layout entirely — card
   body goes straight from title to the "Learn more" link now. Scoped to
   .body so it only strips the description copy, not paragraphs elsewhere
   (e.g. inside course-detail-text on the single course page). */
.tilt-card.course-card .body > p{display:none;}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line);}
.card-actions{flex-shrink:0;}

@keyframes snakeMove{
  0%{background-position:0% 0%,0% 0%;}
  100%{background-position:100% 0%,100% 0%;}
}
@keyframes snakeGlow{
  0%{box-shadow:0 0 0 2px rgba(255,0,0,0.35), inset 0 0 8px rgba(255,0,0,0.18);}
  100%{box-shadow:0 0 0 4px rgba(255,0,0,0.55), inset 0 0 16px rgba(255,0,0,0.32);}
}
.price{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;color:var(--ivory);display:flex;align-items:baseline;gap:8px;}
.price .level{display:block;font-size:10.5px;font-weight:500;color:var(--slate);text-transform:uppercase;letter-spacing:0.05em;}
.price del{font-weight:400;font-size:13px;color:var(--slate);text-decoration:line-through;order:2;}
.price ins{font-weight:800;font-size:19px;color:var(--ivory);text-decoration:none;order:1;}
.btn-mini{background:var(--gradient-brand);color:#0c0c12;padding:7px 16px;border-radius:999px;font-weight:700;font-size:11.5px;letter-spacing:0.02em;transition:filter .2s ease, transform .2s ease;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex-shrink:0;}
.btn-mini:hover{filter:brightness(1.1);transform:translateY(-1px);}
@media (max-width:900px){.courses-grid{grid-template-columns:1fr;}}

/* about */
.about-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center;}
.about-photo{position:relative;overflow:hidden;max-width:460px;margin:0 auto;}
.about-photo img{border-radius:15px;width:100%;max-width:100%;height:auto;object-fit:contain;border:0;position:relative;z-index:1;}
.about-photo-zoom{opacity:0;animation:1.4s cubic-bezier(.22,.68,.32,1) forwards aboutPhotoReveal;}
@keyframes aboutPhotoReveal{0%{opacity:0;transform:scale(1.55) translate(-50px);}45%{opacity:1;transform:scale(.9) translate(35px);}100%{opacity:1;transform:scale(1) translate(0);}}
.about-text .eyebrow{margin-bottom:6px;}
.about-text h2{font-family:'Space Grotesk','Poppins',sans-serif;font-size:clamp(32px,4.2vw,46px);font-weight:800;line-height:1.1;margin-bottom:18px;letter-spacing:-0.01em;}
.about-text p{font-size:14.5px;color:var(--slate);line-height:1.75;margin-bottom:16px;}
.about-text .btn-gold{display:inline-block;margin-top:6px;padding:13px 26px;}
.about-features{margin-top:36px;display:flex;flex-direction:column;gap:24px;}
.feature{display:flex;gap:16px;align-items:flex-start;}
.feature .ico{width:42px;height:42px;flex-shrink:0;color:var(--gold);}
.feature h4{font-size:15.5px;font-weight:700;margin-bottom:4px;}
.feature p{font-size:13px;color:var(--slate);margin:0;line-height:1.5;}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;}.about-photo{max-width:400px;margin:0 auto;}}

.btn-gold{background:var(--gradient-brand);color:#0c0c12;padding:10px 20px;border-radius:2px;font-size:13px;font-weight:700;letter-spacing:0.02em;display:inline-block;transition:filter .2s ease, transform .2s ease;}
.btn-gold:hover{filter:brightness(1.1);transform:translateY(-1px);}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-card{position:relative;overflow:hidden;background:rgba(18,18,28,0.72);border:1px solid rgba(255,255,255,0.18);backdrop-filter:blur(16px);border-radius:16px;padding:26px;box-shadow:0 22px 70px rgba(0,0,0,0.32);}
.testi-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 42%, rgba(255,255,255,0));pointer-events:none;transform:translateY(-20%) rotate(-12deg);opacity:0.65;}
.testi-card:hover{border-color:rgba(255,255,255,0.28);box-shadow:0 30px 90px rgba(0,0,0,0.35);}
.testi-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.testi-badge{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#141414;font-family:'Poppins',sans-serif;font-weight:800;font-size:15px;
}
.testi-head .name{font-weight:700;font-size:14.5px;}
.testi-head .role{font-size:11.5px;color:var(--slate);}
.testi-card p.quote{font-size:13.5px;color:var(--slate);line-height:1.6;margin-bottom:18px;}
.testi-foot{display:flex;justify-content:flex-start;align-items:center;}
.testi-card .stars{color:#fff;font-size:22px;letter-spacing:3px;}
.testi-card .stars .rating-num{margin-left:8px;color:var(--slate);font-size:13px;font-weight:600;letter-spacing:0;vertical-align:middle;}
.note{font-size:12px;color:var(--slate);margin-top:18px;font-style:italic;}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr;}}

/* CTA */
.cta{background:var(--ink-soft);border-radius:14px;padding:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border:1px solid var(--line);}
.cta-text{padding:52px;display:flex;flex-direction:column;justify-content:center;}
.cta-text h2{font-family:'Space Grotesk','Poppins',sans-serif;font-size:clamp(30px,3.8vw,44px);font-weight:800;margin-bottom:22px;line-height:1.12;letter-spacing:-0.01em;}
.cta-photo{position:relative;min-height:260px;}
.cta-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
@media (max-width:820px){.cta{grid-template-columns:1fr;}.cta-text{padding:36px;}}

/* footer */
footer{background:#0f0f0f;padding:60px 0 26px;border-top:1px solid var(--line);position:relative;z-index:2;}
html body footer,
html body.sjp-course-catalog footer,
html body.sjp-react-page footer{background:#0f0f0f!important;color:var(--ivory)!important;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px;}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.foot-brand img{height:32px;}
.foot-col h4{font-size:15px;font-weight:700;margin-bottom:16px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.foot-col a{font-size:13.5px;color:var(--slate);}
.foot-col a:hover{color:var(--gold);}
.newsletter-row{display:flex;gap:8px;margin:14px 0 16px;}
.newsletter-row input{flex:1;background:#1c1c1c;border:1px solid var(--line);border-radius:3px;padding:10px 12px;color:var(--ivory);font-size:13px;}
.newsletter-row button{background:var(--gradient-brand);border:none;padding:0 18px;border-radius:3px;font-weight:700;font-size:12.5px;color:#0c0c12;transition:filter .2s ease;}
.newsletter-row button:hover{filter:brightness(1.1);}
.socials{display:flex;gap:10px;}
.socials a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.socials a:hover{border-color:var(--gold);color:var(--gold);}
.copyright{text-align:center;font-size:12.5px;color:var(--slate);padding-top:22px;border-top:1px solid var(--line);}

.dev-credit{
  text-align:center;
  font-size:11.5px;
  color:var(--slate);
  padding-top:10px;
  letter-spacing:0.02em;
}
.dev-credit-name{
  font-weight:800;
  background:linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 25%, #EC4899 50%, var(--gold) 75%, var(--gold-deep) 100%);
  background-size:250% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:devCreditShine 6s linear infinite;
  text-decoration:none;
  cursor:pointer;
  transition:filter .15s ease;
}
.dev-credit-name:hover{filter:brightness(1.3);}
@keyframes devCreditShine{
  0%{background-position:0% 50%;}
  100%{background-position:250% 50%;}
}
@media (prefers-reduced-motion: reduce){
  .dev-credit-name{animation:none;}
}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}

/* ===========================================================
   SCROLL-TRIGGERED REVEALS
   Applied via useScrollReveal() — the parent section gets
   .in-view the moment it enters the viewport (once), which
   releases every .reveal-up child inside it. Stagger classes
   delay each child so groups (cards, features) cascade in
   rather than popping together.
   =========================================================== */
.reveal-up{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.28,1);
}
section.in-view .reveal-up{opacity:1; transform:translateY(0);}

/* course cards get an extra 3D rotate settled-into-place on top of the
   plain fade-up, so they feel like they're tilting down out of the air */
.course-card.reveal-up{
  transform:translateY(36px) rotateX(24deg) rotateY(-12deg) scale(0.92);
}
section.in-view .course-card.reveal-up{
  transform:translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
}

.reveal-stagger-1{transition-delay:.05s;}
.reveal-stagger-2{transition-delay:.15s;}
.reveal-stagger-3{transition-delay:.25s;}
.reveal-stagger-4{transition-delay:.35s;}
.reveal-stagger-5{transition-delay:.45s;}
.reveal-stagger-6{transition-delay:.55s;}
.reveal-stagger-7{transition-delay:.65s;}

@media (prefers-reduced-motion: reduce){
  .reveal-up{transition:none; opacity:1; transform:none;}
}

/* ===========================================================
   3D TILT CARDS (course cards)
   Transform is driven from TiltCard.jsx on mousemove — this CSS
   only supplies the reset transition for mouse-leave and the
   glare sweep overlay.
   =========================================================== */
.tilt-card{
  position:relative;
  transition:transform .35s cubic-bezier(.22,.68,.32,1);
  transform-style:preserve-3d;
  will-change:transform;
}
.tilt-card-glare{
  position:absolute; inset:0;
  z-index:5;
  pointer-events:none;
  border-radius:inherit;
  transition:background .15s ease-out;
}

/* ===========================================================
   TESTIMONIALS MARQUEE
   Cards are rendered twice back-to-back in Testimonials.jsx so
   translateX(-50%) loops seamlessly. Pauses on hover so people
   can actually read one before it drifts off.
   =========================================================== */
.testi-marquee{
  overflow:hidden;
  width:100%;
  margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testi-track{
  display:flex;
  gap:24px;
  width:max-content;
  padding:4px 32px;
  animation:testiMarquee 34s linear infinite;
}
.testi-marquee:hover .testi-track{animation-play-state:paused;}
.testi-track .testi-card{width:340px; flex:0 0 auto;}

@keyframes testiMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media (max-width:900px){
  .testi-track .testi-card{width:280px;}
}
@media (prefers-reduced-motion: reduce){
  .testi-track{animation:none;}
}

/* ===========================================================
   INTERIOR PAGES (Course List, Course Detail, About, Contact,
   My Account) — shared building blocks. These pages have no
   hero photo behind the fixed nav, so .page-header supplies its
   own dark banner and enough top padding to clear it.
   =========================================================== */
.page-header{
  padding:150px 0 60px;
  background:linear-gradient(180deg, rgba(29,84,109,0.16), var(--ink));
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.page-header h1{font-size:clamp(32px,5vw,52px);font-weight:800;margin-top:10px;color:var(--ivory);}
.page-header-sub{color:var(--slate);max-width:520px;margin-top:14px;line-height:1.6;font-size:15px;}
.page-header--compact{padding:130px 0 32px;}

.back-link{display:inline-block;color:var(--gold);font-size:13px;font-weight:600;margin-bottom:16px;}
.back-link:hover{text-decoration:underline;}

/* gallery cards — unused now that Production uses .production-past-slider
   at the top of the page (see below), kept in case it's wanted again */
.production-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:26px;
}
@media (max-width:900px){.production-gallery-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.production-gallery-grid{grid-template-columns:1fr;}}
.production-gallery-card{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:16px;
  overflow:hidden;
  background:var(--card);
  cursor:zoom-in;
  aspect-ratio:4/3;
  transition:transform .3s cubic-bezier(.22,.68,.32,1), box-shadow .3s ease, border-color .3s ease;
}
.production-gallery-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.68,.32,1);
}
.production-gallery-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}
.production-gallery-card:hover img{transform:scale(1.06);}
.production-gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  font-size:13px; font-weight:600; color:var(--ivory);
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  text-align:left;
}

/* click-to-zoom lightbox — click a card to open, click again (or the
   backdrop) to zoom back out */
.production-gallery-lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:5vh 5vw;
  background:rgba(0,0,0,0.86);
  cursor:zoom-out;
  animation:lightboxFadeIn .2s ease;
}
.production-gallery-lightbox-img{
  max-width:100%; max-height:100%;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  cursor:zoom-out;
  animation:lightboxZoomIn .25s cubic-bezier(.22,.68,.32,1);
}
@keyframes lightboxFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes lightboxZoomIn{from{transform:scale(0.92);opacity:0;}to{transform:scale(1);opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .production-gallery-lightbox, .production-gallery-lightbox-img{animation:none;}
  .production-gallery-card, .production-gallery-card img{transition:none;}
}

/* Optional glow variant — used on the Gallery header for a livelier,
   more "animated" first impression than a flat panel. */
.page-header--glow::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(74,124,255,0.22), transparent 60%),
    radial-gradient(600px 320px at 88% 20%, rgba(255,79,216,0.18), transparent 60%);
  animation:ambientDrift 18s ease-in-out infinite;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){.page-header--glow::before{animation:none;}}

/* content that doesn't use .page-header still needs to clear the fixed nav.
   Extra clearance here (vs. the header's own ~68px height) so things like
   the MyAccount piano-key animation never sit right at the header's edge
   and get clipped the moment the page scrolls. */
.page-content-offset{padding-top:130px;}

/* ---------- Course Detail ---------- */
.course-detail-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;padding:56px 0 80px;align-items:start;}
.course-detail-main h2{font-size:22px;margin:32px 0 12px;color:var(--ivory);}
.course-detail-main h2:first-child{margin-top:0;}
.course-detail-text{color:var(--slate);line-height:1.7;font-size:15px;}
.course-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line);}
.course-video iframe{width:100%;height:100%;border:0;}
.course-video-placeholder{position:relative;width:100%;height:100%;display:block;}
.course-video-placeholder img{width:100%;height:100%;object-fit:cover;opacity:0.35;}
.course-video-placeholder-note{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;color:var(--ivory);font-size:13.5px;line-height:1.6;
  background:rgba(20,20,20,0.55);
}
.course-video-placeholder-note code{background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:12px;}

/* clickable "watch on youtube" variant — real link out to the channel */
.course-video-placeholder--link img{opacity:0.55;transition:opacity .2s ease, transform .3s ease;}
.course-video-placeholder--link:hover img{opacity:0.7;transform:scale(1.03);}
.course-video-placeholder--link .course-video-placeholder-note{
  background:linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(15,15,15,0.85) 100%);
  align-items:flex-end;padding-bottom:22px;font-weight:700;font-size:14px;letter-spacing:0.03em;text-transform:uppercase;
}
.course-video-placeholder--link .play-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);
  width:64px;height:64px;border-radius:50%;
  background:var(--gradient-brand);color:#0c0c12;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  transition:transform .2s ease, filter .2s ease;
}
.course-video-placeholder--link .play-badge svg{width:26px;height:26px;margin-left:2px;}
.course-video-placeholder--link:hover .play-badge{transform:translate(-50%,-56%) scale(1.08);filter:brightness(1.1);}
.curriculum-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.curriculum-list li{
  padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:8px;
  font-size:14px;color:var(--ivory);position:relative;padding-left:38px;
}
.curriculum-list li::before{
  content:'♪';position:absolute;left:14px;color:var(--gold);font-weight:700;
}
.course-detail-sidebar{position:sticky;top:100px;}
.course-sidebar-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;}
.course-sidebar-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin-bottom:16px;}
.price--lg{font-size:28px;margin-bottom:16px;}
.price--lg .level{font-size:12px;}
.course-sidebar-note{font-size:11.5px;color:var(--slate);line-height:1.5;margin-top:12px;}
@media (max-width:860px){
  .course-detail-grid{grid-template-columns:1fr;}
  .course-detail-sidebar{position:static;}
}

/* ---------- Course Detail: header topline (stars, byline, wishlist/share) ---------- */
.course-detail-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
.stars{color:var(--gold);letter-spacing:3px;font-size:16px;}
.stars--empty{color:var(--line);}
.course-byline{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--slate);font-size:13.5px;flex-wrap:wrap;}
.course-byline-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.course-byline strong{color:var(--ivory);}
.course-topline-actions{display:flex;gap:10px;flex-shrink:0;}
.icon-text-btn{
  display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);
  color:var(--slate);padding:9px 14px;border-radius:8px;font-size:13px;cursor:pointer;transition:.2s ease;
}
.icon-text-btn svg{width:16px;height:16px;}
.icon-text-btn:hover{border-color:var(--gold);color:var(--ivory);}
.icon-text-btn.is-active{color:var(--gold);border-color:var(--gold);}

/* ---------- Course Detail: Course Info / Reviews tabs ---------- */
.course-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin:8px 0 28px;}
.course-tabs button{
  background:none;border:none;padding:14px 2px;color:var(--slate);font-size:14.5px;font-weight:700;
  cursor:pointer;position:relative;top:1px;
}
.course-tabs button.active{color:var(--ivory);border-bottom:2px solid var(--gold);}

/* ---------- Course Detail: Course Content accordion ---------- */
.course-content-accordion{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);}
.course-content-header{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,0.03);border:none;padding:16px 18px;
  color:var(--ivory);font-weight:700;font-size:14.5px;cursor:pointer;text-align:left;
}
.course-content-header .chevron{transition:transform .2s ease;color:var(--slate);}
.course-content-header .chevron.open{transform:rotate(180deg);}
.lesson-list{list-style:none;margin:0;padding:0;}
.lesson-list li{
  display:flex;align-items:center;gap:12px;padding:13px 18px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ivory);
}
.lesson-play{width:18px;height:18px;color:var(--slate);flex-shrink:0;}
.lesson-play svg{width:100%;height:100%;}
.lesson-title{flex:1;}
.lesson-duration{color:var(--slate);font-size:12.5px;}
.lesson-lock{width:15px;height:15px;color:var(--slate);flex-shrink:0;}
.lesson-lock svg{width:100%;height:100%;}

/* ---------- Course Detail: Reviews (empty state) ---------- */
.reviews-panel{padding-top:4px;}
.reviews-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:50px 20px 60px;color:var(--slate);
}
.reviews-empty-illustration{color:var(--slate);margin-bottom:18px;}
.reviews-empty p{font-size:14.5px;font-weight:600;color:var(--slate);}

/* ---------- Course Detail: sidebar extras ---------- */
.sidebar-meta-list{
  display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);font-size:13px;color:var(--slate);
}
.sidebar-meta-list div{display:flex;align-items:center;gap:8px;}
.sidebar-meta-icon{font-size:14px;}
.course-sidebar-extra{margin-top:20px;}
.sidebar-section-label{font-weight:800;font-size:14px;color:var(--ivory);margin:20px 0 10px;}
.sidebar-section-label:first-child{margin-top:0;}
.course-byline--card{margin:0 0 4px;}
.sidebar-bullet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.sidebar-bullet-list li{font-size:13px;color:var(--slate);line-height:1.5;padding-left:16px;position:relative;}
.sidebar-bullet-list li::before{content:'•';position:absolute;left:0;color:var(--gold);}
.sidebar-tag-list{display:flex;flex-wrap:wrap;gap:8px;}
.sidebar-tag{
  border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:12px;color:var(--ivory);
}

/* ---------- Modals (share / login) ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.6);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .18s ease;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.modal-card{
  background:#fff;color:#141414;border-radius:14px;padding:32px 30px;
  width:100%;max-width:460px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,0.4);
}
.modal-card h3{font-size:22px;font-weight:800;margin-bottom:20px;}
.modal-close{
  position:absolute;top:18px;right:18px;background:none;border:none;font-size:22px;
  line-height:1;cursor:pointer;color:#666;
}
.modal-field-label{font-size:13px;color:#555;margin-bottom:8px;}
.share-link-row{display:flex;gap:8px;align-items:center;}
.share-link-row input{
  flex:1;border:1px solid #ddd;border-radius:8px;padding:11px 14px;font-size:13px;color:#333;background:#fafafa;
}
.share-link-row button{
  border:1px solid #ddd;background:#fff;border-radius:8px;width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;font-size:15px;
}
.share-link-row button svg{width:17px;height:17px;}
.share-social-row{display:flex;gap:12px;}
.share-social-btn{
  width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;
}
.share-social-btn svg{width:20px;height:20px;}
.share-social-btn--fb{background:#1877F2;}
.share-social-btn--x{background:#000;}
.share-social-btn--li{background:#0A66C2;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;padding:56px 0 80px;align-items:start;}
.contact-form{display:flex;flex-direction:column;gap:18px;}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--slate);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;}
.contact-form input,.contact-form textarea{
  background:#1c1c1c;border:1px solid var(--line);border-radius:6px;padding:12px 14px;
  color:var(--ivory);font-size:14px;font-family:inherit;resize:vertical;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold);}
.contact-form button{width:fit-content;padding:13px 28px;font-size:13.5px;}
.form-note{font-size:11.5px;color:var(--slate);line-height:1.6;max-width:420px;}
.contact-info h3{font-size:18px;margin-bottom:12px;color:var(--ivory);}
.contact-info p{color:var(--slate);font-size:14px;line-height:1.6;margin-bottom:18px;}
.contact-info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--ivory);}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px;}}

/* ---------- My Account page ---------- */
.account-card{
  max-width:420px;margin:0 auto;padding:56px 0 80px;
}
.account-tabs{display:flex;gap:8px;margin-bottom:24px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px;}
.account-tabs button{
  flex:1;padding:10px;background:transparent;border:none;border-radius:6px;
  color:var(--slate);font-weight:700;font-size:13px;
}
.account-tabs button.active{background:var(--gradient-brand);color:#0c0c12;}
.account-form{display:flex;flex-direction:column;gap:16px;}
.account-form label{display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--slate);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;}
.account-form input{
  background:#1c1c1c;border:1px solid var(--line);border-radius:6px;padding:12px 14px;
  color:var(--ivory);font-size:14px;font-family:inherit;
}
.account-form input:focus{outline:none;border-color:var(--gold);}

/* =========================================================
   White logo over the transparent hero navbar
   ========================================================= */
header.hero-nav:not(.is-scrolled) .brand img{
  filter:brightness(0) invert(1);
}

/* SEARCH OVERLAY */
.search-overlay{
  position:fixed;inset:0;z-index:700;
  background:rgba(8,9,14,0.92);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.search-panel{
  width:min(760px,100%);background:rgba(12,12,18,0.98);border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;padding:34px 34px 28px;box-shadow:0 24px 70px rgba(0,0,0,0.5);
}
.search-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px;}
.search-panel-head h2{font-size:28px;margin:0;color:#fff;}
.search-panel-head .eyebrow{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;font-weight:700;}
.search-close{
  background:none;border:1px solid rgba(255,255,255,0.14);color:var(--ivory);
  width:42px;height:42px;border-radius:16px;font-size:24px;line-height:1;cursor:pointer;
}
.search-close:hover{border-color:var(--gold);color:var(--gold);}
.search-field input{
  width:100%;border:1px solid rgba(255,255,255,0.14);border-radius:16px;
  padding:18px 20px;font-size:16px;background:rgba(255,255,255,0.06);color:var(--ivory);
}
.search-field input:focus{outline:none;border-color:var(--gold);}
.search-summary{color:var(--slate);font-size:14px;margin-top:16px;margin-bottom:22px;}
.search-results{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.search-results li{
  border:1px solid rgba(255,255,255,0.08);border-radius:16px;background:rgba(255,255,255,0.02);
}
.search-results a{
  display:flex;justify-content:space-between;align-items:center;padding:16px 18px;
  color:#fff;text-decoration:none;font-size:15px;font-weight:600;
}
.search-results a small{color:var(--slate);font-size:13px;font-weight:500;}
.search-no-results{color:var(--slate);padding:18px 0;text-align:center;font-size:15px;}

@media (max-width:700px){
  .search-panel{padding:24px 20px 20px;border-radius:18px;}
  .search-panel-head{flex-direction:column;align-items:flex-start;}
  .search-panel-head h2{font-size:24px;}
}

/* =========================================================
   Nav dropdowns (Support / Contact)
   ========================================================= */
.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown-toggle{
  background:none;border:none;font:inherit;color:inherit;
  display:flex;align-items:center;gap:5px;padding:0;
  text-transform:uppercase;letter-spacing:0.04em;font-weight:700;font-size:13px;
}
.nav-dropdown-toggle:hover{color:var(--gold);}
.nav-dropdown-toggle .caret{
  width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;
}
.nav-dropdown-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:220px;padding-top:10px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease;
  z-index:50;
}
.nav-dropdown-menu.open{opacity:1;visibility:visible;pointer-events:auto;}
.nav-dropdown-menu-inner{
  background:rgba(10,10,10,0.97);border:1px solid var(--line);border-radius:8px;
  padding:8px;display:flex;flex-direction:column;gap:2px;
}
.nav-dropdown-menu-inner a{
  padding:9px 12px;border-radius:6px;font-size:12.5px;text-transform:none;letter-spacing:normal;
  font-weight:600;color:var(--ivory);white-space:nowrap;
}
.nav-dropdown-menu-inner a:hover{background:rgba(168,85,247,0.14);color:var(--gold);}
@media (max-width:900px){
  .nav-dropdown-menu{position:static;padding-top:0;}
  .nav-dropdown-menu-inner{background:transparent;border:none;padding:0 0 0 14px;}
  .nav-dropdown-menu.open{display:block;}
  .nav-dropdown-menu:not(.open){display:none;}
}

/* =========================================================
   Cart icon in navbar
   ========================================================= */
.cart-icon-link{position:relative;display:flex;align-items:center;color:inherit;}
.cart-icon-link svg{width:21px;height:21px;}
.cart-icon-link:hover{color:var(--gold);}
.cart-count{
  position:absolute;top:-8px;right:-9px;background:var(--gradient-brand);color:#0c0c12;
  font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}

/* =========================================================
   Course List — filters + sort toolbar
   ========================================================= */
.course-list-layout{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start;padding-bottom:40px;}
.course-filters{
  position:sticky;top:100px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:16px;margin-left:-24px;
}

/* Wider, evenly-aligned cards on the Courses page */
.course-list-section .course-card{display:flex;flex-direction:column;height:100%;}
.course-list-section .course-card .body{display:flex;flex-direction:column;flex:1;}
.course-list-section .course-card p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.course-list-section .course-card .card-foot{margin-top:auto;}
@media (max-width:860px){
  .course-filters{margin-left:0;}
}
.course-filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.course-filters-head h4{font-size:13px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ivory);margin:0;}
.clear-filters{background:none;border:none;color:var(--gold);font-size:11px;cursor:pointer;padding:0;}
.filter-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.filter-checklist label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--slate);cursor:pointer;}
.filter-checklist input{accent-color:var(--gold);width:15px;height:15px;}
.course-list-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.results-count{font-size:13px;color:var(--slate);}
.sort-select{
  background:#1c1c1c;border:1px solid var(--line);border-radius:6px;color:var(--ivory);
  padding:9px 12px;font-size:13px;font-family:inherit;
}
.no-results{color:var(--slate);grid-column:1/-1;padding:40px 0;text-align:center;}
@media (max-width:860px){
  .course-list-layout{grid-template-columns:1fr;}
  .course-filters{position:static;}
}

/* =========================================================
   Cart page
   ========================================================= */
.cart-wrap{padding:24px 0 80px;}
.cart-empty{text-align:center;padding:60px 0;display:flex;flex-direction:column;gap:20px;align-items:center;color:var(--slate);}
.cart-table{width:100%;border-collapse:collapse;margin-bottom:32px;}
.cart-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--slate);
  padding:0 12px 12px;border-bottom:1px solid var(--line);
}
.cart-table td{padding:16px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
.cart-thumb-cell img{width:64px;height:44px;object-fit:cover;border-radius:6px;}
.cart-price-cell{white-space:nowrap;}
.cart-remove{background:none;border:1px solid var(--line);color:var(--slate);border-radius:5px;padding:6px 12px;font-size:12px;cursor:pointer;}
.cart-remove:hover{border-color:#c0504d;color:#c0504d;}
.cart-totals{max-width:320px;margin-left:auto;display:flex;flex-direction:column;gap:14px;}
.cart-totals-row{display:flex;justify-content:space-between;font-size:15px;color:var(--ivory);padding-bottom:14px;border-bottom:1px solid var(--line);}

/* =========================================================
   Policy / legal pages
   ========================================================= */
.policy-wrap{padding:8px 0 80px;max-width:820px;}
.policy-content h2{font-size:19px;margin:32px 0 12px;color:var(--ivory);}
.policy-content h2:first-child{margin-top:0;}
.policy-content p{color:var(--slate);line-height:1.75;font-size:14.5px;margin:0 0 14px;}
.policy-content ul{margin:0 0 14px;padding-left:20px;color:var(--slate);line-height:1.75;font-size:14.5px;}
.policy-content li{margin-bottom:6px;}
.policy-content strong{color:var(--ivory);}
.policy-content a{color:var(--gold);}

/* =========================================================
   ChatBot — page assistant widget
   ========================================================= */
.cb-root{position:fixed;right:20px;bottom:20px;z-index:900;font-family:'Inter',sans-serif;}

.cb-fab{
  width:60px;height:60px;border-radius:50%;
  padding:0;border:2px solid var(--gold);
  overflow:hidden;background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cb-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 28px rgba(0,0,0,.55);}
.cb-fab img{width:100%;height:100%;object-fit:cover;display:block;}

.cb-panel{
  position:absolute;right:0;bottom:74px;
  width:340px;max-width:calc(100vw - 32px);
  height:460px;max-height:70vh;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
}

.cb-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 14px;
  background:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.cb-header-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1.5px solid var(--gold);}
.cb-header-title{font-family:'Poppins',sans-serif;font-size:14px;color:var(--ivory);font-weight:600;}
.cb-header-sub{font-size:11px;color:var(--slate);}
.cb-close{
  margin-left:auto;background:none;border:none;color:var(--slate);
  font-size:14px;line-height:1;padding:6px;border-radius:6px;
}
.cb-close:hover{color:var(--ivory);background:rgba(255,255,255,.06);}

.cb-messages{
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:12px;
}

.cb-msg{display:flex;gap:8px;align-items:flex-start;}
.cb-msg--user{flex-direction:row-reverse;}
.cb-msg-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:2px;}

.cb-bubble{
  max-width:82%;
  background:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 12px;
}
.cb-msg--user .cb-bubble{
  background:var(--gradient-brand);
  border-color:transparent;
}
.cb-msg--user .cb-bubble p{color:var(--ink);}

.cb-bubble p{margin:0 0 6px;font-size:13px;line-height:1.55;color:var(--ivory);white-space:pre-wrap;}
.cb-bubble p:last-child{margin-bottom:0;}

.cb-inline-link{
  display:inline-block;margin-top:4px;font-size:12.5px;
  color:var(--gold);border-bottom:1px solid var(--gold);
}
.cb-msg--user .cb-inline-link{color:var(--ink);border-color:var(--ink);}
.cb-link-list{display:flex;flex-direction:column;gap:4px;margin-top:4px;}

.cb-quick-replies{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 14px 10px;
}
.cb-chip{
  font-size:11.5px;color:var(--ivory);
  background:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 11px;
  transition:border-color .15s ease, color .15s ease;
}
.cb-chip:hover{border-color:var(--gold);color:var(--gold);}

.cb-input-row{
  display:flex;gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:var(--ink-soft);
}
.cb-input-row input{
  flex:1;background:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px 11px;
  color:var(--ivory);
  font-size:13px;
}
.cb-input-row input:focus{outline:none;border-color:var(--gold);}
.cb-send{
  width:36px;height:36px;border-radius:8px;
  background:var(--gradient-brand);border:none;
  color:#0c0c12;font-size:14px;flex-shrink:0;transition:filter .2s ease;
}
.cb-send:hover{filter:brightness(1.1);}

@media (max-width:480px){
  .cb-root{right:14px;bottom:14px;}
  .cb-panel{width:calc(100vw - 28px);right:-6px;}
}

/* =========================================================
   WHATSAPP FLOATING BUTTON
   ========================================================= */
.whatsapp-fab{
  position:fixed;right:24px;bottom:96px;z-index:500;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg, #3fe07f, #1fb559 55%, #0e9147);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -4px 8px rgba(0,0,0,0.25) inset,
    0 12px 26px rgba(15,150,80,0.45);
  color:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
  animation:wa-pulse 2.6s ease-in-out infinite;
}
.whatsapp-fab:hover{transform:translateY(-3px) scale(1.05);}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,0.4) inset,0 -4px 8px rgba(0,0,0,0.25) inset,0 12px 26px rgba(15,150,80,0.45);}
  50%{box-shadow:0 1px 0 rgba(255,255,255,0.4) inset,0 -4px 8px rgba(0,0,0,0.25) inset,0 12px 34px rgba(15,150,80,0.7);}
}
@media (max-width:700px){.whatsapp-fab{right:16px;bottom:84px;width:50px;height:50px;}}

/* =========================================================
   LOGIN / MY ACCOUNT PAGE — two-column layout
   ========================================================= */
.account-page{
  min-height:calc(100vh - 78px);
  display:flex;align-items:center;justify-content:center;
  padding:150px 20px 70px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(74,124,255,0.16), transparent 60%),
    radial-gradient(900px 700px at 85% 85%, rgba(236,72,153,0.14), transparent 60%),
    var(--ink);
}

/* ---------------------------------------------------------------
   ANIMATED BACKDROP — slow-drifting colour orbs + faint grid +
   rising particles, all behind the glass card. Kept subtle so it
   reads as atmosphere, not noise.
   --------------------------------------------------------------- */
.account-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.account-orb{
  position:absolute;border-radius:50%;
  filter:blur(60px);
  opacity:0.55;
  will-change:transform;
}
.orb-1{
  width:480px;height:480px;top:-140px;left:-120px;
  background:radial-gradient(circle at 35% 35%, var(--grad-a), transparent 70%);
  animation:orbFloat1 22s ease-in-out infinite;
}
.orb-2{
  width:420px;height:420px;bottom:-160px;right:-100px;
  background:radial-gradient(circle at 60% 40%, var(--grad-c), transparent 70%);
  animation:orbFloat2 26s ease-in-out infinite;
}
.orb-3{
  width:340px;height:340px;top:38%;left:48%;
  background:radial-gradient(circle at 50% 50%, var(--grad-b), transparent 72%);
  animation:orbFloat3 19s ease-in-out infinite;
}
@keyframes orbFloat1{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(70px,60px) scale(1.12);}
  66%{transform:translate(-30px,90px) scale(0.94);}
}
@keyframes orbFloat2{
  0%,100%{transform:translate(0,0) scale(1);}
  40%{transform:translate(-60px,-70px) scale(1.1);}
  70%{transform:translate(40px,-30px) scale(0.92);}
}
@keyframes orbFloat3{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-46%,-56%) scale(1.18);}
}
.account-grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 85%);
}
.account-particles{position:absolute;inset:0;}
.account-particle{
  position:absolute;
  left:calc(var(--n) * 4.6%);
  bottom:-10px;
  width:3px;height:3px;border-radius:50%;
  background:var(--gold-soft);
  opacity:0;
  box-shadow:0 0 6px 1px rgba(168,85,247,0.7);
  animation:particleRise calc(9s + (var(--n) * 0.6s)) linear infinite;
  animation-delay:calc(var(--n) * -0.7s);
}
@keyframes particleRise{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:0.85;}
  90%{opacity:0.4;}
  100%{transform:translateY(-92vh) translateX(18px);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .account-orb,.account-particle{animation:none;}
}

/* ---------------------------------------------------------------
   GLASS CARD — frosted, translucent, with a soft gradient border
   and a glossy top highlight so it reads as glass, not a flat panel.
   --------------------------------------------------------------- */
.account-shell{
  position:relative;z-index:1;width:100%;max-width:920px;
  display:grid;grid-template-columns:0.85fr 1.15fr;
  align-items:stretch;
  background:linear-gradient(165deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:24px;overflow:hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(255,255,255,0.04) inset;
  animation:shellFloat 8s ease-in-out infinite;
}
.account-shell::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,0.14), transparent 32%);
  mix-blend-mode:overlay;
}
.account-shell::after{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
}
@keyframes shellFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
@media (prefers-reduced-motion: reduce){.account-shell{animation:none;}}
@media (max-width:820px){.account-shell{grid-template-columns:1fr;}}

.account-visual{
  position:relative;padding:44px 34px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:
    radial-gradient(360px 240px at 50% 0%, rgba(168,85,247,0.22), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
  border-right:1px solid rgba(255,255,255,0.1);
  text-align:center;
}
@media (max-width:820px){.account-visual{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1);}}
.account-visual h2{font-size:19px;margin-bottom:6px;}
.account-visual p{color:var(--slate);font-size:13px;max-width:260px;margin:0 auto;line-height:1.6;}

.account-form-side{padding:44px 40px;position:relative;z-index:1;}
@media (max-width:820px){.account-form-side{padding:36px 26px;}}
.account-form-side input:focus,
.account-form-side select:focus{
  border-color:rgba(168,85,247,0.65) !important;
  background:rgba(255,255,255,0.1) !important;
  box-shadow:0 0 0 3px rgba(168,85,247,0.18);
}

/* auto-glowing keyboard, lights up key by key on a loop */
.auto-keyboard{
  display:flex;gap:5px;justify-content:center;padding:14px;border-radius:14px;
  background:linear-gradient(180deg,#151517,#0a0a0b);
  border:1px solid var(--line-strong);
  box-shadow:0 10px 26px rgba(0,0,0,0.5);
}
.auto-keyboard .akey{
  width:14px;height:44px;border-radius:4px;
  background:linear-gradient(180deg,#232327,#141416);
  box-shadow:0 2px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  animation:akey-glow 2.6s ease-in-out infinite;
  animation-delay:calc(var(--k) * 0.13s);
}
.auto-keyboard .akey.black{
  height:28px;margin:0 -6px;z-index:2;background:linear-gradient(180deg,#0d0d0e,#000);
  animation-name:akey-glow-black;
}
@keyframes akey-glow{
  0%,100%{background:linear-gradient(180deg,#232327,#141416); box-shadow:0 2px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);}
  50%{background:var(--gradient-brand); box-shadow:0 0 18px rgba(168,85,247,0.65), 0 2px 0 rgba(0,0,0,0.4);}
}
@keyframes akey-glow-black{
  0%,100%{background:linear-gradient(180deg,#0d0d0e,#000);}
  50%{background:linear-gradient(180deg,var(--grad-b),#5a2fae); box-shadow:0 0 14px rgba(168,85,247,0.5);}
}
@media (prefers-reduced-motion: reduce){
  .auto-keyboard .akey{animation:none;}
}

/* =========================================================
   HERO — blurred duplicate depth layer, equalizer, floating notes
   ========================================================= */
.hero-bg--blur{
  z-index:-1;
  /* lighter blur radius = far cheaper to composite every frame while the
     layer is also being transformed (this was the main jank source) */
  filter:blur(10px) brightness(0.55) saturate(1.1);
  transform:scale(1.16) translateZ(0);
  will-change:transform;
}

.hero-eq{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  height:64px; display:flex; align-items:flex-end; justify-content:center;
  gap:4px; padding:0 6%; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.hero-eq span{
  width:4px; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, var(--gold-soft, var(--gold)), var(--gold-deep, var(--gold)));
  opacity:0.55;
  height:8px;
  animation:eq-bounce 1.1s ease-in-out infinite;
  animation-delay:calc(var(--i) * 0.045s);
}
@keyframes eq-bounce{
  0%,100%{height:8px;}
  50%{height:46px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-eq span{animation:none; height:20px;}
}

.hero-notes{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none;
}
.hero-note{
  position:absolute;
  bottom:-10%;
  left:calc(6% + (var(--n) * 12%));
  font-size:calc(18px + (var(--n) * 3px));
  color:rgba(176,108,255,0.35);
  animation:note-float 11s linear infinite;
  animation-delay:calc(var(--n) * -1.4s);
}
@keyframes note-float{
  0%{transform:translateY(0) rotate(0deg); opacity:0;}
  10%{opacity:0.8;}
  90%{opacity:0.4;}
  100%{transform:translateY(-620px) rotate(18deg); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .hero-note{animation:none; display:none;}
}

/* =========================================================
   HOW IT WORKS — 4-step journey
   ========================================================= */
.how-it-works-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
@media (max-width:900px){.how-it-works-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.how-it-works-grid{grid-template-columns:1fr;}}
.how-step{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:26px 22px; text-align:left;
}
.how-step-num{
  font-family:'Space Grotesk','Poppins',sans-serif; font-size:13px; font-weight:800;
  color:var(--gold); letter-spacing:0.06em; margin-bottom:14px;
}
.how-step-ico{width:38px;height:38px;color:var(--gold);margin-bottom:14px;}
.how-step-ico .ico{width:100%;height:100%;}
.how-step h4{font-size:16px;font-weight:700;margin-bottom:8px;}
.how-step p{font-size:13.5px;color:var(--slate);line-height:1.6;margin:0;}
.how-step-connector{
  display:none;
}
@media (min-width:901px){
  .how-step-connector{
    display:block; position:absolute; top:38px; right:-28px; width:28px; height:2px;
    background:linear-gradient(90deg, var(--gold-deep, var(--gold)), transparent);
    opacity:0.5;
  }
}

/* =========================================================
   FLAGSHIP COURSE SPOTLIGHT
   ========================================================= */
.flagship-card{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  overflow:hidden;
}
@media (max-width:800px){.flagship-card{grid-template-columns:1fr;}}
.flagship-photo{position:relative;}
.flagship-photo img{width:100%;height:100%;object-fit:cover;min-height:280px;}
.flagship-badge{
  position:absolute; top:18px; left:18px;
  background:var(--gradient-brand);
  color:#0c0c12; font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px;
  box-shadow:0 6px 18px rgba(120,80,220,0.4);
}
.flagship-text{padding:40px;display:flex;flex-direction:column;justify-content:center;}
@media (max-width:600px){.flagship-text{padding:28px;}}
.flagship-text h2{font-size:clamp(24px,3.2vw,32px);margin:8px 0 16px;}
.flagship-text p{color:var(--slate);line-height:1.75;font-size:14.5px;margin-bottom:24px;}
.flagship-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.flagship-price .was{color:var(--slate);font-size:14px;margin-right:8px;}
.flagship-price .now{color:var(--gold);font-size:24px;font-weight:800;}
.flagship-enrolled{font-size:12.5px;color:var(--slate);}

/* =========================================================
   COMPARE LEVELS TABLE
   ========================================================= */
.compare-table-wrap{overflow-x:auto;border:1px solid rgba(255,255,255,0.12);border-radius:24px;background:rgba(10,10,15,0.88);box-shadow:0 20px 80px rgba(0,0,0,0.35);}
.compare-table{width:100%;border-collapse:collapse;min-width:520px;}
.compare-table th, .compare-table td{padding:22px 24px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.08);}
.compare-table th{font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;color:var(--ivory);background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);}
.compare-table tr:nth-child(odd) td{background:rgba(255,255,255,0.03);}
.compare-table tr:last-child td{border-bottom:none;}
.compare-row-label{text-align:left !important;color:var(--slate);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
.compare-table td{color:var(--ivory);font-size:14px;}

/* Larger, more readable "Find Your Level" table */
.compare-table-wrap--lg{border-radius:28px;}
.compare-table--lg{min-width:640px;}
.compare-table--lg th, .compare-table--lg td{padding:30px 30px;}
.compare-table--lg th{font-size:19px;}
.compare-table--lg td{font-size:16.5px;line-height:1.5;}
.compare-table--lg .compare-row-label{font-size:14px;}
.compare-table--lg .btn-mini.btn-buy-now{font-size:14px;padding:12px 22px;}
@media (max-width:760px){
  .compare-table--lg th, .compare-table--lg td{padding:20px 18px;}
  .compare-table--lg th{font-size:16px;}
  .compare-table--lg td{font-size:14.5px;}
}
.compare-intro{max-width:760px;margin-top:14px;color:rgba(255,255,255,0.72);font-size:15px;line-height:1.8;}
#compare-levels .section-top{flex-direction:column;align-items:flex-start;gap:18px;}
#compare-levels .eyebrow{margin-bottom:0;}
#compare-levels .compare-table th:first-child,
#compare-levels .compare-table td:first-child{position:sticky;left:0;background:rgba(10,10,15,0.95);backdrop-filter:blur(10px);z-index:2;}
#compare-levels .compare-table th:first-child{border-right:1px solid rgba(255,255,255,0.08);}

/* =========================================================
   GALLERY — animated video wall
   ========================================================= */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.gallery-grid--full{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.gallery-grid, .gallery-grid--full{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.gallery-grid, .gallery-grid--full{grid-template-columns:1fr;}}

.gallery-marquee{
  overflow:hidden;
  width:100%;
  margin-top:14px;
}
.gallery-track{
  display:flex;
  gap:26px;
  width:max-content;
  padding:4px 16px;
  animation:galleryMarquee 22s linear infinite;
  will-change:transform;
}
.gallery-marquee:hover .gallery-track{animation-play-state:paused;}
.gallery-track .gallery-item{
  flex:0 0 360px;
}
.gallery-item{
  position:relative;
  padding:14px 14px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.22,.68,.32,1), border-color .35s ease, box-shadow .35s ease;
}
.gallery-item::before{
  /* animated gradient ring, hidden until hover — cheap (opacity only) */
  content:'';
  position:absolute; inset:-1px;
  border-radius:18px;
  padding:1px;
  background:var(--gradient-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.gallery-item:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(29,84,109,0.22);
}
.gallery-item:hover::before{opacity:1;}
.gallery-item h4{font-size:14.5px;font-weight:700;margin:14px 0 6px;}
.gallery-item p{font-size:13px;color:var(--slate);line-height:1.5;margin:0;}

@keyframes galleryMarquee{
  from{transform:translateX(0);} 
  to{transform:translateX(-50%);} 
}

.yt-embed{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#000; border:1px solid var(--line);
}
.yt-embed iframe{width:100%;height:100%;border:0;display:block;}
.yt-embed--thumb{
  padding:0; cursor:pointer; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.yt-embed--thumb::after{
  /* subtle dark-to-clear vignette so the gradient play button pops on any thumbnail */
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at center, rgba(0,0,0,0.05), rgba(0,0,0,0.45) 100%);
}
.yt-play{
  position:relative; z-index:1;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-brand);
  color:#0c0c12;
  box-shadow:0 10px 26px rgba(29,84,109,0.5), 0 0 0 6px rgba(255,255,255,0.07);
  transition:transform .2s ease, box-shadow .2s ease;
  animation:ytPlayPulse 2.6s ease-in-out infinite;
}
.yt-embed--thumb:hover .yt-play{transform:scale(1.1);}
.yt-play svg{width:22px;height:22px;margin-left:3px;}
@keyframes ytPlayPulse{
  0%,100%{box-shadow:0 10px 26px rgba(29,84,109,0.5), 0 0 0 6px rgba(255,255,255,0.07);}
  50%{box-shadow:0 10px 30px rgba(29,84,109,0.7), 0 0 0 10px rgba(255,255,255,0.03);}
}
@media (prefers-reduced-motion: reduce){.yt-play{animation:none;}}


/* =========================================================
   LEAD MAGNET — free lesson email capture
   ========================================================= */
.lead-magnet{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  background:linear-gradient(135deg, var(--card-2, var(--card)), var(--card));
  border:1px solid var(--line); border-radius:18px; padding:36px 40px;
  flex-wrap:wrap;
}
.lead-magnet-text{flex:1;min-width:240px;}
.lead-magnet-text h3{font-size:20px;margin:8px 0 8px;}
.lead-magnet-text p{color:var(--slate);font-size:14px;margin:0;}
.lead-magnet-form{display:flex;gap:10px;flex-wrap:wrap;flex:1;min-width:280px;justify-content:flex-end;}
.lead-magnet-form input{
  flex:1;min-width:200px;padding:13px 16px;border-radius:10px;
  background:var(--ink-soft, #1c1c1c);border:1px solid var(--line);color:var(--ivory);font-size:14px;
}
.lead-magnet-form input:focus{outline:none;border-color:var(--gold);}
.lead-magnet-success{color:var(--gold);font-weight:700;font-size:14.5px;}
@media (max-width:700px){
  .lead-magnet{flex-direction:column;align-items:stretch;text-align:center;}
  .lead-magnet-text{display:flex;flex-direction:column;align-items:center;width:100%;min-width:211px;}
  .lead-magnet-form{justify-content:center;}
}

/* =========================================================
   PER-SECTION BUTTON COLOR VARIATION
   Each section below gets its own accent gradient on
   .btn-pill / .btn-mini / .btn-gold instead of the single
   repeated hero gradient, so the page reads with intentional
   color rhythm section-to-section. Hero + main nav keep the
   original signature blue/violet/magenta gradient.
   ========================================================= */

#about .btn-pill,#about .btn-mini,#about .btn-gold{
  background:var(--grad-about);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-about-glow),0 2px 0 var(--grad-about-deep);
}
#about .btn-pill:hover{background:var(--grad-about-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-about-glow),0 3px 0 var(--grad-about-deep);}

#courses .btn-pill,#courses .btn-mini,#courses .btn-gold{
  background:var(--grad-courses);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-courses-glow),0 2px 0 var(--grad-courses-deep);
}
#courses .btn-pill:hover{background:var(--grad-courses-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-courses-glow),0 3px 0 var(--grad-courses-deep);}

#compare-levels .btn-pill,#compare-levels .btn-mini,#compare-levels .btn-gold{
  background:var(--grad-compare);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-compare-glow),0 2px 0 var(--grad-compare-deep);
}
#compare-levels .btn-pill:hover{background:var(--grad-compare-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-compare-glow),0 3px 0 var(--grad-compare-deep);}

#flagship-course .btn-pill,#flagship-course .btn-mini,#flagship-course .btn-gold{
  background:var(--grad-flagship);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-flagship-glow),0 2px 0 var(--grad-flagship-deep);
}
#flagship-course .btn-pill:hover{background:var(--grad-flagship-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-flagship-glow),0 3px 0 var(--grad-flagship-deep);}

#how-it-works .btn-pill,#how-it-works .btn-mini,#how-it-works .btn-gold{
  background:var(--grad-how);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-how-glow),0 2px 0 var(--grad-how-deep);
}
#how-it-works .btn-pill:hover{background:var(--grad-how-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-how-glow),0 3px 0 var(--grad-how-deep);}

#lead-magnet .btn-pill,#lead-magnet .btn-mini,#lead-magnet .btn-gold{
  background:var(--grad-lead);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-lead-glow),0 2px 0 var(--grad-lead-deep);
}
#lead-magnet .btn-pill:hover{background:var(--grad-lead-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-lead-glow),0 3px 0 var(--grad-lead-deep);}

#testimonials .btn-pill,#testimonials .btn-mini,#testimonials .btn-gold{
  background:var(--grad-testimonials);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-testimonials-glow),0 2px 0 var(--grad-testimonials-deep);
}
#testimonials .btn-pill:hover{background:var(--grad-testimonials-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-testimonials-glow),0 3px 0 var(--grad-testimonials-deep);}

#gallery-teaser .btn-pill,#gallery-teaser .btn-mini,#gallery-teaser .btn-gold{
  background:var(--grad-gallery);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-gallery-glow),0 2px 0 var(--grad-gallery-deep);
}
#gallery-teaser .btn-pill:hover{background:var(--grad-gallery-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-gallery-glow),0 3px 0 var(--grad-gallery-deep);}

.cta .btn-pill,.cta .btn-mini,.cta .btn-gold{
  background:var(--grad-cta);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 10px 24px var(--grad-cta-glow),0 2px 0 var(--grad-cta-deep);
}
.cta .btn-pill:hover{background:var(--grad-cta-hover);box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 -3px 6px rgba(0,0,0,0.25) inset,0 14px 30px var(--grad-cta-glow),0 3px 0 var(--grad-cta-deep);}

.newsletter-row button{background:var(--grad-newsletter);}
.newsletter-row button:hover{background:var(--grad-newsletter-hover);filter:none;}

/* =========================================================
   KEYBOARD BACKDROP — fixed, whole-page exploded-view sequence
   sitting behind every section (Home page only)
   ========================================================= */
.kb-backdrop{
  position:fixed;
  inset:0;
  z-index:-2; /* behind body::before (-1), which is why that layer
                 dropped its opaque fallback — see index.css above */
  pointer-events:none;
  overflow:hidden;
  background:var(--ink);
}
.kb-backdrop-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Frosted "glass" panel used on each home-page section's content
   column so copy stays legible over the machine imagery behind it —
   full-bleed edges outside the 1180px column are left uncovered on
   wide screens so the backdrop still peeks through either side. */
.section-glass{
  position:relative;
  background:linear-gradient(180deg, rgba(21,21,29,0.88), rgba(21,21,29,0.94));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:28px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
  padding-top:12px;
  padding-bottom:12px;
}
@media (max-width:900px){
  .section-glass{border-radius:18px;}
}
/* =========================================================
   Course card actions — Add to Cart (icon) + Buy Now
   ========================================================= */
.card-actions{display:flex;align-items:center;gap:8px;}
.icon-btn-cart{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--line-strong);color:var(--ivory);
  transition:border-color .2s ease, color .2s ease, transform .15s ease, background .2s ease;
}
.icon-btn-cart svg{width:16px;height:16px;}
.icon-btn-cart:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);}
.icon-btn-cart.is-added{background:var(--gradient-brand);border-color:transparent;color:#0c0c12;}
.icon-btn-cart.is-added:hover{color:#0c0c12;}
.btn-buy-now{
  background:linear-gradient(120deg, #b2216a 0%, #b3326c 52%, #4F46E5 80%);
  border:1.5px solid rgba(255,255,255,0.85);
  color:#fff;
  white-space:nowrap;
  flex-shrink:0;
  animation:btnHeartbeat 1.6s ease-in-out infinite;
}
.btn-buy-now:hover{filter:brightness(1.1);transform:translateY(-1px) scale(1.04);border-color:#fff;animation-play-state:paused;}
@keyframes btnHeartbeat{
  0%,100%{transform:scale(1);}
  15%{transform:scale(1.07);}
  30%{transform:scale(1);}
  45%{transform:scale(1.05);}
  60%{transform:scale(1);}
}
#courses .btn-buy-now{color:#fff;}
.btn-buy-now-lg{
  width:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(120deg, #b2216a 0%, #b3326c 52%, #4F46E5 80%);color:#fff;padding:13px 20px;border-radius:999px;
  font-weight:800;font-size:14px;border:1.5px solid rgba(255,255,255,0.85);transition:filter .2s ease, transform .2s ease;
}
.btn-buy-now-lg:hover{filter:brightness(1.1);transform:translateY(-1px);}

/* =========================================================
   Checkout page
   ========================================================= */
.checkout-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;padding:28px 0 90px;}
@media (max-width:900px){.checkout-layout{grid-template-columns:1fr;gap:32px;}}

.checkout-main{display:flex;flex-direction:column;gap:28px;}
.checkout-block{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 26px;}
.checkout-block h3{font-size:16px;color:var(--ivory);margin-bottom:18px;}
.checkout-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.checkout-block-head h3{margin-bottom:0;}
.checkout-login-link{font-size:12.5px;color:var(--gold);font-weight:700;}

.checkout-field{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;margin-bottom:16px;}
.checkout-field:last-child{margin-bottom:0;}
.checkout-field input,.checkout-field select{
  background:#1c1c1c;border:1px solid var(--line);border-radius:6px;padding:12px 14px;
  color:var(--ivory);font-size:14px;font-family:inherit;
}
.checkout-field input:focus,.checkout-field select:focus{outline:none;border-color:var(--gold);}
.checkout-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:520px){.checkout-field-row{grid-template-columns:1fr;}}

.checkout-check{
  display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--slate);line-height:1.5;cursor:pointer;
}
.checkout-check input{margin-top:3px;accent-color:var(--gold);}

.checkout-payment-option{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:8px;
  color:var(--ivory);font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:12px;transition:border-color .2s ease, background .2s ease;
}
.checkout-payment-option:last-child{margin-bottom:0;}
.checkout-payment-option input{accent-color:var(--gold);width:16px;height:16px;}
.checkout-payment-option.is-selected{border-color:var(--gold);background:rgba(168,85,247,0.08);}

.checkout-summary{position:sticky;top:100px;}
.checkout-summary-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 26px;}
.checkout-summary-card h3{font-size:16px;color:var(--ivory);margin-bottom:18px;}

.checkout-summary-items{display:flex;flex-direction:column;gap:16px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.checkout-summary-item{display:flex;gap:14px;align-items:flex-start;}
.checkout-summary-thumb{position:relative;flex-shrink:0;}
.checkout-summary-thumb img{width:56px;height:56px;object-fit:cover;border-radius:8px;}
.checkout-summary-thumb span{
  position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;
  background:var(--ink-soft);color:var(--slate);font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);
}
.checkout-summary-item-body p{font-size:13.5px;color:var(--ivory);font-weight:600;margin-bottom:4px;line-height:1.4;}
.checkout-summary-item-price{font-size:13px;color:var(--gold);font-weight:700;}

/* ---- unique coupon accordion ---- */
.coupon-box{
  border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden;
  background:linear-gradient(180deg, rgba(168,85,247,0.06), transparent);
  transition:border-color .2s ease;
}
.coupon-box.is-open{border-color:var(--line-strong);}
.coupon-box-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;background:none;border:none;color:var(--ivory);font-size:13px;font-weight:700;cursor:pointer;
}
.coupon-box-toggle-label{display:flex;align-items:center;gap:9px;}
.coupon-box-toggle-label svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;}
.coupon-box-toggle svg:last-child{width:15px;height:15px;color:var(--slate);flex-shrink:0;}
.coupon-box-body{padding:0 16px 16px;}
.coupon-box-row{display:flex;gap:10px;}
.coupon-box-row input{
  flex:1;background:#1c1c1c;border:1px solid var(--line);border-radius:6px;padding:11px 14px;
  color:var(--ivory);font-size:13.5px;font-family:inherit;
}
.coupon-box-row input:focus{outline:none;border-color:var(--gold);}
.coupon-box-row .btn-mini{flex-shrink:0;}
.coupon-box-error{font-size:12px;color:#e07a77;margin-top:8px;}
.coupon-applied-pill{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(168,85,247,0.12);border:1px solid var(--gold);border-radius:8px;
  padding:10px 14px;font-size:12.5px;color:var(--ivory);
}
.coupon-applied-pill button{background:none;border:none;color:var(--slate);font-size:12px;text-decoration:underline;cursor:pointer;}
.coupon-applied-pill button:hover{color:var(--gold);}

.checkout-totals{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.checkout-totals-row{display:flex;justify-content:space-between;font-size:14px;color:var(--slate);}
.checkout-totals-row--discount span:last-child{color:#7ad19a;}
.checkout-totals-row--total{padding-top:12px;border-top:1px solid var(--line);font-size:16px;color:var(--ivory);}
.checkout-totals-row--total strong{font-size:20px;color:var(--gold);}

.checkout-place-order{width:100%;justify-content:center;border:none;margin-top:6px;padding:14px 20px;font-size:14px;}

.checkout-success{
  padding:70px 0 100px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:460px;margin:0 auto;
}
.checkout-success-icon{
  width:64px;height:64px;border-radius:50%;background:var(--gradient-brand);
  display:flex;align-items:center;justify-content:center;color:#0c0c12;margin-bottom:6px;
}
.checkout-success-icon svg{width:30px;height:30px;}
.checkout-success h2{font-size:24px;color:var(--ivory);}
.checkout-success p{color:var(--slate);font-size:14px;line-height:1.6;}

/* =========================================================
   Production page — full-bleed looping video banner, sits directly
   under the nav bar and above the "past work" photo slider.
   ========================================================= */
.production-video-banner{
  position:relative;
  width:100%;
  height:70vh;
  min-height:380px;
  margin-top:96px;
  overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--line-strong);
}
.production-video-banner-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.production-video-banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 55%, var(--ink) 100%);
  pointer-events:none;
}
@media (max-width:700px){.production-video-banner{height:48vh;min-height:300px;margin-top:80px;}}

/* =========================================================
   Production page — full-bleed "past work" slider directly below the
   video banner (replaces the old plain-text header + small captioned
   slider). No text overlay, just the photos.
   ========================================================= */
.production-past-slider{
  position:relative;
  width:100%;
  height:92vh;
  min-height:560px;
  overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--line-strong);
}
.production-past-slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.1s ease, transform 6s ease;
}
.production-past-slide.is-active{opacity:1;transform:scale(1);}
.production-past-slider-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 45%, var(--ink) 100%);
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .production-past-slide{transition:opacity .3s ease;transform:none !important;}
}
@media (max-width:700px){.production-past-slider{height:66vh;min-height:420px;}}

/* =========================================================
   Behind the Scenes — local video "glimpse" cards + Instagram reels.
   Uniform grid (no vertical stagger — that produced a messy, uneven
   row). The "keyboard" feel now comes purely from alternating card
   borders: white border / black border, like alternating piano keys.
   Instagram's real embed (with its own profile row / likes / comment
   chrome) only appears in the lightbox once clicked — the grid tile
   itself stays clean and matches the video cards exactly.
   ========================================================= */
.bts-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding-top:6px;
}
.bts-grid--gallery{
  grid-template-columns:repeat(3,1fr);
}

.bts-card{
  position:relative;
  display:block;
  width:100%;
  min-height:230px;
  border-radius:14px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.92);
  background:var(--card);
  padding:0;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* alternating "keys": even cards get a black border instead of white */
.bts-card:nth-child(even){
  border-color:#0a0a0f;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14);
}
.bts-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 16px 34px rgba(0,0,0,0.45);}
@media (max-width:900px){
  .bts-grid{grid-template-columns:repeat(2,1fr);}
  .bts-grid--gallery{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .bts-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .bts-grid--gallery{grid-template-columns:1fr;}
  .bts-card{min-height:200px;}
}
.bts-grid--gallery .bts-card{min-height:260px;}


.bts-card--video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.bts-card-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:8px;padding:12px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.68) 100%);
  transition:background .25s ease;
}
.bts-card:hover .bts-card-overlay{background:linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.74) 100%);}
.bts-play-ico{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);
  width:36px;height:36px;color:#fff;opacity:0;transition:opacity .2s ease, transform .2s ease;
}
.bts-card:hover .bts-play-ico{opacity:1;transform:translate(-50%,-50%) scale(1);}
.bts-card-label{color:var(--ivory);font-size:12px;font-weight:700;align-self:flex-start;line-height:1.3;}

.bts-card--yt{
  background-size:cover;background-position:center;
}

.bts-card--ig{
  background:linear-gradient(155deg, rgba(74,124,255,0.22), rgba(168,85,247,0.22) 55%, rgba(236,72,153,0.22));
}
.bts-ig-glyph{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  width:34px;height:34px;color:rgba(255,255,255,0.55);
}

.bts-lightbox{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.9);
  padding:5vh 5vw;
  animation:lightboxFadeIn .2s ease;
}
.bts-lightbox-video{
  max-width:100%;max-height:92vh;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  animation:lightboxZoomIn .25s cubic-bezier(.22,.68,.32,1);
}
iframe.bts-lightbox-video{width:min(90vw,900px);aspect-ratio:16/9;border:0;}
@supports not (aspect-ratio: 16/9){
  iframe.bts-lightbox-video{width:min(90vw,900px);height:min(50.6vw,506px);}
}
.bts-lightbox-insta{
  max-height:92vh;overflow-y:auto;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  animation:lightboxZoomIn .25s cubic-bezier(.22,.68,.32,1);
}
.bts-lightbox-close{
  position:absolute;top:22px;right:26px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid var(--line-strong);
  color:var(--ivory);font-size:24px;line-height:1;cursor:pointer;
}
.bts-lightbox-close:hover{background:rgba(255,255,255,0.16);}

/* =========================================================
   Combo offer notification — sits under the homepage courses grid
   ========================================================= */
.combo-offer{
  margin-top:38px;
  padding:26px;
  border-radius:20px;
  border:1px solid var(--line-strong);
  background:linear-gradient(160deg, rgba(168,85,247,0.10), rgba(74,124,255,0.06));
  position:relative;
  overflow:hidden;
}
.combo-offer-marquee{
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  margin-bottom:22px;
  border-radius:999px;
  padding:20px 0;
  background:linear-gradient(115deg, #2b0000 0%, #7a0c1e 22%, #d21f3c 46%, #ff5470 62%, #8b0000 82%, #2b0000 100%);
  background-size:300% 100%;
  animation:comboBgShift 8s ease-in-out infinite;
  box-shadow:
    0 12px 40px rgba(139, 0, 0, 0.55),
    inset 0 6px 18px rgba(255, 130, 130, 0.4),
    inset 0 -6px 18px rgba(0, 0, 0, 0.4);
  border-top:1px solid rgba(255, 170, 170, 0.55);
  border-bottom:1px solid rgba(0, 0, 0, 0.3);
}
@keyframes comboBgShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.combo-offer-marquee-shine{
  position:absolute;inset:0;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  background-size:250% 100%;
  animation:comboShineSweep 3.2s linear infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes comboShineSweep{
  0%{background-position:200% 0;}
  100%{background-position:-50% 0;}
}
.combo-offer-marquee-track{
  display:inline-block;
  animation:comboMarqueeScroll 16s linear infinite;
  position:relative;
}
.combo-offer-marquee-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:0 6px;
  background:linear-gradient(90deg, #fff8e1 0%, #ffe27a 30%, #ffb15c 55%, #fff8e1 80%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  animation:comboTextShift 5s ease-in-out infinite;
}
@keyframes comboTextShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.combo-offer-marquee-ico{
  width:32px;height:32px;flex-shrink:0;
  color:#ffd76a;
  filter:drop-shadow(0 0 8px rgba(255,140,60,0.9));
  animation:comboFlameFlicker 1.4s ease-in-out infinite;
}
@keyframes comboFlameFlicker{
  0%,100%{transform:scale(1) rotate(0deg);opacity:1;}
  50%{transform:scale(1.12) rotate(-3deg);opacity:0.85;}
}
.combo-offer-marquee-price{
  display:inline-block;
  margin-left:4px;
  padding:3px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, #fff3c4, #ffcf5c);
  color:#5a1a00;
  -webkit-text-fill-color:#5a1a00;
  font-size:19px;
  font-weight:900;
  box-shadow:0 3px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.7);
  animation:comboPricePop 1.6s ease-in-out infinite;
}
@keyframes comboPricePop{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}
.combo-offer-marquee-sep{
  display:inline-block;
  margin:0 30px;
  color:rgba(255,255,255,0.55);
  font-size:16px;
  vertical-align:middle;
}
@keyframes comboMarqueeScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .combo-offer-marquee-track,
  .combo-offer-marquee-shine,
  .combo-offer-marquee,
  .combo-offer-marquee-item,
  .combo-offer-marquee-ico,
  .combo-offer-marquee-price{animation:none;}
}
@media (max-width:760px){
  .combo-offer-marquee-item{font-size:14px;}
  .combo-offer-marquee-price{font-size:14px;padding:2px 10px;}
  .combo-offer-marquee-sep{margin:0 18px;}
  .combo-offer-marquee-ico{width:24px;height:24px;}
}
.combo-offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:760px){.combo-offer-grid{grid-template-columns:1fr;}}
.combo-offer-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;
}
.combo-offer-card--alt{border-color:rgba(168,85,247,0.35);}
.combo-offer-top h4{font-size:16.5px;font-weight:800;color:var(--ivory);margin-bottom:6px;}
.combo-offer-top p{font-size:13.5px;color:var(--slate);line-height:1.55;}
.combo-offer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.combo-offer-price{display:flex;align-items:baseline;gap:8px;}
.combo-offer-was{font-size:13px;color:var(--slate);text-decoration:line-through;}
.combo-offer-now{font-size:19px;font-weight:800;color:var(--ivory);}

/* =========================================================
   Standalone "View Cart" CTA below the home-page courses grid
   ========================================================= */
.courses-cart-cta{display:flex;justify-content:center;margin-top:40px;}
.btn-view-cart{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:13px 28px;border-radius:999px;border:1.5px solid var(--line-strong);
  color:var(--ivory);font-size:13.5px;font-weight:700;letter-spacing:0.02em;
  transition:border-color .2s ease, color .2s ease, transform .15s ease, background .2s ease;
}
.btn-view-cart svg{width:18px;height:18px;flex-shrink:0;}
.btn-view-cart:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);background:rgba(168,85,247,0.08);}
.btn-view-cart-count{
  display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--gradient-brand);color:#0c0c12;font-size:11px;font-weight:800;
}

/* =========================================================
   DASHBOARD — protected student area (auth-gated via ProtectedRoute)
   ========================================================= */
.route-loading{
  padding:120px 0; text-align:center; color:var(--slate); font-size:14px;
}
.dash-page{padding:150px 0 80px;}
@media (max-width:700px){.dash-page{padding:120px 0 60px;}}
.dash-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--line);
}
.dash-header h1{font-size:clamp(26px,4vw,38px); font-weight:800; color:var(--ivory); margin-top:6px;}
.dash-logout{
  padding:10px 20px; border-radius:999px; border:1px solid var(--line-strong);
  background:transparent; color:var(--slate); font-size:13px; font-weight:600; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.dash-logout:hover{border-color:var(--gold); color:var(--gold);}

.dash-course-list{display:flex; flex-direction:column; gap:14px;}
.dash-course{
  border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden;
}
.dash-course-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; background:none; border:none; color:var(--ivory);
  font-size:15px; font-weight:700; cursor:pointer; text-align:left;
}
.dash-course-progress{font-size:12px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.04em;}
.dash-course-lessons{padding:0 22px 20px; display:flex; flex-direction:column; gap:10px;}
.dash-lesson{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border:1px solid var(--line); border-radius:10px; flex-wrap:wrap;
}
.dash-lesson-info{display:flex; flex-direction:column; gap:2px;}
.dash-lesson-title{font-size:13.5px; font-weight:600; color:var(--ivory);}
.dash-lesson-duration{font-size:12px; color:var(--slate);}
.dash-lesson-play{
  padding:8px 18px; border-radius:999px; border:none; background:var(--gradient-brand);
  color:#0c0c12; font-size:12.5px; font-weight:700; cursor:pointer;
}
.dash-lesson-play:disabled{opacity:0.6; cursor:default;}
.dash-lesson-video{width:100%; max-width:520px; border-radius:10px; margin-top:8px;}
.dash-lesson-error{color:var(--gold); font-size:12.5px; width:100%;}


/* =========================================================
   WordPress / WooCommerce / Tutor integration layer
   ========================================================= */
.sjp-wp-content{min-height:40vh}
.sjp-page-main{padding:140px 0 90px}
.sjp-page-main .entry-content{max-width:900px;margin:0 auto}
.page-content-offset{padding-top:110px}
.page-header--compact h1{font-size:clamp(32px,5vw,54px)}
.sjp-wc-wrap{padding-top:150px!important;min-height:55vh}
.sjp-wc-wrap .woocommerce-breadcrumb{color:var(--slate);margin-bottom:24px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--card)!important;border:1px solid var(--line)!important;border-top:2px solid var(--gold)!important;color:var(--ivory)!important;border-radius:14px!important;padding:16px 20px!important}
.woocommerce table.shop_table{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:18px!important;border-collapse:separate!important;border-spacing:0!important;overflow:hidden}
.woocommerce table.shop_table th{background:var(--card-2)!important;color:var(--gold-soft)!important}
.woocommerce table.shop_table td{border-top:1px solid var(--line)!important}
.woocommerce .cart_totals,.woocommerce-checkout #order_review,.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-MyAccount-content,.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{background:rgba(20,18,40,.78)!important;border:1px solid var(--line)!important;border-radius:18px!important;padding:26px!important;color:var(--ivory)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.woocommerce input.input-text,.woocommerce select{background:rgba(255,255,255,.05)!important;border:1px solid var(--line-strong)!important;color:var(--ivory)!important;border-radius:10px!important;padding:12px 14px!important}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,#place_order{
 background:var(--gradient-brand)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:12px 24px!important;font-weight:700!important}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,#place_order:hover{background:var(--gradient-brand-hover)!important;transform:translateY(-1px)}
.woocommerce .quantity .qty{background:rgba(255,255,255,.05);color:var(--ivory);border:1px solid var(--line);border-radius:8px;padding:8px}
.woocommerce-MyAccount-navigation ul{background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:8px;list-style:none}
.woocommerce-MyAccount-navigation li{margin:0!important}
.woocommerce-MyAccount-navigation a{display:block;padding:11px 14px;color:var(--slate);border-radius:10px}
.woocommerce-MyAccount-navigation .is-active a,.woocommerce-MyAccount-navigation a:hover{background:rgba(168,85,247,.12);color:var(--ivory)}
.woocommerce .col2-set,.woocommerce-page .col2-set{gap:24px}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:calc(50% - 12px)}

/* Password strength meter — WooCommerce/WP core injects this dynamically
   below any #reg_password / #password field with a strength class
   (short/bad/good/strong). Default core colors are pastel, made for a
   white admin background, and read as washed-out/hard-to-see here —
   darker, higher-contrast backgrounds with solid text for each level. */
.woocommerce-password-strength, p.woocommerce-password-strength{
  display:block!important;margin-top:8px!important;padding:9px 14px!important;
  border-radius:10px!important;font-size:12.5px!important;font-weight:700!important;
  letter-spacing:0.02em!important;text-align:left!important;
  border:1px solid var(--line-strong)!important;
}
.woocommerce-password-strength.short{background:rgba(220,38,38,0.22)!important;color:#ff9b9b!important;border-color:rgba(220,38,38,0.45)!important;}
.woocommerce-password-strength.bad{background:rgba(234,88,12,0.22)!important;color:#ffb37a!important;border-color:rgba(234,88,12,0.45)!important;}
.woocommerce-password-strength.good{background:rgba(202,138,4,0.22)!important;color:#ffdd7a!important;border-color:rgba(202,138,4,0.45)!important;}
.woocommerce-password-strength.strong{background:rgba(22,163,74,0.22)!important;color:#7be89c!important;border-color:rgba(22,163,74,0.45)!important;}
.tutor,.tutor-page-wrap{color:var(--ivory)}
.tutor .tutor-card,.tutor .tutor-dashboard-content,.tutor-dashboard-content,.tutor-dashboard-left-menu{
 background:rgba(20,18,40,.78)!important;border-color:var(--line)!important;color:var(--ivory)!important;border-radius:18px!important}
.tutor-dashboard-left-menu{padding:10px!important}
.tutor-dashboard-menu-item-link{color:var(--slate)!important;border-radius:10px!important}
.tutor-dashboard-menu-item-link:hover,.tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link{color:var(--ivory)!important;background:rgba(168,85,247,.12)!important}
.tutor input,.tutor textarea,.tutor select{background:rgba(255,255,255,.05)!important;border:1px solid var(--line-strong)!important;color:var(--ivory)!important;border-radius:10px!important}
.tutor-btn,.tutor-button,.tutor-btn-primary{background:var(--gradient-brand)!important;border:0!important;border-radius:999px!important;color:#fff!important}
.policy-wrap{padding:0 0 90px}
.policy-content{max-width:860px;margin:0 auto;color:var(--slate);font-size:15px;line-height:1.8}
.policy-content h2{font-size:22px;color:var(--ivory);margin:36px 0 12px}
.policy-content p,.policy-content ul{margin:0 0 16px}
.policy-content ul{padding-left:22px}
.policy-content li{margin:7px 0}
.policy-content strong{color:var(--ivory)}
.policy-content a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}
.production-video-banner{margin-top:0}
.bts-ig-glyph svg{width:36px;height:36px;}
.bts-play-ico svg{width:32px;height:32px}
.cb-root{position:fixed;right:22px;bottom:22px;z-index:3000;font-family:Poppins,sans-serif}
.cb-fab{width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:var(--gradient-brand);box-shadow:0 12px 35px rgba(0,0,0,.45);padding:0;display:flex;align-items:center;justify-content:center}
.cb-fab-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover}
.cb-panel{position:absolute;right:0;bottom:72px;width:min(380px,calc(100vw - 32px));height:520px;background:#11101c;border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 22px 70px rgba(0,0,0,.65);display:flex;flex-direction:column;overflow:hidden}
.cb-header{display:flex;align-items:center;gap:10px;padding:14px;background:var(--gradient-brand)}
.cb-header-avatar,.cb-msg-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.cb-header-title{font-weight:800;color:#fff}.cb-header-sub{font-size:11px;color:rgba(255,255,255,.78)}
.cb-close{margin-left:auto;background:none;border:0;color:#fff;font-size:20px}
.cb-messages{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.cb-msg{display:flex;gap:8px;align-items:flex-end}.cb-msg--user{justify-content:flex-end}
.cb-bubble{max-width:84%;padding:10px 12px;border-radius:13px;background:var(--card-2);color:var(--ivory);font-size:12.5px;line-height:1.5}
.cb-msg--user .cb-bubble{background:rgba(168,85,247,.22)}
.cb-bubble p{margin:0 0 6px}.cb-bubble p:last-child{margin-bottom:0}
.cb-inline-link{display:block;color:var(--gold-soft);font-weight:700;margin-top:8px}
.cb-link-list{display:grid;gap:5px}.cb-quick-replies{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line)}
.cb-chip{border:1px solid var(--line-strong);background:transparent;color:var(--slate);border-radius:999px;padding:6px 9px;font-size:11px}
.cb-chip:hover{color:var(--ivory);border-color:var(--gold)}
.cb-input-row{display:flex;gap:7px;padding:10px;border-top:1px solid var(--line)}
.cb-input-row input{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;color:var(--ivory);padding:10px}
.cb-send{width:40px;border:0;border-radius:10px;background:var(--gradient-brand);color:#fff}
@media(max-width:900px){.production-video-banner{min-height:420px}.production-past-slider{min-height:360px}}
@media(max-width:700px){.sjp-wc-wrap{padding-top:120px!important}.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:100%}.cb-root{right:14px;bottom:14px}}

/* HARD SAFETY: native HTML hidden attribute must always hide modal overlays. */
.search-overlay[hidden]{display:none !important;}
/* =========================================================
   ACCOUNT MENU — logged-in user profile dropdown in the header
   ========================================================= */
.account-menu{position:relative;}
.account-menu-trigger{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line-strong);
  background:linear-gradient(160deg, rgba(168,85,247,0.16), rgba(74,124,255,0.10));
  cursor:pointer;transition:border-color .15s ease, transform .15s ease;
}
.account-menu-trigger:hover{border-color:var(--gold);transform:translateY(-1px);}
.account-menu-avatar{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,0.06);
  color:var(--ivory);
}
.account-menu-avatar svg{width:15px;height:15px;}
.account-menu-avatar--lg{width:40px;height:40px;flex-shrink:0;}
.account-menu-avatar--lg svg{width:22px;height:22px;}
.account-menu-panel{
  position:absolute;top:calc(100% + 12px);right:0;
  width:250px;background:rgba(14,12,24,0.98);
  border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
  padding:8px;z-index:60;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.account-menu.is-open .account-menu-panel{opacity:1;transform:translateY(0);pointer-events:auto;}
.account-menu-head{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px 14px;margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.account-menu-head strong{display:block;font-size:13.5px;color:var(--ivory);}
.account-menu-head span{display:block;font-size:11.5px;color:var(--slate);overflow-wrap:anywhere;}
.account-menu-panel a{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;border-radius:10px;
  font-size:13px;font-weight:600;color:var(--ivory);
  transition:background .15s ease, color .15s ease;
}
.account-menu-panel a svg{width:17px;height:17px;flex-shrink:0;color:var(--slate);transition:color .15s ease;}
.account-menu-panel a:hover{background:rgba(168,85,247,0.12);color:var(--gold);}
.account-menu-panel a:hover svg{color:var(--gold);}
.account-menu-panel a.account-menu-logout{color:#ff9b9b;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:12px;}
.account-menu-panel a.account-menu-logout svg{color:#ff9b9b;}
.account-menu-panel a.account-menu-logout:hover{background:rgba(220,38,38,0.14);color:#ffb3b3;}

/* mobile nav-menu account links — same dropdown items, shown inline in
   the mobile hamburger menu instead of a floating panel */
.mobile-account-link--logout{color:#ff9b9b !important;}