/* =====================================================================
   ASTIRON EAGLE v5 — Complete site, Scout-tier domain canvas
   ===================================================================== */

:root {
  --bg:          #0b0b0e;
  --surface:     #171921;
  --border:      rgb(66, 68, 83);
  --border-2:    rgb(40, 42, 56);
  --plus:        rgb(183, 185, 197);
  --fg:          #ffffff;
  --fg-muted:    rgb(183, 185, 197);
  --fg-dim:      rgb(120, 124, 138);
  --accent:      rgb(20, 205, 156);
  --red:         #ff5a4d;
  --amber:       #f5b847;

  --display:     'Sora', system-ui, sans-serif;
  --body:        'Sora', system-ui, sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, monospace;

  --gutter:      4.44vw;
  --header-h:    72px;
}
@media (max-width: 939px) { :root { --gutter: 5vw; } }
@media (max-width: 560px) { :root { --gutter: 20px; --header-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 400;
}
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }

/* ==================== LINES OVERLAY ==================== */
.lines { position: absolute; inset: 0; pointer-events: none; --left: 0; --right: 0; }
.lines.offset { --left: 2.222vw; --right: 2.222vw; }
.line { position: absolute; background: var(--border-2); }
.line-v { width: 1px; top: 0; bottom: 0; }
.line-h { height: 1px; left: 0; right: 0; }
.line.right { right: var(--right); }
.line.left  { left: var(--left); }
.line.top   { top: 0; }
.line.bottom{ bottom: 0; }
.plus { position: absolute; width: 11px; height: 11px; }
.plus span { position: absolute; background: var(--plus); }
.plus span:nth-child(1) { width: 11px; height: 1px; top: 5px; left: 0; }
.plus span:nth-child(2) { width: 1px; height: 11px; left: 5px; top: 0; }
.plus.topLeft     { top: -5px;    left:  calc(var(--left) - 5px); }
.plus.topRight    { top: -5px;    right: calc(var(--right) - 5px); }
.plus.bottomLeft  { bottom: -5px; left:  calc(var(--left) - 5px); }
.plus.bottomRight { bottom: -5px; right: calc(var(--right) - 5px); }
.plus.pre-anim span { clip-path: inset(50% 50% 50% 50%); transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.plus.clip-none span { clip-path: inset(0 0 0 0); }

/* ==================== PIXEL GRID ==================== */
.pixel-grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(8, 1fr);
  pointer-events: none; overflow: hidden;
}
.pixel { background: var(--bg); transition: opacity 0.45s ease; }
.pixel-grid.dissolved .pixel { opacity: 0; }

/* ==================== TYPE ==================== */
.global-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.018em;
  line-height: 1.02;
  color: var(--fg);
}
h1 { font-size: clamp(44px, 5.4vw, 84px); letter-spacing: -0.025em; }
h2 { font-size: clamp(32px, 3.6vw, 56px); }
h3 { font-size: clamp(22px, 2.4vw, 32px); }
h4 { font-size: clamp(18px, 1.5vw, 22px); }
p { margin: 0; }
.body-md { font-size: 17px; line-height: 1.55; color: var(--fg-muted); font-weight: 300; }
.body-lg { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--fg); font-weight: 300; max-width: 720px; }

/* ==================== NAV ==================== */
.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(11, 11, 14, 0);
  transition: background-color 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav-bar.scrolled {
  background: rgba(11, 11, 14, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border-2);
}
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--fg);
}
.logo .mark {
  width: 28px; height: 28px;
  object-fit: contain;
  display: block;
  filter: brightness(1.05);
}
.nav-bar ul {
  display: flex; align-items: center; gap: 36px;
  list-style: none; margin: 0; padding: 0;
}
.nav-bar ul a {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-muted); transition: color 0.2s ease;
}
.nav-bar ul a:hover { color: var(--accent); }
.menu-cta {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg); border: 1px solid var(--border);
  padding: 10px 18px; border-radius: 100px;
  transition: border-color 0.2s, color 0.2s;
}
.menu-cta:hover { border-color: var(--accent); color: var(--accent); }

/* ---- mobile menu toggle (hidden on desktop) ---- */
.nav-burger { display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px; margin-left: 14px; flex: none;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.03); cursor: pointer; }
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--fg);
  transition: transform .25s ease, opacity .2s ease; }
.nav-bar.nav-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-bar.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-bar.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 939px) {
  .menu-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-bar ul {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 99;
    background: rgba(11,11,14,0.97);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-2);
    padding: 4px 5vw 22px;
    transform: translateY(-14px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s;
  }
  .nav-bar.nav-open ul {
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav-bar ul a { display: block; padding: 15px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
  .nav-bar ul .nav-cta-item { display: block; margin-top: 14px; }
  .nav-bar ul .nav-cta-item a { border: none; padding: 0; }
  .nav-bar ul .nav-cta-item .button { display: flex; justify-content: center; width: 100%; }
}
@media (min-width: 940px) { .nav-cta-item { display: none; } }
@media (max-width: 560px) {
  .logo { font-size: 11px; letter-spacing: 0.16em; gap: 8px; }
  .logo .mark { width: 22px; height: 22px; }
  .nav-bar ul { padding-left: 20px; padding-right: 20px; }
}

/* ==================== BUTTON ==================== */
.button {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 12.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 100px; padding: 14px 22px;
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.button.primary { background: var(--fg); color: var(--bg); }
.button.primary:hover { background: var(--accent); transform: translateY(-1px); }
.button .btn-arrow { width: 18px; height: 18px; display: grid; place-items: center; transition: transform 0.25s; }
.button:hover .btn-arrow { transform: translateX(4px); }

/* ==================== HERO (full-bleed video, text overlaid) ==================== */
.page-header {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  max-height: 1100px;
  padding: calc(var(--header-h) + 64px) var(--gutter) 56px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: var(--bg);
}
@media (max-width: 939px) { .page-header { padding: calc(var(--header-h) + 40px) var(--gutter) 40px; min-height: calc(100svh - var(--header-h)); } }
@media (max-width: 560px) { .page-header { padding: calc(var(--header-h) + 24px) var(--gutter) 32px; } }

/* Video sits behind everything, starting BELOW the fixed nav so it never
   collides with the header strip. */
.hero-bg {
  position: absolute;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
}
.hero-bg .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0;
  filter: grayscale(100%) contrast(1.05) brightness(0.55);
  transition: opacity 1.2s ease 0.2s;
  pointer-events: none;
}
.hero-bg .hero-video.loaded { opacity: 1; }
/* Legibility scrim: stronger at top (under nav) + at bottom (under text) */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,14,0.85) 0%, rgba(11,11,14,0.25) 30%, rgba(11,11,14,0.4) 60%, rgba(11,11,14,0.92) 100%),
    radial-gradient(ellipse at 20% 90%, rgba(11,11,14,0.6) 0%, transparent 60%);
  pointer-events: none;
}
.hero-bg .render { position: absolute; inset: 0; }   /* SVG fallback covers full area */

/* Text overlay sits above the video */
.block-text { position: relative; z-index: 2; }
.block-text.split-header {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end;
}
@media (max-width: 939px) {
  .block-text.split-header { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}
.block-text-col-l h1 { max-width: 18ch; color: var(--fg); }
.block-text-col-l .global-label {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 10px;
}
.block-text-col-l .global-label .bullet { width: 6px; height: 6px; background: var(--accent); }
@media (max-width: 560px) {
  .block-text-col-l .global-label { font-size: 9.5px; letter-spacing: 0.16em; margin-top: 16px; }
}

/* Backwards-compat: the old .media-wrapper class still wraps the video, but
   it's now a fixed full-bleed container (no border / no min-height needed) */
.page-header .media-wrapper {
  position: absolute; inset: 0;
  z-index: 0; min-height: 0;
  border: 0;
}
/* Container for swappable platform videos in INTRODUCING EAGLE.
   Stays in normal flow so it doesn't escape its parent. */
.video-wrapper.cover.media {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; background: var(--surface); border: 0;
}
.video-wrapper.cover.media .render { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--bg);
  z-index: 0;
  opacity: 0;
  filter: grayscale(100%) contrast(1.05) brightness(0.55);
  transition: opacity 1.2s ease 0.2s;
  pointer-events: none;
}
.hero-video.loaded { opacity: 1; }

/* Platform video — same treatment, swappable source on tab click */
.platform-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--bg);
  z-index: 2;
  opacity: 0;
  filter: grayscale(100%) contrast(1.08) brightness(0.92);
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.platform-video.loaded { opacity: 1; }
.platform-video.swapping { opacity: 0; }
.hero-render {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(20, 205, 156, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255, 90, 77, 0.06) 0%, transparent 55%),
    var(--surface);
}
.hero-render .scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0 3px, rgba(255,255,255,0.015) 3px 4px);
}
.hero-render svg.hero-globe {
  position: absolute; inset: 8% 0; margin: auto;
  width: 75%; aspect-ratio: 1; max-width: 540px;
  animation: spin-slow 80s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.hero-globe .lat, .hero-globe .lon { fill: none; stroke: var(--border); stroke-width: 0.4; }
.hero-globe .meridian { stroke: var(--border); stroke-width: 0.6; }
.hero-globe .ring { fill: none; stroke: var(--border-2); stroke-width: 0.4; }
.hero-globe .pt   { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
.hero-globe .pt-r { fill: var(--red);    filter: drop-shadow(0 0 4px var(--red)); }
.hero-globe .pt-a { fill: var(--amber);  filter: drop-shadow(0 0 4px var(--amber)); }
.hero-globe .pulse { fill: none; stroke: var(--accent); stroke-width: 0.4; animation: pulse-r 3s ease-out infinite; transform-origin: center; }
@keyframes pulse-r { 0%{opacity:1; r:1.6} 100%{opacity:0; r:14} }

.hero-callouts {
  position: absolute;
  top: var(--header-h);        /* start below the fixed nav, never collide */
  left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 1.2s ease 0.3s;
}
.video-wrapper.dissolved + .hero-callouts,
.hero-callouts.in { opacity: 1; }
@media (max-width: 939px) { .hero-callouts .hc.bl { display: none; } }
@media (max-width: 560px) { .hero-callouts { display: none; } }
.hc {
  position: absolute;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap;
}
.hc .ln { width: 36px; height: 1px; background: var(--border); }
.hc .v  { color: var(--fg); }
.hc.tl { top: 28px; left: 28px; }
.hc.tr { top: 28px; right: 28px; }
.hc.tr .ln { order: -1; background: linear-gradient(90deg, transparent, var(--border)); }
.hc.bl { bottom: 28px; left: 28px; }
.hc.br { bottom: 28px; right: 28px; }
.hc.br .ln { order: -1; background: linear-gradient(90deg, transparent, var(--border)); }
@media (max-width: 560px) {
  .hc.tl, .hc.bl { left: 12px; }
  .hc.tl { top: 12px; }
  .hc.bl { bottom: 12px; }
  .hc { font-size: 9px; gap: 8px; }
  .hc .ln { width: 28px; }
}
@media (max-width: 939px) {
  .hc.tr, .hc.br { display: none; }
}

/* ==================== MARQUEE ==================== */
.marquee {
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  padding: 20px 0; overflow: hidden; white-space: nowrap;
  background: var(--bg);
}
.marquee-track {
  display: inline-block; animation: m 50s linear infinite;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.18em; color: var(--fg-muted);
  text-transform: uppercase;
}
.marquee-track > span { margin: 0 22px; }
.marquee-track .pip {
  display: inline-block; width: 5px; height: 5px;
  background: var(--accent); margin: 0 12px; vertical-align: middle;
}
@keyframes m { to { transform: translateX(-50%); } }

/* ==================== DOMAIN BLOCK (SCOUT REPLICATION) ==================== */
.domain-block {
  position: relative;
  padding: 96px var(--gutter) 96px;
  overflow: hidden;
  background: var(--bg);
}
@media (max-width: 560px) {
  .domain-block { padding: 72px var(--gutter) 72px; }
}
.domain-block .block-text {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  margin-bottom: 48px;
  align-items: end;
}
@media (max-width: 939px) {
  .domain-block .block-text { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}
.domain-block .block-text-col-l h5 { margin-bottom: 18px; }
.domain-block .block-text-col-r p { max-width: 360px; }

/* ==================== FUSION MANDALA (hex hub-and-spoke) ==================== */
.fusion-mandala {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  /* Subtle radial gradient backdrop hints at the "fusion" */
  background: radial-gradient(circle at center, rgba(20,205,156,0.045) 0%, transparent 60%);
}
@media (max-width: 560px) {
  .fusion-mandala { max-width: none; }
}

/* SVG layers (rings + spokes) fill the mandala */
.fusion-mandala .mandala-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* Rings (concentric circles + compass tick marks) */
.fusion-mandala .ring {
  fill: none;
  stroke: rgba(20,205,156,0.18);
  stroke-width: 0.4;
}
.fusion-mandala .ring.bright { stroke: rgba(20,205,156,0.35); }
.fusion-mandala .ring.compass { stroke: rgba(220, 230, 245, 0.22); stroke-width: 0.3; }
.fusion-mandala .tick {
  stroke: rgba(220, 230, 245, 0.35);
  stroke-width: 0.35;
}
.fusion-mandala .compass-label {
  fill: rgba(220, 230, 245, 0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.4px; letter-spacing: 0.25em;
}
.fusion-mandala .compass-rotor {
  transform-origin: 50px 50px;
  animation: mandala-rotate 240s linear infinite;
}
@keyframes mandala-rotate {
  to { transform: rotate(360deg); }
}

/* Spokes (radial lines from each node centre to fusion core) */
.fusion-mandala .spoke {
  fill: none;
  stroke: rgba(20,205,156,0.55);
  stroke-width: 0.4;
  stroke-dasharray: 1.4 2.2;
  filter: drop-shadow(0 0 1px rgba(20,205,156,0.8));
  animation: spoke-flow 3s linear infinite;
}
@keyframes spoke-flow { to { stroke-dashoffset: -10; } }
.fusion-mandala .spoke.s1 { animation-delay: -0.2s; }
.fusion-mandala .spoke.s2 { animation-delay: -0.5s; }
.fusion-mandala .spoke.s3 { animation-delay: -0.9s; }
.fusion-mandala .spoke.s4 { animation-delay: -1.4s; }
.fusion-mandala .spoke.s5 { animation-delay: -1.9s; }
/* Central FUSION CORE — a rotated square (diamond) with content */
.fusion-mandala .fusion-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26%;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  z-index: 4;
}
.fusion-mandala .core-shape {
  position: absolute; inset: 0;
  background: rgba(11,11,14,0.78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(20,205,156,0.18) inset,
              0 0 38px rgba(20,205,156,0.18);
  animation: core-pulse 4s ease-in-out infinite;
}
@keyframes core-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(20,205,156,0.18) inset, 0 0 30px rgba(20,205,156,0.15); }
  50%      { box-shadow: 0 0 0 1px rgba(20,205,156,0.30) inset, 0 0 50px rgba(20,205,156,0.32); }
}
.fusion-mandala .core-shape::before {
  content: '';
  position: absolute; inset: 6%;
  border: 1px dashed rgba(20,205,156,0.45);
}
.fusion-mandala .core-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px;
  padding: 4px;
}
.fusion-mandala .core-label {
  font-family: var(--mono); font-size: clamp(8.5px, 1vw, 11px);
  letter-spacing: 0.22em; color: var(--accent);
}
.fusion-mandala .core-value {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 4.4vw, 44px);
  letter-spacing: -0.02em; color: var(--fg); line-height: 1;
}
.fusion-mandala .core-value small {
  font-size: 0.45em; color: var(--fg-muted);
  margin-left: 2px; letter-spacing: 0.05em;
}
.fusion-mandala .core-sub {
  font-family: var(--mono); font-size: clamp(7.5px, 0.85vw, 9.5px);
  letter-spacing: 0.2em; color: var(--fg-muted);
}

