/* ============================================================
   LEFA ONE TRAINER — Site vitrine
   Built on the LEFA ONE design system tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');

/* ---- Compatibility layer ----------------------------------
   The DS bundle/components reference token names that aren't in
   the token files. Map them onto the real tokens so everything
   resolves. Also re-declared for our own CSS use. ---------- */
:root {
  color-scheme: light;

  --color-primary-dark: var(--color-black);
  --color-primary-light: var(--color-white);
  --color-text-inverse: var(--color-white);

  --lefa-accent: var(--color-gold);              /* tweakable */
  --color-accent-gold: var(--lefa-accent);

  --color-surface-primary: var(--color-white);
  --color-border-primary: var(--color-border-subtle);

  --font-family-body: 'Roboto', system-ui, sans-serif;
  --font-family-display: 'Archivo', system-ui, sans-serif;
  --font-size-body-sm: var(--font-size-small);
  --font-size-body-md: var(--font-size-body);
  --font-size-heading-md: var(--font-size-heading-4);
  --font-size-caption-sm: var(--font-size-2x-small);

  /* Fluid display scale for the site */
  --fs-eyebrow: clamp(0.72rem, 0.4vw + 0.6rem, 0.85rem);
  --fs-h2: clamp(2.1rem, 4.5vw + 0.5rem, 5.2rem);
  --fs-h3: clamp(1.6rem, 2.2vw + 0.8rem, 3rem);
  --fs-display: clamp(3rem, 9vw, 9.5rem);
  --fs-stat: clamp(2.8rem, 6vw, 6.5rem);
  --fs-lead: clamp(1.1rem, 1vw + 0.8rem, 1.6rem);

  --maxw: 1440px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-dur: 2s;            /* tweakable via --lefa-speed (default 0.5×) */
  --gutter: clamp(1.25rem, 3vw, 3.5rem);
  --pk-accent: var(--color-gold);        /* brand accent for premium tiers */
  --pk-check: var(--color-success);      /* DS semantic green for included items */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; }

body {
  font-family: var(--font-family-body);
  color: var(--color-black);
  background: var(--color-white);
  font-size: var(--font-size-body);
  line-height: 1.6;
  overflow-x: clip;
  cursor: auto;
}

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

::selection { background: var(--lefa-accent); color: #000; }

/* ---- Layout helpers --------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(5rem, 11vh, 11rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vh, 5rem); }
/* harmonise the gap between the stats band and the programmes intro */
#programmes { padding-top: clamp(2.5rem, 5vh, 5rem); }

.eyebrow {
  font-family: var(--font-family-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lefa-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}
.eyebrow::before {
  content: "";
  width: 2.4em; height: 1px;
  background: var(--lefa-accent);
  display: inline-block;
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-neutral-600);
  max-width: 42ch;
  font-weight: 300;
}
.gold { color: var(--lefa-accent); }

/* ---- Buttons (DS pattern: black/white + gold underline) ---- */
.btn {
  --bdr: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1.1em 2.2em;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: transform 0.5s var(--ease), background-color 0.3s var(--ease-std), color 0.3s var(--ease-std), opacity 0.3s;
  will-change: transform;
}
.btn .btn__icon { transition: transform 0.4s var(--ease); }
.btn:hover .btn__icon { transform: translateX(5px); }

.btn-primary {
  background: var(--color-black);
  color: var(--color-white);
  border-bottom: 2px solid var(--lefa-accent);
}
.btn-primary:hover { background: var(--lefa-accent); color: #000; }

.btn-gold { background: var(--lefa-accent); color: #000; border-bottom: 2px solid #000; }
.btn-gold:hover { opacity: 0.88; }

.btn-ghost {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}
.btn-ghost:hover { background: currentColor; }
.btn-ghost:hover .btn__label { color: var(--color-white); }
.on-dark .btn-ghost:hover .btn__label { color: #000; }

/* magnetic wrapper keeps layout while inner translates */
.magnetic { display: inline-block; }

/* ---- Reveal system ---------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
  transition-delay: var(--rd, 0s);
}
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* line-mask reveal for big headings */
.reveal-lines { display: block; }
.reveal-lines .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.reveal-lines .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal-lines.is-in .line > span { transform: translateY(0); }

/* cinematic image clip reveal */
.img-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); transition-delay: var(--rd, 0s); }
.img-clip.is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .reveal-lines .line > span, .img-clip { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-index-fixed);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.6rem) var(--gutter);
  color: var(--color-white);
  transition: background-color 0.5s var(--ease-std), color 0.5s var(--ease-std), box-shadow 0.5s, padding 0.5s var(--ease-std);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--color-black);
  box-shadow: 0 1px 0 var(--color-border-subtle);
  padding-block: clamp(0.7rem, 1.4vw, 1.1rem);
}
.brand {
  font-family: var(--font-family-display);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  display: flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  color: inherit;
}
.brand .dot { width: 9px; height: 9px; background: var(--lefa-accent); border-radius: 50%; display: inline-block; }
.brand__mark { width: 34px; height: 34px; object-fit: contain; display: block; flex: none; transition: filter 0.5s var(--ease-std); }
.site-header.scrolled .brand__mark { filter: brightness(0); }
.footer .brand__mark { width: 40px; height: 40px; }
.brand small { font-family: var(--font-family-body); font-weight:400; font-size: 0.6rem; letter-spacing:0.3em; opacity:0.7; }

