/* ==========================================================================
   Abdelaziz Siala — landing page skeleton
   Every color comes from colors.css (single source of truth).
   Iterate section by section.
   ========================================================================== */

:root {
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius:       18px;
  --glow:         0 12px 40px -14px var(--glow-accent);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

/* Page container.
   Minimum safe side margin: 16px per side (Material/Atlassian/iOS guideline).
   env(safe-area-inset-*) keeps content clear of notches & rounded corners
   on devices that report one. */
.wrap {
  width: min(1200px, 100% - 2rem);
  margin-inline: auto;
  padding-inline: max(0px, env(safe-area-inset-left))
                  max(0px, env(safe-area-inset-right));
}

/* Button (plain) ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: var(--color-on-accent);
  background: var(--color-accent-2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
  background: var(--color-hover);
}

.btn-lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn-sm {
  padding: .55rem 1.2rem;
  font-size: .9rem;
  color: var(--color-accent-2);
  background: transparent;
  border: 1px solid var(--color-accent-2);
}
.btn-sm:hover {
  background: var(--color-hover);
  color: var(--color-on-accent);
  box-shadow: var(--glow);
}

/* ==========================================================================
   Header
   ========================================================================== */
.announcement-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

.discount-banner {
  margin: 0;
  padding: .55rem 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--color-on-accent);
  background: var(--color-accent);
}

.site-header {
  position: relative;
  z-index: 50;
  background: var(--overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  font-size: .92rem;
  color: var(--color-muted);
}
.site-nav a { transition: color .15s ease; }
.site-nav a:hover { color: var(--color-text); }

@media (max-width: 820px) {
  .site-nav { display: none; }
  .header-inner { gap: 1rem; }
  .header-inner .btn-sm { margin-left: auto; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(6rem, 13vh, 9.5rem) 0 clamp(4rem, 9vh, 7rem);
  overflow: hidden;
}

/* Subtle ambient glow — static, keeps focus on the headline */
.hero::before {
  content: "";
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 130%);
  height: 620px;
  background: radial-gradient(closest-side, var(--halo-hero), transparent 70%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
}

.hero-copy { min-width: 0; }

/* Eyebrow -------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.4rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-2);
  box-shadow: 0 0 12px var(--glow-accent);
}

/* Headline ------------------------------------------------------------- */
.headline {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/*
   Rotating phrases.
   Stable height: all phrases stack into the same grid cell, so the
   container is always as tall as the tallest phrase — nothing jumps.

   Each phrase is ALWAYS rendered on ONE line, never wrapped:
   - `white-space: nowrap` prevents wrapping;
   - a container-query fallback (font-size in cqw) keeps the widest
     phrase fitting before JS loads;
   - main.js fine-tunes the exact px size so it always fits exactly.
*/
.rotating-phrases {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  container-type: inline-size;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.2rem, 6.5cqw, 4.6rem);
}
.rotating-phrase {
  grid-area: 1 / 1;
  min-width: 0;
  white-space: nowrap;
  color: var(--color-accent-2);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: transform, opacity;
}
.rotating-phrase.is-active  { opacity: 1; transform: translateY(0); }
.rotating-phrase.is-leaving { opacity: 0; transform: translateY(-24px); }

/* Fixed payoff line — never animates, lives outside the rotating group */
.payoff {
  display: block;
  width: fit-content;
  margin-top: 1.1rem;
  font-size: clamp(0.95rem, 1.8vw + 0.3rem, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Subheadline + CTA ------------------------------------------------------ */
.hero-subheadline {
  margin: 1.6rem 0 0;
  max-width: 520px;
  font-size: clamp(0.95rem, 1.3vw + 0.5rem, 1.1rem);
  color: var(--color-muted);
}

.placeholder-inline {
  color: var(--placeholder-text);
  text-decoration: underline dotted;
  text-underline-offset: 4px;
}

.hero-cta { margin-top: 2.1rem; }

/* Risk-reversal checklist under the CTA */
.risk-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .9rem;
  max-width: none;
}
.risk-list li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
.risk-check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: 1px solid var(--border);
  color: var(--color-muted);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
.risk-text { display: block; }
.risk-title {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-muted);
}
.risk-desc {
  display: block;
  margin-top: .15rem;
  font-size: .88rem;
  color: var(--color-muted);
}

/* Hero visual — image gallery -------------------------------------------- */
.hero-visual { position: relative; }

.hero-visual::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(closest-side, var(--glow-accent-2), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.gallery {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 30px 80px -40px var(--card-shadow);
  transition: transform .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.gallery:hover {
  transform: scale(1.02);
  box-shadow: 0 34px 90px -34px var(--card-shadow);
}

.gallery-slides { position: relative; height: 100%; }

.gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.gallery-slide.is-active { opacity: 1; pointer-events: auto; }

.gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  cursor: zoom-in;
}

/* Prev / next arrows */
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--overlay);
  color: var(--color-text);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.gallery-btn:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.gallery-prev { left: 1rem; }
.gallery-next { right: 1rem; }

/* Dots */
.gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.gallery-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--dot-chrome);
  cursor: pointer;
  transition: background .2s ease;
}
.gallery-dot.is-active { background: var(--color-accent); cursor: default; }

