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

@font-face {
  font-family: 'Departure Mono';
  src: url('fonts/DepartureMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — dark + mint, no gold */
  --green-dark:   #0a0a0a;
  --green-mid:    #111111;
  --green-card:   rgba(255,255,255,0.04);
  --green-border: #1e1e1e;
  --accent:       #1fc490;
  --accent-dim:   #19a578;
  --accent-soft:  rgba(31,196,144,0.32);
  --text:         #d4d4d4;
  --text-muted:   #8e8e8e;
  --text-faint:   #5e5e5e;
  --white:        #ffffff;
  --rule:         rgba(255,255,255,0.08);
  --rule-strong:  rgba(255,255,255,0.14);
  --gold:         #c9a84c;
  --gold-soft:    rgba(201,168,76,0.42);

  /* Typography — single Geist family with Mono for technical labels */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:   'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

html {
  scroll-behavior: smooth;
  /* Reserve space for the scrollbar so the centered grid doesn't shift
     left when the scrollbar appears (Windows / non-overlay scrollbars). */
  scrollbar-gutter: stable;
}

body {
  background-color: var(--green-dark);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── FILM GRAIN
   A static SVG-turbulence noise layer above the page but below modal UI.
   Soft-light blend keeps it as texture, not pattern. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.07;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ── BLUEPRINT GRID LINES
   Canvas overlay that animates subtle accent-green hairlines between
   adjacent dots in the body grid. Driven by main.js. Respects
   prefers-reduced-motion (script bails out). */
.grid-lines {
  display: none;
}

/* ── SCROLL PROGRESS
   A thin top-of-viewport indicator that tracks document scroll, driven by
   --scroll-progress (0–1) set in main.js. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: rgba(255,255,255,0.04);
}
.scroll-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--scroll-progress, 0) * 100%);
  background: var(--accent);
  box-shadow: 0 0 10px rgba(31,196,144,0.45);
  transform-origin: left center;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 5vw;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--green-border);
}

.nav-logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--white); text-decoration: none;
  font-family: var(--font-body);
}
.nav-logo-img {
  height: 2em;
  width: auto;
  object-fit: contain;
  display: block;
}
.nav-logo-text {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--white);
  line-height: 1;
}

nav a.nav-link {
  color: var(--text-muted); text-decoration: none;
  font-size: 0.9rem; margin-left: 2rem;
  transition: color 0.2s;
}
nav a.nav-link:hover { color: var(--white); }

.nav-cta {
  margin-left: 2rem;
  background: var(--accent); color: #0a0a0a;
  padding: 0.45rem 1.1rem; border-radius: 999px;
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.nav-cta:hover { background: #2ee08a; transform: translateY(-1px); }

/* Hamburger — hidden on desktop, shown ≤900px */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--green-border);
  border-radius: 8px;
  width: 40px; height: 40px;
  cursor: pointer;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  padding: 0;
  z-index: 110;
  transition: background 0.2s, border-color 0.2s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); }