.main-nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.5vw, 2.8rem); }
.main-nav a {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--lefa-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.main-nav a:hover { opacity: 1; }
.main-nav a:hover::after { transform: scaleX(1); }
.nav-cta { font-size: 0.78rem !important; padding: 0.7em 1.4em; }
.nav-links { display: contents; }
.main-nav a.is-active { opacity: 1; }
.main-nav a.is-active::after { transform: scaleX(1); }

/* ---- Mobile hamburger + drawer ---------------------------- */
.nav-toggle {
  display: none; width: 46px; height: 46px; border: none; background: transparent;
  cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; padding: 0; color: inherit;
}
.nav-toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 0 auto; transition: transform 0.4s var(--ease), opacity 0.3s; }
body.drawer-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.drawer-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.drawer-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-drawer {
  position: fixed; inset: 0; z-index: calc(var(--z-index-fixed) - 1);
  background: rgba(5,5,5,0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0.45s;
}
body.drawer-open .mobile-drawer { opacity: 1; visibility: visible; }
.mobile-drawer__nav { display: flex; flex-direction: column; align-items: center; gap: clamp(1.1rem, 3vh, 1.8rem); }
.mobile-drawer__nav a.drawer-link {
  font-family: var(--font-family-display); font-weight: 800; font-size: clamp(1.7rem, 7vw, 2.4rem);
  text-transform: uppercase; letter-spacing: 0.02em; color: #fff; text-decoration: none; opacity: 0.88;
  transform: translateY(24px); transition: opacity 0.3s, transform 0.5s var(--ease), color 0.2s;
}
body.drawer-open .mobile-drawer__nav a.drawer-link { transform: translateY(0); }
body.drawer-open .mobile-drawer__nav a.drawer-link:nth-child(1){ transition-delay: 0.08s; }
body.drawer-open .mobile-drawer__nav a.drawer-link:nth-child(2){ transition-delay: 0.13s; }
body.drawer-open .mobile-drawer__nav a.drawer-link:nth-child(3){ transition-delay: 0.18s; }
body.drawer-open .mobile-drawer__nav a.drawer-link:nth-child(4){ transition-delay: 0.23s; }
body.drawer-open .mobile-drawer__nav a.drawer-link:nth-child(5){ transition-delay: 0.28s; }
body.drawer-open .mobile-drawer__nav a.drawer-link:nth-child(6){ transition-delay: 0.33s; }
.mobile-drawer__nav a.drawer-link.is-active, .mobile-drawer__nav a.drawer-link:hover { color: var(--lefa-accent); opacity: 1; }
.drawer-cta { margin-top: 1rem; }

body.drawer-open { overflow: hidden; }
body.drawer-open .site-header { background: transparent !important; color: #fff !important; box-shadow: none !important; }
body.drawer-open .site-header .brand__mark { filter: none !important; }

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .main-nav .magnetic { display: none; }
  .nav-toggle { display: flex; }
}

/* ============================================================
   SUB-PAGE HERO
   ============================================================ */
.page-hero {
  position: relative; min-height: clamp(420px, 60svh, 640px);
  display: flex; align-items: flex-end; color: var(--color-white);
  overflow: hidden; background: var(--color-black);
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; background: #0c0c0c; }
.page-hero__media image-slot { width: 100%; height: 120%; display: block; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.88) 100%); z-index: 1;
}
.page-hero__inner {
  position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: var(--gutter); padding-top: clamp(7rem, 14vh, 10rem); padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.page-hero__title { font-size: clamp(2.6rem, 7vw, 6.2rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; max-width: 16ch; margin-top: 1.2rem; }
.page-hero__sub { margin-top: 1.4rem; max-width: 46ch; font-size: var(--fs-lead); font-weight: 300; color: rgba(255,255,255,0.85); }

.breadcrumb {
  display: flex; gap: 0.6rem; align-items: center;
  font-family: var(--font-family-display); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.85;
}
.breadcrumb a { color: inherit; text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--lefa-accent); }
.breadcrumb .sep { color: var(--lefa-accent); }

/* generic centered section head */
.center-head { max-width: 60ch; margin: 0 auto clamp(3rem, 6vh, 5rem); text-align: center; }
.center-head .eyebrow { justify-content: center; }
.center-head .h2 { margin-top: 1.2rem; }
.center-head .lead { margin: 1.4rem auto 0; max-width: 56ch; }

/* ============================================================
   FEATURE ROWS (alternating image / copy)
   ============================================================ */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.feature-row + .feature-row { margin-top: clamp(3.5rem, 8vh, 7rem); }
.feature-row__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #0c0c0c; }
.feature-row__media image-slot { width: 100%; height: 100%; display: block; }
.feature-row__copy .h2, .feature-row__copy .program__title { margin-top: 1.1rem; }
.feature-row__copy .lead { margin-top: 1.3rem; }
.feature-row--rev .feature-row__media { order: 2; }
@media (max-width: 820px) {
  .feature-row { grid-template-columns: 1fr; gap: 2rem; }
  .feature-row--rev .feature-row__media { order: 0; }
}

/* ============================================================
   BENEFITS / FORMATS GRIDS
   ============================================================ */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
@media (max-width: 820px) { .benefits { grid-template-columns: 1fr; } }
.benefit { border: 1px solid var(--color-border-subtle); padding: clamp(1.6rem, 2.4vw, 2.4rem); display: flex; flex-direction: column; gap: 0.7rem; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.benefit:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.benefit__n { font-family: var(--font-family-display); font-weight: 800; color: var(--lefa-accent); font-size: 1.05rem; letter-spacing: 0.04em; }
.benefit h3 { font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.01em; }
.benefit p { color: var(--color-neutral-600); font-weight: 300; }
.on-dark .benefit { border-color: rgba(255,255,255,0.16); }
.on-dark .benefit p { color: rgba(255,255,255,0.68); }

.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
@media (max-width: 820px) { .formats { grid-template-columns: 1fr; } }
.format { border: 1px solid var(--color-border-subtle); overflow: hidden; background: var(--color-white); display: flex; flex-direction: column; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.format:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.format__media { height: clamp(200px, 24vw, 280px); overflow: hidden; position: relative; }
.format__media image-slot { width: 100%; height: 100%; display: block; transition: transform 1.1s var(--ease); }
.format:hover .format__media image-slot { transform: scale(1.06); }
.format__tag { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-family: var(--font-family-display); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--lefa-accent); color: #000; padding: 0.45em 0.9em; }
.format__body { padding: clamp(1.5rem, 2.2vw, 2.1rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.format__body h3 { font-size: 1.45rem; text-transform: uppercase; letter-spacing: -0.01em; }
.format__body p { color: var(--color-neutral-600); font-weight: 300; }
.format__price { margin-top: auto; font-family: var(--font-family-display); font-weight: 800; font-size: 1.15rem; }
.format__price span { color: var(--color-neutral-600); font-weight: 400; font-size: 0.85rem; }

/* ============================================================
   STEP LIST (numbered, light bg)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2.4rem); counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 2rem; border-top: 2px solid var(--color-black); }
.step__n { font-family: var(--font-family-display); font-weight: 900; font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em; }
.step__n .gold { color: var(--lefa-accent); }
.step h3 { font-size: 1.4rem; text-transform: uppercase; letter-spacing: -0.01em; }
.step p { color: var(--color-neutral-600); font-weight: 300; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: flex; flex-direction: column; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; }
.field label { font-family: var(--font-family-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-700); }
.field input, .field textarea, .field select {
  font-family: var(--font-family-body); font-size: 1rem; padding: 0.95rem 1.1rem;
  border: 1px solid var(--color-border-subtle); background: var(--color-white); color: var(--color-black);
  border-radius: var(--radius-xs); transition: border-color 0.2s, box-shadow 0.2s; width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--lefa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lefa-accent) 22%, transparent); }
.contact-info { display: flex; flex-direction: column; gap: 1.8rem; }
.contact-info .ci { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border-subtle); }
.contact-info .ci:last-child { border-bottom: none; }
.contact-info .ci b { font-family: var(--font-family-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; color: var(--color-neutral-600); }
.contact-info .ci a, .contact-info .ci span { font-size: 1.15rem; color: var(--color-black); text-decoration: none; }
.contact-info .ci a:hover { color: var(--lefa-accent); }

/* ============================================================
   CTA BAND (compact, reusable across pages)
   ============================================================ */
.cta-band { background: var(--color-black); color: var(--color-white); text-align: center; }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }
.cta-band h2 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; max-width: 18ch; }
.cta-band .lead { color: rgba(255,255,255,0.72); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
  background: var(--color-black);
}
.hero__media { position: absolute; inset: 0; z-index: 0; background: #0c0c0c; }
.hero__media image-slot { width: 100%; height: 120%; display:block; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.92) 100%);
  z-index: 1;
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--gutter);
  padding-bottom: clamp(3rem, 7vh, 6rem);
}
.hero__eyebrow { margin-bottom: clamp(1.2rem, 3vh, 2.4rem); }
.hero__title {
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 14ch;
}
.hero__title .gold { font-style: italic; font-weight: 800; }
.hero__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}
.hero__sub { max-width: 38ch; font-size: var(--fs-lead); font-weight: 300; color: rgba(255,255,255,0.85); }
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__meta {
  position: absolute; z-index: 2; right: var(--gutter); top: 38%;
  display: flex; flex-direction: column; gap: 1.6rem; text-align: right;
}
.hero__meta .m { }
.hero__meta .m b { font-family: var(--font-family-display); font-size: 1.8rem; font-weight: 800; display:block; }
.hero__meta .m span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
@media (max-width: 880px){ .hero__meta { display: none; } }

