/* =========================================================
   ZENITH AEROTECH — MASTER DESIGN SYSTEM
   Modern defense technology aesthetic. Dark navy, white,
   Zenith blue, light gray, subtle tactical green accent.
   ========================================================= */

:root{
  --navy-950:#060b14;
  --navy-900:#0a1424;
  --navy-800:#0f1d33;
  --navy-700:#152847;
  --navy-600:#1c3559;
  --blue-500:#2f7bd6;
  --blue-400:#4d97f2;
  --blue-300:#8fc0ff;
  --white:#ffffff;
  --gray-100:#f4f6f9;
  --gray-200:#e4e9f0;
  --gray-300:#c7d0dc;
  --gray-400:#93a1b5;
  --gray-500:#647389;
  --green-500:#3fae6b;
  --green-glow: rgba(63,174,107,0.35);

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1240px;
  --radius: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; zoom:0.8; }
body{
  margin:0;
  background:var(--navy-950);
  color:var(--gray-100);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-400);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--blue-400);
}
h1.display, .display{
  font-size:clamp(2.6rem, 5.2vw, 5rem);
  line-height:1.03;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--white);
}
h2.section-title{
  font-size:clamp(1.9rem, 3.4vw, 3rem);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--white);
}
.subhead{
  font-size:clamp(1.1rem,1.6vw,1.5rem);
  font-weight:600;
  color:var(--gray-300);
}
.lede{
  font-size:1.125rem;
  color:var(--gray-400);
  max-width:640px;
}
.body-on-light{ color:var(--navy-700); }
.mono-tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray-500);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--blue-500); color:var(--white); }
.btn-primary:hover{ background:var(--blue-400); transform:translateY(-1px); }
.btn-outline{ border-color:rgba(255,255,255,.35); color:var(--white); background:transparent; }
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.06); }
.btn-outline.on-light{ border-color:rgba(10,20,36,.3); color:var(--navy-900); }
.btn-outline.on-light:hover{ border-color:var(--navy-900); background:rgba(10,20,36,.05); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
.btn-arrow::after{ content:"→"; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(6,11,20,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:116px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--white); letter-spacing:.02em; }
.logo-emblem{ width:26px; height:26px; display:block; flex-shrink:0; }
.logo-full{ height:100px; width:auto; display:block; }
@media (max-width:640px){ .logo-full{ height:64px; } .nav-row{ height:84px; } }
.primary-nav{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
.nav-item > a, .nav-item > button{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  font-family:inherit; color:var(--gray-300);
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
  padding:12px 14px; text-transform:uppercase;
}
.nav-item > a:hover, .nav-item > button:hover{ color:var(--white); }
.nav-item .caret{ font-size:9px; opacity:.6; }
.mega{
  position:absolute; top:100%; left:0;
  min-width:240px;
  background:var(--navy-800);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  padding:10px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .18s var(--ease);
  box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.nav-item:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega a{
  display:block; padding:9px 12px; border-radius:3px;
  font-size:13.5px; color:var(--gray-300); font-weight:500;
}
.mega a:hover{ background:rgba(255,255,255,.06); color:var(--white); }
.mega-columns{
  display:grid; grid-template-columns:repeat(3, minmax(170px,1fr));
  gap:4px 22px; min-width:560px; padding:18px;
}
.mega-group{ display:flex; flex-direction:column; }
.mega-heading{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray-500);
  padding:9px 12px 8px; margin-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-cta .btn{ padding:11px 20px; font-size:12.5px; }
.menu-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,.25); color:var(--white); border-radius:3px; padding:9px 12px; cursor:pointer; }

@media (max-width: 980px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .nav-cta .btn-outline{ display:none; }
  .primary-nav.open{
    display:flex; flex-direction:column; align-items:stretch;
    position:fixed; inset:76px 0 0 0; background:var(--navy-950);
    padding:10px 24px 40px; overflow-y:auto; gap:0;
  }
  .primary-nav.open .nav-item{ border-bottom:1px solid rgba(255,255,255,.08); }
  .primary-nav.open .mega{ position:static; opacity:1; visibility:visible; transform:none; background:none; border:none; box-shadow:none; padding:0 0 10px 14px; display:none; }
  .primary-nav.open .nav-item.mobile-open .mega{ display:block; }
  .primary-nav.open .mega-columns{ display:none; grid-template-columns:1fr; min-width:0; gap:0; padding:0; }
  .primary-nav.open .nav-item.mobile-open .mega-columns{ display:grid; }
  .mega-heading{ margin-top:10px; }
  .mega-group:first-child .mega-heading{ margin-top:0; }
}

/* ---------- Sections / layout helpers ---------- */
section{ padding:112px 0; position:relative; }
section.tight{ padding:80px 0; }
.section-head{ max-width:760px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.bg-navy{ background:var(--navy-950); }
.bg-navy-alt{ background:var(--navy-900); }
.bg-panel{ background:var(--navy-800); }
.bg-light{ background:var(--gray-100); color:var(--navy-900); }
.bg-light .section-head .lede{ color:var(--gray-500); }
.bg-light h2.section-title{ color:var(--navy-900); }
.divider{ height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

/* ---------- Visual placeholder (stand-in for real photography) ---------- */
.visual{
  position:relative;
  width:100%;
  border-radius:6px;
  overflow:hidden;
  background:
    linear-gradient(160deg, var(--navy-700), var(--navy-900));
  border:1px solid rgba(255,255,255,.08);
  min-height:220px;
  display:flex; align-items:flex-end;
}
.visual img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.visual::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(140,180,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,255,.09) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at 70% 30%, black, transparent 75%);
}
.visual .visual-label{
  position:relative; z-index:2;
  padding:16px 18px;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-300);
  background:linear-gradient(0deg, rgba(6,11,20,.85), transparent);
  width:100%;
}
.visual.ratio-16-9{ aspect-ratio:16/9; }
.visual.ratio-4-3{ aspect-ratio:4/3; }
.visual.ratio-1-1{ aspect-ratio:1/1; }
.visual.hero-visual{ min-height:520px; }

/* ---------- Credibility bar ---------- */
.cred-bar{ background:var(--navy-900); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.cred-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding:22px 0; }
.cred-item{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-300); }
.cred-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--green-500); box-shadow:0 0 10px var(--green-glow); }

/* ---------- Architecture diagram ---------- */
.arch-diagram{ display:flex; flex-direction:column; gap:0; }
.arch-layer{
  display:grid; grid-template-columns:220px 1fr; gap:32px;
  padding:28px 0; border-top:1px solid rgba(255,255,255,.09);
  align-items:center;
}
.arch-layer:last-child{ border-bottom:1px solid rgba(255,255,255,.09); }
.arch-layer .layer-name{ font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-400); }
.arch-layer .layer-items{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding:8px 14px; border:1px solid rgba(255,255,255,.14); border-radius:3px;
  font-size:13px; color:var(--gray-200); background:rgba(255,255,255,.03);
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.chip:hover{
  background:rgba(47,123,214,.14); border-color:var(--blue-400); color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.3);
}
.arch-flow-arrow{ text-align:center; color:var(--gray-500); font-size:14px; padding:2px 0; }
.flow-strip{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-top:44px; padding:26px; border:1px solid rgba(63,174,107,.35);
  border-radius:4px; background:rgba(63,174,107,.05);
}
.flow-strip .step{ font-family:var(--font-mono); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:14px; color:var(--white); }
.flow-strip .arrow{ color:var(--green-500); font-size:16px; }

/* Architecture diagram: responsive breakpoints.
   The 220px label + flexible chip-row grid works down to tablet width
   because .layer-items already wraps, but on phones 220px leaves almost
   no room for chips, so the label moves above the row instead. */
@media (max-width:760px){
  .arch-layer{
    grid-template-columns:1fr; gap:12px;
    padding:22px 0;
  }
}
@media (max-width:480px){
  .arch-layer{ padding:18px 0; }
  .arch-layer .layer-items{ gap:8px; }
  .chip{ padding:7px 11px; font-size:12px; }
  .flow-strip{ gap:10px 12px; padding:18px 16px; margin-top:32px; }
  .flow-strip .step{ font-size:12px; }
  .flow-strip .arrow{ font-size:14px; }
}

/* ---------- Zenith Architecture: connected system diagram (2026 redesign) ---------- */
.zarch-subline{ margin-top:10px; max-width:640px; color:var(--gray-400); font-size:15px; }

.zarch-diagram{ position:relative; margin-top:48px; }
.zarch-nodes{ position:relative; }
.zarch-gridbg{
  position:absolute; top:0; left:-24px; right:-24px; bottom:0; z-index:0;
  background-image:
    linear-gradient(rgba(140,180,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom, black, black 75%, transparent 100%);
  pointer-events:none;
}
.zarch-spine{ position:absolute; left:17px; top:4px; bottom:4px; width:2px; background:rgba(255,255,255,.1); z-index:1; }
.zarch-spine-fill{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(var(--blue-400), var(--green-500));
  box-shadow:0 0 10px rgba(77,151,242,.45);
  transition:height .2s linear;
}
.zarch-diagram.in .zarch-spine-fill{ height:100%; }

.zarch-node{ position:relative; z-index:2; padding-left:56px; margin-bottom:60px; transition:opacity .35s var(--ease); }
.zarch-node:last-of-type{ margin-bottom:0; }
.zarch-index{
  position:absolute; left:0; top:2px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--blue-300);
  background:var(--navy-900); border:1px solid rgba(255,255,255,.16);
  transition:border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.zarch-node:hover .zarch-index, .zarch-node:focus-visible .zarch-index, .zarch-node--active .zarch-index{
  border-color:var(--blue-400); color:var(--white); box-shadow:0 0 14px rgba(77,151,242,.45);
}
.zarch-diagram.zarch-hovering .zarch-node:not(.zarch-node--active){ opacity:.45; }

.zarch-node-body{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.zarch-node-body--tether{ grid-template-columns:1.1fr 1fr; }
.zarch-node-body > *{ min-width:0; }
.zarch-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-400); }
.zarch-node-title{ margin-top:10px; font-size:1.5rem; font-weight:800; color:var(--white); letter-spacing:-.01em; }
.zarch-node-copy{ margin-top:10px; font-size:14.5px; color:var(--gray-400); max-width:440px; }
.zarch-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

.zarch-visual-wrap{ position:relative; }
.zarch-callout{
  position:absolute; padding:5px 9px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--blue-300);
  background:rgba(6,11,20,.85); border:1px solid rgba(140,180,255,.25);
  border-left:2px solid var(--blue-400); z-index:2; white-space:nowrap;
}
.zarch-callout--tl{ top:12px; left:12px; }
.zarch-callout--bl{ bottom:64px; left:12px; }
.zarch-callout--tr{ top:12px; right:12px; border-left:none; border-right:2px solid var(--blue-400); text-align:right; }
.zarch-callout--br{ bottom:64px; right:12px; border-left:none; border-right:2px solid var(--blue-400); text-align:right; }

