/* ──────────────────────────────────────────────────────────────────
   SmartPitch — clean rebuild.
   - No orbital rings, no glow circle around logo
   - 2-column split sections (image one side, text other)
   - No sticky-scroll scrubbing
   - Subtle ambient gradient, single accent
   ────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #070b14;
  --bg-soft:   #0c111c;
  --bg-card:   #121826;
  --bg-card-2: #18202f;
  --line:      #1f2638;
  --line-soft: #161d2c;
  --text:      #ecf0f7;
  --muted:     #93a0bb;
  --dim:       #5a6480;
  --brand:     #2ee59d;
  --brand-2:   #62f0b6;
  --brand-d:   #20c997;
  --blue:      #7aa7ff;
  --warn:      #ffb14a;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --max:       1240px;
  --max-narrow: 820px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 17px;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
ul  { list-style: none; }
a   { color: inherit; text-decoration: none; }

/* Force every content section above the fixed background. */
.hero, section, .section, footer, .nav, main {
  position: relative;
  z-index: 10;
}

/* ─── Ambient background — single subtle gradient + 2 soft orbs ─── */
.bg {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-grad {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 80% -100px, rgba(46, 229, 157, 0.08), transparent 65%),
    radial-gradient(900px 500px at 10% 30%,  rgba(122, 167, 255, 0.05), transparent 70%);
}
.bg .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
}
.bg .orb-1 {
  width: 440px; height: 440px;
  background: rgba(46, 229, 157, 0.06);
  top: 8%; right: -10%;
}
.bg .orb-2 {
  width: 520px; height: 520px;
  background: rgba(122, 167, 255, 0.05);
  bottom: 5%; left: -12%;
}

/* ─── Layout ─── */
.container        { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.container.narrow { max-width: var(--max-narrow); }
.container.center { text-align: center; }
.container.narrow.center .lead { margin-left: auto; margin-right: auto; }

.section { padding: 120px 0; }

/* ─── Type ─── */
.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 22px;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
}

h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  margin-bottom: 22px;
}

h3 { font-size: 22px; line-height: 1.3; margin-bottom: 12px; }
h4 { font-size: 18px; line-height: 1.3; margin-bottom: 8px; }

p { color: var(--muted); }

.lead {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 580px;
}

.grad {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.acc { color: var(--brand); }

.bullets {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text);
}
.b-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(46, 229, 157, 0.6);
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.25s var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-lg { padding: 16px 28px; font-size: 15px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

.btn-cta {
  background: linear-gradient(135deg, var(--brand), var(--brand-d));
  color: #000;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(46, 229, 157, 0.32);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(46, 229, 157, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(122, 167, 255, 0.32);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ─── Nav ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 36px;
  transition: all 0.3s var(--ease);
}
.nav.scrolled {
  background: rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 36px;
}
.nav-logo {
  justify-self: center;
  display: block;
  /* Hidden by default — only appears once the nav has scrolled and the
     dark bar is in place, so the small mark doesn't sit over the hero
     while the big hero logo is doing the talking. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.nav.scrolled .nav-logo {
  opacity: 1;
  pointer-events: auto;
}
.nav-logo img { height: 38px; width: auto; display: block; }
.nav.scrolled .nav-logo img { height: 30px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-left  { justify-self: start; }
.nav-right { justify-self: end; }
.nav-links a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--text); }
/* Override the muted nav link colour for the green Request-demo button so its
   text reads as crisp black on the brand-green pill, not muted grey. */
.nav-links a.btn-cta,
.nav-links a.btn-cta:hover { color: #000; font-weight: 700; }

/* ─── HERO (full-bleed image) ─── */
.hero {
  position: relative;
  min-height: 92vh;
  /* Bottom padding reserves a clear strip for the scroll cue so the CTA
     can never overlap it on shorter viewports. */
  padding: 110px 32px 130px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* Anchor the image to the bottom so the full white pitch line sits at the
     very bottom of the visible hero, then a tiny fade softens just the edge. */
  background-position: center bottom;
  z-index: 0;
}
/* Fade hero background layers (image and veil) straight into the page
   at the bottom edge so there's no hard cutoff line under the logo / hero. */
.hero-bg,
.hero-veil {
  /* Tiny fade only at the bottom edge so the white pitch line stays clearly
     visible. Fade lives in the bottom 4% only. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 96%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 96%,
    transparent 100%
  );
}
.hero-veil {
  position: absolute;
  inset: 0;
  /* Lighter veil that doesn't crush the bottom of the image — keeps the
     white pitch line bright and the floodlit grass readable.
     The first two radial gradients knock the glare back on the two big
     floodlight blooms either side of the logo. */
  background:
    radial-gradient(360px 260px at 26% 22%, rgba(7, 11, 20, 0.42), transparent 70%),
    radial-gradient(360px 260px at 74% 22%, rgba(7, 11, 20, 0.42), transparent 70%),
    radial-gradient(120% 80% at 50% 30%, rgba(7, 11, 20, 0.05), rgba(7, 11, 20, 0.45) 80%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.40) 0%, rgba(7, 11, 20, 0.18) 50%, rgba(7, 11, 20, 0.20) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 980px;
  margin: 0 auto;
}

.hero-logo {
  position: relative;
  display: inline-block;
  /* Breathing room below the logo before the headline. Tightened so the
     CTA doesn't push down into the scroll cue strip on short viewports. */
  margin: 0 auto clamp(48px, 7vh, 96px);
}
.hero-logo img {
  height: clamp(70px, 9vw, 130px);
  width: auto;
  display: block;
}
/* Bright copy — visible from the start. No wipe, no clip. */
.hero-logo-bright {
  display: block;
}
/* Glow layer — sits on top of the bright copy with NO clip-path, so its
   drop-shadow follows the actual silhouette of the wordmark (not a
   rectangle). Pulses twice on load, then settles to a permanent
   brand-green halo. */
.hero-logo-glow {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  pointer-events: none;
  animation: logoBloom 3.2s ease-out 0.25s forwards;
}
@keyframes logoBloom {
  0% {
    filter:
      drop-shadow(0 0 6px rgba(46, 229, 157, 0.55))
      drop-shadow(0 0 18px rgba(46, 229, 157, 0.32));
  }
  /* First pulse */
  15% {
    filter:
      drop-shadow(0 0 16px rgba(46, 229, 157, 1))
      drop-shadow(0 0 42px rgba(46, 229, 157, 0.70))
      drop-shadow(0 0 90px rgba(46, 229, 157, 0.40));
  }
  /* Settle between pulses */
  35% {
    filter:
      drop-shadow(0 0 6px rgba(46, 229, 157, 0.55))
      drop-shadow(0 0 18px rgba(46, 229, 157, 0.32));
  }
  /* Second pulse */
  55% {
    filter:
      drop-shadow(0 0 16px rgba(46, 229, 157, 1))
      drop-shadow(0 0 42px rgba(46, 229, 157, 0.70))
      drop-shadow(0 0 90px rgba(46, 229, 157, 0.40));
  }
  /* Settle to permanent halo */
  100% {
    filter:
      drop-shadow(0 0 6px rgba(46, 229, 157, 0.55))
      drop-shadow(0 0 18px rgba(46, 229, 157, 0.32));
  }
}
.hero-content .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 24px;
}
/* Pilot pill under the hero headline — credibly tags the launch date
   without hedging the headline itself. */
.hero-pilot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px auto 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(46, 229, 157, 0.10);
  border: 1px solid rgba(46, 229, 157, 0.34);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
}
.hero-pilot-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(46, 229, 157, 0.9);
  animation: heroPilotPulse 2.4s ease-in-out infinite;
}
@keyframes heroPilotPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.hero-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 820px;
  margin: 70px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.hstat {
  text-align: center;
}
.hstat strong {
  display: block;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.hstat strong em {
  font-style: normal;
  font-size: 0.55em;
  opacity: 0.7;
  margin-left: 1px;
}
.hstat small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 1px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: lowercase;
}