/* Slide captions — tiny + gray, under the carousel and the lightbox image */
.hero-caption {
  margin: .8rem 0 0;
  min-height: 1.2em;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--color-muted);
  text-align: center;
  transition: opacity .25s ease;
}

.lightbox-stage {
  display: grid;
  justify-items: center;
  gap: .9rem;
}

.lightbox-caption {
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--color-muted);
  text-align: center;
  transition: opacity .25s ease;
}

/* Lightbox — click a gallery image to inspect it bigger ------------------- */
[hidden] { display: none !important; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 40px 120px -30px var(--card-shadow);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--overlay);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lightbox-close:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--overlay);
  color: var(--color-text);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lightbox-btn:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }

@media (max-width: 600px) {
  .lightbox-btn { display: none; }
}

/* Skeleton blocks --------------------------------------------------------- */
.skeleton {
  display: block;
  background: var(--skeleton);
  border-radius: 8px;
}
.skeleton.h-sm { height: 12px; }
.skeleton.h-md { height: 18px; }
.skeleton.h-lg { height: 34px; }

.skeleton.w-35 { width: 35%; }
.skeleton.w-40 { width: 40%; }
.skeleton.w-50 { width: 50%; }
.skeleton.w-55 { width: 55%; }
.skeleton.w-60 { width: 60%; }
.skeleton.w-65 { width: 65%; }
.skeleton.w-70 { width: 70%; }
.skeleton.w-75 { width: 75%; }
.skeleton.w-80 { width: 80%; }
.skeleton.w-85 { width: 85%; }
.skeleton.w-90 { width: 90%; }
.skeleton.w-95 { width: 95%; }

/* ==========================================================================
    Social proof — infinite auto-scrolling marquee (draggable)
    ========================================================================== */
.marquee {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* horizontal drag captured here, vertical page scroll still works */
  /* headroom so the hover glow isn't clipped by the overflow mask */
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  margin: calc(clamp(1.5rem, 4vw, 2.5rem) * -1) 0;
  /* Fade edges so cards dissolve into the background */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee.is-dragging { cursor: grabbing; }

.marquee-track {
  display: flex;
  gap: var(--marquee-gap, 1.75rem);
  width: max-content;
  will-change: transform;
}

/* Spotlight variant — cards scale up as they approach the centre. The extra
   vertical headroom keeps the enlarged centre card AND its hover glow from
   being clipped at the marquee's overflow edge (which sits at the next section). */
.marquee-spotlight {
  padding: clamp(4rem, 10vw, 7rem) 0;
  margin: calc(clamp(4rem, 10vw, 7rem) * -1) 0;
}
.marquee-spotlight .proof-card {
  transition: none;
  will-change: scale;
}
/* Showcase marquee: keep the image's natural ratio so nothing gets cropped.
   No glow by default; heavinest hover glow removed too. The image is padded
   inward so there's breathing room inside the frame on all corners. */
#games-marquee .proof-media {
  aspect-ratio: auto;
  object-fit: contain;
  padding: 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 24px -18px var(--card-shadow);
}
#games-marquee .proof-card::before { opacity: 0; }
#games-marquee .proof-card.is-hover::before { opacity: .12; }
#games-marquee .proof-card.is-hover .proof-media {
  transform: scale(1.06);
  border-color: var(--border-strong);
  box-shadow: 0 0 10px var(--glow-accent-2), 0 14px 30px -20px var(--card-shadow);
}

