/* =========================================================================
   REVIVO — Landing site
   Design system + components. Dark cinematic default, light/airy toggle.
   ========================================================================= */

/* ---------- Tokens ----------
   Single dark cinematic theme. The light theme and its toggle were removed
   30/07/2026: the light --hero-fade went fully transparent past 80% width, so
   hero copy and the "For Dealers" nav link rendered as dark text on the dark
   hero photograph. Dark-only is the brand default and the only tested surface.
   ------------------------------------------------------------------------- */
:root {
  --bg:            #06080c;
  --bg-2:          #0a0e15;
  --surface:       #10151e;
  --surface-2:     #151b26;
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.17);
  --text:          #eef2f7;
  --text-muted:    #99a3b2;
  /* --text-dim was #69717f: 3.72:1 on --surface, a WCAG AA fail for the 12.5px
     form labels and .form-note. #7c8494 is 4.86:1 on --surface, 5.33:1 on --bg. */
  --text-dim:      #7c8494;
  /* --accent is for text, icons, rules and borders (5.25:1 on --bg).
     --accent-btn is for solid fills carrying white text: white on --accent was
     3.82:1 and failed AA, white on --accent-btn is 4.90:1. Do not swap them. */
  --accent:        #2f7dff;
  --accent-btn:    #1f6ae8;
  --accent-btn-hi: #1a5ecf;
  --accent-soft:   rgba(47,125,255,.13);
  --accent-line:   rgba(47,125,255,.35);
  --shadow:        0 24px 70px rgba(0,0,0,.55);
  --shadow-soft:   0 12px 34px rgba(0,0,0,.4);
  --card-glow:     0 0 0 1px var(--border), var(--shadow-soft);
  --hero-fade:     linear-gradient(90deg, var(--bg) 0%, rgba(6,8,12,.96) 36%, rgba(6,8,12,.62) 58%, rgba(6,8,12,0) 82%);
  --img-frame:     rgba(255,255,255,.08);
  --nav-scrolled:  rgba(8,10,15,.82);
  --radius:        16px;
  --radius-lg:     22px;
  --maxw:          1200px;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: scroll; scroll-padding-top: 90px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: .002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .5s var(--ease), color .5s var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--accent-btn); color: #fff; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(72px, 10vw, 132px) 0; }
.section-sm { padding: clamp(52px, 7vw, 88px) 0; }
.alt { background: var(--bg-2); }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 30px; height: 2px; background: var(--accent); border-radius: 2px;
}
.eyebrow.center-line { justify-content: center; }
h1, h2, h3 { line-height: 1.06; font-weight: 300; letter-spacing: -.02em; color: var(--text); }
h2.display { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h3 { font-weight: 600; letter-spacing: -.01em; }
.lead { color: var(--text-muted); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 56ch; }
.dot { color: var(--accent); }
.section-head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 60px); }
.section-head.center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 100px;
  font-weight: 600; font-size: .96rem; letter-spacing: .01em;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--accent-btn); color: #fff;
  box-shadow: 0 10px 30px -8px rgba(47,125,255,.6);
}
.btn-primary:hover { background: var(--accent-btn-hi); transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(47,125,255,.7); }
.btn-ghost {
  border: 1px solid var(--border-strong); color: var(--text); background: transparent;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 1.02rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--accent);
}
.link-arrow svg { width: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Header / nav ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: var(--nav-scrolled);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 1.28rem; letter-spacing: .34em; padding-left: .34em; }
.brand .v-accent { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { font-size: .93rem; color: var(--text-muted); font-weight: 500; transition: color .2s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 14px; }

.burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.burger span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s var(--ease); }
.burger.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity: 0; }
.burger.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: 74px; }
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  background-position: right center; background-size: cover; background-repeat: no-repeat;
}
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--hero-fade); }
.hero-media::before { content:""; position:absolute; inset:0; background: linear-gradient(0deg, var(--bg) 1%, rgba(6,8,12,0) 22%); z-index:1; }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-inner { max-width: 620px; padding: 40px 0; text-shadow: 0 2px 40px rgba(0,0,0,.55); }
.hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.2rem); font-weight: 200; margin-bottom: 26px; }
.hero h1 b { font-weight: 500; }
.hero .lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); margin-bottom: 34px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 12px 26px; color: var(--text-muted); font-size: .9rem; }
.hero-chips span { display: inline-flex; align-items: center; gap: 9px; }
.hero-chips svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; color: var(--text-dim); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hint i { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); animation: drop 1.9s var(--ease) infinite; }
@keyframes drop { 0%{opacity:0; transform: scaleY(.2); transform-origin: top;} 40%{opacity:1;} 100%{opacity:0; transform: scaleY(1); transform-origin: top;} }