.zarch-tether-visual{
  position:relative; display:flex; align-items:center; justify-content:center; min-height:160px;
  align-self:stretch; width:100%; max-width:160px; margin:0 auto;
  border-left:1px dashed rgba(255,255,255,.14); border-right:1px dashed rgba(255,255,255,.14);
}
.zarch-tether-visual::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(var(--blue-400), var(--green-500)); box-shadow:0 0 10px rgba(77,151,242,.4);
}
.zarch-tether-packet{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.05em;
  padding:4px 8px; border-radius:3px; white-space:nowrap; color:var(--navy-950); opacity:0;
}
.zarch-tether-packet--power{ background:var(--blue-300); animation:zarchTravelUp 3.4s linear infinite; }
.zarch-tether-packet--data{ background:var(--green-500); animation:zarchTravelDown 3.8s linear infinite; animation-delay:1.2s; }
@keyframes zarchTravelUp{ 0%{ top:100%; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ top:0%; opacity:0; } }
@keyframes zarchTravelDown{ 0%{ top:0%; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ top:100%; opacity:0; } }

.fiber-line-visual{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:90px; margin-bottom:22px;
}
.fiber-line-visual::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:var(--green-500); box-shadow:0 0 10px rgba(63,174,107,.4);
}
.fiber-line-packet{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.05em;
  padding:4px 8px; border-radius:3px; white-space:nowrap; color:var(--navy-950); opacity:0;
}
.fiber-line-packet--a{ background:var(--green-500); animation:zarchTravelDown 3.2s linear infinite; }
.fiber-line-packet--b{ background:var(--blue-300); animation:zarchTravelDown 3.6s linear infinite; animation-delay:1.2s; }
.fiber-line-packet--c{ background:var(--white); animation:zarchTravelDown 4s linear infinite; animation-delay:2.4s; }
.fiber-line-visual--tall{ min-height:150px; margin-bottom:0; }
.two-col.fiber-two-col{ align-items:stretch; }
.fiber-visual-col{ display:flex; flex-direction:column; justify-content:center; }
.fiber-visual-col .fiber-line-visual{ flex:1; margin-bottom:0; }
.fiber-visual-col .arch-diagram:first-child .arch-layer{ border-top:none; padding-top:0; }
.fiber-visual-col .arch-diagram:last-child .arch-layer{ padding-bottom:0; }

.zarch-readout{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.zarch-readout-row{ display:flex; gap:10px; font-size:13px; color:var(--gray-300); }
.zarch-readout-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-400); min-width:56px; }

.zarch-bbox{ position:absolute; border:1px solid var(--green-500); border-radius:2px; box-shadow:0 0 8px rgba(63,174,107,.35); }
.zarch-bbox em{
  position:absolute; top:-18px; left:-1px; font-style:normal; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--green-500);
  background:rgba(6,11,20,.85); padding:2px 5px; white-space:nowrap;
}
.zarch-bbox--1{ width:15%; height:38%; top:20%; left:16%; }
.zarch-bbox--2{ width:26%; height:26%; top:50%; left:44%; }
.zarch-bbox--3{ width:13%; height:11%; top:58%; left:62%; }

.zarch-netmap{ margin-top:20px; display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.zarch-netmap-node{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  padding:10px 14px; border:1px solid rgba(255,255,255,.14); border-radius:3px; color:var(--gray-200);
  background:var(--navy-900);
}
.zarch-netmap-node--core{ border-color:var(--blue-400); color:var(--white); box-shadow:0 0 12px rgba(77,151,242,.3); }
.zarch-netmap-line{ flex:1; min-width:24px; height:1px; margin:0 2px; background:linear-gradient(90deg, rgba(140,180,255,.5), rgba(140,180,255,.1)); }
.zarch-netmap-annotation{ display:block; margin-top:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); }

.zarch-final{
  position:relative; z-index:2; margin:48px auto 0; padding:16px 22px; text-align:center;
  max-width:520px;
  border:1px solid rgba(63,174,107,.3); border-radius:4px; background:rgba(63,174,107,.05);
}
.zarch-final-flow{ display:block; font-family:var(--font-mono); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:11.5px; color:var(--white); }
.zarch-final-arrow{ color:var(--green-500); margin:0 5px; }
.zarch-final-label{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--green-500); }

@media (max-width:900px){
  .zarch-node-body, .zarch-node-body--tether{ grid-template-columns:1fr; }
  .zarch-tether-visual{ min-height:110px; border-left:none; border-right:none; }
  .zarch-node-copy{ max-width:100%; }
}
@media (max-width:640px){
  .zarch-index{ width:30px; height:30px; font-size:11px; }
  .zarch-node{ padding-left:46px; margin-bottom:44px; }
  .zarch-spine{ left:14px; }
  .zarch-node-body{ gap:20px; }
  .zarch-callout{ font-size:9px; padding:4px 7px; }
  .zarch-netmap-node{ font-size:10px; padding:8px 10px; }
  .zarch-final-flow{ font-size:11px; }
}
@media (max-width:480px){
  .zarch-callout--tl, .zarch-callout--bl{ left:6px; }
  .zarch-callout--tr, .zarch-callout--br{ right:6px; }
}
@media (prefers-reduced-motion: reduce){
  .zarch-tether-packet{ animation:none; opacity:.9; top:50%; }
  .zarch-spine-fill{ transition:none; }
  .fiber-line-packet{ animation:none; opacity:.9; top:50%; }
  .compliance-section .section-head .eyebrow,
  .compliance-section .section-head .section-title{ transition:none; }
  .compliance-section .compliance-row::before{ transition:none; }
  .compliance-section .compliance-badge{ transition:none; }
  .compliance-section .compliance-badge .dot{ transition:none; }
  .compliance-section::before{ transition:none; }
  .compliance-section.in::before{ animation:none; }
  .zarch-spine-pulse{ display:none; }
  .zarch-node--airborne .zarch-visual-wrap .visual img{ animation:none; }
  .zarch-node--ground.zarch-node--revealed .zarch-visual-wrap .visual img{ animation:none; }
  .zarch-tether-packet--data-alt{ animation:none; opacity:0; }
  .zarch-sweep, .zarch-data-out{ display:none; }
  .zarch-visual-wrap--intel .zarch-bbox--tracking{ animation:none; }
  .zarch-node .zarch-callout{ opacity:1; transform:none; transition:none; }
  .zarch-final-word{ opacity:1; }
  .zarch-final--pulsed{ animation:none; }
  .zarch-node--airborne .zarch-visual-wrap,
  .zarch-node--ground .zarch-visual-wrap,
  .zarch-node--intel .zarch-visual-wrap{ transition:none; }
  .zarch2-photo-frame{ transition:opacity .3s linear; transform:none; }
  .zarch2-media--in .zarch2-photo-frame{ transform:none; }
  .zarch2-hotspot-dot{ animation:none; }
  .zarch2-tether-power-flow, .zarch2-tether-data-flow, .zarch2-link-flow{ animation:none; }
  .zarch2-junction-glow, .zarch2-endpoint-glow{ animation:none; }
  .zarch2-link-pulse{ opacity:0 !important; }
  .zarch2-hotspot{ transition:none; }
}

/* ---------- Zenith Architecture: motion enhancement layer ---------- */
/* A scroll-driven glow + per-stage detail animations layered on top of the
   existing diagram above. No layout, copy, color system or structure here
   is changed — this block only adds motion states. See main.js for the
   matching JS (search "Zenith Architecture — motion layer"). */

.zarch-spine-pulse{
  position:absolute; left:50%; top:0; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:var(--blue-300);
  box-shadow:0 0 10px 3px rgba(140,200,255,.55);
  opacity:0; pointer-events:none;
  animation:zarchSpinePulse 2.6s ease-in-out infinite;
}
@keyframes zarchSpinePulse{
  0%{ top:0%; opacity:0; }
  8%{ opacity:.9; }
  92%{ opacity:.9; }
  100%{ top:100%; opacity:0; }
}

/* Scroll-driven "seen" state: a gentler glow reduction than the existing
   mouse-hover dim (.zarch-hovering), so past stages stay clearly visible. */
.zarch-node--seen:not(.zarch-node--active){ opacity:.82; transition:opacity .4s var(--ease); }

/* 01 — Airborne: independent idle float on the image only (not the
   annotations), plus a staggered entrance for the leader-line callouts */
.zarch-node--airborne .zarch-visual-wrap .visual img{
  animation:zarchFloat 4.6s ease-in-out infinite;
}
@keyframes zarchFloat{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(3px); } }