/* --------------------------------------------------------------------------
   Vertical marquee variant — twin columns scrolling in opposite directions.
   -------------------------------------------------------------------------- */
.v-marquee-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--marquee-gap, 1.75rem);
}
.marquee-v {
  height: clamp(420px, 65vh, 660px);
  touch-action: pan-x; /* vertical drag captured here, horizontal page scroll still works */
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  margin: calc(clamp(1.5rem, 4vw, 2.5rem) * -1) 0;
  /* Fade top/bottom edges so cards dissolve into the background */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-v .marquee-track {
  flex-direction: column;
  width: auto;
}
.marquee-v .proof-card {
  width: min(100%, 380px);
}

/* Wide screens: both tracks hold all cards — show half per column
   (left scrolls up through items 1–4, right scrolls down through 5–8).
   Pattern repeats every 8 children so every cloned copy is split too. */
@media (min-width: 721px) {
  #testimonials-marquee-a .proof-card:nth-child(8n+5),
  #testimonials-marquee-a .proof-card:nth-child(8n+6),
  #testimonials-marquee-a .proof-card:nth-child(8n+7),
  #testimonials-marquee-a .proof-card:nth-child(8n+8) { display: none; }
  #testimonials-marquee-b .proof-card:nth-child(8n+1),
  #testimonials-marquee-b .proof-card:nth-child(8n+2),
  #testimonials-marquee-b .proof-card:nth-child(8n+3),
  #testimonials-marquee-b .proof-card:nth-child(8n+4) { display: none; }
}

/* Narrow screens: merge into one full-width bar with all testimonials */
@media (max-width: 720px) {
  .v-marquee-grid { grid-template-columns: minmax(0, 1fr); }
  #testimonials-marquee-b { display: none; }
  .marquee-v .proof-card { width: min(100%, 340px); }
}

/* ==========================================================================
    Testimonial case-study popup
    Opens from the clicked image (FLIP scale), blurs the page behind it.
    ========================================================================== */
body.t-modal-open { overflow: hidden; }

.t-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.t-lightbox[hidden] { display: none; }

/* Dimmed + blurred page behind the popup */
.t-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, .55);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  opacity: 0;
  transition:
    opacity .35s ease,
    -webkit-backdrop-filter .35s ease,
    backdrop-filter .35s ease;
}
.t-lightbox.is-open .t-lightbox-backdrop {
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.t-lightbox-panel {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(1100px, 94vw);
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 44px 90px -30px rgba(0, 0, 0, .75);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2, .8, .3, 1), opacity .3s ease;
  will-change: transform;
}
.t-lightbox.is-open .t-lightbox-panel { opacity: 1; }

.t-lightbox-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.t-lightbox-close:hover {
  border-color: var(--glow-accent);
  transform: rotate(90deg);
}

.t-lightbox-scroll {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* detail smaller | video/showcase bigger */
  gap: 1rem;
  align-items: start;
  max-height: calc(100vh - 2 * clamp(1rem, 4vw, 2.5rem));
  overflow-y: auto;
  padding: .8rem;
}

/* Left column: detail image + review button, centered as a group */
.t-lightbox-left {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.t-lightbox-left .t-lightbox-media { width: 100%; padding: 10px; box-sizing: border-box; }

/* Popup media carousel (right column) — reuses hero .gallery classes */
.t-lightbox-scroll .gallery-slide img { cursor: default; }
.t-lightbox-scroll .gallery:hover { transform: none; box-shadow: none; }
.t-lightbox-scroll .gallery-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
/* Arrows back to centered; dots get their own strip below the media so they
   never overlap the video's native bottom controls */
.t-lightbox-scroll .gallery {
  padding-bottom: 2.4rem;
}
.t-lightbox-scroll .gallery-slides {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2.4rem;
}
.t-lightbox-scroll .gallery-dots {
  bottom: .15rem;
}

.t-lightbox-media,
.t-lightbox-video {
  display: block;
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border-soft);
  background: var(--color-surface);
}
.t-lightbox-video { aspect-ratio: 16 / 9; }

