/* ==========================================================================
   ZAO — "Premium hardware" direction (test page).
   Built per ui-ux-pro-max design-system output + bento + premium skills:
   deep slate surface, ONE accent (eco/status green), Space Grotesk display,
   DM Sans body, bento product grid, shadcn-grade component states.
   No emoji icons (inline SVG only), 44px touch targets, AA contrast,
   reduced-motion respected (GSAP matchMedia in modern.js).
   ========================================================================== */

body.theme-modern{
  /* surfaces */
  --bg:        #0B1120;
  --bg-2:      #0E1728;
  --card:      #111C31;
  --card-2:    #15223C;
  --border:    rgba(148,163,184,.14);
  --border-2:  rgba(148,163,184,.26);
  /* text */
  --fg:        #F1F5F9;
  --fg-2:      #C4D0E0;
  --muted:     #8FA3BF;
  /* the ONE accent: energy-saving / online green */
  --accent:    #22C55E;
  --accent-2:  #4ADE80;
  --accent-dk: #16A34A;
  --on-accent: #05130A;
  --ring:      rgba(34,197,94,.45);
  --glow:      rgba(34,197,94,.16);
  /* semantic (kept for waitlist errors etc.) */
  --red:#F87171; --red-ink:#F87171; --blue:#60A5FA; --blue-ink:#93C5FD;
  --ink:var(--fg); --ink-2:var(--fg-2); --ink-3:var(--muted);
  --paper:var(--bg); --paper-2:var(--card); --paper-3:var(--card-2);
  --line:var(--border); --line-2:var(--border-2);
  /* type */
  --f-display:'Space Grotesk', var(--f-body);
  --f-body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* shape */
  --radius:12px; --radius-lg:20px;
  --shadow-1:0 1px 2px rgba(2,6,17,.5);
  --shadow-2:0 12px 32px -12px rgba(2,6,17,.65);
  --shadow-3:0 32px 80px -24px rgba(2,6,17,.8);
  --maxw:1200px;

  background:var(--bg);
  color:var(--fg);
  color-scheme:dark;
  font-family:var(--f-body);
}
/* strip inherited paper decorations */
body.theme-modern::before{
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 520px at 82% -10%, rgba(34,197,94,.07), transparent 60%),
    radial-gradient(700px 460px at 8% 4%, rgba(96,165,250,.05), transparent 60%);
  -webkit-mask-image:none; mask-image:none; opacity:1;
}
body.theme-modern::after{ opacity:.18; }
body.theme-modern ::selection{ background:var(--accent); color:var(--on-accent); }
body.theme-modern :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.theme-modern h1,.theme-modern h2,.theme-modern h3{
  font-family:var(--f-display); font-variation-settings:normal; letter-spacing:-.02em;
}