/* ---------- Marquee / trust strip ---------- */
.stripbar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.stripbar .wrap { display: flex; flex-wrap: wrap; gap: 20px 8px; justify-content: space-between; padding-block: 26px; }
.strip-item { display: flex; align-items: center; gap: 13px; min-width: 210px; }
.strip-item svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.strip-item b { display: block; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.strip-item small { color: var(--text-muted); font-size: .82rem; }

/* ---------- Stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stats.stats-4 { grid-template-columns: repeat(4, 1fr); }
.stat {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 30px;
  background: var(--surface); position: relative; overflow: hidden;
}
.stat::before { content:""; position:absolute; left:0; top:0; width: 42px; height: 3px; background: var(--accent); }
.stat .num { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 200; letter-spacing: -.03em; color: var(--text); }
.stat .num b { font-weight: 500; color: var(--accent); }
.stat .k { margin-top: 8px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.stat p { margin-top: 10px; color: var(--text-muted); font-size: .92rem; }

/* ---------- Product cards ---------- */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pcard {
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pcard:hover { transform: translateY(-6px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.pcard-img { aspect-ratio: 16 / 11; overflow: hidden; position: relative; background: var(--surface-2); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.05); }
.pcard-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.pcard h3 { font-size: 1.5rem; margin-bottom: 4px; }
.pcard .tag { color: var(--accent); font-weight: 600; font-size: .92rem; margin-bottom: 18px; }
.pcard ul { list-style: none; display: grid; gap: 11px; margin-bottom: 24px; }
.pcard li { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--text-muted); }
.pcard li svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.pcard .warranty { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--border); }
.pcard .warranty b { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.pcard .warranty b span { color: var(--accent); }

/* ---------- Feature grid (why / benefits) ---------- */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fcell { padding: 30px 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .3s, transform .3s var(--ease); }
.fcell:hover { border-color: var(--accent-line); transform: translateY(-4px); }
.ficon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 20px; }
.ficon svg { width: 26px; height: 26px; }
.fcell h3 { font-size: 1.12rem; margin-bottom: 9px; }
.fcell p { color: var(--text-muted); font-size: .92rem; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.rev .split-media { order: -1; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--img-frame); position: relative; aspect-ratio: 5 / 4; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.checklist { list-style: none; display: grid; gap: 15px; margin-top: 26px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; }
.checklist li svg { width: 21px; height: 21px; color: var(--accent); flex: none; margin-top: 2px; }
.checklist li b { font-weight: 600; }
.checklist li span { color: var(--text-muted); display: block; font-size: .92rem; }

/* ---------- Membership highlight panel ---------- */
.panel {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: clamp(34px, 5vw, 60px);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
    var(--surface);
}
.panel-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.price-badge {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--accent-btn); color: #fff; padding: 12px 22px; border-radius: 100px;
  font-weight: 300; box-shadow: 0 12px 30px -8px rgba(47,125,255,.6);
}
.price-badge b { font-size: 1.7rem; font-weight: 500; }
.price-badge span { font-size: .9rem; opacity: .9; }
.covers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.covers div { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--text-muted); }
.covers svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.step { position: relative; padding-top: 26px; }
.step::before { counter-increment: s; content: "0" counter(s); display: block; line-height: 1; font-size: 2.1rem; font-weight: 200; color: var(--accent); letter-spacing: -.02em; }
.step h3 { font-size: 1.08rem; margin: 14px 0 8px; }
.step p { color: var(--text-muted); font-size: .9rem; }
.step .bar { position: absolute; top: 0; left: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--accent-line), transparent); }

