/* =====================================================
   Trascend · Growth intelligence
   Design tokens
   ===================================================== */
:root {
  /* Royal violet palette */
  --ink:        #060416;
  --night:      #0a0420;
  --indigo:     #130C49;
  --royal:      #1F137D;
  --violet:     #5C21C3;
  --orchid:     #874AD7;
  --magenta:    #9303C5;
  --lilac:      #C9A8F2;
  /* Bright variants for text over dark backgrounds (WCAG-safe) */
  --orchid-bright:  #B98CEC;
  --magenta-bright: #DC78F2;
  --paper:      #F4EFFA;
  --paper-2:    #E7DEF5;

  --line:       rgba(255, 255, 255, 0.08);
  --line-strong:rgba(255, 255, 255, 0.16);
  --line-dark:  rgba(6, 4, 22, 0.12);

  --text:       #F4F0FC;
  --text-soft:  #D4CCEC;
  --text-dim:   #B5ABD6;
  --text-on-light: #1A0E3E;
  --text-on-light-soft: #4B3B7A;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-soft: 0 30px 80px -40px rgba(11, 4, 36, 0.9);
  --shadow-card: 0 24px 60px -30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255,255,255,0.04) inset;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* =====================================================
   Fallback font sizing — reduce CLS del font-swap
   size-adjust calibra el fallback (Arial) para que ocupe
   el mismo espacio visual que la web font cuando llega,
   eliminando el salto de layout (CLS 0.382 → ~0.05).
   ===================================================== */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local("Arial"), local("Helvetica Neue"), local(sans-serif);
  size-adjust: 99%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local(sans-serif);
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* =====================================================
   Reset & base
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--violet); color: var(--paper); }

.skip {
  position: absolute; left: -9999px;
  background: var(--violet); color: var(--paper);
  padding: 10px 16px; border-radius: 8px; z-index: 999;
}
.skip:focus { left: 16px; top: 16px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* =====================================================
   Typography
   ===================================================== */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  color: var(--text);
  text-wrap: balance;
}
.display em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(96deg, var(--orchid-bright) 0%, var(--magenta-bright) 55%, var(--lilac) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.display.huge { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }

/* Italic glyphs overhang their inline box; background-clip: text only paints
   inside it, so extend the paint area generously to avoid "cut" letters
   (accents on top, descenders below, italic overhang on both sides).
   box-decoration-break: clone repeats the extended paint area on EVERY line
   fragment, so ems that wrap across lines don't get clipped at the break. */
.display em,
.hero-title em {
  padding: 0.18em 0.22em 0.22em 0.1em;
  margin: -0.18em -0.22em -0.22em -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lede {
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  color: var(--text-soft);
  line-height: 1.6;
  max-width: 58ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lilac);
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 14px var(--magenta);
}

.section-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .lede { margin-top: 18px; }
.section-head.center .lede { margin-inline: auto; }

/* =====================================================
   Buttons
   ===================================================== */
.btn {
  --bg: var(--paper);
  --fg: var(--ink);
  --br: transparent;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--br);
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  --bg: linear-gradient(180deg, var(--paper) 0%, #E2D6F4 100%);
  --fg: #1A0E3E;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset, 0 16px 30px -16px rgba(192, 160, 240, 0.4);
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset, 0 20px 36px -16px rgba(192, 160, 240, 0.6);
}

.btn-ghost {
  --bg: transparent;
  --fg: var(--text);
  --br: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { --br: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }

.btn-lg { padding: 15px 26px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* On light sections, ghost flips */
.section-light .btn-ghost {
  --fg: var(--text-on-light);
  --br: rgba(26, 14, 62, 0.16);
}

/* =====================================================
   NAV
   ===================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 14px 0;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 4, 32, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--text);
}
.logo img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(147,3,197,0.45)); }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text strong {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em;
}
.logo-text em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 2px;
}

.nav-links {
  justify-self: center;
  display: flex; gap: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  backdrop-filter: blur(10px);
}
.nav-links a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text-soft);
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn-ghost { padding: 10px 16px; }
.nav-cta .btn-primary { padding: 10px 18px; }
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-strong);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  color: var(--text);
}
.nav-burger span { width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .25s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed; left: 16px; right: 16px; top: 78px;
  background: rgba(10, 4, 32, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 49;
  box-shadow: var(--shadow-soft);
}
.mobile-menu a {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .mobile-cta { margin-top: 12px; justify-content: center; border-bottom: none; }
.mobile-menu[hidden] { display: none; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost, .nav-cta .btn-primary { display: none; }
  .nav-burger { display: inline-flex; }
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 170px 0 140px;
  overflow: hidden;
  isolation: isolate;
  --mx: 50;
  --my: 30;
  --flicker: 1;
}

/* Layered background */
.hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-bg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 0% 50%, var(--royal) 0%, var(--indigo) 40%, var(--ink) 80%),
    var(--ink);
}
.hero-bg-palms {
  position: absolute; inset: 0;
  background-image: url("assets/palms-canopy.jpg");
  background-size: cover;
  background-position: 100% 30%;
  filter: saturate(1.05) contrast(1.05) brightness(0.78);
  /* clear on right, fade to solid color on left */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.05) 25%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.75) 75%,
    #000 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.05) 25%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.75) 75%,
    #000 100%);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.hero-bg-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 0% 60%, rgba(31, 19, 125, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(6,4,22,0) 60%, rgba(6,4,22,0.9) 100%);
}
.hero-bg-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* Lamp / spotlight that follows mouse */
.hero-stage {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}