.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 1.5rem; left: auto; transform: none;
  z-index: 4; display: flex; flex-direction: row; align-items: center; gap: 0.7rem;
  font-family: var(--font-family-display); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.95;
  color: var(--lefa-accent);
}
.scroll-cue .bar { width: 34px; height: 2px; background: rgba(255,255,255,0.18); position: relative; overflow: hidden; border-radius: 2px; }
.scroll-cue .bar::after {
  content:""; position:absolute; top:0; left:-50%; height:100%; width:60%;
  background: linear-gradient(90deg, transparent, var(--lefa-accent)); animation: cue 2.1s var(--ease-std) infinite;
}
@media (max-width: 880px){ .scroll-cue { right: 50%; transform: translateX(50%); } }
@keyframes cue { 0%{ left:-60%;} 60%,100%{ left:100%;} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  background: var(--color-black);
  color: var(--color-white);
  border-block: 1px solid rgba(255,255,255,0.12);
  padding-block: clamp(1.1rem, 2.4vw, 1.8rem);
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track { display: inline-flex; align-items: center; gap: 2.5rem; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-family-display);
  font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.marquee .sep { color: var(--lefa-accent); font-size: 1em; }
.marquee .outline {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,0.55);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border-subtle);
}
.stat {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--color-border-subtle);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--font-family-display);
  font-size: var(--fs-stat);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.9;
  display: flex; align-items: baseline;
}
.stat__num .suffix { color: var(--lefa-accent); }
.stat__label { margin-top: 0.8rem; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-600); }
@media (max-width: 760px){ .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2n){border-right:none;} .stat:nth-child(-n+2){border-bottom:1px solid var(--color-border-subtle);} }