.nav-toggle-bar {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
nav.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
nav.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
nav.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  nav {
    padding: 0.9rem 5vw;
    /* backdrop-filter creates a containing block that traps the fullscreen
       nav-links overlay inside the navbar's height. Use a solid bg instead
       so the overlay can escape to the viewport edges. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,10,10,0.92);
  }
  .nav-toggle { display: flex; }
  .nav-logo-text { font-size: 0.9rem; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 105;
  }
  nav.is-open .nav-links {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links .nav-link {
    margin-left: 0;
    font-size: 1.4rem;
    color: var(--text);
  }
  .nav-links .nav-cta {
    margin-left: 0;
    margin-top: 1rem;
    font-size: 1rem;
    padding: 0.7rem 1.6rem;
  }
}

/* ── HERO ── */
.hero {
  min-height: calc(100vh + 8rem);
  display: flex; align-items: center;
  padding: 7rem 0 clamp(4rem, 12vw, 15rem) 5vw;
  position: relative;
  overflow: hidden;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding: 6rem 5vw 3rem;
    /* Stack hero-grid above hero-tagline (was absolute on desktop). */
    flex-direction: column;
    align-items: stretch;
  }
}

/* Windows-laptop short viewports (typically 1366×768): the desktop
   hero is min-height calc(100vh + 8rem), and Chrome's URL/tab bars eat
   ~120px of vertical space — together those push the absolute-positioned
   tagline below the fold. Drop the +8rem cushion and trim the bottom
   padding so the tagline lands inside the visible viewport. Scoped to
   max-height: 820px so any common Mac (≥900) is untouched. */
@media (max-height: 820px) and (min-width: 901px) {
  .hero {
    min-height: 100vh;
    padding-bottom: clamp(2.5rem, 7vw, 5rem);
  }
  .hero-tagline { bottom: 6.5rem; }
}

/* Hero glow now lives on .hero-visual::before so it tracks the headset's
   container across viewport widths. See that rule below. */

.hero-grid {
  width: 100%;
  max-width: 1800px; margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 10fr;
  gap: 2.5rem;
  align-items: center;
  position: relative; z-index: 1;
}

/* At Windows-laptop widths the text column needs a touch more room so
   "See the yard" doesn't wrap. Slight redistribution toward the text. */
@media (min-width: 901px) and (max-width: 1300px) {
  .hero-grid { grid-template-columns: 6fr 9fr; }
}

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

.hero-content {
  text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: 1rem;
  position: relative;
  isolation: isolate;
}

@media (max-width: 900px) {
  .hero-content {
    margin-top: 0;
    align-items: center;
    text-align: center;
  }
  .hero-content .hero-actions { justify-content: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  /* Shrink the headline on phones so "before you build it." fits on a
     single line — keeps the H1 to a clean two-line layout instead of
     orphaning "it." onto a third line. */
  /* Clamp so the H1 holds two lines across every mobile width:
     - 2.4rem at ≤360px (narrow Android) so "before you build it." fits
     - 2.7rem at ≥375px (iPhone) for proper visual weight
     The calc() linearly crosses 38.4px at 360px and 43.2px at 375px. */
  .hero h1 { font-size: clamp(2.4rem, calc(-4.8rem + 32vw), 2.7rem); }
}

.hero-eyebrow {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero-line { display: inline-block; }
/* "See the yard" should always sit on a single line — it's always short
   enough that this never forces grid column growth. The second line is
   allowed to wrap naturally (matches the Mac layout). */
.hero-line:first-child { white-space: nowrap; }

/* Bottom-centered tagline + scroll cue */
.hero-tagline {
  position: absolute;
  bottom: 10.5rem;
  left: 0; right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

/* Higher specificity so this beats the later .hero p rule. */
.hero .hero-tagline p {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  white-space: nowrap;
  max-width: none;
}

@media (max-width: 900px) {
  .hero-tagline {
    position: static;
    margin-top: 2.5rem;
    bottom: auto;
  }
  .hero .hero-tagline p {
    white-space: normal;
    font-size: 0.85rem;
    letter-spacing: 0.10em;
    padding: 0 1rem;
  }
}
.hero-scroll {
  pointer-events: auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease-out;
  animation: bounce-arrow 2.2s ease-in-out infinite;
}
.hero-scroll:hover { color: var(--accent); }
.hero-scroll svg { width: 22px; height: 22px; }

@keyframes bounce-arrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

h1 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7.4vw, 5.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 1.5rem;
}

h1 .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.hero p {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text-muted); max-width: 480px;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* ── Hero entrance animations (from blend-hero-glow) ── */
.hero-anim {
  opacity: 0;
  transform: translateY(14px);
  animation: heroRise 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-anim-1 { animation-delay: 0ms;    transform: translateY(0); animation-name: heroFade; }
.hero-anim-2 { animation-delay: 300ms;  transform: translateY(12px); }
.hero-anim-3 { animation-delay: 700ms;  transform: translateY(16px); }
.hero-anim-4 { animation-delay: 1100ms; transform: translateY(0); animation-name: heroFade; }
.hero-anim-5 { animation-delay: 1500ms; transform: translateY(8px); }

@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade {
  to { opacity: 1; }
}

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

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-secondary svg { width: 14px; height: 14px; }

.btn-primary {
  background: var(--accent); color: #0a0a0a;
  padding: 0.85rem 2.2rem; border-radius: 999px;
  font-size: 1rem; font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 0 32px rgba(31,196,144,0.25);
}
.btn-primary:hover {
  background: #2ee08a; transform: translateY(-2px);
  box-shadow: 0 0 48px rgba(31,196,144,0.4);
}
.btn-primary:disabled {
  opacity: 0.4; cursor: not-allowed; transform: none;
  box-shadow: none;
}

.btn-secondary {
  border: 1px solid var(--green-border);
  color: var(--text); padding: 0.85rem 2.2rem; border-radius: 999px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  background: rgba(255,255,255,0.04);
  transition: background 0.2s, border-color 0.2s;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
}

.hero-visual {
  width: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

/* Layered green glow anchored to the headset's container so it follows
   the headset on every viewport. Pseudo is oversized via negative insets
   so the wide outer wash has room to bleed beyond .hero-visual's box. */
.hero-visual::before {
  content: "";
  position: absolute;
  top: 0; left: -25%; right: -25%; bottom: -30%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 36% at 53% 74%,
      rgba(31,196,144,0.14) 0%,
      rgba(31,196,144,0.10) 22%,
      rgba(31,196,144,0.06) 48%,
      rgba(31,196,144,0.025) 72%,
      rgba(31,196,144,0.008) 88%,
      transparent 100%),
    radial-gradient(ellipse 46% 26% at 53% 72%,
      rgba(31,196,144,0.30) 0%,
      rgba(31,196,144,0.22) 22%,
      rgba(31,196,144,0.14) 44%,
      rgba(31,196,144,0.07) 66%,
      rgba(31,196,144,0.025) 84%,
      transparent 100%),
    radial-gradient(ellipse 33% 11% at 53% 63%,
      rgba(31,196,144,0.52) 0%,
      rgba(31,196,144,0.34) 32%,
      rgba(31,196,144,0.18) 58%,
      rgba(31,196,144,0.07) 80%,
      rgba(31,196,144,0.02) 92%,
      transparent 100%),
    radial-gradient(ellipse 28% 2.6% at 53% 63%,
      rgba(120,255,200,0.65) 0%,
      rgba(31,196,144,0.45) 30%,
      rgba(31,196,144,0.20) 60%,
      rgba(31,196,144,0.06) 85%,
      transparent 100%);
}

/* Multi-layer ambient halo behind the headset. Three stacked ellipses at
   progressively larger sizes / lower alphas give a very gradual fade to
   black and let the green wrap up around the lower goggle edges instead
   of stopping abruptly underneath. */
/* Background halo behind the headset removed per request. The green
   contact-line glow on .hero::before and the headset rim drop-shadow
   provide the only remaining green accents. */

/* ── Vision Pro headset with embedded slider ── */
.headset {
  position: relative;
  z-index: 1;
  width: 100%;
  transform: translateX(2rem) scale(1.25);
  transform-origin: center center;
}

@media (max-width: 1200px) {
  .headset { transform: translateX(1rem) scale(1.1); }
}

@media (max-width: 900px) {
  /* Bigger on mobile so the headset reads as the dominant hero element,
     and nudge it up into the viewport so the goggles sit closer to the
     hero copy above. will-change promotes .headset to its own composited
     layer — stabilizes iOS Safari rasterization of the masked slider
     contents inside this transformed parent (fixes black-flash on drag). */
  .headset {
    transform: translateY(-5rem) scale(1.32);
    transform-origin: center 40%;
    will-change: transform;
  }

  /* The visual block is taller than its image due to the upward translate
     above — pull its bottom margin back so the tagline below doesn't pick
     up extra whitespace. */
  .hero-visual { margin-bottom: -5rem; }

  /* Glow needs to track up so contact shadows sit directly under the
     goggles on the narrower viewport. Re-anchor each gradient's y% AND
     translate the whole pseudo by the same -5rem the headset moved, so
     the contact line stays glued to the bottom of the goggles. */
  .hero-visual::before {
    transform: translateY(-5rem);
    background:
      radial-gradient(ellipse 60% 36% at 53% 64%,
        rgba(31,196,144,0.14) 0%,
        rgba(31,196,144,0.10) 22%,
        rgba(31,196,144,0.06) 48%,
        rgba(31,196,144,0.025) 72%,
        rgba(31,196,144,0.008) 88%,
        transparent 100%),
      radial-gradient(ellipse 46% 26% at 53% 62%,
        rgba(31,196,144,0.30) 0%,
        rgba(31,196,144,0.22) 22%,
        rgba(31,196,144,0.14) 44%,
        rgba(31,196,144,0.07) 66%,
        rgba(31,196,144,0.025) 84%,
        transparent 100%),
      radial-gradient(ellipse 33% 11% at 53% 54%,
        rgba(31,196,144,0.52) 0%,
        rgba(31,196,144,0.34) 32%,
        rgba(31,196,144,0.18) 58%,
        rgba(31,196,144,0.07) 80%,
        rgba(31,196,144,0.02) 92%,
        transparent 100%),
      radial-gradient(ellipse 28% 2.6% at 53% 54%,
        rgba(120,255,200,0.65) 0%,
        rgba(31,196,144,0.45) 30%,
        rgba(31,196,144,0.20) 60%,
        rgba(31,196,144,0.06) 85%,
        transparent 100%);
  }
}

/* (Removed: the green line beam used to live here at z-index: 2 and was
   rendering OVER the headset image. Glow now comes purely from the halo
   behind the headset on .hero-visual::before plus the rim drop-shadow.) */

/* Two small contact shadows — one under each goggle where the headset
   meets the reflective surface. Tight and soft so they ground the
   headset without breaking the green halo. */
.headset::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 73.6%;
  transform: translate(-50%, -50%);
  width: 72%;
  height: 14px;
  pointer-events: none;
  z-index: 3;
  /* Multiply so the shadow only darkens whatever's behind it (the
     green halo, the dark backdrop). Pure black at any alpha never
     adds its own color — no green ring around the shadow. */
  mix-blend-mode: multiply;
  background:
    /* Left contact shadow — horizontally elongated ellipse so the
       natural radial falloff produces a teardrop: full-height under
       the goggle, tapering to ~zero height as it approaches the
       middle. Softer peak + extra mid stops so it dissolves smoothly
       into the surrounding green glow rather than cutting against it. */
    radial-gradient(ellipse 30% 100% at 24% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.96) 4%,
      rgba(0,0,0,0.82) 8%,
      rgba(0,0,0,0.58) 14%,
      rgba(0,0,0,0.42) 26%,
      rgba(0,0,0,0.28) 42%,
      rgba(0,0,0,0.16) 58%,
      rgba(0,0,0,0.08) 74%,
      rgba(0,0,0,0.03) 88%,
      rgba(0,0,0,0.008) 96%,
      transparent 100%),
    /* Right contact shadow — mirror */
    radial-gradient(ellipse 30% 100% at 76% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.96) 4%,
      rgba(0,0,0,0.82) 8%,
      rgba(0,0,0,0.58) 14%,
      rgba(0,0,0,0.42) 26%,
      rgba(0,0,0,0.28) 42%,
      rgba(0,0,0,0.16) 58%,
      rgba(0,0,0,0.08) 74%,
      rgba(0,0,0,0.03) 88%,
      rgba(0,0,0,0.008) 96%,
      transparent 100%);
}

/* Tight green rim glow that hugs the headset silhouette, plus a
   stronger diffuse halo so the headset reads as backlit by the green
   bloom on .hero-visual::before. */
.headset-core {
  position: relative;
  width: 100%;
  filter:
    drop-shadow(0 0 4px  rgba(31,196,144,0.10))
    drop-shadow(0 0 10px rgba(31,196,144,0.06));
}

/* Mirrored reflection — a visual clone of .headset-core (slider + image),
   flipped, blurred, and mask-faded so it looks like a real reflection on
   a glossy floor. */
.headset-reflection-core {
  position: absolute;
  left: 0;
  top: 48%;
  width: 100%;
  display: block;
  pointer-events: none;
  transform: scaleY(-1);
  opacity: 0.46;
  filter:
    blur(2px) brightness(1) contrast(1.2) saturate(0.95)
    drop-shadow(0 0 18px rgba(31,196,144,0.28))
    drop-shadow(0 0 42px rgba(31,196,144,0.18));
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,0.58) 0%,
    rgba(0,0,0,0.51) 22%,
    rgba(0,0,0,0.32) 58%,
    rgba(0,0,0,0.09) 84%,
    transparent 100%);
          mask-image: linear-gradient(to top,
    rgba(0,0,0,0.58) 0%,
    rgba(0,0,0,0.51) 22%,
    rgba(0,0,0,0.32) 58%,
    rgba(0,0,0,0.09) 84%,
    transparent 100%);
}