/* Lamp pivot: anchored to top of hero, follows mouse 1:1 horizontally */
.lamp {
  position: absolute;
  top: 0;
  left: calc(var(--mx) * 1%);
  width: 0; height: 0;
  transform-origin: top center;
  transform: rotate(calc((var(--mx) - 50) * 0.22deg));
  transition: left .28s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform, left;
  z-index: 2;
}

/* The cable hanging from the ceiling */
.lamp-cable {
  position: absolute;
  top: 0; left: 50%;
  width: 14px; height: 74px;
  transform: translateX(-50%);
  display: block;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 1px rgba(199, 168, 242, 0.25));
}

/* Lamp fixture group sits at end of cable */
.lamp-fixture {
  position: absolute;
  top: 66px; left: 50%;
  width: 140px; height: 86px;
  transform: translateX(-50%);
  z-index: 3;
}
/* Curved bell shade drawn as SVG — no straight edges */
.lamp-shade-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}
/* The hot bulb inside the shade */
.lamp-bulb {
  position: absolute;
  top: 55px; left: 50%;
  width: 60px; height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    #ffffff 0%,
    #fff6ff 30%,
    #d4b8ff 55%,
    rgba(180, 120, 240, 0.25) 80%,
    transparent 100%);
  border-radius: 50%;
  filter: blur(0.6px) brightness(calc(0.85 + 0.4 * var(--flicker)));
  opacity: calc(0.55 + 0.45 * var(--flicker));
  z-index: 3;
  box-shadow:
    0 0 42px 14px rgba(255, 240, 255, calc(0.6 * var(--flicker))),
    0 0 110px 32px rgba(199, 130, 250, calc(0.5 * var(--flicker))),
    0 0 210px 60px rgba(135, 74, 215, calc(0.34 * var(--flicker)));
}