/* Six domain nodes — positioned at hexagon vertices around centre */
.fusion-mandala .domain-node {
  position: absolute;
  width: clamp(74px, 12vw, 132px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid; place-items: center;
  pointer-events: auto;
}
.fusion-mandala .domain-node[data-dn="space"]    { top: 8%;  left: 50%; }
.fusion-mandala .domain-node[data-dn="aircraft"] { top: 29%; left: 86%; }
.fusion-mandala .domain-node[data-dn="cyber"]    { top: 71%; left: 86%; }
.fusion-mandala .domain-node[data-dn="maritime"] { top: 92%; left: 50%; }
.fusion-mandala .domain-node[data-dn="ground"]   { top: 71%; left: 14%; }
.fusion-mandala .domain-node[data-dn="drone"]    { top: 29%; left: 14%; }

.fusion-mandala .node-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,205,156,0.10) 0%, rgba(11,11,14,0.85) 60%, rgba(11,11,14,0.95) 100%);
  border: 1px solid rgba(20,205,156,0.5);
  box-shadow: 0 0 0 1px rgba(20,205,156,0.12) inset, 0 6px 24px rgba(0,0,0,0.55);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
/* Single subtle outer ring per node — no scattering pulse */
.fusion-mandala .node-disc::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(20,205,156,0.22);
  opacity: 0.7;
  pointer-events: none;
}
.fusion-mandala .domain-node:hover .node-disc {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 26px rgba(20,205,156,0.45);
  transform: scale(1.04);
}
.fusion-mandala .node-img {
  position: relative; z-index: 2;
  width: 72%; height: 72%;
  display: grid; place-items: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.fusion-mandala .node-img img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}

/* Outer label tag below each node */
.fusion-mandala .node-tag {
  position: absolute;
  top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  white-space: nowrap;
  z-index: 5;
}
.fusion-mandala .node-tag .tag-name {
  font-family: var(--mono); font-size: clamp(9.5px, 0.85vw, 11px);
  letter-spacing: 0.22em; color: var(--fg);
}
.fusion-mandala .node-tag .tag-meta {
  font-family: var(--mono); font-size: clamp(8px, 0.7vw, 9.5px);
  letter-spacing: 0.16em; color: var(--fg-muted);
}
/* Nodes on the LEFT half push their tag to the LEFT side of the disc */
.fusion-mandala .domain-node[data-dn="drone"]    .node-tag,
.fusion-mandala .domain-node[data-dn="ground"]   .node-tag,
.fusion-mandala .domain-node[data-dn="aircraft"] .node-tag,
.fusion-mandala .domain-node[data-dn="cyber"]    .node-tag {
  top: 50%; transform: translate(0, -50%);
  flex-direction: column; align-items: flex-start;
  left: calc(100% + 10px);
}
.fusion-mandala .domain-node[data-dn="drone"]    .node-tag,
.fusion-mandala .domain-node[data-dn="ground"]   .node-tag {
  left: auto; right: calc(100% + 10px); align-items: flex-end;
}

/* Top/bottom nodes — tags above/below the disc */
.fusion-mandala .domain-node[data-dn="maritime"] .node-tag {
  top: auto; bottom: calc(100% + 8px);
}

/* Stat strip below the mandala (3 quick metrics) */
.fusion-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 56px auto 0;
  max-width: 760px;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
.fusion-stat {
  padding: 22px 18px;
  border-left: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 8px;
}
.fusion-stat:first-child { border-left: 0; }
.fusion-stat .fs-value {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.01em; color: var(--fg); line-height: 1;
}
.fusion-stat .fs-value em { font-style: normal; color: var(--accent); }
.fusion-stat .fs-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--fg-muted);
}
@media (max-width: 560px) {
  .fusion-stats { grid-template-columns: 1fr; }
  .fusion-stat { border-left: 0; border-top: 1px solid var(--border-2); padding: 18px 0; }
  .fusion-stat:first-child { border-top: 0; }
}

/* ============== MOBILE: switch mandala → grid at ≤ 480px ============== */
@media (max-width: 480px) {
  /* Hide the full mandala (too cramped) and show a 2×3 card grid */
  .fusion-mandala { display: none; }
  .fusion-mobile { display: block !important; }
}
.fusion-mobile { display: none; }
.fusion-mobile .fm-core {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px;
  border: 1px solid var(--accent);
  background: rgba(20,205,156,0.05);
  margin-bottom: 18px;
  border-radius: 2px;
}
.fusion-mobile .fm-core .fm-core-l {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--accent);
}
.fusion-mobile .fm-core .fm-core-v {
  font-family: var(--display); font-weight: 500;
  font-size: 22px; color: var(--fg); letter-spacing: -0.01em;
}
.fusion-mobile .fm-core .fm-core-v small {
  font-size: 11px; color: var(--fg-muted); margin-left: 2px;
}
.fusion-mobile .fm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fusion-mobile .fm-card {
  padding: 14px 12px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--border-2);
  border-radius: 2px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
}
.fusion-mobile .fm-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}
.fusion-mobile .fm-card .fm-img {
  height: 56px; display: grid; place-items: center;
}
.fusion-mobile .fm-card .fm-img img { max-width: 100%; max-height: 100%; }
.fusion-mobile .fm-card .fm-name {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--accent);
}
.fusion-mobile .fm-card .fm-meta {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; color: var(--fg-muted);
}

/* ==================== INFOGRAPHIC BLOCK ==================== */
.infographic-block {
  position: relative;
  padding: 120px var(--gutter) 96px;
  overflow: hidden;
}
@media (max-width: 939px) { .infographic-block { padding: 88px var(--gutter) 72px; } }
@media (max-width: 560px) { .infographic-block { padding: 64px var(--gutter) 56px; } }
.infographic-block .ib-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 64px;
  align-items: end;
}
@media (max-width: 939px) {
  .infographic-block .ib-header { grid-template-columns: 1fr; gap: 24px; }
}
.infographic-block .ib-header h3 { max-width: 28ch; }
.infographic-block .ib-header .ib-aside {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--fg-muted);
  display: flex; flex-direction: column; gap: 6px;
  border-left: 1px solid var(--border-2); padding-left: 20px;
}
@media (max-width: 939px) {
  .infographic-block .ib-header .ib-aside { border-left: 0; padding-left: 0; padding-top: 18px; border-top: 1px solid var(--border-2); }
}
@media (max-width: 560px) {
  .infographic-block .ib-header { gap: 18px; margin-bottom: 36px; }
  .infographic-block .ib-header .ib-aside { font-size: 10px; letter-spacing: 0.12em; gap: 8px; }
}
.infographic-block .ib-aside strong { color: var(--accent); font-weight: 500; }

/* ============ PIPELINE V2 — horizontal fan-in → spine → fan-out ============ */
.pipeline-v2 {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 48px;
  align-items: stretch;
  padding: 36px;
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 100%), var(--surface);
  min-height: 560px;
}
@media (max-width: 1100px) {
  .pipeline-v2 { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 28px; }
  .pipeline-v2 .pv-sources, .pipeline-v2 .pv-outputs { max-width: none; }
  /* Stacked columns mean the JS-drawn fan-in/out curves would point in nonsense
     directions — hide them and let the cards speak for themselves. */
  .pv-connectors { display: none; }
}
@media (max-width: 560px) {
  .pipeline-v2 { padding: 18px 14px; gap: 24px; }
  .pv-stage { grid-template-columns: 28px 1fr auto; padding: 12px; gap: 10px; }
  .pv-stage .pv-pip { display: none; }
  .pv-stage .pv-name { font-size: 13px; }
  .pv-stage .pv-desc { font-size: 9px; letter-spacing: 0.06em; }
  .pv-stage .pv-ms   { font-size: 10px; padding: 2px 6px; }

  /* Sources collapse from 8 vertical rows → 2-col compact chip grid */
  .pipeline-v2 .pv-sources { display: block; }
  .pv-sources .pv-col-label { margin-bottom: 12px; }
  .pv-sources .pv-source-grid-wrap {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .pv-source { padding: 6px 8px; font-size: 9.5px; letter-spacing: 0.06em; gap: 6px; grid-template-columns: 6px 1fr auto; }
  .pv-source .src-led { width: 5px; height: 5px; }
  .pv-source .src-rate { font-size: 8px; }
  .pv-source-more { font-size: 9px; padding: 6px; grid-column: 1 / -1; }
  .pv-col-summary { font-size: 9px; padding: 10px 8px; }

  /* Outputs collapse from 3 stacked cards → row of 3 mini-cards */
  .pipeline-v2 .pv-outputs { display: block; }
  .pv-outputs .pv-col-label { margin-bottom: 12px; }
  .pv-outputs .pv-output-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  }
  .pv-output { padding: 10px 8px; gap: 4px; }
  .pv-output .out-tier { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pv-output .out-tier .tier-name { font-size: 9.5px; }
  .pv-output .out-tier .tier-count { font-size: 8.5px; }
  .pv-output .out-meta { font-size: 8.5px; }

  .pv-spine-total .total-val { font-size: 11px; }
}

/* ============ Column: SOURCES ============ */
.pv-col-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--fg-muted);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.pv-col-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border-2);
}
.pv-sources, .pv-outputs {
  display: flex; flex-direction: column; gap: 6px;
  position: relative; z-index: 2;
}
/* Wrappers that re-layout into a grid on mobile — on desktop they pass through */
.pv-source-grid-wrap, .pv-output-row { display: contents; }
.pv-source {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center; gap: 10px;
  padding: 7px 10px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--fg);
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 2px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.pv-source .src-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px rgba(20,205,156,0.7);
  animation: src-pulse 2.4s ease-in-out infinite;
}
.pv-source:nth-child(2)  .src-led { animation-delay: 0.0s; }
.pv-source:nth-child(3)  .src-led { animation-delay: 0.25s; }
.pv-source:nth-child(4)  .src-led { animation-delay: 0.5s; }
.pv-source:nth-child(5)  .src-led { animation-delay: 0.75s; }
.pv-source:nth-child(6)  .src-led { animation-delay: 1.0s; }
.pv-source:nth-child(7)  .src-led { animation-delay: 1.25s; }
.pv-source:nth-child(8)  .src-led { animation-delay: 1.5s; }
.pv-source:nth-child(9)  .src-led { animation-delay: 1.75s; }
@keyframes src-pulse {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 3px rgba(20,205,156,0.4); }
  50%      { opacity: 1;    box-shadow: 0 0 7px rgba(20,205,156,0.9); }
}
.pv-source .src-rate {
  font-size: 9px; color: var(--fg-dim); letter-spacing: 0.06em;
}
.pv-source-more {
  margin-top: 4px; padding: 7px 10px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--fg-dim);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 2px; text-align: center;
}
.pv-col-summary {
  margin-top: 14px; padding: 12px 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--fg-muted);
  border-top: 1px solid var(--border-2);
  display: flex; justify-content: space-between;
}
.pv-col-summary strong { color: var(--fg); font-weight: 500; }

