@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..900;1,62..125,400..900&family=JetBrains+Mono:wght@500;600&display=swap");

/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:var(--font-body);
  background:#000;
  color:#e9ebe6;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}

/* ============ TOKENS ============ */
:root{
  --bg:#000;
  --bg-2:#0b0b0c;
  --surface:#101011;
  --surface-2:#1a1c1f;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#e9ebe6;
  --muted:#a4a8a0;
  /* MindHacking palette: graphite + the mark's acid lime. One accent, used surgically. */
  --lime:#A1FF2F;
  --lime-hi:#c2ff73;
  --ink:#000;         /* text on lime */
  --accent:var(--lime);
  --accent-2:var(--lime);
  --accent-3:var(--lime);
  /* OKLCH triad around the lime (h≈132): raspberry h≈12 and electric blue h≈252, both at
     L .66 / high chroma so the two secondaries weigh the same and never out-shout the lime */
  --magenta:#ff376b;
  --blue:#1f94ff;
  --accent-4:var(--magenta);   /* "problems" section only */
  --radius:6px;
  --radius-sm:4px;
  --cut:10px;            /* chamfer size, echoes the mark's clipped corners */
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  /* HUD corner bracket (top-left), layered onto key cards */
  --tick:linear-gradient(var(--lime),var(--lime)) top left/16px 2px no-repeat,linear-gradient(var(--lime),var(--lime)) top left/2px 16px no-repeat;
  --container:1240px;
}

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;font-stretch:108%;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.4rem,calc(var(--stop-w) * 6.5 / 100),5.5rem)}
h2{font-size:clamp(2rem,calc(var(--stop-w) * 4.6 / 100),3.75rem);text-wrap:balance}
h3{font-size:clamp(1.4rem,calc(var(--stop-w) * 2.2 / 100),1.85rem)}
h4{font-size:1.15rem;letter-spacing:-.01em}
p{color:#e9ebe6}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);
  padding:.45rem .75rem;border:1px solid rgba(161,255,47,.28);
  border-radius:2px;background:rgba(161,255,47,.04);
}
.eyebrow::before{
  content:"";width:6px;height:6px;background:currentColor;flex:none;
  clip-path:polygon(0 0,100% 0,100% 100%);   /* tiny wedge: the mark's cut, in miniature */
}
/* Accent words: the wordmark's forward slant, in lime. */
.gradient-text{
  color:var(--lime);font-style:italic;
  padding-right:.06em;   /* keeps the italic overhang off the next word */
}

/* ============ LAYOUT ============ */
/* Step-based layout — sections full-bleed; .container holds the
   content column at one of four design widths and snaps per stop.
   --stop-w substitutes for cqw in clamp() expressions. */
:root{--stop-w:1440px}
@media(max-width:1439px){:root{--stop-w:800px}}
@media(max-width:799px){:root{--stop-w:375px}}
@media(max-width:374px){:root{--stop-w:320px}}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
@media(max-width:1439px){.container{max-width:800px}}
@media(max-width:799px){.container{max-width:375px;padding:0 16px}}
@media(max-width:374px){.container{max-width:320px;padding:0 12px}}
section{padding:120px 0;position:relative}
@media(max-width:799px){section{padding:80px 0}}

/* ============ GLOBAL BACKGROUND ============ */
.bg-scene{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:#000;
}
.bg-layer{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.bg-layer.is-active{opacity:1}
.bg-layer[data-scene="hero"]{
  background:
    radial-gradient(60% 55% at 20% 15%,rgba(161,255,47,0.09),transparent 65%),
    radial-gradient(55% 50% at 85% 35%,rgba(255,255,255,0.048),transparent 70%),
    radial-gradient(50% 40% at 50% 100%,rgba(161,255,47,0.06),transparent 70%);
}
.bg-layer[data-scene="concept"]{
  background:
    radial-gradient(60% 55% at 80% 20%,rgba(255,55,107,0.18),transparent 60%),
    radial-gradient(50% 50% at 15% 70%,rgba(255,255,255,0.036),transparent 65%),
    radial-gradient(45% 40% at 50% 110%,rgba(161,255,47,0.036),transparent 70%);
}
.bg-layer[data-scene="impact"]{
  background:
    radial-gradient(70% 60% at 50% 40%,rgba(161,255,47,0.099),transparent 65%),
    radial-gradient(55% 50% at 90% 80%,rgba(255,255,255,0.054),transparent 65%),
    radial-gradient(50% 45% at 10% 20%,rgba(161,255,47,0.06),transparent 65%);
}
.bg-layer[data-scene="action"]{
  background:
    radial-gradient(65% 55% at 80% 50%,rgba(255,255,255,0.06),transparent 60%),
    radial-gradient(55% 45% at 20% 80%,rgba(255,55,107,0.14),transparent 65%),
    radial-gradient(45% 45% at 15% 15%,rgba(161,255,47,0.045),transparent 70%);
}
.bg-layer[data-scene="formats"]{
  background:
    radial-gradient(60% 55% at 30% 40%,rgba(161,255,47,0.108),transparent 65%),
    radial-gradient(55% 50% at 85% 70%,rgba(161,255,47,0.072),transparent 65%),
    radial-gradient(40% 40% at 60% 110%,rgba(255,255,255,0.024),transparent 70%);
}
.bg-layer[data-scene="opinions"]{
  background:
    radial-gradient(55% 50% at 15% 30%,rgba(255,255,255,0.042),transparent 70%),
    radial-gradient(55% 50% at 85% 60%,rgba(161,255,47,0.063),transparent 70%),
    radial-gradient(40% 35% at 50% 100%,rgba(161,255,47,0.036),transparent 70%);
}
.bg-layer[data-scene="contact"]{
  background:
    radial-gradient(65% 60% at 50% 30%,rgba(161,255,47,0.099),transparent 60%),
    radial-gradient(55% 50% at 90% 80%,rgba(255,55,107,0.16),transparent 65%),
    radial-gradient(55% 50% at 10% 90%,rgba(255,255,255,0.054),transparent 65%);
}
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(161,255,47,.35) 1px,transparent 1.2px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 40%,#000 30%,transparent 80%);
}
@media(prefers-reduced-motion:reduce){
  .bg-layer{transition:none}
}
/* Film grain: breaks up banding on large dark fields. Desktop only (see .is-mobile). */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ PERFORMANCE BUDGETS ============
   Classes on <html> are set by the inline head script BEFORE first paint.
   Each rule targets the cheapest flag that still solves the problem. */

/* Scene-transition fixed background — 7 full-viewport layers cross-faded on
   scroll is the single most expensive thing on the page for mobile GPUs.
   Mobile gets one static gradient instead; desktop keeps the full effect. */
.is-mobile .bg-layer{display:none}
.is-mobile .bg-scene{
  background:
    radial-gradient(60% 40% at 20% 10%,rgba(161,255,47,0.081),transparent 70%),
    radial-gradient(55% 45% at 85% 80%,rgba(255,255,255,0.042),transparent 70%),
    #000;
}
/* Masked grid overlay — repaints on every scroll frame. Skip on mobile. */
.is-mobile .bg-grid,.is-mobile body::after{display:none}

/* Backdrop-filter blur is consistently slow on mobile GPUs — replace with
   a solid at the same perceived darkness. */

/* Only reduced-motion kills continuous CSS animations. GPU-only transforms
   (translateX on a composited layer) are basically free, so keep marquees &
   photo-carousel running on mobile — they give the page its sense of life. */
.is-reduced .marquee-track,
.is-reduced .photo-track{animation:none !important}
.is-reduced .reveal{opacity:1 !important;transform:none !important;filter:none !important}

/* content-visibility:auto lets the browser skip layout/paint on offscreen
   sections until they're near the viewport. Huge win on long pages.
   contain-intrinsic-size reserves predicted height so scroll doesn't jump
   when a section pops in. */
#formats,
#opinions,
.brands,
section:has(.faq-grid),
#contact{
  content-visibility:auto;
  contain-intrinsic-size:1px 1200px;
}

/* Hero fallback when the video is skipped (reduced-motion / tiny-net /
   save-data / mobile while video still buffers). Rich layered gradient so
   the hero never looks empty. */
.hero-no-video .hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 45% at 25% 20%,rgba(161,255,47,0.126),transparent 65%),
    radial-gradient(50% 40% at 80% 70%,rgba(255,255,255,0.066),transparent 65%),
    radial-gradient(45% 35% at 50% 100%,rgba(161,255,47,0.072),transparent 70%),
    linear-gradient(180deg,#050505 0%,#000 100%);
}

/* ============ NAV — "command strip" ============
   A full-bleed bar of hard-edged cells: logo | 01…06 section cells | lang | CTA slab.
   Cells fill lime from the floor on hover; the current section gets a lime cap;
   a 2px scroll-progress rail runs along the bottom edge.
   ≤1439px the cells collapse into a full-screen index overlay (see below). */
