/* ==========================================================================
   AdSphere — adspheredisplays.com
   Design system + components. Vanilla CSS, no build step.
   Palette per official NGS Group brand guideline (Neon Blue #00F0FF, Cool Grey 11/8/12).
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/michroma-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
/* Conthrax Semi Bold is the official display face. The desktop licence in the brand pack does not
   cover web embedding — licence the webfont from Typodermic, drop the files in assets/fonts, and
   uncomment this block. Michroma is the approved stand-in until then.
@font-face { font-family: "Conthrax"; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/conthrax-semibold.woff2") format("woff2"); }
*/

/* ---------- Tokens ---------- */
:root {
  --void: #000000;
  --ink: #0D0D0D;
  --panel: #131313;
  --raised: #1A1A1A;
  --hair: #54565B;
  --hair-a: rgba(84, 86, 91, .55);
  --hair-b: rgba(84, 86, 91, .28);
  --steel: #8A8C8F;
  --silver: #D0D0CE;
  --white: #FFFFFF;
  --neon: #00F0FF;
  --neon-300: #80F8FF;
  --neon-700: #009099;
  --neon-900: #00484D;
  --led: #62D2E8;

  --font-display: "Conthrax", "Michroma", "Rajdhani", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --w-max: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --sec: clamp(88px, 12vw, 160px);
  --sec-sm: clamp(56px, 8vw, 104px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 220ms;
  --t-med: 520ms;
  --t-slow: 900ms;
  --header-h: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--void); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--void); color: var(--silver);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--neon); color: var(--void); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -60px; left: 16px; z-index: 200; background: var(--neon); color: var(--void); padding: 10px 14px; font-weight: 600; transition: top .2s; }
.skip:focus { top: 16px; }

/* ---------- Type ---------- */
.display, .h1, .h2, .h3, .h4, .num { font-family: var(--font-display); font-weight: 400; color: var(--white); letter-spacing: -.005em; }
.h1 { font-size: clamp(2.1rem, 5.4vw, 5rem); line-height: 1.02; }
.h1.xl { font-size: clamp(2.1rem, 6.2vw, 6rem); }
.h2 { font-size: clamp(1.7rem, 3.6vw, 3.25rem); line-height: 1.08; }
.h3 { font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.2; }
.h4 { font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.3; letter-spacing: .02em; }
.num { font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 1; color: var(--neon); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--steel); line-height: 1;
}
.eyebrow.neon { color: var(--neon); }
.eyebrow .arc { width: 12px; height: 12px; flex: none; }
.eyebrow .arc path { fill: var(--neon); }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--silver); max-width: 34em; }
.body { max-width: 62ch; color: var(--silver); }
.body + .body { margin-top: 1em; }
.body.muted, .muted { color: var(--steel); }
.caption { font-size: .8125rem; color: var(--steel); letter-spacing: .01em; }
.label { font-family: var(--font-body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); font-weight: 500; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.accent { color: var(--neon); }
.white { color: var(--white); }
.measure { max-width: 62ch; }
.stack > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: 2rem; }
.title-block { display: grid; gap: 1.4rem; }
.title-block .h2 { max-width: 16em; }
.title-block .lead { margin-top: .25rem; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--w-max)); margin-inline: auto; }
.container.narrow { max-width: 1080px; }
.container.wide { max-width: 1680px; }
.section { padding-block: var(--sec); position: relative; }
.section.sm { padding-block: var(--sec-sm); }
.section.tight { padding-block: var(--sec-sm) var(--sec); }
.section.ink { background: var(--ink); }
.section.void { background: var(--void); }
.hairline-top { border-top: 1px solid var(--hair-b); }
.hairline-bottom { border-bottom: 1px solid var(--hair-b); }
.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split > *, .grid > *, .section-head > *, .hero-grid > * { min-width: 0; }
.split.even { grid-template-columns: 1fr 1fr; }
.split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.book { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.split.rev > :first-child { order: 2; }
.sticky-side { position: sticky; top: calc(var(--header-h) + 24px); }
.center { text-align: center; }
.center .body, .center .lead, .center .h2 { margin-inline: auto; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; } .mt-5 { margin-top: 4rem; } .mt-6 { margin-top: 6rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2.5rem; } .mb-5 { margin-bottom: 4rem; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.row.between { justify-content: space-between; }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.section-head .h2 { max-width: 14em; }
.section-head .aside { color: var(--silver); max-width: 44ch; }
.section-head .aside .body { max-width: none; }
.section-head.single { grid-template-columns: 1fr; }

/* LED dot-grid textures — the brand's "LED Grid Pattern", kept faint */
.dots {
  background-image: radial-gradient(circle at 1px 1px, rgba(98, 210, 232, .22) 1px, transparent 1.6px);
  background-size: 14px 14px;
}
.dots-bg { position: relative; isolation: isolate; }
.dots-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(98, 210, 232, .16) 1px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 100%);
}
.dots-bg.corner::before {
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 100% 100%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 70% at 100% 100%, #000 0%, transparent 100%);
}
.glow-line { height: 1px; background: linear-gradient(90deg, transparent, var(--neon-700), var(--neon), var(--neon-700), transparent); opacity: .7; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--t-med), border-color var(--t-med), backdrop-filter var(--t-med), height var(--t-med);
  border-bottom: 1px solid transparent;
}
.header.scrolled, .header.solid { background: rgba(0, 0, 0, .9); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom-color: var(--hair-b); height: 64px; }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; }
.brand svg, .brand img { height: 36px; width: auto; display: block; }
.header.scrolled .brand svg, .header.scrolled .brand img { height: 30px; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.nav a { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--silver); position: relative; padding: 6px 0; transition: color var(--t-fast); }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--neon); transition: right var(--t-med) var(--ease-out); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.header-cta { display: flex; align-items: center; gap: 18px; }
.burger { display: none; width: 44px; height: 44px; position: relative; align-items: center; justify-content: center; }
.burger span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--white); transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast); }
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(2) { transform: translateY(4px); }
.menu-open .burger span:nth-child(1) { transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; background: var(--void); display: grid; grid-template-columns: 1fr; align-content: center; padding: calc(var(--header-h) + 24px) var(--gutter) 48px; opacity: 0; visibility: hidden; transition: opacity var(--t-med), visibility 0s linear var(--t-med); }
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity var(--t-med), visibility 0s; }
.menu ul { display: grid; gap: 6px; }
.menu a { font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.8rem); color: var(--white); line-height: 1.2; display: inline-block; transform: translateY(20px); opacity: 0; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-med); }
.menu-open .menu a { transform: none; opacity: 1; }
.menu li:nth-child(1) a { transition-delay: 60ms; } .menu li:nth-child(2) a { transition-delay: 110ms; } .menu li:nth-child(3) a { transition-delay: 160ms; } .menu li:nth-child(4) a { transition-delay: 210ms; } .menu li:nth-child(5) a { transition-delay: 260ms; } .menu li:nth-child(6) a { transition-delay: 310ms; } .menu li:nth-child(7) a { transition-delay: 360ms; }
.menu .menu-foot { margin-top: 40px; display: grid; gap: 10px; color: var(--steel); font-size: .9rem; }
.menu .menu-foot a { font-family: var(--font-body); font-size: .9rem; color: var(--silver); transform: none; opacity: 1; display: inline-flex; align-items: center; min-height: 44px; }
.menu .menu-foot { gap: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 26px; min-height: 50px;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  border: 1px solid transparent; border-radius: 2px; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-fast);
}
.btn.primary { background: var(--neon); color: var(--void); border-color: var(--neon); }
.btn.primary:hover { box-shadow: 0 0 0 1px var(--neon), 0 0 32px rgba(0, 240, 255, .35); transform: translateY(-1px); }
.btn.ghost { border-color: rgba(208, 208, 206, .35); color: var(--white); }
.btn.ghost:hover { border-color: var(--neon); color: var(--neon); }
.btn.sm { padding: 11px 18px; min-height: 40px; font-size: .7rem; }
.btn .ico { width: 14px; height: 14px; flex: none; }
.btn .ico path { fill: currentColor; }
.tlink { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--white); position: relative; padding-bottom: 6px; }
.tlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--hair); transition: background var(--t-fast); }
.tlink .arr { width: 16px; height: 10px; transition: transform var(--t-med) var(--ease-out); }
.tlink .ico { width: 11px; height: 11px; flex: none; }
.tlink .ico path { fill: currentColor; }
.tlink .arr path { stroke: currentColor; }
.tlink:hover { color: var(--neon); }
.tlink:hover::after { background: var(--neon); }
.tlink:hover .arr { transform: translateX(6px); }
.tlink.neon { color: var(--neon); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Panels / cards ---------- */
.card { background: var(--ink); border: 1px solid var(--hair-a); border-radius: 4px; padding: clamp(22px, 2.6vw, 34px); position: relative; transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med) var(--ease-out); }
.card:hover { border-color: var(--neon-700); box-shadow: 0 0 0 1px rgba(0, 240, 255, .12), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.card.flush { padding: 0; overflow: hidden; }
.card .card-body { padding: clamp(20px, 2.2vw, 28px); }
.card .h3, .card .h4 { color: var(--white); }
.card .body { font-size: .98rem; }
.card-list { display: grid; gap: 1px; background: var(--hair-b); border: 1px solid var(--hair-b); }
.card-list > * { background: var(--ink); padding: clamp(24px, 3vw, 40px); }
.card-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-list.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kicker { font-size: .8125rem; color: var(--steel); }
.card-list .ico { width: 26px; height: 26px; }
.card-list .ico * { stroke: var(--neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spec-line { font-family: var(--font-body); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--neon); font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--hair-a); border-radius: 999px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--neon-700); border-radius: 3px; color: var(--neon); font-size: .72rem; letter-spacing: .06em; vertical-align: middle; background: rgba(0, 240, 255, .05); }