/* Cone beam — pure conic gradients, soft edges, no clipped SVG lines */
.lamp-cone {
  position: absolute;
  top: 130px; left: 50%;
  width: 1400px; height: 145vh;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  opacity: calc(0.55 + 0.45 * var(--flicker));
  mix-blend-mode: screen;
}
.lamp-cone .beam {
  position: absolute; inset: 0; display: block;
  /* Fade in at the very top (light emerges from inside the shade — kills the
     hard horizontal edge) and fade out progressively with distance. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 3.5%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.26) 52%, rgba(0,0,0,0.10) 74%, transparent 93%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 3.5%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.26) 52%, rgba(0,0,0,0.10) 74%, transparent 93%);
}
/* The cone's apex sits 132px ABOVE the element (i.e. hidden inside the
   shade), so at the shade's mouth the beam is already rim-wide instead of
   tapering to a point. Edge angle ±26° for a generous, natural spread. */
.lamp-cone .beam-wide {
  background: conic-gradient(from 154deg at 50% -132px,
    transparent 0deg,
    rgba(180, 130, 245, 0.07) 8deg,
    rgba(212, 179, 255, 0.18) 14deg,
    rgba(243, 230, 255, 0.30) 21deg,
    rgba(243, 230, 255, 0.30) 31deg,
    rgba(212, 179, 255, 0.18) 38deg,
    rgba(180, 130, 245, 0.07) 44deg,
    transparent 52deg);
  filter: blur(16px);
}
.lamp-cone .beam-core {
  background: conic-gradient(from 168deg at 50% -132px,
    transparent 0deg,
    rgba(255, 250, 255, 0.36) 7deg,
    rgba(255, 250, 255, 0.36) 17deg,
    transparent 24deg);
  filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.88) 3%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0.12) 60%, transparent 78%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.88) 3%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0.12) 60%, transparent 78%);
}

/* Atmospheric haze inside the cone */
.lamp-haze {
  position: absolute;
  top: 130px; left: 50%;
  width: 1240px; height: 115vh;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 70% at 50% 8%, rgba(220, 190, 255, 0.20), transparent 70%),
    radial-gradient(64% 100% at 50% 35%, rgba(170, 120, 240, 0.12), transparent 75%);
  filter: blur(18px);
  opacity: calc(0.55 + 0.4 * var(--flicker));
  z-index: 1;
  mix-blend-mode: screen;
  /* Fade in below the shade so the element's top edge never paints a line */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 7%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.25) 78%, transparent 97%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 7%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.25) 78%, transparent 97%);
}

/* Light pool at the floor — follows mouse */
.lamp-pool {
  position: absolute;
  bottom: 0; left: calc(var(--mx) * 1%);
  width: 82vw; height: 28vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%,
    rgba(220, 184, 255, calc(0.38 * var(--flicker))) 0%,
    rgba(160, 100, 240, calc(0.22 * var(--flicker))) 40%,
    transparent 70%);
  filter: blur(24px);
  z-index: 1;
  mix-blend-mode: screen;
  transition: left .35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}

/* Cursor glow — soft halo around pointer */
.cursor-glow {
  position: absolute;
  width: 680px; height: 680px;
  left: calc(var(--mx) * 1%);
  top: calc(var(--my) * 1%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(220, 184, 255, 0.16) 0%,
    rgba(147, 3, 197, 0.08) 30%,
    transparent 65%);
  filter: blur(24px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: calc(0.8 * var(--flicker));
}

@media (prefers-reduced-motion: reduce) {
  .lamp-beam, .lamp-pool, .lamp { transition: none; transform: none; }
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 28px;
  text-wrap: balance;
}
.hero-title span { display: block; }
.hero-title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--orchid-bright), var(--magenta-bright) 60%, var(--lilac));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-lede {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--text-soft);
  max-width: 620px;
  line-height: 1.55;
  margin-bottom: 36px;
  text-wrap: pretty;
}
.hero-lede strong { color: var(--text); font-weight: 600; }

.hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 44px;
}

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 18px 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--text-soft);
  max-width: 720px;
}
.hero-trust li { display: flex; align-items: baseline; gap: 8px; }
.hero-trust b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.hero-scroll {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  z-index: 1;
}
.hero-scroll i {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--text-dim), transparent);
  display: block;
  position: relative;
}
.hero-scroll i::after {
  content: "";
  position: absolute; top: 0; left: -1px;
  width: 3px; height: 8px;
  background: var(--orchid);
  border-radius: 2px;
  animation: scroll-dot 2.2s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%, 100% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* =====================================================
   BAND (sectors)
   ===================================================== */
.band {
  position: relative;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(31, 19, 125, 0.15), rgba(6, 4, 22, 0.6)),
    var(--ink);
  overflow: hidden;
}
.band-inner {
  display: flex; align-items: center; gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
}
.band-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.band-items {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.band-items li { font-weight: 500; }
.band-items li:nth-child(even) { color: var(--text-dim); opacity: 0.8; }

/* =====================================================
   SECTION TRANSITIONS (Pendulum-style vertical light bars)
   ===================================================== */
.insight,
.method,
.manifesto,
.audiences,
.stories,
.final {
  position: relative;
  /* `clip` instead of `hidden`: hidden creates a scroll container and
     breaks position: sticky inside (insight section) */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
/* Soft section transitions: a centered hairline that fades at the edges
   plus a very gentle violet bloom — subtle and elegant. */
.insight::before,
.method::before,
.manifesto::before,
.audiences::before,
.stories::before,
.final::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent 15%, rgba(199, 168, 242, 0.16) 50%, transparent 85%) top / 100% 1px no-repeat,
    radial-gradient(46% 100% at 50% 0%, rgba(135, 74, 215, 0.09), transparent 75%);
}