/* ---------- Logos row ---------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; }
.logos span { color: var(--text-dim); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; opacity: .8; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { margin-bottom: 18px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.cta-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .28; }
.cta-media + .veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--bg) 0%, transparent 40%, transparent 60%, var(--bg) 100%); }

/* ---------- Enquiry form ---------- */
.form-card {
  max-width: 720px; margin: 38px auto 0; text-align: left;
  padding: 34px 32px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700;
}
.field label .req { color: var(--accent); margin-left: 3px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: .97rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg-2); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field select {
  appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a3b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
}
.field select option { background: var(--surface-2); color: var(--text); }
.form-actions { margin-top: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-actions .btn { flex: 0 0 auto; }
.form-note { font-size: .85rem; color: var(--text-dim); line-height: 1.55; }
.form-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover { color: var(--accent); }
/* .hp was the honeypot wrapper. Removed 31/07/2026 along with the honeypot
   itself: off-screen positioning hides a field from people but NOT from browser
   autofill or password managers, which filled it and made Netlify silently drop
   real leads. Do not reintroduce this pattern. See the comment on the quote form
   in index.html. */

/* Thank-you page */
.thanks { min-height: 74svh; display: flex; align-items: center; text-align: center; }
.thanks .tick {
  width: 66px; height: 66px; margin: 0 auto 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.thanks .tick svg { width: 30px; height: 30px; }

/* ---------- Legal / long-form prose ---------- */
.legal { max-width: 780px; margin: 0 auto; }
.legal h2 { font-size: 1.35rem; margin: 42px 0 14px; letter-spacing: -.01em; }
.legal h3 { font-size: 1.02rem; margin: 26px 0 10px; color: var(--text); }
.legal p, .legal li { color: var(--text-muted); line-height: 1.75; font-size: .98rem; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal .updated { font-size: .84rem; color: var(--text-dim); letter-spacing: .04em; }
.legal .callout {
  margin: 22px 0; padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--surface);
}
.legal .callout p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 64px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 48px; }
.footer .brand { margin-bottom: 18px; }
.footer p.small { color: var(--text-muted); font-size: .9rem; max-width: 34ch; }
.foot-col h4 { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; font-weight: 700; }
.foot-col a, .foot-col p { display: block; color: var(--text-muted); font-size: .92rem; margin-bottom: 11px; transition: color .2s; }
.foot-col a:hover { color: var(--accent); }
/* Currently UNUSED: all phone CTAs were removed 31/07/2026 because the 1300
   number is not connected yet. Kept deliberately so restoring the footer phone
   is a markup change only. See the note on the closing CTA in index.html. */
.foot-phone { font-size: 1.15rem; font-weight: 600; color: var(--text) !important; letter-spacing: .01em; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: .84rem; }
.foot-bottom a { color: var(--text-dim); transition: color .2s; }
.foot-bottom a:hover { color: var(--accent); }

/* ---------- Reveal animation ----------
   Content is only hidden once JS has confirmed it can show it again. A one-line
   inline script in each page's <head> adds `js` to <html>; it is inline and in
   the head so it lands before first paint and there is no flash of visible then
   hidden content. If JS is disabled the class never lands and the page renders
   in full. Before 30/07/2026 `.reveal { opacity: 0 }` applied unconditionally,
   which blanked all 31 blocks (headline, copy, CTAs, every card) whenever the
   script did not run.

   `revealFallback` is a second failsafe, in pure CSS, covering the case where
   the head script runs but main.js 404s or throws. It is scoped to
   `.js-pending`, which the head script sets and main.js clears once the
   observer is installed. That scoping matters: keyed off `.js` instead, the 3s
   timer would also fire on healthy loads, so anything the visitor had not yet
   scrolled to would already be opaque when its `.in` animation later ran, and
   would visibly fade out and back in.

   Delay overrides below are scoped to `.in` for the same class of reason:
   unscoped, they would also shorten the fallback delay and make the whole page
   appear at once 0.08s in.
   ------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js-pending .reveal { animation: revealFallback 0s linear 3s forwards; }
.js .reveal.in { animation: revealIn .7s var(--ease) both; }
@keyframes revealFallback { to { opacity: 1; transform: none; } }
@keyframes revealIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.js .reveal.in.d1 { animation-delay: .08s; } .js .reveal.in.d2 { animation-delay: .16s; }
.js .reveal.in.d3 { animation-delay: .24s; } .js .reveal.in.d4 { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ---------- Mobile nav panel ---------- */
.mobile-menu {
  position: fixed; inset: 74px 0 auto 0; z-index: 99;
  background: var(--nav-scrolled); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px 26px; display: none; flex-direction: column; gap: 4px;
  transform: translateY(-8px); opacity: 0; transition: opacity .25s, transform .25s var(--ease);
}
.mobile-menu.open { display: flex; opacity: 1; transform: none; }
.mobile-menu a { padding: 13px 6px; font-size: 1.02rem; color: var(--text); border-bottom: 1px solid var(--border); }
.mobile-menu .btn { margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-cta { display: none; }
  /* The scroll cue is a desktop flourish and it is absolutely positioned, so
     once .hero-chips wraps to a second row the two overlap. Measured colliding
     at 390px (chips bottom below hint top). It is aria-hidden decoration, so
     dropping it on narrow screens is the fix rather than reflowing the hero. */
  .scroll-hint { display: none; }
  .stats, .stats.stats-4, .products, .fgrid, .steps, .covers { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.rev .split-media { order: 0; }
  .split-media { aspect-ratio: 16/10; }
  .panel-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .wrap { padding-inline: 20px; }
  .stats, .stats.stats-4, .products, .fgrid, .steps, .foot-grid, .covers { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .hero-media { background-position: 68% center; }
  .hero-media::after { background: linear-gradient(180deg, rgba(6,8,12,.35) 0%, var(--bg) 78%); }
  .strip-item { min-width: 45%; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .form-card { padding: 26px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; justify-content: center; }
}