.zarch-node .zarch-callout{
  opacity:0; transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.zarch-node .zarch-callout--bl, .zarch-node .zarch-callout--br{ transform:translateY(6px); }
.zarch-node--revealed .zarch-callout{ opacity:1; transform:translateY(0); }
.zarch-node--revealed .zarch-callout--tl{ transition-delay:.05s; }
.zarch-node--revealed .zarch-callout--tr{ transition-delay:.2s; }
.zarch-node--revealed .zarch-callout--bl{ transition-delay:.35s; }
.zarch-node--revealed .zarch-callout--br{ transition-delay:.5s; }

/* 02 — Tether: brief brightness bump when the stage activates, plus a
   second, smaller, oppositely-timed data pulse so DATA reads as bidirectional */
.zarch-node--tether.zarch-node--revealed .zarch-tether-visual::before{
  animation:zarchTetherFlash 1.1s var(--ease);
}
@keyframes zarchTetherFlash{
  0%{ box-shadow:0 0 10px rgba(77,151,242,.4); }
  35%{ box-shadow:0 0 22px rgba(140,200,255,.85); }
  100%{ box-shadow:0 0 10px rgba(77,151,242,.4); }
}
.zarch-tether-packet--data-alt{
  width:6px; height:6px; padding:0; border-radius:50%;
  background:var(--green-500); box-shadow:0 0 6px rgba(63,174,107,.6);
  opacity:0; animation:zarchTravelUp 3s linear infinite; animation-delay:2.2s;
}

/* 03 — Ground: reveal + very slow cinematic push + technical highlight sweeps */
.zarch-node--ground .zarch-visual-wrap .visual{
  opacity:0; transform:scale(.98);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.zarch-node--ground.zarch-node--revealed .zarch-visual-wrap .visual{ opacity:1; transform:scale(1); }
.zarch-node--ground.zarch-node--revealed .zarch-visual-wrap .visual img{
  animation:zarchSlowPush 10s ease-in-out infinite alternate;
}
@keyframes zarchSlowPush{ 0%{ transform:scale(1); } 100%{ transform:scale(1.025); } }

.zarch-sweep{
  position:absolute; top:0; bottom:0; left:-30%; width:20%; z-index:1;
  background:linear-gradient(100deg, transparent, rgba(140,200,255,.16), transparent);
  pointer-events:none; opacity:0;
}
.zarch-sweep--run{ animation:zarchSweep 1.4s ease-out forwards; }
@keyframes zarchSweep{
  0%{ opacity:0; transform:translateX(0); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:translateX(480%); }
}

/* 04 — Intelligence/C2: a tracking box that acquires the target, settles
   into a slow pulse, then a restrained outbound data pulse toward the chips */
.zarch-visual-wrap--intel .zarch-bbox{
  opacity:0; transform:scale(1.12);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.zarch-visual-wrap--intel .zarch-bbox--shown{ opacity:1; transform:scale(1); }
.zarch-visual-wrap--intel .zarch-bbox--tracking{ animation:zarchTrackPulse 2.6s ease-in-out infinite; }
@keyframes zarchTrackPulse{
  0%,100%{ box-shadow:0 0 8px rgba(63,174,107,.35); }
  50%{ box-shadow:0 0 14px rgba(63,174,107,.6); }
}

.zarch-data-out{
  position:absolute; top:50%; left:0; width:0; height:2px; z-index:3;
  background:linear-gradient(90deg, var(--blue-300), transparent);
  box-shadow:0 0 8px rgba(140,200,255,.6);
  opacity:0; pointer-events:none;
}
.zarch-data-out--run{ animation:zarchDataOut 1.6s ease-out forwards; }
@keyframes zarchDataOut{
  0%{ width:0; opacity:0; }
  15%{ opacity:1; }
  80%{ opacity:1; }
  100%{ width:100%; opacity:0; }
}

/* Card interaction: the three image panels (01 / 03 / 04), desktop only */
@media (hover:hover) and (pointer:fine){
  .zarch-node--airborne .zarch-visual-wrap,
  .zarch-node--ground .zarch-visual-wrap,
  .zarch-node--intel .zarch-visual-wrap{
    transition:transform .4s var(--ease);
  }
  .zarch-node--airborne .zarch-visual-wrap:hover,
  .zarch-node--ground .zarch-visual-wrap:hover,
  .zarch-node--intel .zarch-visual-wrap:hover{
    transform:translateY(-2px);
  }
  .zarch-node--airborne .zarch-visual-wrap:hover .visual,
  .zarch-node--ground .zarch-visual-wrap:hover .visual,
  .zarch-node--intel .zarch-visual-wrap:hover .visual{
    border-color:rgba(140,200,255,.5);
    box-shadow:inset 0 0 0 1px rgba(140,200,255,.22), 0 0 18px rgba(77,151,242,.22);
    transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
  }
}

/* Final architecture box: sequential word illumination, then one border pulse */
.zarch-final-word{ opacity:.4; transition:opacity .35s var(--ease), text-shadow .35s var(--ease); }
.zarch-final-word--lit{ opacity:1; text-shadow:0 0 8px rgba(140,200,255,.5); }
.zarch-final--pulsed{ animation:zarchFinalPulse 1.3s var(--ease); }
@keyframes zarchFinalPulse{
  0%{ box-shadow:none; border-color:rgba(63,174,107,.3); }
  40%{ box-shadow:0 0 24px rgba(63,174,107,.45); border-color:rgba(63,174,107,.8); }
  100%{ box-shadow:none; border-color:rgba(63,174,107,.3); }
}

/* Mobile: keep only the restrained motion set (stage fade/reveal, active
   node glow, the power/data pulse, and the final sequence already above) */
@media (max-width:900px){
  .zarch-node--airborne .zarch-visual-wrap .visual img{ animation:none; }
  .zarch-node--ground.zarch-node--revealed .zarch-visual-wrap .visual img{ animation:none; }
}

/* ---------- Stats ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
.stat-cell{ background:var(--navy-950); padding:40px 28px; }
.stat-num{ font-size:clamp(2rem,3.4vw,3.2rem); font-weight:800; color:var(--white); letter-spacing:-.02em; }
.stat-label{ margin-top:8px; color:var(--gray-400); font-size:14px; }
.stat-note{ margin-top:20px; font-size:12.5px; color:var(--gray-500); }
@media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Cards ---------- */
.card{
  background:var(--navy-800);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover{ border-color:rgba(79,151,242,.45); transform:translateY(-3px); }
.card .card-body{ padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card h3{ font-size:1.3rem; font-weight:800; color:var(--white); }
.card .card-kicker{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-400); }
.card p{ color:var(--gray-400); font-size:14.5px; }
.card .spec-pill{ font-size:12.5px; color:var(--gray-300); font-family:var(--font-mono); }
.card .card-link{ margin-top:auto; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--blue-400); display:inline-flex; gap:6px; align-items:center; }
.card .card-link::after{ content:"→"; transition:transform .2s var(--ease); }
.card:hover .card-link::after{ transform:translateX(3px); }

/* ---------- Software & AI: click-to-change background ---------- */
.software-ai-section{ position:relative; overflow:hidden; }
.software-ai-section > .container{ position:relative; z-index:2; }
.software-ai-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:1;
  transition:opacity .4s var(--ease);
  z-index:0;
}
.software-ai-bg.is-swapping{ opacity:0; }
.software-ai-overlay{
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(6,11,20,.88) 0%, rgba(6,11,20,.74) 38%, rgba(6,11,20,.8) 100%);
  pointer-events:none;
}
.software-ai-card{
  appearance:none; -webkit-appearance:none;
  width:100%; margin:0; padding:0;
  text-align:left; font:inherit; color:inherit;
  cursor:pointer;
}
.software-ai-card.is-active{ border-color:var(--blue-400); box-shadow:0 0 0 1px var(--blue-400); }
.software-ai-card.is-active .card-kicker{ color:var(--white); }

/* ---------- C2 Integration: tethered-drone network diagram ---------- */
.c2-section{ position:relative; overflow:hidden; }
.c2-section > .container{ position:relative; z-index:2; }

.c2-photo{
  position:absolute; top:0; right:0; bottom:0;
  width:min(46%, 620px);
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.c2-sky{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  filter:saturate(.8) brightness(.78) contrast(1.05);
  opacity:.92;
}
.c2-sky-tint{
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(20,64,132,.68), rgba(8,26,58,.72));
  mix-blend-mode:color;
  pointer-events:none;
}
.c2-rig{ position:absolute; top:9%; right:13%; width:33%; max-width:230px; }
.c2-drone{ width:100%; height:auto; display:block; filter:drop-shadow(0 18px 26px rgba(2,6,14,.55)); }
.c2-tether-line{
  position:absolute; left:51%; top:97%;
  width:2px; height:78vh; max-height:620px;
  background:linear-gradient(to bottom, rgba(143,192,255,.85), rgba(77,151,242,.35) 45%, rgba(77,151,242,0) 92%);
  transform:translateX(-50%);
}
.c2-tether-pulse{
  position:absolute; left:50%; top:0;
  width:6px; height:6px; margin-left:-3px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 0 8px 2px rgba(143,192,255,.95), 0 0 16px 6px rgba(77,151,242,.5);
  opacity:0;
  animation:c2TetherPulse 3.2s linear infinite;
}
@keyframes c2TetherPulse{
  0%{ top:0; opacity:0; }
  8%{ opacity:1; }
  78%{ opacity:.9; }
  92%{ top:92%; opacity:0; }
  100%{ top:92%; opacity:0; }
}

/* Quad-L's dedicated C2 cutout already has its tether cable drawn into the
   artwork (a thin gray line running from the aircraft's belly to the bottom
   edge of the image). Shift the glow/pulse overlay to sit right on top of
   that cable instead of the generic drone image's mount point. */
.c2-rig--quadl .c2-tether-line{ left:49%; top:35%; }
.c2-fade-left{
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--navy-900) 0%, rgba(10,20,36,.85) 16%, rgba(10,20,36,.35) 40%, transparent 68%);
}
.c2-fade-bottom{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 55%, rgba(10,20,36,.65) 82%, var(--navy-900) 100%);
}

.c2-container .section-head{ max-width:560px; }

.c2-network{ position:relative; margin-top:10px; }

.c2-datatags{
  position:absolute; top:-8px; right:0;
  display:flex; flex-direction:column; gap:10px;
  align-items:flex-end;
  z-index:2;
}
.c2-datatag{
  display:flex; flex-direction:column; align-items:flex-end;
  padding:7px 14px 7px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-right:2px solid rgba(77,151,242,.55);
  border-radius:3px;
  background:rgba(10,20,36,.55);
  opacity:0;
  transform:translateX(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.c2-datatag strong{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--white);
}
.c2-datatag em{
  font-style:normal;
  font-size:11px;
  color:var(--gray-400);
  margin-top:2px;
}
.c2-datatag:nth-child(1){ transition-delay:.15s; }
.c2-datatag:nth-child(2){ transition-delay:.32s; }
.c2-datatag:nth-child(3){ transition-delay:.49s; }
.c2-section.c2-active .c2-datatag{ opacity:1; transform:none; }

.c2-node{
  position:relative; z-index:2;
  display:inline-flex; flex-direction:column; gap:3px;
  width:220px;
  padding:16px 20px;
  border:1px solid rgba(77,151,242,.18);
  border-radius:8px;
  background:rgba(15,29,51,.72);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--ease) .55s, transform .55s var(--ease) .55s, border-color .5s var(--ease) .55s, box-shadow .5s var(--ease) .55s;
}
.c2-node-kicker{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--blue-400);
}
.c2-node-title{
  font-size:1.05rem;
  font-weight:800;
  color:var(--white);
  letter-spacing:-.01em;
}
.c2-section.c2-active .c2-node{
  opacity:1; transform:none;
  border-color:rgba(77,151,242,.5);
  box-shadow:0 0 0 1px rgba(77,151,242,.08), 0 12px 30px -16px rgba(77,151,242,.5);
}

.c2-wiring{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; }
.c2-route-glow, .c2-route-flow{ fill:none; opacity:0; transition:opacity .5s var(--ease); }
.c2-route-glow{ stroke:var(--blue-400); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:blur(3px); }
.c2-route-flow{
  stroke:var(--blue-300); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:7 16;
  filter:drop-shadow(0 0 4px rgba(77,151,242,.7));
}
.c2-route-pulse{ fill:var(--white); opacity:0; filter:drop-shadow(0 0 5px rgba(143,192,255,.95)); transition:opacity .5s var(--ease); }
.c2-node-junction{ fill:var(--blue-400); opacity:0; filter:blur(1px); transition:opacity .5s var(--ease); }

.c2-section.c2-active .c2-route-glow{ opacity:.35; }
.c2-section.c2-active .c2-route-flow{ opacity:.85; animation:c2RouteFlow 2.1s linear infinite; }
.c2-section.c2-active .c2-route-pulse{ opacity:.9; }
.c2-section.c2-active .c2-node-junction{ opacity:.8; }
.c2-wiring [data-c2-route="atak"]{ transition-delay:.85s; }
.c2-wiring [data-c2-route="lattice"]{ transition-delay:.95s; }
.c2-wiring [data-c2-route="openc2"]{ transition-delay:1.05s; }
@keyframes c2RouteFlow{ to{ stroke-dashoffset:-46; } }