/* ---------- Media ---------- */
.frame { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--hair-b); border-radius: 4px; }
.frame.noborder { border: 0; border-radius: 0; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame .tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; }
.frame .tag.tr { left: auto; right: 16px; bottom: auto; top: 16px; }
.ar-16x9 { aspect-ratio: 16 / 9; } .ar-4x3 { aspect-ratio: 4 / 3; } .ar-3x4 { aspect-ratio: 3 / 4; } .ar-1x1 { aspect-ratio: 1; } .ar-21x9 { aspect-ratio: 21 / 9; } .ar-4x5 { aspect-ratio: 4 / 5; } .ar-2x3 { aspect-ratio: 2 / 3; } .ar-3x2 { aspect-ratio: 3 / 2; }
.lqip { background-size: cover; background-position: center; }
img.lazy { opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
img.lazy.loaded { opacity: 1; }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.parallax { will-change: transform; }
.scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .85) 100%); pointer-events: none; }
.scrim-l::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .1) 100%); pointer-events: none; }
.hud { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(0, 0, 0, .55); border: 1px solid var(--hair-a); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); border-radius: 2px; }
.hud .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: pulse 2.4s infinite; }
.hud b { color: var(--white); font-weight: 600; }
.vid-card { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--hair-b); border-radius: 4px; }
.vid-card video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform var(--t-slow) var(--ease-out); }
.vid-card:hover video { transform: scale(1.05); }
.vid-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); }
.vid-card .meta .h4 { font-size: .9rem; }
.vid-card .meta .label { color: var(--neon); }
.vid-card .meta-desc { font-size: .9rem; color: var(--silver); max-width: 44ch; margin-top: 4px; line-height: 1.45; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--void); isolation: isolate; }
.hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero .hero-media video, .hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero .hero-media picture { position: absolute; inset: 0; display: block; }
/* a video with no source paints nothing, so the still shows through until it plays */
.hero .hero-media video { background: transparent; }
.hero[data-led] .hero-media video, .hero[data-led] .hero-media .hero-still { filter: brightness(.62) saturate(.85); }
.hero .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .86) 100%); }
.hero .led { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.hero .container { position: relative; z-index: 2; padding-bottom: clamp(48px, 8vh, 96px); padding-top: calc(var(--header-h) + 40px); }
.hero .hero-text { max-width: 1240px; }
.hero .hero-text .h1 { max-width: none; text-wrap: balance; }
.hero .hero-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gutter); align-items: end; }
.hero .h1 { max-width: 11em; }
.hero .h1 .word { display: inline-block; }
.hero .h1.resolving { opacity: 0; }
.hero .lead { margin-top: 1.6rem; max-width: 36em; }
.hero .cta-row { margin-top: 2.2rem; }
.hero .hero-side { display: grid; gap: 14px; justify-items: end; text-align: right; }
.hero .scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; width: 1px; height: 56px; background: linear-gradient(180deg, transparent, var(--neon)); overflow: hidden; }
.hero .scroll-cue::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--void); animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { 0% { top: -100%; } 100% { top: 100%; } }
.hero.compact { min-height: 78svh; }
.hero.compact .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hero.still .hero-media::after { background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .5) 42%, rgba(0, 0, 0, .12) 100%), linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 40%, rgba(0, 0, 0, .88) 100%); }
.page-hero { padding-top: calc(var(--header-h) + clamp(48px, 9vw, 120px)); padding-bottom: clamp(40px, 6vw, 80px); }
.page-hero .h1 { max-width: 12em; }

/* Reveal on scroll */
.rv { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 90ms; } .rv.d2 { transition-delay: 180ms; } .rv.d3 { transition-delay: 270ms; } .rv.d4 { transition-delay: 360ms; } .rv.d5 { transition-delay: 450ms; }
/* Hero reveals do not wait for the deferred script. They run as CSS animations
   the moment the stylesheet lands, so the headline is on screen with the first
   paint instead of ~1s later on a slow connection. Everything below the fold
   still uses the observer-driven .in class. */
@keyframes rv-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* Shorter than the below-fold reveal on purpose: a first impression should not
   take most of a second to arrive, and Chrome dates LCP for a fading element to
   the end of its fade. */
.hero .rv, .page-hero .rv { opacity: 1; transform: none; transition: none; animation: rv-in 520ms var(--ease-out) backwards; }
.hero .rv.d1, .page-hero .rv.d1 { animation-delay: 70ms; }
.hero .rv.d2, .page-hero .rv.d2 { animation-delay: 140ms; }
.hero .rv.d3, .page-hero .rv.d3 { animation-delay: 210ms; }
.hero .rv.d4, .page-hero .rv.d4 { animation-delay: 280ms; }
.hero .rv.d5, .page-hero .rv.d5 { animation-delay: 350ms; }
.rv-line { display: block; overflow: hidden; }
.rv-line > span { display: block; transform: translateY(110%); transition: transform var(--t-slow) var(--ease-out); }
.in .rv-line > span, .rv-line.in > span { transform: none; }
.mask-x { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 100%); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair-a); border-bottom: 1px solid var(--hair-a); }
.stats > div { padding: clamp(28px, 4vw, 56px) clamp(16px, 2.5vw, 40px); border-right: 1px solid var(--hair-a); display: grid; gap: 14px; align-content: start; }
.stats > div:last-child { border-right: 0; }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats .num { white-space: nowrap; }
.stats .num { min-height: 1em; }
.stats .stat-l { color: var(--silver); font-size: 1rem; max-width: 22ch; }
.stats .caption { color: var(--steel); }

/* ---------- Ticker / marquee ---------- */
.ticker { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker .track { display: flex; gap: 18px; width: max-content; animation: ticker 70s linear infinite; }
.ticker .track > figure { width: clamp(180px, 20vw, 300px); aspect-ratio: 3 / 4; flex: none; position: relative; overflow: hidden; border-radius: 3px; background: var(--panel); }
.ticker .track > figure img { width: 100%; height: 100%; object-fit: cover; }
.ticker .track > figure figcaption { position: absolute; left: 12px; bottom: 10px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); opacity: 0; transition: opacity var(--t-fast); }
.ticker .track > figure:hover figcaption { opacity: 1; }
@keyframes ticker { to { transform: translateX(-50%); } }
.word-ticker { overflow: hidden; border-top: 1px solid var(--hair-b); border-bottom: 1px solid var(--hair-b); padding: 18px 0; }
.word-ticker .track { display: flex; gap: 0; width: max-content; animation: ticker 60s linear infinite; }
.word-ticker span { font-family: var(--font-display); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); padding: 0 34px; position: relative; white-space: nowrap; }
.word-ticker span::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--neon-700); transform: translateY(-50%); }