/* The mirrored slider should never be interactive. */
.ba-slider-mirror {
  cursor: default;
  pointer-events: none;
}
.ba-slider-mirror .ba-label,
.ba-slider-mirror .ba-handle-knob {
  pointer-events: none;
  cursor: default;
}

.headset-img {
  position: relative;
  width: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.lens-clip-defs {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}

/* ── Before/After slider — clipped to lens shape ── */
.ba-slider {
  position: absolute;
  top: 26%; bottom: 32%;
  left: 21%; right: 21%;
  clip-path: url(#lens-clip);
  -webkit-clip-path: url(#lens-clip);
  cursor: ew-resize;
  user-select: none;
  z-index: 2;
  /* Lens-color backdrop so images fade into the dark glass */
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, #1a1a1a 0%, #0a0a0a 60%, #050505 100%);
}

/* Soft-masked image stage inside the slider */
.ba-stage {
  position: absolute; inset: 0;
  -webkit-mask: url(#lens-mask);
          mask: url(#lens-mask);
}

.ba-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 1.5rem;
}

.ba-after {
  background-image: url('After.png');
  background-size: cover;
  background-position: center 75%;
}

/* Driven by --ba-pct (set on :root by main.js). Both the live slider's
   .ba-before AND the mirror reflection's .ba-before track the same var,
   so dragging the slider also moves the reflection in lockstep. */
.ba-before {
  background-image: url('Before.png');
  background-size: cover;
  background-position: center 75%;
  clip-path: inset(0 calc(100% - var(--ba-pct, 50) * 1%) 0 0);
  justify-content: flex-end;
}

.ba-label {
  position: absolute;
  top: 18%;
  z-index: 4;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.10);
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 10px rgba(0,0,0,0.28),
              inset 0 1px 0 rgba(255,255,255,0.35),
              inset 0 -1px 0 rgba(0,0,0,0.18);
  transition: background 0.22s ease-out,
              color 0.22s ease-out,
              border-color 0.22s ease-out,
              box-shadow 0.22s ease-out,
              transform 0.22s ease-out;
}
.ba-label-before { left: 15%; }
.ba-label-after  { right: 15%; }
/* Hide the BEFORE/AFTER pill buttons on mobile — they're oversized in
   the tight viewport and the slider drag still works without them. */
@media (max-width: 900px) {
  .ba-label,
  .ba-label-before,
  .ba-label-after { display: none !important; }
}
.ba-label:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 6px 18px rgba(0,0,0,0.38),
              0 0 0 4px rgba(255,255,255,0.06),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -1px 0 rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.ba-label.is-active {
  background: rgba(255,255,255,0.85);
  color: #0a0a0a;
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 4px 14px rgba(0,0,0,0.32),
              inset 0 1px 0 rgba(255,255,255,0.9),
              inset 0 -1px 0 rgba(0,0,0,0.08);
}
.ba-label.is-active:hover {
  background: rgba(255,255,255,0.95);
  color: #0a0a0a;
  transform: translateY(-1px);
}

.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--ba-pct, 50) * 1%);
  width: 1.5px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 14%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0.55) 86%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255,255,255,0.5);
}