.c2-destinations{ margin-top:132px; position:relative; z-index:2; }
.c2-dest{ transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.c2-dest:hover, .c2-dest:focus-within{ border-color:var(--blue-400); box-shadow:0 0 0 1px rgba(77,151,242,.25); }

.c2-network[data-c2-hover="atak"] [data-c2-route]:not([data-c2-route="atak"]),
.c2-network[data-c2-hover="lattice"] [data-c2-route]:not([data-c2-route="lattice"]),
.c2-network[data-c2-hover="openc2"] [data-c2-route]:not([data-c2-route="openc2"]){
  opacity:.12 !important;
}

@media (max-width:900px){
  .c2-photo{
    position:relative; inset:auto; width:100%; height:200px;
    border-radius:0 0 10px 10px; margin-bottom:40px;
  }
  .c2-fade-left{ background:none; }
  .c2-rig{ top:14%; right:18%; width:40%; max-width:170px; }
  .c2-tether-line{ height:50vh; max-height:260px; }
  .c2-container .section-head{ max-width:none; }
  .c2-network{ margin-top:0; }
  .c2-datatags{ position:relative; top:auto; right:auto; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:8px; margin-bottom:28px; }
  .c2-datatag{ align-items:flex-start; transform:translateY(8px); }
  .c2-section.c2-active .c2-datatag{ transform:none; }
  .c2-node{ width:100%; margin:0 auto 28px; text-align:center; align-items:center; }
  .c2-wiring{ display:none; }
  .c2-destinations{ margin-top:0; }
}

@media (prefers-reduced-motion: reduce){
  .c2-tether-pulse{ animation:none; opacity:0; }
  .c2-datatag, .c2-node{ transition:none; opacity:1; transform:none; }
  .c2-route-glow, .c2-route-flow, .c2-route-pulse, .c2-node-junction{ transition:none; }
  .c2-section.c2-active .c2-route-glow{ opacity:.35; }
  .c2-section.c2-active .c2-route-flow{ opacity:.85; animation:none; }
  .c2-section.c2-active .c2-route-pulse{ opacity:0; }
}

/* Mission Configurations — payload visualizer */
.mission-demo .section-head .lede{ margin:16px auto 0; max-width:620px; }

.mission-selector{
  display:flex; justify-content:center; gap:7px; flex-wrap:wrap; margin-bottom:32px;
}
.mission-selector button{
  font:600 13px var(--font-display); color:var(--gray-400); background:transparent;
  border:1px solid var(--navy-600); border-radius:4px; padding:13px 23px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.mission-selector button[aria-selected="true"]{
  background:var(--blue-500); border-color:var(--blue-500); color:var(--white);
}
.mission-selector button:hover{ color:var(--white); border-color:var(--blue-400); }
.mission-selector button:focus-visible,
.mission-field summary:focus-visible{ outline:2px solid var(--blue-300); outline-offset:4px; }

.mission-layout{
  display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  border:1px solid var(--navy-600); border-radius:6px; overflow:hidden;
}
.mission-stage{
  position:relative; background:radial-gradient(ellipse at 50% 40%, #1c3559 0%, #0a1424 70%);
  min-width:0; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
}
.mission-stage::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(143,192,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(143,192,255,.03) 1px, transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.mission-stage-top, .mission-stage-bottom{
  position:relative; z-index:2; display:flex; justify-content:space-between; gap:10px;
  padding:22px; font:10px var(--font-mono); letter-spacing:.09em; color:var(--blue-300);
}
.mission-status{ color:#9cc9ff; }
.mission-aircraft{ width:96%; margin:auto; position:relative; aspect-ratio:1.65; }
.mission-base{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1;
  filter:drop-shadow(0 20px 20px rgba(0,0,0,.3));
}
.mission-rail{
  position:absolute; left:45%; top:45%; width:10%; height:5px;
  background:repeating-linear-gradient(90deg, #8b9ba9 0 5px, #283747 5px 8px);
  border:1px solid #b4c2d0; border-radius:1px; z-index:3;
  box-shadow:0 0 15px rgba(77,151,242,.29);
}
.mission-payload{
  position:absolute; left:37%; top:46%; width:26%; height:30%;
  display:flex; justify-content:center; align-items:flex-start; gap:4%; z-index:2;
  transform-origin:top center; filter:drop-shadow(0 8px 8px rgba(0,0,0,.37));
}
/* One consistent box for every single-image mission payload (EO/IR, Radar,
   Communication, Public Safety, and Multi Sensor when a dedicated override
   photo is set) so that images uploaded at the same pixel size always
   render at the same visual size — scaled down to fit, never cropped. */
.mission-payload img{ height:85%; width:auto; max-width:94%; object-fit:contain; }
.mission-payload[data-kind="multi"] img:nth-child(1){ width:58%; height:80%; }
.mission-payload[data-kind="multi"] img:nth-child(2){ width:27%; height:87%; }
.mission-payload[data-kind="multi"] img:nth-child(3){ width:22%; height:75%; }

.mission-info{
  padding:36px; background:var(--navy-800);
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
}
.mission-info h3{ font-size:clamp(24px,2.4vw,34px); line-height:1.18; color:var(--white); max-width:380px; }
.mission-description{ font-size:14px; color:var(--gray-300); }
.mission-info .config-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.mission-payload-label{
  border-top:1px solid var(--navy-600); padding-top:20px; width:100%;
  display:flex; flex-direction:column; gap:6px;
}
.mission-payload-label span{ font:10px var(--font-mono); letter-spacing:.12em; color:var(--gray-400); }
.mission-payload-label strong{ font-size:14px; font-weight:500; color:var(--blue-300); }
.mission-payload-options{
  width:100%; display:flex; flex-direction:column; gap:10px;
}
.mission-payload-options > span{ font:10px var(--font-mono); letter-spacing:.12em; color:var(--gray-400); }
.mission-payload-options .logo-tags{ gap:8px; }
.mission-payload-options .logo-tag{ font-size:12px; padding:8px 12px; }
.mission-note{ font-size:10px; line-height:1.6; color:var(--gray-400); }
.mission-demo .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

@media (max-width:900px){
  .mission-layout{ grid-template-columns:1fr; }
  .mission-stage{ min-height:330px; }
  .mission-aircraft{ max-width:680px; }
  .mission-info{ padding:26px; }
  .mission-selector button{ padding:11px 15px; }
  .mission-stage-top, .mission-stage-bottom{ padding:18px; font-size:9px; }
}
@media (max-width:440px){
  .mission-stage{ min-height:260px; }
  .mission-demo .container{ padding:0 16px; }
  .mission-selector{ gap:6px; }
  .mission-selector button{ font-size:11px; padding:10px 12px; }
  .mission-stage-top{ flex-direction:column; gap:6px; }
  .mission-info{ gap:16px; padding:22px; }
}
@media (prefers-reduced-motion: reduce){
  .mission-selector button{ transition:none; }
  .mission-payload{ transition:none; }
}

.cinematic-card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0;
  background:var(--navy-800); border:1px solid rgba(255,255,255,.08); border-radius:6px; overflow:hidden;
}
.cinematic-card .cc-body{ padding:44px; display:flex; flex-direction:column; gap:16px; justify-content:center; min-width:0; }
.cinematic-card .mono-tag{ font-size:16px; font-weight:700; letter-spacing:.08em; }
.cinematic-card h3{ font-size:1.6rem; font-weight:800; color:var(--white); }
@media (max-width:900px){ .cinematic-card{ grid-template-columns:1fr; } }

/* ---------- Capability flow ---------- */
.cap-flow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-300); }
.cap-flow .arrow{ color:var(--blue-400); }

/* ---------- Tabs (mission configurator, platform config) ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:10px; }
.tab-btn{
  padding:12px 20px; border:1px solid rgba(255,255,255,.14); background:transparent;
  color:var(--gray-300); font-family:inherit; font-size:13px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; border-radius:3px; cursor:pointer;
  transition:all .18s var(--ease);
}
.tab-btn:hover{ border-color:var(--blue-400); color:var(--white); }
.tab-btn.active{ background:var(--blue-500); border-color:var(--blue-500); color:var(--white); }
.tab-panels{ margin-top:32px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
@media (max-width:900px){ .tab-panel.active{ grid-template-columns:1fr; } }
.tab-panel .config-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* ---------- Logo / integration wall ---------- */
.category-block{ margin-bottom:34px; }
.category-block h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-400); margin-bottom:14px; }
.logo-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.logo-tag{ padding:10px 16px; border:1px solid rgba(255,255,255,.12); border-radius:3px; font-size:13.5px; color:var(--gray-200); background:var(--navy-800); }

/* Payload Modularity: clickable tags + preview panel */
.payload-modularity{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start; }
.payload-categories .category-block:last-child{ margin-bottom:0; }
.payload-tag{ cursor:pointer; font-family:var(--font-body); transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.payload-tag:hover{ border-color:rgba(140,180,255,.35); color:var(--white); }
.payload-tag.is-active{ background:rgba(47,123,214,.16); border-color:var(--blue-400); color:var(--white); }
.payload-preview{ position:sticky; top:140px; }
.payload-preview-caption{ margin-top:16px; font-size:13.5px; color:var(--gray-400); }
@media (max-width:900px){
  .payload-modularity{ grid-template-columns:1fr; gap:32px; }
  .payload-preview{ position:static; }
}

/* ---------- Capability list (manufacturing) ---------- */
.cap-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cap-list .cap-item{ padding:16px 18px; border:1px solid rgba(255,255,255,.1); border-radius:4px; font-size:13.5px; font-weight:600; color:var(--gray-200); transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.cap-list .cap-item:hover{ background:rgba(47,123,214,.14); border-color:var(--blue-400); color:var(--white); transform:translateY(-2px); }
@media (max-width:900px){ .cap-list{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Field proven strip ---------- */
.field-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.field-grid > .field-item{ min-width:0; }
.field-item .visual{ min-height:190px; margin-bottom:10px; }
.field-item .caption{ font-size:13px; color:var(--gray-400); font-family:var(--font-mono); letter-spacing:.02em; }
.field-item .field-desc{ font-size:12.5px; color:var(--gray-500); line-height:1.5; margin-top:4px; }
.field-grid > .field-item:last-child:nth-child(3n+1){ grid-column:2; }
@media (max-width:900px){
  .field-grid{ grid-template-columns:1fr 1fr; }
  .field-grid > .field-item:last-child:nth-child(3n+1){ grid-column:auto; }
}

.field-visual-wrap{ position:relative; }
.field-play-btn{
  position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,20,40,.72); border:1.5px solid rgba(255,255,255,.55);
  color:var(--white); cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.field-play-btn svg{ margin-left:3px; }
.field-item--video:hover .field-play-btn,
.field-play-btn:hover,
.field-play-btn:focus-visible{
  background:var(--blue-500); border-color:var(--blue-500);
  transform:translate(-50%,-50%) scale(1.08);
}
.field-item--video .field-visual-wrap{ cursor:pointer; }

body.video-lightbox-locked{ overflow:hidden; }
.video-lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), visibility 0s linear .25s;
}
.video-lightbox--open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .25s var(--ease);
}
.video-lightbox-backdrop{
  position:absolute; inset:0; background:rgba(4,9,18,.85);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.video-lightbox-dialog{
  position:relative; z-index:1; width:min(900px,92vw);
}
.video-lightbox-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:6px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.video-lightbox-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-lightbox-close{
  position:absolute; top:-44px; right:0;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:50%;
  color:var(--white); font-size:20px; line-height:1; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.video-lightbox-close:hover{ background:rgba(34,211,238,.18); border-color:var(--blue-400); }
@media (max-width:600px){
  .video-lightbox-close{ top:-40px; }
}

/* ---------- Compliance ---------- */
.compliance-row{ display:flex; flex-wrap:wrap; gap:14px; }
.compliance-badge{ display:flex; align-items:center; gap:10px; padding:14px 20px; border:1px solid rgba(255,255,255,.12); border-radius:4px; background:var(--navy-800); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase; color:var(--gray-200); }
.compliance-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--green-500); }
.compliance-badge .badge-mark{ display:inline-flex; align-items:center; gap:6px; }
.compliance-badge .badge-icon{ width:14px; height:14px; flex:0 0 auto; color:var(--blue-400); opacity:.9; }
.compliance-note{ margin-top:22px; font-size:12.5px; color:var(--gray-500); max-width:640px; }

/* ---------- Quality & Compliance: system verification entrance sequence ---------- */
.compliance-section{ overflow:hidden; }
.compliance-section::before{
  content:""; position:absolute; inset:-20% -10%; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(140,180,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,255,.05) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:0;
  transition:opacity 1.4s var(--ease);
}
.compliance-section.in::before{ opacity:1; animation:complianceGridDrift 90s linear infinite; }
.compliance-section > .container{ position:relative; z-index:1; }

.compliance-section .section-head .eyebrow,
.compliance-section .section-head .section-title{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.compliance-section .section-head .section-title{ transition-delay:.12s; }
.compliance-section.in .section-head .eyebrow,
.compliance-section.in .section-head .section-title{ opacity:1; transform:translateY(0); }

.compliance-section .compliance-row{ position:relative; }
.compliance-section .compliance-row::before{
  content:""; position:absolute; left:0; top:23px; height:2px; width:0;
  background:linear-gradient(90deg, var(--blue-400), var(--green-500));
  box-shadow:0 0 10px rgba(77,151,242,.55);
  opacity:1; z-index:0; pointer-events:none;
  transition:width .85s var(--ease) .55s, opacity .6s var(--ease) 2s;
}
.compliance-section.in .compliance-row::before{ width:100%; opacity:.14; }

.compliance-section .compliance-badge{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.compliance-section .compliance-badge.activating{
  opacity:1; transform:translateY(-3px);
  border-color:var(--blue-400);
  box-shadow:0 0 16px rgba(77,151,242,.28);
}
.compliance-section .compliance-badge.verified{
  opacity:1; transform:translateY(0);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.compliance-section .compliance-badge .dot{ opacity:.3; transition:opacity .3s var(--ease), box-shadow .3s var(--ease); }
.compliance-section .compliance-badge.activating .dot{ opacity:1; box-shadow:0 0 8px var(--green-glow); }
.compliance-section .compliance-badge.verified .dot{ opacity:1; box-shadow:none; }

.compliance-section .compliance-badge:hover,
.compliance-section .compliance-badge:focus-visible{
  border-color:rgba(77,151,242,.55);
  transform:translateY(-2px);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.compliance-section .compliance-badge:hover .dot,
.compliance-section .compliance-badge:focus-visible .dot{
  box-shadow:0 0 6px var(--green-glow);
  transition:box-shadow .2s var(--ease);
}

@keyframes complianceGridDrift{
  from{ background-position:0 0; }
  to{ background-position:76px 38px; }
}

@media (max-width:900px){
  .compliance-section .compliance-row::before{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding:150px 0 110px; position:relative; overflow:hidden; background:var(--navy-950); }
.hero::after{
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 60% 60% at 80% 10%, rgba(47,123,214,.18), transparent 60%);
}
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-copy{ display:flex; flex-direction:column; gap:26px; }
.hero-copy .lede{ max-width:520px; }
@media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; } .hero{ padding-top:120px; } }

/* ---------- Hero (full-bleed background video) ---------- */
/* Homepage hero: same look as hoverflytech.com / elistair.com - a
   full-width autoplay/muted/loop video behind the hero copy, with a
   dark gradient overlay so the text stays readable over any frame. */
.hero-video{ min-height:660px; display:flex; align-items:center; padding:150px 0 120px; }
.hero-video > .container{ width:100%; }
.hero-video::after{ content:none; } /* replaced by the overlay on .hero-video-wrap below */
.hero-video-wrap{
  position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--navy-950);
}
.hero-video-wrap::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,13,26,.55) 0%, rgba(6,13,26,.66) 45%, rgba(6,13,26,.92) 100%),
    linear-gradient(90deg, rgba(6,13,26,.75) 0%, rgba(6,13,26,.25) 55%, rgba(6,13,26,.55) 100%);
}
.hero-video-wrap iframe{
  position:absolute; top:50%; left:50%;
  /* The current hero video (KS1Hiwq-6Xc) is a 4096x1716 (~2.39:1
     cinematic) export, wider than YouTube's 16:9 player frame, so the
     player pads it with black letterbox bars top/bottom inside that
     frame. The numbers below aren't the plain 16:9 "cover" numbers
     (100vw / 56.25vw / 177.78vh / 100%) - they're those numbers scaled
     up by ~1.343x (the inverse of how much of the 16:9 frame's height
     the real 2.39:1 picture actually fills), so the zoomed-in frame's
     bars land outside the visible box (cropped off by this section's
     overflow:hidden) instead of showing as gaps above/below the video.
     Swapping in a differently-shaped video later (a normal 16:9 clip,
     say) will need this scale factor recalculated for its own ratio. */
  width:134.27vw; height:75.52vw;
  min-height:134.27%; min-width:238.7vh;
  transform:translate(-50%,-50%);
  border:0; pointer-events:none;
}
.hero-inner--video{ display:block; position:relative; z-index:1; }
/* Keep the overlay copy clear of the right side of the frame, where the
   drone footage sits, by capping its width well under half the viewport. */