/* ─── FULL-BLEED IMAGE SECTIONS ─── */
.bleed {
  position: relative;
  padding: 160px 32px;
  overflow: hidden;
  text-align: center;
}
.bleed-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Faded-edge backdrop:
   .bleed-bg-fade applied to BOTH the bg image AND the veil layer (via the
   sibling combinator below) so everything underneath the content fades
   together into the page. Without this, a hard line appears wherever the
   veil meets the page colour. */
.bleed-bg-fade,
.bleed-bg-fade ~ .bleed-veil {
  /* closest-side guarantees the gradient reaches 100% (transparent) exactly
     at the section's nearest edges — no hard cutoff line. */
  -webkit-mask-image: radial-gradient(
    ellipse closest-side at 50% 50%,
    #000 0%,
    #000 30%,
    transparent 100%
  );
          mask-image: radial-gradient(
    ellipse closest-side at 50% 50%,
    #000 0%,
    #000 30%,
    transparent 100%
  );
}
.bleed-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 70% at 50% 50%, rgba(7, 11, 20, 0.25), rgba(7, 11, 20, 0.92) 80%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.55), rgba(7, 11, 20, 0.85));
  z-index: 1;
}
/* Always-On section — center the long supporting paragraph under its title */
.always-content { max-width: 980px; }
.always-content h2 { margin-bottom: 30px; }
.always-lead {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.bleed-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
}
.bleed-content h2 {
  margin-bottom: 24px;
}

/* ─── INSTALLER PROGRAMME — small recruitment section ─── */
.installer-section {
  padding: 110px 32px 110px;
  text-align: center;
  position: relative;
}
.installer-content {
  max-width: 760px;
}
.installer-h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  line-height: 1.1;
}
.installer-lead {
  margin-bottom: 28px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.installer-cta {
  display: flex;
  justify-content: center;
}

/* ─── CTA (full-bleed) ─── */
.cta-bleed {
  position: relative;
  padding: 140px 32px 160px;
  text-align: center;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.cta-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 70% at 50% 50%, rgba(7, 11, 20, 0.30), rgba(7, 11, 20, 0.92) 80%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.65), rgba(7, 11, 20, 0.90));
  z-index: 1;
}
.cta-content {
  position: relative;
  z-index: 2;
}
.cta-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(46, 229, 157, 0.10);
  border: 1px solid rgba(46, 229, 157, 0.34);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.cta-content h2 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  line-height: 1.05;
}

/* ─── PHOTO FRAME (rounded image card in split sections) ─── */
.photo-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame.portrait { aspect-ratio: 3 / 4; }