.t-lightbox-caption {
  grid-column: 1 / -1;
  margin: .2rem 0 0;
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Title centered above the review image in the left column */
.t-lightbox-title {
  margin: 0;
  text-align: center;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}

.t-lightbox-cta {
  display: block;
  width: max-content;
  padding: .9rem 2.2rem;
  font-size: 1rem;
  white-space: nowrap;
}
.t-lightbox-cta.is-hidden { display: none; }

@media (max-width: 720px) {
  .t-lightbox-scroll { grid-template-columns: minmax(0, 1fr); }
  .t-lightbox-left { justify-content: flex-start; }
}

.proof-card {
  position: relative;
  flex-shrink: 0;
  width: clamp(230px, 24vw, 320px);
  user-select: none;
  -webkit-user-select: none;
}

/* Purple gradient halo behind the image — lights up on hover */
.proof-card::before {
  content: "";
  position: absolute;
  top: -7%;
  left: -8%;
  right: -8%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background:
    radial-gradient(90% 90% at 50% 45%, var(--color-accent) 0%, var(--glow-accent) 45%, transparent 78%);
  filter: blur(22px);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.proof-card.is-hover::before { opacity: .75; }

.proof-link {
  position: relative;
  z-index: 1;
  display: block;
  cursor: pointer;
}

/* Caption is invisible to the cursor: hover/pause/tooltip only trigger
   when actually over the image itself */
.proof-link figcaption {
  pointer-events: none;
}

/* "Click me!" tooltip that follows the cursor over proof cards */
.proof-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: .32rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--glow-accent);
  border-radius: 999px;
  box-shadow: 0 6px 20px -8px var(--card-shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.92);
  transition: opacity .2s ease, transform .2s ease;
}
.proof-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.proof-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(120% 120% at 30% 20%, var(--glow-accent-2), transparent 60%),
    var(--color-surface);
  box-shadow: 0 22px 44px -20px var(--card-shadow);
  /* receives pointer events so hover/pause only trigger over the image
     (native drag is already disabled via draggable=false + pointerdown preventDefault) */
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}
.proof-card.is-hover .proof-media {
  transform: scale(1.06);
  border-color: var(--glow-accent);
  box-shadow:
    0 0 24px var(--glow-accent),
    0 30px 60px -22px var(--card-shadow);
}
.proof-media.is-missing {
  visibility: visible;
  border-style: dashed;
  opacity: .55;
}

.proof-title {
  display: block;
  margin: .9rem 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-align: center;
}

.proof-desc {
  display: block;
  margin: .3rem 0 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--color-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .marquee { cursor: default; }
}

/* ==========================================================================
    Placeholder sections
    ========================================================================== */
.section { padding: clamp(4rem, 9vh, 7rem) 0; }

.section-head { margin-bottom: 2.2rem; }

.section-title {
  font-size: clamp(1.8rem, 3vw + .5rem, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.placeholder-card {
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  background: var(--color-bg-soft);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.placeholder-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.placeholder-note {
  margin: .45rem 0 0;
  color: var(--color-muted);
  font-size: .95rem;
}

.skeleton-col {
  display: grid;
  gap: 1rem;
}
.skeleton-col.cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 820px) {
  .skeleton-col.cols-3 { grid-template-columns: 1fr; }
}

.mini { padding: 1rem; border: 1px solid var(--border-soft); border-radius: 12px; }

.faq-list {
  display: grid;
  gap: .9rem;
}

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--color-bg-soft);
  overflow: hidden;
  transition: border-color .25s ease;
}
.faq-item[open] { border-color: var(--border-strong); }

.faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-accent-hover);
  border-radius: 2px;
  transition: transform .25s ease;
}
.faq-icon::before { width: 13px; height: 2px; }
.faq-icon::after { width: 2px; height: 13px; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-a {
  padding: 0 1.35rem 1.3rem;
}
.faq-a p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.faq-a strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ==========================================================================
    How it works — four pillars
    ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pillar-reveal,
  .pillar-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.pillar {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pillar-reveal {
  opacity: 0;
  transform: translateY(-3.5rem);
  transition: transform .35s cubic-bezier(.22, .78, .28, 1),
              opacity .35s ease;
  transition-delay: var(--reveal-delay, 0s);
}

.pillar-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.pillar-media {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 6px;
  transform: scale(1);
  transition: transform .6s ease, filter .9s ease;
  filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0));
  will-change: transform, filter;
}

.pillar:hover .pillar-media {
  transform: scale(1.008);
  filter: drop-shadow(0 0 14px rgba(168, 85, 247, calc(var(--glow, .4) * .45)))
          drop-shadow(0 0 5px  rgba(168, 85, 247, calc(var(--glow, .4) * .28)));
}