.hero-inner--video .hero-copy{ max-width:min(560px, 44vw); }
@media (max-width:980px){ .hero-inner--video .hero-copy{ max-width:100%; } }
@media (max-width:980px){ .hero-video{ min-height:560px; padding-top:120px; } }

/* ---------- Final CTA ---------- */
.final-cta{ background:linear-gradient(160deg, var(--navy-800), var(--navy-950)); text-align:center; }
.final-cta .section-head{ margin:0 auto 34px; }
.final-cta .btn-row{ justify-content:center; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-950); border-top:1px solid rgba(255,255,255,.08); padding:70px 0 34px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:32px; }
.footer-col h5{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-500); margin-bottom:16px; }
.footer-col a{ display:block; padding:6px 0; font-size:13.5px; color:var(--gray-300); }
.footer-col a:hover{ color:var(--white); }
.footer-brand p{ color:var(--gray-500); font-size:13.5px; max-width:280px; margin-top:14px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-brand .footer-social-link{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:50%;
  color:var(--gray-400); border:1px solid rgba(255,255,255,.14);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.footer-brand .footer-social-link svg{ display:block; }
.footer-brand .footer-social-link:hover{ color:var(--white); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); }
.footer-bottom{ margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--gray-500); }
@media (max-width:980px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Breadcrumb / page hero (interior pages) ---------- */
.page-hero{ padding:150px 0 76px; background:linear-gradient(180deg, var(--navy-900), var(--navy-950)); }
.breadcrumb{ font-family:var(--font-mono); font-size:12px; color:var(--gray-500); letter-spacing:.04em; text-transform:uppercase; margin-bottom:22px; }
.breadcrumb a{ color:var(--gray-500); }
.breadcrumb a:hover{ color:var(--blue-400); }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid rgba(255,255,255,.08); }
.spec-table td{ padding:16px 4px; font-size:14.5px; }
.spec-table td:first-child{ color:var(--gray-400); width:55%; }
.spec-table td:last-child{ color:var(--white); font-weight:700; font-family:var(--font-mono); text-align:right; }
.bg-light .spec-table tr{ border-bottom:1px solid rgba(10,20,36,.1); }
.bg-light .spec-table td:first-child{ color:var(--gray-500); }
.bg-light .spec-table td:last-child{ color:var(--navy-900); }

.feature-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.feature-item{ display:flex; gap:14px; }
.feature-item .idx{ font-family:var(--font-mono); color:var(--blue-400); font-weight:800; }
.feature-item h4{ font-size:15.5px; font-weight:700; color:var(--white); margin-bottom:4px; }
.feature-item p{ font-size:13.5px; color:var(--gray-400); }
.bg-light .feature-item h4{ color:var(--navy-900); }
@media (max-width:900px){ .feature-list{ grid-template-columns:1fr; } }

.related-strip{ display:flex; gap:20px; overflow-x:auto; padding-bottom:6px; }
.related-strip .card{ min-width:280px; }

.disclaimer{ font-size:12.5px; color:var(--gray-500); border-left:2px solid var(--blue-500); padding:10px 0 10px 16px; margin-top:18px; max-width:640px; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

.badge-inline{ display:inline-block; padding:5px 11px; border:1px solid rgba(255,255,255,.16); border-radius:20px; font-size:11.5px; font-family:var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--gray-300); }

/* Contact form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1/-1; }
.form-field label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--gray-400); margin-bottom:8px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; background:var(--navy-800); border:1px solid rgba(255,255,255,.14);
  color:var(--white); padding:13px 14px; border-radius:3px; font-family:inherit; font-size:14px;
}
.form-field textarea{ min-height:120px; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--blue-400); }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

.contact-method{ display:flex; gap:16px; padding:20px 0; border-top:1px solid rgba(255,255,255,.08); }
.contact-method h4{ color:var(--white); font-size:14.5px; margin-bottom:4px; }
.contact-method p{ font-size:13.5px; color:var(--gray-400); }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }


/* ========================================================================
   Zenith Architecture v2 -- interactive single-scene preview
   Added alongside (not replacing) the existing 01-04 diagram above, so it
   can be compared side-by-side. Self-contained: new class names only
   (zarch2-*), no existing selectors touched. Uses the real desert field
   photograph (assets/img/zarch2-base.jpg) and the real GCS cutout
   (assets/img/zarch2-gcs.png). See main.js for the matching JS (search
   "Zenith Architecture v2").
   ======================================================================== */

.zarch2-section{
  --zarch2-cyan:#22d3ee;
  --zarch2-cyan-soft:rgba(34,211,238,.35);
}

.zarch2-stage{ position:relative; }

.zarch2-media{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:var(--navy-900);
  isolation:isolate;
}

/* Clips the scene to the rounded frame. Hotspot labels/sticks and the
   drawer live outside this wrapper (direct children of .zarch2-media) so
   a label anchored near the frame's edge can spill past the photo instead
   of being hard-clipped. The fade/zoom reveal now lives on the frame
   itself so every background layer inside it scales together. */
.zarch2-photo-frame{
  position:absolute; inset:0;
  overflow:hidden;
  border-radius:inherit;
  isolation:isolate;
  opacity:0;
  transform:scale(1);
  transition:opacity 1.1s var(--ease), transform 20s linear;
  will-change:opacity, transform;
}
.zarch2-media--in .zarch2-photo-frame{ opacity:1; transform:scale(1.015); }

/* Animated day/night scene: a looping cloud video behind a cutout photo of
   the rig (drone + upper tether removed so they can be animated on their
   own layer), a masked duplicate of the mountains for night darkening,
   and an SVG layer carrying the moving tether + hovering drone. Stacked
   0-5 inside their own isolated context so they never compete with the
   dataflow/hotspot layers painted on top of .zarch2-photo-frame. */