/* =====================================================
   INSIGHT — sticky scroll: copy stays, symptoms reveal one by one
   ===================================================== */
.insight {
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px);
  background: var(--ink);
}
/* Texture and darkening live on separate stacked layers (not multi-layer
   background shorthand) so every renderer composites them identically. */
.insight-bg {
  position: absolute; inset: 0; z-index: 0;
}
.insight-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/lamp-room.jpg") center / cover no-repeat;
  opacity: 0.5;
}
.insight-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,4,22,0.92) 0%, rgba(6,4,22,0.78) 30%, rgba(6,4,22,0.78) 70%, rgba(6,4,22,0.96) 100%),
    radial-gradient(60% 60% at 100% 0%, rgba(92, 33, 195, 0.20), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(31, 19, 125, 0.25), transparent 70%);
}
.insight-layout {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* Left column: sticky headline + progress */
.insight-copy {
  position: sticky;
  top: 120px;
  align-self: start;
  padding-block: 40px 0;
}
.insight-copy h2 { margin-bottom: 24px; font-size: clamp(2rem, 3.5vw, 3.5rem); }
.insight-copy h2 em {
  font-style: italic;
  font-family: var(--font-display);
}
.insight-copy .lede { margin-bottom: 32px; max-width: 46ch; }

.symptoms-progress {
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  max-width: 360px;
}
.sym-counter {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono);
  color: var(--text-soft);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.sym-counter b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: transparent;
  background: linear-gradient(96deg, var(--paper), var(--lilac));
  -webkit-background-clip: text; background-clip: text;
  line-height: 1;
}
.sym-bar {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.sym-bar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--violet), var(--magenta), var(--orchid));
  border-radius: 2px;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
  display: block;
}
.sym-dots {
  display: flex; gap: 8px;
  align-items: center;
}
.sym-dots li {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: background .35s, transform .35s;
}
.sym-dots li.is-active {
  background: var(--magenta);
  box-shadow: 0 0 12px var(--magenta);
  transform: scale(1.25);
}
.sym-dots li.is-done {
  background: var(--orchid);
}

/* Right column: vertically scrolling symptoms */
.symptoms {
  display: flex; flex-direction: column;
  gap: 0;
}
.symptom {
  position: relative;
  min-height: 70vh;
  padding: 60px 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0.68;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1);
  border-top: 1px solid var(--line);
}
/* Giant ghost numeral gives each stage visual weight */
.symptom::after {
  content: attr(data-num);
  position: absolute;
  top: 50%; right: -10px;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(8rem, 15vw, 14rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(199, 168, 242, 0.10);
  pointer-events: none;
  opacity: 0.55;
  transition: opacity .6s ease, -webkit-text-stroke-color .6s ease;
  z-index: -1;
}
.symptom.is-active::after {
  opacity: 1;
  -webkit-text-stroke-color: rgba(199, 168, 242, 0.22);
}
.symptom:first-child { border-top: none; }
.symptom.is-active { opacity: 1; }
.symptom .num {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--lilac);
  margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.symptom .num::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--orchid);
  display: block;
}
.symptom h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 4.4vw, 4.1rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 20px;
  text-wrap: balance;
}
.symptom > p {
  font-size: clamp(1.12rem, 1.45vw, 1.35rem);
  color: var(--text-soft);
  max-width: 50ch;
  line-height: 1.55;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.sym-list {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  max-width: 46ch;
}
.sym-list li {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  display: flex; align-items: center; gap: 12px;
}
.sym-list li::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--orchid);
}