.pillar-title {
  display: block;
  margin: 1rem auto 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-align: center;
  transform: scale(1);
  transition: transform .6s ease;
  will-change: transform;
}
.pillar:hover .pillar-title {
  transform: scale(1.012);
}

.pillar-desc {
  display: block;
  margin: .35rem auto 0;
  max-width: 34ch;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--color-muted);
  text-align: center;
  transform: scale(1);
  transition: transform .6s ease;
  will-change: transform;
}
.pillar:hover .pillar-desc {
  transform: scale(1.012);
}

.pillar-desc strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ==========================================================================
    Not another course — comparison table
    ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-soft);
}

.compare th,
.compare td {
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.6rem);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--border-soft);
  font-size: .95rem;
  line-height: 1.5;
}

.compare thead th {
  border-top: none;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.compare th.compare-row-label {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.compare th.compare-courses { border-left: 1px solid var(--border-soft); }
.compare td.compare-courses { border-left: 1px solid var(--border-soft); }

.compare th.compare-mentee { border-left: 1px solid var(--border-strong); }
.compare td.compare-mentee { border-left: 1px solid var(--border-strong); }

.compare td.compare-courses { color: var(--color-muted); }

.compare th.compare-mentee {
  color: var(--color-accent-hover);
  box-shadow: inset 0 3px 0 var(--color-accent);
}

.compare td.compare-mentee {
  background: var(--glow-accent-2);
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 620px) {
  .compare { min-width: 560px; }
}

.section-sub {
  margin: .75rem 0 0;
  max-width: none;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.section-sub strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ==========================================================================
    Offer — milestone progression path
    ========================================================================== */
.milestones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}

.milestones::before {
  content: "";
  position: absolute;
  top: calc(0.45rem - 1px);
  left: 0.45rem;
  right: 0.45rem;
  height: 2px;
  background: linear-gradient(90deg, var(--border-strong) 0%, var(--color-accent) 100%);
}

.milestone {
  position: relative;
  padding-top: calc(1.8rem + 0.9rem);
}

.milestone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-bg);
}

.milestone-meta {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.milestone-free {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--color-accent-hover);
}

.milestone-price {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-accent-hover);
}

.milestone-price .price-old {
  margin-right: .4rem;
  font-weight: 500;
  color: var(--color-accent-hover);
  text-decoration: line-through;
  text-decoration-color: var(--color-muted);
}

.milestone-title {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.milestone-num {
  color: var(--color-text);
}

.milestone-desc {
  margin: .4rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.offer-pay-note {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--color-bg-soft);
  text-align: center;
}

.offer-pay-note-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.offer-pay-note-sub {
  margin: .5rem 0 0;
  font-size: .95rem;
  color: var(--color-muted);
}
.offer-pay-note-sub strong {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 1080px) {
  .milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .milestones::before { display: none; }
  .milestone::before { display: none; }
  .milestone { padding-top: 0; }
}

@media (max-width: 620px) {
  .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .milestones { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(90% 120% at 50% 0%, var(--glow-accent-2), transparent 60%),
    var(--color-bg-soft);
}

.final-cta-title {
  font-size: clamp(1.8rem, 3.2vw + .5rem, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.final-cta-sub {
  margin: .9rem auto 0;
  max-width: 48ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.final-cta-sub strong {
  color: var(--color-text);
  font-weight: 600;
}

.final-cta-btn {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  font-size: 1.1rem;
}

.final-cta-note {
  margin: 1.5rem 0 0;
  font-size: .9rem;
  color: var(--color-muted);
}

.final-cta-price {
  margin: .6rem 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-muted);
}
.final-cta-price strong {
  color: var(--color-accent-hover);
  font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  color: var(--color-muted);
}
.site-footer a.footer-link {
  color: var(--color-muted);
}
.site-footer a.footer-link:hover {
  color: var(--color-text);
}
.site-footer .footer-nav {
  display: flex;
  gap: 1.5rem;
}
.site-footer .footer-nav a { color: var(--color-muted); transition: color .15s ease; }
.site-footer .footer-nav a:hover { color: var(--color-text); }

/* ==========================================================================
   Reduced motion — show first phrase statically, no travelling
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rotating-phrase { transition: none; }
  .gallery, .gallery:hover { transform: none; }
}