.zarch2-sky{
  /* Fixed to the top 50% of the frame (not the video's own 16:9 ratio) so
     it always fully covers the transparent "sky" cutout in the ground
     photo (alpha-tested: cutout ends ~42-44% down the frame on every
     breakpoint, since the photo's own aspect ratio matches object-fit:cover
     1:1 on the vertical axis). The old aspect-ratio/top:-32% version was
     tuned only for the desktop 2:1 .zarch2-media ratio; at the 4:3 ratio
     used below 900px it fell ~14pts short of the cutout, letting the
     video's own baked-in horizon/ground show through near the bottom of
     the cutout on narrow screens. */
  position:absolute; top:0; left:0; right:0; width:100%; height:50%;
  object-fit:cover; object-position:center top;
  transform:scaleX(-1);
  z-index:0;
}
.zarch2-haze{
  position:absolute; inset:22% 0 auto; height:27%;
  z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgb(var(--zarch2-haze-color,170 185 193) / .12) 45%, rgb(var(--zarch2-haze-color,170 185 193) / .65));
}
.zarch2-ground-pic{
  position:absolute; inset:0; display:block;
  z-index:2; pointer-events:none;
  filter:brightness(var(--zarch2-light,1)) sepia(var(--zarch2-warm,0));
}
.zarch2-ground-pic img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.zarch2-mountains{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
  object-fit:cover; object-position:center;
  filter:brightness(var(--zarch2-mountain-light,1)) saturate(var(--zarch2-mountain-saturation,1));
  mask-image:linear-gradient(transparent 23%, black 27%, black 43%, transparent 50%);
}
.zarch2-flight{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:4; pointer-events:none; overflow:visible;
  filter:brightness(var(--zarch2-light,1)) sepia(var(--zarch2-warm,0));
}

.zarch2-vignette{
  position:absolute; inset:0; pointer-events:none;
  z-index:5;
  background:
    linear-gradient(to top, rgba(6,11,20,.55), transparent 38%),
    linear-gradient(115deg, rgba(6,11,20,.4), transparent 42%);
}

.zarch2-dataflow{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }

/* Tether: two parallel illuminated strands -- warm amber POWER flowing up
   toward the aircraft, cyan FIBER DATA shimmering gently both ways. */
.zarch2-tether-power-glow,
.zarch2-tether-power-flow,
.zarch2-tether-data-glow,
.zarch2-tether-data-flow,
.zarch2-link-glow,
.zarch2-link-flow{
  fill:none;
  opacity:0;
  transition:opacity 1s var(--ease);
}
.zarch2-tether-power-glow{ stroke:#ffb020; stroke-width:7; stroke-linecap:round; filter:blur(3px); }
.zarch2-tether-power-flow{
  stroke:#ffd27a; stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:13 23;
  filter:drop-shadow(0 0 5px rgba(255,176,32,.9));
}
.zarch2-tether-data-glow{ stroke:var(--zarch2-cyan); stroke-width:5; stroke-linecap:round; filter:blur(3px); }
.zarch2-tether-data-flow{
  stroke:#bdf4ff; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:7 27;
  filter:drop-shadow(0 0 4px rgba(34,211,238,.85));
}

/* Ground link: GPU -> GCS / Intelligence-C2 endpoint */
.zarch2-link-glow{ stroke:var(--zarch2-cyan); stroke-width:6; stroke-linecap:round; filter:blur(3px); }
.zarch2-link-flow{
  stroke:#d8faff; stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:9 25;
  filter:drop-shadow(0 0 5px rgba(34,211,238,.9));
}
.zarch2-link-pulse{
  fill:var(--white);
  opacity:0;
  filter:drop-shadow(0 0 6px rgba(34,211,238,1));
  transition:opacity 1s var(--ease);
}

.zarch2-junction-glow, .zarch2-endpoint-glow{
  opacity:0;
  filter:blur(7px);
  transition:opacity 1s var(--ease);
}
.zarch2-junction-glow{ fill:#ffb020; }
.zarch2-endpoint-glow{ fill:var(--zarch2-cyan); }

.zarch2-dataflow--on .zarch2-tether-power-glow{ opacity:.5; }
.zarch2-dataflow--on .zarch2-tether-power-flow{ opacity:1; animation:zarch2FlowPower 1.7s linear infinite; }
.zarch2-dataflow--on .zarch2-tether-data-glow{ opacity:.32; }
.zarch2-dataflow--on .zarch2-tether-data-flow{ opacity:.85; animation:zarch2FlowDataBidir 3.4s ease-in-out infinite alternate; }
.zarch2-dataflow--on .zarch2-link-glow{ opacity:.45; }
.zarch2-dataflow--on .zarch2-link-flow{ opacity:.95; animation:zarch2FlowLink 2s linear infinite; }
.zarch2-dataflow--on .zarch2-link-pulse{ opacity:.95; }
.zarch2-dataflow--on .zarch2-junction-glow{ opacity:.55; animation:zarch2GlowPulse 2.8s ease-in-out infinite; }
.zarch2-dataflow--on .zarch2-endpoint-glow{ opacity:.55; animation:zarch2GlowPulse 2.8s ease-in-out infinite 1.1s; }

@keyframes zarch2FlowPower{ to{ stroke-dashoffset:-72; } }
@keyframes zarch2FlowDataBidir{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-34; } }
@keyframes zarch2FlowLink{ to{ stroke-dashoffset:-68; } }
@keyframes zarch2GlowPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.7; } }

.zarch2-hotspot{
  position:absolute; left:var(--zx); top:var(--zy);
  transform:translate(-50%,-50%);
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; margin:0; cursor:pointer;
  opacity:0; z-index:5;
  transition:opacity .5s var(--ease);
}
.zarch2-hotspot--shown{ opacity:1; }
.zarch2-hotspot-dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--navy-950);
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 0 rgba(6,11,20,.5);
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  animation:zarch2Breathe 3.4s ease-in-out infinite;
}
@keyframes zarch2Breathe{
  0%,100%{ box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 0 rgba(6,11,20,.45); transform:scale(1); }
  50%{ box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 9px rgba(6,11,20,0); transform:scale(1.18); }
}
.zarch2-hotspot:hover .zarch2-hotspot-dot,
.zarch2-hotspot:focus-visible .zarch2-hotspot-dot{
  background:var(--zarch2-cyan);
  box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 12px 2px rgba(34,211,238,.7);
  transform:scale(1.35);
}
.zarch2-hotspot--active .zarch2-hotspot-dot{ background:var(--white); box-shadow:0 0 0 2px rgba(255,255,255,.95); }
.zarch2-hotspot-label{
  position:absolute; left:var(--lx); top:var(--ly);
  transform:translate(-100%,-50%);
  white-space:nowrap;
  background:var(--navy-950);
  border:1px solid var(--navy-950);
  color:var(--white);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 10px; border-radius:4px;
  opacity:0; pointer-events:none; z-index:5; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  transition:opacity .5s var(--ease), background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.zarch2-hotspot-label--shown{ pointer-events:none; }
.zarch2-hotspot-label--hot,
.zarch2-hotspot-label--active{
  opacity:1; pointer-events:auto;
  background:var(--navy-950); border-color:var(--zarch2-cyan);
  transform:translate(-100%,-50%) scale(1.04);
}

/* Thin leader line connecting each dot to its label, so the label can
   sit away from the dot (clear of the aircraft/payload) while it's
   still obvious which point it describes. */
.zarch2-hotspot-stick{
  stroke:var(--navy-950); stroke-width:2.5;
  opacity:0; transition:opacity .6s var(--ease);
}

/* On hover-capable devices, keep the diagram decluttered to just its
   dots and nav bullets until the visitor actually engages with it —
   hovering (or keyboard-focusing into) the stage reveals the hotspot
   labels, leader lines, and full nav bar text/arrows. Touch devices
   (no real hover) keep everything visible, same as before. */
@media (hover:hover){
  .zarch2-stage:hover .zarch2-hotspot-label--shown,
  .zarch2-stage:focus-within .zarch2-hotspot-label--shown{ opacity:1; pointer-events:auto; }
  .zarch2-stage:hover .zarch2-hotspot-stick--shown,
  .zarch2-stage:focus-within .zarch2-hotspot-stick--shown{ opacity:.95; }
}
@media not all and (hover:hover){
  .zarch2-hotspot-stick--shown{ opacity:.95; }
}

.zarch2-drawer{
  position:absolute; top:0; right:0; bottom:0; z-index:10;
  width:360px; max-width:88%;
  background:rgba(6,11,20,.93);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-left:1px solid var(--zarch2-cyan-soft);
  padding:30px 26px;
  overflow-y:auto;
  border-radius:0 var(--radius) var(--radius) 0;
  transform:translateX(100%);
  opacity:0; visibility:hidden;
  transition:transform .5s var(--ease), opacity .4s var(--ease), visibility 0s linear .5s;
}
.zarch2-drawer.zarch2-drawer--open{
  transform:translateX(0); opacity:1; visibility:visible;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.zarch2-drawer-close{
  position:absolute; top:14px; right:16px;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:50%;
  color:var(--white); font-size:18px; line-height:1; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.zarch2-drawer-close:hover{ background:rgba(34,211,238,.18); border-color:var(--zarch2-cyan); }
.zarch2-drawer-eyebrow{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--zarch2-cyan); margin-bottom:10px;
}
.zarch2-drawer-title{ font-size:22px; color:var(--white); margin-bottom:12px; padding-right:28px; }
.zarch2-drawer-lede{ font-size:14px; line-height:1.65; color:var(--gray-300); margin-bottom:20px; }
.zarch2-drawer-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.zarch2-drawer-group{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08); }
.zarch2-drawer-group:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.zarch2-drawer-group h4{ font-size:13px; color:var(--white); margin-bottom:4px; }
.zarch2-drawer-group p{ font-size:13px; color:var(--gray-400); margin:0; }

.zarch2-nav{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:4px; margin-top:16px; padding:10px 14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:4px;
}
.zarch2-nav-item{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gray-400); background:transparent; border:0; padding:7px 9px; border-radius:3px;
  cursor:pointer; transition:color .2s var(--ease), background .2s var(--ease);
}
.zarch2-nav-item:hover{ color:var(--white); }
.zarch2-nav-item--active{ color:var(--navy-950); background:var(--zarch2-cyan); }
.zarch2-nav-arrow{ color:var(--gray-500); font-size:12px; }

.zarch2-sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  z-index:999;
}
.zarch2-sheet-backdrop--open{ opacity:1; pointer-events:auto; }
.zarch2-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  max-height:74vh; overflow-y:auto;
  background:rgba(6,11,20,.97);
  border-top:1px solid var(--zarch2-cyan-soft);
  border-radius:16px 16px 0 0;
  padding:18px 20px 30px;
  transform:translateY(100%);
  transition:transform .4s var(--ease);
}
.zarch2-sheet--open{ transform:translateY(0); }
.zarch2-sheet-bar{ display:block; width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,.25); margin:0 auto 14px; }
.zarch2-sheet-close{
  position:absolute; top:14px; right:16px;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:50%;
  color:var(--white); font-size:18px; line-height:1; cursor:pointer;
}