.ba-handle-line {
  position: absolute; inset: 0;
}

.ba-handle-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.95);
  pointer-events: auto;
  cursor: grab;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45),
              0 1px 2px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -1px 0 rgba(0,0,0,0.18),
              inset 0 0 0 1px rgba(255,255,255,0.06),
              0 0 0 0 rgba(255,255,255,0);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out;
}
.ba-handle-knob svg {
  width: 18px; height: 18px;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ba-handle-knob:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.55);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 8px 22px rgba(0,0,0,0.5),
              0 1px 2px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.7),
              inset 0 -1px 0 rgba(0,0,0,0.18),
              inset 0 0 0 1px rgba(255,255,255,0.1),
              0 0 0 6px rgba(255,255,255,0.05);
}
.ba-handle-knob:hover svg {
  transform: scale(1.08);
}

.ba-slider.is-grabbing { cursor: grabbing; }
.ba-slider.is-grabbing .ba-handle-knob,
.ba-handle-knob:active {
  cursor: grabbing;
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.7);
  transform: translate(-50%, -50%) scale(0.9);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5),
              0 1px 2px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.85),
              inset 0 -1px 0 rgba(0,0,0,0.2),
              inset 0 0 0 1px rgba(255,255,255,0.2),
              0 0 0 8px rgba(255,255,255,0.07);
}
.ba-slider.is-grabbing .ba-handle-knob svg,
.ba-handle-knob:active svg {
  transform: scale(0.92);
}

/* Shrink the BEFORE/AFTER drag knob on mobile. Placed AFTER the base
   .ba-handle-knob rule so the cascade resolves to the smaller size.
   Also drop backdrop-filter on mobile — on iOS Safari, a backdrop-filter
   sampling through a mask/clip inside a transformed parent intermittently
   returns black mid-drag. Solid translucent background looks the same at
   phone scale and avoids the bug. */
@media (max-width: 900px) {
  .ba-handle-knob {
    width: 26px; height: 26px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.22);
  }
  .ba-handle-knob svg { width: 12px; height: 12px; }
  /* Promote the slider image layers to their own composited layers so
     iOS doesn't re-rasterize them through the parent's transform/clip on
     every drag frame — eliminates the intermittent black flash. */
  .ba-stage,
  .ba-img { transform: translateZ(0); }
}

/* ── Demo video shared base — used by the in-action stage below.
   Geometry (size, frame, corners, controls) lives in the .in-action
   block; only the inner <video> element keeps its baseline rules here. */
.demo-video-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
}
.demo-video {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.demo-video-wrap > .corner { z-index: 3; }

.demo-video-mute .icon-unmuted { display: none; }
.demo-video-mute.is-unmuted .icon-muted { display: none; }
.demo-video-mute.is-unmuted .icon-unmuted { display: block; }

/* ── SECTIONS ── */
section { padding: 7rem 5vw; position: relative; }

/* Section divider — full-width blueprint hairline with a centered reticle.
   Applied to every reveal section *except* the hero (which sits before the
   first one), the divider lives at the top edge of the section. */
[data-reveal-section]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule-strong);
  pointer-events: none;
}

.section-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1.5rem;
}
/* Chapter number — Geist Mono numeral wrapped in brackets */

[data-reveal-section] .container { position: relative; }
[data-reveal-section] .section-label[data-chapter] { position: relative; z-index: 2; }
[data-reveal-section] h2 { position: relative; z-index: 2; }
[data-reveal-section] .section-intro { position: relative; z-index: 2; }

h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 1.2rem;
}
h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: inherit;
}

.section-intro {
  font-size: 1.05rem; color: var(--text-muted);
  max-width: 600px; margin-bottom: 4rem;
}

/* ── FEATURES ── */
.features { background: transparent; }

/* Features breathes wider than the standard container so the asymmetric
   grid has room to feel architectural. Matches the wider container set
   globally below. */

/* Two-column editorial header: h2 anchors the left column, the
   description hangs in the right column with a small mono tag and a
   mint hairline echoing the blueprint vocabulary. Items align to the
   bottom so the description sits at the headline's baseline. */
.features-header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 4.5rem;
  row-gap: 2rem;
  align-items: end;
  margin-bottom: 3.5rem;
  position: relative;
}