/* ---------- Steps (real sequences only) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: step; }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps > li { padding: 36px clamp(18px, 2.4vw, 36px) 36px 0; border-top: 1px solid var(--hair-a); position: relative; display: grid; gap: 14px; align-content: start; }
.steps > li::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-display); font-size: .8rem; color: var(--neon); letter-spacing: .1em; }
.steps > li::after { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--neon); transition: width 1.2s var(--ease-out); }
.steps > li.in::after { width: 100%; }
.steps .h3 { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
.steps .body { font-size: .98rem; max-width: 34ch; }

/* ---------- Feature / list ---------- */
.feat-list { display: grid; gap: 0; }
.feat-list > li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hair-b); align-items: start; }
.feat-list > li:last-child { border-bottom: 1px solid var(--hair-b); }
.feat-list .ico { width: 20px; height: 20px; margin-top: 3px; }
.feat-list .ico * { stroke: var(--neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feat-list b { display: block; color: var(--white); font-weight: 600; margin-bottom: 2px; }
.feat-list span { color: var(--silver); font-size: .98rem; }
.check-list > li { padding-left: 28px; position: relative; color: var(--silver); }
.check-list > li + li { margin-top: 10px; }
.check-list > li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 1px; background: var(--neon); }

/* ---------- Icon grid (platform features) ---------- */
.icon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair-b); border: 1px solid var(--hair-b); }
.icon-grid > div { background: var(--ink); padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; align-content: start; transition: background var(--t-med); }
.icon-grid > div:hover { background: var(--panel); }
.icon-grid .ico { width: 28px; height: 28px; }
.icon-grid .ico * { stroke: var(--steel); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t-fast); }
.icon-grid > div:hover .ico * { stroke: var(--neon); }
.icon-grid .h4 { font-size: .95rem; }
.icon-grid .body { font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--hair-a); }
.faq details { border-bottom: 1px solid var(--hair-a); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-weight: 500; color: var(--white); font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 18px; height: 18px; position: relative; flex: none; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: var(--neon); left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform var(--t-med) var(--ease-out); }
.faq summary .plus::before { width: 18px; height: 1px; }
.faq summary .plus::after { width: 1px; height: 18px; }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq details .body { padding: 0 0 24px; max-width: 70ch; color: var(--silver); }
.faq details .body p + p { margin-top: .6em; }

/* ---------- Spec table ---------- */
.table-wrap { border: 1px solid var(--hair-a); border-radius: 4px; position: relative; min-width: 0; max-width: 100%; }
.table-wrap > .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 4px; min-width: 0; max-width: 100%; }
.spec { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.spec th, .spec td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--hair-b); vertical-align: top; }
.spec thead th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); font-weight: 500; background: var(--ink); }
.spec tbody th { color: var(--silver); font-weight: 500; width: 42%; }
.spec td { color: var(--white); font-variant-numeric: tabular-nums; }
.spec td.dim { color: var(--steel); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec .flag { color: var(--neon); font-size: .75rem; margin-left: 6px; vertical-align: super; }
.unit-toggle { display: inline-flex; border: 1px solid var(--hair-a); border-radius: 3px; overflow: hidden; }
.unit-toggle button { padding: 8px 14px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.unit-toggle button[aria-pressed="true"] { background: var(--neon); color: var(--void); }

/* ---------- Pinned horizontal (configurations) ---------- */
.hscroll { position: relative; height: 300vh; }
.hscroll .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; align-content: center; gap: clamp(28px, 4vh, 56px); }
.hscroll .hscroll-head { padding-inline: var(--gutter); display: grid; gap: 12px; }
.hscroll .hscroll-head .h2 { max-width: 14em; }
.hscroll .track { display: flex; gap: clamp(16px, 2vw, 32px); padding-inline: var(--gutter); will-change: transform; }
.hscroll .panel { flex: none; width: min(82vw, 1100px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); align-items: end; }
.hscroll .panel .frame { aspect-ratio: 16 / 10; }
.hscroll .panel .cfg { display: grid; gap: 14px; align-content: end; padding-bottom: 8px; }
.hscroll .panel .cfg .h2 { font-size: clamp(1.6rem, 3vw, 2.8rem); }
.hscroll .progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; height: 1px; background: var(--hair-a); }
.hscroll .progress i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--neon); }
.hscroll .counter { position: absolute; right: var(--gutter); bottom: 44px; font-family: var(--font-display); font-size: .72rem; letter-spacing: .2em; color: var(--steel); }
.hscroll .counter b { color: var(--neon); font-weight: 400; }
.spec-strip { display: flex; flex-wrap: wrap; gap: 10px 0; border-top: 1px solid var(--hair-a); border-bottom: 1px solid var(--hair-a); }
.spec-strip span { padding: 16px clamp(16px, 2vw, 28px); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--silver); border-right: 1px solid var(--hair-b); font-variant-numeric: tabular-nums; }
.spec-strip span:last-child { border-right: 0; }
.spec-strip b { color: var(--neon); font-weight: 500; }

/* ---------- Scroll-scrubbed sequence (assembly) ---------- */
.scrub { position: relative; height: 380vh; background: var(--void); }
.scrub .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scrub canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrub .sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 25%, transparent 60%, rgba(0,0,0,.72) 100%); }
.scrub .cap, .scrub .loader, .scrub .marks { z-index: 2; }
.scrub .fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.scrub .cap { position: absolute; left: var(--gutter); bottom: clamp(48px, 10vh, 120px); max-width: 30rem; display: grid; gap: 12px; opacity: 0; transform: translateY(12px); transition: opacity 170ms ease, transform 170ms ease; pointer-events: none; }
/* the outgoing caption clears out before the incoming one arrives, so two
   captions are never legible on top of each other mid-crossfade */
.scrub .cap.on { opacity: 1; transform: none; transition: opacity 320ms ease 160ms, transform 380ms var(--ease-out) 160ms; }
.scrub .cap .h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.scrub .loader { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 16px); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); display: flex; align-items: center; gap: 12px; transition: opacity var(--t-med); }
.scrub .loader i { width: 120px; height: 1px; background: var(--hair-a); position: relative; display: block; }
.scrub .loader i::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--p, 0%); background: var(--neon); }
.scrub .loader.done { opacity: 0; }
.scrub .marks { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
.scrub .marks i { width: 1px; height: 28px; background: var(--hair-a); display: block; transition: background var(--t-fast); }
.scrub .marks i.on { background: var(--neon); }

/* ---------- Plan-view arcs (configurations) ---------- */
.plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.plan > button, .plan > div { border: 1px solid var(--hair-a); border-radius: 4px; background: var(--ink); padding: 24px; display: grid; gap: 12px; justify-items: center; text-align: center; transition: border-color var(--t-med), background var(--t-med); }
.plan > button:hover, .plan > button[aria-pressed="true"] { border-color: var(--neon-700); background: var(--panel); }
.plan svg { width: 100%; max-width: 160px; height: auto; }
.plan .h4 { font-size: .9rem; }
.plan .caption { max-width: 22ch; }

/* ---------- Anatomy hotspots ---------- */
.anatomy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.anatomy .frame { aspect-ratio: 16 / 10; }
.anatomy .hot { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--neon); background: rgba(0, 0, 0, .72); color: var(--neon); font-family: var(--font-display); font-size: .68rem; line-height: 1; display: grid; place-items: center; transform: translate(-50%, -50%); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); z-index: 3; }
.anatomy .hot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(0, 240, 255, .35); opacity: 0; }
.anatomy .hot.on::after { animation: ring 2.4s infinite; }
@keyframes ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.anatomy .hot.on, .anatomy .hot:hover { background: var(--neon); color: var(--void); transform: translate(-50%, -50%) scale(1.08); }
.anatomy ol { counter-reset: an; border-top: 1px solid var(--hair-a); }
.anatomy ol li { border-bottom: 1px solid var(--hair-a); padding: 16px 0 16px 44px; position: relative; cursor: pointer; transition: color var(--t-fast); }
.anatomy ol li::before { counter-increment: an; content: counter(an); position: absolute; left: 0; top: 17px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; font-family: var(--font-display); font-size: .65rem; color: var(--steel); transition: all var(--t-fast); }
.anatomy ol li.on::before, .anatomy ol li:hover::before { border-color: var(--neon); color: var(--neon); }
.anatomy ol li b { color: var(--white); font-weight: 600; display: block; }
.anatomy ol li span { color: var(--silver); font-size: .95rem; }
.anatomy ol li.on b { color: var(--neon); }