@media (max-width:900px){
  .zarch2-media{ aspect-ratio:4/3; }
  .zarch2-drawer{ display:none; }
  .zarch2-hotspot{ width:42px; height:42px; }
  .zarch2-hotspot-label{ font-size:9.5px; padding:5px 8px; }
  /* 05 sits too close to the left edge on narrow screens for its label
     to fully open leftward (no room between it and the viewport edge);
     open it rightward there instead. */
  [data-zarch2-label="05"]{
    left:19.2%; top:calc(67.0% + 30px); right:auto;
    transform:translate(-50%,0); text-align:center;
  }
  [data-zarch2-stick="05"]{ display:none; }
  .zarch2-nav{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .zarch2-nav::-webkit-scrollbar{ display:none; }
  .zarch2-nav-item{ flex:0 0 auto; }
}
@media (min-width:901px){
  .zarch2-sheet, .zarch2-sheet-backdrop{ display:none; }
}


/* === Platform pages — premium interactive upgrade (Quad-L spec) === */
/* Added for the "ONE AIRCRAFT. MULTIPLE MISSIONS." / "POWER + DATA THROUGH
   THE TETHER." / "SYSTEM ARCHITECTURE." upgrade to single-platform.php.
   New scoped class names only; nothing existing is redefined except via
   additive rules (hover/accent) appended after the base declaration. The
   amber/cyan tether flow reuses the existing global .zarch2-tether-* /
   .zarch2-dataflow--on primitives and keyframes defined above (search
   "Zenith Architecture v2") so both diagrams share one visual language. */

/* ---- 1. Mission configurator ---- */
.pf-mission{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .pf-mission{ grid-template-columns:1fr; } }
.pf-mission-visual{ position:relative; }
.pf-mission-badge{
  position:absolute; left:18px; right:18px; bottom:18px; z-index:3;
  padding:14px 18px; border-radius:4px;
  background:rgba(6,11,20,.84); border:1px solid rgba(255,255,255,.14);
  color:var(--gray-200); font-size:13px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.pf-mission-badge strong{ color:var(--white); }
.pf-mission-badge.active{ opacity:1; transform:translateY(0); }
.pf-mission-badge-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--blue-400); box-shadow:0 0 0 4px rgba(77,151,242,.25);
  margin-right:8px; vertical-align:middle;
}
.pf-mission-tabs{ margin-bottom:20px; }
.pf-mission-panel{ display:none; }
.pf-mission-panel.active{ display:block; }
.pf-mission-panel .lede{ font-size:15px; }
.pf-mission-interface{ margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); }
.pf-mission-interface > .eyebrow{ display:block; margin-bottom:10px; }
.pf-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.pf-mission-payloads{ margin-top:24px; }
.pf-mission-payloads > .eyebrow{ display:block; margin-bottom:10px; }

/* ---- 2. Tether architecture (power/data visual) ---- */
.pf-tether{
  display:grid; grid-template-columns:140px 1fr; gap:36px; align-items:center;
  padding:32px; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--navy-800), var(--navy-950));
}
@media (max-width:640px){ .pf-tether{ grid-template-columns:100px 1fr; padding:22px; } }
.pf-tether-svg{ width:100%; height:auto; display:block; }
.pf-tether-node{ fill:var(--navy-900); stroke:rgba(255,255,255,.18); stroke-width:1.5; }
.pf-tether-node-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  fill:var(--gray-300);
}
.pf-tether-legend{ display:flex; flex-direction:column; gap:14px; }
.pf-tether-legend-item{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.03em;
  color:var(--gray-300); display:flex; align-items:center; gap:10px;
}
.pf-tether-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.pf-tether-legend--power .pf-tether-dot{ background:#ffb020; box-shadow:0 0 8px rgba(255,176,32,.7); }
.pf-tether-legend--data .pf-tether-dot{ background:var(--zarch2-cyan,#22d3ee); box-shadow:0 0 8px rgba(34,211,238,.7); }

/* ---- 3. System architecture (horizontal node flow) ---- */
.pf-arch{ display:flex; align-items:stretch; flex-wrap:wrap; gap:0; }
@media (max-width:900px){ .pf-arch{ flex-direction:column; } }
.pf-arch-node{
  flex:1 1 0; min-width:140px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:4px;
  padding:22px 14px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  background:var(--navy-900);
}
.pf-arch-node-label{ font-size:13.5px; font-weight:700; color:var(--white); letter-spacing:.01em; }
.pf-arch-node-sub{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-400); }
.pf-arch-node--primary{ border-color:var(--blue-400); background:rgba(47,123,214,.1); }
.pf-arch-node--tether{ border-image:linear-gradient(135deg,#ffb020,var(--zarch2-cyan,#22d3ee)) 1; }
.pf-arch-arrow{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:44px; color:var(--gray-500); font-size:18px;
}
@media (max-width:900px){ .pf-arch-arrow{ width:100%; height:28px; transform:rotate(90deg); } }
.pf-arch-arrow--pd{
  background:linear-gradient(90deg,#ffb020,var(--zarch2-cyan,#22d3ee));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800;
}

/* ---- 4. Technical specifications tabs ---- */
.pf-spec-panel{ display:none; }
.pf-spec-panel.active{ display:table; }

/* ---- 5. ZATQGC screenshot — widen the image column ---- */
.two-col--zatqgc{ grid-template-columns:0.85fr 1.2fr; }
@media (max-width:900px){ .two-col--zatqgc{ grid-template-columns:1fr; } }

/* ---- 6. Field Imagery — 1 large + 2 small gallery (scoped; the shared
   .field-grid base used by the homepage Field Proven section is untouched) ---- */
.field-grid--featured{
  display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:20px;
}
.field-grid--featured > .field-item:nth-child(1){ grid-column:1; grid-row:1 / 3; display:flex; flex-direction:column; }
.field-grid--featured > .field-item:nth-child(1) .visual{ flex:1; min-height:0; }
.field-grid--featured > .field-item:nth-child(2){ grid-column:2; grid-row:1; }
.field-grid--featured > .field-item:nth-child(3){ grid-column:2; grid-row:2; }
@media (max-width:900px){
  .field-grid--featured{ grid-template-columns:1fr; grid-template-rows:auto; }
  .field-grid--featured > .field-item:nth-child(1),
  .field-grid--featured > .field-item:nth-child(2),
  .field-grid--featured > .field-item:nth-child(3){ grid-column:1; grid-row:auto; }
  .field-grid--featured > .field-item:nth-child(1) .visual{ min-height:190px; }
}

/* ---- 7. Performance strip — subtle accent + lift to emphasize the numbers ---- */
.stat-cell{ position:relative; overflow:hidden; transition:background .25s var(--ease); }
.stat-cell::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue-400), var(--zarch2-cyan,#22d3ee));
  opacity:0; transition:opacity .25s var(--ease);
}
.stat-cell:hover{ background:var(--navy-900); }
.stat-cell:hover::before{ opacity:1; }


/* === Platform hero — full-bleed image upgrade === */
/* Replaces the old text-only .page-hero + small boxed "hero visual" section
   on single-platform.php with one full-bleed cinematic hero: the platform's
   Hero Image fills the whole section, text sits over a bottom gradient.
   Scoped to single-platform.php only -- .page-hero itself (shared by many
   other templates) is untouched. */
.platform-hero{
  position:relative; overflow:hidden;
  min-height:640px; display:flex; align-items:flex-end;
  padding:150px 0 64px;
  background:linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.platform-hero-media{ position:absolute; inset:0; z-index:0; }
.platform-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.platform-hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,20,.1) 0%, rgba(6,11,20,.55) 58%, rgba(6,11,20,.97) 100%);
}
.platform-hero-content{ position:relative; z-index:1; width:100%; }
.platform-hero-panel{
  display:inline-block; max-width:min(680px, 100%);
  background:rgba(6,11,20,.62);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:32px 36px;
}
@media (max-width:760px){
  .platform-hero{ min-height:520px; padding:130px 0 44px; }
  .platform-hero-panel{ padding:24px 22px; }
}


/* === Mission configurator — editable aircraft + per-mission payload images === */
/* Appended after the base .pf-mission-badge rules above (cascade order wins)
   to turn the badge into a flex row that can hold a payload thumbnail, and
   to add the stage tag / mission counter chrome copied from the homepage
   configurator's "labeled hardware stage" look -- positioned at the frame
   corners only, so it works with any uploaded photo (no fixed-geometry
   rail overlay like the homepage's Quad-8 illustration needs). */
.pf-mission-badge{ display:flex; align-items:center; gap:12px; }
.pf-mission-badge-thumb{
  width:56px; height:56px; flex:0 0 auto; object-fit:cover;
  border-radius:4px; border:1px solid rgba(255,255,255,.2);
}
.pf-mission-badge-text{ display:flex; flex-direction:column; gap:2px; }
.pf-mission-badge-text span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; color:var(--gray-400); }
.pf-mission-badge-text strong{ font-size:14px; color:var(--white); font-weight:700; }

.pf-mission-stage-tag{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
  color:var(--blue-300); background:rgba(6,11,20,.62);
  padding:6px 10px; border-radius:3px; border:1px solid rgba(255,255,255,.12);
}
.pf-mission-counter{
  position:absolute; top:14px; right:14px; z-index:3;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
  color:var(--gray-300); background:rgba(6,11,20,.62);
  padding:6px 10px; border-radius:3px; border:1px solid rgba(255,255,255,.12);
  opacity:0; transition:opacity .35s var(--ease);
}
.pf-mission-counter.active{ opacity:1; }

/* Quad-L mission configurator: the active payload is composited directly
   onto the aircraft's belly mount point, dead-centered on the aircraft
   artwork -- fine alignment to the actual mount bracket is handled by the
   payload cutout images themselves (their own internal padding), not by
   per-payload CSS offsets. Swapping the active payload crossfades AND
   slides in, echoing the homepage configurator's install/remove motion,
   driven by the existing [data-tabs] system (no extra JS needed). */
.pf-mission-mount{
  position:absolute; left:50%; top:48.2%; width:17%; aspect-ratio:1;
  transform:translateX(-50%); z-index:2; pointer-events:none;
}
.pf-mission-mount-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  object-position:top center;
  opacity:0; transform:translateY(22px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
}
.pf-mission-mount-img.active{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .pf-mission-mount-img{ transition:none; }
}

/* === "ENGINEERED FOR CONTINUOUS OPERATIONS." reliability strip ===
   Sits between the Mission Configurator and Tether Architecture sections on
   every platform page, breaking up what was otherwise two bg-navy-alt
   sections back to back with no visual seam. */
.reliability-item{ display:flex; flex-direction:column; gap:14px; }
.reliability-icon{
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14); border-radius:8px;
  color:var(--blue-400); background:rgba(255,255,255,.03);
}
.reliability-item h4{ font-size:15.5px; font-weight:700; color:var(--white); letter-spacing:.01em; }
.reliability-item p{ font-size:13.5px; color:var(--gray-400); line-height:1.6; }