.features-header-lede { display: flex; flex-direction: column; }
.features-header-lede .section-label { margin-bottom: 1.25rem; }
.features-header-lede h2 {
  margin-bottom: 0;
  max-width: none;
}
.head-break { display: none; }
@media (min-width: 901px) {
  .head-break { display: inline; }
}

.features-header-desc {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding-bottom: 0.45rem; /* sits at h2 baseline */
  position: relative;
  padding-left: 1.5rem;
}
.features-header-desc::before {
  content: "";
  position: absolute;
  top: 0.35rem; bottom: 0.45rem;
  left: 0;
  width: 1px;
  background: var(--rule-strong);
}

.features-header-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.features-header-tag::before {
  content: "";
  width: 0.85rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.features-header .section-intro {
  margin-bottom: 0;
  max-width: 50ch;
  font-size: 1rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .features-header {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
    margin-bottom: 2.5rem;
  }
  .features-header-lede h2 { max-width: 18ch; }
  .features-header-desc { padding-bottom: 0; }
}

/* 3-column grid. Hero card (top-left) spans 2 columns; the other 4 each
   take 1 column. Top row: hero(2) + narrow(1) = 3 cells. Bottom row:
   narrow(1) × 3 = 3 cells. Five cards total. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.5rem;
  margin-top: 0;
}

/* Layered card composition:
   bg image → blueprint placeholder → gradient overlay → body (text)
   Image scales on hover; rule and corner bracket animate in for a
   restrained editorial flourish. */
.feature-card {
  position: relative;
  grid-column: span 1;
  min-height: 380px;
  background: #0c0c0c;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  display: block;
  transition:
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card-hero {
  grid-column: span 2;
  min-height: 540px;
}

@media (max-width: 1100px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card,
  .feature-card-hero { grid-column: span 1; min-height: 380px; }
}
@media (max-width: 580px) {
  .features-grid { grid-template-columns: 1fr; gap: 1rem; }
  .feature-card,
  .feature-card-hero { min-height: 320px; }
}

/* Image as full-bleed backdrop. Slow zoom on hover for a premium feel. */
.feature-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0c0c0c;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  filter: saturate(0.96) contrast(1.02);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s ease-out;
  will-change: transform;
}

.feature-card:hover .feature-image {
  transform: scale(1.07);
  filter: saturate(1.05) contrast(1.05);
}

.feature-card[data-feature="02"] .feature-image,
.feature-card[data-feature="03"] .feature-image {
  background-size: 78% auto;
}

/* Blueprint backdrop for cards without a real image — a quiet mint dot
   grid on dark base. Architectural, sympathetic to the site's aesthetic,
   so empty cards never read as broken. Hidden once a real image loads. */
.feature-image-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1.4rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(31,196,144,0.34);
  background-color: #0a0a0a;
  background-image:
    radial-gradient(circle at center, rgba(31,196,144,0.11) 0.85px, transparent 1.25px),
    linear-gradient(135deg, rgba(255,255,255,0.012) 0%, rgba(31,196,144,0.03) 100%);
  background-size: 22px 22px, 100% 100%;
  background-position: 0 0, 0 0;
  pointer-events: none;
}

.feature-image.is-loaded ~ .feature-image-placeholder { display: none; }

/* Two-axis overlay so headline + body always pass over any image:
   - Top: heavy dark wash that fades by ~50% line
   - Side: soft left vignette for the title's reading column
   - Bottom: gentle lift so imagery stays vivid */
.feature-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8,8,8,0.92) 0%,
      rgba(8,8,8,0.78) 18%,
      rgba(8,8,8,0.5) 40%,
      rgba(8,8,8,0.22) 64%,
      rgba(8,8,8,0.06) 86%,
      rgba(8,8,8,0) 100%),
    linear-gradient(95deg,
      rgba(8,8,8,0.45) 0%,
      rgba(8,8,8,0.18) 38%,
      rgba(8,8,8,0) 70%);
  transition: opacity 0.5s ease-out;
}

.feature-card:hover .feature-overlay { opacity: 0.92; }

/* Cursor-following mint glow — adds depth without competing with text. */
.feature-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 50%),
    rgba(31,196,144,0.18) 0%,
    rgba(31,196,144,0.06) 38%,
    transparent 68%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
}
.feature-card:hover::before { opacity: 1; }

/* Body floats on top — the editorial column. */
.feature-body {
  position: relative;
  z-index: 3;
  padding: 1.7rem 1.85rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: none;
}
.feature-body a,
.feature-body button { pointer-events: auto; }

.feature-card-hero .feature-body {
  padding: 2.1rem 2.2rem 1.85rem;
  max-width: 78%;
}