/* ============================================================
   SECTION HEAD (shared)
   ============================================================ */
.sec-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(3rem, 6vh, 5.5rem); }
.sec-head .h2 { margin-top: 1.2rem; }
@media (max-width: 820px){ .sec-head { grid-template-columns: 1fr; } }

/* ============================================================
   PROGRAMS
   ============================================================ */
.programs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2vw, 2rem); }
@media (max-width: 820px){ .programs-grid { grid-template-columns: 1fr; } }

.program {
  position: relative;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-white);
  padding: 0;
  overflow: hidden;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.program:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.program__media { height: clamp(220px, 26vw, 340px); overflow: hidden; position: relative; }
.program__media image-slot { width: 100%; height: 100%; display: block; transition: transform 1.1s var(--ease); }
.program:hover .program__media image-slot { transform: scale(1.06); }
.program__num {
  position: absolute; top: 1.2rem; left: 1.3rem; z-index: 2;
  font-family: var(--font-family-display); font-weight: 800; font-size: 0.9rem;
  color: #fff; letter-spacing: 0.1em; text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.program__body { padding: clamp(1.6rem, 2.5vw, 2.4rem); display: flex; flex-direction: column; gap: 0.7rem; }
.program__title { font-size: var(--fs-h3); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.program__title .gold { display: inline; }
.program__text { color: var(--color-neutral-600); font-weight: 300; max-width: 40ch; }
.program__meta { margin-top: 0.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip {
  font-family: var(--font-family-display);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 0.4em 0.9em; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-full);
  color: var(--color-neutral-700);
}
.program__link {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-family-display); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-black); text-decoration: none;
}
.program__link .ar { transition: transform 0.4s var(--ease); }
.program:hover .program__link .ar { transform: translateX(6px); color: var(--lefa-accent); }

/* ============================================================
   DARK SECTIONS (method, cta)
   ============================================================ */
.on-dark { background: var(--color-black); color: var(--color-white); }
.on-dark .lead, .on-dark .program__text { color: rgba(255,255,255,0.72); }
.on-dark .eyebrow { color: var(--lefa-accent); }

.method-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: center; }
@media (max-width: 900px){ .method-grid { grid-template-columns: 1fr; } }
.method__portrait { position: relative; background: #0c0c0c; }
.method__portrait image-slot { width: 100%; height: clamp(380px, 50vw, 620px); display: block; }
.method__portrait .tag {
  position: absolute; bottom: 1.4rem; left: 1.4rem;
  background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18); padding: 0.8rem 1.2rem;
}
.method__portrait .tag b { font-family: var(--font-family-display); font-weight: 800; display:block; font-size: 1.05rem; letter-spacing: 0.04em; }
.method__portrait .tag span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lefa-accent); }