/* ============ Column: STAGES (spine) ============ */
.pv-spine {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 2;
}
.pv-stage {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  background: rgba(11,11,14,0.65);
  border: 1px solid var(--border-2);
  border-radius: 2px;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.pv-stage .pv-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--accent);
  opacity: 0.55; transition: opacity 0.4s ease;
}
.pv-stage .pv-meta { display: flex; flex-direction: column; gap: 3px; }
.pv-stage .pv-name {
  font-family: var(--display); font-size: 14px; font-weight: 500;
  color: var(--fg); letter-spacing: -0.005em;
}
.pv-stage .pv-desc {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.08em; color: var(--fg-dim);
}
.pv-stage .pv-ms {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--fg-muted);
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  background: rgba(0,0,0,0.4);
}
.pv-stage .pv-pip {
  position: absolute; top: 12px; right: 12px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Sequential activation cycle (8s) */
.pv-stage { animation: stage-cycle 8s ease-in-out infinite; }
.pv-stage .pv-num,
.pv-stage .pv-pip,
.pv-stage .pv-ms { animation: stage-cycle-attr 8s ease-in-out infinite; }
@keyframes stage-cycle {
  0%, 88%, 100% { border-color: var(--border-2); background: rgba(11,11,14,0.65); box-shadow: none; }
  6%, 16%       { border-color: var(--accent); background: rgba(20,205,156,0.06);
                  box-shadow: 0 0 0 1px rgba(20,205,156,0.25), 0 0 24px rgba(20,205,156,0.12); }
}
@keyframes stage-cycle-attr {
  0%, 88%, 100% { opacity: 0.55; }
  6%, 16%       { opacity: 1; }
}
.pv-stage:nth-child(1) { animation-delay: 0.0s; }
.pv-stage:nth-child(1) .pv-num,
.pv-stage:nth-child(1) .pv-pip,
.pv-stage:nth-child(1) .pv-ms { animation-delay: 0.0s; }
.pv-stage:nth-child(2) { animation-delay: 0.9s; }
.pv-stage:nth-child(2) .pv-num,
.pv-stage:nth-child(2) .pv-pip,
.pv-stage:nth-child(2) .pv-ms { animation-delay: 0.9s; }
.pv-stage:nth-child(3) { animation-delay: 1.8s; }
.pv-stage:nth-child(3) .pv-num,
.pv-stage:nth-child(3) .pv-pip,
.pv-stage:nth-child(3) .pv-ms { animation-delay: 1.8s; }
.pv-stage:nth-child(4) { animation-delay: 2.7s; }
.pv-stage:nth-child(4) .pv-num,
.pv-stage:nth-child(4) .pv-pip,
.pv-stage:nth-child(4) .pv-ms { animation-delay: 2.7s; }
.pv-stage:nth-child(5) { animation-delay: 3.6s; }
.pv-stage:nth-child(5) .pv-num,
.pv-stage:nth-child(5) .pv-pip,
.pv-stage:nth-child(5) .pv-ms { animation-delay: 3.6s; }
.pv-stage:nth-child(6) { animation-delay: 4.5s; }
.pv-stage:nth-child(6) .pv-num,
.pv-stage:nth-child(6) .pv-pip,
.pv-stage:nth-child(6) .pv-ms { animation-delay: 4.5s; }
.pv-stage:nth-child(7) { animation-delay: 5.4s; }
.pv-stage:nth-child(7) .pv-num,
.pv-stage:nth-child(7) .pv-pip,
.pv-stage:nth-child(7) .pv-ms { animation-delay: 5.4s; }

.pv-spine-total {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--fg-muted);
}
.pv-spine-total .total-bar {
  height: 1px; background: var(--border-2); position: relative; overflow: hidden;
}
.pv-spine-total .total-bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  width: 30%; animation: total-sweep 4s linear infinite;
}
@keyframes total-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
.pv-spine-total .total-val {
  font-size: 12px; color: var(--accent); letter-spacing: 0.1em; font-weight: 500;
}