/* ─── HERO TYPOGRAPHY ─── */
.hero h1 {
  font-size: clamp(44px, 7vw, 92px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 16ch;
  margin: 0 auto 24px;
}
.hero-lead {
  font-size: clamp(17px, 1.3vw, 20px);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
}

/* One-line subtitle directly under the headline. */
.hero-sub {
  margin: 22px auto 0;
  max-width: 660px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.005em;
}

/* Ghost CTA under the subtitle. */
.hero-cta {
  margin-top: 28px;
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  background: rgba(46, 229, 157, 0.08);
  border: 1px solid rgba(46, 229, 157, 0.55);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-hero::after {
  content: '↓';
  display: inline-block;
  font-size: 14px;
  transform: translateY(1px);
  transition: transform 0.25s ease;
}
.btn-hero:hover {
  background: rgba(46, 229, 157, 0.18);
  border-color: rgba(46, 229, 157, 0.85);
  box-shadow: 0 10px 30px -10px rgba(46, 229, 157, 0.45);
  transform: translateY(-1px);
}
.btn-hero:hover::after { transform: translateY(3px); }

/* Animated scroll cue at the bottom of the hero. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 56px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  animation: heroScrollFade 0.8s ease 2.4s forwards;
  transition: color 0.2s ease;
}
.hero-scroll:hover { color: #fff; }
.hero-scroll-chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: heroScrollBob 1.8s ease-in-out 3s infinite;
}
@keyframes heroScrollFade {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes heroScrollBob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 36px 0 0;
  flex-wrap: wrap;
}

/* ─── 2-COLUMN SPLIT SECTIONS (product, brain, frost) ─── */
.split { padding: 120px 0; }
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.split-grid.reverse {
  grid-template-columns: 1.1fr 1fr;
}
/* Product section: wider container, laptop dominates */
#product .container.split-grid {
  max-width: 1480px;
  grid-template-columns: 0.85fr 1.45fr;
  gap: 70px;
}

/* ─── WHAT IS SMARTPITCH? — intro section before the product reel ─── */
.what-section {
  padding: 110px 0 100px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.what-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Soften the edges so the haze fades into the page rather than slamming
     into the section above and below */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.what-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 35%, rgba(7, 11, 20, 0.35), rgba(7, 11, 20, 0.85) 80%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.55) 0%, rgba(7, 11, 20, 0.45) 50%, rgba(7, 11, 20, 0.85) 100%);
  z-index: 1;
}
.what-container {
  max-width: 980px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.what-container h2 { margin-bottom: 32px; }
.what-lead {
  max-width: 780px;
  margin: 0 auto 22px;
  text-align: center;
  color: var(--text-soft);
  line-height: 1.7;
}
.what-pillars-intro {
  margin: 56px auto 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
  text-align: center;
}
/* Hub + spokes wrapper */
.what-hub {
  margin-top: 18px;
  text-align: left;
}
.what-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}
/* Hub pillar — central cloud "brain", visually distinct from the 3 spokes */
.what-pillar-hub {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  border-color: rgba(46, 229, 157, 0.38);
  background:
    linear-gradient(180deg, rgba(46, 229, 157, 0.12), rgba(7, 11, 20, 0.65));
  box-shadow:
    0 30px 60px -20px rgba(46, 229, 157, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.what-pillar-hub h4 {
  font-size: clamp(22px, 1.8vw, 28px);
}
.what-pillar-hub .what-pillar-num {
  color: #6cffba;
}
.what-pillar-hub p {
  max-width: 540px;
  margin: 0 auto;
}
/* Dashed connector lines from hub to the three spokes */
.what-hub-lines {
  display: block;
  width: 100%;
  height: 60px;
  margin: 14px 0 6px;
}
.what-hub-lines path {
  fill: none;
  stroke: rgba(46, 229, 157, 0.40);
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(46, 229, 157, 0.35));
}
@media (max-width: 720px) {
  .what-hub-lines { display: none; }
  .what-pillar-hub { margin-bottom: 16px; }
}
.what-pillar {
  padding: 26px 22px;
  border-radius: 14px;
  background: rgba(7, 11, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s var(--ease);
}
.what-pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 229, 157, 0.32);
}
.what-pillar-num {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 14px;
}
.what-pillar h4 {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}
.what-pillar p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

/* ─── WHAT IT DOES — value-prop grid ─── */
.achieve-section {
  position: relative;
  padding: 140px 32px 160px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.achieve-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Soft edge fade so the image sits in the page rather than blocking it */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0%, #000 55%, transparent 100%);
}
.achieve-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(7, 11, 20, 0.05), rgba(7, 11, 20, 0.65) 90%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.55) 0%, rgba(7, 11, 20, 0.40) 50%, rgba(7, 11, 20, 0.55) 100%);
}
.achieve-container {
  position: relative;
  z-index: 2;
  max-width: 1180px;
}
.achieve-container h2 { margin-bottom: 26px; }
.achieve-lead {
  max-width: 760px;
  margin: 0 auto 8px;
  color: #2EE59D;
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* Last achieve-lead before the grid gets the gap to the grid */
.achieve-lead + .achieve-lead {
  margin-bottom: 56px;
}
.achieve-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  text-align: left;
}
.achieve-card {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: 16px;
  background: linear-gradient(160deg,
    rgba(46, 229, 157, 0.06) 0%,
    rgba(122, 167, 255, 0.03) 50%,
    rgba(7, 11, 20, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  text-align: center;
}
.achieve-card:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 229, 157, 0.40);
  box-shadow: 0 18px 42px -12px rgba(46, 229, 157, 0.20);
}
/* "70%" stat — block-level, on its own line. The OUTER .lead-stat
   defines the compact layout box (height = visible resting size). The
   INNER .lead-stat-inner is rendered at the LARGEST visual size we ever
   need (the flash peak) and uses transform: scale to DOWNSCALE for
   smaller states. Downscaling stays crisp; upscaling rasterised text
   does not. */