.pillars { list-style: none; margin-top: clamp(2rem, 4vh, 3.2rem); display: flex; flex-direction: column; }
.pillar { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem 1.8rem; padding: 1.8rem 0; border-top: 1px solid rgba(255,255,255,0.14); }
.pillar:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.pillar__n { font-family: var(--font-family-display); font-weight: 800; color: var(--lefa-accent); font-size: 1rem; padding-top: 0.4rem; }
.pillar__t { font-family: var(--font-family-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; letter-spacing: -0.01em; }
.pillar__d { grid-column: 2; color: rgba(255,255,255,0.66); font-weight: 300; max-width: 46ch; }

/* ============================================================
   TRANSFORMATIONS — before / after comparison
   ============================================================ */
.ba-feature {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
@media (max-width: 900px){ .ba-feature { grid-template-columns: 1fr; gap: 3rem; } }

.ba-copy .h2 { margin-top: 1.2rem; }
.ba-copy .lead { margin-top: 1.4rem; }
.ba-meta { margin-top: clamp(2rem, 4vh, 3rem); display: flex; flex-direction: column; gap: 1.3rem; }
.ba-person b { font-family: var(--font-family-display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em; display: block; text-transform: uppercase; }
.ba-person span { font-size: 0.86rem; color: var(--color-neutral-600); letter-spacing: 0.02em; }
.ba-badges { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ba-badge {
  font-family: var(--font-family-display);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55em 1em; border-radius: var(--radius-full);
  background: var(--color-black); color: var(--color-white);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.ba-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lefa-accent); }

/* comparison card */
.ba { position: relative; }
.ba__stage {
  --pos: 50%;
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  aspect-ratio: 467 / 943;
  border-radius: 16px;
  overflow: hidden;
  background: #0c0c0c;
  box-shadow: var(--shadow-xl);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.ba__after, .ba__before { position: absolute; inset: 0; }
.ba__after img, .ba__before img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  display: block; -webkit-user-drag: none; pointer-events: none;
}
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); will-change: clip-path; }
.ba__before::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 22%);
}
.ba__pill {
  position: absolute; top: 16px; z-index: 3;
  font-family: var(--font-family-display);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.55em 1em; border-radius: var(--radius-full);
  background: rgba(8,8,8,0.55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
}
.ba__pill--before { left: 16px; }
.ba__pill--after  { right: 16px; }
.ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: rgba(255,255,255,0.92);
  transform: translateX(-1px); z-index: 2; pointer-events: none;
  box-shadow: 0 0 18px rgba(0,0,0,0.45);
}
.ba__handle {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%); z-index: 4;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,0.96); border: none;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  cursor: ew-resize; color: #111;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ba__stage:hover .ba__handle { transform: translate(-50%, -50%) scale(1.06); }
.ba__handle:focus-visible { outline: 3px solid var(--lefa-accent); outline-offset: 3px; }
.ba__handle svg { width: 22px; height: 22px; display: block; }
.ba__hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  font-family: var(--font-family-display);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); background: rgba(8,8,8,0.45);
  padding: 0.5em 0.9em; border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none; transition: opacity 0.4s;
}
.ba__stage:hover .ba__hint, .ba__stage.is-touched .ba__hint { opacity: 0; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2vw, 2rem); }
@media (max-width: 820px){ .quotes { grid-template-columns: 1fr; } }
.quote { border: 1px solid var(--color-border-subtle); padding: clamp(1.8rem, 2.6vw, 2.6rem); display: flex; flex-direction: column; gap: 1.4rem; background: var(--color-white); }
.quote__mark { font-family: var(--font-family-display); font-size: 3rem; line-height: 0.6; color: var(--lefa-accent); font-weight: 900; }
.quote__text { font-size: 1.12rem; line-height: 1.5; font-weight: 400; }
.quote__by { margin-top: auto; display: flex; align-items: center; gap: 0.9rem; }
.quote__by image-slot { width: 46px; height: 46px; display: block; flex: none; }
.quote__by b { font-family: var(--font-family-display); font-weight: 700; display:block; font-size: 0.92rem; }
.quote__by span { font-size: 0.78rem; color: var(--color-neutral-600); }
.stars { color: var(--lefa-accent); letter-spacing: 2px; font-size: 0.9rem; }