/* ---------- Video mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(160px, 22vw); gap: 10px; }
.mosaic .vid-card:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.mosaic .vid-card:nth-child(2) { grid-column: span 2; }
.mosaic .vid-card:nth-child(3) { grid-column: span 2; }
.mosaic .vid-card:nth-child(4) { grid-column: span 2; }
.mosaic .vid-card:nth-child(5) { grid-column: span 2; }
.mosaic .vid-card:nth-child(6) { grid-column: span 2; }

/* ---------- Audience split ---------- */
.aud { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair-b); border: 1px solid var(--hair-b); }
.aud > a { position: relative; background: var(--ink); min-height: 560px; display: grid; align-content: end; padding: clamp(28px, 4vw, 56px); overflow: hidden; isolation: isolate; }
.aud > a .bg { position: absolute; inset: 0; z-index: -1; }
.aud > a .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: scale(1.02); transition: transform 1.2s var(--ease-out), opacity var(--t-slow); }
.aud > a .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .92)); }
.aud > a:hover .bg img { transform: scale(1.06); opacity: .75; }
.aud > a .h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.aud > a .lead { font-size: 1.05rem; margin-top: 10px; }
.aud > a .check-list { margin-top: 20px; font-size: .95rem; }
.aud > a .tlink { margin-top: 28px; }