/* ============ Column: OUTPUTS ============ */
.pv-output {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px;
  border: 1px solid var(--border-2);
  border-left: 3px solid;
  background: rgba(255,255,255,0.02);
  border-radius: 2px;
  transition: border-color 0.3s ease;
}
.pv-output.flash    { border-left-color: #ef4a4a; }
.pv-output.priority { border-left-color: #f5b847; }
.pv-output.routine  { border-left-color: #14cd9c; }
.pv-output .out-tier {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em;
}
.pv-output.flash    .out-tier .tier-name { color: #ef4a4a; }
.pv-output.priority .out-tier .tier-name { color: #f5b847; }
.pv-output.routine  .out-tier .tier-name { color: #14cd9c; }
.pv-output .out-tier .tier-count {
  font-size: 9.5px; color: var(--fg-dim); letter-spacing: 0.1em;
}
.pv-output .out-meta {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.08em; color: var(--fg-muted);
  display: flex; justify-content: space-between;
}
.pv-output .out-bar {
  height: 2px; background: rgba(255,255,255,0.05);
  border-radius: 1px; overflow: hidden;
}
.pv-output .out-bar span {
  display: block; height: 100%;
  animation: bar-fill 6s ease-in-out infinite;
}
.pv-output.flash    .out-bar span { background: #ef4a4a; animation-delay: 0s;   }
.pv-output.priority .out-bar span { background: #f5b847; animation-delay: 0.4s; }
.pv-output.routine  .out-bar span { background: #14cd9c; animation-delay: 0.8s; }
@keyframes bar-fill {
  0%   { width: 0; }
  40%  { width: 100%; }
  90%  { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

/* ============ SVG connectors overlay (fan-in + fan-out, JS-driven) ============ */
.pv-connectors {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
  overflow: visible;
}
.pv-connectors path {
  fill: none;
  stroke: rgba(20,205,156,0.22);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  animation: conn-flow 3s linear infinite;
  stroke-linecap: round;
}
.pv-connectors path.fan-out {
  stroke-width: 1.2;
}
.pv-connectors path.fan-out.flash    { stroke: rgba(239, 74, 74, 0.55); filter: drop-shadow(0 0 3px rgba(239,74,74,0.45)); }
.pv-connectors path.fan-out.priority { stroke: rgba(245,184, 71, 0.55); filter: drop-shadow(0 0 3px rgba(245,184,71,0.45)); }
.pv-connectors path.fan-out.routine  { stroke: rgba( 20,205,156, 0.55); filter: drop-shadow(0 0 3px rgba(20,205,156,0.5));  }
.pv-connectors .pv-junction {
  fill: var(--accent); opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(20,205,156,0.7));
}
@keyframes conn-flow { to { stroke-dashoffset: -20; } }

@media (prefers-reduced-motion: reduce) {
  .pv-stage, .pv-stage .pv-num, .pv-stage .pv-pip, .pv-stage .pv-ms,
  .pv-source .src-led, .pv-output .out-bar span, .pv-connectors path,
  .pv-spine-total .total-bar::after { animation: none !important; }
}

/* ==================== TABBED PRODUCTS (video LEFT / text RIGHT on desktop) ==================== */
.tabbed-products {
  position: relative;
  padding: 96px var(--gutter);
  display: grid;
  /* Two-column desktop: video left (1.1fr), text+tabs right (1fr) */
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "media text"
    "media tabs";
  column-gap: 56px;
  row-gap: 28px;
  align-items: start;
}
@media (max-width: 939px) {
  .tabbed-products {
    padding: 72px var(--gutter);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "text"
      "tabs"
      "media";
    column-gap: 0;
    row-gap: 28px;
  }
}
@media (max-width: 560px) { .tabbed-products { padding: 56px var(--gutter); row-gap: 24px; } }
.tabbed-products .block-text    { grid-area: text;  max-width: 540px; align-self: end; }
.tabbed-products .middle-wrapper { grid-area: tabs; align-self: start; }
.tabbed-products .media-wrapper  { grid-area: media; align-self: stretch; }
.tabbed-products h2 em { font-style: normal; color: var(--accent); }
.middle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0 0;
  border-top: 1px solid var(--border-2);
}
.middle-wrapper > .middle-spacer { display: none; }

/* Pill-style tab bar — single container with sliding indicator */
.tabs-wrapper {
  position: relative;
  display: inline-flex; align-items: stretch;
  padding: 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  justify-self: start;
  overflow: hidden;                      /* clip indicator + progress to the pill */
}
@media (max-width: 560px) {
  /* On phones the pill becomes a full-width segmented control so all three
     tabs share the row evenly and each one is a chunky touch target. */
  .tabs-wrapper { display: flex; width: 100%; justify-self: stretch; }
  .tabs-wrapper .tab { flex: 1; justify-content: center; padding: 13px 8px; }
}
.tabs-wrapper .tab-indicator {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 4px; width: 0;
  background: rgba(20, 205, 156, 0.10);
  border: 1px solid var(--accent);
  border-radius: 3px;
  transition: left 0.45s cubic-bezier(0.7, 0, 0.2, 1), width 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
  box-sizing: border-box;
}
.tab-progress {
  position: absolute;
  left: 0; bottom: 0;                    /* sit on the inside, not over the border */
  height: 2px; width: 0;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(20,205,156,0.65);
  pointer-events: none;
  z-index: 2;
  transition: left 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  box-sizing: border-box;
}
.tab-progress.run { animation: tab-progress 7s linear forwards; }
.tabs-wrapper.paused .tab-progress { animation-play-state: paused; }
@keyframes tab-progress { from { width: 0; } to { width: 100%; } }

.tab {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.2em; color: var(--fg-muted);
  padding: 10px 22px;
  cursor: pointer;
  transition: color 0.25s ease;
  user-select: none;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
@media (max-width: 560px) {
  .tab { padding: 12px 14px; font-size: 10.5px; letter-spacing: 0.16em; }
  .tab .tab-dot { margin-right: 6px; width: 4px; height: 4px; }
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); }
.tab .tab-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  margin-right: 8px;
  vertical-align: 1px;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.tab.active .tab-dot {
  background: var(--accent); opacity: 1;
  box-shadow: 0 0 6px rgba(20,205,156,0.7);
}

.description-wrapper { justify-self: start; text-align: left; }
@media (max-width: 560px) {
  .description-wrapper p { font-size: 11px; line-height: 1.55; letter-spacing: 0.06em; }
}
.description-wrapper p {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; color: var(--fg-muted);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.description-wrapper p.fade-in { opacity: 0; transform: translateY(6px); }
.description-wrapper p.fade-in.in { opacity: 1; transform: none; }
.tabbed-products .media-wrapper {
  /* On desktop, the wrapper stretches to fill the 2-row span of the grid.
     Min-height guarantees it stays substantial even if the text column is
     short. On mobile we restore aspect-ratio for a clean video preview. */
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  overflow: hidden;
}
@media (max-width: 939px) {
  .tabbed-products .media-wrapper { aspect-ratio: 16/9; min-height: 0; max-height: 480px; }
}
@media (max-width: 560px) {
  .tabbed-products .media-wrapper { aspect-ratio: 4/3; max-height: none; }
}

/* ==================== USE CASES ==================== */
.use-cases-block {
  position: relative;
  padding: 96px var(--gutter) 96px;
  overflow: hidden;
}
@media (max-width: 939px) { .use-cases-block { padding: 72px var(--gutter); } }
@media (max-width: 560px) { .use-cases-block { padding: 56px var(--gutter); } }

.use-cases-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin: 32px 0 48px;
  align-items: end;
}
@media (max-width: 939px) {
  .use-cases-header { grid-template-columns: 1fr; gap: 22px; margin-bottom: 36px; }
}
.use-cases-header h3 { max-width: 30ch; }
.use-cases-header .uc-aside {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--fg-muted);
  display: flex; flex-direction: column; gap: 6px;
  border-left: 1px solid var(--border-2);
  padding-left: 20px;
}
.use-cases-header .uc-aside strong { color: var(--accent); font-weight: 500; }
@media (max-width: 939px) {
  .use-cases-header .uc-aside { border-left: 0; padding-left: 0; padding-top: 18px; border-top: 1px solid var(--border-2); }
}
@media (max-width: 560px) {
  .use-cases-header .uc-aside { font-size: 10px; letter-spacing: 0.12em; gap: 8px; }
}

/* Auto-fit grid: 4 across on wide desktop, 3 / 2 / 1 as it narrows */
.use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
@media (max-width: 560px) { .use-grid { gap: 14px; } }

.use-card {
  position: relative;
  padding: 22px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 100%),
    var(--surface);
  border: 1px solid var(--border-2);
  border-top-width: 2px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 320px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.use-card:hover {
  border-color: rgba(20,205,156,0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

/* Tier-coloured top border */
.use-card.flash    { border-top-color: #ef4a4a; }
.use-card.priority { border-top-color: #f5b847; }
.use-card.routine  { border-top-color: #14cd9c; }

.use-card .uc-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em;
}
.use-card .uc-num { color: var(--fg-dim); }
.use-card .uc-tier {
  display: inline-flex; align-items: center; gap: 6px;
}
.use-card .uc-tier::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
}
.use-card.flash    .uc-tier            { color: #ef4a4a; }
.use-card.flash    .uc-tier::before    { background: #ef4a4a; box-shadow: 0 0 5px rgba(239,74,74,0.85); }
.use-card.priority .uc-tier            { color: #f5b847; }
.use-card.priority .uc-tier::before    { background: #f5b847; box-shadow: 0 0 5px rgba(245,184,71,0.85); }
.use-card.routine  .uc-tier            { color: #14cd9c; }
.use-card.routine  .uc-tier::before    { background: #14cd9c; box-shadow: 0 0 5px rgba(20,205,156,0.85); }

.use-card h4 {
  font-family: var(--display);
  font-size: 17px; font-weight: 500;
  color: var(--fg); margin: 0;
  letter-spacing: -0.005em; line-height: 1.25;
}

.use-card .uc-situation {
  font-size: 13px; color: var(--fg-muted);
  line-height: 1.5; font-weight: 300;
}

.use-card .uc-response-label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.2em; color: var(--accent);
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px;
}
.use-card .uc-response-label::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(20,205,156,0.25);
}

.use-card .uc-response {
  font-size: 12.5px; color: var(--fg);
  line-height: 1.5; font-weight: 300;
}

.use-card .uc-sla {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--fg-muted);
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border-2);
  display: flex; justify-content: space-between; align-items: center;
}
.use-card .uc-sla strong { color: var(--fg); font-weight: 500; }

@media (max-width: 560px) {
  .use-card { padding: 18px 16px; min-height: 0; gap: 12px; }
  .use-card h4 { font-size: 16px; }
  .use-card .uc-situation { font-size: 12.5px; }
  .use-card .uc-response { font-size: 12px; }
}

/* ==================== ACCORDION ==================== */
.accordion {
  position: relative;
  padding: 96px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 939px) { .accordion { grid-template-columns: 1fr; gap: 40px; } }
.accordion .media-wrapper {
  position: relative;
  aspect-ratio: 4/5;
  max-height: 780px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  overflow: hidden;
}
.accordion .media-wrapper .header { padding: 32px; position: relative; z-index: 2; }
.accordion .media-wrapper .render {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(255,255,255,0.025) 24px, rgba(255,255,255,0.025) 25px),
    repeating-linear-gradient(90deg, transparent 0, transparent 24px, rgba(255,255,255,0.025) 24px, rgba(255,255,255,0.025) 25px),
    radial-gradient(ellipse at center, rgba(20,205,156,0.06) 0%, transparent 70%);
}

/* ============ LIVE MISSION CONSOLE (OUR TECHNOLOGY section) ============ */
/* Re-anchored relative to the chat box bottom edge so it never overlaps it.
   The chat-height var is set dynamically by JS via ResizeObserver — the
   fallback of 260px keeps a safe gap even if JS hasn't run yet. */
.console-panel {
  position: absolute;
  left: 28px; right: 28px;
  top: 310px;                    /* below header + WHY-EAGLE 4-col strip */
  bottom: calc(28px + 20px + var(--chat-height, 260px));
  z-index: 3;
  padding: 18px 20px;
  background: rgba(11,11,14,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
/* WHY-EAGLE strip drops from 4 cols → 2 cols around 939px, gets taller, so push the console down */
@media (max-width: 1280px) { .console-panel { top: 360px; bottom: calc(28px + 20px + var(--chat-height, 280px)); } }
@media (max-width: 939px)  {
  /* On tablet/phone the wrapper aspect-ratio shifts; switch the console
     from absolute-positioned overlay to inline FLEX-COLUMN flow so the
     children stack cleanly with no overlap and the wrapper grows to fit. */
  .accordion .media-wrapper {
    aspect-ratio: auto; max-height: none;
    display: flex; flex-direction: column;
    overflow: visible;
  }
  /* Hide the decorative grid render — it adds visual noise on phones */
  .accordion .media-wrapper .render { display: none; }
  .accordion .media-wrapper .header { padding: 24px 20px 4px; position: static; }
  .console-panel {
    position: static;
    top: auto; bottom: auto; left: auto; right: auto;
    margin: 16px 20px 0;
    padding: 16px;
    gap: 12px;
    z-index: auto;
  }
  .communication {
    position: static;
    top: auto; bottom: auto; left: auto; right: auto;
    margin: 16px 20px 20px;
    padding: 16px;
    z-index: auto;
  }
  .communication .message { font-size: 14px; line-height: 1.45; margin-bottom: 14px; }
  .communication .label { font-size: 9.5px; margin-bottom: 4px; }
  .console-status .stat-left { font-size: 9.5px; gap: 8px; }
  .console-status .stat-right { font-size: 9.5px; }
  .stat-tile { padding: 10px 12px; gap: 3px; }
  .stat-tile .st-value { font-size: 18px; }
  .stat-tile .st-label, .stat-tile .st-sub { font-size: 9px; }
}
@media (max-width: 560px) {
  /* Tighten WHY-EAGLE strip so it stops dominating the panel */
  .tech-why { gap: 14px; padding: 16px 0; margin-top: 20px; }
  .tech-why-cell .tw-value { font-size: 20px; }
  .tech-why-cell .tw-label { font-size: 9px; letter-spacing: 0.14em; }
  /* Stat tiles already 1-col, threats tighten further */
  .console-stats { grid-template-columns: 1fr; gap: 8px; }
  .threat-row { grid-template-columns: 78px 1fr 56px; gap: 8px; font-size: 9px; letter-spacing: 0.08em; }
  .threat-row .tr-level { font-size: 8.5px; }
  .console-threats .ct-title { font-size: 9px; letter-spacing: 0.16em; }
  /* Tighter header padding so the header doesn't push the console down too far */
  .accordion .media-wrapper .header { padding: 20px 16px 0; }
  .console-panel  { margin: 14px 16px 0; padding: 14px; }
  .communication  { margin: 14px 16px 16px; padding: 14px; }
}

/* Status strip — top */
.console-status {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-2);
}
.console-status .stat-left {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--fg);
}
.console-status .stat-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(20,205,156,0.9);
  animation: led-blink 1.6s ease-in-out infinite;
}
@keyframes led-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.console-status .stat-right {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--fg-muted);
}
.console-status .stat-right .sweep-clock {
  color: var(--accent);
  margin-left: 6px;
}

/* Stat tiles */
.console-stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.stat-tile {
  padding: 10px 12px;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-tile .st-label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--fg-muted);
}
.stat-tile .st-value {
  font-family: var(--display); font-size: 22px;
  font-weight: 500; color: var(--accent);
  letter-spacing: -0.01em; line-height: 1;
}
.stat-tile .st-sub {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; color: var(--fg-dim);
}
.stat-tile .st-value.counting {
  animation: tile-flash 6s ease-in-out infinite;
}
@keyframes tile-flash {
  0%, 100% { color: var(--accent); }
  50%      { color: #fff;          }
}

/* Threat posture board */
.console-threats {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.console-threats .ct-title {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--fg-muted);
  display: flex; align-items: center; gap: 8px;
}
.console-threats .ct-title::after {
  content: ''; flex: 1; height: 1px; background: var(--border-2);
}
.threat-row {
  display: grid;
  grid-template-columns: 90px 1fr 70px;
  align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em;
}
.threat-row .tr-name { color: var(--fg); }
.threat-row .tr-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 1px; overflow: hidden;
  position: relative;
}
.threat-row .tr-bar span {
  display: block; height: 100%;
  width: 0;
  animation: threat-fill 5s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}
.threat-row .tr-level {
  font-size: 9px; letter-spacing: 0.16em; text-align: right;
}
.threat-row.high     .tr-bar span { background: #ef4a4a; animation-delay: 0.0s; }
.threat-row.high     .tr-level    { color: #ef4a4a; }
.threat-row.elevated .tr-bar span { background: #f5b847; animation-delay: 0.4s; }
.threat-row.elevated .tr-level    { color: #f5b847; }
.threat-row.moderate .tr-bar span { background: #d8b6ff; animation-delay: 0.8s; }
.threat-row.moderate .tr-level    { color: #cfa8f5; }
.threat-row.low      .tr-bar span { background: #14cd9c; animation-delay: 1.2s; }
.threat-row.low      .tr-level    { color: #14cd9c; }

/* Each row has its own peak width for visual variety */
.threat-row.high     .tr-bar span { animation-name: fill-86; }
.threat-row.elevated .tr-bar span { animation-name: fill-64; }
.threat-row.moderate .tr-bar span { animation-name: fill-44; }
.threat-row.low      .tr-bar span { animation-name: fill-22; }
@keyframes fill-86 { 0%, 100% { width: 78%; } 50% { width: 92%; } }
@keyframes fill-64 { 0%, 100% { width: 58%; } 50% { width: 70%; } }
@keyframes fill-44 { 0%, 100% { width: 40%; } 50% { width: 50%; } }
@keyframes fill-22 { 0%, 100% { width: 18%; } 50% { width: 28%; } }

/* "WHY EAGLE" stats strip beneath the headline */
.tech-why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 28px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
@media (max-width: 939px) { .tech-why { grid-template-columns: repeat(2, 1fr); } }
.tech-why-cell {
  display: flex; flex-direction: column; gap: 6px;
}
.tech-why-cell .tw-value {
  font-family: var(--display);
  font-size: 26px; font-weight: 500;
  color: var(--fg); letter-spacing: -0.01em; line-height: 1;
}
.tech-why-cell .tw-value em {
  font-style: normal; color: var(--accent);
}
.tech-why-cell .tw-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--fg-muted);
}

@media (prefers-reduced-motion: reduce) {
  .stat-led, .stat-tile .st-value, .threat-row .tr-bar span { animation: none !important; }
}
.communication {
  position: absolute; bottom: 28px; left: 28px; right: 28px;
  z-index: 4;
  background: rgba(11, 11, 14, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-2);
  padding: 20px;
}
.communication .label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted); display: block; margin-bottom: 6px;
}
.communication .message {
  font-family: var(--display);
  font-size: 17px; line-height: 1.4; color: var(--fg);
  margin: 0 0 18px;
}
.communication .message:last-child { margin: 0; }
.communication .message.scout { color: var(--accent); }
.communication .char {
  display: inline-block;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.communication .word { display: inline-block; }

.accordion-wrapper { padding-top: 16px; }
.accordion-helper {
  border-bottom: 1px solid var(--border-2);
}
.accordion-helper:first-child { border-top: 1px solid var(--border-2); }
.accordion-tab {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 28px 0;
  transition: color 0.3s ease;
}
.accordion-tab .row-headline {
  font-family: var(--display);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 400; color: var(--fg);
  margin: 0; letter-spacing: -0.01em;
  transition: color 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.accordion-tab:hover .row-headline { color: var(--accent); }
.accordion-toggle {
  position: relative; width: 14px; height: 14px;
  transition: border-color 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.accordion-toggle .line {
  position: absolute; background: var(--fg-muted);
  transition: background-color 0.3s ease, transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.accordion-toggle .line:nth-child(1) {
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-50%);
}
.accordion-toggle .line:nth-child(2) {
  left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%) scaleY(1);
}
.accordion-tab:hover .accordion-toggle .line { background: var(--accent); }
.accordion-helper.open .accordion-toggle .line:nth-child(2) {
  transform: translateX(-50%) scaleY(0);
}
.accordion-drawer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.accordion-helper.open .accordion-drawer { max-height: 1400px; }
.accordion-drawer .content-wrapper { padding: 0 0 28px; }
.accordion-drawer ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.accordion-drawer li {
  font-size: 15px; line-height: 1.55;
  color: var(--fg-muted); font-weight: 300;
  position: relative; padding-left: 18px;
}
.accordion-drawer li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 5px; height: 1px; background: var(--accent);
}

/* ==================== FOOTER ==================== */
/* ==================== REQUEST BRIEFING ==================== */
.briefing {
  position: relative;
  padding: 96px var(--gutter);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  background:
    radial-gradient(ellipse at top right, rgba(20,205,156,0.05) 0%, transparent 55%),
    var(--bg);
}
.briefing-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 939px) {
  .briefing { padding: 72px var(--gutter); }
  .briefing-grid { grid-template-columns: 1fr; gap: 36px; }
}
.briefing-intro h5 { margin-bottom: 18px; }
.briefing-intro h2 { max-width: 16ch; margin-bottom: 28px; }
.briefing-intro h2 em { font-style: normal; color: var(--accent); }
.briefing-intro p.body-md { max-width: 36ch; margin-bottom: 32px; }
.briefing-meta {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border-2);
  padding-top: 24px;
}
.briefing-meta .meta-row {
  display: grid; grid-template-columns: 110px 1fr;
  align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em;
}
.briefing-meta .meta-row .lbl { color: var(--fg-muted); letter-spacing: 0.22em; }
.briefing-meta .meta-row .val { color: var(--fg); }
.briefing-meta .meta-row .val a { color: var(--fg); }
.briefing-meta .meta-row .val a:hover { color: var(--accent); }
@media (max-width: 560px) {
  .briefing-meta .meta-row { grid-template-columns: 90px 1fr; gap: 10px; font-size: 10px; letter-spacing: 0.1em; }
  .briefing-meta .meta-row .lbl { letter-spacing: 0.18em; }
}

.briefing-form {
  position: relative;
  padding: 32px;
  border: 1px solid var(--border-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 100%),
    var(--surface);
}
@media (max-width: 560px) { .briefing-form { padding: 24px 20px; } }
.briefing-form .form-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border-2);
}
.briefing-form .form-head .form-title {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--accent);
  display: flex; align-items: center; gap: 8px;
}
.briefing-form .form-head .form-title::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px rgba(20,205,156,0.9);
  animation: led-blink 1.6s ease-in-out infinite;
}
.briefing-form .form-head .form-ref {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--fg-dim);
}
.briefing-form .form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 560px) { .briefing-form .form-row { grid-template-columns: 1fr; gap: 14px; } }
.briefing-form .field { display: flex; flex-direction: column; gap: 6px; }
.briefing-form .field.full { grid-column: 1 / -1; }
.briefing-form label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--fg-muted);
}
.briefing-form label .req { color: var(--accent); }
.briefing-form input,
.briefing-form select,
.briefing-form textarea {
  width: 100%;
  background: rgba(11,11,14,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--fg);
  font-family: var(--display); font-size: 14px;
  padding: 11px 12px; border-radius: 2px;
  transition: border-color 0.25s ease, background 0.25s ease;
  -webkit-appearance: none; appearance: none;
}
.briefing-form textarea {
  font-family: var(--mono); font-size: 12.5px;
  min-height: 110px; resize: vertical; line-height: 1.5;
}
.briefing-form input:focus,
.briefing-form select:focus,
.briefing-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(20,205,156,0.04);
}
.briefing-form input::placeholder,
.briefing-form textarea::placeholder { color: var(--fg-dim); }
@media (max-width: 560px) {
  /* iOS auto-zooms inputs < 16px on focus — prevent it */
  .briefing-form input,
  .briefing-form select,
  .briefing-form textarea { font-size: 16px; }
}
.briefing-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.briefing-form .form-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-2);
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .briefing-form .form-foot { flex-direction: column-reverse; align-items: stretch; }
  .briefing-form .form-foot .consent { text-align: center; }
}
.briefing-form .consent {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--fg-dim);
  max-width: 30ch; line-height: 1.5;
}
.briefing-form .form-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--bg);
  background: var(--accent); border: 1px solid var(--accent);
  border-radius: 2px; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.briefing-form .form-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20,205,156,0.25);
}
.briefing-form .form-submit:active { transform: translateY(0); }
.briefing-form .form-submit .arrow {
  width: 14px; height: 1px; background: var(--bg); position: relative;
}
.briefing-form .form-submit .arrow::after {
  content: ''; position: absolute; right: -1px; top: -3px;
  width: 6px; height: 6px; border-right: 1px solid var(--bg); border-top: 1px solid var(--bg);
  transform: rotate(45deg);
}
.briefing-form .form-status {
  display: none;
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--accent);
  background: rgba(20,205,156,0.06);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--accent);
}
.briefing-form.sent .form-status,
.briefing-form.error .form-status { display: block; }
.briefing-form.sent .form-row,
.briefing-form.sent .form-foot { display: none; }