/* ---- ambient underfloor-heating pipes (fixed background network) --------- */
.pipes{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none; opacity:.9;
}
.pipes use{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* glowing glass tubes with a bright liquid core, blue(cold) -> red(hot).
   Layered like the reference: outer bloom + translucent body + hot core +
   travelling liquid highlights. */
.pipes-glow use{ stroke:url(#gpipe); stroke-width:15; opacity:.35; filter:blur(7px); }
.pipes-body use{ stroke:url(#gpipe); stroke-width:7; opacity:.7; }
.pipes-core use{ stroke:#fff; stroke-width:2; opacity:.4; }
.pipes-flow use{
  stroke:#fff; stroke-width:3.4; opacity:.6;
  stroke-dasharray:24 200;
  animation:pipeFlow 6s linear infinite;
}
.pipes-flow2 use{ animation-duration:9s; animation-delay:-3s; opacity:.4; }
@keyframes pipeFlow{ to{ stroke-dashoffset:-224; } }
@media (prefers-reduced-motion: reduce){ .pipes-flow{ display:none; } }

/* per-section serpentine: centered in the page (not connected to the fixed
   edge risers), lives inside each pinned section's own stage so it always
   sits exactly under THAT section's card, whatever its height (modern.js
   measures and positions it). Hidden until scroll reveals it, retracts
   after the last card. Same layered glass-tube look as the risers
   (glow/body/core/flow). */
.pin-bridge{
  position:absolute; left:0; right:0; height:110px; z-index:5;
  overflow:visible; pointer-events:none; opacity:0;
}
.pin-bridge path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pin-bridge-glow{ stroke:url(#gpipe); stroke-width:15; opacity:.35; filter:blur(6px); }
.pin-bridge-body{ stroke:url(#gpipe); stroke-width:7; opacity:.75; }
.pin-bridge-core{ stroke:#fff; stroke-width:2; opacity:.4; }
.pin-bridge-flow{
  stroke:#fff; stroke-width:3.2; opacity:.6;
  stroke-dasharray:20 170; animation:pipeFlow 6s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .pin-bridge{ display:none; } }

/* ------------------------------------------------------------------ nav -- */
.m-nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-inline:clamp(1rem,4vw,2.5rem);
  background:rgba(11,17,32,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border);
  transition:height .25s ease, background .25s ease;
}
.m-nav.is-scrolled{ height:60px; background:rgba(11,17,32,.9); }
.m-nav .logo-wm{ color:var(--fg); }
.m-nav .logo-sub{ color:var(--muted); }
.m-links{ display:flex; gap:.25rem; list-style:none; margin:0; padding:0; }
.m-links a{
  display:inline-block; padding:.55rem .85rem; border-radius:10px;
  font-size:.92rem; font-weight:500; color:var(--fg-2);
  transition:color .2s ease, background .2s ease;
}
.m-links a:hover{ color:var(--fg); background:rgba(148,163,184,.09); }
/* liquid-glass pill nav — built by JS (adapted from the Apple liquid-glass
   pattern): deep-blur glass shell, curved top reflection, mouse-follow glare,
   springy sliding pill behind the current link. Without JS: plain links. */
.m-links.is-glass{
  position:relative; padding:6px; border-radius:99px;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(32px) saturate(190%); backdrop-filter:blur(32px) saturate(190%);
  box-shadow:
    0 16px 36px -18px rgba(15,32,39,.4),
    inset 0 2px 3px -1px rgba(255,255,255,.85),
    inset 0 -2px 4px -1px rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.45);
}
.m-links.is-glass::before{
  content:""; position:absolute; top:1px; left:1px; right:1px; height:46%;
  border-radius:99px 99px 24px 24px / 99px 99px 12px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  pointer-events:none; z-index:2;
}
.m-links-glare{ position:absolute; inset:0; border-radius:99px; overflow:hidden; pointer-events:none; z-index:1; }
.m-links-glare i{
  position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(circle 80px at var(--x,50%) var(--y,50%), rgba(255,255,255,.55) 0%, transparent 100%);
  mix-blend-mode:overlay;
}
.m-links.is-glass:hover .m-links-glare i{ opacity:1; }
.m-links-pill{
  position:absolute; top:6px; left:0; height:calc(100% - 12px); width:0;
  background:rgba(255,255,255,.78); border-radius:99px;
  box-shadow:0 4px 12px rgba(15,32,39,.12), 0 1px 2px rgba(15,32,39,.06), inset 0 1px 1px rgba(255,255,255,.9);
  opacity:0; z-index:0;
  transition:transform .5s cubic-bezier(.34,1.2,.64,1), width .5s cubic-bezier(.34,1.2,.64,1), opacity .3s ease, background .5s ease;
}
.m-links-pill.is-on{ opacity:1; }
.m-links.is-glass a{ position:relative; z-index:3; border-radius:99px; }
.m-links.is-glass a:hover{ background:transparent; }
.m-links.is-glass a.is-cur{ color:var(--deep); font-weight:600; }
/* products dropdown: hover/focus reveals a glass panel below the trigger,
   linking straight to each equipment's dedicated page. Padding-top on the
   panel (not a margin gap) keeps the hover path unbroken between trigger
   and menu. Plain <a> nav (no JS) still works — just an inert list of links. */
.has-sub{ position:relative; }
.has-sub > a::after{
  content:""; display:inline-block; width:5px; height:5px; margin:0 0 1px .4rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.6; vertical-align:middle;
  transition:transform .2s ease;
}
.has-sub:hover > a::after, .has-sub:focus-within > a::after{ transform:rotate(225deg); margin-top:.3rem; }
/* the panel: positioned+visual in one element. Top padding is the hover
   bridge (no dead gap between trigger and menu) as well as the panel's own
   inset, so pointer travel from trigger into the menu never breaks :hover. */
.m-sub{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
  width:max-content; min-width:210px;
  list-style:none; margin:0; padding:12px 4px 4px;
  opacity:0; pointer-events:none; z-index:50;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6); border-radius:16px;
  box-shadow:0 20px 44px -16px rgba(15,32,39,.28), 0 0 0 1px rgba(15,32,39,.04);
  transition:opacity .2s ease, transform .2s ease;
}
.has-sub:hover .m-sub, .has-sub:focus-within .m-sub, .has-sub.is-open .m-sub{
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.m-sub a{
  display:block; padding:.6rem .85rem; border-radius:10px;
  font-size:.88rem; font-weight:500; color:var(--fg-2);
  white-space:nowrap; transition:background .15s ease, color .15s ease;
}
.m-sub a:hover, .m-sub a:focus-visible{ background:rgba(13,148,136,.1); color:var(--accent-dk); }
.m-sub li + li{ margin-top:1px; }
.m-nav-r{ display:flex; align-items:center; gap:.6rem; }
.m-lang{ display:flex; border:1px solid var(--border-2); border-radius:10px; overflow:hidden; }
.m-lang a{ padding:.4rem .7rem; font-size:.8rem; font-weight:600; color:var(--muted); transition:.2s; }
.m-lang a.on{ background:var(--fg); color:var(--bg); }
.m-lang a:not(.on):hover{ color:var(--fg); }

/* mobile nav toggle (hamburger). Hidden on desktop; shown <=1024px inside
   .m-nav-r, next to the language switch and waitlist CTA. */
.m-nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:38px; height:38px; padding:0; border:0; background:transparent;
  cursor:pointer; flex:none;
}
.m-nav-toggle span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:var(--fg); transition:transform .25s ease, opacity .2s ease;
}
.m-nav.is-open .m-nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.m-nav.is-open .m-nav-toggle span:nth-child(2){ opacity:0; }
.m-nav.is-open .m-nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1024px){
  .m-nav-toggle{ display:inline-flex; }
  /* .m-links becomes a collapsible panel anchored under the (fixed) nav bar;
     top:100% tracks the bar's own height so it still lines up after the
     is-scrolled height change. Collapsed via max-height so it stays in the
     a11y tree (no display:none) but is fully clipped and non-interactive. */
  .m-links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none;
    background:rgba(11,17,32,.97);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding-inline:clamp(1rem,4vw,2.5rem);
    transition:max-height .3s ease, opacity .2s ease, visibility 0s linear .3s;
  }
  .m-nav.is-open .m-links{
    max-height:calc(100vh - 72px); overflow-y:auto; opacity:1; visibility:visible; pointer-events:auto;
    padding-block:.4rem 1.2rem; transition:max-height .3s ease, opacity .2s ease;
  }
  .m-links > li{ width:100%; }
  .m-links > li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:.95rem 0; border-radius:0; font-size:1rem;
    border-bottom:1px solid rgba(148,163,184,.16);
  }
  .m-links a:hover{ background:transparent; }
  .has-sub > a::after{ display:inline-block; margin-left:auto; }
  .has-sub.m-acc-open > a::after{ transform:rotate(225deg); }
  /* submenu becomes an inline accordion under its trigger instead of a
     floating dropdown panel */
  .m-sub{
    position:static; transform:none; width:auto; min-width:0;
    opacity:1; pointer-events:auto; z-index:auto;
    background:transparent; border:0; border-radius:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    margin:0; padding:0; max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  .has-sub.m-acc-open .m-sub, .has-sub:focus-within .m-sub{ max-height:400px; padding-bottom:.4rem; }
  .m-sub a{ padding:.65rem 0 .65rem 1rem; color:var(--muted); white-space:normal; }
  .m-sub a:hover, .m-sub a:focus-visible{ background:transparent; color:var(--fg); }
  /* neutralize the desktop hover-intent rule's higher-specificity transform:
     a touch tap can synthesize mouseenter (adding .is-open) right before the
     click that opens the accordion via .m-acc-open — without this, that
     stray .is-open would still pop the submenu out as a centered floating
     panel instead of the inline accordion. */
  .has-sub:hover .m-sub, .has-sub.is-open .m-sub{ transform:none; }
  .m-sub li + li{ margin-top:0; }
}

/* --------------------------------------------------------------- buttons -- */
.btn-m{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.85rem 1.5rem; border-radius:12px;
  font-family:var(--f-body); font-size:1rem; font-weight:600; cursor:pointer;
  border:1px solid transparent; text-decoration:none; white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-m svg{ width:18px; height:18px; }
.btn-acc{ background:var(--accent); color:var(--on-accent); box-shadow:0 8px 24px -8px var(--ring); }
.btn-acc:hover{ background:var(--accent-2); transform:translateY(-2px); box-shadow:0 14px 32px -8px var(--ring); }
.btn-acc:active{ transform:translateY(0); }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--border-2); }
.btn-ghost:hover{ border-color:var(--fg-2); background:rgba(148,163,184,.08); transform:translateY(-2px); }
.btn-sm{ min-height:40px; padding:.5rem 1rem; font-size:.9rem; }

/* ------------------------------------------------------------------ hero -- */
.m-hero{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  padding:calc(72px + clamp(3rem,8vw,6rem)) clamp(1rem,4vw,2.5rem) clamp(3rem,6vw,5rem);
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.m-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .9rem; border-radius:999px;
  background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.28);
  font-size:.82rem; font-weight:500; color:var(--accent-2);
}
.m-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:m-pulse 2.4s ease-in-out infinite; }
@keyframes m-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.m-hero h1{
  margin:1.2rem 0 0; font-weight:700;
  font-size:clamp(2.6rem,5.2vw,4.3rem); line-height:1.04;
  color:var(--fg);
}
.m-hero h1 .acc{ color:var(--accent); }
.m-hero .lead{
  margin-top:1.2rem; max-width:34rem;
  font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.7; color:var(--muted);
}
.m-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.m-proof{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:2.2rem;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; color:var(--muted);
}
.m-proof > span{ display:inline-flex; align-items:center; gap:.5rem; }
.m-proof svg{ width:15px; height:15px; color:var(--accent); }

.m-hero-visual{ position:relative; min-width:0; }
.m-hero-visual .ph{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); background:#05080F;
  box-shadow:var(--shadow-3), 0 0 120px -30px var(--glow);
}
.m-hero-visual img{ width:100%; height:auto; display:block; }
.m-float{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .9rem; border-radius:12px;
  background:rgba(17,28,49,.85); border:1px solid var(--border-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:var(--f-mono); font-size:.75rem; color:var(--fg-2);
  box-shadow:var(--shadow-2);
}
.m-float b{ color:var(--fg); font-weight:600; }
.m-float svg{ width:16px; height:16px; color:var(--accent); }
.m-float--a{ top:8%; left:-1.6rem; }
.m-float--b{ bottom:10%; right:-1.2rem; }
@media (max-width:1180px){ .m-float--a{ left:.8rem; } .m-float--b{ right:.8rem; } }

/* -------------------------------------------------------------- sections -- */
.m-sec{ max-width:var(--maxw); margin-inline:auto; padding:clamp(2.6rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem); }
.m-eyebrow{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.m-h2{ margin:.7rem 0 0; font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:700; line-height:1.12; }
/* text-reveal titles: JS wraps each word in .rv-line (mask) > .rv-word
   (the moving glyph). No-JS / reduced-motion: split never runs, plain text.
   The block padding keeps descenders/diacritics (ț, ș, Ă) out of the clip. */
.rv-line{ display:inline-block; overflow:hidden; padding-block:.14em; margin-block:-.14em; }
.rv-word{ display:inline-block; }
/* hero variant: no mask (clipping would cut the white halo text-shadow) */
.rv-soft .rv-line{ overflow:visible; }
.m-sub{ margin-top:.8rem; max-width:40rem; color:var(--muted); line-height:1.65; }

/* ----------------------------------------------------------------- bento -- */
.bento{
  display:grid; gap:1rem; margin-top:2.4rem;
  grid-template-columns:repeat(12,1fr);
}
/* products grid continues right after the visual band: no heading, tighter top */
.bento--flush{ margin-top:0; }
.tile{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.5rem;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tile:hover{ transform:translateY(-4px); border-color:rgba(34,197,94,.35); box-shadow:var(--shadow-2), 0 0 0 1px rgba(34,197,94,.2), 0 20px 60px -20px var(--glow); }
.tile-title{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; }
.tile-kicker{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.tile-kicker svg{ width:15px; height:15px; color:var(--accent); }
.tile p{ margin-top:.5rem; color:var(--muted); font-size:.94rem; line-height:1.6; }
.tile .specline{ margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.tile .specline > span{
  font-family:var(--f-mono); font-size:.7rem; color:var(--fg-2);
  padding:.3rem .6rem; border:1px solid var(--border); border-radius:8px; background:rgba(148,163,184,.06);
}
.tile-img{ position:relative; margin:1.1rem -1.5rem -1.5rem; }
.tile-img img{ width:100%; height:auto; display:block; }
.tile--photo{ padding-bottom:0; }
/* device cards, "workbench" style: pure-black card, so the 3D renders float
   free on it with no frame; mono datasheet header with a pulsing status LED;
   specs as terminal readouts. Hover: 3D tilt + glass glare (modern.js). */
.dcard{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#000; color:#E9EDF1;
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-lg);
  padding:1.3rem 1.5rem 1.4rem;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dcard:hover{
  transform:translateY(-4px); border-color:rgba(15,181,166,.45);
  box-shadow:0 24px 60px -24px rgba(15,181,166,.35);
}
.dcard-head{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA3AD;
}
.dcard-led{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--accent-2); box-shadow:0 0 10px var(--accent-2);
  animation:m-pulse 2.4s ease-in-out infinite;
}
.dcard-rev{ margin-left:auto; color:#57666E; letter-spacing:.2em; }
.dcard-img{ margin:0 -1.5rem; perspective:800px; }
.dcard-img img{
  width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:contain;
  will-change:transform;
}
.dcard-title{ font-family:var(--f-display); font-weight:600; font-size:1.2rem; color:#fff; }
.dcard-desc{ margin-top:.45rem; color:#9FB0B8; font-size:.94rem; line-height:1.6; }
.dcard-specs{ margin-top:auto; padding-top:1rem; display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; }
.dcard-specs > span{ font-family:var(--f-mono); font-size:.73rem; color:var(--accent-2); }
.dcard-specs > span::before{ content:"▸ "; opacity:.65; }
.dcard-glare{
  position:absolute; inset:0; opacity:0; pointer-events:none; z-index:2;
  background:radial-gradient(circle 150px at var(--x,50%) var(--y,50%), rgba(255,255,255,.13) 0%, transparent 100%);
  transition:opacity .3s ease;
}
.dcard:hover .dcard-glare{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .dcard-led{ animation:none; } }
@media (max-width:560px){
  .dcard-head{ flex-wrap:wrap; row-gap:.3rem; }
  .dcard-rev{ margin-left:0; }
}
/* ---- pinned horizontal card slider (Patch 1:1 mechanic) ------------------
   Dark rounded cards laid out in a row; GSAP pins the section and slides the
   row sideways as you scroll — the next card peeks in from the right. Page
   background stays the site's normal light surface; no dots, no glow.
   No JS / reduced-motion: cards simply stack vertically, all readable. */
.pin-sec{ position:relative; overflow:hidden; padding-block:clamp(2.6rem,6vw,4rem) 0; }
.pin-sec-head{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2.5rem); }
.pin-stage{ position:relative; margin-top:clamp(1.6rem,3vw,2.4rem); padding-bottom:clamp(3.6rem,7vh,5rem); }
.pin-track{
  display:flex; flex-direction:column; gap:1.5rem;
  padding-inline:max(calc((100vw - var(--maxw)) / 2 + clamp(1rem,4vw,2.5rem)), 1rem);
}
/* the visible black card */
.pin-card{
  background:#0B0B0C; color:#fff; border-radius:30px;
  padding:clamp(1.8rem,4vw,3.6rem);
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.4rem,3vw,3rem); align-items:start;
  width:min(1150px,80vw);
  border:2.5px solid var(--accent-2);
  box-shadow:0 0 50px -6px rgba(15,181,166,.5), 0 0 0 1px rgba(15,181,166,.3);
}
/* pinned: the track is a fixed, centered CLIP BOX the size of one card, with
   overflow hidden. Cards fill it and stack; each incoming card parks just
   past the right edge (hidden by the clip) and slides left into view — so it
   appears to emerge straight from the current card's right edge, no white gap
   and no sliver at rest. */
body.js-anim .pin-sec.js-pinned .pin-track{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1150px,80vw); height:min(80vh,760px);
  padding:0; overflow:hidden; border-radius:30px;
  /* bold teal frame + glow: the black card reads as a lit ZAO module,
     tying it into the site's teal accent language */
  border:2.5px solid var(--accent-2);
  box-shadow:
    0 0 0 1px rgba(15,181,166,.35),
    0 0 50px -6px rgba(15,181,166,.55),
    0 34px 90px -34px rgba(0,0,0,.65);
}
/* only the active panel is clickable — every other panel still fully covers
   the stage (inset:0) for the cover-reveal stacking effect, and without this
   its invisible/off-screen-content box would sit above the active card in
   z-order and swallow every click meant for it (links, buttons inside). */
body.js-anim .pin-sec.js-pinned .pin-panel{ position:absolute; inset:0; display:block; pointer-events:none; }
body.js-anim .pin-sec.js-pinned .pin-panel.is-active{ pointer-events:auto; }
body.js-anim .pin-sec.js-pinned .pin-card{
  width:100%; height:100%; min-height:0; border:0; border-radius:0;
  box-shadow:none; will-change:transform;
}
.pin-panel-num{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(4rem,8vw,6.8rem); line-height:.95; color:#fff;
}
.pin-panel-eyebrow{
  display:flex; align-items:center; gap:.6rem; margin-top:1.4rem;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-2);
}
.pin-panel-copy h3{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.2rem,4.6vw,3.7rem); line-height:1.0; letter-spacing:-.01em; margin-top:.9rem; color:#fff;
}
/* product cards (image + text) carry long SEO-named titles now — a smaller,
   tighter size keeps them to 2-3 lines instead of swallowing the card.
   The text-only steps (#how, #why-zao) keep the full billboard size above,
   since their titles stay short. */
.pin-panel:not(.pin-panel--txt) .pin-panel-copy h3{
  font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.15;
}
.pin-panel-copy p{ margin-top:1.2rem; color:rgba(255,255,255,.72); font-size:clamp(1.02rem,1.3vw,1.18rem); line-height:1.65; max-width:46ch; }
.pin-panel-copy p a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(15,181,166,.4); transition:color .15s ease, text-decoration-color .15s ease; }
.pin-panel-copy p a:hover, .pin-panel-copy p a:focus-visible{ color:#fff; text-decoration-color:currentColor; }
.pin-panel-copy .dcard-specs{ margin-top:1.4rem; padding-top:0; }
.pin-panel-copy .dcard-specs > span{ color:var(--accent-2); font-size:.8rem; }
.pin-panel-img{ order:2; align-self:center; display:flex; align-items:center; justify-content:center; }
.pin-panel-img img{ width:100%; height:auto; max-height:56vh; object-fit:contain; display:block; }
/* thick gradient progress bar under the cards, Patch-style */
.pin-rail{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:clamp(.9rem,2.5vw,1.8rem);
  padding-inline:max(calc((100vw - var(--maxw)) / 2 + clamp(1rem,4vw,2.5rem)), 1rem);
  padding-bottom:clamp(1rem,2vh,1.4rem);
}
.pin-rail-track{ position:relative; flex:1; height:7px; background:var(--border-2); border-radius:5px; overflow:hidden; }
.pin-rail-fill{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#0FB5A6,#D9A93F); border-radius:5px; }
.pin-rail-n{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; color:var(--muted); transition:color .3s ease; white-space:nowrap; }
.pin-rail-n.is-live{ color:var(--accent-dk); font-weight:700; }
/* pinned stage fills the viewport so the clip box sits centered on screen */
body.js-anim .pin-sec.js-pinned .pin-stage{ position:relative; height:100vh; margin-top:0; padding-bottom:0; }
@media (max-width:900px){
  .pin-card{ grid-template-columns:1fr; width:92vw; }
  .pin-panel-img{ order:-1; }
  body.js-anim .pin-sec.js-pinned .pin-track{ width:92vw; height:min(84vh,760px); }
}
/* text-only variant (#how, #why-zao): one wide column, Patch left-aligned */
.pin-panel--txt .pin-card{ grid-template-columns:1fr; align-content:start; }
.pin-panel--txt .pin-panel-copy p{ max-width:52ch; font-size:clamp(1.08rem,1.5vw,1.3rem); }
/* no JS / reduced-motion: cards simply stack down the page, all readable */
@media (prefers-reduced-motion: reduce){
  body.js-anim .pin-sec.js-pinned .pin-stage{ height:auto; }
  body.js-anim .pin-sec.js-pinned .pin-track{
    position:static; transform:none; width:auto; height:auto; overflow:visible; border-radius:0;
    display:flex; flex-direction:column; gap:1.5rem;
    padding-inline:max(calc((100vw - var(--maxw)) / 2 + clamp(1rem,4vw,2.5rem)), 1rem);
  }
  body.js-anim .pin-sec.js-pinned .pin-panel{ position:relative; inset:auto; }
  body.js-anim .pin-sec.js-pinned .pin-card{ transform:none !important; width:min(1150px,80vw); height:auto; min-height:0; border-radius:30px; }
  .pin-rail{ position:relative; padding-block:1.5rem 0; }
}
/* spans */
.sp-7{ grid-column:span 7; } .sp-6{ grid-column:span 6; } .sp-5{ grid-column:span 5; }
.sp-4{ grid-column:span 4; } .sp-8{ grid-column:span 8; } .sp-3{ grid-column:span 3; } .sp-12{ grid-column:span 12; }
/* stat tile */
.tile--stat{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.2rem; }
.tile--stat .big{
  font-family:var(--f-display); font-weight:700; font-size:clamp(2.4rem,4vw,3.4rem);
  line-height:1; color:var(--fg);
}
.tile--stat .big em{ font-style:normal; color:var(--accent); }
.tile--stat .lbl{ color:var(--muted); font-size:.92rem; }
/* accent tile */
.tile--accent{
  background:linear-gradient(160deg, rgba(34,197,94,.16), rgba(34,197,94,.05) 55%), linear-gradient(180deg,var(--card),var(--bg-2));
  border-color:rgba(34,197,94,.3);
}

/* ------------------------------------------------------------------ steps --
   (superseded by the pinned #how section; .m-step/.m-steps rules removed) -- */
/* engineering dot grid on dark surfaces (Patch-style) — deliberately visible,
   not a texture whisper: this is a named element, same family as the PCB
   silkscreen language used elsewhere. */
.dcard{
  background-image:radial-gradient(rgba(15,181,166,.28) 1.4px, transparent 1.6px);
  background-size:22px 22px;
}
.m-band--pulse{
  background:
    radial-gradient(rgba(125,232,216,.22) 1.4px, transparent 1.6px),
    radial-gradient(600px 280px at 50% -30%, rgba(15,181,166,.22), transparent 60%),
    linear-gradient(180deg, var(--deep), #082B27);
  background-size:22px 22px, auto, auto;
}
/* glowing key phrase (waitlist closing line) — bright core + colored bloom,
   pulsing gently so it reads as "lit", not just colored text */
.txt-glow{
  color:#fff;
  animation:txt-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes txt-glow-pulse{
  0%,100%{
    text-shadow:
      0 0 8px rgba(255,255,255,.9),
      0 0 22px rgba(125,232,216,.9),
      0 0 46px rgba(15,181,166,.7),
      0 0 80px rgba(217,169,63,.45);
  }
  50%{
    text-shadow:
      0 0 12px rgba(255,255,255,1),
      0 0 32px rgba(125,232,216,1),
      0 0 64px rgba(15,181,166,.85),
      0 0 110px rgba(217,169,63,.6);
  }
}
@media (prefers-reduced-motion: reduce){ .txt-glow{ animation:none; } }
/* single gradient-boxed word in the hero title (teal -> amber) */
.grad-mark{
  color:#fff; text-shadow:none;
  background:linear-gradient(100deg, var(--accent) 0%, #D9A93F 115%);
  padding:.02em .14em; border-radius:.12em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* -------------------------------------------------------------------- faq -- */
.m-faq{ margin-top:2.2rem; max-width:820px; }
.m-faq details{
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  margin-bottom:.7rem; overflow:hidden;
  transition:border-color .2s ease;
}
.m-faq details:hover{ border-color:var(--border-2); }
.m-faq details[open]{ border-color:rgba(34,197,94,.3); }
.m-faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.2rem; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-weight:600; font-size:1.02rem; color:var(--fg);
  min-height:44px;
}
.m-faq summary::-webkit-details-marker{ display:none; }
.m-faq summary svg{ width:18px; height:18px; color:var(--muted); flex:none; transition:transform .25s ease; }
.m-faq details[open] summary svg{ transform:rotate(180deg); color:var(--accent); }
.m-faq details p{ padding:0 1.2rem 1.2rem; color:var(--muted); line-height:1.7; font-size:.96rem; }
.m-faq details p strong{ color:var(--fg-2); }
.m-faq-more{ margin-top:1.4rem; color:var(--muted); }
.m-faq-more a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }

/* --------------------------------------------------------------- waitlist -- */
.m-wl{
  position:relative; overflow:hidden;
  border:1px solid rgba(34,197,94,.3); border-radius:24px;
  background:
    radial-gradient(600px 300px at 85% -20%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(180deg,var(--card),var(--bg-2));
  padding:clamp(1.8rem,5vw,3.2rem);
  box-shadow:var(--shadow-2);
}
.m-wl h2{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:700; max-width:24ch; }
.m-wl .lead{ margin-top:.7rem; color:var(--muted); max-width:36rem; line-height:1.65; }
.m-wl-form{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; max-width:560px; }
.m-wl-form .field{
  flex:1 1 260px; min-height:48px;
  background:rgba(11,17,32,.7); color:var(--fg);
  border:1px solid var(--border-2); border-radius:12px; padding:.8rem 1rem;
  font-family:var(--f-body); font-size:1rem;
}
.m-wl-form .field::placeholder{ color:var(--muted); }
.m-wl-form .field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.theme-modern .waitlist-gdpr label{ color:var(--muted); }
.theme-modern .waitlist-gdpr a{ color:var(--accent-2); }
.theme-modern .waitlist-gdpr input{ accent-color:var(--accent); }
.theme-modern .waitlist-note{ color:var(--muted); font-family:var(--f-body); font-size:.88rem; }
.m-wl-contact{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; color:var(--muted); font-size:.92rem; }
.m-wl-contact a{ color:var(--fg-2); text-decoration:underline; text-underline-offset:3px; }
.m-wl-contact a:hover{ color:var(--accent-2); }

/* ---------------------------------------------------------------- footer -- */
.m-foot{ border-top:1px solid var(--border); }
.m-foot-in{
  max-width:var(--maxw); margin-inline:auto;
  padding:2rem clamp(1rem,4vw,2.5rem);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
  color:var(--muted); font-size:.88rem;
}
.m-foot-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.m-foot-links a{ color:var(--muted); transition:color .2s; }
.m-foot-links a:hover{ color:var(--fg); }

/* consent banner on dark */
body.theme-modern .consent-banner{ background:var(--card); border-color:var(--border-2); box-shadow:var(--shadow-3); }
body.theme-modern .consent-text,body.theme-modern .consent-checkbox{ color:var(--muted); }
body.theme-modern .btn-p{ --btn-bg:var(--accent); --btn-bd:var(--accent); --btn-fg:var(--on-accent); border-radius:10px; font-family:var(--f-body); }
body.theme-modern .btn-p:hover{ --btn-bg:var(--accent-2); }
body.theme-modern .btn-o{ --btn-fg:var(--fg); --btn-bd:var(--border-2); border-radius:10px; font-family:var(--f-body); }
body.theme-modern .btn-o:hover{ --btn-bg:rgba(148,163,184,.1); --btn-fg:var(--fg); --btn-bd:var(--fg-2); }

/* GSAP entrance prep (JS adds .is-ready; without JS everything is visible) */
.theme-modern.js-anim .g-fade{ opacity:0; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width:1024px){
  .m-hero{ grid-template-columns:1fr; }
  .m-hero-visual{ order:-1; max-width:560px; }
  .sp-7,.sp-6,.sp-5,.sp-8{ grid-column:span 12; }
  .sp-4,.sp-3{ grid-column:span 6; }
}
@media (max-width:560px){
  .sp-4,.sp-3{ grid-column:span 12; }
  .m-cta .btn-m{ width:100%; }
  .m-float{ display:none; }
  /* header CTA + hamburger + lang switch no longer fit next to the logo at
     phone widths; the waitlist CTA stays reachable via on-page content
     (every page links/scrolls to its own waitlist section already). */
  .m-nav-r > a.btn-m{ display:none; }
}

/* ---------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce){
  .theme-modern.js-anim .g-fade{ opacity:1 !important; transform:none !important; }
  .m-chip .dot{ animation:none; }
}

/* ==========================================================================
   VARIANT: theme-light — Otter-style reference (tryotter.com).
   White/off-white surfaces, near-black text, ONE teal accent, generous
   whitespace, subtle shadows, friendly-professional. Applied together with
   .theme-modern (body class "theme-modern theme-light") — overrides tokens
   and the few dark-specific component treatments.
   ========================================================================== */
body.theme-modern.theme-light{
  --bg:#FFFFFF; --bg-2:#F6F8F8; --card:#FFFFFF; --card-2:#F2F5F5;
  --border:rgba(15,32,39,.10); --border-2:rgba(15,32,39,.18);
  --fg:#10201F; --fg-2:#31494A; --muted:#5B7270;
  --accent:#0D9488; --accent-2:#0FB5A6; --accent-dk:#0B7A70; --on-accent:#FFFFFF;
  --ring:rgba(13,148,136,.35); --glow:rgba(13,148,136,.10);
  --deep:#0B3B36; --on-deep:#ECFDF8;
  --red:#DC2626; --red-ink:#B91C1C; --blue:#0369A1; --blue-ink:#075985;
  --shadow-1:0 1px 2px rgba(15,32,39,.06);
  --shadow-2:0 10px 30px -12px rgba(15,32,39,.16);
  --shadow-3:0 24px 60px -20px rgba(15,32,39,.22);
  background:var(--bg); color:var(--fg); color-scheme:light;
}
body.theme-modern.theme-light::before{
  background-color:var(--bg);
  background-image:radial-gradient(800px 460px at 88% -12%, rgba(13,148,136,.06), transparent 60%);
}
body.theme-modern.theme-light::after{ opacity:.10; }

/* nav: white translucent */
.theme-light .m-nav{ background:rgba(255,255,255,.8); }
.theme-light .m-nav.is-scrolled{ background:rgba(255,255,255,.94); box-shadow:var(--shadow-1); }
.theme-light .m-links a:hover{ background:rgba(15,32,39,.06); }
.theme-light .m-links.is-glass a:hover{ background:transparent; color:var(--fg); }
.theme-light .m-lang a.on{ background:var(--fg); color:#fff; }

/* buttons: teal solid / white outline */
.theme-light .btn-ghost{ background:#fff; border-color:var(--border-2); color:var(--fg); box-shadow:var(--shadow-1); }
.theme-light .btn-ghost:hover{ border-color:var(--accent); color:var(--accent-dk); background:#fff; }

/* hero */
.theme-light .m-chip{ background:rgba(13,148,136,.08); border-color:rgba(13,148,136,.25); color:var(--accent-dk); }
.theme-light .m-hero h1 .acc{ color:var(--accent); }
.theme-light .m-hero-visual .ph{
  background:#0B1417; border-color:transparent;
  box-shadow:var(--shadow-3);
}
.theme-light .m-float{ background:rgba(255,255,255,.92); border-color:var(--border); color:var(--fg-2); }
.theme-light .m-float b{ color:var(--fg); }

/* sections alternate white / light gray like the reference */
.theme-light .m-sec#products,.theme-light .m-sec#faq{ position:relative; }
.theme-light .m-alt{ background:var(--bg-2); }
.theme-light .m-alt > .m-sec,.theme-light .m-sec{ background:transparent; }
.theme-light .m-eyebrow{ color:var(--accent-dk); }

/* tiles: white cards, subtle shadow, hover lift */
.theme-light .tile{ background:#fff; border-color:var(--border); box-shadow:var(--shadow-1); }
.theme-light .tile:hover{ border-color:rgba(13,148,136,.35); box-shadow:var(--shadow-2); }
.theme-light .tile p{ color:var(--muted); }
.theme-light .tile .specline > span{ background:var(--bg-2); border-color:var(--border); color:var(--fg-2); }
.theme-light .tile--accent{ background:linear-gradient(160deg, rgba(13,148,136,.10), rgba(13,148,136,.03) 55%), #fff; border-color:rgba(13,148,136,.28); }
.theme-light .tile--stat .big{ color:var(--fg); }
.theme-light .tile--stat .big em{ color:var(--accent); }
/* media inside cards: keep dark plate look for the black-background photos */
.theme-light .tile-img{ background:#0B1417; }
.theme-light .tile--device .tile-img{ background:#000; }


/* faq */
.theme-light .m-faq details{ background:#fff; border-color:var(--border); box-shadow:var(--shadow-1); }
.theme-light .m-faq details[open]{ border-color:rgba(13,148,136,.35); }
.theme-light .m-faq details p{ color:var(--muted); }
.theme-light .m-faq details p strong{ color:var(--fg); }
.theme-light .m-faq-more{ color:var(--muted); }
.theme-light .m-faq-more a{ color:var(--accent-dk); }

/* waitlist: deep-teal end-cap panel (Otter-style bold closing block) */
.theme-light .m-wl{
  background:
    radial-gradient(rgba(125,232,216,.2) 1.4px, transparent 1.6px),
    radial-gradient(700px 340px at 88% -20%, rgba(15,181,166,.25), transparent 60%),
    linear-gradient(180deg, var(--deep), #082B27);
  background-size:22px 22px, auto, auto;
  border-color:transparent; box-shadow:var(--shadow-3);
}
/* WebGL heat-wave canvas behind the waitlist content (built by wlwaves.js) */
.wl-waves{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.m-wl > :not(.wl-waves){ position:relative; z-index:1; }
.theme-light .m-wl h2,.theme-light .m-wl .m-eyebrow{ color:var(--on-deep); }
.theme-light .m-wl .m-eyebrow{ color:#7DE8D8; }
.theme-light .m-wl .lead{ color:rgba(236,253,248,.75); }
.theme-light .m-wl-form .field{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; }
.theme-light .m-wl-form .field::placeholder{ color:rgba(236,253,248,.55); }
.theme-light .m-wl-form .field:focus{ border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(15,181,166,.3); }
.theme-light .m-wl .waitlist-gdpr label{ color:rgba(236,253,248,.7); }
.theme-light .m-wl .waitlist-gdpr a{ color:#7DE8D8; }
.theme-light .m-wl .waitlist-note{ color:rgba(236,253,248,.6); }
.theme-light .m-wl-contact{ border-top-color:rgba(255,255,255,.15); color:rgba(236,253,248,.7); }
.theme-light .m-wl-contact a{ color:#fff; }

/* footer + consent on light */
.theme-light .m-foot{ background:var(--bg-2); }
.theme-light .m-foot-links a:hover{ color:var(--accent-dk); }
body.theme-modern.theme-light .consent-banner{ background:#fff; border-color:var(--border-2); }
body.theme-modern.theme-light .consent-text,body.theme-modern.theme-light .consent-checkbox{ color:var(--muted); }

/* ---- hero variant: full-bleed background image (generic underfloor scene).
   White gradient wash keeps the left text column AA-readable; the glowing
   coil stays visible center-right. Bottom fades into the page background. -- */
.m-hero--bg{
  display:flex; align-items:center;
  max-width:none; padding:0;
  min-height:min(88svh,820px);
  overflow:hidden; /* clip the scaled/offset background video to the hero */
}
.m-hero-bg{ position:absolute; inset:0; overflow:hidden; }
.m-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.m-hero-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 80%, var(--bg) 100%);
}
.m-hero--bg .m-hero-in{
  position:relative; z-index:1; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:calc(72px + clamp(2.5rem,7vw,5rem)) clamp(1rem,4vw,2.5rem) clamp(3rem,7vw,5rem);
}
.m-hero--bg .m-hero-copy{ max-width:640px; }
/* Title sits directly on the video: no boxes, no panels. A tight white halo
   (layered text-shadow) hugs only the letterforms, so the frame stays fully
   visible around and between the lines. */
.m-hero--bg h1{ color:var(--deep); line-height:1.08; font-size:clamp(2.9rem,5.9vw,4.9rem); }
.m-hero--bg h1 > span{
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 0 8px rgba(255,255,255,.95),
    0 0 22px rgba(255,255,255,.8),
    0 0 48px rgba(255,255,255,.5);
}
.m-hero--bg h1 .acc{ color:var(--accent-dk); }
.m-hero--bg .lead{ line-height:1.7; }
.m-hero--bg .lead > span{
  color:var(--deep); font-weight:500; background:rgba(255,255,255,.62);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:.1em .28em; border-radius:.3em;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.m-hero--bg .m-proof > span{
  background:rgba(255,255,255,.88); color:var(--fg-2);
  padding:.45rem .85rem; border-radius:999px;
  box-shadow:0 3px 12px -5px rgba(15,32,39,.25);
}
.m-hero--bg .m-chip{ background:rgba(255,255,255,.9); }
@media (max-width:760px){
  .m-hero-scrim{
    background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 80%, var(--bg) 100%);
  }
  .m-hero-bg img{ object-position:center 70%; }
  .m-hero--bg .m-proof{ color:var(--fg-2); }
}

/* hero background video: sits above the picture fallback, below the scrim.
   Hidden (poster/picture shows) for reduced-motion or if playback fails. */
.m-hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 60%; pointer-events:none;
}
@media (max-width:760px){
  .m-hero-video{ object-position:center 70%; }
}
@media (prefers-reduced-motion: reduce){ .m-hero-video{ display:none; } }

/* ---- full-width visual band: the underfloor cutaway as a breather section
   between How-it-works and FAQ. One message, hero-consistent scrim. -------- */
.m-band{ position:relative; overflow:hidden; min-height:clamp(300px,44vh,500px); display:flex; align-items:center; }
.m-band-bg{ position:absolute; inset:0; }
.m-band-bg img{ position:absolute; left:0; top:-15%; width:100%; height:130%; object-fit:cover; object-position:center 62%; }
.m-band-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.8) 34%, rgba(255,255,255,.35) 58%, rgba(255,255,255,0) 80%); }
.m-band-in{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin-inline:auto; padding:clamp(2rem,5vw,3rem) clamp(1rem,4vw,2.5rem); }
.m-band h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:700; line-height:1.1; max-width:16ch; }
.m-band h2 .acc{ color:var(--accent); }

/* slim band: only the rotating benefits, no static headline */
.m-band--slim{ min-height:clamp(120px,17vh,185px); }

/* pulse band: no photo — a Zigbee-like signal ring on a deep-teal panel;
   each outward ripple "emits" the next benefit message (sync in modern.js).
   Static fallback: both rings drawn, first message visible. */
/* light, airy version: no dark slab — the signal ring + rotating benefits sit
   on the page's own light surface, with only a faint teal halo behind the ring
   so the section breathes instead of cutting the page edge-to-edge. */
.m-band--pulse{
  min-height:clamp(230px,30vh,320px); overflow:visible;
  background:radial-gradient(460px 300px at 50% 46%, rgba(15,181,166,.08), transparent 72%);
  justify-content:center;
}
.m-band--pulse .m-band-in{
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  text-align:center; padding-block:clamp(2.2rem,5vw,3.4rem);
}
.band-ring{
  display:block; width:96px; height:96px; color:var(--accent);
  overflow:visible; /* ripples expand well past the viewBox */
  filter:drop-shadow(0 0 12px rgba(15,181,166,.35));
}
@media (max-width:760px){ .band-ring{ width:76px; height:76px; } }
.m-band--pulse .band-rota{ width:min(52ch,92vw); max-width:none; margin-inline:0; }
.m-band--pulse .band-rota-item{
  border-left:0; padding-left:0; text-align:center; color:var(--deep); font-weight:600;
  font-size:clamp(1.2rem,2.3vw,1.65rem);
}
body.js-anim .m-band--pulse .band-rota{ min-height:2.4em; }
body.js-anim .m-band--pulse .band-rota-item{ top:0; }
@media (max-width:760px){ body.js-anim .m-band--pulse .band-rota{ min-height:3.6em; } }
/* rotating benefits. Static fallback: without JS (or with reduced motion)
   only the first benefit shows, fully visible. */
.band-rota{ position:relative; max-width:44ch; }
.band-rota-kicker{
  display:block; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:.55rem;
  /* attention: a light sweep travels across the letters */
  color:transparent;
  background:linear-gradient(100deg, var(--accent-dk) 0%, var(--accent-dk) 38%, var(--accent-2) 50%, var(--accent-dk) 62%, var(--accent-dk) 100%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:kicker-shine 2.6s ease-in-out infinite;
}
.band-rota-kicker::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:.55rem; vertical-align:middle;
  background:var(--accent); box-shadow:0 0 10px var(--accent);
  animation:m-pulse 2.4s ease-in-out infinite;
}
@keyframes kicker-shine{ 0%{ background-position:130% 0; } 100%{ background-position:-130% 0; } }
@media (prefers-reduced-motion: reduce){
  .band-rota-kicker{ animation:none; background:none; color:var(--accent-dk); }
  .band-rota-kicker::before{ animation:none; }
}
.m-band--slim .m-band-in{ padding-block:clamp(.9rem,2.2vw,1.3rem); }
.band-rota-item{
  margin:0; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1.3; color:var(--fg);
  padding-left:1rem; border-left:3px solid var(--accent);
}
.band-rota-item + .band-rota-item{ display:none; }
body.js-anim .band-rota{ min-height:4em; }
@media (max-width:760px){ body.js-anim .band-rota{ min-height:5em; } }
body.js-anim .band-rota-item{
  display:block; position:absolute; left:0; right:0; top:1.65rem;
  opacity:0; will-change:transform,filter;
}
@media (max-width:760px){
  .m-band-scrim{ background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.2) 100%); }
}