/* ---------- Dashboard mock (platform) ---------- */
.dash { min-width: 0; border: 1px solid var(--hair-a); border-radius: 6px; background: #070707; overflow: hidden; font-size: .78rem; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 240, 255, .04); }
.dash .bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--hair-b); background: #0A0A0A; }
.dash .bar .tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.dash .bar .tabs button { padding: 6px 12px; border-radius: 3px; color: var(--steel); font-size: .72rem; letter-spacing: .06em; }
.dash .bar .tabs button[aria-selected="true"] { background: var(--panel); color: var(--white); }
.dash .bar .who { color: var(--steel); display: flex; gap: 10px; align-items: center; }
.dash .bar .who .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.dash .dash-body { display: grid; grid-template-columns: 200px 1fr; min-height: 420px; }
.dash.compact .side { display: none; }
.dash.compact .dash-body { grid-template-columns: 1fr; }
.dash .side { border-right: 1px solid var(--hair-b); padding: 14px 10px; display: grid; gap: 4px; align-content: start; }
.dash .side div { padding: 8px 10px; border-radius: 3px; color: var(--steel); }
.dash .side div.on { background: var(--panel); color: var(--white); border-left: 2px solid var(--neon); }
.dash .main { padding: 16px; display: grid; gap: 14px; align-content: start; }
.dash .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.dash .kpi { border: 1px solid var(--hair-b); border-radius: 4px; padding: 12px; background: #0B0B0B; }
.dash .kpi .k { color: var(--steel); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.dash .kpi .v { font-family: var(--font-display); font-size: 1.25rem; color: var(--white); margin-top: 6px; }
.dash .kpi .v.n { color: var(--neon); }
.dash .panels { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.dash .pane { border: 1px solid var(--hair-b); border-radius: 4px; padding: 12px; background: #0B0B0B; position: relative; min-height: 200px; }
.dash .pane .t { color: var(--silver); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; display: flex; justify-content: space-between; }
.dash .pane .t span { color: var(--steel); }
.dash canvas { width: 100%; height: 100%; display: block; }
.dash .map { aspect-ratio: 5 / 4; }
.dash .sched { display: grid; gap: 6px; }
.dash .sched .rowl { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center; }
.dash .sched .rowl span { color: var(--steel); font-size: .72rem; }
.dash .sched .lane { height: 16px; position: relative; background: #101010; border-radius: 2px; overflow: hidden; }
.dash .sched .lane i { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; background: var(--neon-900); border: 1px solid var(--neon-700); }
.dash .sched .lane i.live { background: var(--neon-700); box-shadow: 0 0 12px rgba(0, 240, 255, .4); }
.dash .sched .lane i.house { background: #1a1a1a; border-color: #333; }
.dash .devices { display: grid; gap: 6px; }
.dash .devices .d { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 7px 8px; background: #0F0F0F; border-radius: 3px; color: var(--silver); align-items: center; }
.dash .devices .d .s { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px var(--neon); }
.dash .devices .d .s.warn { background: #FFB020; box-shadow: 0 0 6px #FFB020; }
.dash .devices .d small { color: var(--steel); font-variant-numeric: tabular-nums; }
.dash .demo { position: absolute; right: 10px; top: 10px; }
.dash-note { color: var(--steel); font-size: .78rem; margin-top: 12px; }

/* ---------- Flow diagram ---------- */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.flow > li { padding: 28px clamp(14px, 2vw, 28px) 28px 0; position: relative; display: grid; gap: 10px; align-content: start; }
.flow > li .h4 { font-size: .9rem; }
.flow > li .body { font-size: .92rem; }
.flow > li .node { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--neon); position: relative; background: var(--void); }
.flow > li .node::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.flow > li::before { content: ""; position: absolute; left: 12px; right: 0; top: 33px; height: 1px; background: var(--hair-a); }
.flow > li:last-child::before { display: none; }
.flow > li::after { content: ""; position: absolute; left: 12px; top: 33px; height: 1px; width: 0; background: var(--neon); transition: width 1s var(--ease-out); }
.flow > li.in::after { width: calc(100% - 12px); }
.flow > li:last-child::after { display: none; }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { padding: 10px 16px; border: 1px solid var(--hair-a); border-radius: 999px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); transition: all var(--t-fast); }
.filters button[aria-pressed="true"] { background: var(--white); color: var(--void); border-color: var(--white); }
.filters button:hover { border-color: var(--neon); }
.gal { columns: 3; column-gap: 12px; }
.gal .g { break-inside: avoid; margin-bottom: 12px; position: relative; overflow: hidden; border-radius: 3px; background: var(--panel); display: block; cursor: zoom-in; transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); }
.gal .g.hide { display: none; }
.gal .g img, .gal .g video { width: 100%; height: auto; display: block; transition: transform 1s var(--ease-out); }
.gal .g:hover img, .gal .g:hover video { transform: scale(1.04); }
.gal .g .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); opacity: 0; transition: opacity var(--t-fast); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.gal .g:hover .meta { opacity: 1; }
.gal .g .meta b { color: var(--neon); font-weight: 500; }
.gal .g .play { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .4); display: grid; place-items: center; }
.gal .g .play::after { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 48px; }
.lightbox.open { display: flex; }
.lightbox .lb-media { max-width: min(1600px, 100%); max-height: 100%; display: grid; place-items: center; }
.lightbox img, .lightbox video, .lightbox iframe { max-width: 100%; max-height: calc(100vh - 96px); width: auto; height: auto; object-fit: contain; border-radius: 3px; }
.lightbox iframe { width: min(1400px, 92vw); aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; }
.lightbox .lb-close { position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; display: grid; place-items: center; color: var(--white); }
.lightbox .lb-close::before, .lightbox .lb-close::after { content: ""; position: absolute; width: 22px; height: 1px; background: currentColor; }
.lightbox .lb-close::before { transform: rotate(45deg); } .lightbox .lb-close::after { transform: rotate(-45deg); }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; display: grid; place-items: center; color: var(--white); opacity: .7; }
.lightbox .lb-nav:hover { opacity: 1; }
.lightbox .lb-nav.prev { left: 12px; } .lightbox .lb-nav.next { right: 12px; }
.lightbox .lb-nav svg { width: 22px; height: 22px; }
.lightbox .lb-nav svg path { stroke: currentColor; stroke-width: 1.5; fill: none; }
.lightbox .lb-cap { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }

/* ---------- YouTube lite ---------- */
.yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--panel); border: 1px solid var(--hair-b); cursor: pointer; isolation: isolate; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.yt:hover img { transform: scale(1.03); }
.yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .45)); pointer-events: none; }
.yt .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease-out); }
.yt .play::after { content: ""; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; transition: border-left-color var(--t-fast); }
.yt:hover .play { background: var(--neon); border-color: var(--neon); transform: translate(-50%, -50%) scale(1.06); }
.yt:hover .play::after { border-left-color: var(--void); }
.yt .yt-meta { position: absolute; left: 20px; bottom: 18px; z-index: 2; display: grid; gap: 4px; }
.yt .yt-meta .label { color: var(--neon); }
.yt .yt-meta .h4 { font-size: 1rem; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* ---------- Forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.field input, .field select, .field textarea { width: 100%; background: var(--ink); border: 1px solid var(--hair-a); border-radius: 3px; color: var(--white); padding: 14px 14px; font: inherit; font-size: 1rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); appearance: none; -webkit-appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(0, 240, 255, .12); }
.field .err { display: none; font-size: .78rem; color: #FF8A8A; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select { border-color: #FF8A8A; }
.form-note { font-size: .8125rem; color: var(--steel); }
.contact-block { display: grid; gap: 18px; border-left: 1px solid var(--hair-a); padding-left: 24px; }
.contact-block b { display: block; color: var(--white); font-weight: 600; font-size: .85rem; letter-spacing: .04em; }
.contact-block a { color: var(--neon); }

/* ---------- ROI calculator ---------- */
.roi { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.roi .inputs { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); min-width: 0; }
.roi .results { min-width: 0; }
.roi > * { min-width: 0; }
.roi .ipanel { border: 1px solid var(--hair-a); border-radius: 4px; background: var(--ink); padding: 20px; display: grid; gap: 16px; }
.roi .ipanel .ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.roi .ipanel .ph .h4 { font-size: .82rem; }
.roi .badge { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--neon); border: 1px solid var(--neon-700); border-radius: 3px; padding: 3px 7px; }
.roi .ctl { display: grid; gap: 8px; }
.roi .ctl label { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--silver); }
.roi .ctl label output, .roi .ctl label b { color: var(--white); font-variant-numeric: tabular-nums; font-weight: 500; }
.roi .ctl .help { font-size: .74rem; color: var(--steel); line-height: 1.45; }
.roi input[type="range"] { width: 100%; accent-color: var(--neon); height: 2px; background: var(--hair); margin: 10px 0; }
.roi input[type="range"] { -webkit-appearance: none; appearance: none; }
.roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px rgba(0, 240, 255, .6); cursor: pointer; }
.roi input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--neon); border: 0; }
.roi input[type="number"], .roi select { width: 100%; background: var(--panel); border: 1px solid var(--hair-a); border-radius: 3px; color: var(--white); padding: 9px 10px; font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums; }
.roi input[type="number"]:focus, .roi select:focus { outline: 0; border-color: var(--neon); }
.roi .stepper { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: .8rem; color: var(--silver); }
.roi .stepper .sbtns { display: inline-flex; border: 1px solid var(--hair-a); border-radius: 3px; overflow: hidden; }
.roi .stepper .sbtns button { width: 32px; height: 32px; color: var(--silver); font-size: 1rem; }
.roi .stepper .sbtns button:hover { background: var(--panel); color: var(--neon); }
.roi .stepper .sbtns output { width: 40px; display: grid; place-items: center; color: var(--white); border-left: 1px solid var(--hair-a); border-right: 1px solid var(--hair-a); font-variant-numeric: tabular-nums; }
.roi .fees { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roi .fees .ctl label { font-size: .7rem; }
.roi .reset { font-size: .74rem; color: var(--steel); text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.roi .reset:hover { color: var(--neon); }
.roi .results { display: grid; gap: 16px; }
.roi .head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair-b); border: 1px solid var(--hair-a); border-radius: 4px; overflow: hidden; }
.roi .head > div { background: var(--ink); padding: 22px 20px; display: grid; gap: 8px; align-content: start; }
.roi .head .k { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.roi .head .v { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.1rem); color: var(--neon); font-variant-numeric: tabular-nums; line-height: 1.1; }
.roi .head .v.neg { color: var(--steel); }
.roi .head .s { font-size: .74rem; color: var(--silver); }
.roi .head .s.warn { color: #FFB020; }
.roi .charts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.roi .chart { border: 1px solid var(--hair-a); border-radius: 4px; background: var(--ink); padding: 16px; }
.roi .chart .t { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 10px; display: flex; justify-content: space-between; }
.roi .chart svg { width: 100%; height: auto; display: block; }
.roi .legend { display: flex; gap: 16px; font-size: .72rem; color: var(--steel); margin-top: 8px; }
.roi .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.roi .tip { position: absolute; pointer-events: none; background: #000; border: 1px solid var(--hair-a); padding: 6px 8px; font-size: .72rem; color: var(--white); border-radius: 3px; transform: translate(-50%, -120%); white-space: nowrap; display: none; }
.roi .disclaimer { border: 1px solid var(--neon-900); background: rgba(0, 240, 255, .04); border-radius: 4px; padding: 14px 16px; font-size: .8rem; color: var(--silver); }
.roi .spec td, .roi .spec th { padding: 11px 14px; font-size: .88rem; }
.roi .spec td { text-align: right; }
.roi .spec tfoot th, .roi .spec tfoot td { border-top: 1px solid var(--hair-a); color: var(--white); font-weight: 600; }
.roi .sticky-head { display: none; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--void); border-top: 1px solid var(--hair-b); overflow: hidden; }
.footer .container { position: relative; z-index: 1; padding-top: clamp(56px, 8vw, 96px); }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: var(--gutter); }
.footer .h4 { font-size: .72rem; letter-spacing: .18em; color: var(--steel); margin-bottom: 18px; }
.footer ul { display: grid; gap: 10px; }
.footer ul a { color: var(--silver); font-size: .95rem; transition: color var(--t-fast); }
.footer ul a:hover { color: var(--neon); }
.footer .tag { color: var(--silver); max-width: 26ch; margin-top: 18px; }
.footer .brand svg, .footer .brand img { height: 40px; }
.footer .tagline { font-family: var(--font-display); font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--neon); margin-top: 14px; }
.footer .legal { margin-top: clamp(40px, 6vw, 72px); padding: 24px 0 28px; border-top: 1px solid var(--hair-b); display: grid; grid-template-columns: 1fr auto; gap: 16px; font-size: .78rem; color: var(--steel); align-items: center; }
.footer .legal a { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; margin-left: 14px; }
/* Ghosted lockup under the legal line. Shown whole — the client's rule is the
   lockup is never cropped — so no bleed-off transform, and room below it. */
.footer .giant { display: block; width: min(100%, 980px); margin: clamp(16px, 2.5vw, 36px) auto 0; padding-bottom: clamp(24px, 3vw, 40px); opacity: .18; transform: none; }
.footer .giant svg, .footer .giant img { width: 100%; height: auto; display: block; }
.footer .giant path { fill: var(--silver); }
.footer .giant .ad { fill: var(--neon); }
.footer .glow-line { position: absolute; left: 0; right: 0; top: 0; }