.foot {
  position: relative;
  border-top: 1px solid var(--border-2);
  padding: 80px var(--gutter) 40px;
  background: var(--bg);
}
.foot-grid {
  display: grid; grid-template-columns: 1.5fr repeat(2, 1fr);
  gap: 48px; margin-bottom: 56px;
}
@media (max-width: 939px) { .foot-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; } }
@media (max-width: 560px) { .foot { padding: 56px var(--gutter) 32px; } .foot-bottom { font-size: 9.5px; letter-spacing: 0.14em; gap: 8px; } }
.foot-col h5 {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted); margin: 0 0 18px; font-weight: 400;
}
.foot-col p, .foot-col a {
  font-size: 14px; color: var(--fg-muted);
  line-height: 1.6; margin: 0 0 8px; display: block;
}
.foot-col a:hover { color: var(--accent); }
.foot-tagline {
  color: var(--fg); font-family: var(--display);
  font-size: 18px; line-height: 1.3; margin-bottom: 14px;
}
.foot-bottom {
  border-top: 1px solid var(--border-2);
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--fg-muted);
  text-transform: uppercase; flex-wrap: wrap; gap: 16px;
}

/* ==================== REVEAL ==================== */
.fade-up {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.in { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ==================== SCROLL-TELL (word-by-word light-up on scroll) ==================== */
/* Words start in a dimmed state, brighten progressively as the element passes
   through the centre of the viewport. Uses JS to compute per-element progress
   and toggle a .lit class on each word span. */
.scroll-tell .stw {
  display: inline-block;
  color: rgba(220, 230, 245, 0.18);
  transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: color;
}
/* When lit, the word inherits its parent's natural color — so <em> spans with
   inline colors (red FLASH, amber PRIORITY, teal ROUTINE / accent) light up
   in their own colour, and normal words light up to var(--fg). */
.scroll-tell .stw.lit { color: inherit; }
.scroll-tell em        { color: inherit; }       /* avoid em overriding the dim default */
.scroll-tell em .stw   { color: rgba(220, 230, 245, 0.18); }
.scroll-tell em.lit-target,
.scroll-tell em .stw.lit { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .scroll-tell .stw { color: inherit !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up, .hero-globe, .marquee-track { animation: none !important; opacity: 1 !important; transform: none !important; }
  .compass-rotor, .core-shape,
  .fusion-mandala .spoke,
  .fusion-mandala .node-disc::before { animation: none !important; }
}
/* On touch devices, mirror hover affordances to :active so users get
   feedback when tapping (Apple HIG / Material guidance). */
@media (hover: none) {
  .menu-cta:active { border-color: var(--accent); color: var(--accent); }
  .accordion-tab:active .row-headline { color: var(--accent); }
  .accordion-tab:active .accordion-toggle .line { background: var(--accent); }
  .button.primary:active { background: var(--accent); }
  .label-card:active { border-color: var(--accent); }
  .fusion-mandala .domain-node:active .node-disc { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 26px rgba(20,205,156,0.45); }
  .briefing-form .form-submit:active { box-shadow: 0 6px 18px rgba(20,205,156,0.25); }
}

/* =====================================================================
   PORTFOLIO + PRODUCT PAGES  (added — reuses tokens/components above)
   ===================================================================== */
.section { position: relative; padding: clamp(64px,8vw,120px) var(--gutter); border-bottom: 1px solid var(--border-2); }
.section-head { max-width: 980px; }
.section-head h2 { margin-top: 18px; }
.section-head .body-lg { margin-top: 22px; }
.crumb { position: fixed; left: var(--gutter); top: calc(var(--header-h) + 20px); z-index: 40;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.crumb a:hover { color: var(--accent); }

/* ---- product showcase (home) ---- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 52px;
  background: var(--border-2); border: 1px solid var(--border-2); }
@media (max-width: 860px){ .product-grid { grid-template-columns: 1fr; } }
.product-card { position: relative; background: var(--bg); padding: clamp(28px,3vw,44px);
  display: flex; flex-direction: column; gap: 18px; min-height: 340px; transition: background .35s ease; }
.product-card:hover { background: var(--surface); }
.product-card .pc-top { display: flex; align-items: center; justify-content: space-between; }
.product-card .pc-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-dim); }
.product-card .pc-status { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 2px; color: var(--fg-muted); }
.product-card.flag .pc-status { color: var(--accent); border-color: rgba(20,205,156,.45); }
.product-card h3 { font-size: clamp(26px,2.4vw,36px); }
.product-card .pc-name { display: flex; align-items: baseline; gap: 12px; }
.product-card .pc-name small { font-family: var(--mono); font-size: 12px; letter-spacing:.12em; color: var(--fg-dim); text-transform: uppercase; }
.product-card .pc-line { color: var(--fg-muted); font-weight: 300; font-size: 16px; line-height: 1.5; max-width: 46ch; }
.product-card .pc-specs { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.product-card .pc-specs span { font-family: var(--mono); font-size: 11px; letter-spacing:.04em; color: var(--fg-muted);
  padding: 5px 10px; border: 1px solid var(--border-2); border-radius: 2px; }
.product-card .pc-go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg); margin-top: 6px; }
.product-card .pc-go svg { width: 16px; height: 16px; transition: transform .3s ease; }
.product-card:hover .pc-go svg { transform: translateX(4px); }
.product-card:hover .pc-go { color: var(--accent); }
.product-card .pc-corner { position: absolute; top: 0; left: 0; width: 10px; height: 10px;
  border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); opacity: 0; transition: opacity .35s ease; }
.product-card:hover .pc-corner { opacity: 1; }

/* ---- product page hero ---- */
.phero { position: relative; padding: calc(var(--header-h) + clamp(70px,9vw,140px)) var(--gutter) clamp(48px,6vw,84px); border-bottom: 1px solid var(--border-2); }
.phero .p-cat { color: var(--accent); }
.phero h1 { margin-top: 18px; max-width: 16ch; }
.phero .p-tag { margin-top: 26px; font-size: clamp(19px,1.9vw,26px); font-weight: 300; color: var(--fg); max-width: 30ch; line-height: 1.3; }
.phero .p-one { margin-top: 20px; max-width: 60ch; }
.phero .p-meta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.phero .p-meta span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--fg-muted);
  padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 2px; }

/* ---- capability grid ---- */
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-2); border: 1px solid var(--border-2); margin-top: 40px; }
@media (max-width: 860px){ .cap-grid { grid-template-columns: 1fr; } }
.cap { background: var(--bg); padding: 26px clamp(20px,2vw,30px); display: flex; flex-direction: column; gap: 10px; }
.cap .cap-n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .12em; }
.cap h4 { font-size: 18px; }
.cap p { color: var(--fg-muted); font-weight: 300; font-size: 14.5px; line-height: 1.55; }

/* ---- spec / two-column comparison table ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec { width: 100%; min-width: 480px; border-collapse: collapse; margin-top: 34px; font-size: 14.5px; }
.spec th, .spec td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border-2); vertical-align: top; }
.spec thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); font-weight: 400; }
.spec td.k { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--fg-muted); white-space: nowrap; }
.spec td { color: var(--fg-muted); font-weight: 300; }
.spec .cur { color: var(--fg); }
.spec .tgt { color: var(--accent); }
@media (max-width: 560px) { .spec { margin-top: 24px; } }

/* ---- operational sequence chips ---- */
.seq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 34px; }
.seq span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--fg); padding: 8px 12px; border: 1px solid var(--border); border-radius: 2px; }
.seq span.commit { color: var(--red); border-color: rgba(255,90,77,.5); }
.seq b { color: var(--fg-dim); font-family: var(--mono); font-weight: 400; }

/* ---- feature list ---- */
.flist { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
@media (max-width: 760px){ .flist { grid-template-columns: 1fr; } }
.flist li { display: flex; gap: 12px; font-size: 15px; color: var(--fg-muted); font-weight: 300; line-height: 1.5; }
.flist li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; background: var(--accent); }
.flist li b { color: var(--fg); font-weight: 500; }