.lead-stat {
  display: block;
  position: relative;
  height: 3.4em;          /* layout box — accommodates resting visual */
  margin: 14px auto 10px;
}
.lead-stat-inner {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  /* Element width is fixed (100% of parent) so translate doesn't have to
     recompute against changing text width each frame — that recomputation
     is what was causing the subpixel drift. Text is centered inline
     within the fixed box; growing/shrinking digits stay centered. */
  font-size: 6.5em;        /* native rasterisation size = flash peak size */
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  transform: translateY(-50%) scale(0.4);   /* only vertical centring + scale */
  transform-origin: center center;
  filter: drop-shadow(0 0 10px rgba(46, 229, 157, 0.30));
  will-change: transform, filter;
}
.lead-stat:has(.is-counting) .lead-stat-inner {
  /* 3.6s total: 2.8s for count, then 0.8s flash + settle. Linear timing
     so keyframe percentages map directly to the count/flash timeline. */
  animation: leadStatGrow 3.6s linear forwards;
}
@keyframes leadStatGrow {
  /* Phase 1 — grow with the count (0% → 77.8% maps to 0 → 2.8s) */
  0%    { transform: translateY(-50%) scale(0.40); filter: drop-shadow(0 0 0 rgba(46, 229, 157, 0)); }
  30%   { transform: translateY(-50%) scale(0.45); filter: drop-shadow(0 0 6px  rgba(46, 229, 157, 0.20)); }
  60%   { transform: translateY(-50%) scale(0.58); filter: drop-shadow(0 0 18px rgba(46, 229, 157, 0.40)); }
  77%   { transform: translateY(-50%) scale(0.74); filter: drop-shadow(0 0 28px rgba(46, 229, 157, 0.60)); }

  /* Phase 2 — at 70: two rapid flash zooms ("look at this number"). At
     scale(1.0) the text is at native rasterised size, so peaks are crisp. */
  80%   { transform: translateY(-50%) scale(1.00); filter: drop-shadow(0 0 48px rgba(46, 229, 157, 1)); }
  84%   { transform: translateY(-50%) scale(0.60); filter: drop-shadow(0 0 14px rgba(46, 229, 157, 0.40)); }
  88%   { transform: translateY(-50%) scale(1.00); filter: drop-shadow(0 0 48px rgba(46, 229, 157, 1)); }
  92%   { transform: translateY(-50%) scale(0.60); filter: drop-shadow(0 0 14px rgba(46, 229, 157, 0.40)); }

  /* Phase 3 — settle to resting */
  100%  { transform: translateY(-50%) scale(0.40); filter: drop-shadow(0 0 10px rgba(46, 229, 157, 0.30)); }
}
@media (prefers-reduced-motion: reduce) {
  .lead-stat:has(.is-counting) { animation: none; }
}
.achieve-card h4 {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 14px;
  text-align: center;
}
.achieve-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
  text-align: left;
}

/* ─── VARIABLES — chip grid framing the variables problem ─── */
.variables-section {
  padding: 140px 32px 160px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: url('../assets/img/hex-arch.jpg') center / cover no-repeat, #070b14;
}
/* Dark veil over the hex-arch image so text reads, with a brand-green hint
   in the centre. Tracks the same vibe as the old .bleed-veil. */
.variables-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 70% at 50% 50%, rgba(7, 11, 20, 0.25), rgba(7, 11, 20, 0.92) 80%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.55), rgba(7, 11, 20, 0.85));
  pointer-events: none;
  z-index: 0;
}
/* Top-edge fade so the section bleeds down from the page background
   rather than starting on a hard line. Applied to the section itself so
   both bg image and veil fade together. */
.variables-section {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
}

.variables-container {
  max-width: 980px;
  position: relative;
  z-index: 1;
}
.variables-container h2 { margin-bottom: 30px; }
.variables-lead {
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
}
.variables-close {
  margin-top: 44px;
}
.var-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 38px auto 0;
  max-width: 880px;
}
.var-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(46, 229, 157, 0.06);
  border: 1px solid rgba(46, 229, 157, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.var-chip:hover {
  background: rgba(46, 229, 157, 0.12);
  border-color: rgba(46, 229, 157, 0.55);
  transform: translateY(-1px);
}

/* ─── PHILOSOPHY QUOTE — used in How-it-works section ─── */
.philosophy {
  margin: 28px auto 36px;
  padding: 26px 36px;
  max-width: 760px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  letter-spacing: 0.005em;
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: rgba(46, 229, 157, 0.06);
  text-align: left;
  font-style: italic;
}

/* ─── PRODUCT SCROLL — sticky laptop, scrolling copy ─── */
.product-scroll {
  padding: 60px 0 120px;
  position: relative;
}
.product-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.6fr;
  gap: 80px;
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 32px;
  /* IMPORTANT: stretch (default) so the .product-art column is as tall as
     .product-copy; this is what gives position:sticky a track to scroll within. */
}
.product-art {
  position: relative;
  order: 2;
}
.product-art-sticky {
  position: sticky;
  /* Sit roughly mid-viewport so the laptop reads as resting in centre,
     not jammed under the nav. */
  top: 22vh;
}
.product-copy {
  order: 1;
  display: flex;
  flex-direction: column;
}
.prod-step {
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.prod-step h2 { margin-bottom: 22px; }
.prod-step .lead { max-width: 480px; margin-bottom: 28px; }

/* Stacked real-GUI screenshots inside the laptop screen */
.app-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain preserves the whole screenshot — no parts of the GUI get cropped.
     Letterbox area is filled by .laptop-screen's own dark background, so
     no bleed past the laptop body. */
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  pointer-events: none;
}
.app-shot.is-active {
  opacity: 1;
  pointer-events: auto;
}