/* ---------- Custom cursor ---------- */
@media (pointer: fine) {
  .cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; mix-blend-mode: difference; }
  .cursor .c-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); transform: translate(-50%, -50%); box-shadow: 0 0 8px var(--neon); }
  .cursor .c-ring { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0, 240, 255, .7); transform: translate(-50%, -50%) scale(1); transition: transform var(--t-med) var(--ease-out), background var(--t-med), opacity var(--t-fast); }
  .cursor.hover .c-ring { transform: translate(-50%, -50%) scale(1.7); background: rgba(0, 240, 255, .08); }
  .cursor.hide { opacity: 0; }
}

/* ---------- Page transition / boot ---------- */
.veil { position: fixed; inset: 0; z-index: 250; background: var(--void); pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-in-out); }
.veil.on { opacity: 1; }

/* ---------- Print (media kit) ---------- */
@media print {
  .header, .footer .giant, .menu, .cursor, .veil, .no-print { display: none !important; }
  body { background: #fff; color: #111; }
  .section { padding-block: 24px; }
  .h1, .h2, .h3, .h4, .display { color: #000; }
  .body, .lead, .caption, .label, .eyebrow { color: #333 !important; }
  .accent, .num, .spec .flag, .chip { color: #009099 !important; }
  .spec td, .spec tbody th { color: #111; border-color: #ccc; }
  .spec thead th { background: #f2f2f2; color: #333; }
  .table-wrap, .card { border-color: #ccc; }
  .frame, .yt, .dots-bg::before { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer .cols > :last-child { grid-column: 1 / -1; }
  .roi { grid-template-columns: 340px 1fr; }
}
@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header-cta .btn { display: none; }
  .hero .hero-grid, .hero.compact .hero-grid { grid-template-columns: 1fr; }
  .hero .hero-side { justify-items: start; text-align: left; }
  .split, .split.even, .split.rev, .split.book, .anatomy { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  /* a sticky column only makes sense beside something; once the layout stacks,
     it would pin the heading and let the images scroll over it */
  .sticky-side { position: static; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, 30vw); }
  .mosaic .vid-card:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .roi { grid-template-columns: 1fr; }
  .roi .inputs { position: static; }
  .roi .charts { grid-template-columns: 1fr; }
  .gal { columns: 2; }
  .dash .dash-body { grid-template-columns: 1fr; }
  .dash .side { display: none; }
  .hscroll .panel { width: 88vw; }
  .aud > a { min-height: 460px; }
}
@media (max-width: 800px) {
  :root { --header-h: 64px; }
  .hscroll { height: auto; }
  .hscroll .sticky { position: static; height: auto; overflow: visible; display: block; }
  .hscroll .hscroll-head { padding-block: var(--sec) 32px; }
  .hscroll .track { flex-direction: column; transform: none !important; gap: 48px; padding-inline: 0; }
  .hscroll .panel { width: 100%; grid-template-columns: 1fr; }
  .hscroll .progress, .hscroll .counter { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats, .stats.two { grid-template-columns: 1fr; }
  .stats > div { border-right: 0; border-bottom: 1px solid var(--hair-a); }
  .stats > div:last-child { border-bottom: 0; }
  .steps, .steps.four, .flow { grid-template-columns: 1fr; }
  .flow > li::before, .flow > li::after { display: none; }
  .aud { grid-template-columns: 1fr; }
  .plan { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .footer .cols > :first-child { grid-column: 1 / -1; }
  .footer .legal { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(150px, 40vw); }
  .mosaic .vid-card:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .icon-grid { grid-template-columns: 1fr; }
  .card-list.two, .card-list.three { grid-template-columns: 1fr; }
  .dash .dash-body { min-width: 0; }
  .dash .main { min-width: 0; }
  .scrub { height: 300vh; }
  .scrub .cap { right: var(--gutter); bottom: 32px; }
  .scrub .marks { display: none; }
  .gal { columns: 1; }
  .anatomy .frame { aspect-ratio: 4 / 5; }
  .anatomy .hot { left: var(--xm, var(--x)); }
  .lightbox { padding: 12px; }
  .roi .head { grid-template-columns: 1fr; }
  .roi .fees { grid-template-columns: 1fr; }
  .spec-strip span { border-right: 0; border-bottom: 1px solid var(--hair-b); width: 100%; padding: 12px 0; }
  .hero .container { padding-bottom: 72px; }
  .yt .play { width: 68px; height: 68px; }
  .dash .kpis { grid-template-columns: repeat(2, 1fr); }
  .dash .panels { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .rv-line > span { transform: none; }
  .hero .scroll-cue { display: none; }
  .ticker .track, .word-ticker .track { animation: none; }
  .cursor { display: none; }
}

/* ---------- Modular explainer (any arc) ---------- */
.modular { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.modular .stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.modular .plan-svg { width: 100%; height: auto; }
.modular .plan-svg .q { fill: rgba(0, 240, 255, .10); stroke: var(--neon); stroke-width: 1.5; opacity: 0; transform: scale(.86); transform-origin: 160px 160px; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.modular .plan-svg .q.on { opacity: 1; transform: none; }
.modular .plan-svg .ghost { fill: none; stroke: var(--hair); stroke-width: 1; stroke-dasharray: 3 4; }
.modular .plan-svg .band { fill: none; stroke: var(--neon); stroke-width: 5; stroke-linecap: butt; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 6px rgba(0, 240, 255, .6)); }
.modular .plan-svg .band.on { opacity: 1; }
.modular .plan-svg .lbl { font-family: var(--font-display); font-size: 26px; fill: var(--white); }
.modular .plan-svg .sub { font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; fill: var(--steel); }
.modular .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.modular .chips button { padding: 9px 14px; border: 1px solid var(--hair-a); border-radius: 3px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.modular .chips button[aria-pressed="true"] { background: var(--neon); color: var(--void); border-color: var(--neon); }
.modular .chips button:hover { border-color: var(--neon); }
.modular .lines { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modular .line { border: 1px solid var(--hair-a); border-radius: 4px; background: var(--ink); padding: 16px 14px 14px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.modular .line svg { width: 100%; max-width: 110px; height: auto; }
.modular .line .h4 { font-size: .74rem; }
.modular .line .caption { font-size: .72rem; }
.modular .elev .steel { fill: #151515; stroke: #2a2a2a; }
.modular .elev .led { fill: var(--neon); opacity: .9; }
.modular .elev .shelf { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; }
.modular .elev .halo { stroke: #fff; stroke-width: 1.5; opacity: .8; }
.modular .placement { margin-top: 14px; min-height: 2.6em; color: var(--silver); font-size: .95rem; }
.modular .placement b { color: var(--white); font-weight: 600; }
.plan270 { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, #151515, #0a0a0a 70%); }
.plan270 svg { width: min(70%, 420px); height: auto; }

/* ---------- Input adornment ---------- */
.roi .money { position: relative; }
.roi .money::before { content: "$"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--steel); font-size: .9rem; pointer-events: none; }
.roi .money input { padding-left: 22px; }

/* ---------- Dashboard app panes ---------- */
.dash .side div { cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.dash .side div:hover { color: var(--white); background: #101010; }
.dash .appr { display: grid; gap: 6px; }
.dash .appr .a { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: #0F0F0F; border-radius: 3px; }
.dash .appr .a small { color: var(--steel); display: block; }
.dash .appr .a .acts { display: flex; gap: 6px; }
.dash .appr .a button { padding: 5px 9px; border: 1px solid var(--hair-a); border-radius: 3px; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--silver); }
.dash .appr .a button.ok { border-color: var(--neon-700); color: var(--neon); }
.dash .appr .a.approved { opacity: .55; }
.dash .appr .a.approved .acts { display: none; }
.dash .appr .a.approved::after { content: "Approved"; color: var(--neon); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.dash .appr .a.declined { opacity: .45; }
.dash .appr .a.declined .acts { display: none; }
.dash .appr .a.declined::after { content: "Declined"; color: var(--steel); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.dash .cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash .cgrid .c { aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; position: relative; background: #111; }
.dash .cgrid .c img { width: 100%; height: 100%; object-fit: cover; }
.dash .cgrid .c span { position: absolute; left: 6px; bottom: 5px; font-size: .62rem; letter-spacing: .06em; color: var(--white); background: rgba(0, 0, 0, .55); padding: 2px 6px; border-radius: 2px; }
.dash .rows { display: grid; gap: 6px; }
.dash .rows .r { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 7px 8px; background: #0F0F0F; border-radius: 3px; color: var(--silver); align-items: center; }
.dash .rows .r small { color: var(--steel); font-variant-numeric: tabular-nums; }
.dash .toggles { display: grid; gap: 8px; }
.dash .toggles label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; background: #0F0F0F; border-radius: 3px; color: var(--silver); cursor: pointer; }
.dash .toggles i { width: 30px; height: 16px; border-radius: 999px; background: #222; position: relative; transition: background var(--t-fast); flex: none; }
.dash .toggles i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #666; transition: transform var(--t-fast), background var(--t-fast); }
.dash .toggles input { display: none; }
.dash .toggles input:checked + i { background: var(--neon-900); }
.dash .toggles input:checked + i::after { transform: translateX(14px); background: var(--neon); }
@media (max-width: 1024px) { .modular { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .modular .stage { grid-template-columns: 1fr; } .dash .cgrid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Legal documents ---------- */
.legal-doc { max-width: 72ch; }
.legal-doc .lead { margin-bottom: 2.5rem; }
.legal-doc .h3 { margin-top: 2.75rem; margin-bottom: .85rem; color: var(--white); }
.legal-doc .h3:first-of-type { margin-top: 0; }
.legal-doc .body + .body { margin-top: .9rem; }
.legal-doc .check-list { margin: 1rem 0 0; }
.legal-doc .check-list li { line-height: 1.6; }
.legal-doc a { text-decoration: underline; text-underline-offset: 3px; }
.legal-note { border: 1px solid var(--neon-900); background: rgba(0, 240, 255, .04); border-radius: 4px; padding: 16px 18px; }
.legal-note .caption { color: var(--silver); line-height: 1.6; }

/* ---------- Form: honeypot, optional flag, status ---------- */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field label .opt { color: var(--steel); text-transform: none; letter-spacing: 0; font-size: .72rem; margin-left: 6px; }
.form-status { font-size: .9rem; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--hair-a); color: var(--silver); margin-top: 4px; }
.form-status.ok { border-color: var(--neon-700); background: rgba(0, 240, 255, .06); color: var(--neon-300); }
.form-status.bad { border-color: #7a3b3b; background: rgba(255, 138, 138, .06); color: #FFB4B4; }

/* ==========================================================================
   MOBILE PARITY — the site should read as deliberately on a phone as on a desk
   ========================================================================== */
@media (max-width: 800px) {
  :root { --gutter: 20px; --sec: clamp(64px, 11vw, 96px); --sec-sm: clamp(44px, 8vw, 64px); }

  /* Type: keep hierarchy without the desktop scale crushing the screen */
  body { font-size: 1rem; }
  .h1 { font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1.06; }
  .h1.xl { font-size: clamp(2.15rem, 10vw, 3.2rem); }
  .h2 { font-size: clamp(1.5rem, 6.6vw, 2.1rem); }
  .h3 { font-size: clamp(1.1rem, 4.6vw, 1.4rem); }
  .lead { font-size: 1.02rem; line-height: 1.55; }
  .num { font-size: clamp(2.6rem, 15vw, 4rem); }
  .eyebrow { font-size: .62rem; letter-spacing: .18em; }

  /* Touch targets */
  .btn { min-height: 52px; padding: 16px 24px; width: 100%; justify-content: center; }
  .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-row .tlink { justify-content: center; padding: 14px 0 10px; }
  .btn.sm { width: auto; }
  .filters button, .modular .chips button, .unit-toggle button, .roi .opts button { min-height: 44px; }
  .faq summary { padding: 20px 0; min-height: 56px; }
  .menu a { padding: 6px 0; }

  /* Hero: don't let a full-height hero swallow a small screen */
  .hero { min-height: 88svh; }
  .hero.compact, .hero.still { min-height: 78svh; }
  .hero .container { padding-bottom: 56px; }
  .hero .hero-side { margin-top: 24px; }

  /* Media: taller crops read better in portrait */
  .frame.ar-21x9 { aspect-ratio: 16 / 10; }
  .aud > a { min-height: 380px; }
  .ticker .track > figure { width: 210px; }

  /* Section heads stack with less air */
  .section-head { margin-bottom: 32px; gap: 16px; }
  .stack-lg > * + * { margin-top: 1.4rem; }

  /* Steps and flow: number + rule reads as a list, not a broken grid */
  .steps > li { padding: 22px 0; }
  .steps > li.in::after { width: 100%; }
  .flow > li { padding: 20px 0; border-top: 1px solid var(--hair-b); }
  .flow > li .node { display: none; }

  /* Spec + data tables: let them scroll, and shrink to fit more columns */
  .spec { min-width: 430px; font-size: .84rem; }
  .spec th, .spec td { padding: 11px 10px; }
  .spec th { white-space: nowrap; }
  /* the hint sits above the table, never on top of the header row */
  .table-wrap { margin-top: 26px; }
  .table-wrap::after { content: "Scroll \2192"; position: absolute; right: 0; top: -22px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); pointer-events: none; }

  /* Modular explainer: plan view above, lines side by side beneath */
  .modular .stage { gap: 24px; }
  .modular .plan-svg { max-width: 300px; margin-inline: auto; display: block; }
  .modular .chips { justify-content: center; }
  .modular .chips button { flex: 1 1 auto; min-width: 46%; }
  .modular .placement { text-align: center; }
  .modular .lines { grid-template-columns: 1fr 1fr; }

  /* Dashboard: it's an illustration — keep it legible, not squeezed */
  .dash { font-size: .72rem; }
  .dash .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dash .kpi .v { font-size: 1.05rem; }
  .dash .bar { padding: 10px 12px; }
  .dash .bar .who { font-size: .62rem; }
  .dash .main { padding: 12px; gap: 12px; }
  .dash .pane { padding: 10px; min-height: 0; }
  .dash .sched .rowl { grid-template-columns: 46px 1fr; }
  .dash .rows .r, .dash .devices .d { grid-template-columns: 1fr auto; gap: 6px; font-size: .74rem; }
  .dash .rows .r small:first-of-type { grid-column: 1; }
  .dash .appr .a { grid-template-columns: 1fr; gap: 8px; }
  .dash .appr .a .acts { justify-content: flex-start; }
  .dash .cgrid { gap: 6px; }

  /* Revenue model: full-width controls, readable figures */
  .roi { gap: 20px; }
  .roi .head > div { padding: 18px 16px; }
  .roi .head .v { font-size: 1.7rem; }
  .roi .fees { grid-template-columns: 1fr 1fr; gap: 10px; }
  .roi .stepper { grid-template-columns: 1fr auto; }
  .roi .stepper .sbtns button { width: 40px; height: 40px; }
  .roi input[type="number"], .roi select { padding: 12px 10px; font-size: 16px; }  /* 16px stops iOS zoom-on-focus */
  .roi .money input { padding-left: 24px; }
  .roi input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .roi .chart { padding: 12px; }

  /* Forms: 16px inputs so iOS doesn't zoom */
  .field input, .field select, .field textarea { font-size: 16px; padding: 14px 12px; }
  .contact-block { border-left: 0; border-top: 1px solid var(--hair-a); padding-left: 0; padding-top: 24px; margin-top: 8px; }

  /* Anatomy: list first is easier to read than tiny hotspots */
  .anatomy { gap: 24px; }
  .anatomy ol li { padding: 14px 0 14px 40px; }

  /* Footer */
  .footer .cols { gap: 28px; }
  .footer .giant { opacity: .2; }
  .footer .legal { gap: 12px; font-size: .74rem; }
  .footer .legal a { margin-left: 0; margin-right: 14px; }

  /* Gallery lightbox controls need thumb room */
  .lightbox .lb-nav { width: 48px; height: 48px; }
  .lightbox .lb-close { top: 8px; right: 10px; }
  /* captions wrap instead of running off the side of a phone */
  .lightbox .lb-cap { white-space: normal; text-align: center; max-width: calc(100vw - 40px); line-height: 1.5; bottom: 12px; }
  .lightbox img, .lightbox video { max-height: calc(100vh - 120px); }
}

@media (max-width: 480px) {
  .modular .lines { grid-template-columns: 1fr; }
  .roi .fees { grid-template-columns: 1fr; }
  .dash .kpis { grid-template-columns: 1fr 1fr; }
  .spec-strip span { font-size: .72rem; }
  .ticker .track > figure { width: 180px; }
}

/* Portrait-photo pairs stay side by side from a small tablet up; a phone stacks them */
@media (min-width: 600px) and (max-width: 800px) {
  .grid-2:has(> .frame.ar-3x4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet: two columns rather than one, so the middle sizes don't look empty */
@media (min-width: 801px) and (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-list.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer .cols > :first-child { grid-column: 1 / -1; }
}

/* ---------- Touch-target and legibility corrections (mobile) ---------- */
@media (max-width: 800px) {
  /* Range sliders: the native track is ~2px tall and impossible to grab.
     Pad the control so the thumb has a real hit area. */
  .roi input[type="range"] { height: 44px; padding: 21px 0; margin: 0; background: transparent; }
  .roi input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--hair); border-radius: 2px; }
  .roi input[type="range"]::-moz-range-track { height: 2px; background: var(--hair); border-radius: 2px; }
  .roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -10px; }

  /* Footer + nav links need thumb room */
  .footer ul a, .footer ul li > span, .footer .legal a { display: inline-block; padding: 9px 0; }
  .footer ul { gap: 2px; }
  .brand { padding: 6px 0; }
  .brand svg, .brand img { height: 34px; }

  /* Text links that act as buttons */
  .tlink { min-height: 44px; align-items: center; }
  .roi .reset { min-height: 44px; display: inline-flex; align-items: center; }

  /* Anatomy hotspots: bigger, and easier to hit */
  .anatomy .hot { width: 38px; height: 38px; font-size: .74rem; }

  /* Small labels that dropped under 11px */
  .roi .badge { font-size: .72rem; padding: 5px 8px; }
  .dash .kpi .k, .dash .pane .t, .dash .pane .t span { font-size: .72rem; }
  .caption { font-size: .8rem; }
}

/* Inline links inside prose stay inline, but get a slightly larger hit box */
@media (pointer: coarse) {
  .body a, .legal-doc a, .caption a { padding: 2px 0; }
}

/* ---- mobile: legibility + hit-area corrections (audit pass) -------------- */
@media (max-width: 800px) {
  /* nothing under 11px on a phone */
  .roi .head .k,
  .roi .chart .t,
  .roi .chart .t span,
  .dash .sched .rowl span { font-size: .72rem; }

  /* standalone links get a real 44px target; links inside a sentence are
     exempt under WCAG 2.5.8 and are left alone so prose does not reflow */
  .contact-block a,
  p.caption > a.accent:first-child:last-child,
  p.body > a.accent:first-child:last-child { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Videos whose poster is deferred: hold the frame so nothing jumps when it lands */
/* A free-standing lazy video holds its own aspect box until the poster lands.
   Inside a sized container (.frame, .vid-card) it fills the box instead. */
video.vlazy { background: #0A0A0A; display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 16 / 9); }
.frame video.vlazy, .vid-card video.vlazy { height: 100%; aspect-ratio: auto; object-fit: cover; }


/* ---------- Coming soon (features held back until they are paid for) ---------- */
.pill.soon { color: var(--neon); border-color: var(--neon-700); background: rgba(0, 240, 255, .06); font-size: .7rem; padding: 4px 9px; vertical-align: middle; margin-left: 10px; }
.pill.soon.lg { font-size: .74rem; padding: 10px 18px; margin-left: 0; }
.eyebrow .pill.soon { margin-left: 12px; letter-spacing: .1em; }
.h1 + .pill.soon, .h2 + .pill.soon { margin-left: 0; }
/* a button-shaped label that is not a link: reads as inert, no hover, no pointer */
.btn.off { opacity: .55; cursor: default; pointer-events: none; border-style: dashed; }
.btn.off .pill.soon { margin-left: 8px; }
.tlink.soon-link { cursor: default; color: var(--steel); }
.tlink.soon-link::after { display: none; }
.tlink.soon-link .pill.soon { margin-left: 8px; }

/* ---------- Floating product art -------------------------------------------
   A studio render whose own backdrop dissolves into the page: two nested masks
   (horizontal on the wrapper, vertical on the image) keep the unit fully opaque
   and fade only the empty studio around it. No box, no border. */
.float-art { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.float-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 110px 34px var(--void); }
.float-art img { display: block; width: 100%; height: auto; background: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%); }

/* ---------- Home: the hardware hero ----------------------------------------- */
.hw-hero { position: relative; overflow: hidden; background: var(--void); padding-block: clamp(40px, 6vw, 96px); min-height: min(92vh, 980px); display: grid; align-items: center; }
.hw-glow { position: absolute; z-index: 0; width: min(70vw, 900px); aspect-ratio: 1; right: -8vw; top: 50%; transform: translateY(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(0, 240, 255, .16) 0%, rgba(0, 240, 255, .06) 38%, transparent 66%); filter: blur(24px); }
.hw-ghost { position: absolute; z-index: 0; right: -1.5vw; top: 50%; transform: translateY(-52%); pointer-events: none; user-select: none;
  font-family: var(--font-display); font-size: clamp(180px, 30vw, 460px); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .075); }
.hw-hero .container { position: relative; z-index: 1; }
.hw-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: center; }
.hw-copy { position: relative; z-index: 2; max-width: 36rem; display: grid; gap: 22px; }
.hw-copy .h1 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1.02; }
/* the cap keeps the tower under ~88vh tall: width = height × 1792/2400 */
.hw-art { position: relative; z-index: 1; margin-left: -6%; justify-self: center; max-width: min(100%, 66vh, 672px); }
.hw-specs { list-style: none; margin: 10px 0 0; padding: 22px 0 0; border-top: 1px solid var(--hair-a); display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 18px; }
.hw-specs b { display: block; font-family: var(--font-display); font-weight: 400; color: var(--white); font-size: .86rem; letter-spacing: -.01em; white-space: nowrap; }
.hw-specs span { display: block; margin-top: 4px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
@media (max-width: 1024px) {
  .hw-hero { min-height: 0; }
  .hw-grid { grid-template-columns: 1fr; }
  .hw-copy { max-width: none; }
  .hw-art { margin: 8px auto 0; max-width: min(100%, 520px); }
  .hw-glow { width: 120vw; right: -10vw; top: auto; bottom: -20vw; transform: none; }
  .hw-ghost { font-size: clamp(140px, 44vw, 300px); right: -4vw; top: auto; bottom: 0; transform: translateY(18%); }
  .hw-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Four quadrants, four suppliers ---------------------------------- */
.fourway .fw-grid { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 12fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.fourway .fw-art { max-width: min(100%, 560px); }
.fourway .fw-art-wrap { position: relative; }
.fourway .fw-art-wrap::before { content: ""; position: absolute; inset: 10% -10%; border-radius: 50%; background: radial-gradient(circle, rgba(70, 64, 60, .32) 0%, rgba(40, 38, 40, .16) 45%, transparent 70%); filter: blur(30px); pointer-events: none; }
.fourway .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 420px; }
.fourway .fw-plan { margin: 0; display: grid; gap: 12px; justify-items: center; }
.fourway .fw-plan svg { width: 100%; max-width: 168px; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(0, 240, 255, .18)); }
.fourway .fw-plan figcaption { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); text-align: center; line-height: 1.5; max-width: 18ch; }
@media (max-width: 1024px) {
  .fourway .fw-grid { grid-template-columns: 1fr; }
  .fourway .fw-art-wrap { order: 2; }
  .fourway .fw-art { max-width: min(100%, 520px); }
  .fourway .fw-copy { order: 1; }
}