.feature-index {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
.feature-index::before {
  content: "";
  width: 0.9rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.feature-card h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--white);
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.feature-card h3 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.feature-card-hero h3 {
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  max-width: 14ch;
  line-height: 1.06;
}

.feature-card p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgba(212,212,212,0.88);
  margin: 0;
  max-width: 38ch;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.feature-card-hero p {
  font-size: 1.04rem;
  max-width: 46ch;
  color: rgba(220,220,220,0.92);
}

/* Hover-reveal for description copy on pointer devices. Title stays
   visible to anchor the card; the description fades + lifts in. Touch
   devices skip this (no hover signal), so copy is always visible. */
@media (hover: hover) and (pointer: fine) {
  .feature-card p {
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity 0.28s ease-out,
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .feature-card:hover p,
  .feature-card:focus-within p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.06s;
  }
}

/* Bottom rule slides across on hover — small premium tell. */
.feature-rule {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  z-index: 4;
  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  box-shadow: 0 0 14px rgba(31,196,144,0.55);
}

/* Mint corner bracket (top-right) appears on hover — echoes .why-frame
   brackets and ties the card into the site's blueprint vocabulary. */
.feature-card::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  opacity: 0;
  transform: translate(-3px, 3px);
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.5s ease-out,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card:hover {
  border-color: rgba(31,196,144,0.34);
  transform: translateY(-4px);
  box-shadow:
    0 28px 60px -10px rgba(0,0,0,0.55),
    0 0 0 1px rgba(31,196,144,0.06),
    0 0 38px -8px rgba(31,196,144,0.18);
}
.feature-card:hover .feature-rule { width: 100%; }
.feature-card:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Mobile scroll spotlight ──
   Only ONE card is "active" at a time — whichever is closest to the
   viewport center. Active card gets the desktop hover treatment
   (mint border, corner bracket, rule fill, description in). Inactive
   cards sit in a dim baseline. When the user scrolls past the last
   card it falls back to baseline. Gated to ≤900px. */
@media (max-width: 900px) {
  .feature-card {
    opacity: 0.55;
    transform: translateY(0);
    transition:
      opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.45s ease-out,
      box-shadow 0.55s ease-out;
  }
  .feature-card p {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.45s ease-out,
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .feature-card.is-active-mobile {
    opacity: 1;
    /* On phones the page is constantly moving as the user scrolls, which
       dwarfs the 4px lift the Mac uses on hover. 10px gives the active
       card a perceptible "pop" against the scroll motion without feeling
       jumpy. */
    transform: translateY(-10px);
    border-color: rgba(31,196,144,0.34);
    box-shadow:
      0 18px 40px -10px rgba(0,0,0,0.5),
      0 0 0 1px rgba(31,196,144,0.06),
      0 0 26px -8px rgba(31,196,144,0.18);
  }
  .feature-card.is-active-mobile .feature-rule {
    width: 100%;
    transition: width 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
  }
  /* Mirror the Mac hover image-zoom on the active mobile card — the
     subtle scale + saturation bump is what gives Mac's hover its visible
     "grows" feel; without it, the 10px lift alone reads as flat. */
  .feature-card.is-active-mobile .feature-image {
    transform: scale(1.07);
    filter: saturate(1.05) contrast(1.05);
  }
  .feature-card.is-active-mobile::after {
    opacity: 1;
    transform: translate(0, 0);
    transition:
      opacity 0.5s ease-out 0.18s,
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
  }
  .feature-card.is-active-mobile p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.22s;
  }
}

/* ── SEE IT IN ACTION — through the lens of a Vision Pro ──────────
   The demo video plays inside the actual headset's lens silhouette.
   The viewer sees the session through the device they'd be wearing.
   Reuses the existing #lens-clip SVG path defined in the hero. */
.in-action {
  background: transparent;
  padding-bottom: 9rem;
  overflow: hidden; /* contain the wide stage glow */
}
.in-action .container { max-width: 1320px; position: relative; }

/* Centered editorial header — sits directly above the device with
   minimal breathing room, treating the whole composition as a single
   centered hero portrait of headset + caption. */
.action-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: 880px;
}
.action-header .section-label {
  margin-bottom: 1rem;
}
.action-header .section-label::before,
.action-header .section-label::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: 1px;
  background: var(--rule-strong);
  margin: 0 0.85rem 0.18em 0;
}
.action-header .section-label::after {
  margin: 0 0 0.18em 0.85rem;
}
.action-headline {
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  margin-bottom: 0;
  max-width: none;
}

/* The stage holds the headset and the meta bar beneath. Full-bleed
   to viewport edges via 100vw + negative-margin centering trick.
   overflow:hidden clips the PNG's empty top region after the headset
   inside is shifted up via transform — so the visible device hugs
   the headline with no dead space. */
.ia-stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 1rem;
  isolation: isolate;
  padding-top: 0;
  overflow: hidden;
}

.ia-stage-glow { display: none; }

/* Headset wrapper — overflows the viewport edges so the PNG's
   transparent padding gets cropped off, and the actual device fills
   nearly the full screen. Negative margin-top pulls the empty top
   of the PNG up above the stage, where it's clipped by stage's
   overflow:hidden. Negative margin-bottom does the same below. */