:root{--nav-h:68px}
@media(max-width:799px){:root{--nav-h:60px}}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.35));
  transition:background .4s ease;
}
.nav.scrolled{background:rgba(0,0,0,.94)}
@media(min-width:1440px){
  .nav{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
  .nav.scrolled{background:rgba(0,0,0,.8)}
}
.nav .container.nav-inner{max-width:none;padding:0;height:100%}
.nav-inner{display:flex;align-items:stretch}
.logo{
  display:flex;align-items:center;flex:none;
  padding:0 28px;border-right:1px solid var(--line-2);
}
.logo-img{height:44px;width:auto;display:block}
@media(max-width:799px){.logo{padding:0 16px}.logo-img{height:36px}}
footer .logo-img{height:60px}
footer .logo{padding:0;border:0}

/* desktop cells */
.nav-links{display:flex;flex:1;align-items:stretch;min-width:0}
.nav-cell{
  position:relative;flex:1;min-width:0;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:0 20px;border-right:1px solid var(--line);
  color:var(--text);overflow:hidden;
}
.nav-cell i{
  font-style:normal;font-family:var(--font-mono);font-size:.64rem;font-weight:600;
  letter-spacing:.14em;color:var(--lime);transition:color .3s;
}
.nav-cell span{
  font-family:var(--font-display);font-weight:800;font-stretch:112%;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:transform .45s cubic-bezier(.7,0,.2,1),color .3s;
}
.nav-cell::before{                     /* lime floor-fill */
  content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.nav-cell::after{                      /* current-section cap */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1);
}
.nav-cell:hover::before,.nav-cell:focus-visible::before{transform:scaleY(1)}
.nav-cell:hover i,.nav-cell:hover span,.nav-cell:focus-visible i,.nav-cell:focus-visible span{color:var(--ink)}
.nav-cell:hover span{transform:translateX(4px)}
.nav-cell:focus-visible{outline:none}
.nav-cell.is-current::after{transform:scaleX(1)}
.nav-cell.is-current i{color:#fff}

/* lang cell */
.lang-switch{
  display:flex;align-items:stretch;flex:none;border-right:1px solid var(--line-2);
  font-family:var(--font-mono);
}
.lang-switch button{
  padding:0 16px;font-size:.72rem;font-weight:600;letter-spacing:.12em;color:var(--muted);
  transition:color .2s,background .2s;
}
.lang-switch button:hover{color:#fff;background:rgba(255,255,255,.05)}
.lang-switch button.is-active{color:var(--ink);background:var(--lime)}

/* right: CTA slab + burger */
.nav-right{display:flex;align-items:stretch;flex:none;margin-left:auto}
.nav .nav-cta{
  height:100%;padding:0 34px;clip-path:none;border-radius:0;font-size:.82rem;
}
.nav .nav-cta::before{content:"";width:8px;height:8px;background:var(--ink);flex:none;
  clip-path:polygon(0 0,100% 0,100% 100%);transition:transform .3s}
.nav .nav-cta:hover{transform:none}
.nav .nav-cta:hover::before{transform:rotate(90deg)}
.nav-toggle{
  display:none;width:var(--nav-h);height:100%;place-items:center;
  border-left:1px solid var(--line-2);position:relative;
}
.nav-toggle:hover{background:rgba(255,255,255,.04)}
.nav-toggle-bars{position:relative;width:26px;height:12px;display:block}
.nav-toggle-bars i{
  position:absolute;left:0;height:2px;background:#fff;
  transition:transform .45s cubic-bezier(.7,0,.2,1),width .45s cubic-bezier(.7,0,.2,1),top .45s cubic-bezier(.7,0,.2,1);
}
.nav-toggle-bars i:first-child{top:0;width:26px}
.nav-toggle-bars i:last-child{top:10px;width:16px;background:var(--lime)}
.nav-toggle:hover .nav-toggle-bars i:last-child{width:26px}
.nav-open .nav-toggle-bars i:first-child{top:5px;transform:rotate(45deg)}
.nav-open .nav-toggle-bars i:last-child{top:5px;width:26px;transform:rotate(-45deg)}

.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.nav-progress i{display:block;height:100%;background:var(--lime);transform:scaleX(var(--p,0));transform-origin:left;will-change:transform}

.nav-links .nav-links-cta{display:none}

/* ≤1439: full-screen index overlay */
@media(max-width:1439px){
  .nav-toggle{display:grid}
  .nav-links{
    position:fixed;inset:0;z-index:-1;
    flex-direction:column;justify-content:center;gap:0;
    padding:calc(var(--nav-h) + 24px) max(24px,6vw) 32px;
    background:
      radial-gradient(60% 50% at 90% 10%,rgba(161,255,47,.1),transparent 70%),
      #000;
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path .75s cubic-bezier(.77,0,.18,1),visibility 0s .75s;
  }
  .nav-open .nav-links{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .75s cubic-bezier(.77,0,.18,1),visibility 0s}
  .nav-cell{
    flex:none;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:18px;
    padding:14px 0;border-right:0;border-bottom:1px solid var(--line);overflow:visible;
    opacity:0;transform:translateY(40px);
    transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);
  }
  .nav-cell::before,.nav-cell::after{display:none}
  .nav-cell i{font-size:.8rem;min-width:2.2em}
  .nav-cell span{
    font-weight:900;font-style:italic;font-stretch:112%;letter-spacing:-.02em;
    font-size:clamp(2rem,6.4vw,4.2rem);line-height:1;
  }
  .nav-cell:hover span,.nav-cell:focus-visible span{color:var(--lime);transform:translateX(14px)}
  .nav-cell:hover i,.nav-cell:focus-visible i{color:#fff}
  .nav-cell.is-current span{color:var(--lime)}
  .nav-open .nav-cell{opacity:1;transform:none}
  .nav-open .nav-cell:nth-child(1){transition-delay:.22s}
  .nav-open .nav-cell:nth-child(2){transition-delay:.28s}
  .nav-open .nav-cell:nth-child(3){transition-delay:.34s}
  .nav-open .nav-cell:nth-child(4){transition-delay:.40s}
  .nav-open .nav-cell:nth-child(5){transition-delay:.46s}
  .nav-open .nav-cell:nth-child(6){transition-delay:.52s}
  .lang-switch{
    align-self:flex-start;margin-top:28px;border:1px solid var(--line-2);height:44px;
    opacity:0;transition:opacity .5s ease .6s;
  }
  .nav-open .lang-switch{opacity:1}
  .nav-links .nav-links-cta{
    display:inline-flex;align-self:flex-start;margin-top:16px;
    opacity:0;transform:translateY(20px);transition:opacity .5s ease .62s,transform .6s cubic-bezier(.2,.8,.2,1) .62s;
  }
  .nav-open .nav-links .nav-links-cta{opacity:1;transform:none}
  html.menu-open{overflow:hidden}
}
@media(max-width:799px){
  .nav .nav-cta{display:none !important}
  .nav-cell{padding:11px 0}
  .nav-cell i{font-size:.7rem}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:15px 26px;border-radius:2px;
  font-family:var(--font-display);font-weight:700;font-stretch:110%;
  font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.1;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s,border-color .2s,color .2s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn svg{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(3px)}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
/* Primary: solid lime slab with the mark's two clipped corners */
.btn-primary{
  color:var(--ink);background:var(--lime);border-radius:0;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.btn-primary:hover{background:var(--lime-hi);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost{
  color:var(--text);background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);
}
.btn-ghost:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)}
.btn-outline{
  color:#fff;background:transparent;
  border:1px solid rgba(161,255,47,.45);
}
.btn-outline:hover{
  color:var(--ink);background:var(--lime);border-color:var(--lime);
  transform:translateY(-2px);
}
.btn svg{width:18px;height:18px}

/* Phones: uppercase wide labels must wrap rather than push the column wider */
@media(max-width:799px){
  .btn{white-space:normal;text-align:center;justify-content:center;letter-spacing:.03em;font-size:.86rem}
}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:100px 0 40px;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;opacity:.85;
}
.hero::after{
  content:"";before:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(65% 50% at 50% 35%,rgba(0,0,0,0.12),rgba(0,0,0,0.3) 80%),
    linear-gradient(180deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.26) 55%,#000 100%),
    radial-gradient(60% 40% at 20% 80%,rgba(161,255,47,0.045),transparent 60%),
    radial-gradient(60% 40% at 80% 20%,rgba(255,255,255,0.024),transparent 60%);
}
.hero-inner{
  display:block;text-align:center;position:relative;z-index:2;
  max-width:880px;margin:0 auto;
}
.hero-eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent-3);
  margin:0 auto;
}
.hero h1{
  margin:22px auto 10px;text-align:center;
  font-size:clamp(2.4rem,calc(var(--stop-w) * 5.6 / 100),4.4rem);line-height:.96;
  font-weight:900;font-style:italic;font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em;
  text-wrap:balance;max-width:900px;
  text-shadow:0 1px 2px rgba(0,0,0,.45),0 6px 32px rgba(0,0,0,.7);
}
.hero h2.hero-subtitle{
  margin:0 auto 28px;text-align:center;
  font-family:var(--font-display);font-weight:600;font-stretch:100%;
  font-size:clamp(1.5rem,calc(var(--stop-w) * 2.7 / 100),2.3rem);line-height:1.2;
  color:#fff;max-width:780px;text-wrap:balance;letter-spacing:-.01em;
  opacity:.95;
  text-shadow:0 1px 2px rgba(0,0,0,0.4),0 4px 24px rgba(0,0,0,0.6);
}
.hero p.lead{
  font-size:clamp(1.15rem,calc(var(--stop-w) * 1.5 / 100),1.4rem);color:var(--text);
  max-width:820px;margin:0 auto;text-align:center;line-height:1.5;text-wrap:pretty;
  text-shadow:0 1px 2px rgba(0,0,0,0.4),0 4px 20px rgba(0,0,0,0.55);
}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.hero-meta{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:.9rem 1.4rem;
  margin-top:48px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.08);
  max-width:760px;margin-left:auto;margin-right:auto;
  font-size:1rem;color:var(--text);
}
.hero-meta-item{display:inline-flex;align-items:baseline;gap:.5rem}
.hero-meta-item strong{
  font-family:var(--font-display);font-weight:700;
  font-size:1.3rem;color:#fff;letter-spacing:-.01em;line-height:1;
}
.hero-meta-sep{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.28);flex:none;
}
@media(max-width:799px){
  .hero{min-height:auto;padding:110px 0 60px}
  .hero h1{font-size:clamp(2rem,calc(var(--stop-w) * 9 / 100),2.8rem);font-stretch:100%}
  .hero h2.hero-subtitle{font-size:clamp(1.15rem,calc(var(--stop-w) * 4.6 / 100),1.5rem);margin-bottom:18px}
  .hero p.lead{font-size:clamp(1.05rem,calc(var(--stop-w) * 3.6 / 100),1.2rem)}
  .hero-meta{flex-direction:column;gap:.7rem;max-width:320px;padding-top:22px;margin-top:40px}
  .hero-meta-sep{display:none}
  /* Darker overlay on mobile — the video is full-bleed so text legibility
     matters more than on desktop where content is centered in a 880px column. */
  .hero::after{
    background:
      radial-gradient(75% 55% at 50% 30%,rgba(0,0,0,0.22),rgba(0,0,0,0.42) 75%),
      linear-gradient(180deg,rgba(0,0,0,0.32) 0%,rgba(0,0,0,0.38) 55%,#000 100%) !important;
  }
  .hero-video{opacity:.78}
}

/* ============ BRANDS STRIP ============ */
.brands{padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:
  radial-gradient(70% 100% at 50% 50%,rgba(161,255,47,0.023),transparent 70%);
  position:relative;overflow:hidden;
}
.brands-head{text-align:center;margin-bottom:40px}
.brands-head h3{
  font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(1.3rem,calc(var(--stop-w) * 2 / 100),1.75rem);letter-spacing:-.01em;
}
.brands .marquee-track{animation-duration:55s}
.brands .marquee-track img{
  height:52px;max-width:220px;opacity:.75;
  filter:brightness(0) invert(1);
}
.brands .marquee-track img[src*="iot%20sparks"],
.brands .marquee-track img[src*="makusi"]{
  height:34px;
}
@media(max-width:799px){
  .brands{padding:60px 0}
  .brands .marquee-track img{height:40px}
  .brands .marquee-track img[src*="iot%20sparks"],
  .brands .marquee-track img[src*="makusi"]{height:26px}
}

/* ============ MARQUEE / PARTNERS ============ */
.partners{padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.partners-label{text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:28px}
.marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;align-items:center;gap:72px;animation:slide 50s linear infinite;flex-shrink:0;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.marquee-track.is-paused{animation-play-state:paused}
.marquee-track img{
  height:44px;width:auto;flex-shrink:0;max-width:200px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.65;
  transition:opacity .25s,filter .25s;
}
.marquee-track img:hover{opacity:1}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ PROBLEMS ============ */
.section-head{text-align:center;max-width:800px;margin:0 auto 70px}
.section-head p{
  margin:18px auto 0;max-width:620px;
  color:#e9ebe6;font-size:1.05rem;line-height:1.55;
  text-wrap:pretty;
}
.problems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1439px){.problems-grid{grid-template-columns:1fr}}
.problem-card{
  padding:36px 32px;border-radius:var(--radius);
  background:rgba(255,255,255,.022);
  border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s;
}
.problem-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.problem-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-4),transparent);
  opacity:.6;
}
.problem-icon{
  width:56px;height:56px;border-radius:0;margin-bottom:22px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  display:grid;place-items:center;
  background:rgba(255,55,107,.13);
}
.problem-icon svg{width:28px;height:28px;stroke:var(--accent-4)}
.problem-card h3{margin-bottom:10px;color:#fff}
.problem-card p{font-size:.95rem}

/* ============ SOLUTION BRIDGE ============ */
#concept{padding-bottom:60px}
#concept > .container{position:relative;z-index:1}
#impact{position:relative;z-index:1;padding-top:140px}
#impact > .container,#impact > .photo-carousel{position:relative;z-index:2}
@media(max-width:799px){
  #concept{padding-bottom:40px}
  #impact{padding-top:100px}
}
.solution-bridge{
  margin:36px auto 0;max-width:780px;text-align:center;position:relative;
}
.solution-bridge-mark{
  width:1px;height:40px;margin:0 auto 18px;
  background:linear-gradient(180deg,transparent 0%,rgba(161,255,47,0.248) 50%,var(--accent-2) 100%);
}
.solution-bridge-label{
  display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;font-weight:500;
}
.solution-bridge h3{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,calc(var(--stop-w) * 2.6 / 100),2.25rem);
  line-height:1.15;font-weight:600;letter-spacing:-.015em;
  color:#fff;margin:0;text-wrap:balance;
}
@media(max-width:799px){
  .solution-bridge{margin-top:28px}
  .solution-bridge-mark{height:32px;margin-bottom:14px}
}