/* ============================================================
   PRICING
   ============================================================ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.6rem); align-items: stretch; }
@media (max-width: 820px){ .plans { grid-template-columns: 1fr; } }
.plan {
  border: 1px solid var(--color-border-subtle);
  padding: clamp(1.8rem, 2.6vw, 2.8rem);
  display: flex; flex-direction: column; gap: 1.4rem;
  background: var(--color-white);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.plan--feature { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); position: relative; }
.plan--feature .plan__price small, .plan--feature .plan__name { color: var(--color-white); }
.plan--feature .feat li { color: rgba(255,255,255,0.82); }
.plan__flag {
  position: absolute; top: -1px; right: 1.4rem;
  background: var(--lefa-accent); color: #000; font-family: var(--font-family-display);
  font-weight: 800; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5em 0.9em;
}
.plan__name { font-family: var(--font-family-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; color: var(--color-neutral-600); }
.plan__price { font-family: var(--font-family-display); font-weight: 900; font-size: clamp(2.6rem, 4vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; }
.plan__price small { font-size: 0.9rem; font-weight: 400; color: var(--color-neutral-600); letter-spacing: 0; }
.feat { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.4rem; }
.feat li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.98rem; color: var(--color-neutral-700); }
.feat li .ck { color: var(--lefa-accent); font-weight: 700; flex: none; }
.plan .btn { margin-top: auto; justify-content: center; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final { position: relative; overflow: hidden; color: var(--color-white); text-align: center; }
.cta-final__media { position: absolute; inset: 0; z-index: 0; background: #0c0c0c; }
.cta-final__media image-slot { width: 100%; height: 120%; display: block; }
.cta-final__media::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,0.62); }
.cta-final__inner { position: relative; z-index: 2; padding-block: clamp(6rem, 16vh, 13rem); display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.cta-final h2 { font-size: clamp(2.4rem, 6.5vw, 6rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; max-width: 16ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #050505; color: rgba(255,255,255,0.7); padding-block: clamp(3.5rem, 6vw, 6rem) 2.5rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 760px){ .footer__top { grid-template-columns: 1fr 1fr; } }
.footer .brand { color: var(--color-white); margin-bottom: 1.2rem; }
.footer__col h4 { font-family: var(--font-family-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-white); margin-bottom: 1.2rem; }
.footer__col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; padding: 0.35rem 0; font-size: 0.95rem; transition: color 0.2s, padding-left 0.3s var(--ease); }
.footer__col a:hover { color: var(--lefa-accent); padding-left: 6px; }
.footer__desc { max-width: 34ch; font-weight: 300; font-size: 0.98rem; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: 0.82rem; }
.footer__bottom .socials { display: flex; gap: 1.4rem; }
.footer__bottom a { color: rgba(255,255,255,0.6); text-decoration: none; font-family: var(--font-family-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem; transition: color 0.2s; }
.footer__bottom a:hover { color: var(--lefa-accent); }

/* ---- dark image-slot fallbacks (empty state on dark) ------ */
.hero__media image-slot::part(frame),
.cta-final__media image-slot::part(frame),
.method__portrait image-slot::part(frame) { background: #0d0d0d; }
.hero__media image-slot::part(empty),
.cta-final__media image-slot::part(empty),
.method__portrait image-slot::part(empty) { color: rgba(255,255,255,0.5); }

/* ---- scroll progress + cursor ----------------------------- */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--lefa-accent); z-index: 9999; transition: width 0.1s linear; }

.cursor-glow {
  position: fixed; top: 0; left: 0; width: 360px; height: 360px; border-radius: 50%;
  pointer-events: none; z-index: 9998; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--lefa-accent) 22%, transparent) 0%, transparent 62%);
  opacity: 0; transition: opacity 0.4s; mix-blend-mode: screen; will-change: transform;
}
body.cursor-on .cursor-glow { opacity: 1; }
@media (hover: none) { .cursor-glow { display: none; } }

/* ============================================================
   GLOWING SHADOW  (animated gradient halo behind an element)
   21st.dev/aliimam/glowing-shadow — reimplemented for LEFA ONE
   ============================================================ */
@property --glow-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.glow-shadow { position: relative; display: inline-flex; border-radius: var(--radius-xs); }
.glow-shadow > * { position: relative; z-index: 1; }
.glow-shadow::before,
.magnetic:has(> .btn-gold)::before {
  content: ""; position: absolute; inset: -3px; z-index: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-angle),
    transparent 0deg, var(--lefa-accent) 35deg, #fff3c6 70deg,
    var(--lefa-accent) 105deg, transparent 155deg, transparent 205deg,
    var(--lefa-accent) 250deg, #fff3c6 290deg, var(--lefa-accent) 320deg, transparent 360deg);
  filter: blur(var(--glow-blur, 15px));
  opacity: var(--glow-opacity, 0.9);
  animation: glow-spin var(--glow-speed, 4.5s) linear infinite;
  pointer-events: none;
}
@keyframes glow-spin { to { --glow-angle: 360deg; } }

/* gold buttons: auto-glow via their magnetic wrapper */
.magnetic:has(> .btn-gold) { position: relative; display: inline-flex; border-radius: var(--radius-xs); }
.magnetic:has(> .btn-gold) { --glow-blur: 12px; --glow-speed: 4s; }
.magnetic:has(> .btn-gold) > .btn-gold { position: relative; z-index: 1; }