.ia-headset {
  position: relative;
  width: 124vw;
  max-width: none;
  margin-top: -16vw;
  margin-bottom: -6vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.ia-headset-core {
  position: relative;
  width: 100%;
  /* No external halos or floor shadow — the device sits cleanly on
     black. The inner lens fade (lens-mask on .ia-lens-feather + rim
     vignette on .ia-lens-glare) does all the edge-softening work. */
}
.ia-headset-img {
  position: relative;
  width: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* The lens stage — clipped to the same lens silhouette the hero uses.
   Stacked ABOVE the headset png because the png's lens region is dark
   glass, not transparent. A dark backdrop sits beneath the soft mask
   so the video edges fade into the glass instead of butting hard. */
.ia-lens-stage {
  position: absolute;
  top: 26%; bottom: 32%;
  left: 21%; right: 21%;
  clip-path: url(#lens-clip);
  -webkit-clip-path: url(#lens-clip);
  z-index: 2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, #1a1a1a 0%, #0a0a0a 60%, #050505 100%);
  overflow: hidden;
  cursor: pointer;
}

/* Soft-feathered inner stage. Mirrors hero's .ba-stage — uses the same
   #lens-mask SVG to fade the video's outer pixels into the dark glass,
   so the footage doesn't have a hard rectangular cut against the lens. */
.ia-lens-feather {
  position: absolute;
  inset: 0;
  -webkit-mask: url(#lens-mask);
          mask: url(#lens-mask);
}
.ia-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* cover so the video fills its bounding box edge-to-edge (no
     letterbox bars). The bounding box itself is scaled down so it
     inscribes the curved lens silhouette — and the soft #lens-mask
     feathers any remaining edge contact into the dark glass. */
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(0.9);
  transform-origin: center center;
}

/* Soft inner vignette + a top-left arc glare to suggest curved glass.
   Sits ABOVE the video but inside the clipped lens stage. */
.ia-lens-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Top-left highlight — the kiss of light on the glass */
    radial-gradient(ellipse 48% 34% at 22% 16%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.04) 38%,
      transparent 70%),
    /* Soft rim — pulls eyes to the center, kept gentle so the
       video remains the hero of the frame. */
    radial-gradient(ellipse 95% 80% at 50% 50%,
      transparent 64%,
      rgba(0,0,0,0.12) 82%,
      rgba(0,0,0,0.26) 100%);
}

/* Meta strip below the headset. Editorial mono with a slim scrubber
   in the center column and controls on the right. */
.ia-bar {
  margin: -7rem auto 0;
  max-width: 1480px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ia-meta-l {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  color: var(--text-faint);
}
.ia-fig {
  color: var(--accent);
  letter-spacing: 0.22em;
  position: relative;
  padding-right: 0.95rem;
}
.ia-fig::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 0.85em;
  background: var(--rule-strong);
}
.ia-place {
  color: var(--text-muted);
  letter-spacing: 0.14em;
}

.ia-meta-r {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.ia-time {
  color: var(--text);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.14em;
}
.caption-time-sep {
  color: var(--text-faint);
  margin: 0 0.5em;
}

@media (max-width: 820px) {
  .ia-bar {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .ia-meta-r { justify-content: flex-start; }
}

/* Progress bar — used inline inside .ia-bar (no longer absolute). */
.action-progress {
  position: relative;
  flex: 1;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.action-progress:focus-visible { outline: none; }
.action-progress:focus-visible .action-progress-knob {
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow:
    0 0 0 5px rgba(31,196,144,0.35),
    0 0 14px rgba(31,196,144,0.7);
}
.action-progress-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: rgba(255,255,255,0.18);
}
.action-progress-bar {
  position: absolute;
  left: 0; top: 50%;
  height: 2px; transform: translateY(-50%);
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(31,196,144,0.7);
  transition: width 0.12s linear;
  pointer-events: none;
}
.action-progress-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(31,196,144,0.22), 0 0 12px rgba(31,196,144,0.5);
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease-out;
  pointer-events: none;
}
.action-progress:hover .action-progress-knob {
  transform: translate(-50%, -50%) scale(1.2);
}

.action-controls-cluster { display: inline-flex; gap: 0.55rem; }
.action-ctl {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--white);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
  padding: 0;
}
.action-ctl:hover {
  background: rgba(31,196,144,0.18);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.action-ctl svg { width: 15px; height: 15px; }
.action-ctl.demo-video-mute { position: static; bottom: auto; right: auto; }

@media (max-width: 700px) {
  .in-action { padding-bottom: 6rem; }
  .ia-bar {
    margin-top: 2rem;
    font-size: 0.62rem;
    gap: 0.8rem;
  }
  .ia-meta-l { flex-wrap: wrap; }
}

/* ── AUDIENCE ──
   Clean 2x2 grid with crisp dividers — geometric, no offsets. */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 3.5rem;
  counter-reset: audience;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

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

.audience-card {
  position: relative;
  background: transparent;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 2.25rem 2rem 2rem;
  overflow: hidden;
  isolation: isolate;
  counter-increment: audience;
  transition: background 0.35s ease-out;
}

/* Mono numeral pinned top-left, matching feature cards */
.audience-card > h3::before {
  content: counter(audience, decimal-leading-zero);
  position: absolute;
  top: 1.5rem; left: 2rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--accent);
}

/* Cursor-following glow */
.audience-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(31,196,144,0.14) 0%,
    rgba(31,196,144,0.05) 35%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
  z-index: -1;
}

.audience-card:hover {
  background: rgba(255,255,255,0.025);
}
.audience-card:hover::before { opacity: 1; }

.audience-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--white);
  margin-top: 1.4rem;
  margin-bottom: 0.55rem;
}

.audience-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── WHY VISION PRO ── */
.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 768px) {
  .why { grid-template-columns: 1fr; }
  .why-visual { order: -1; }
}

.why-content p {
  font-size: 1.05rem; color: var(--text-muted); margin-top: 1.2rem;
  max-width: 480px;
}

.why-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}

/* Geometric framed image — flat rectangle with corner brackets */
.why-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 5/4;
  padding: 14px;
}
.why-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.why-image {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  position: relative;
  z-index: 1;
}
.corner {
  position: absolute;
  width: 18px; height: 18px;
  z-index: 2;
  pointer-events: none;
}
.corner::before, .corner::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.corner::before { width: 100%; height: 1px; }
.corner::after  { width: 1px; height: 100%; }
.corner-tl { top: 0; left: 0; }
.corner-tl::before { top: 0; left: 0; }
.corner-tl::after  { top: 0; left: 0; }
.corner-tr { top: 0; right: 0; }
.corner-tr::before { top: 0; right: 0; }
.corner-tr::after  { top: 0; right: 0; }
.corner-bl { bottom: 0; left: 0; }
.corner-bl::before { bottom: 0; left: 0; }
.corner-bl::after  { bottom: 0; left: 0; }
.corner-br { bottom: 0; right: 0; }
.corner-br::before { bottom: 0; right: 0; }
.corner-br::after  { bottom: 0; right: 0; }

/* ── BOOKING ── */
.booking { background: transparent; }

.booking-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .booking-card { grid-template-columns: 1fr; }
}

.booking-col-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 1rem;
}

.booking-col-label span {
  text-transform: none; letter-spacing: 0;
  color: var(--accent); font-weight: 700;
}

/* Calendar */
.calendar {
  background: var(--green-card);
  border: 1px solid var(--green-border);
  border-radius: 16px;
  padding: 1.25rem;
}

.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}

.cal-month-label {
  font-size: 0.95rem; font-weight: 600; color: var(--white);
}

.cal-nav {
  background: none; border: 1px solid var(--green-border);
  color: var(--text-muted); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer;
  font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.cal-nav:hover { border-color: var(--accent); color: var(--accent); }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.5rem;
}
.cal-weekdays span {
  text-align: center; font-size: 0.7rem; font-weight: 600;
  color: var(--text-muted); padding: 0.25rem 0;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 0.85rem; cursor: pointer;
  color: var(--text); border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  background: none;
}
.cal-day:hover:not(:disabled) {
  background: rgba(31,196,144,0.1);
  border-color: rgba(31,196,144,0.2);
}
.cal-day.selected {
  background: var(--accent);
  color: #0a0a0a; font-weight: 700;
  border-color: var(--accent);
}
.cal-day:disabled {
  color: rgba(255,255,255,0.25);
  cursor: not-allowed;
}
.cal-day.empty { background: none; border: none; cursor: default; }

/* Time slots */
.time-slots {
  display: flex; flex-direction: column; gap: 0.5rem;
}

.booking-placeholder {
  font-size: 0.9rem; color: var(--text-muted);
  padding: 1rem 0;
}