@media (max-width: 1000px) {
  .insight-layout { grid-template-columns: 1fr; }
  .insight-copy { position: static; padding-block: 0 40px; }
  .symptom { min-height: auto; padding: 36px 0; opacity: 1; }
  .symptom::after { display: none; }
  .symptoms-progress { display: none; }
}

/* =====================================================
   METHOD
   ===================================================== */
.method {
  padding: clamp(100px, 13vw, 180px) 0;
  background: linear-gradient(180deg, var(--ink) 0%, var(--night) 50%, var(--ink) 100%);
}
.method-bg { position: absolute; inset: 0; z-index: 0; }
.method-bg-palms {
  position: absolute; inset: 0;
  background-image: url("assets/palms-beach.jpg");
  background-size: cover;
  background-position: center 30%;
  opacity: 0.22;
  filter: saturate(1.2) hue-rotate(-6deg);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 90%);
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 90%);
}
.method-bg-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--ink) 0%, transparent 25%, transparent 75%, var(--ink) 100%);
}
/* Without a stacking context the absolutely-positioned bg layers paint OVER
   the in-flow heading, washing it out. Raise the content above them. */
.method-layout {
  position: relative;
  z-index: 3;
}

.steps {
  display: flex;
  align-items: stretch;
  gap: 18px;
  position: relative; z-index: 3;
}
.step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 32px 26px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 12px;
  transition: flex-grow .55s cubic-bezier(.2,.7,.2,1), transform .35s, border-color .35s, background .35s, opacity .35s, box-shadow .35s;
  min-height: 340px;
}
.step-dur {
  position: absolute;
  top: 32px; right: 26px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.step-more {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  text-wrap: pretty;
}
/* Desktop with mouse: cards expand on hover and reveal extra detail */
@media (hover: hover) and (min-width: 1101px) {
  .step .step-more {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease .08s;
  }
  .step:hover {
    flex-grow: 1.9;
    transform: translateY(-6px);
    border-color: rgba(199, 168, 242, 0.45);
    background: linear-gradient(180deg, rgba(135, 74, 215, 0.14) 0%, rgba(255,255,255,0.03) 100%);
    box-shadow: 0 30px 60px -30px rgba(92, 33, 195, 0.55);
  }
  .step:hover .step-more {
    max-height: 240px;
    opacity: 1;
  }
  .steps:hover .step:not(:hover) { opacity: 0.78; }
}
.step-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--lilac);
  background: rgba(135, 74, 215, 0.14);
  margin-bottom: 8px;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
}
.step > p {
  color: var(--text-soft);
  font-size: 0.94rem;
}
.step ul {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.step ul li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-soft);
  letter-spacing: 0.03em;
  display: flex; align-items: center; gap: 8px;
}
.step ul li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--orchid);
  border-radius: 50%;
}

/* =====================================================
   SERVICES
   ===================================================== */
.services {
  position: relative;
  padding: clamp(100px, 13vw, 180px) 0;
  background: var(--ink);
  overflow: hidden;
}
.services::before {
  content: "";
  position: absolute;
  top: -200px; left: 50%;
  width: 100%; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(60% 60% at 50% 0%, rgba(135, 74, 215, 0.25), transparent 60%);
  pointer-events: none;
}
.services .container {
  position: relative;
  z-index: 1;
}

.services-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}
.services-grid > .service:nth-child(1) { grid-row: span 2; }
.services-grid > .service:nth-child(2) { grid-column: 2 / span 2; }

.service {
  position: relative;
  padding: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  gap: 16px;
  min-height: 280px;
  overflow: hidden;
  transition: transform .35s, border-color .35s;
}
.service::before {
  content: "";
  position: absolute;
  top: -50%; right: -50%;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(135, 74, 215, 0.18), transparent 70%);
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.service:hover {
  transform: translateY(-3px);
  border-color: rgba(199, 168, 242, 0.35);
}
.service:hover::before { opacity: 1; }