/* card variant — softer, wider halo */
.glow-shadow--card { display: flex; }
.glow-shadow--card::before { inset: -4px; --glow-blur: 26px; --glow-opacity: 0.7; --glow-speed: 6.5s; border-radius: 4px; }
.glow-shadow--card .plan { width: 100%; }
.glow-shadow--card .plan:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .glow-shadow::before, .magnetic:has(> .btn-gold)::before { animation: none; }
}

/* tweak: disable all glowing halos */
body.no-glow .glow-shadow::before,
body.no-glow .magnetic:has(> .btn-gold)::before { display: none; }

/* ============================================================
   PRICING PACKS  (dark grid — 6 cards incl. bonus)
   ============================================================ */
.pricing-section { background: #000; color: #fff; }
.pricing-section .h2, .pricing-section .sec-head .h2 { color: #fff; }
.pricing-section .lead { color: rgba(255,255,255,0.6); }
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.5vw, 1.5rem); }
@media (max-width: 980px){ .pricing { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .pricing { grid-template-columns: 1fr; } }

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: #0d0d0d; border: 1px solid rgba(255,255,255,0.10);
  padding: clamp(1.6rem, 2.3vw, 2.6rem);
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s var(--ease);
}
.pcard:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.24); box-shadow: 0 22px 54px rgba(0,0,0,0.55); }
.pcard__eyebrow { font-family: var(--font-family-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.pcard__eyebrow--green { color: var(--pk-check); }
.pcard__title { font-family: var(--font-family-display); font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 2.05rem); text-transform: uppercase; letter-spacing: -0.01em; margin-top: 0.7rem; line-height: 1.05; }
.pcard__price { font-family: var(--font-family-display); font-weight: 900; font-size: clamp(2.7rem, 4.4vw, 3.9rem); line-height: 1; letter-spacing: -0.03em; margin-top: 1.3rem; color: #fff; }
.pcard__price span { font-family: var(--font-family-body); font-weight: 400; font-size: 1rem; letter-spacing: 0; color: rgba(255,255,255,0.5); margin-left: 0.15em; }
.pcard__price--red { color: var(--pk-accent); }
.pcard__price--green { color: var(--pk-accent); }
.pcard__feats { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-top: 1.7rem; min-height: 6.4rem; }
.pcard__feats li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; font-size: 1rem; color: rgba(255,255,255,0.82); line-height: 1.35; }
.pcard__feats .ck { color: var(--pk-check); font-weight: 700; }
.pcard__feats li.is-green { color: var(--pk-check); font-weight: 600; }
.pcard__btn {
  margin-top: auto; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 1.05em 1.4em; border: none; cursor: pointer; margin-top: clamp(1.8rem, 3vw, 2.4rem);
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.pcard__feats + .pcard__btn { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.pcard__btn:hover { opacity: 0.9; }
.pcard__btn--white { background: #fff; color: #000; }
.pcard__btn--red { background: var(--pk-accent); color: var(--color-black); }
.pcard__btn--green { background: var(--pk-accent); color: var(--color-black); }
.pcard--pop { border-color: var(--pk-accent); }
.pcard__badge {
  position: absolute; top: -1px; right: -1px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45em;
  background: var(--pk-accent); color: var(--color-black);
  font-family: var(--font-family-display); font-weight: 800; font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6em 0.95em;
}
.pcard--bonus .pcard__feats { margin-top: 1.6rem; }

/* ============================================================
   DARK THEME  (body.theme-dark — togglable + default)
   Only light-surface tokens are remapped. --color-white /
   --color-black stay fixed so text on the already-dark
   sections (hero, footer, marquee, on-dark, pricing) is safe.
   ============================================================ */
body.theme-dark {
  background: #0a0a0a;
  color: #f1f1f1;
  --color-neutral-50: #141414;   /* light section backgrounds */
  --color-neutral-100: #1a1a1a;
  --color-neutral-600: #b0b0b0;  /* secondary text */
  --color-neutral-700: #cfcfcf;
  --color-border-subtle: rgba(255,255,255,0.12);
}

/* scrolled header turns to a dark glass bar instead of white */
body.theme-dark .site-header.scrolled {
  background: rgba(12,12,12,0.82);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10);
}
body.theme-dark .site-header.scrolled .brand__mark { filter: none; }

/* white card surfaces → elevated dark surface */
body.theme-dark .program,
body.theme-dark .format,
body.theme-dark .quote,
body.theme-dark .plan {
  background: #141414;
  border-color: rgba(255,255,255,0.10);
}
body.theme-dark .plan--feature { background: #000; border-color: #000; }

/* form fields */
body.theme-dark .field input,
body.theme-dark .field textarea,
body.theme-dark .field select {
  background: #141414; color: #f1f1f1; border-color: rgba(255,255,255,0.14);
}
body.theme-dark .field input::placeholder,
body.theme-dark .field textarea::placeholder { color: rgba(255,255,255,0.38); }

/* hard-coded black text → light */
body.theme-dark .contact-info .ci a,
body.theme-dark .contact-info .ci span,
body.theme-dark .program__link { color: #f1f1f1; }

/* black dividers / borders → light */
body.theme-dark .step { border-top-color: rgba(255,255,255,0.55); }

/* primary button reads against the dark page */
body.theme-dark .btn-primary { background: #1c1c1c; }
body.theme-dark .btn-primary:hover { background: var(--lefa-accent); color: #000; }
body.theme-dark .btn-ghost { color: #f1f1f1; }
body.theme-dark .btn-ghost:hover .btn__label { color: #000; }

/* ============================================================
   WHY-US BENTO GRID  (inspired by 21st.dev bento-grid-01,
   ported to vanilla & LEFA ONE design system: gold/dark,
   sharp corners, rotating conic glow on hover)
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 210px;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 1.6rem 1.7rem;
  background: #121212;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xs);
  transition: transform 0.5s var(--ease), border-color 0.3s, background 0.3s;
}
.bento__cell:hover { transform: translateY(-4px); border-color: rgba(212,175,55,0.45); background: #161616; }
/* rotating gold halo behind cell on hover (reuses --glow-angle @property) */
.bento__cell::before {
  content: ""; position: absolute; inset: -1px; z-index: 0;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--glow-angle), transparent 0deg,
    var(--lefa-accent) 90deg, transparent 200deg, var(--lefa-accent) 320deg, transparent 360deg);
  -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 0.4s; animation: glow-spin 5s linear infinite;
}
.bento__cell:hover::before { opacity: 0.9; }
body.no-glow .bento__cell::before { display: none; }

.bento__cell > * { position: relative; z-index: 1; }
.bento__art { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.bento__title { font-family: var(--font-display, 'Archivo'), sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: #fff; margin: 0; }
.bento__desc { color: rgba(255,255,255,0.55); font-size: 0.86rem; line-height: 1.45; margin: 0.35rem 0 0; }
.bento__cell--tall { grid-column: span 2; grid-row: span 2; }
.bento__cell--wide { grid-column: span 3; }
.bento__cell--std  { grid-column: span 2; }

/* --- art: pulse rings --- */
.b-pulse { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }
.b-pulse__core { width: 16px; height: 16px; border-radius: 50%; background: var(--lefa-accent); box-shadow: 0 0 18px var(--lefa-accent); }
.b-pulse__ring { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border: 2px solid var(--lefa-accent); border-radius: 50%; opacity: 0; animation: b-ring 3s ease-out infinite; }
.b-pulse__ring:nth-child(2) { animation-delay: 1s; }
.b-pulse__ring:nth-child(3) { animation-delay: 2s; }
@keyframes b-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }

/* --- art: big shimmer number --- */
.b-num { font-family: var(--font-display, 'Archivo'), sans-serif; font-weight: 800; font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(110deg, #fff 30%, var(--lefa-accent) 50%, #fff 70%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: b-shimmer 5s linear infinite; }
@keyframes b-shimmer { to { background-position: -220% 0; } }

/* --- art: periodised bars --- */
.b-bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.b-bars span { width: 12px; background: rgba(255,255,255,0.14); border-radius: 2px; animation: b-bar 2.4s ease-in-out infinite; }
.b-bars span:nth-child(1){ animation-delay: 0s; } .b-bars span:nth-child(2){ animation-delay: 0.2s; }
.b-bars span:nth-child(3){ animation-delay: 0.4s; } .b-bars span:nth-child(4){ animation-delay: 0.6s; }
.b-bars span:nth-child(5){ animation-delay: 0.8s; }
@keyframes b-bar { 0%,100% { height: 22%; background: rgba(255,255,255,0.14);} 50% { height: 100%; background: var(--lefa-accent);} }

/* --- art: macro dots in sequence --- */
.b-macros { display: flex; gap: 14px; }
.b-macros i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 0.7rem; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); animation: b-macro 2.4s ease-in-out infinite; }
.b-macros i:nth-child(2){ animation-delay: 0.8s; } .b-macros i:nth-child(3){ animation-delay: 1.6s; }
@keyframes b-macro { 0%,100% { transform: scale(1); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1);} 50% { transform: scale(1.12); color: #000; background: var(--lefa-accent); border-color: var(--lefa-accent);} }

/* --- art: phone scan --- */
.b-phone { width: 56px; height: 96px; border: 2px solid rgba(255,255,255,0.25); border-radius: 10px; position: relative; overflow: hidden; }
.b-phone::before { content: ""; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(212,175,55,0.55), transparent); animation: b-scan 2.6s ease-in-out infinite; }
@keyframes b-scan { 0%,100% { top: -30%; } 50% { top: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .b-pulse__ring, .b-num, .b-bars span, .b-macros i, .b-phone::before, .bento__cell::before { animation: none !important; }
}
@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .bento__cell--tall { grid-column: span 2; grid-row: span 1; }
  .bento__cell--wide, .bento__cell--std { grid-column: span 1; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--tall, .bento__cell--wide, .bento__cell--std { grid-column: span 1; }
}