.time-slot {
  background: var(--green-card);
  border: 1px solid var(--green-border);
  border-radius: 10px; padding: 0.65rem 1rem;
  font-size: 0.9rem; color: var(--text);
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.time-slot:hover {
  border-color: rgba(31,196,144,0.3);
  background: rgba(255,255,255,0.06);
}
.time-slot.selected {
  border-color: var(--accent);
  background: rgba(31,196,144,0.1);
  color: var(--white); font-weight: 600;
}

/* Form */
.demo-form {
  display: flex; flex-direction: column; gap: 0.75rem;
}

.demo-form input,
.demo-form textarea {
  background: var(--green-card);
  border: 1px solid var(--green-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.92rem; color: var(--text);
  font-family: inherit; width: 100%;
  transition: border-color 0.2s;
  resize: vertical;
}
.demo-form input::placeholder,
.demo-form textarea::placeholder { color: var(--text-muted); }
.demo-form input:focus,
.demo-form textarea:focus {
  outline: none;
  border-color: rgba(31,196,144,0.4);
}

.demo-form .btn-primary { width: 100%; margin-top: 0.25rem; }

/* Confirmation */
.booking-confirmation {
  display: none;
  text-align: center; padding: 4rem 2rem;
}
.booking-confirmation.visible { display: block; }

.confirm-icon {
  width: 64px; height: 64px; border-radius: 0;
  background: rgba(31,196,144,0.12);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--accent);
  margin: 0 auto 1.5rem;
}
.booking-confirmation h3 {
  font-size: 1.5rem; font-weight: 700;
  color: var(--white); margin-bottom: 0.75rem;
}
.booking-confirmation p { color: var(--text-muted); font-size: 1rem; }
.confirm-sub { margin-top: 0.5rem; font-size: 0.9rem !important; }

/* ── CTA — editorial closing spread ── */
.cta {
  text-align: center;
  position: relative;
  isolation: isolate;
  background-color: var(--green-dark);
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,0.04) 0.9px, transparent 1.2px);
  background-size: 28px 28px;
  background-position: 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-top: 9rem; padding-bottom: 9rem;
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 25% 12% at 50% 100%,
      rgba(31,196,144,0.22) 0%,
      rgba(31,196,144,0.08) 40%,
      transparent 80%);
}
.cta .container { position: relative; z-index: 2; }

/* ── CTA oak — grid-snapped tree that grows on first reveal ── */
.cta-tree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.cta-tree-dots circle {
  fill: rgba(255,255,255,0.085);
}
.cta-tree-branches path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.cta-tree.is-growing .cta-tree-branches path {
  animation: oakGrow var(--dur, 1s) var(--delay, 0s) cubic-bezier(.55,.05,.35,1) forwards;
}
@keyframes oakGrow {
  to { stroke-dashoffset: 0; }
}
.cta-tree-leaves circle {
  fill: var(--accent);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.cta-tree.is-growing .cta-tree-leaves circle {
  animation: oakLeaf 0.85s var(--delay, 4.2s) cubic-bezier(.4,.1,.3,1) forwards;
}
@keyframes oakLeaf {
  0%   { opacity: 0; transform: scale(0.25); }
  55%  { opacity: 1; transform: scale(1.55); }
  100% { opacity: 0.88; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-tree.is-growing .cta-tree-branches path { animation: none; stroke-dashoffset: 0; }
  .cta-tree.is-growing .cta-tree-leaves circle { animation: none; opacity: 0.85; transform: scale(1); }
}

.cta h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 14ch;
  margin: 0 auto 1.6rem;
}
.cta p {
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 2.75rem;
  font-size: 1.08rem;
}
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Corner brackets — terminal "stamp" framing on the CTA */
.cta-corner {
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 1;
}
.cta-corner::before, .cta-corner::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.cta-corner::before { width: 100%; height: 1px; }
.cta-corner::after  { width: 1px; height: 100%; }
.cta-corner-tl { top: 24px; left: 5vw; }
.cta-corner-tl::before { top: 0; left: 0; }
.cta-corner-tl::after  { top: 0; left: 0; }
.cta-corner-tr { top: 24px; right: 5vw; }
.cta-corner-tr::before { top: 0; right: 0; }
.cta-corner-tr::after  { top: 0; right: 0; }
.cta-corner-bl { bottom: 24px; left: 5vw; }
.cta-corner-bl::before { bottom: 0; left: 0; }
.cta-corner-bl::after  { bottom: 0; left: 0; }
.cta-corner-br { bottom: 24px; right: 5vw; }
.cta-corner-br::before { bottom: 0; right: 0; }
.cta-corner-br::after  { bottom: 0; right: 0; }

/* ── FOOTER — editorial columns ── */
footer {
  padding: 5rem 5vw 2.5rem;
  border-top: 1px solid var(--green-border);
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--green-dark);
  position: relative;
}
.footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem 2rem;
  align-items: start;
}
.footer-brand .footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.025em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.85rem;
}
.footer-brand .footer-logo span {
  color: var(--accent);
  font-weight: 700;
}
.footer-tagline {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 28ch;
  line-height: 1.55;
}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.18s ease;
  position: relative;
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  max-width: 1100px;
  margin: 3.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--green-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.footer-bottom .footer-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 1.5rem;
  }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── UTILITIES ── */
.container { max-width: 1480px; margin: 0 auto; }

/* ── SCROLL REVEALS ──
   Sections marked [data-reveal-section] reveal staggered children when they
   enter the viewport. Children opt in with .reveal and a 1-based index via
   .reveal-2, .reveal-3, .reveal-4 (etc.) for stagger. */
[data-reveal-section] .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal-section] .reveal-2 { transition-delay: 90ms; }
[data-reveal-section] .reveal-3 { transition-delay: 180ms; }
[data-reveal-section] .reveal-4 { transition-delay: 290ms; }
[data-reveal-section] .reveal-5 { transition-delay: 400ms; }

[data-reveal-section].is-revealed .reveal {
  opacity: 1;
  transform: translateY(0);
}

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

@media (max-width: 600px) {
  .hero { padding-top: 8rem; }
}