.split-grid.reverse .split-copy { order: 1; }
.split-grid.reverse .split-art  { order: 0; }
.split-copy h2 { margin-bottom: 22px; }
.split-copy .lead { max-width: 520px; }

/* ─── PRODUCT laptop — real MacBook frame with dashboard overlay ─── */
.laptop {
  width: 100%;
  position: relative;
  aspect-ratio: 2092 / 1271;
  background-image: url('../assets/img/laptop-frame.png?v=32');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55))
          drop-shadow(0 60px 140px rgba(46, 229, 157, 0.12));
}
.laptop-caption {
  margin: 18px auto 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.laptop-screen {
  position: absolute;
  /* Aperture covers the entire wallpaper area inside the bezel. Measured
     directly from laptop-frame.png:
       wallpaper spans x=226..1894, y=78..1105 of a 2092×1271 frame
     Insets are set slightly tighter than that (extending out into the bezel)
     so the dark backdrop fully blots out the original macOS wallpaper. */
  left: 10.1%;
  right: 10.4%;
  top: 6.2%;
  bottom: 13.1%;
  overflow: hidden;
  background: #070b14;
  border-radius: 2px;
}

/* App inside the laptop */
.app {
  display: grid;
  grid-template-columns: 130px 1fr;
  height: 100%;
  background: var(--bg);
}
.app-side {
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
}
.app-side .app-logo { height: 16px; margin: 4px 4px 16px; width: auto; }
.app-side ul { display: flex; flex-direction: column; gap: 2px; }
.app-side li {
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.app-side li.active {
  background: rgba(46, 229, 157, 0.10);
  color: var(--brand);
}
.app-main { padding: 14px 16px; overflow: hidden; }
.app-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
.app-crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.app-head h3 { font-size: 14px; margin: 0; line-height: 1.2; }
.status {
  font-size: 9px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(46, 229, 157, 0.12);
  color: var(--brand);
  font-weight: 600;
  white-space: nowrap;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}
.kpi small {
  display: block;
  font-size: 8.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kpi strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  display: block;
}
.kpi strong em {
  font-style: normal;
  font-size: 0.55em;
  color: var(--muted);
  margin-left: 1px;
}
.kpi strong.acc { color: var(--brand); }
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.card-h {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}
.leg { display: inline-flex; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; }
.leg .ld {
  display: inline-block;
  width: 8px; height: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.leg .ld-soil { background: var(--brand); }
.leg .ld-air  { background: var(--blue); }
.leg .ld-flow { background: var(--warn); }
.chart { width: 100%; height: 110px; display: block; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.line-soil { stroke: var(--brand); }
.line-air  { stroke: var(--blue); opacity: 0.85; }
.line-flow { stroke: var(--warn); opacity: 0.85; }
.fillsoil  { fill: var(--brand); }

/* Energy scene KPIs (2 big tiles) */
.kpis.kpis-2 { grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi.big { padding: 12px 14px; }
.kpi.big strong { font-size: 22px; }

/* Energy scene — bar chart */
.bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  height: 110px;
  align-items: end;
  padding: 4px 4px 0;
}
.bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.bar span {
  display: block;
  width: 14px;
  border-radius: 3px 3px 0 0;
}
.bar .bar-old {
  background: rgba(122, 167, 255, 0.5);
}
.bar .bar-new {
  background: var(--brand);
  box-shadow: 0 0 8px rgba(46, 229, 157, 0.4);
}
.bar i {
  position: absolute;
  bottom: -16px;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Schedule scene */
.sched-list { display: flex; flex-direction: column; gap: 6px; }
.sched-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
}
.sched-row.sched-active {
  border-color: rgba(46, 229, 157, 0.4);
  background: rgba(46, 229, 157, 0.08);
}
.sched-row .sd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
}
.sched-row .sn { color: var(--text); font-weight: 600; }
.sched-row .st {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
}
.sched-row .se {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.5px;
}
.sched-foot {
  margin-top: 12px;
  font-size: 10px;
  color: var(--dim);
  font-style: italic;
}

/* ─── BRAIN — exploded diagram in side column ─── */
.brain-frame {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 20px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.brain-svg {
  width: 100%;
  height: auto;
  display: block;
}
.bl { transition: transform 0.6s var(--ease); transform-origin: center; transform-box: fill-box; }
.hw-blink      { animation: ledPulse 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hw-blink-slow { animation: ledPulse 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hw-blink-fast { animation: ledPulse 0.9s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ledPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.pcb-traces { animation: traceGlow 4.5s ease-in-out infinite; }
@keyframes traceGlow {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 0.95; filter: drop-shadow(0 0 4px rgba(255, 170, 80, 0.4)); }
}

.hw-tag         { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1px; fill: var(--brand); }
.hw-led         { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; fill: var(--brand); }
.hw-cap         { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; fill: #9fb0d7; }
.hw-screen      { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 2px; fill: var(--brand); }
.hw-screen-time { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 1px; fill: var(--brand); }
.hw-brand       { font-family: 'Inter', system-ui, sans-serif; font-size: 16px; font-weight: 700; fill: var(--text); }
.hw-chip-tag    { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; fill: #c4c4cc; }
.hw-cpu-brand   { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 5px; fill: #6a6a6a; }
.hw-cpu-name    { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; letter-spacing: 3px; fill: var(--brand); }
.hw-cpu-spec    { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600; letter-spacing: 2.5px; fill: #7a7a7a; }
.hw-out-h       { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700; fill: var(--brand); }
.hw-out-t       { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--muted); }

/* ─── FROST + ROI ─── */
.frost-board {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(46, 229, 157, 0.18);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.frost-pitch {
  width: 100%;
  height: auto;
  display: block;
}
.roi {
  position: absolute;
  border: 2px solid var(--brand);
  border-radius: 6px;
  background: rgba(46, 229, 157, 0.08);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: roiPulse 3s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset, 0 0 30px rgba(46, 229, 157, 0.15);
}
.roi.roi-warn {
  border-color: var(--warn);
  background: rgba(255, 177, 74, 0.10);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset, 0 0 30px rgba(255, 177, 74, 0.18);
}
@keyframes roiPulse {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
.roi-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  /* Pill background so the label is legible against any pitch lighting */
  background: rgba(7, 11, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
  backdrop-filter: blur(4px);
}
.roi-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  align-self: flex-end;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.roi-pct.warn { color: var(--warn); }
.frost-status {
  position: absolute;
  /* Sit in the bottom strip below the ROI tiles (which now end at 92% top). */
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 11, 20, 0.78);
  border: 1px solid rgba(46, 229, 157, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  backdrop-filter: blur(8px);
}
.frost-l {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}
.frost-state { color: var(--brand); font-weight: 600; }

/* ─── SAFETY — guard board ─── */
.guard-board {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(46, 229, 157, 0.18);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  aspect-ratio: 4 / 5;
}
.guard-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.7);
}
.guard-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,11,20,0.25) 0%, rgba(7,11,20,0.65) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(46,229,157,0.10), transparent 60%);
}
.guard-panel {
  position: absolute; inset: 0;
  padding: clamp(20px, 3.5vw, 36px);
  display: flex; flex-direction: column;
  gap: 18px;
  justify-content: space-between;
}
.guard-head {
  display: flex; align-items: center; justify-content: space-between;
}
.guard-l {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
}
.guard-state {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(7, 11, 20, 0.6);
  border: 1px solid rgba(46, 229, 157, 0.30);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
}
.guard-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(46, 229, 157, 0.9);
  animation: guardPulse 2.4s ease-in-out infinite;
}
@keyframes guardPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
/* Building Protect hero card inside the guard board */
.bp-card {
  padding: 18px 20px 16px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(46, 229, 157, 0.12), rgba(7, 11, 20, 0.65));
  border: 1px solid rgba(46, 229, 157, 0.40);
  box-shadow: 0 18px 40px -16px rgba(46, 229, 157, 0.30);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.bp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.bp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
}
.bp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(46, 229, 157, 0.14);
  border: 1px solid rgba(46, 229, 157, 0.40);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.bp-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(46, 229, 157, 0.9);
  animation: bpPulse 2.4s ease-in-out infinite;
}
@keyframes bpPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.bp-lab {
  margin: 6px 0 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.bp-temp {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 14px;
  line-height: 1;
}
.bp-temp-val {
  font-size: clamp(54px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #eaf3ef;
}
.bp-temp-unit {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  color: var(--muted);
}
/* Threshold scale: red (close) → amber (transition) → green (safe) */
.bp-scale {
  position: relative;
  display: grid;
  grid-template-columns: 25fr 5fr 70fr;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 6px;
}
.bp-band-red    { background: linear-gradient(90deg, #ff5c6e, #ff7a4a); }
.bp-band-amber  { background: linear-gradient(90deg, #ff7a4a, #ffa946); }
.bp-band-green  { background: linear-gradient(90deg, rgba(46, 229, 157, 0.55), rgba(46, 229, 157, 0.30)); }
.bp-marker {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(46, 229, 157, 1), 0 0 20px rgba(46, 229, 157, 0.6);
  transform: translateX(-50%);
}
.bp-scale-labs {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.bp-scale-labs strong {
  color: #eaf3ef;
  font-weight: 700;
  margin-right: 4px;
}
.bp-foot {
  margin: 12px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--muted);
}

/* "Other alarms" strip below the BP card */
.bp-others-lab {
  margin: 0 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.bp-others-plus { color: #eaf3ef; font-weight: 700; }
.bp-others-ok   { color: var(--brand); font-weight: 700; }
.bp-others-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.bp-others-chips > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(7, 11, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: #d6f5e6;
}
/* Shared dot styles (kept from previous activity-feed variant) */
.ge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ge-dot.ge-green { background: var(--brand); box-shadow: 0 0 6px rgba(46, 229, 157, 0.7); }
.ge-dot.ge-amber { background: #ffa946; box-shadow: 0 0 6px rgba(255, 169, 70, 0.7); }
.ge-dot.ge-red   { background: #ff5c6e; box-shadow: 0 0 6px rgba(255, 92, 110, 0.7); }
.ge-dot.ge-blue  { background: #7aa7ff; box-shadow: 0 0 6px rgba(122, 167, 255, 0.7); }

/* ─── HOW IT WORKS (full-bleed) ─── */
.how-content { max-width: 1180px; }
.how-content h2 { margin-bottom: 24px; }

/* Stadium-green hero band — anchor the background to its grass foreground
   (where the photo's detail lives) and ease back the veil so the texture
   actually reads. Pulled top padding right in and pushed bottom padding
   out, so the content sits high and the grass strip beneath gets a much
   bigger window. */
#how {
  padding-top: 90px;
  padding-bottom: 460px;
}
#how .bleed-bg {
  background-position: center bottom;
}
#how .bleed-veil {
  background:
    radial-gradient(120% 70% at 50% 35%, rgba(7, 11, 20, 0.05), rgba(7, 11, 20, 0.55) 90%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.45) 0%, rgba(7, 11, 20, 0.30) 55%, rgba(7, 11, 20, 0.10) 100%);
}
.how-lead {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.how-step p {
  color: var(--text-soft);
}
.how-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 70px;
  text-align: left;
}
.how-step {
  background: rgba(7, 11, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 26px 22px;
  transition: all 0.3s var(--ease);
}
.how-step:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 229, 157, 0.32);
}
.how-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--brand);
  margin-bottom: 14px;
  font-weight: 700;
}
.how-step h4 { font-size: 17px; margin-bottom: 8px; }
.how-step p  { font-size: 14px; line-height: 1.55; }

/* Learning-Insights examples — styled like SmartPitch's voice on the dashboard.
   Larger editorial type, subtle green-tinted glass, an accent stem on the
   left like a quoted message, and a brand-coloured signature with a live
   pulse so each card reads as a message FROM the system, not a content card. */
.insight-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 60px;
  text-align: left;
}
.insight-card {
  position: relative;
  background:
    linear-gradient(150deg, rgba(46, 229, 157, 0.10) 0%, rgba(122, 167, 255, 0.04) 45%, rgba(7, 11, 20, 0.55) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(46, 229, 157, 0.22);
  border-left: 3px solid var(--brand);
  border-radius: 16px;
  padding: 30px 26px 22px;
  margin: 0;
  transition: all 0.35s var(--ease);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.insight-card::before {
  /* Soft glow behind the opening quote mark for that "voice" feel */
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(closest-side, rgba(46, 229, 157, 0.18), transparent 70%);
  pointer-events: none;
}
.insight-card:hover {
  border-color: rgba(46, 229, 157, 0.55);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 50px rgba(0, 0, 0, 0.40),
    0 0 30px rgba(46, 229, 157, 0.18);
}
.insight-quote {
  position: relative;
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.1px;
  color: #eaf2ff;
  font-weight: 400;
  /* Slight italic gives the line a "spoken" quality without losing readability */
  font-style: italic;
}
.insight-sig {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
}
.insight-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(46, 229, 157, 0.7);
  animation: insightPulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes insightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 229, 157, 0.7); }
  70%  { box-shadow: 0 0 0 12px rgba(46, 229, 157, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 229, 157, 0); }
}

/* ─── LEARNING (full-bleed) ─── */
.bleed.bleed-tall { padding: 180px 32px 200px; }

/* Lift the veil so the cubes background actually reads. We keep a centred
   radial pool for headline legibility but the surrounding image is far
   more visible than the default .bleed-veil allows. */
#learning .bleed-bg {
  background-size: 145% auto;
  /* Higher X% anchors the image right-ward so the cubes show on the
     left side of the viewport. Higher Y% raises the visible content
     (source's lower portion moves into view). The bottom-edge fade
     below blurs out the audience-silhouette band that gets exposed. */
  background-position: 75% 50%;
}
/* Bottom-edge fade — image and veil masked together so the section
   dissolves into the page background instead of cutting in hard. */
#learning .bleed-bg,
#learning .bleed-veil {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
}
#learning .bleed-veil {
  background:
    radial-gradient(70% 50% at 50% 38%, rgba(7, 11, 20, 0.78), rgba(7, 11, 20, 0.30) 80%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.20) 0%, rgba(7, 11, 20, 0.35) 60%, rgba(7, 11, 20, 0.65) 100%);
}

.learn-content { max-width: 1080px; }
.learn-content h2 { margin-bottom: 24px; }
.learn-content .lead { max-width: 640px; margin: 0 auto; }
.learn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 80px;
  text-align: left;
}
/* Single hero box variant — used when only one savings figure is shown */
.learn-row.learn-row-single {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
  text-align: center;
}
.learn-row.learn-row-single .lr-t {
  max-width: 420px;
  margin: 14px auto 0;
}
.lr-item {
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(7, 11, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s var(--ease);
}
.lr-item:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 229, 157, 0.32);
}
.lr-item.lr-hero {
  border-color: rgba(46, 229, 157, 0.35);
  background: linear-gradient(180deg, rgba(46, 229, 157, 0.10), rgba(7, 11, 20, 0.65));
}