/* ============ IMPACT ============ */
.impact{background:linear-gradient(180deg,transparent,rgba(161,255,47,0.018) 40%,transparent);position:relative;overflow:hidden}
.photo-carousel{
  margin:60px 0 70px;width:100%;position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.impact .photo-carousel{margin-top:56px;margin-bottom:64px}
.photo-track{
  display:flex;gap:14px;width:max-content;
  animation:slide 80s linear infinite;
  padding-right:14px;
  will-change:transform;transform:translate3d(0,0,0);
}
.photo-carousel:hover .photo-track,
.photo-track.is-paused{animation-play-state:paused}
.photo-card{
  flex-shrink:0;width:clamp(220px,calc(var(--stop-w) * 22 / 100),340px);aspect-ratio:4/3;
  border-radius:4px;overflow:hidden;
  background:#0b0b0c;border:1px solid var(--line);
  position:relative;
  transition:transform .4s ease;
}
.photo-card:hover{transform:translateY(-4px) scale(1.02);z-index:2}
.photo-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s ease;
}
.photo-card:hover img{transform:scale(1.06)}
.photo-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,0.45));
}
@media(max-width:799px){
  .photo-carousel,.impact .photo-carousel{margin-top:36px;margin-bottom:44px}
  .photo-card{width:clamp(180px,calc(var(--stop-w) * 50 / 100),260px)}
}
.splash{display:none}
.impact .container{position:relative;z-index:1}
#concept{position:relative;z-index:2}
#concept .container{position:relative;z-index:1}
.impact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:1439px){.impact-grid{grid-template-columns:1fr}}
.impact-card{
  padding:44px 38px;border-radius:var(--radius);
  background:var(--tick),linear-gradient(160deg,rgba(161,255,47,.06),rgba(255,255,255,.015) 45%,transparent);
  border:1px solid var(--line-2);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.impact-card::after{
  content:"";position:absolute;top:-50%;right:-20%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(161,255,47,.08),transparent 60%);
  pointer-events:none;
}
.impact-card.alt::after{background:radial-gradient(circle,rgba(255,255,255,.06),transparent 60%)}
.impact-stage{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:22px;
}
.impact-stage-num{
  color:var(--accent-3);font-variant-numeric:tabular-nums;
}
.impact-card.alt .impact-stage-num{color:#fff}
.impact-stage-line{
  flex:none;width:28px;height:1px;
  background:linear-gradient(90deg,var(--accent-3),transparent);
}
.impact-card.alt .impact-stage-line{background:linear-gradient(90deg,#fff,transparent)}
.impact-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,calc(var(--stop-w) * 2.8 / 100),2.4rem);line-height:1.1;letter-spacing:-.015em;
  color:#fff;margin:0 0 18px;text-wrap:balance;
}
.impact-desc{
  font-size:1rem;line-height:1.55;color:#e9ebe6;margin:0 0 32px;
  max-width:36ch;
}
.impact-stats{display:flex;gap:32px;padding-top:26px;border-top:1px solid var(--line);margin-top:auto}
.impact-stat{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:4px}
.impact-stat strong{font-family:var(--font-display);font-style:italic;font-weight:900;color:var(--accent-3);font-size:1.7rem;line-height:1;letter-spacing:-.01em}
.impact-card.alt .impact-stat strong{color:#fff}
.impact-stat-key{
  font-family:var(--font-display);
  font-size:1rem;font-weight:600;color:#fff;line-height:1.25;
  letter-spacing:-.005em;
}
.impact-stat span{flex:1 0 100%;font-size:.85rem;color:rgba(255,255,255,.62);line-height:1.4;font-weight:400}
@media(max-width:799px){
  .impact-card{padding:36px 28px}
  .impact-title{font-size:clamp(1.6rem,calc(var(--stop-w) * 7 / 100),2rem)}
  .impact-stats{flex-direction:column;gap:18px}
}
.impact-cta{text-align:center;margin-top:64px}
.impact-cta .btn-primary{padding:16px 32px;font-size:1.05rem}
@media(max-width:799px){
  .impact-cta{margin-top:48px}
  .impact-cta .btn-primary{
    white-space:normal;max-width:100%;
    padding:14px 22px;font-size:.98rem;line-height:1.35;
    text-align:center;
  }
}

/* ============ IN ACTION ============ */
#action{position:relative;overflow:hidden;
  background:
    radial-gradient(70% 80% at 85% 40%,rgba(161,255,47,0.054),transparent 60%),
    radial-gradient(50% 60% at 20% 70%,rgba(255,255,255,0.024),transparent 60%);
}
#action .splash-a{display:none}
#action .container{position:relative;z-index:1}
.action-head{
  display:grid;grid-template-columns:1fr;gap:40px;align-items:start;
  margin-bottom:60px;
}
.action-title h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.5rem,calc(var(--stop-w) * 5.5 / 100),4.5rem);line-height:.95;letter-spacing:-.02em;
  font-weight:900;font-style:italic;font-stretch:112%;
  text-transform:uppercase;color:#fff;margin-top:18px;
}
.action-intro{display:flex;flex-direction:column;gap:24px;padding-top:18px}
.action-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:799px) and (min-width:375px){
  .action-stats-row{grid-template-columns:repeat(2,1fr)}
  .action-stat:nth-child(3){grid-column:1 / -1}
}
@media(max-width:799px){.action-stats-row{grid-template-columns:1fr}}
.action-stat{
  padding:32px 28px;border-radius:var(--radius-sm);
  background:var(--tick),rgba(255,255,255,.025);
  border:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;
  position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s;
}
.action-stat:hover{transform:translateY(-4px);border-color:rgba(161,255,47,.4)}
.action-stat strong{
  font-family:var(--font-display);font-weight:900;font-style:italic;font-stretch:112%;
  font-size:clamp(2.4rem,calc(var(--stop-w) * 4 / 100),3.2rem);line-height:1;letter-spacing:-.03em;
  color:var(--lime);
}
.action-stat:nth-child(2) strong{color:#fff}
.action-stat span{font-size:1rem;color:#e9ebe6;line-height:1.45;max-width:22ch;text-wrap:balance;position:relative;z-index:1}
.action-lead{
  font-size:clamp(1.05rem,calc(var(--stop-w) * 1.3 / 100),1.2rem);line-height:1.55;
  color:#e9ebe6;margin:0;max-width:52ch;text-wrap:pretty;
}
.action-lead strong{color:#fff;font-weight:600}
.action-chips{display:flex;flex-wrap:wrap;gap:8px}
.action-chip{
  display:inline-block;padding:7px 12px;border-radius:2px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:#e9ebe6;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:border-color .3s,color .3s,background .3s;
}
.action-chip:hover{border-color:rgba(161,255,47,.4);color:#fff;background:rgba(161,255,47,.06)}

.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
@media(max-width:799px){.events-grid{grid-template-columns:1fr}}
.event-card{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);aspect-ratio:16/10;
  background:#0b0b0c;
  transition:transform .3s,border-color .3s;
  cursor:pointer;
}
.event-card:hover{transform:translateY(-4px);border-color:rgba(161,255,47,.45);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.event-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.event-card:hover img{transform:scale(1.06)}
.event-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.35));
  transition:background .3s;
}
.event-card:hover::after{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25))}
.play-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:68px;height:68px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  display:grid;place-items:center;
  transition:all .3s;
}
.event-card:hover .play-btn{
  background:var(--lime);box-shadow:none;
  transform:translate(-50%,-50%) scale(1.06);
}
.play-btn svg{width:24px;height:24px;fill:#fff;margin-left:3px;transition:fill .3s}
.event-card:hover .play-btn svg{fill:var(--ink)}

/* Video modal */
.video-modal{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,0.85);backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;
  padding:40px 20px;opacity:0;transition:opacity .3s;
}
.video-modal.open{display:flex;opacity:1}
.video-modal-content{
  position:relative;width:100%;max-width:1100px;aspect-ratio:16/9;
  border-radius:4px;overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
  background:#000;transform:scale(.96);transition:transform .3s;
}
.video-modal.open .video-modal-content{transform:scale(1)}
.video-modal-content iframe{width:100%;height:100%;border:0;display:block}
.video-modal-close{
  position:absolute;top:-52px;right:0;
  width:40px;height:40px;border-radius:3px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;cursor:pointer;color:#fff;
  transition:all .2s;
}
.video-modal-close:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}
.video-modal-close svg{width:20px;height:20px;stroke:#fff}
.video-modal-open{
  position:absolute;top:-52px;left:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:3px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.85rem;font-weight:500;
  transition:all .2s;text-decoration:none;
}
.video-modal-open:hover{background:rgba(255,77,77,.2);border-color:rgba(255,77,77,.4)}
.video-modal-open svg{width:16px;height:16px;stroke:#fff}
.event-caption{
  text-align:center;padding-top:18px;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:#fff;
}
.event-info .tag{
  display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-3);margin-bottom:10px;font-weight:600;
}
.event-info h4{color:#fff;font-size:1.2rem}

/* ============ FORMATS ============ */
.formats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:1439px){.formats-grid{grid-template-columns:1fr}}
.format-card{
  padding:36px 32px;border-radius:var(--radius);
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s;
}
.format-illustration{
  position:relative;margin:-36px -32px 20px;height:280px;
  background:linear-gradient(180deg,rgba(161,255,47,0.081),rgba(255,255,255,0.024) 60%,transparent);
  overflow:hidden;
}
.format-illustration img{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  max-height:82%;width:auto;display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.4));
  transition:transform .5s ease;
}
.format-card:hover .format-illustration img{transform:translateX(-50%) translateY(-6px) scale(1.04)}
.format-illustration::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 100%,rgba(161,255,47,0.108),transparent 70%);
  pointer-events:none;
}
.format-illustration::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.9));
  pointer-events:none;
}
.format-card:hover{transform:translateY(-6px);border-color:var(--line-2)}