.service-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.service-tag .ix {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--lilac);
  font-size: 0.7rem;
}
.service h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.service > p { color: var(--text-soft); font-size: 0.95rem; }
.service-bullets {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.service-bullets li {
  font-size: 0.88rem;
  color: var(--text-soft);
  display: flex; align-items: center; gap: 10px;
}
.service-bullets li::before {
  content: ""; width: 5px; height: 5px;
  background: var(--magenta); border-radius: 50%;
}

.service--feature {
  background:
    radial-gradient(80% 60% at 100% 100%, rgba(147, 3, 197, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(135, 74, 215, 0.16) 0%, rgba(20, 12, 73, 0.4) 100%);
  border-color: rgba(199, 168, 242, 0.25);
}
.service--feature h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--lilac);
  width: max-content;
  padding-top: 8px;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .25s; }
.link-arrow:hover { color: var(--paper); }
.link-arrow:hover svg { transform: translateX(3px); }

/* =====================================================
   MANIFESTO / KPIs
   ===================================================== */
.manifesto {
  padding: clamp(100px, 12vw, 180px) 0;
  background: var(--night);
}
.manifesto-bg {
  position: absolute; inset: 0; z-index: 0;
}
.manifesto-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/lamp-room.jpg") center / cover no-repeat;
  opacity: 0.45;
}
.manifesto-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,4,32,0.86), rgba(6,4,22,0.94)),
    radial-gradient(80% 60% at 50% 50%, rgba(147, 3, 197, 0.14), transparent 60%);
}

