/* ==========================================================================
   Snare — Lift system
   One reusable layer for: lighting (lit surfaces), background value rhythm,
   component elevation, and motion. Applied across sections via classes — no
   per-section one-offs. Pair with motion.js for staggered scroll reveals.

   USAGE
     <section class="… lit lit--deep">   dark, deepest   (hero, founder)
     <section class="… lit lit--mid">    dark, mid       (inside snare, CTA)
     <section class="… lit lit--raise">  dark, lifted    (three pillars)
   Light sections (How it works) stay un-lit; the bleed below blends them in.
   ========================================================================== */

/* ---------- Lighting: lit dark surfaces ------------------------------- */
.lit { background: transparent !important; position: relative; isolation: isolate; }
.lit > * { position: relative; z-index: 1; }

/* no per-section glow — depth comes only from the continuous body gradient,
   so there is never a brightness step at a section boundary */
.lit::before { content: none; }
/* vignette removed — seamless section blending via the continuous body gradient */
.lit--deep  { --glow: rgba(159,232,188,0.11); }
.lit--mid   { --glow: rgba(159,232,188,0.075); }
.lit--raise { --glow: rgba(159,232,188,0.055); }

/* keep the hero's faint hairline grid above the spotlight */
.hero.lit .hero-bg { z-index: 1; }

/* ---------- Product window (Inside Snare) ----------------------------- */
/* drop the flat framed image styling; the window chrome takes over */
.showcase-shot {
  position: relative;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
/* mint-tinted glow so the window sits above the surface */
.showcase-shot::before {
  content: ""; position: absolute; inset: -10% -6% -16% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(56% 58% at 50% 42%, rgba(159,232,188,0.20), transparent 70%);
  filter: blur(16px);
}
.pwindow {
  position: relative; z-index: 1;
  border-radius: 14px; overflow: hidden;
  background: #06241f;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 34px 80px -28px rgba(0,0,0,0.72),
    0 12px 30px -16px rgba(0,0,0,0.55);
}
.pwindow-bar { height: 28px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: rgba(255,255,255,0.045); border-bottom: 1px solid rgba(255,255,255,0.08); }
.pwindow-dots { display: flex; gap: 6px; }
.pwindow-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.pwindow-title { font-size: 13px; color: rgba(255,255,255,0.60); letter-spacing: 0.01em; }
.pwindow-body img { display: block; width: 100%; height: auto; }

/* ---------- Hero stats row: space, mint numbers, divider rules -------- */
.hero-meta { gap: 0 !important; margin-top: 56px; }
.hero-meta > div { padding: 2px 30px; border-left: 1px solid var(--white-12); }
.hero-meta > div:first-child { padding-left: 0; border-left: 0; }
.hero-meta strong { color: var(--mint) !important; font-size: 22px !important; }

/* ---------- Pillar cards: lifted fill + hover raise ------------------- */
.pillar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 34px -22px rgba(0,0,0,0.70);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(159,232,188,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 22px 48px -22px rgba(0,0,0,0.80),
    0 0 0 1px rgba(159,232,188,0.10);
}

/* ---------- Light section edges (clean, no muddy gradient) ----------- */
.fwrap::before, .fwrap::after { display: none !important; }

/* ---------- Motion ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .float { animation: snare-float 7s ease-in-out infinite; }
}
@keyframes snare-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* continuous page background — one gentle gradient down the whole page so
   sections share a base and blend with zero seams (rhythm without hard cuts) */
body {
  background: linear-gradient(180deg, #063029 0%, #073529 30%, #063029 50%, #073529 72%, #04211b 100%) no-repeat !important;
}
.final, .why, .footer, .map-section { border-top: 0 !important; }

/* ---------- Hero: centred, with product window (Notion-style) -------- */
.hero { padding-top: clamp(92px, 12vw, 158px); padding-bottom: clamp(56px, 8vw, 104px); text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 { margin: 0 0 22px; }
.hero .lede { margin: 14px auto 40px; max-width: 52ch; color: var(--white-70); text-align: center; }
.hero-actions { justify-content: center; margin-bottom: 26px; }
.hero-meta { justify-content: center; }
.hero-shot { position: relative; width: 100%; max-width: 1060px; margin: clamp(44px, 6vw, 76px) auto 0; }
.hero-shot::before {
  content: ""; position: absolute; inset: -14% -8% -20% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 56% at 50% 34%, rgba(159,232,188,0.22), transparent 70%);
  filter: blur(22px);
}
.hero-shot .pwindow { position: relative; z-index: 1; }
.hero-shot-par { transform: translateY(var(--py, 0px)); will-change: transform; }

/* ---------- How it works: white panel floating on the dark page ------ */
.fwrap { background: transparent !important; padding-block: clamp(56px, 8vw, 120px); }
.fx-shell {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  background: #ffffff;
  border-radius: 28px;
  padding: clamp(40px, 5vw, 72px) clamp(20px, 3.5vw, 52px) clamp(48px, 6vw, 84px);
  box-shadow:
    0 0 120px -16px rgba(159,232,188,0.30),
    0 0 56px -8px rgba(159,232,188,0.20),
    0 50px 120px -50px rgba(0,0,0,0.70),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.fx-shell .fx-head { padding: 0 0 clamp(28px, 4vw, 44px); margin: 0; }
.fx-shell .fx { padding: 0; }