/* ---- Teal variant (Entertainment Zone) ---- */
.format-card.featured{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(161,255,47,0.06), transparent 55%),
    linear-gradient(180deg,rgba(161,255,47,0.033),rgba(161,255,47,0.009) 60%,transparent);
  border-color:rgba(161,255,47,0.204);
  box-shadow:
    inset 0 1px 0 rgba(161,255,47,0.132),
    0 20px 60px -30px rgba(161,255,47,0.24);
}
.format-card.featured .format-illustration{
  background:linear-gradient(180deg,rgba(161,255,47,0.132),rgba(161,255,47,0.036) 55%,transparent);
}
.format-card.featured .format-illustration::before{
  background:radial-gradient(65% 55% at 50% 100%,rgba(161,255,47,0.18),transparent 70%);
}
.format-card.featured::before{
  content:"POPULAR";position:absolute;top:24px;right:24px;z-index:2;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;color:#A1FF2F;
  padding:6px 14px;border:1px solid rgba(161,255,47,0.252);border-radius:2px;
  background:rgba(161,255,47,0.06);font-weight:600;
}
.format-card.featured .format-tag{color:#A1FF2F}
.format-card.featured .format-list li svg{stroke:#A1FF2F}
.format-card.featured:hover{
  border-color:rgba(161,255,47,0.33);
  box-shadow:
    inset 0 1px 0 rgba(161,255,47,0.18),
    0 24px 70px -28px rgba(161,255,47,0.33);
}

/* ---- Orange variant (Custom Tournament) ---- */
.format-card.exclusive{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(31,148,255,.11), transparent 55%),
    linear-gradient(180deg,rgba(31,148,255,.06),rgba(31,148,255,.015) 60%,transparent);
  border-color:rgba(31,148,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(31,148,255,.24),
    0 20px 60px -30px rgba(31,148,255,.4);
}
.format-card.exclusive .format-illustration{
  background:linear-gradient(180deg,rgba(31,148,255,.22),rgba(31,148,255,.06) 55%,transparent);
}
.format-card.exclusive .format-illustration::before{
  background:radial-gradient(65% 55% at 50% 100%,rgba(31,148,255,.3),transparent 70%);
}
.format-card.exclusive::before{
  content:"EXCLUSIVO";position:absolute;top:24px;right:24px;z-index:2;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;color:#1f94ff;
  padding:6px 14px;border:1px solid rgba(31,148,255,.44);border-radius:2px;
  background:rgba(31,148,255,.1);font-weight:600;
}
.format-card.exclusive .format-tag{color:#1f94ff}
.format-card.exclusive .format-list li svg{stroke:#1f94ff}
.format-card.exclusive:hover{
  border-color:rgba(31,148,255,.58);
  box-shadow:
    inset 0 1px 0 rgba(31,148,255,.32),
    0 24px 70px -28px rgba(31,148,255,.6);
}
.format-tag{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px;font-weight:600}
.format-card h3{color:#fff;margin-bottom:18px}
.format-list{list-style:none;margin:20px 0 28px}
.format-list li{
  display:flex;align-items:flex-start;gap:10px;
  color:#e9ebe6;padding:8px 0;font-size:1rem;
}
.format-list li svg{
  width:20px;height:20px;flex-shrink:0;margin-top:2px;
  stroke:var(--accent-3);
}
.format-desc{color:var(--text);font-size:1rem;margin-bottom:26px;flex:1;line-height:1.55}
#formats .eyebrow{font-size:.8rem;letter-spacing:.16em;padding:.5rem .85rem}
#formats .section-head{max-width:920px}
#impact .section-head{max-width:1160px}
#concept .section-head{max-width:1140px}
.action-stat span{max-width:none}
.format-card .btn{align-self:flex-start}

/* Premium addons — enhancer block */
.addons{
  margin-top:40px;padding:48px;border-radius:var(--radius);
  background:var(--tick),repeating-linear-gradient(135deg,rgba(161,255,47,.035) 0 1px,transparent 1px 14px),rgba(255,255,255,.02);
  border:1px solid rgba(161,255,47,.22);
  position:relative;overflow:hidden;
}
.addons-head{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;max-width:680px}
.addons-eyebrow{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--lime);
}
.addons-head h3{color:#fff;font-size:clamp(1.5rem,calc(var(--stop-w) * 2.2 / 100),1.9rem);margin:0;line-height:1.15;letter-spacing:-.01em}
.addons-desc{font-size:1rem;color:var(--text);margin:0;line-height:1.55;max-width:56ch}
.addons-divider{display:none}
.addons-items{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.addons-item{
  display:flex;align-items:flex-start;gap:16px;
  padding:22px 24px;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.55);
  border:1px solid var(--line-2);
  transition:border-color .25s,transform .25s;
}
.addons-item:hover{border-color:rgba(161,255,47,.45);transform:translateY(-2px)}
.addons-item-icon{
  width:42px;height:42px;
  background:var(--lime);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  display:grid;place-items:center;flex:none;
}
.addons-item-icon svg{width:20px;height:20px;stroke:var(--ink);fill:none}
.addons-item-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.addons-item-text strong{
  font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;line-height:1.25;letter-spacing:-.005em;color:#fff;
}
.addons-item-text span{font-size:1rem;color:var(--text);line-height:1.45;opacity:.82}
@media(max-width:1439px){
  .addons{padding:36px 28px}
}
@media(max-width:799px){
  .addons-items{grid-template-columns:1fr;gap:12px}
}

/* ============ TESTIMONIALS ============ */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1439px){.testimonials-grid{grid-template-columns:1fr}}
.testi-card{
  padding:36px 32px;border-radius:var(--radius);
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);position:relative;
  transition:transform .3s,border-color .3s;
}
.testi-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.quote-mark{
  font-family:var(--font-display);font-weight:900;font-style:italic;font-size:4.2rem;line-height:.6;
  color:var(--lime);margin-bottom:16px;display:block;
}
.testi-text{color:#e9ebe6;font-size:1rem;line-height:1.6;margin-bottom:26px;font-style:normal}
.testi-author{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.author-avatar{
  width:48px;height:48px;border-radius:50%;
  background:#1a1c1f;flex-shrink:0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(161,255,47,.5);
}
.author-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.testi-author strong{display:block;color:#fff;font-size:.95rem;margin-bottom:2px}
.testi-author span{font-size:.82rem;color:var(--muted)}

/* ============ MEDIA ============ */
.media-strip{
  padding:32px 24px;border-radius:var(--radius);
  background:rgba(255,255,255,.02);border:1px solid var(--line);
  display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:center;
}
@media(max-width:1439px){.media-strip{grid-template-columns:repeat(4,1fr)}}
@media(max-width:799px){.media-strip{grid-template-columns:repeat(2,1fr)}}
.media-logo{
  display:flex;align-items:center;justify-content:center;
  padding:18px 14px;border-radius:3px;
  background:rgba(255,255,255,.03);
  transition:background .25s,border-color .25s,transform .25s;
  border:1px solid transparent;min-height:72px;
}
.media-logo img{
  max-height:34px;max-width:100%;width:auto;display:block;
  filter:brightness(0) invert(1);opacity:.65;
  transition:opacity .25s;
}
.media-logo:hover{background:rgba(255,255,255,.06);border-color:var(--line);transform:translateY(-2px)}
.media-logo:hover img{opacity:1}

/* ============ FAQ ============ */
.faq-grid{max-width:820px;margin:0 auto}
.faq-cta{
  max-width:820px;margin:48px auto 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.faq-cta p{color:var(--text);font-size:1.05rem;margin:0}
.faq-cta .btn{align-self:center}
.faq-item{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:12px;background:rgba(255,255,255,.02);
  transition:border-color .2s,background .2s;
}
.faq-item:hover{border-color:var(--line-2)}
.faq-item.open{
  border-color:rgba(161,255,47,.35);
  background:linear-gradient(180deg,rgba(161,255,47,.04),transparent);
}
.faq-q{
  width:100%;text-align:left;padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:#fff;
}
.faq-toggle{
  width:32px;height:32px;border-radius:2px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  display:grid;place-items:center;flex-shrink:0;transition:all .25s;
}
.faq-item.open .faq-toggle{background:var(--lime);border-color:transparent;transform:rotate(45deg)}
.faq-item.open .faq-toggle svg{stroke:var(--ink)}
.faq-toggle svg{width:14px;height:14px;stroke:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 26px}
.faq-a-inner{padding-bottom:22px;color:#e9ebe6;line-height:1.65}

/* ============ CTA ============ */
.cta{
  position:relative;padding:90px 0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,0.015) 40%,transparent);
}
.cta-card{
  position:relative;overflow:hidden;
  padding:70px 60px;border-radius:var(--radius);
  background:
    var(--tick),
    radial-gradient(70% 60% at 0% 0%,rgba(161,255,47,.08),transparent 60%),
    rgba(255,255,255,.025);
  border:1px solid var(--line-2);
  display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start;
}
@media(max-width:1439px){.cta-card{grid-template-columns:1fr;padding:50px 28px;gap:40px}}
.cta-card > *{min-width:0}
.cta-card h2{margin-bottom:18px}
.cta-card p{color:#e9ebe6}
.cta-form{display:flex;flex-direction:column;gap:14px}
.input-group{position:relative}
.cta-form input,.cta-form textarea{
  width:100%;padding:16px 18px;border-radius:3px;
  background:rgba(0,0,0,.35);border:1px solid var(--line-2);
  color:var(--text);font-family:inherit;font-size:.95rem;
  transition:border-color .2s,background .2s;
}
.cta-form input:focus,.cta-form textarea:focus{
  outline:none;border-color:var(--lime);background:rgba(0,0,0,.5);
  box-shadow:0 0 0 3px rgba(161,255,47,.12);
}
.cta-form textarea{min-height:96px;resize:vertical}
.cta-form button{margin-top:6px;justify-content:center}
.cta-form .cta-form-note{
  margin:8px 0 0;font-size:.85rem;color:rgba(233,235,230,0.6);
  text-align:center;line-height:1.5;
}
.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:799px){.cta-row{grid-template-columns:1fr}}
.cta-radio-group{
  display:flex;flex-direction:column;gap:10px;
  border:0;padding:0;margin:0 0 4px;
  min-inline-size:0;min-width:0;
}
.cta-radio-group legend{
  font-size:.95rem;color:var(--text);margin-bottom:8px;padding:0;
  font-weight:500;
}
.cta-radio{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:12px 14px;border-radius:3px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);
  transition:border-color .2s,background .2s;
  font-size:.95rem;color:#e9ebe6;
}
.cta-radio:hover{border-color:rgba(161,255,47,.35);background:rgba(161,255,47,.03)}
.cta-form .cta-radio input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;min-width:18px;min-height:18px;
  padding:0;margin:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:transparent;flex:none;cursor:pointer;
  display:grid;place-items:center;
  box-sizing:border-box;
  transition:border-color .2s;
}
.cta-form .cta-radio input[type="radio"]:checked{
  border-color:var(--lime);
}
.cta-radio input[type="radio"]:checked::after{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--lime);
}
.cta-radio:has(input:checked){border-color:rgba(161,255,47,.55);background:rgba(161,255,47,.06)}
.cta-thanks{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:20px 0;gap:18px;
  grid-column:1 / -1;
}
.cta-thanks-icon{
  width:72px;height:72px;display:grid;place-items:center;
  background:var(--lime);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.cta-thanks-icon svg{width:32px;height:32px;stroke:var(--ink);fill:none}
.cta-thanks h2{margin:0}
.cta-thanks p{color:var(--text);font-size:1.05rem;margin:0;max-width:480px;line-height:1.55}
.cta-thanks .btn{margin-top:8px}

/* ============ FOOTER ============ */
footer{padding:60px 0 40px;border-top:1px solid var(--line);background:#000;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:799px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:799px){
  .foot-grid{grid-template-columns:1fr;gap:28px;margin-bottom:32px}
  .foot-col p{max-width:none}
}
.foot-col h5{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:600;
}
.foot-col a{display:block;font-size:.92rem;color:#e9ebe6;padding:4px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-col p{font-size:.9rem;color:var(--muted);margin-top:12px;max-width:280px}
.foot-col .logo-text{margin-top:0}
.foot-col a.logo{display:flex;align-items:center;gap:.7rem;padding:0;margin-bottom:14px}
.foot-bottom{
  padding-top:28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  color:var(--muted);font-size:.85rem;
}
.foot-bottom a{color:var(--muted);transition:color .2s}
.foot-bottom a:hover{color:#fff}
.foot-bottom .heart{color:var(--lime);font-weight:700}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* ============ SELECTION ============ */
::selection{background:var(--lime);color:var(--ink)}

/* Narrow mobile (<= 380px / iPhone SE etc.): tighten paddings + drop heading min sizes */
@media(max-width:374px){
  section{padding:80px 0}
  h2{font-size:clamp(1.55rem,calc(var(--stop-w) * 7 / 100),2.4rem)}
  h3{font-size:clamp(1.2rem,calc(var(--stop-w) * 5 / 100),1.5rem)}
  .hero h1{font-size:clamp(1.75rem,calc(var(--stop-w) * 8.5 / 100),2.6rem)}
  .hero h2.hero-subtitle{font-size:clamp(1.1rem,calc(var(--stop-w) * 5 / 100),1.4rem)}
  .hero p.lead{font-size:clamp(.98rem,calc(var(--stop-w) * 4 / 100),1.1rem)}
  .impact-card{padding:32px 22px}
  .format-card{padding:32px 22px}
  .action-stat{padding:26px 22px}
  .testi-card{padding:28px 24px}
  .addons{padding:30px 20px}
  .addons-item{padding:18px 16px}
  .cta-card{padding:36px 20px}
  .faq-item .faq-q{padding:18px 18px}
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#2a2d30;border:2px solid #000}
::-webkit-scrollbar-thumb:hover{background:var(--lime)}


/* ============================================================
   EVENTS SITE — local patches (not in the Figma-exported base)
   ============================================================ */

/* Edit #3 — product-card "tags" were oversized on phones.
   The floating POPULAR / EXCLUSIVO badge and the PUBLIC/PRIVATE EVENT
   eyebrow both inherit a 1rem desktop size with heavy tracking, which
   reads huge in a 375px column. Scale them down on mobile. */
@media(max-width:799px){
  .format-card.featured::before,
  .format-card.exclusive::before{
    font-size:.66rem;letter-spacing:.14em;
    padding:5px 11px;top:16px;right:16px;
  }
  .format-tag{font-size:.72rem;letter-spacing:.16em;margin-bottom:10px}
  /* Keep the section eyebrows / addon label in proportion too */
  #formats .eyebrow{font-size:.7rem;letter-spacing:.14em;padding:.42rem .7rem}
  .addons-eyebrow{font-size:.72rem;letter-spacing:.14em}
}
@media(max-width:374px){
  .format-card.featured::before,
  .format-card.exclusive::before{font-size:.6rem;padding:4px 9px}
  .format-tag{font-size:.68rem}
}


/* ============================================================
   MOTION & BRUTAL LAYER
   Loader, split-word reveals, scramble eyebrows, kinetic band,
   hard-offset hover shadows. Everything is transform/opacity/
   clip-path only, and all of it switches off for reduced motion.
   ============================================================ */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.77,0,.18,1)}

/* ---------- LOADER ---------- */
#ng-loader{transition:clip-path .9s var(--ease-io),visibility 0s .9s;clip-path:inset(0 0 0 0)}
#ng-loader.hide{clip-path:inset(0 0 100% 0);visibility:hidden}
.ld-core{
  position:relative;display:grid;place-items:center;
  transition:opacity .35s ease,transform .5s var(--ease-io);
}
#ng-loader.hide .ld-core{opacity:0;transform:translateY(-30px)}
.ld-core::before{
  content:"";position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;
  background:radial-gradient(circle,rgba(161,255,47,.1),transparent 65%);pointer-events:none;
}
.ld-mark{
  position:relative;width:120px;height:120px;
  filter:drop-shadow(0 0 18px rgba(161,255,47,.25));
}
/* baked spin: 24 frames/turn with a 180°-shutter rotational motion blur (assets/ld-spin.webp,
   rendered from mark-spin.svg), stepped at 0.5 s per turn ≈ 48 fps. Until the sprite has
   decoded, the plain SVG spins at the same speed so the loader is never empty. */
.ld-fallback{display:block;width:100%;height:100%;animation:ldWheel .5s linear infinite}
.ld-sprite{
  position:absolute;inset:0;opacity:0;
  background:url("assets/ld-spin.webp") 0 0/2880px 120px no-repeat;
  animation:ldSprite .5s steps(24) infinite;
}
#ng-loader.sprite-ready .ld-sprite{opacity:1}
#ng-loader.sprite-ready .ld-fallback{visibility:hidden}
@keyframes ldWheel{to{transform:rotate(360deg)}}
@keyframes ldSprite{to{background-position:-2880px 0}}

/* ---------- REVEALS ---------- */
.reveal{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d4{transition-delay:.32s}
/* before the loader lifts, nothing in the hero is allowed to finish early */
html:not(.is-loaded) .hero .reveal{opacity:0 !important;transform:translateY(44px) !important}

/* split-word headings: each word rises out of its own mask */
.split{opacity:1 !important;transform:none !important}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .09em .1em 0;margin:0 -.09em -.1em 0}
.split .wi{display:inline-block;transform:translateY(108%) rotate(4deg);transform-origin:0 100%;
  transition:transform 1s var(--ease-out);transition-delay:calc(var(--wi,0) * 55ms + var(--wd,0ms))}
.split.in .wi,.in .split .wi{transform:none}

/* scramble targets keep their width while glyphs churn */
.scrambling{font-variant-numeric:tabular-nums}

/* ---------- BRUTAL HOVER: hard lime offset shadow ---------- */
.problem-card,.impact-card,.format-card,.testi-card,.action-stat,.addons-item,.event-card{
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s !important;
}
.problem-card:hover,.impact-card:hover,.format-card:hover,.testi-card:hover,.action-stat:hover,.addons-item:hover,.event-card:hover{
  transform:translate(-6px,-6px) !important;
  box-shadow:6px 6px 0 var(--lime) !important;border-color:var(--lime) !important;
}
.problem-card:hover{box-shadow:6px 6px 0 var(--accent-4) !important;border-color:var(--accent-4) !important}
.format-card.exclusive:hover{box-shadow:6px 6px 0 #1f94ff !important;border-color:#1f94ff !important}

/* primary button: light sweep on hover */
.btn-primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .75s var(--ease-out);
}
.btn-primary:hover::after{transform:translateX(130%)}

/* ---------- BRUTAL HEADINGS ---------- */
section h2{
  text-transform:uppercase;font-weight:900;font-stretch:106%;letter-spacing:-.022em;line-height:.98;
  font-size:clamp(2rem,calc(var(--stop-w) * 4.1 / 100),3.5rem);
}
.section-head h2{max-width:none}
.hero h2.hero-subtitle{text-transform:none;letter-spacing:-.01em;line-height:1.2}

@media(max-width:799px){
  .action-title h2{font-stretch:100%;font-size:clamp(1.75rem,calc(var(--stop-w) * 8.6 / 100),2.2rem)}
}

/* ---------- KINETIC BAND ---------- */
.kinetic{
  position:relative;overflow:hidden;padding:28px 0;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:#000;
}
.kinetic-track{display:flex;align-items:center;width:max-content;animation:slide 38s linear infinite;will-change:transform}
.kinetic span{
  display:inline-block;flex:none;padding:0 .1em;
  font-family:var(--font-display);font-weight:900;font-style:italic;font-stretch:118%;text-transform:uppercase;
  font-size:clamp(3rem,8vw,7.5rem);line-height:1;letter-spacing:-.02em;color:#fff;white-space:nowrap;
  transform:skewX(var(--skew,0deg));transition:transform .25s ease-out;
}
.kinetic span.o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.kinetic b{
  flex:none;width:.55em;height:.58em;margin:0 .45em;font-size:clamp(3rem,8vw,7.5rem);
  background:url("assets/mark.svg") center/contain no-repeat;
  animation:kbSpin 6s linear infinite;
}
@keyframes kbSpin{to{transform:rotate(360deg)}}
.kinetic:hover .kinetic-track{animation-play-state:paused}
@media(max-width:799px){.kinetic{padding:18px 0}}

/* hero video drifts slower than the page (desktop; set by JS) */
.hero-video{transform:translate3d(0,var(--hero-shift,0px),0) scale(1.08);will-change:transform}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .ld-fallback,.ld-sprite,.kinetic-track,.kinetic b{animation:none !important}
  .split .wi{transform:none !important;transition:none !important}
  .reveal,html:not(.is-loaded) .hero .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-video{transform:none}
}
.is-reduced .split .wi{transform:none !important;transition:none !important}


/* ============================================================
   ACCENT BUDGET
   Lime is kept for primary CTAs, the italic accent word in headings,
   the logo mark, the current-section cap / scroll rail, and hover
   feedback. Everything else at rest is neutral so the page doesn't flicker.
   ============================================================ */
:root{--tick:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) top left/16px 2px no-repeat,linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) top left/2px 16px no-repeat}
.bg-layer{display:none}
.bg-scene{background:#000}
.bg-grid{background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);opacity:.5}
.eyebrow{color:#fff;border-color:var(--line-2);background:rgba(255,255,255,.03)}
.eyebrow::before{background:var(--lime)}
.nav-cell i{color:var(--muted)}
.lang-switch button.is-active{background:#fff;color:#000}
.impact-card{background:var(--tick),rgba(255,255,255,.022)}
.impact-card::after{display:none}
.impact-stage-num{color:#fff}
.impact-stage-line{background:linear-gradient(90deg,rgba(255,255,255,.6),transparent)}
.impact-stat strong,.impact-card.alt .impact-stat strong{color:#fff}
.action-stat strong{color:#fff}
.action-stat:nth-child(2) strong{color:#fff}
.format-card.featured{background:rgba(255,255,255,.025);border-color:var(--line-2);box-shadow:none}
.format-card.featured .format-illustration{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 70%)}
.format-card.featured .format-illustration::before{background:radial-gradient(65% 55% at 50% 100%,rgba(255,255,255,.08),transparent 70%)}
.format-card.featured::before{color:#fff;border-color:var(--line-2);background:rgba(255,255,255,.05)}
.format-card.featured .format-tag{color:var(--muted)}
.format-card.featured .format-list li svg,.format-list li svg{stroke:rgba(255,255,255,.7)}
.format-card.exclusive{background:rgba(255,255,255,.025);border-color:var(--line-2);box-shadow:none}
.format-card.exclusive .format-illustration{background:linear-gradient(180deg,rgba(31,148,255,.1),transparent 70%)}
.format-card.exclusive .format-list li svg{stroke:rgba(255,255,255,.7)}
.addons{background:rgba(255,255,255,.02);border-color:var(--line-2)}
.addons-eyebrow{color:#fff}
.addons-item-icon{background:rgba(255,255,255,.08)}
.addons-item-icon svg{stroke:#fff}
.quote-mark{color:rgba(255,255,255,.35)}
.author-avatar{box-shadow:0 0 0 1px var(--line-2)}
.faq-item.open{border-color:var(--line-2);background:rgba(255,255,255,.03)}
.faq-item.open .faq-toggle{background:#fff}
.faq-item.open .faq-toggle svg{stroke:#000}
.cta-card{background:var(--tick),rgba(255,255,255,.022)}
.cta-radio:has(input:checked){border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.cta-form .cta-radio input[type="radio"]:checked{border-color:#fff}
.cta-radio input[type="radio"]:checked::after{background:#fff}
.btn-outline{border-color:var(--line-2)}

/* ============ LINE BREAKS ============
   No "comb" rags: body copy avoids a lone last word (pretty), short blocks and
   titles even out their lines (balance). app.js adds no-break spaces as a
   fallback for browsers without text-wrap:pretty. */
p,li,.impact-desc,.format-desc,.addons-desc,.addons-item-text span,.testi-text,
.faq-a-inner,.action-lead,.section-head p,.problem-card p,.foot-col p,.cta-form-note{text-wrap:pretty}
h1,h2,h3,h4,h5,.eyebrow,.impact-title,.format-card h3,.addons-item-text strong,
.action-stat span,.impact-stat span,.solution-bridge h3,.brands-head h3,.event-caption,
.partners-label,.faq-q,.hero-subtitle,.hero p.lead{text-wrap:balance}
/* ≤374px: the longest single word in a title ("MINDHACKING") must fit the narrowest card */
@media(max-width:374px){section h2{font-size:1.62rem}}


/* ============================================================
   MARATHON LAYER
   "Graphic realism": wide caps (Shapiro-Wide feel via Archivo wdth 125),
   functional section labels, a rare hazard stripe, and a glitch motion
   language — signal breaking through (slices, jitter, RGB split) that
   plays ONCE on reveal / hover and then holds perfectly still.
   Static chrome stays clean; glitch lives only in motion.
   ============================================================ */
:root{
  --rgb-a:var(--magenta);     /* glitch channels come from the same triad */
  --rgb-b:var(--blue);
  --hazard:repeating-linear-gradient(-45deg,var(--lime) 0 7px,#000 7px 14px);
}

/* ---------- wide display type ---------- */
section h2,.hero h1,.action-title h2{
  font-style:normal;font-stretch:125%;font-weight:800;letter-spacing:-.012em;line-height:1;
}
section h2{font-size:clamp(1.7rem,calc(var(--stop-w) * 3.5 / 100),3.05rem)}
.hero h1{font-weight:900;font-size:clamp(2.2rem,calc(var(--stop-w) * 5 / 100),4rem);line-height:.98}
.action-title h2{font-size:clamp(2.2rem,calc(var(--stop-w) * 4.6 / 100),3.9rem)}
.gradient-text{font-style:normal;padding-right:0}
.kinetic span{font-style:normal;font-stretch:125%}
.impact-title,.format-card h3,.problem-card h3{font-stretch:118%;letter-spacing:-.015em}
.nav-cell span{font-stretch:125%}
@media(max-width:799px){
  .hero h1{font-stretch:118%;font-size:clamp(1.9rem,calc(var(--stop-w) * 8.4 / 100),2.5rem)}
  .action-title h2{font-stretch:118%;font-size:clamp(1.6rem,calc(var(--stop-w) * 7.6 / 100),2rem)}
}
@media(max-width:374px){section h2{font-size:1.45rem}}

/* ---------- functional section labels:  02 — IMPACT ---------- */
body{counter-reset:sec}
section[id]{counter-increment:sec}
section[id]::before{
  content:counter(sec,decimal-leading-zero) " \2014  " attr(id);
  position:absolute;top:34px;left:max(24px,calc((100vw - 1240px) / 2 + 24px));z-index:2;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding-left:14px;
  background:linear-gradient(var(--lime),var(--lime)) left center/6px 6px no-repeat;
}
section[id]::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,var(--line-2),var(--line) 60%,transparent);
}
#concept::after{display:none}
@media(max-width:1439px){section[id]::before{left:max(24px,calc((100vw - 800px) / 2 + 24px))}}
@media(max-width:799px){section[id]::before{left:16px;top:24px}}

/* ---------- hazard stripe: only the two format cards ---------- */
.format-card.featured,.format-card.exclusive{border-top:0}
.format-card.featured::after,.format-card.exclusive::after{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:3;background:var(--hazard);
}
.format-card.exclusive::after{background:repeating-linear-gradient(-45deg,#1f94ff 0 7px,#000 7px 14px)}

/* ============ GLITCH MOTION ============ */
/* Principle: a glitch is a *burst*, not a slideshow. Each effect = a dense run of hard cuts at
   ~48–60 fps (keyframes 2–4% apart with steps(1,end)), then a smooth eased settle. Only transform,
   opacity, clip-path and text-shadow are animated — no filters, so nothing re-rasterises large
   blocks every frame (the old drop-shadow RGB pass is what made it stutter). */
:root{--settle:cubic-bezier(.16,.84,.24,1)}

/* 1. block reveal: ~130 ms of torn slices, then a soft 10px rise into place */
@keyframes glitchIn{
  0%  {opacity:0;clip-path:inset(0 0 100% 0);transform:translate3d(0,14px,0);animation-timing-function:steps(1,end)}
  3%  {opacity:1;clip-path:inset(12% 0 68% 0);transform:translate3d(-10px,14px,0);animation-timing-function:steps(1,end)}
  6%  {opacity:.55;clip-path:inset(56% 0 22% 0);transform:translate3d(8px,13px,0);animation-timing-function:steps(1,end)}
  9%  {opacity:1;clip-path:inset(22% 0 46% 0);transform:translate3d(-5px,13px,0);animation-timing-function:steps(1,end)}
  12% {clip-path:inset(0 0 38% 0);transform:translate3d(3px,12px,0);animation-timing-function:steps(1,end)}
  15% {clip-path:inset(34% 0 0 0);transform:translate3d(-2px,12px,0);animation-timing-function:steps(1,end)}
  18% {opacity:1;clip-path:inset(0 0 0 0);transform:translate3d(0,10px,0);animation-timing-function:var(--settle)}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
.reveal{transition:none !important;transform:none !important;opacity:0}
.reveal.in{opacity:1;animation:glitchIn .72s var(--gd,0s) both}
.reveal.d1{--gd:.07s}.reveal.d2{--gd:.14s}.reveal.d3{--gd:.21s}.reveal.d4{--gd:.28s}
html:not(.is-loaded) .hero .reveal{animation:none !important;opacity:0 !important}

/* 2. heading words: a 3-frame channel flicker per word, then the split eases shut */
@keyframes wordGlitch{
  0%  {opacity:0;transform:translate3d(0,0,0);text-shadow:none;animation-timing-function:steps(1,end)}
  5%  {opacity:1;transform:translate3d(-5px,0,0);text-shadow:-3px 0 var(--rgb-a),3px 0 var(--rgb-b);animation-timing-function:steps(1,end)}
  10% {opacity:.35;transform:translate3d(4px,0,0);text-shadow:3px 0 var(--rgb-a),-3px 0 var(--rgb-b);animation-timing-function:steps(1,end)}
  15% {opacity:1;transform:translate3d(-2px,0,0);text-shadow:-2px 0 var(--rgb-a),2px 0 var(--rgb-b);animation-timing-function:var(--settle)}
  100%{opacity:1;transform:none;text-shadow:0 0 transparent,0 0 transparent}
}
.split .w{overflow:visible}
.split .wi{transform:none;transition:none;opacity:0}
.split.in .wi,.in .split .wi{animation:wordGlitch .46s calc(var(--wi,0) * 45ms + var(--wd,0ms)) both}

/* 3. buttons + nav: an 80 ms shudder with a channel split, then a smooth return */
@keyframes btnJitter{
  0%  {transform:translate3d(0,0,0);animation-timing-function:steps(1,end)}
  8%  {transform:translate3d(-2px,1px,0);animation-timing-function:steps(1,end)}
  16% {transform:translate3d(2px,-1px,0);animation-timing-function:steps(1,end)}
  24% {transform:translate3d(-1px,0,0);animation-timing-function:var(--settle)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes textSplit{
  0%  {text-shadow:0 0 transparent,0 0 transparent;animation-timing-function:steps(1,end)}
  6%  {text-shadow:-2px 0 var(--rgb-a),2px 0 var(--rgb-b);animation-timing-function:steps(1,end)}
  14% {text-shadow:2px 0 var(--rgb-a),-2px 0 var(--rgb-b);animation-timing-function:steps(1,end)}
  22% {text-shadow:-1.5px 0 var(--rgb-a),1.5px 0 var(--rgb-b);animation-timing-function:var(--settle)}
  100%{text-shadow:0 0 transparent,0 0 transparent}
}
@keyframes sliceBars{
  0%  {opacity:0;background-position:0 0;animation-timing-function:steps(1,end)}
  6%  {opacity:1;background-position:0 0;animation-timing-function:steps(1,end)}
  12% {background-position:0 -8px;animation-timing-function:steps(1,end)}
  18% {background-position:0 6px;animation-timing-function:steps(1,end)}
  24% {opacity:1;background-position:0 -2px;animation-timing-function:ease-out}
  60%,100%{opacity:0;background-position:0 0}
}
.btn-primary::after{            /* torn scan bars flash across the slab */
  content:"";position:absolute;inset:0;pointer-events:none;transform:none;transition:none;opacity:0;
  background:linear-gradient(180deg,transparent 0 22%,rgba(0,0,0,.5) 22% 27%,transparent 27% 58%,rgba(255,255,255,.7) 58% 62%,transparent 62% 78%,rgba(0,0,0,.35) 78% 81%,transparent 81%);
}
.btn-primary:hover::after{transform:none;animation:sliceBars .42s both}
/* the slab shudders and its label splits into RGB channels (text-shadow inherits into child spans) */
.btn:hover{animation:btnJitter .34s both,textSplit .42s both}
.btn-primary:hover{transform:none}
.nav-cell:hover span{animation:textSplit .4s both,btnJitter .34s both}
.nav .nav-cta:hover{animation:btnJitter .34s both}

/* 4. cards: the offset shadow snaps in through a two-frame channel split, then eases home */
@keyframes cardSnap{
  0%  {box-shadow:-4px 0 0 var(--rgb-a),4px 0 0 var(--rgb-b);animation-timing-function:steps(1,end)}
  10% {box-shadow:4px 0 0 var(--rgb-a),-4px 0 0 var(--rgb-b);animation-timing-function:steps(1,end)}
  20% {box-shadow:9px 9px 0 var(--lime);animation-timing-function:var(--settle)}
  100%{box-shadow:6px 6px 0 var(--lime)}
}
.impact-card:hover,.format-card.featured:hover,.testi-card:hover,.action-stat:hover,.addons-item:hover,.event-card:hover{
  animation:cardSnap .38s both;
}

/* 5. loader exit: the mark keeps spinning and flies off into the distance — an accelerating
      shrink to a point (ease-in, like perspective recession), then the curtain lifts */
@keyframes ldFlyAway{
  0%  {transform:scale(1);opacity:1}
  70% {opacity:1}
  100%{transform:scale(.02);opacity:0}
}
#ng-loader.fly-away .ld-core{animation:ldFlyAway .62s cubic-bezier(.6,0,.85,.25) both}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in,.split .wi,.split.in .wi,.in .split .wi{animation:none !important;opacity:1 !important;clip-path:none !important}
  .btn:hover,.btn:hover span,.nav-cell:hover span,.btn-primary:hover::after,
  .impact-card:hover,.format-card:hover,.testi-card:hover,.action-stat:hover,.addons-item:hover,.event-card:hover{animation:none !important}
}
.is-reduced .reveal,.is-reduced .split .wi{animation:none !important;opacity:1 !important;clip-path:none !important}
/* the contact column is narrow: its title steps down so "PRÓXIMO EVENTO" can share a line */
.cta-card h2{font-size:clamp(1.6rem,calc(var(--stop-w) * 2.6 / 100),2.4rem)}
/* phones: the wide Marathon cut steps down so a line holds real phrases, not one Spanish word */
@media(max-width:799px){
  section h2{font-stretch:108%;font-size:clamp(1.5rem,calc(var(--stop-w) * 6.6 / 100),1.9rem);line-height:1.02}
  .cta-card h2{font-size:clamp(1.45rem,calc(var(--stop-w) * 6.2 / 100),1.8rem)}
  .btn{text-wrap:balance}
}
@media(max-width:374px){section h2{font-size:1.36rem}}
@media(max-width:799px){
  .cta-card{padding:40px 18px}
  .cta-card h2{font-size:clamp(1.25rem,calc(var(--stop-w) * 5.6 / 100),1.6rem)}
}
@media(max-width:799px){section h2{font-size:clamp(1.3rem,calc(var(--stop-w) * 5.6 / 100),1.75rem)}}
@media(max-width:374px){section h2{font-size:1.25rem}}


/* ============================================================
   PIXEL LAYER
   The mark is all hard angles, so the page drops every rounded form
   and speaks in pixels: square corners, 4px stair-step notches on
   filled shapes, a square-pixel grid, pixel-dash dividers, pixel
   dither on button hover and a mosaic reveal for imagery (app.js).
   Also the second accent diet: lime = logo, loader, the three primary
   CTAs, the current-section cap and hover feedback. Nothing else.
   ============================================================ */
:root{
  --radius:0;--radius-sm:0;
  /* 3-step, 4px stair on top-left + bottom-right (echoes the mark's clipped corners) */
  --px-cut:polygon(0 12px,4px 12px,4px 8px,8px 8px,8px 4px,12px 4px,12px 0,100% 0,
    100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),
    calc(100% - 12px) 100%,0 100%);
  --px-cut-sm:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,100% 0,100% calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) 100%,0 100%);
}

/* ---------- square everything ---------- */
.problem-card,.impact-card,.format-card,.testi-card,.action-stat,.addons,.addons-item,.event-card,
.photo-card,.cta-card,.faq-item,.faq-toggle,.media-strip,.media-logo,.cta-form input,.cta-form textarea,
.cta-radio,.lang-switch,.lang-switch button,.eyebrow,.action-chip,.video-modal-content,.video-modal-close,
.video-modal-open,.nav-toggle,.btn,.btn-ghost,.btn-outline{border-radius:0 !important}
.cta-form .cta-radio input[type="radio"]{border-radius:0}          /* square radio, pixel dot */
.cta-radio input[type="radio"]:checked::after{border-radius:0}
.author-avatar{border-radius:0;clip-path:var(--px-cut-sm)}

/* ---------- stair-step notches on filled shapes ---------- */
.btn-primary,.nav-links .nav-links-cta{clip-path:var(--px-cut)}
.problem-icon,.addons-item-icon,.cta-thanks-icon,.play-btn{clip-path:var(--px-cut-sm)}
.format-card.featured::before,.format-card.exclusive::before{clip-path:var(--px-cut-sm);border:0;
  background:rgba(255,255,255,.1);padding:7px 14px}
.photo-card{clip-path:var(--px-cut)}   /* not .event-card: its hover shadow must not be clipped */

/* ---------- square-pixel grid + pixel-dash dividers ---------- */
.bg-grid{      /* one crisp 2×2 pixel per 24px cell — square, not round */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2' height='2' fill='%23fff' fill-opacity='.2'/%3E%3C/svg%3E");
  background-size:24px 24px;opacity:.6;
}
section[id]::after{
  height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 4px,transparent 4px 10px);
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent);
}
.kinetic{border-top:0;border-bottom:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 4px,transparent 4px 10px) top/100% 2px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 4px,transparent 4px 10px) bottom/100% 2px no-repeat,#000}

/* ---------- pixel markers instead of wedges / dots ---------- */
.eyebrow::before{clip-path:none;width:6px;height:6px;background:currentColor}
section[id]::before{background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)) left center/6px 6px no-repeat}
.impact-stage-line{height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 2px,transparent 2px 5px)}

/* ---------- pixel dither on hover (replaces the scan bars) ---------- */
@keyframes pxDither{
  0%  {opacity:0;background-position:0 0;animation-timing-function:steps(1,end)}
  8%  {opacity:1;background-position:0 0;animation-timing-function:steps(1,end)}
  16% {background-position:4px 0;animation-timing-function:steps(1,end)}
  24% {background-position:0 4px;animation-timing-function:steps(1,end)}
  32% {background-position:4px 4px;animation-timing-function:ease-out}
  70%,100%{opacity:0;background-position:4px 4px}
}
.btn-primary::after{
  background:
    conic-gradient(rgba(0,0,0,.34) 25%,transparent 0 50%,rgba(0,0,0,.34) 0 75%,transparent 0) 0 0/8px 8px;
  mix-blend-mode:normal;
}
.btn-primary:hover::after{animation:pxDither .46s both}

/* ---------- accent diet ---------- */
/* section titles: the accent word is an outline, not lime */
section:not(.hero) .gradient-text{
  color:transparent;-webkit-text-stroke:1.4px #fff;paint-order:stroke fill;
}
@media(max-width:799px){section:not(.hero) .gradient-text{-webkit-text-stroke-width:1.1px}}
.impact-title .gradient-text,.brands-head .gradient-text{color:#fff;-webkit-text-stroke:0;text-decoration:underline;
  text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.35)}
/* secondary CTAs are white slabs; lime only on hover */
.impact-cta .btn-primary,.format-card .btn-primary,.faq-cta .btn-primary,#ctaBackTop{background:#fff;color:#000}
.impact-cta .btn-primary:hover,.format-card .btn-primary:hover,.faq-cta .btn-primary:hover,#ctaBackTop:hover{background:var(--lime)}
/* neutral markers */
.eyebrow::before{background:rgba(255,255,255,.75)}
#concept .eyebrow::before{background:currentColor}
.format-card.featured::after{background:repeating-linear-gradient(-45deg,#fff 0 7px,#000 7px 14px)}
.kinetic b{filter:grayscale(1) brightness(2.2)}                  /* band marks in white */
.faq-item.open .faq-toggle{background:#fff}
.lang-switch button.is-active{background:#fff;color:#000}

@media(prefers-reduced-motion:reduce){.btn-primary:hover::after{animation:none}}

/* ---------- mosaic veil (created by app.js over imagery as it enters) ---------- */
.px-veil{position:absolute;inset:0;z-index:3;pointer-events:none;image-rendering:pixelated;width:100%;height:100%}