.manifesto-layout {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.manifesto-copy h2 { margin-bottom: 24px; }
.manifesto-copy h2 em {
  font-style: italic;
}
.manifesto-copy .lede { margin-bottom: 32px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.kpi-grid li {
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 8px;
  backdrop-filter: blur(8px);
}
.kpi-grid strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(96deg, var(--paper), var(--lilac));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.kpi-grid span {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.4;
}

/* =====================================================
   AUDIENCES
   ===================================================== */
.audiences {
  padding: clamp(100px, 13vw, 180px) 0;
  background: var(--ink);
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.audience {
  padding: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .35s, transform .35s;
}
.audience::after {
  content: "";
  position: absolute;
  bottom: -30%; left: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(135, 74, 215, 0.15), transparent 70%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.audience:hover {
  border-color: rgba(199, 168, 242, 0.3);
  transform: translateY(-3px);
}
.audience:hover::after { opacity: 1; }
.aud-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lilac);
  padding: 6px 12px;
  border: 1px solid rgba(199, 168, 242, 0.3);
  border-radius: 999px;
  width: max-content;
  background: rgba(135, 74, 215, 0.10);
}
.audience h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
  line-height: 1.18;
}
.audience > p { color: var(--text-soft); font-size: 0.96rem; }
.audience ul {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.audience ul li {
  font-size: 0.88rem;
  color: var(--text-soft);
  display: flex; align-items: center; gap: 10px;
}
.audience ul li::before {
  content: "";
  width: 16px; height: 1px; background: var(--orchid);
}

/* =====================================================
   STORIES
   ===================================================== */
.stories {
  padding: clamp(100px, 13vw, 180px) 0;
  background: var(--night);
}
.stories-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(50% 50% at 80% 30%, rgba(135, 74, 215, 0.25), transparent 70%),
    radial-gradient(60% 60% at 10% 80%, rgba(31, 19, 125, 0.35), transparent 70%);
}
.stories .container { position: relative; z-index: 3; }
.stories-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 18px;
}
.stories-grid > .story:nth-child(1) { grid-row: span 2; }
.stories-grid > .story:nth-child(2) { grid-column: 2 / span 2; }
.stories-grid > .story:nth-child(6) { grid-column: 2 / span 2; }
.stories-grid > .story:nth-child(1) blockquote { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.story {
  padding: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 250px;
  transition: opacity .45s ease, transform .45s ease, border-color .35s ease;
}
.story.is-swapping {
  opacity: 0;
  transform: translateY(10px) scale(0.99);
}
.stars { color: var(--orchid-bright); font-size: 1rem; letter-spacing: 0.15em; }
.story blockquote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 0;
  color: var(--text);
}
.story footer {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--magenta));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paper);
  font-size: 0.85rem;
}
.story footer strong {
  display: block; font-weight: 600; color: var(--text); font-size: 0.95rem;
}
.story footer span {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
}
.story-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--lilac);
}
.story--quote {
  background:
    radial-gradient(80% 80% at 100% 100%, rgba(147, 3, 197, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(92, 33, 195, 0.25), rgba(20, 12, 73, 0.5));
  border-color: rgba(199, 168, 242, 0.25);
  justify-content: space-between;
}
.quote-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.quote-big em { font-style: italic; color: var(--lilac); }

/* =====================================================
   FINAL CTA
   ===================================================== */
.final {
  padding: clamp(110px, 14vw, 200px) 0;
  background: var(--ink);
}
.final-bg { position: absolute; inset: 0; z-index: 0; }
.final-bg-palms {
  position: absolute; inset: 0;
  background-image: url("assets/palms-beach.jpg");
  background-size: cover;
  background-position: center 50%;
  filter: saturate(1.2) contrast(1.05) brightness(0.85);
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 60%, #000 0%, rgba(0,0,0,0.4) 50%, transparent 90%);
  mask-image: radial-gradient(60% 70% at 50% 60%, #000 0%, rgba(0,0,0,0.4) 50%, transparent 90%);
}
.final-bg-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(6,4,22,0.72) 30%,
    rgba(6,4,22,0.68) 70%,
    var(--ink) 100%);
}
.final-layout {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.final-copy h2 { margin-bottom: 24px; }
.final-copy h2 em { font-style: italic; }
.final-copy .lede { margin-bottom: 32px; }
.final-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.lead-card {
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-card);
}
.lead-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.lead-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
}
.lead-head strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.lead-status {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lead-card label {
  display: flex; flex-direction: column; gap: 6px;
}
.lead-card label span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.lead-card input,
.lead-card select,
.lead-card textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .2s, background .2s;
  font-size: 0.95rem;
}
.lead-card input:focus,
.lead-card select:focus,
.lead-card textarea:focus {
  border-color: var(--orchid);
  background: rgba(0, 0, 0, 0.35);
}
.lead-card textarea { resize: vertical; min-height: 80px; }
.lead-card select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23B6ACD2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-note { font-size: 0.84rem; color: var(--lilac); margin-top: 4px; min-height: 18px; }
.lead-card input::placeholder,
.lead-card textarea::placeholder { color: var(--text-dim); opacity: 1; }

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 80px 0 32px;
  color: var(--text-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer-brand p { font-size: 0.92rem; margin: 18px 0 22px; max-width: 32ch; }
.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer-grid > div > a {
  display: block;
  font-size: 0.95rem;
  padding: 4px 0;
  color: var(--text-soft);
  transition: color .2s;
}
.footer-grid > div > a:hover { color: var(--text); }
.social { display: flex; gap: 10px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
  transition: color .2s, border-color .2s, background .2s;
}
.social a:hover { color: var(--paper); border-color: var(--orchid); background: rgba(135, 74, 215, 0.15); }
.social svg { width: 18px; height: 18px; }
.footer-region {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 10px;
}
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* =====================================================
   SERVICE DETAIL SHEETS (slide-in side panel)
   ===================================================== */
.sheets {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
}
.sheets[aria-hidden="false"] { pointer-events: auto; }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 4, 22, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .35s ease;
}
.sheets[aria-hidden="false"] .sheet-backdrop { opacity: 1; }

.sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: linear-gradient(180deg, #0d0628 0%, #060416 100%);
  border-left: 1px solid var(--line-strong);
  box-shadow: -30px 0 80px -20px rgba(0,0,0,0.6);
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  overflow: hidden;
  visibility: hidden;
}
.sheet.is-open {
  transform: translateX(0);
  visibility: visible;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(135, 74, 215, 0.10) 0%, transparent 100%);
}
.sheet-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lilac);
}
.sheet-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.sheet-close:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--orchid);
}
.sheet-close svg { width: 16px; height: 16px; }