/* ---- color-semantics legend (optical track) ---- */
.legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
.legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* ---- signature visual figure ---- */
.figure { margin-top: 40px; border: 1px solid var(--border-2); border-radius: 4px; overflow: hidden;
  background: var(--surface); box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); }
.figure img { width: 100%; display: block; }
.figcap { margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--fg-dim); }
.figcap b { color: var(--fg-muted); font-weight: 500; }
/* compact chip rows replace long prose lists */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chips span { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--fg-muted);
  padding: 8px 13px; border: 1px solid var(--border-2); border-radius: 2px; }
.chips span b { color: var(--fg); font-weight: 500; }
.chips.tight span { font-size: 12px; padding: 6px 11px; }

/* ---- active engagements ---- */
.engage-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,4vw,64px); align-items: center; margin-top: 46px; }
@media (max-width: 860px){ .engage-grid { grid-template-columns: 1fr; } }
.engage-copy .body-lg { margin-bottom: 24px; }
.engage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.engage-list li { display: flex; gap: 14px; align-items: flex-start; }
.engage-list .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; padding-top: 3px; min-width: 92px; }
.engage-list .v { color: var(--fg-muted); font-weight: 300; font-size: 15.5px; line-height: 1.5; }
.engage-list .v b { color: var(--fg); font-weight: 500; }
.engage-panel { position: relative; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  padding: 34px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.engage-panel .crest { width: min(320px, 78%); border-radius: 4px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }
.engage-panel .badge-live { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  padding: 5px 11px; border: 1px solid rgba(20,205,156,.4); border-radius: 2px; background: rgba(20,205,156,.05); }
.engage-panel .badge-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.engage-panel .cap { text-align: center; }
.engage-panel .cap .org { font-family: var(--display); font-size: 17px; color: var(--fg); }
.engage-panel .cap .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); margin-top: 4px; }

/* ---- generic Indian Army crest strip (bottom of home) ---- */
.mil-strip { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: clamp(40px,5vw,64px) var(--gutter); border-top: 1px solid var(--border-2); text-align: center; }
.mil-strip img { width: 84px; height: auto; opacity: 0.9; }
.mil-strip .cap { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }

/* ---- colored metric tiles (Eagle-style stat colour) ---- */
.metrics { display: flex; flex-wrap: wrap; gap: clamp(26px,4.2vw,58px); margin-top: 34px; }
.metric { display: flex; flex-direction: column; gap: 7px; }
.metric .n { font-family: var(--display); font-weight: 400; font-size: clamp(30px,3.3vw,46px); line-height: 1; letter-spacing: -0.02em; color: var(--fg); }
.metric .n .u { font-size: 0.5em; color: var(--fg-dim); margin-left: 1px; }
.metric .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-dim); }
.metric.teal  .n { color: var(--accent); }
.metric.amber .n { color: var(--amber); }
.metric.red   .n { color: var(--red); }

/* contain the signature dashboards so they read graceful, not full-bleed */
.figure { max-width: 1060px; }
.figcap { max-width: 1060px; }

/* engagement crest — small + graceful */
.engage-panel { padding: 26px 26px 22px; gap: 12px; }
.engage-panel .crest { width: 128px; border-radius: 3px; }
.engage-panel .cap .org { font-size: 15px; }
.engage-panel .badge-live { top: 14px; right: 14px; }

/* refine engagement panel — neat logo card, no heavy shadow */
.engage-panel { padding: 30px; gap: 16px; }
.engage-panel .crest { width: 140px; box-shadow: none; border: 1px solid rgba(255,255,255,.08); }
.engage-panel .cap .sub { color: var(--accent); opacity: .8; }
.engage-panel .cap { background: transparent; padding: 0; }

/* ---- active-engagement logo strip (compact, reference-style) ---- */
#engagements { padding-top: clamp(46px,5vw,70px); padding-bottom: clamp(46px,5vw,70px); }
.logo-strip { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 26px; }
.logo-card { width: 200px; height: 104px; border-radius: 8px; background: #ffffff;
  border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 14px 34px -22px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.logo-card img { max-height: 66px; max-width: 100%; object-fit: contain; }
@media (max-width: 560px){ .logo-card { width: 100%; } }

/* ---- refinements: greyish logo card + name, tighter section rhythm ---- */
.logo-card { background: #d3d5da; flex-direction: column; gap: 9px; height: auto; min-height: 118px;
  padding: 16px 18px 13px; box-shadow: 0 14px 34px -24px rgba(0,0,0,0.85); }
.logo-card img { max-height: 60px; }
.logo-card .logo-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: #2b2d35; }

/* tighter than before — closer to Eagle's density */
.section { padding: clamp(50px,5.6vw,88px) var(--gutter); }
.phero { padding: calc(var(--header-h) + clamp(52px,6.5vw,104px)) var(--gutter) clamp(38px,4.6vw,60px); }
.section-head h2 { font-size: clamp(25px,2.7vw,40px); }
.section-head .body-lg { font-size: clamp(15.5px,1.25vw,18px); }
.phero h1 { font-size: clamp(38px,4.6vw,68px); }
.phero .p-one { font-size: clamp(16px,1.35vw,19px); }

/* ---- home contact info column ---- */
.contact-lines { display: flex; flex-direction: column; gap: 22px; }
.contact-lines > div { display: flex; flex-direction: column; gap: 5px; }
.contact-lines span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-dim); }
.contact-lines b, .contact-lines a { font-size: 17px; color: var(--fg); font-weight: 400; }
.contact-lines a:hover { color: var(--accent); }
/* company schematic */
.sov-figure { margin-top: 40px; border: 1px solid var(--border-2); border-radius: 6px; overflow: hidden; background: var(--surface); max-width: 1000px; }
.sov-figure img { width: 100%; display: block; }

/* 5-product layout: flagship spans full width, four others in 2x2 */
.product-card.flag { grid-column: 1 / -1; min-height: 190px; }

/* ---- hero video: keep colour, darken for legibility (home + product pheros) ---- */
.hero-bg .hero-video { filter: brightness(0.5) contrast(1.05) saturate(0.92); }
.phero { overflow: hidden; }
.phero > *:not(.hero-bg) { position: relative; z-index: 1; }
.phero .hero-bg { top: 0; }
.phero .hero-bg::after {
  background:
    linear-gradient(90deg, rgba(11,11,14,0.95) 32%, rgba(11,11,14,0.55) 66%, rgba(11,11,14,0.32) 100%),
    linear-gradient(180deg, rgba(11,11,14,0.75) 0%, transparent 22%, transparent 66%, rgba(11,11,14,0.9) 100%);
}

/* ── Product hero → matches the home page-header "standard" ──
   Tall, full-bleed video with content anchored to the bottom-left
   and tactical corner callouts (hero-callouts already start below nav). */
.phero {
  min-height: calc(100svh - var(--header-h));
  max-height: 1100px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 72px) var(--gutter) clamp(44px, 5vw, 66px);
}
.phero .p-cat { margin-bottom: 18px; }
.phero .p-one { max-width: 62ch; margin-top: 22px; }
.phero .metrics { margin-top: 34px; }
/* keep the corner callouts pinned to the hero corners (phero is a flex column,
   so re-assert absolute full-span here) */
.phero .hero-callouts {
  position: absolute; top: var(--header-h); left: 0; right: 0; bottom: 0;
  height: auto;
}

/* Hero text sits lower + metrics dialled down toward the Eagle stat-tile scale */
.phero { padding-bottom: clamp(30px, 3.4vw, 46px); }
.phero .metrics { margin-top: 26px; gap: clamp(22px, 3.4vw, 48px); }
.phero .metric .n { font-size: clamp(23px, 2.3vw, 33px); }
.phero .metric .l { font-size: 10px; letter-spacing: 0.1em; }

/* Compress the hero text into a tight bottom band so the full video is visible above it */
.phero { padding-bottom: clamp(22px, 2.6vw, 36px); }
.phero .p-cat { margin-bottom: 10px; }
.phero h1 { font-size: clamp(30px, 3.5vw, 52px); margin-top: 10px; }
.phero .p-one { margin-top: 14px; font-size: clamp(15px, 1.25vw, 18px); }
.phero .metrics { margin-top: 18px; }
/* metrics now occupy the bottom-left band → drop the bottom-left callout to avoid overlap */
.phero .hc.bl { display: none; }

/* ─────────── Products hover-reveal (Anduril-style: text → media opens up) ─────────── */
.reveal { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4vw, 68px);
  margin-top: 48px; align-items: start; }
.reveal-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.reveal-row { display: block; position: relative; padding: clamp(16px, 1.9vw, 26px) 0;
  border-bottom: 1px solid var(--border); color: var(--fg); text-decoration: none;
  transition: opacity .35s ease; }
.reveal-row:not(.active) { opacity: .42; }
.reveal-row:not(.active):hover { opacity: .7; }
.reveal-row::before { content: ""; position: absolute; left: -18px; top: 50%; width: 3px; height: 0;
  background: var(--accent); transform: translateY(-50%); transition: height .35s ease; }
.reveal-row.active::before { height: 66%; }
.reveal-row .rr-top { display: flex; align-items: center; gap: 14px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 9px; }
.reveal-row .rr-idx { color: var(--accent); }
.reveal-row .rr-name { font-family: var(--display); font-size: clamp(28px, 3.6vw, 54px);
  line-height: .98; letter-spacing: -.025em; font-weight: 600; margin: 0; }
.reveal-row .rr-desc { max-height: 0; opacity: 0; overflow: hidden; margin: 0; max-width: 50ch;
  color: var(--fg-muted); font-size: 14.5px; line-height: 1.5;
  transition: max-height .5s ease, opacity .4s ease, margin-top .5s ease; }
.reveal-row.active .rr-desc { max-height: 130px; opacity: 1; margin-top: 14px; }

.reveal-stage { position: relative; border: 1px solid var(--border-2); border-radius: 6px;
  overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10; min-height: 360px;
  position: sticky; top: 96px; }
.reveal-media { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 100% 0 0);
  transition: clip-path .6s cubic-bezier(.16,1,.3,1), opacity .45s ease; }
.reveal-media.active { opacity: 1; clip-path: inset(0 0 0 0); }
.reveal-media video { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.64) contrast(1.04) saturate(.95); }
.reveal-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(11,11,14,.92) 100%); }
.rm-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(16px, 2.2vw, 26px); display: flex; justify-content: space-between;
  align-items: flex-end; gap: 18px; }
.rm-specs { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-specs span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px; background: rgba(11,11,14,.45); }
.rm-go { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap; }

@media (max-width: 900px) {
  .reveal { grid-template-columns: 1fr; gap: 0; }
  .reveal-stage { display: none; }
  .reveal-row { opacity: 1 !important; }
  .reveal-row::before { display: none; }
  .reveal-row .rr-desc { max-height: 200px; opacity: 1; margin-top: 12px; }
}

/* ─────────── Across every domain (Warp-Speed-style blueprint band) ─────────── */
.domains-stage { position: relative; margin: clamp(18px, 2.4vw, 32px) auto 0;
  max-width: 720px;
  border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; background: #0b0b0e;
  box-shadow: 0 24px 70px -34px rgba(0,0,0,0.85); }
.domains-figure { margin: 0; }
.domains-figure img { width: 100%; display: block; }
/* glass title bar — floating top-left, headline on one line */
.domains-card { position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; flex-direction: column; gap: 5px;
  padding: 13px 20px; border-radius: 12px;
  background: rgba(22,25,32,0.34);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 34px -14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); }
.domains-card .dc-k { font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.domains-card .dc-t { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.01em;
  color: var(--fg); font-size: clamp(15px, 1.55vw, 21px); line-height: 1.1; white-space: nowrap; }
.domains-card .dc-t br { display: none; }
.domains-card .dc-arrow { color: var(--accent); font-weight: 400; }
.domains-card .dc-sub { max-height: 0; opacity: 0; overflow: hidden; margin: 0; color: var(--fg-muted);
  font-size: 12px; line-height: 1.5; max-width: 40ch;
  transition: max-height .5s ease, opacity .4s ease, margin-top .5s ease; }
.domains-stage:hover .dc-sub, .domains-stage:focus-within .dc-sub { max-height: 90px; opacity: 1; margin-top: 11px; }
/* giant wordmark band (tighter) */
.domains-wordmark { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 48px);
  margin-top: clamp(22px, 3vw, 42px); padding: clamp(20px, 2.6vw, 40px) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 8vw, 108px); line-height: .9; letter-spacing: -.03em; color: var(--fg);
  white-space: nowrap; overflow: hidden; }
.domains-wordmark .wm-star { flex: none; width: clamp(24px, 4.2vw, 66px); height: clamp(24px, 4.2vw, 66px);
  color: var(--fg); opacity: .9; }
@media (max-width: 760px) { .domains-card { max-width: calc(100% - 32px); }
  .domains-card .dc-t { white-space: normal; }
  .domains-wordmark { font-size: clamp(28px, 11vw, 56px); flex-wrap: wrap; row-gap: 8px; } }