/* === Deployment Options — interactive configurator === */
.pf-deploy-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.pf-deploy-intro{ max-width:380px; margin:0; }
.pf-deploy-tabs{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }
.pf-deploy-tab{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:6px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:var(--navy-900);
  color:var(--blue-300); font-family:inherit; font-size:14px; font-weight:700;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.pf-deploy-tab svg{ flex:0 0 auto; }
.pf-deploy-tab:hover{ border-color:var(--blue-400); color:var(--white); }
.pf-deploy-tab.active{ background:var(--blue-500); border-color:var(--blue-500); color:var(--white); }
@media (max-width:640px){ .pf-deploy-tab span{ display:none; } .pf-deploy-tab{ padding:12px; } }

.pf-deploy-panel{ display:none; }
.pf-deploy-panel.active{
  display:grid; grid-template-columns:1fr 1.6fr;
  border:1px solid rgba(255,255,255,.1); border-radius:8px; overflow:hidden;
  background:var(--navy-900);
}
@media (max-width:900px){ .pf-deploy-panel.active{ grid-template-columns:1fr; } }
.pf-deploy-info{ padding:36px 32px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.pf-deploy-count{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--blue-400); }
.pf-deploy-info h3{ font-size:1.6rem; font-weight:800; color:var(--white); }
.pf-deploy-visual{ min-height:280px; }
.pf-deploy-visual .visual{ height:100%; min-height:280px; border:none; border-radius:0; }

.pf-deploy-thumbs{ display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; }
.pf-deploy-thumb{ width:140px; }
@media (max-width:480px){ .pf-deploy-thumb{ width:calc(50% - 7px); } }
.pf-deploy-thumb{
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:8px;
}
.pf-deploy-thumb img, .pf-deploy-thumb-empty{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  border-radius:5px; border:2px solid transparent;
  background:linear-gradient(160deg, var(--navy-700), var(--navy-900));
  transition:border-color .18s var(--ease), opacity .18s var(--ease);
  opacity:.65;
}
.pf-deploy-thumb.active img, .pf-deploy-thumb.active .pf-deploy-thumb-empty{
  border-color:var(--blue-400); opacity:1;
}
.pf-deploy-thumb-label{ font-size:13px; color:var(--gray-400); transition:color .18s var(--ease); }
.pf-deploy-thumb.active .pf-deploy-thumb-label{ color:var(--blue-300); font-weight:700; }

/* ============================================================================
   GPU-type platform pages (Ground Power Unit / Trailer System) -- a second
   page "format" that replaces the drone-oriented Mission Configurator / big
   C2 animation / Deployed-Your-Way tabs with sections that actually describe
   a ground infrastructure product. Scoped to new classes only; nothing
   drone-specific above is touched. See $pf_is_gpu_type in single-platform.php.
   ========================================================================= */

/* ---- "FROM AC INPUT TO AIRCRAFT." power/data architecture diagram ----
   A real field photo (aircraft on tether, GPU/generator visible on the
   ground) with the same glowing amber/cyan tether flow primitives traced
   over the actual tether line, plus small pulsing dot markers on the real
   aircraft/GPU/generator and floating, icon-led info cards connected to
   them with thin dashed leader lines. Cards are absolutely positioned via
   inline left/top from the PHP template on desktop, and drop into normal
   document flow (stacked, no overlay) below 900px where free-floating
   absolute positioning over a photo stops being legible. */
.pf-arch2-sub{ max-width:620px; margin-top:10px; }
.pf-arch3{ position:relative; margin-top:16px; }
.pf-arch3-media{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:3/2; background:#060b14; }
.pf-arch3-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pf-arch3-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
/* The viewBox here (1800x1200) is much larger than the drone tether
   diagram's (1000x540), so the shared .zarch2-tether-* stroke/dash metrics
   -- sized for that smaller viewBox -- would render too thin at this
   scale. Scale them up here to keep the same visual weight. */
.pf-arch3-svg .zarch2-tether-power-glow{ stroke-width:12; }
.pf-arch3-svg .zarch2-tether-power-flow{ stroke-width:4; stroke-dasharray:22 38; }
.pf-arch3-svg .zarch2-tether-data-glow{ stroke-width:9; }
.pf-arch3-svg .zarch2-tether-data-flow{ stroke-width:3.4; stroke-dasharray:12 46; }
/* Bright dashed core + dark halo so the leader reads against both the deep
   blue sky and the light sand in the photo. */
.pf-arch3-leader{
  stroke:rgba(255,255,255,.95); stroke-width:2; stroke-dasharray:5 5;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.9));
}
.pf-arch3-dot{
  fill:var(--blue-400); stroke:#fff; stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(79,158,255,.7));
  animation:pfArch3DotPulse 2.6s ease-in-out infinite;
}
/* The aircraft marker sits right on the tiny drone in the photo -- a solid
   dot would bury it, so this one is a hollow ring around it instead. */
.pf-arch3-dot--ring{
  fill:none; stroke:#fff; stroke-width:4;
  filter:drop-shadow(0 0 5px rgba(79,158,255,.85)) drop-shadow(0 0 2px rgba(0,0,0,.8));
}
@keyframes pfArch3DotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.pf-arch3-cards{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.pf-arch2-card{
  position:absolute; transform:translateY(-50%); z-index:2; pointer-events:auto;
  display:flex; gap:12px; align-items:flex-start;
  width:228px; padding:14px 16px; border-radius:8px;
  background:rgba(6,11,20,.9); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.pf-arch2-icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16);
  color:var(--blue-400);
}
.pf-arch2-icon--power{ color:#ffb020; border-color:rgba(255,176,32,.4); }
.pf-arch2-icon--data{ color:var(--zarch2-cyan,#22d3ee); border-color:rgba(34,211,238,.4); }
.pf-arch2-card h4{ font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--white); margin:0 0 4px; }
.pf-arch2-tag{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--gray-400); margin-bottom:4px; }
.pf-arch2-card p{ font-size:11.5px; color:var(--gray-400); line-height:1.5; margin:0; }
@media (max-width:900px){
  .pf-arch3-media{ aspect-ratio:4/3; }
  .pf-arch3-svg{ display:none; }
  .pf-arch3-cards{ position:static; display:flex; flex-direction:column; gap:10px; margin-top:14px; pointer-events:auto; }
  .pf-arch2-card{ position:static; transform:none; width:auto; box-shadow:none; }
}

/* ---- "INSIDE THE GPU." interactive hotspot photo ----
   Pure CSS hover/focus tooltips -- no JS needed, consistent with the rest
   of this file's house style for small interactive reveals. Positions are
   set per-hotspot via inline left/top percentages from the PHP template. */
.pf-gpu-inside{ position:relative; }
.pf-gpu-inside-img{
  width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius); border:1px solid rgba(255,255,255,.08);
}
.pf-hotspot{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
}
.pf-hotspot-dot{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:rgba(6,11,20,.82); border:1.5px solid var(--blue-400);
  color:var(--white); font-family:var(--font-mono); font-size:11px; font-weight:700;
  box-shadow:0 0 0 4px rgba(77,151,242,.18);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.pf-hotspot:hover .pf-hotspot-dot,
.pf-hotspot:focus-visible .pf-hotspot-dot{
  background:var(--blue-500); transform:scale(1.1);
}
.pf-hotspot-tip{
  position:absolute; left:50%; bottom:calc(100% + 12px); width:220px;
  transform:translateX(-50%) translateY(6px);
  padding:14px 16px; border-radius:6px;
  background:rgba(6,11,20,.94); border:1px solid rgba(255,255,255,.14);
  display:flex; flex-direction:column; gap:4px; text-align:left;
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.pf-hotspot-tip strong{ font-size:13px; color:var(--white); }
.pf-hotspot-tip span{ font-size:12px; color:var(--gray-400); line-height:1.5; }
.pf-hotspot:hover .pf-hotspot-tip,
.pf-hotspot:focus-visible .pf-hotspot-tip{
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
/* Hotspots near the top edge open their tooltip downward instead */
.pf-hotspot--below .pf-hotspot-tip{ bottom:auto; top:calc(100% + 12px); transform:translateX(-50%) translateY(-6px); }
.pf-hotspot--below:hover .pf-hotspot-tip,
.pf-hotspot--below:focus-visible .pf-hotspot-tip{ transform:translateX(-50%) translateY(0); }
/* Hotspots near the left/right edge anchor the tooltip instead of centering it */
.pf-hotspot--anchor-left .pf-hotspot-tip{ left:0; transform:translateX(0) translateY(6px); }
.pf-hotspot--anchor-left:hover .pf-hotspot-tip,
.pf-hotspot--anchor-left:focus-visible .pf-hotspot-tip{ transform:translateX(0) translateY(0); }
.pf-hotspot--anchor-right .pf-hotspot-tip{ left:auto; right:0; transform:translateX(0) translateY(6px); }
.pf-hotspot--anchor-right:hover .pf-hotspot-tip,
.pf-hotspot--anchor-right:focus-visible .pf-hotspot-tip{ transform:translateX(0) translateY(0); }
@media (max-width:640px){
  .pf-hotspot-tip{ width:160px; }
  .pf-hotspot-tip strong{ font-size:12px; }
  .pf-hotspot-tip span{ font-size:11px; }
}

/* ---- "BUILT FOR RAPID FIELDING." single photo + bullet list ---- */
.pf-rapid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.pf-rapid-points{ display:flex; flex-direction:column; gap:24px; }
@media (max-width:900px){ .pf-rapid{ grid-template-columns:1fr; } }

/* ---- Technical Specifications -- GPU-type 4-group layout ---- */
.pf-spec-groups{ display:grid; grid-template-columns:1fr 1fr; gap:8px 32px; }
.pf-spec-group-title{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.08em;
  color:var(--blue-400); margin:20px 0 2px;
}
.pf-spec-group .spec-table td{ padding:10px 4px; font-size:13.5px; }
@media (max-width:640px){ .pf-spec-groups{ grid-template-columns:1fr; } }

/* ========================================================================
   Brochure / datasheet download gate -- lead-capture modal
   One shared modal (printed in the footer), opened by any element with
   [data-brochure-trigger]. Visual language mirrors .video-lightbox above:
   fixed overlay, blurred backdrop, a dialog panel, Escape/backdrop/close
   button to dismiss, focus moved in on open and restored on close.
   ======================================================================== */
body.brochure-modal-locked{ overflow:hidden; }
.brochure-modal{
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), visibility 0s linear .25s;
}
.brochure-modal--open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .25s var(--ease);
}
.brochure-modal-backdrop{
  position:absolute; inset:0; background:rgba(4,9,18,.85);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.brochure-modal-dialog{
  position:relative; z-index:1; width:min(640px,100%);
  max-height:88vh; overflow-y:auto;
  background:var(--navy-900); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:36px 40px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.brochure-modal-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:50%;
  color:var(--white); font-size:20px; line-height:1; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.brochure-modal-close:hover{ background:rgba(34,211,238,.18); border-color:var(--blue-400); }
.brochure-modal-dialog h3{
  font-size:1.4rem; font-weight:800; letter-spacing:.01em;
  color:var(--blue-400); padding-right:30px; margin:0;
}
.brochure-modal-sub{ color:var(--gray-300); margin-top:8px; font-size:14.5px; }
.brochure-modal-consent{
  display:flex; gap:10px; align-items:flex-start; margin-top:22px;
  font-size:12.5px; line-height:1.5; color:var(--gray-400); cursor:pointer;
}
.brochure-modal-consent input{ margin-top:3px; flex:0 0 auto; }
.brochure-modal-error{
  color:#ff8080; font-size:13px; margin:14px 0 0; display:block;
}
.brochure-modal-error[hidden]{ display:none; }
@media (max-width:600px){
  .brochure-modal-dialog{ padding:28px 22px; }
}

/* Contact page form status (success/error) after an AJAX submit */
.form-status{
  grid-column:1/-1; font-size:13.5px; padding:12px 14px; border-radius:4px;
  border:1px solid transparent;
}
.form-status[hidden]{ display:none; }
.form-status--success{ color:#8fe3a8; background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.3); }
.form-status--error{ color:#ff8080; background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); }