/* Pass / Fail / Buffer scoring narrative under the savings hero */
.learn-game {
  margin: 70px auto 0;
  max-width: 880px;
  text-align: left;
  padding: 36px 38px;
  border-radius: 18px;
  border: 1px solid rgba(46, 229, 157, 0.22);
  border-left: 3px solid var(--brand);
  background:
    linear-gradient(160deg,
      rgba(46, 229, 157, 0.10) 0%,
      rgba(122, 167, 255, 0.04) 40%,
      rgba(7, 11, 20, 0.62) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.30);
}
.learn-game-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
  margin: 0 0 12px;
}
.learn-game-title {
  font-size: clamp(26px, 2.4vw, 34px);
  margin: 0 0 18px;
  line-height: 1.15;
}
.learn-game-body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 14px;
}
.learn-game-body strong {
  color: var(--text);
  font-weight: 700;
}
.learn-game-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 22px;
}
.learn-game-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(7, 11, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.learn-game-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-align: center;
  padding: 6px 0;
  border-radius: 6px;
}
.learn-game-row.pass   .learn-game-tag { background: rgba(46, 229, 157, 0.18); color: #6cffba; border: 1px solid rgba(46, 229, 157, 0.35); }
.learn-game-row.fail   .learn-game-tag { background: rgba(255, 130, 110, 0.16); color: #ff9d8a;  border: 1px solid rgba(255, 130, 110, 0.30); }
.learn-game-row.buffer .learn-game-tag { background: rgba(122, 167, 255, 0.16); color: #aac5ff;  border: 1px solid rgba(122, 167, 255, 0.30); }
.learn-game-line {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}
.lr-yr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
  font-weight: 700;
}
.lr-num {
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--text);
}
.lr-num em {
  font-style: normal;
  font-size: 0.45em;
  font-weight: 600;
  margin-left: 2px;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}
.lr-h { font-size: 18px; margin-bottom: 8px; font-weight: 600; }
.lr-t { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ─── BUILT FOR BRITISH WINTERS (frost-grass full-bleed) ─── */
.frost-content { max-width: 1080px; }
.frost-content h2 { margin-bottom: 28px; }
.frost-content .lead { max-width: 720px; margin: 0 auto; }
.frost-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 70px;
  text-align: left;
}
.fr-item {
  padding: 30px 28px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  background: rgba(7, 11, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fr-num {
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--text);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fr-num em {
  font-style: normal;
  font-size: 0.45em;
  font-weight: 600;
  margin-left: 2px;
  -webkit-text-fill-color: var(--muted);
  color: var(--muted);
}
.fr-h { font-size: 18px; margin-bottom: 8px; font-weight: 600; }
.fr-t { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ─── SAVINGS ─── */
.savings-section {
  position: relative;
}
.savings-section .bleed-veil-soft {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(7, 11, 20, 0.40), rgba(7, 11, 20, 0.78) 90%);
  z-index: 1;
  /* Match the bg image fade so veil + image fade together at the edges. */
  -webkit-mask-image: radial-gradient(
    ellipse closest-side at 50% 50%,
    #000 0%,
    #000 30%,
    transparent 100%
  );
          mask-image: radial-gradient(
    ellipse closest-side at 50% 50%,
    #000 0%,
    #000 30%,
    transparent 100%
  );
}
.savings-content {
  position: relative;
  z-index: 2;
}
.save-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 60px;
  align-items: stretch;
}
.save-card {
  padding: 36px 30px 32px;
  background: rgba(7, 11, 20, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  transition: all 0.25s var(--ease);
}
.save-card:hover { transform: translateY(-3px); border-color: rgba(46, 229, 157, 0.3); }
.save-card.hero-card {
  background: linear-gradient(180deg, rgba(46, 229, 157, 0.10), rgba(46, 229, 157, 0.02));
  border-color: rgba(46, 229, 157, 0.32);
}
.save-yr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
  font-weight: 700;
}
.save-num {
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 14px;
}
.save-num em {
  font-style: normal;
  font-size: 0.45em;
  font-weight: 600;
  margin-left: 2px;
}
.up {
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 6px;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  vertical-align: middle;
}
.save-l {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ─── CTA ─── */
.cta { padding: 140px 0; text-align: center; }
.cta h2 { max-width: 18ch; margin: 0 auto 22px; }
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ─── Footer ─── */
.footer {
  padding: 50px 0;
  border-top: 1px solid var(--line-soft);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-logo img { height: 22px; opacity: 0.85; }
.footer-meta {
  font-size: 12px;
  color: var(--dim);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px;
}
.footer-status {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.55;
  max-width: 720px;
}
.footer-links {
  display: flex;
  gap: 22px;
  font-size: 13px;
}
.footer-links a {
  color: var(--muted);
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--brand); }

/* ─── Reveal-on-scroll ─── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .split-grid, .split-grid.reverse { grid-template-columns: 1fr; gap: 60px; }
  .split-grid.reverse .split-copy { order: 0; }
  .split-grid.reverse .split-art  { order: 1; }
  .how-row { grid-template-columns: repeat(2, 1fr); }
  .insight-row { grid-template-columns: 1fr; gap: 14px; }
  .what-pillars { grid-template-columns: 1fr; }
  .achieve-grid { grid-template-columns: repeat(2, 1fr); }
  .save-row { grid-template-columns: 1fr; }
  .learn-row { grid-template-columns: 1fr; }
  .frost-row { grid-template-columns: 1fr; }
  /* Product scroll → stack: laptop on top (non-sticky), copy below */
  .product-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-art { order: 0; }
  .product-art-sticky { position: relative; top: 0; }
  .product-copy { order: 1; }
  .prod-step { min-height: auto; padding: 30px 0; }
  /* Show only the active scene at a fixed mobile size */
  .laptop { max-width: 720px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .nav { padding: 14px 18px; grid-template-columns: auto 1fr auto; }
  .nav.scrolled { padding: 12px 18px; }
  .nav-links a:not(.btn) { display: none; }
  .nav-left, .nav-right { display: flex; }
  .nav-right .btn-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .section { padding: 80px 0; }
  .hero { min-height: auto; padding: 130px 22px 70px; }
  .hero-strip { grid-template-columns: 1fr; gap: 24px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .bleed { padding: 100px 22px; }
  .bleed.bleed-tall { padding: 120px 22px 130px; }
}

/* ─── Mobile menu (hamburger + slide-down panel) ─── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-toggle:hover { border-color: rgba(46, 229, 157, 0.45); }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  padding: 92px 22px 28px;
  background: rgba(7, 11, 20, 0.96);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s var(--ease), opacity 0.25s ease, visibility 0s linear 0.3s;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s var(--ease), opacity 0.25s ease, visibility 0s;
}
.mobile-menu a {
  display: block;
  padding: 16px 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--brand); }
.mobile-menu-cta {
  margin-top: 18px;
  border-bottom: none !important;
  text-align: center;
  padding: 14px 22px !important;
  color: #000 !important;
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.mobile-menu-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}
body.menu-open { overflow: hidden; }

@media (max-width: 540px) {
  .container { padding: 0 22px; }
  .how-row { grid-template-columns: 1fr; }
  .what-pillars { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}