.sheet-body {
  padding: 32px 28px 24px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--violet) transparent;
}
.sheet-body::-webkit-scrollbar { width: 6px; }
.sheet-body::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 3px; }
.sheet-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 12px;
  text-wrap: balance;
}
.sheet-lede {
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.5;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
}
.sheet-grid > div {
  display: flex; flex-direction: column; gap: 10px;
}
.sheet-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lilac);
  font-weight: 500;
  margin: 0;
}
.sheet-grid ul {
  display: flex; flex-direction: column; gap: 8px;
}
.sheet-grid ul li {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.45;
  display: flex; align-items: flex-start; gap: 10px;
}
.sheet-grid ul li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  background: var(--magenta);
  border-radius: 50%;
  margin-top: 8px;
}
.sheet-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 20px 28px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.sheet-foot > span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Make link-arrow buttons clean */
button.link-arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0 0;
  text-align: left;
}

@media (max-width: 600px) {
  .sheet-grid { grid-template-columns: 1fr; }
}


.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
/* Safety net: anything still hidden after 2s gets revealed */
.js-reveal.reveal-flush .reveal:not(.is-in) { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 1100px) {
  .insight-layout { grid-template-columns: 1fr; }
  .insight-copy { position: static; }
  .steps { flex-wrap: wrap; }
  .step { flex: 1 1 calc(50% - 9px); }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-grid > .service:nth-child(1) { grid-row: auto; grid-column: 1 / -1; }
  .services-grid > .service:nth-child(2) { grid-column: auto; }
  .manifesto-layout, .final-layout { grid-template-columns: 1fr; }
  .stories-grid { grid-template-columns: 1fr 1fr; }
  .stories-grid > .story:nth-child(1) { grid-row: auto; }
  .stories-grid > .story:nth-child(2),
  .stories-grid > .story:nth-child(6) { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  /* Hero */
  .hero { padding: 110px 0 80px; min-height: auto; }
  .hero-title { font-size: clamp(2.4rem, 9vw, 3.4rem); }
  .hero-lede { font-size: 1rem; }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-cta .btn-lg { width: 100%; justify-content: center; }
  .hero-trust { font-size: 0.85rem; gap: 10px 20px; flex-wrap: wrap; }
  .hero-scroll { display: none; }

  /* Band: ocultar separadores de puntos en móvil */
  .band-items > li:nth-child(even) { display: none; }
  .band-items { gap: 10px 16px; flex-wrap: wrap; justify-content: center; }

  /* Insight */
  .insight { padding-block: 60px 40px; }
  .insight-copy { padding-block: 0 32px; }
  .symptoms-progress { max-width: 100%; }

  /* Steps */
  .step { flex: 1 1 100%; min-height: 0; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .service { padding: 24px 20px; }

  /* Manifesto */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .kpi-grid li strong { font-size: clamp(2rem, 8vw, 2.8rem); }
  .manifesto { padding-block: 80px; }

  /* Audiences */
  .audience-grid { grid-template-columns: 1fr; }

  /* Stories */
  .stories-grid { grid-template-columns: 1fr; }
  .stories-grid > .story:nth-child(2),
  .stories-grid > .story:nth-child(6) { grid-column: auto; }

  /* Final CTA */
  .final-layout { gap: 48px; }
  .final-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .final-cta .btn-lg { width: 100%; justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 4px; text-align: center; }

  /* Nav */
  .nav-inner { grid-template-columns: auto 1fr; }
  .nav-cta { justify-self: end; gap: 6px; }

  /* Symptoms */
  .symptoms li { grid-template-columns: 1fr; gap: 6px; }
  .symptoms .num { padding-top: 0; }

  /* Sheets: panel completo en móvil */
  .sheet { width: 100vw; right: 0; }
}

/* Pantallas muy chicas */
@media (max-width: 400px) {
  .hero-title { font-size: 2.2rem; }
  .display { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .btn-lg { padding: 13px 20px; font-size: 0.95rem; }
  .kpi-grid { grid-template-columns: 1fr; }
}