.domains-strip { display: grid; grid-template-columns: 0.9fr 1.25fr 1.1fr;
  gap: clamp(24px, 3.6vw, 60px); margin-top: clamp(30px, 3.4vw, 46px);
  padding-top: 26px; border-top: 1px solid var(--border); }
.domains-strip .ds-col { display: flex; flex-direction: column; gap: 9px; }
.domains-strip .ds-k { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-dim); }
.domains-strip .ds-v { font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); }
.domains-strip .ds-v b { color: var(--accent); font-weight: 500; }
@media (max-width: 760px) {
  .domains-strip { grid-template-columns: 1fr; gap: 22px; }
}

/* ═══════════ Tier-1 signature motion ═══════════ */
/* directional reveal variants (compose with .fade-up) */
.fade-up.from-left  { transform: translate(-30px, 0); }
.fade-up.from-right { transform: translate(30px, 0); }
.fade-up.from-left.in, .fade-up.from-right.in { transform: none; }

/* staggered cascade — children animate in sequence when parent enters */
.stagger > * { opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.stagger.in > *:nth-child(3) { transition-delay: .20s; }
.stagger.in > *:nth-child(4) { transition-delay: .28s; }
.stagger.in > *:nth-child(5) { transition-delay: .36s; }
.stagger.in > *:nth-child(6) { transition-delay: .44s; }

/* clip-path wipe reveal for figures/diagrams (draw-in feel) */
.reveal-wipe { clip-path: inset(0 0 100% 0); opacity: .001;
  transition: clip-path 1.1s cubic-bezier(.16,1,.3,1), opacity .7s ease; }
.reveal-wipe.in { clip-path: inset(0 0 0 0); opacity: 1; }

/* parallax layer (JS drives --py). Uses the independent `translate` property so it
   composes with any `transform` (e.g. .fade-up) instead of being overridden. */
[data-parallax] { will-change: transform; translate: 0 var(--py, 0px); }

@media (prefers-reduced-motion: reduce) {
  .stagger > *, .reveal-wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-parallax] { translate: none !important; }
}

/* ═══════════ Giant statement band (typographic rhythm) ═══════════ */
.statement-band { padding: clamp(64px, 11vw, 170px) 0; overflow: hidden; }
.statement { margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(46px, 9.2vw, 150px); line-height: .96; letter-spacing: -.035em; color: var(--fg); }
.statement .sb-line { display: block; }
.statement .sb-out { color: transparent; -webkit-text-stroke: 1.4px var(--fg-dim); text-stroke: 1.4px var(--fg-dim); }

/* ═══════════ Nav link hover — teal underline grows in ═══════════ */
.nav-bar ul a { position: relative; }
.nav-bar ul a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1px; background: var(--accent); transition: right .38s cubic-bezier(.16,1,.3,1); }
.nav-bar ul a:hover::after, .nav-bar ul a:focus-visible::after { right: 0; }

/* ─────────── Footer social links ─────────── */
.foot-social { display: flex; gap: 10px; margin-top: 18px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--fg-muted); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.foot-social a:hover { color: var(--accent); border-color: var(--accent); background: rgba(20,205,156,0.07); }
.foot-social svg { width: 17px; height: 17px; display: block; }

/* ─────────── Newsletter ─────────── */
.newsletter { position: relative; overflow: hidden; }
/* dedicated newsletter page: this section is the page's first, so clear the fixed nav like a hero */
.nl-page-hero { padding-top: calc(var(--header-h) + clamp(52px, 6.5vw, 104px)); min-height: calc(100svh - var(--header-h)); }
.newsletter .nl-glow { position: absolute; z-index: 0; pointer-events: none;
  left: 6%; top: 14%; width: 52%; height: 78%;
  background: radial-gradient(ellipse at 40% 45%, rgba(20,205,156,0.18), transparent 66%);
  filter: blur(46px); }
.newsletter .nl-inner { position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 80px);
  align-items: center; border-radius: 18px; padding: clamp(30px, 4vw, 60px);
  background: rgba(20, 23, 30, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 32px 90px -44px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05); }
.newsletter .nl-copy h5 { color: var(--accent); }
.newsletter .nl-copy h2 { margin: 16px 0 14px; font-size: clamp(24px, 2.7vw, 38px); }
.newsletter .nl-copy p { max-width: 52ch; }
.newsletter .nl-points { list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px; }
.newsletter .nl-points li { position: relative; padding-left: 26px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); }
.newsletter .nl-points li::before { content: ""; position: absolute; left: 0; top: 0;
  width: 15px; height: 15px; border: 1px solid var(--accent); border-radius: 4px; opacity: .8; }
.newsletter .nl-points li::after { content: ""; position: absolute; left: 5px; top: 3px;
  width: 4px; height: 7px; border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(45deg); }
.newsletter .nl-field { display: flex; gap: 10px; }
.newsletter .nl-field input { flex: 1; min-width: 0; height: 52px; padding: 0 18px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg);
  font-family: var(--mono); font-size: 14px; transition: border-color .2s ease; }
.newsletter .nl-field input:focus { outline: none; border-color: var(--accent); }
.newsletter .nl-submit { flex: none; height: 52px; padding: 0 22px; border: none; border-radius: 6px;
  background: var(--accent); color: #04120d; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: filter .2s ease, transform .2s ease; }
.newsletter .nl-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.newsletter .nl-note { margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--fg-dim); }
@media (max-width: 820px) { .newsletter .nl-inner { grid-template-columns: 1fr; } }

/* ─────────── Giant ASTIRON brand signature (below footer) ─────────── */
.brand-sig { overflow: hidden; background: var(--bg); padding: 0 0 clamp(8px, 1.2vw, 20px); }
.brand-sig-word { display: flex; justify-content: center; align-items: flex-end;
  font-family: var(--mono); font-weight: 500; color: var(--fg);
  line-height: .9; letter-spacing: 0; gap: 0.12em; font-size: clamp(40px, 14.5vw, 210px);
  white-space: nowrap; }
.brand-sig-word span { display: inline-block; transform: translateY(118%); opacity: 0;
  transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
.brand-sig-word.in span { transform: translateY(0); opacity: 1; }
.brand-sig-word.in span:nth-child(1){ transition-delay:.00s }
.brand-sig-word.in span:nth-child(2){ transition-delay:.05s }
.brand-sig-word.in span:nth-child(3){ transition-delay:.10s }
.brand-sig-word.in span:nth-child(4){ transition-delay:.15s }
.brand-sig-word.in span:nth-child(5){ transition-delay:.20s }
.brand-sig-word.in span:nth-child(6){ transition-delay:.25s }
.brand-sig-word.in span:nth-child(7){ transition-delay:.30s }
@media (prefers-reduced-motion: reduce) { .brand-sig-word span { transform: none; opacity: 1; } }

/* ─────────── "Inside the wire." writes itself in (L→R draw + pen tip) ─────────── */
.statement .sb-out {
  display: inline-block; position: relative;
  opacity: 1 !important; transform: none !important;
  clip-path: inset(-0.1em 100% -0.2em -0.1em);
  transition: clip-path 2.1s cubic-bezier(.33, 0, .13, 1) .25s;
}
.statement .sb-out.in { clip-path: inset(-0.1em 0 -0.2em -0.1em); }
.statement .sb-out::after {
  content: ""; position: absolute; top: 6%; bottom: 12%; left: 0; width: 3px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent); opacity: 0;
}
.statement .sb-out.in::after { animation: sb-pen 2.1s cubic-bezier(.33, 0, .13, 1) .25s forwards; }
@keyframes sb-pen {
  0%   { left: 0;    opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .statement .sb-out { clip-path: none; transition: none; }
  .statement .sb-out::after { display: none; }
}

/* keep flag inline with "Made in India" on one line */
.foot-bottom { flex-wrap: wrap; gap: 12px 16px; }
.foot-bottom .made-in { display: inline-flex; align-items: center; white-space: nowrap; }
.foot-bottom .made-in .in-flag { flex: none; }

/* ─────────── Glass newsletter entry strips (top + domains) ─────────── */
.nl-strip-wrap { padding: 0 var(--gutter); }
.nl-strip-wrap.top { margin: clamp(28px, 4vw, 56px) 0 clamp(8px, 2vw, 24px); }
.nl-strip-wrap.in-domains { margin-top: clamp(24px, 3vw, 40px); }
.nl-strip { max-width: 980px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 48px);
  padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 26px); border-radius: 14px;
  background: rgba(22, 25, 32, 0.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 40px -18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); }
.nl-strip-copy { display: flex; flex-direction: column; gap: 3px; }
.nl-strip-k { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.nl-strip-t { font-family: var(--display); font-weight: 500; font-size: clamp(15px, 1.5vw, 19px); color: var(--fg); }
.nl-strip-form { display: flex; gap: 8px; flex: none; }
.nl-strip-form input[type="email"] { height: 46px; width: clamp(180px, 22vw, 280px); padding: 0 16px;
  background: rgba(0,0,0,0.32); border: 1px solid var(--border); border-radius: 9px;
  color: var(--fg); font-family: var(--mono); font-size: 13px; transition: border-color .2s ease; }
.nl-strip-form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.nl-strip-btn { height: 46px; padding: 0 20px; border: none; border-radius: 9px;
  background: var(--accent); color: #04120d; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: filter .2s ease, transform .2s ease; }
.nl-strip-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 720px) {
  .nl-strip { flex-direction: column; align-items: stretch; }
  .nl-strip-form { flex-direction: column; }
  .nl-strip-form input[type="email"] { width: 100%; }
}

/* ═══════════ Field Notes (newsletter hub + articles) ═══════════ */
.fn-hero { padding: calc(var(--header-h) + clamp(40px,7vw,90px)) var(--gutter) clamp(20px,3vw,40px); max-width: 1000px; margin: 0 auto; }
.fn-hero h1 { font-size: clamp(38px, 5.4vw, 78px); letter-spacing: -.025em; margin: 16px 0 18px; }
.fn-hero .fn-lede { max-width: 60ch; font-size: clamp(16px,1.4vw,19px); color: var(--fg-muted); line-height: 1.55; }
.fn-list { max-width: 1000px; margin: 0 auto; padding: clamp(30px,4vw,56px) var(--gutter) clamp(60px,8vw,110px);
  display: flex; flex-direction: column; }
.fn-card { display: block; padding: clamp(24px,3vw,38px) 0; border-top: 1px solid var(--border); text-decoration: none;
  color: var(--fg); position: relative; transition: opacity .25s ease; }
.fn-card:last-child { border-bottom: 1px solid var(--border); }
.fn-card:hover { opacity: .78; }
.fn-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
.fn-num { color: var(--accent); }
.fn-chip { border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; color: var(--fg-muted); letter-spacing: .12em; }
.fn-card h3 { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.02em; margin: 0 0 10px; max-width: 26ch; }
.fn-card p { color: var(--fg-muted); max-width: 62ch; font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
.fn-read { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* Article (reading) layout */
.article { max-width: 720px; margin: 0 auto; padding: calc(var(--header-h) + clamp(36px,6vw,80px)) var(--gutter) clamp(20px,3vw,40px); }
.fn-back { display: inline-block; margin-bottom: 26px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); text-decoration: none; }
.fn-back:hover { color: var(--accent); }
.article-meta { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 20px; }
.article h1 { font-size: clamp(30px, 4.2vw, 54px); letter-spacing: -.025em; line-height: 1.06; margin: 0 0 20px; }
.article-dek { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.5; color: var(--fg-muted); margin: 0 0 24px; font-weight: 300; }
.article-byline { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-dim); padding-bottom: 30px; border-bottom: 1px solid var(--border); margin-bottom: 34px; }
.article-body { font-size: 17px; line-height: 1.72; color: var(--fg-muted); }
.article-body h2 { font-family: var(--display); color: var(--fg); font-size: clamp(21px,2.2vw,28px);
  letter-spacing: -.015em; margin: 40px 0 14px; }
.article-body p { margin: 0 0 20px; }
.article-body strong { color: var(--fg); font-weight: 600; }
.article-body a { color: var(--accent); }
.article-body ul { margin: 0 0 20px; padding-left: 20px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent);
  font-family: var(--display); font-size: clamp(20px,2.1vw,26px); line-height: 1.4; color: var(--fg); font-weight: 400; }
.article-end { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }

/* ═══════════════════ SITE-WIDE GLASS ═══════════════════ */
/* Nav — frosted glass at all times (stronger when scrolled) */
.nav-bar { background: rgba(11,11,14,0.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-bar.scrolled { background: rgba(11,11,14,0.62); border-bottom-color: rgba(255,255,255,0.09); }
.menu-cta { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Capability cards → glass */
.cap-grid { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.cap { background: rgba(26,29,38,0.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

/* Intake / briefing form → glass */
.briefing-form { background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(22,25,32,0.34) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.12); }

/* Eagle console tiles → glass */
.stat-tile { background: rgba(26,29,38,0.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border-color: rgba(255,255,255,0.1); }

/* Sovereign figure + engagement panel → glass frame */
.sov-figure, .figure { border-color: rgba(255,255,255,0.1); }
.engage-panel { background: rgba(26,29,38,0.4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255,255,255,0.12); }

/* Form fields → subtle glass */
.field input, .field select, .field textarea {
  background: rgba(255,255,255,0.035); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.field input:focus, .field select:focus, .field textarea:focus { background: rgba(255,255,255,0.05); }

/* Chips / tags → subtle glass */
.pc-status, .fn-chip, .rm-specs span, .chip {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ── domains section: weekly newsletter on top + wordmark/3-items row ── */
.domains-warp { padding-top: clamp(40px, 4.4vw, 68px); padding-bottom: clamp(40px, 4.4vw, 68px); }
.domains-warp .dom-news { margin: 0 0 clamp(22px, 3vw, 40px); padding: 0; }
.domains-warp .dom-news .nl-strip-t::after { content: ""; }
.domains-warp .domains-stage { margin-top: clamp(10px, 1.4vw, 18px); }

/* ── Newsletter as a big typographic block (no box) ── */
.newsletter .nl-big { max-width: 1100px; }
.newsletter .nl-big .global-label { color: var(--accent); }
.newsletter .nl-headline { font-family: var(--display); font-weight: 600;
  font-size: clamp(36px, 6.6vw, 104px); line-height: .98; letter-spacing: -.03em; color: var(--fg);
  margin: 18px 0 22px; }
.newsletter .nl-sub { max-width: 62ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--fg-muted); }
.newsletter .nl-big-form { margin-top: clamp(28px, 3.6vw, 46px); }
.newsletter .nl-big-field { display: flex; gap: 12px; max-width: 580px; }
.newsletter .nl-big-field input { flex: 1; min-width: 0; height: 56px; padding: 0 20px;
  background: rgba(255,255,255,0.04); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 8px; color: var(--fg);
  font-family: var(--mono); font-size: 15px; transition: border-color .2s ease; }
.newsletter .nl-big-field input:focus { outline: none; border-color: var(--accent); }
.newsletter .nl-big-btn { flex: none; height: 56px; padding: 0 26px; border: none; border-radius: 8px;
  background: var(--accent); color: #04120d; font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: filter .2s ease, transform .2s ease; }
.newsletter .nl-big-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.newsletter .nl-note { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--fg-dim); }
@media (max-width: 620px) {
  .newsletter .nl-big-field { flex-direction: column; }
  .newsletter .nl-big-field input[type="email"] { flex: none; width: 100%; height: 54px; }
  .newsletter .nl-big-btn { width: 100%; height: 54px; }
}

/* ── domains: newsletter-style header + image-left / 3-pointers-right split ── */
.dom-head-row { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: clamp(18px, 2.2vw, 32px); }
.dom-head-row .dom-head { margin-bottom: 0; }
.domains-warp .dom-head { max-width: 1100px; }
.domains-warp .dom-head .global-label { color: var(--accent); }
/* top-right "Newsletter →" pill, mirrors the nav CTA treatment */
.dom-head-nl { display: inline-flex; align-items: center; gap: 10px; flex: none;
  margin-top: 6px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255,255,255,0.03); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--fg); text-decoration: none; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .25s ease, color .25s ease, background .25s ease; }
.dom-head-nl:hover { border-color: var(--accent); color: var(--accent); background: rgba(20,205,156,0.08); }
.dom-head-nl:hover .dom-nl-arrow svg { transform: translateX(4px); }
@media (max-width: 760px) {
  .dom-head-row { flex-direction: column; gap: 16px; }
  .dom-head-nl { margin-top: 0; }
}
.domains-warp .dom-headline { font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.02em; color: var(--fg);
  margin: 10px 0 12px; }
.domains-warp .dom-sub { max-width: 56ch; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; color: var(--fg-muted); }

.dom-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.7fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; }
/* image → left column, large — fills the column, no longer centered/capped */
.dom-split .domains-stage { max-width: none; width: 100%; margin: 0; }
/* 3 pointers → stacked on the right */
.dom-split .domains-strip { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px);
  margin: 0; padding: 0; border: none; max-width: none; }
@media (max-width: 860px) { .dom-split { grid-template-columns: 1fr; gap: 30px; } }

/* smooth-scroll anchors land below the fixed nav */
html { scroll-behavior: smooth; }
:target, #newsletter, #products, #company, #contact { scroll-margin-top: calc(var(--header-h) + 24px); }

/* newsletter button (right column of domains) */
.dom-nl-btn { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  margin-top: 4px; padding: 13px 20px; border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255,255,255,0.03); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--fg); text-decoration: none; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .25s ease, color .25s ease, background .25s ease; }
.dom-nl-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(20,205,156,0.08); }
.dom-nl-arrow { display: inline-flex; }
.dom-nl-arrow svg { width: 16px; height: 16px; transition: transform .25s ease; }
.dom-nl-btn:hover .dom-nl-arrow svg { transform: translateX(4px); }

/* ═══════════════════════ Field Notes (hub + article pages) ═══════════════════════ */
/* hub hero */
.fn-hub-hero { padding-top: calc(var(--header-h) + clamp(48px, 6vw, 96px)); }
.fn-hub-list { padding-top: clamp(30px, 3.6vw, 56px); }
.fn-hub-hero .fn-hub-title { font-family: var(--display); font-weight: 600;
  font-size: clamp(32px, 4.6vw, 62px); line-height: 1.05; letter-spacing: -.02em; color: var(--fg);
  margin: 14px 0 16px; max-width: 16ch; }
.fn-hub-hero .fn-hub-sub { max-width: 60ch; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; color: var(--fg-muted); margin-bottom: 26px; }

/* hub grid — magazine image tiles: full-bleed photo + bottom text overlay */
.fn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.6vw, 22px); margin-top: 8px; }
.fn-card { position: relative; display: block; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--border-2); background: var(--surface); text-decoration: none;
  aspect-ratio: 16 / 10; isolation: isolate; transition: border-color .3s ease, transform .3s ease; }
.fn-card:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-3px); }
/* the photo */
.fn-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  z-index: 0; filter: saturate(1.02) brightness(.9);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.fn-card:hover .fn-card-img { transform: scale(1.05); filter: saturate(1.08) brightness(1); }
/* bottom scrim so text stays legible over any image */
.fn-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(6,8,11,0.94) 0%, rgba(6,8,11,0.74) 26%,
    rgba(6,8,11,0.30) 52%, rgba(6,8,11,0.04) 74%, transparent 100%); }
/* text stack, anchored to the bottom of the image */
.fn-card-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 9px; }
.fn-card-date { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.fn-card-title { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.24;
  color: #fff; margin: 0; letter-spacing: -.01em; max-width: 28ch; text-shadow: 0 1px 22px rgba(0,0,0,.55); }
.fn-card-dek { color: rgba(255,255,255,0.74); font-weight: 300; font-size: 14px; line-height: 1.5; margin: 0; max-width: 48ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fn-card-more { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.62);
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; transition: color .25s ease, transform .25s ease; }
.fn-card:hover .fn-card-more { color: var(--accent); transform: translateX(3px); }
@media (max-width: 720px) { .fn-grid { grid-template-columns: 1fr; } .fn-card { aspect-ratio: 16 / 11; } }

/* article hero */
.fn-article-hero { padding-top: calc(var(--header-h) + clamp(40px, 5.4vw, 84px)); padding-bottom: clamp(24px, 3vw, 40px); }
.fn-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2.2vw, 30px); }
.fn-back { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none; transition: color .2s ease; }
.fn-back:hover { color: var(--accent); }
.fn-date { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
.fn-title { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 4vw, 52px);
  line-height: 1.08; letter-spacing: -.02em; color: var(--fg); margin: 14px 0 18px; max-width: 20ch; }
.fn-dek { max-width: 62ch; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: var(--fg-muted); }

/* article body typography */
/* ── Article long-form read: centred column, editorial rhythm ── */
.fn-article { padding-top: clamp(44px, 5.2vw, 76px); }
.fn-body { max-width: 46rem; margin: 0 auto; }
.fn-body p { font-size: 17.5px; line-height: 1.8; color: rgb(198, 200, 211); font-weight: 300; margin: 0 0 26px; }
/* TL;DR / lead standfirst */
.fn-body > p:first-child { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.62; color: var(--fg);
  font-weight: 400; margin-bottom: clamp(34px, 4vw, 48px); padding-bottom: clamp(28px, 3.2vw, 40px);
  border-bottom: 1px solid var(--border-2); }
.fn-body > p:first-child b { color: var(--accent); font-weight: 600; letter-spacing: .01em; }
.fn-body h2 { font-family: var(--display); font-weight: 600; font-size: clamp(23px, 2.4vw, 31px);
  color: var(--fg); letter-spacing: -.015em; line-height: 1.2; margin: clamp(48px, 5.4vw, 64px) 0 18px; }
.fn-body h3 { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--fg); margin: 36px 0 10px; }
.fn-body ul, .fn-body ol { margin: 0 0 26px; padding-left: 22px; }
.fn-body li { font-size: 17.5px; line-height: 1.75; color: rgb(198, 200, 211); font-weight: 300; margin-bottom: 9px; }
.fn-body li b, .fn-body p b { color: var(--fg); font-weight: 500; }
/* callout → pull-quote */
.fn-body .fn-callout { margin: clamp(40px, 5vw, 56px) 0; padding: 6px 0 6px clamp(24px, 2.6vw, 32px);
  border-left: 3px solid var(--accent); background: none; font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.42; color: var(--fg); font-weight: 400; letter-spacing: -.01em; }
.fn-body .fn-faq-q { color: var(--fg); }
.fn-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(32px, 4vw, 48px) 0 0;
  padding-top: clamp(28px, 3.2vw, 40px); border-top: 1px solid var(--border-2); }
.fn-tags span { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; text-transform: uppercase; }

/* article footer CTA — aligned to the reading column, subtle glass */
.fn-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 46rem; margin: clamp(48px, 5.5vw, 72px) auto 0;
  border: 1px solid var(--border-2); border-radius: 16px; padding: clamp(26px, 3vw, 38px);
  background: linear-gradient(135deg, rgba(20,205,156,0.06) 0%, rgba(255,255,255,0.02) 46%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fn-cta p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--fg-muted); }
.fn-cta h4 { margin: 0 0 8px; font-family: var(--display); font-size: 20px; color: var(--fg); letter-spacing: -.01em; }

/* ── newsletter 2-column (text + blueprint image) ── */
.newsletter .nl-2col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.newsletter .nl-2col .nl-headline { font-size: clamp(28px, 3.7vw, 58px); }
.newsletter .nl-img-col img { width: 100%; display: block; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 80px -44px rgba(0,0,0,.8); }
@media (max-width: 860px) {
  .newsletter .nl-2col { grid-template-columns: 1fr; gap: 30px; }
  .newsletter .nl-img-col { order: -1; }
}

/* portrait newsletter blueprint — constrain height, center in its column */
.newsletter .nl-2col { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.newsletter .nl-img-col { display: flex; justify-content: center; }
.newsletter .nl-img-col img { width: auto; max-width: 100%; max-height: 560px; }
/* keep this collapse LAST so it beats the unconditional 2-col rule above */
@media (max-width: 860px) {
  .newsletter .nl-2col { grid-template-columns: 1fr; gap: 30px; }
  .newsletter .nl-img-col { order: -1; }
  .newsletter .nl-img-col img { max-height: 340px; }
}

/* Field Notes hero / hub banner images */
/* ── Field Notes hero: full-bleed image with the text overlaid on the bottom ── */
.fn-hero-media { position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(460px, 66vh, 660px); display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + clamp(48px, 6vw, 96px)) var(--gutter) clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--border-2); }
.fn-hero-media-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0; }
.fn-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(6,8,11,0.95) 0%, rgba(6,8,11,0.82) 22%,
    rgba(6,8,11,0.52) 46%, rgba(6,8,11,0.2) 72%, rgba(6,8,11,0.42) 100%); }
.fn-hero-inner { position: relative; z-index: 2; width: 100%; }
.fn-hero-media .fn-meta { margin-bottom: clamp(14px, 1.8vw, 22px); }
.fn-hero-media .fn-title,
.fn-hero-media .fn-hub-title { text-shadow: 0 2px 34px rgba(0,0,0,.55); }
.fn-hero-media .fn-dek,
.fn-hero-media .fn-hub-sub { color: rgba(255,255,255,0.84); }
.fn-hero-media .global-label { color: var(--accent); }
@media (max-width: 640px) { .fn-hero-media { min-height: clamp(420px, 76vh, 560px); } }