/* ============================================================
   RADIAL DEFENSE — homepage styles
   Barlow (display/body) + IBM Plex Mono (data/specs)
   Gold #908459 · Venta #272728 · Light #F3F3F2 · dark default
   ============================================================ */

:root{
  --ink:        #1a1a1b;   /* page base — a notch deeper than Venta for depth */
  --panel:      #272728;   /* Venta */
  --panel-2:    #202021;
  --panel-3:    #2e2e2f;
  --gold:       #908459;
  --gold-lo:    #6f663f;
  --gold-hi:    #b3a574;
  --light:      #f3f3f2;
  --muted:      rgba(243,243,242,.56);
  --faint:      rgba(243,243,242,.34);
  --ghost:      rgba(243,243,242,.14);
  --line:       rgba(243,243,242,.09);
  --line-strong:rgba(243,243,242,.16);
  --gold-line:  rgba(144,132,89,.40);

  --sans: 'Barlow', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --gut: clamp(20px, 5vw, 80px);
  --maxw: 1320px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--light);
  font-family:var(--sans);
  font-weight:500;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--gold); color:#15140f; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---- shared typographic helpers ---- */
.mono{ font-family:var(--mono); }
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
.label-faint{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--faint);
}
.section{
  padding:clamp(72px,11vh,140px) var(--gut);
  position:relative;
}
.wrap{ max-width:var(--maxw); margin:0 auto; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding-bottom:30px;
  margin-bottom:54px;
  border-bottom:1px solid var(--line);
}
.section-head h2{
  font-size:clamp(30px,4.4vw,52px);
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:.98;
  margin:14px 0 0;
}
.section-head .idx{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.3em;
  color:var(--faint);
}
.section-head .aside{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
  max-width:34ch;
  text-align:right;
  line-height:1.55;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gut);
  height:88px;
  background:rgba(20,20,21,0);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.nav.solid{
  background:rgba(20,20,21,.74);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:14px; color:var(--gold); }
.brand .rd-mark{ height:42px; width:auto; flex:none; display:block; }
.brand .rd-word{ height:32px; width:auto; display:block; }
.brand svg path, .brand svg polygon{ fill:currentColor; }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  position:relative;
  padding:6px 0;
  transition:color .2s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .28s ease;
}
.nav-links a:hover{ color:var(--light); }
.nav-links a:hover::after{ right:0; }

.nav-utils{ display:flex; align-items:center; gap:18px; }
/* ---- fire-selector language switch (DE | EN) ---- */
.lang-toggle{ position:relative; display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; font-weight:500; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
.lang-toggle .sep, .lang-toggle .knob{ display:none; }
.lang-toggle button{ background:none; border:1px solid var(--gold-line); border-radius:3px; cursor:pointer;
  padding:6px 11px; min-width:34px; text-align:center;
  color:var(--muted); font-family:inherit; font-size:12px; letter-spacing:.18em; font-weight:600;
  transition:border-color .22s, box-shadow .22s, background .22s; }
.lang-toggle button:hover{ color:var(--light); border-color:var(--gold); }
.lang-toggle button.active, .lang-toggle.de button[data-lang-btn="de"].active, .lang-toggle.en button[data-lang-btn="en"].active{
  color:#d8473a !important; border-color:#b5413a !important;
  background:rgba(190,62,52,.10) !important; box-shadow:0 0 6px rgba(190,62,52,.22) !important; text-shadow:0 0 5px rgba(208,66,55,.32) !important; }
/* selector hub + lever — horizontal HK profile (paddle + eye + nub) */
.fs-hub{ position:relative; width:60px; height:30px; flex:none; }
.fs-hub::before{ content:""; position:absolute; top:50%; left:50%; width:30px; height:30px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #34342d, #121210 82%);
  border:1px solid var(--line-strong);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.5); }
.fs-lever{ position:absolute; top:50%; left:50%; width:76px; height:32px; overflow:visible;
  transform-origin:50% 50%; transform:translate(-50%,-50%) rotate(180deg) !important;
  transition:transform .4s cubic-bezier(.3,1.3,.5,1); z-index:2;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.78)); }
.fs-lever .body *{ fill:#3a3a32; }
.fs-lever .body{ filter:drop-shadow(0 0 .8px rgba(243,243,242,.5)) drop-shadow(0 1.4px 1.5px rgba(0,0,0,.55)); }
.fs-lever .groove{ fill:none; stroke:var(--gold); stroke-width:1.4; opacity:.85; }
.fs-lever .groove-line{ stroke:var(--gold); stroke-width:1.4; opacity:.85; stroke-linecap:round; }
.fs-lever .idx{ fill:#fff; stroke-linejoin:round; stroke:#fff; stroke-width:1.6; }
.fs-hub .fs-pivot{ position:absolute; top:50%; left:50%; width:13px; height:13px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle at 36% 32%, #33332d, #0a0a08);
  box-shadow:inset 0 0 0 1px rgba(144,132,89,.6), inset 0 1px 1px rgba(0,0,0,.8); z-index:3; }
.lang-toggle.en .fs-lever{ transform:translate(-50%,-50%) rotate(360deg) !important; }
.lang-toggle:active .fs-lever{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) brightness(1.1); }
@media (prefers-reduced-motion: reduce){ .fs-lever{ transition:none; } }
/* pivot screw on top */
.fs-hub .fs-pivot{ position:absolute; top:50%; left:50%; width:13px; height:13px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle at 36% 32%, #33332d, #0a0a08);
  box-shadow:inset 0 0 0 1px rgba(144,132,89,.6), inset 0 1px 1px rgba(0,0,0,.8); z-index:3; }
/* (lever rotation states defined above) */

.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--gold);
  padding:9px 16px; border-radius:2px; font-weight:500;
  transition:background .2s;
}
.nav-cta:hover{ background:var(--gold-hi); }

.menu-btn{
  display:none; width:42px; height:42px; flex:none; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--gold-line); border-radius:3px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .2s;
}
.menu-btn:hover{ border-color:var(--gold-line); }
.menu-btn span{ display:block; width:18px; height:1.6px; background:var(--gold); transition:transform .28s ease, opacity .2s ease; }
body.mnav-open .menu-btn span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
body.mnav-open .menu-btn span:nth-child(2){ opacity:0; }
body.mnav-open .menu-btn span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* mobile drawer */
.mnav-scrim{
  position:fixed; inset:0; z-index:70; background:rgba(10,10,11,.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
body.mnav-open .mnav-scrim{ opacity:1; pointer-events:auto; }
.mnav{
  position:fixed; top:0; right:0; z-index:71; height:100%; width:min(82vw,340px);
  background:var(--panel-2); border-left:1px solid var(--line-strong);
  box-shadow:-24px 0 60px rgba(0,0,0,.55);
  transform:translateX(100%); transition:transform .36s cubic-bezier(.4,0,.1,1);
  display:flex; flex-direction:column; padding:22px 22px 30px;
}
body.mnav-open .mnav{ transform:none; }
.mnav-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.mnav-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.mnav-close{ width:34px; height:34px; padding:0; cursor:pointer; background:transparent; border:1px solid var(--line-strong); border-radius:3px; color:var(--muted); font-size:14px; }
.mnav-close:hover{ color:var(--light); border-color:var(--gold-line); }
.mnav-links{ display:flex; flex-direction:column; }
.mnav-links a{
  display:flex; align-items:baseline; gap:14px; padding:17px 4px; border-bottom:1px solid var(--line);
  font-weight:600; font-size:21px; text-transform:uppercase; letter-spacing:.01em; color:var(--light);
  transition:color .18s, padding-left .18s;
}
.mnav-links a:hover{ color:var(--gold); padding-left:10px; }
.mnav-links a .ix{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--faint); font-weight:500; }
.mnav-lang{ margin:4px 0 18px; padding-bottom:18px; border-bottom:1px solid var(--line); font-size:14px; letter-spacing:.16em; }
.mnav-lang button{ padding:6px 4px; }
.mnav-cta{
  margin-top:auto; text-align:center; font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); padding:15px; border-radius:2px; font-weight:500;
}
.mnav-cta:hover{ background:var(--gold-hi); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:84svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:114px var(--gut) clamp(28px,4vh,52px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.img-credit{ position:absolute; z-index:8; font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:rgba(243,243,242,.32); pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.hero .hero-credit{ right:16px; bottom:14px; z-index:8; line-height:1.7; text-align:right; }
.core-media .media-credit{ left:14px; bottom:14px; line-height:1.7; text-align:left; }
.hero-bg img.hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:.5; filter:grayscale(1) contrast(1.24) brightness(.9);
}
.hero-bg image-slot{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:3; pointer-events:none; }
.hero-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,20,21,.86) 0%, rgba(20,20,21,.45) 38%, rgba(20,20,21,.05) 66%, transparent 100%),
    radial-gradient(120% 90% at 70% 0%, rgba(144,132,89,.12), transparent 55%),
    linear-gradient(180deg, rgba(20,20,21,.55) 0%, rgba(20,20,21,.12) 38%, rgba(20,20,21,.88) 100%);
}
.hero-grid-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 60%, var(--ink) 100%);
}
/* topographic contour-line HUD overlay (Höhenlinien) */
.hero-grid-overlay{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0042 0.0052' numOctaves='3' seed='6' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/%3E%3CfeComponentTransfer in='a' result='l'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 1 1 0 0 0 0 1 1 0 0 0 0 1 1 0 0 0 0 1 1 0 0 0 0 1 1 0 0 0 0 1 1 0 0 0 0 1 1 0 0 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%23b6a86e'/%3E%3CfeComposite in2='l' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.021' numOctaves='2' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.1 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 74% 82% at 80% 36%, #000 20%, rgba(0,0,0,.45) 52%, transparent 78%);
  -webkit-mask-size: 560px 560px, cover;
  -webkit-mask-composite: source-in;
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.021' numOctaves='2' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.1 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 74% 82% at 80% 36%, #000 20%, rgba(0,0,0,.45) 52%, transparent 78%);
  mask-size: 560px 560px, cover;
  mask-composite: intersect;
}
/* (plus-tick layer removed in favour of contour lines) */
/* radial pulse — a ring of contour brightness travelling inner → outer from the radar origin */
.hero-grid-pulse{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0042 0.0052' numOctaves='3' seed='6' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/%3E%3CfeComponentTransfer in='a' result='l'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%23cabf88'/%3E%3CfeComposite in2='l' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity:0;
  -webkit-mask-image: radial-gradient(circle at 80% 34%, transparent 0%, #000 3%, #000 6%, transparent 12%);
          mask-image: radial-gradient(circle at 80% 34%, transparent 0%, #000 3%, #000 6%, transparent 12%);
}
@media (prefers-reduced-motion: no-preference){
  .hero-grid-pulse{ animation:gridPulse 5s ease-out infinite; }
}
@keyframes gridPulse{
  0%{
    opacity:0;
    -webkit-mask-image: radial-gradient(circle at 80% 34%, transparent 0%, #000 2%, #000 5%, transparent 10%);
            mask-image: radial-gradient(circle at 80% 34%, transparent 0%, #000 2%, #000 5%, transparent 10%);
  }
  12%{ opacity:.9; }
  80%{ opacity:.35; }
  100%{
    opacity:0;
    -webkit-mask-image: radial-gradient(circle at 80% 34%, transparent 40%, #000 58%, #000 68%, transparent 86%);
            mask-image: radial-gradient(circle at 80% 34%, transparent 40%, #000 58%, #000 68%, transparent 86%);
  }
}

.hero-inner{ position:relative; z-index:5; max-width:var(--maxw); margin:0 auto; width:100%; padding-top:clamp(28px,5vh,64px); }
.hero-top{
  position:relative; z-index:5;
  width:100%; max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; gap:20px;
}
.hero-coord{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); line-height:2;
}
.hero-coord b{ color:var(--muted); font-weight:500; }

.hero-headline{ position:relative; padding-left:28px; margin-bottom:44px; }
.hero-headline::before{ content:""; position:absolute; left:0; top:8px; bottom:10px; width:3px;
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold) 42%, transparent 100%); }
.hero-eyebrow{ display:flex; align-items:center; gap:13px; font-family:var(--mono);
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.hero-eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); }
.hero-tagline{
  font-size:clamp(26px,5vw,74px);
  line-height:1.0;
  font-weight:700;
  letter-spacing:-.018em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
.hero-tagline .b{ display:block; color:var(--light); margin-bottom:9px; }
.hero-tagline .b:last-child{ margin-bottom:0; }
.hero-tagline .b.gold{ color:var(--gold); text-shadow:0 0 34px rgba(144,132,89,.45); }
.hero-sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px;
  border-top:1px solid var(--line); padding-top:24px;
  max-width:760px;
}
.hero-sub p{
  margin:0; color:var(--muted); font-size:15px; max-width:42ch; line-height:1.6;
}
.hero-scroll{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--light); border:1px solid var(--gold-line); border-radius:2px;
  padding:11px 18px; transition:background .22s, color .22s;
}
.hero-scroll:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.hero-scroll .arr{ animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(3px);} }

/* live status chip top-right of hero */
.hero-live{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--light);
}
.hero-live .pulse{ width:7px; height:7px; border-radius:50%; background:var(--gold); position:relative; }
.hero-live .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--gold); opacity:.5; animation:ping 2.2s ease-out infinite; }
@keyframes ping{ 0%{ transform:scale(.6); opacity:.7;} 100%{ transform:scale(1.9); opacity:0;} }

/* ============================================================
   CORE PRODUCT — NEXUM HK
   ============================================================ */
.core{ background:var(--panel-2); border-bottom:1px solid var(--line); }
.core-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--panel);
}
.core-media{
  position:relative; background:
    radial-gradient(55% 55% at 50% 44%, rgba(243,243,242,.07), transparent 72%),
    radial-gradient(80% 80% at 50% 40%, rgba(144,132,89,.14), transparent 70%),
    var(--panel-3);
  min-height:520px; display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--line);
}
.core-media image-slot{ width:100%; height:100%; }
.core-media .nexum-img{
  position:relative; z-index:2; width:82%; max-width:600px; height:auto; object-fit:contain;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.55));
  transition:opacity .28s ease, transform .28s ease;
}
.core-media .nexum-soon{
  position:absolute; z-index:2; inset:0; display:none; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.core-media.is-soon .nexum-img{ opacity:0; }
.core-media.is-soon .nexum-soon{ display:flex; }
.sw-wrap{ position:absolute; z-index:6; left:20px; top:20px; display:flex; flex-direction:column; gap:9px; }
.sw-label{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.swatches{ display:flex; gap:9px; }
.swatch{
  width:24px; height:24px; border-radius:50%; cursor:pointer; padding:0;
  background:var(--sw); border:1px solid rgba(243,243,242,.22);
  position:relative; transition:transform .15s, border-color .15s, box-shadow .15s;
}
.swatch:hover{ transform:scale(1.12); border-color:var(--gold-line); }
.swatch.active{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(144,132,89,.35); }
.swatch.soon::after{
  content:""; position:absolute; right:-2px; top:-2px; width:7px; height:7px; border-radius:50%;
  background:var(--ink); border:1px solid var(--gold); 
}
/* catalogue card finish swatches */
.card .thumb .card-img{ position:relative; z-index:2; width:100%; height:100%; object-fit:contain; padding:14px; transition:opacity .25s ease; }
.card .thumb .card-blueprint{ object-fit:cover; object-position:center; padding:0; opacity:.9; transform:none; }
.card .thumb:has(.card-blueprint)::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 60px 18px rgba(20,20,21,.72);
}
.card .thumb .card-soon{ position:absolute; z-index:3; inset:0; display:none; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.card .thumb.is-soon .card-img{ opacity:0; }
.card .thumb.is-soon .card-soon{ display:flex; }
.card-swatches{ position:absolute; z-index:6; left:12px; bottom:12px; display:flex; gap:7px; }
.card-swatches .swatch{ width:18px; height:18px; }
.core-media .mediatag{
  position:absolute; left:20px; bottom:18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.core-media .reticle{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.core-info{ padding:clamp(32px,4vw,56px); display:flex; flex-direction:column; }
.core-info .kw{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:12px;
}
.core-info .kw::before{ content:""; width:26px; height:1px; background:var(--gold); }
.core-info h3{
  font-size:clamp(40px,5.4vw,68px); font-weight:700; letter-spacing:-.01em; text-transform:uppercase;
  margin:20px 0 6px; line-height:.92;
}
.core-info .codetype{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--muted); margin-bottom:26px; }
.core-info .desc{ color:var(--muted); font-size:16px; max-width:46ch; margin:0 0 30px; }
.spec-line{
  display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); margin-top:auto;
}
.spec-line .cell{ padding:18px 22px 18px 0; border-right:1px solid var(--line); margin-right:22px; }
.spec-line .cell:last-child{ border-right:0; margin-right:0; }
.spec-line .k{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:7px; }
.spec-line .v{ font-family:var(--mono); font-size:14px; letter-spacing:.04em; color:var(--light); }
.core-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:13px 22px; border-radius:2px; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--gold); background:var(--gold); color:var(--ink);
  transition:background .2s, color .2s, border-color .2s;
}
.btn:hover{ background:var(--gold-hi); border-color:var(--gold-hi); }
.btn.ghost{ background:transparent; color:var(--light); border-color:var(--line-strong); }
.btn.ghost:hover{ border-color:var(--gold); color:var(--gold); background:transparent; }

/* ============================================================
   PRODUCTS
   ============================================================ */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); background:transparent; border:1px solid var(--line-strong);
  padding:9px 16px; border-radius:2px; cursor:pointer; transition:all .18s;
}
.filter:hover{ color:var(--light); border-color:var(--gold-line); }
.filter.active{ color:var(--ink); background:var(--gold); border-color:var(--gold); }

.swipe-ind{ display:none; }
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
/* products carousel — active wherever the mobile hub/burger is (≤760px) */
@media (max-width:760px){
  .prod-grid{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; touch-action:pan-x pan-y;
    margin:0 calc(var(--gut) * -1); padding:4px 8% 14px; scroll-padding:0 8%;
  }
  .prod-grid::-webkit-scrollbar{ display:none; }
  .prod-grid .card{ flex:0 0 84%; scroll-snap-align:center; }
  .prod-grid .card img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }
  .swipe-ind{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:20px var(--gut) 0; }
  .swipe-dots{ display:inline-flex; gap:10px; align-items:center; }
  .swipe-dots i{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); transition:background .22s, transform .22s, width .22s, border-radius .22s; }
  .swipe-dots i.on{ background:var(--gold); transform:scale(1.15); width:22px; border-radius:5px; box-shadow:0 0 8px rgba(144,132,89,.55); }
}
.card{
  border:1px solid var(--line); background:var(--panel); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .25s, transform .25s;
  position:relative;
}
.card:hover{ border-color:var(--gold-line); transform:translateY(-3px); }
.card .thumb{
  position:relative; aspect-ratio:4/3; background:
    radial-gradient(70% 70% at 50% 45%, rgba(144,132,89,.10), transparent 70%), var(--panel-3);
  border-bottom:1px solid var(--line); overflow:hidden;
}
.card .thumb image-slot{ width:100%; height:100%; }
.card .thumb .ret{ position:absolute; inset:0; opacity:.4; pointer-events:none; }
.card .status{
  position:absolute; top:12px; left:12px; z-index:4;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 9px; border-radius:2px; background:rgba(20,20,21,.7); backdrop-filter:blur(4px);
  border:1px solid var(--line-strong);
}
.card .status.avail{ color:var(--gold); border-color:var(--gold-line); }
.card .thumb .plat-ribbon{
  position:absolute; top:0; right:0; z-index:3; pointer-events:none;
  width:104px; height:104px; overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% 100%);
  background:linear-gradient(225deg, rgba(144,132,89,.42) 0%, rgba(144,132,89,.20) 38%, rgba(144,132,89,.04) 70%, transparent 100%);
}
.card .thumb .plat-ribbon::before{ content:none; }
.card .thumb .plat-ribbon{
  font-family:var(--mono); font-size:13.5px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.72);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.card .thumb .plat-ribbon::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform:translate(-60%,-60%); opacity:0;
}
.card:hover .thumb .plat-ribbon::after{ animation:ribbonSheen .9s ease forwards; }
@keyframes ribbonSheen{ 0%{ transform:translate(-60%,-60%); opacity:0; } 30%{ opacity:1; } 100%{ transform:translate(60%,60%); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .card:hover .thumb .plat-ribbon::after{ animation:none; } }
.card .thumb .plat-ribbon span .rb-for{ display:block; font-size:8px; font-weight:700; letter-spacing:.12em; opacity:.9; text-transform:lowercase; line-height:1; margin-bottom:1px; }
.card .thumb .plat-ribbon span{
  position:absolute; top:14px; right:-6px; transform:rotate(45deg); transform-origin:center;
  display:block; width:84px; text-align:center;
}
.card .status.dev{ color:var(--muted); }
.card .status.proto, .card .status.field{ color:var(--light); border-color:var(--line-strong); }
.card .status.eval{ color:var(--muted); }
.card .body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card .code{ font-size:25px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1; }
.card .plat{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--gold); margin:12px 0 14px; }
.card .one{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0; }
.card .meta{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.card .meta:has(.sys-btn){ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; }
.card .meta:has(.sys-btn) .go{ text-align:right; }
.card .meta .sys-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--gold);
  border:1px solid var(--gold-line); border-radius:2px; padding:4px 10px; cursor:pointer;
  transition:background .18s, color .18s; justify-self:center; white-space:nowrap;
}
.card .meta .sys-btn:hover{ background:var(--gold); color:var(--ink); }
.card .meta .go{ color:var(--muted); transition:color .2s, transform .2s; }
.card:hover .meta .go{ color:var(--gold); }

/* ============================================================
   DEVELOPMENT — pipeline
   ============================================================ */
.dev{ background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dev-banner{ position:relative; border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-bottom:48px; background:#15161a; }
.dev-banner img{ display:block; width:100%; height:clamp(300px,42vh,480px); object-fit:cover; object-position:center 14%; }
.dev-banner canvas.dev-bp{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:1;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 26%, transparent 47%, transparent 53%, #000 74%, #000 100%);
  mask-image:linear-gradient(90deg, #000 0%, #000 26%, transparent 47%, transparent 53%, #000 74%, #000 100%); }
.dev-banner-veil{ position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(20,21,25,.78) 0%, rgba(20,21,25,.6) 45%, rgba(18,19,23,.95) 100%); }
.dev-banner .dev-head{ position:absolute; left:clamp(20px,4vw,48px); right:clamp(20px,4vw,48px); bottom:0; margin:0; border-bottom:0; padding-bottom:26px; z-index:3; }
.dev-pre{ display:block; font-size:.82em; letter-spacing:.03em; color:var(--gold); line-height:1; margin-bottom:8px; }
/* ============ MOBILE HUB (app-style tiles) ============ */
.mobile-hub{ display:none; }
.hub-bar{ display:none; }

@media (max-width:760px){
  /* the hub itself */
  .mobile-hub{ display:block; padding:18px var(--gut) 30px; }
  .hub-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
  .hub-tile{
    position:relative; aspect-ratio:16/7; border:1px solid var(--line); border-radius:4px;
    overflow:hidden; cursor:pointer; padding:14px; display:flex; flex-direction:column;
    justify-content:center; align-items:center; text-align:center;
    background:linear-gradient(150deg, var(--panel-3), var(--panel-2));
  }
  .hub-tile::before{
    content:""; position:absolute; inset:0; z-index:0;
    background-image:var(--himg); background-size:cover; background-position:center;
    opacity:.82; filter:grayscale(.3) saturate(.9) contrast(1.05);
  }
  .hub-tile::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:radial-gradient(120% 120% at 50% 50%, transparent 30%, rgba(20,21,25,.62) 72%, rgba(20,21,25,.95) 100%);
    box-shadow:inset 0 0 34px 10px rgba(10,11,13,.82);
  }
  .hub-tile > *{ position:relative; z-index:2; }
  .hub-tile .hub-k{ display:none; }
  .hub-tile .hub-t{
    position:relative;
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; line-height:1; color:rgba(255,255,255,.78);
    border:2.5px solid rgba(255,255,255,.6); border-radius:2px; padding:9px 15px;
    background:rgba(16,17,20,.5); backdrop-filter:blur(3px);
    text-shadow:0 1px 4px rgba(0,0,0,.85);
    transition:box-shadow .3s ease, border-color .3s ease, color .3s ease;
  }
  .hub-tile .hub-t::before, .hub-tile .hub-t::after{
    content:""; position:absolute; top:50%; width:0; height:5px; background:rgba(255,255,255,.7);
    box-shadow:0 0 6px rgba(255,255,255,.6); transition:width .35s ease, opacity .35s ease; opacity:0;
  }
  .hub-tile .hub-t::before{ right:100%; margin-right:8px; transform:translateY(-50%); clip-path:polygon(4px 0, 100% 0, 100% 100%, 4px 100%, 0 50%); }
  .hub-tile .hub-t::after{ left:100%; margin-left:8px; transform:translateY(-50%); clip-path:polygon(0 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 0 100%); }
  .hub-tile:hover::before, .hub-tile.hub-flash::before{ opacity:1; filter:grayscale(.3) saturate(.9) contrast(1.05) blur(2px); }
  .hub-tile:hover .hub-t, .hub-tile.hub-flash .hub-t{ box-shadow:0 0 18px rgba(255,255,255,.3), inset 0 0 10px rgba(255,255,255,.12); border-color:rgba(255,255,255,.9); color:#fff; }
  .hub-tile:hover .hub-t::before, .hub-tile:hover .hub-t::after, .hub-tile.hub-flash .hub-t::before, .hub-tile.hub-flash .hub-t::after{ width:34px; opacity:.85; }
  .hub-tile:active .hub-t{ border-color:var(--gold-hi); color:var(--gold-hi); }

  /* landing view: show hero + hub, hide all content sections + teaser */
  .hub-sec, #teaser{ display:none; }

  /* opened view: hide hero + hub, show only the active section(s) */
  body.hub-open .hero{ position:fixed; left:0; top:0; width:100%; height:100dvh; opacity:0; pointer-events:none; z-index:-1; }
  body.hub-open .mobile-hub{ display:none; }
  body.hub-open .hub-sec.hub-active{ display:block; }
  body.hub-open footer{ display:flex; }

  /* back bar */
  body.hub-open .hub-bar{
    display:flex; align-items:center; gap:14px;
    position:sticky; top:54px; z-index:40;
    padding:20px var(--gut) 11px; background:rgba(16,17,20,.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .hub-back{
    display:inline-flex; align-items:center; gap:7px; background:none; border:1px solid var(--gold-line);
    border-radius:3px; padding:7px 13px; cursor:pointer;
    font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  }
  .hub-bar-title{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
}

/* standalone "back to menu" bar for legal sub-pages (mobile only) */
.page-backbar{ display:none; }
@media (max-width:760px){
  .page-backbar{
    display:inline-flex; align-items:center; gap:7px;
    position:sticky; top:54px; z-index:40; margin:0;
    padding:14px var(--gut);
    font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
    background:rgba(16,17,20,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); width:100%;
  }
}

@media (max-width:760px){
  .hero-tagline .b{ font-size:clamp(21px,6vw,40px) !important; }
  .hero-scroll{ display:none; }
  .dev-banner img{ height:230px; object-position:center 18%; }
  .dev-banner canvas.dev-bp{ top:0; bottom:auto; height:230px; }
  .dev-banner-veil{ top:0; bottom:auto; height:230px; background:linear-gradient(180deg, rgba(20,21,25,.45), rgba(20,21,25,.82)); }
  .dev-banner .dev-head{ position:static; padding:20px 20px 20px 4px; background:var(--panel-2); text-align:left; align-items:flex-start; }
  .dev-banner .dev-head > div{ text-align:left; }
  .dev-banner .dev-head h2{ font-size:clamp(26px,8vw,38px); }
}
.dev-intro{ max-width:none; margin:0 0 44px; }
.dev-intro p{ position:relative; color:var(--muted); font-size:17.5px; line-height:1.72; margin:0 0 30px; padding-bottom:0; }
.dev-intro p:not(:last-child)::after{ content:""; position:absolute; left:0; bottom:-22px; width:3px; height:16px; background:linear-gradient(180deg, var(--gold), transparent); }
.dev-intro p:last-child{ margin-bottom:0; }

/* ---- R&D animated process flow ---- */
.rd-blocktitle{ font-family:var(--mono); font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; font-weight:600; }
#rdLog{ scroll-margin-top:150px; }
.rd-blocktitle .rb-g{ display:block; color:var(--gold); }
.rd-blocktitle .rb-w{ display:block; color:var(--light); }
.rd-log-btn{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  margin-top:16px; padding:14px 20px; cursor:pointer;
  background:rgba(144,132,89,.10); border:1px solid var(--gold-line); border-radius:3px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--light); font-weight:700; }
.rd-log-btn .rd-log-btn-t{ flex:1; text-align:center; }
.rd-log-btn .rd-log-caret{ width:13px; height:13px; flex:none; border-right:3px solid var(--gold); border-bottom:3px solid var(--gold); transform:rotate(45deg); transition:transform .3s ease; filter:drop-shadow(0 0 4px rgba(144,132,89,.55)); }
.rd-log-btn.open .rd-log-caret{ transform:rotate(-135deg); }
.pipeline.collapsed{ max-height:396px; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(180deg,#000 80%, transparent 100%);
  mask-image:linear-gradient(180deg,#000 80%, transparent 100%); }
.rd-flow{ margin:0 0 54px; padding:30px clamp(16px,3vw,34px) 26px; border:1px solid var(--line); border-radius:3px; background:var(--panel-2); overflow:visible; }
.rd-track{ display:flex; align-items:stretch; gap:0; }
.rd-step{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; opacity:1; transition:none; positiontion:relative; }
.rd-flow.run .rd-step{ opacity:1; transform:none; }
.rd-flow.run .rd-step[data-step="1"]{ transition-delay:.05s; }
.rd-flow.run .rd-step[data-step="2"]{ transition-delay:.45s; }
.rd-flow.run .rd-step[data-step="3"]{ transition-delay:.85s; }
.rd-flow.run .rd-step[data-step="4"]{ transition-delay:1.25s; }
.rd-flow.run .rd-step[data-step="5"]{ transition-delay:1.7s; }
.rd-flow.run .rd-step[data-step="6"]{ transition-delay:2.15s; }
.rd-node{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
.rd-dot{ position:absolute; left:50%; top:50%; width:17px; height:17px; transform:translate(-50%,-50%); border-radius:50%; background:var(--gold); box-shadow:0 0 9px rgba(144,132,89,.8); z-index:2; }
.rd-tri{ position:absolute; left:50%; top:50%; width:0; height:0; z-index:1; pointer-events:none; }
.rd-tri i{ position:absolute; left:0; top:0; transform-origin:0 0; }
.rd-tri i:nth-child(1){ transform:rotate(0deg); }
.rd-tri i:nth-child(2){ transform:rotate(120deg); }
.rd-tri i:nth-child(3){ transform:rotate(240deg); }
.rd-tri i b{ position:absolute; left:-13px; top:-1px; width:26px; height:2px; background:var(--gold); opacity:0; }
.rd-tri.t0 i b{ left:-13px; top:-1px; width:26px; height:2px; transform:translateY(15px); opacity:.95; animation:none; }
.rd-flow.run .rd-step .rd-tri.t0 i b{ animation:none; opacity:.95; }
.rd-flow.run .rd-step .rd-tri i b{ animation:rdTriDissolve 3s ease-out infinite; }
.rd-flow.run .rd-step .rd-tri.t2 i b{ animation-delay:1.5s; }
@keyframes rdTriDissolve{ 0%{ transform:translateY(15px); opacity:0; } 16%{ opacity:.85; } 55%{ opacity:.3; } 100%{ transform:translateY(40px); opacity:0; } }
.rd-flow.run .rd-step[data-step="2"] .rd-tri i b{ animation-delay:.3s; }
.rd-flow.run .rd-step[data-step="2"] .rd-tri.t2 i b{ animation-delay:1.8s; }
.rd-flow.run .rd-step[data-step="3"] .rd-tri i b{ animation-delay:.6s; }
.rd-flow.run .rd-step[data-step="3"] .rd-tri.t2 i b{ animation-delay:2.1s; }
.rd-flow.run .rd-step[data-step="4"] .rd-tri i b{ animation-delay:.9s; }
.rd-flow.run .rd-step[data-step="4"] .rd-tri.t2 i b{ animation-delay:2.4s; }
.rd-flow.run .rd-step[data-step="5"] .rd-tri i b{ animation-delay:1.2s; }
.rd-flow.run .rd-step[data-step="5"] .rd-tri.t2 i b{ animation-delay:2.7s; }
.rd-flow.run .rd-step[data-step="6"] .rd-tri i b{ animation-delay:1.5s; }
.rd-flow.run .rd-step[data-step="6"] .rd-tri.t2 i b{ animation-delay:3s; }
@media (prefers-reduced-motion: reduce){ .rd-flow.run .rd-step .rd-tri i b{ animation:none; opacity:.3; } }
.rd-node .rd-ico{ display:none; }
.rd-node .rd-k{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.06em; color:var(--ink); }
.rd-spin{ display:inline-block; }
.rd-flow.run .rd-step-loop .rd-spin{ animation:rdSpin 3.2s linear infinite; }
@keyframes rdSpin{ to{ transform:rotate(360deg);} }
.rd-lbl{ display:flex; flex-direction:column; gap:5px; max-width:20ch; }
.rd-t{ font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; line-height:1.1; }
.rd-d{ font-family:var(--mono); font-size:11px; line-height:1.45; color:var(--muted); }
.rd-link{ flex:0 0 auto; align-self:flex-start; width:clamp(46px,7vw,104px); height:18px; margin-top:22px; position:relative; display:flex; align-items:center; justify-content:center; gap:1px; }
.rd-chev{ width:5px; height:9px; flex:none; clip-path:polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%); background:var(--line-strong); }
.rd-flow.run .rd-link .rd-chev{ animation:rdChev 2.6s linear infinite; }
@keyframes rdChev{ 0%{ background:var(--line-strong); } 12%{ background:var(--gold-hi); } 28%{ background:var(--gold); } 50%{ background:var(--line-strong); } 100%{ background:var(--line-strong); } }
.rd-loop-tracks{ display:flex; gap:4px; margin-top:-4px; }
.rd-loop-tracks i{ width:18px; height:3px; border-radius:2px; background:var(--ghost); overflow:hidden; position:relative; }
.rd-loop-tracks i::after{ content:""; position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:var(--gold); }
.rd-flow.run .rd-loop-tracks i:nth-child(1)::after{ animation:rdFill 1.1s ease 1.3s forwards; }
.rd-flow.run .rd-loop-tracks i:nth-child(2)::after{ animation:rdFill 1.1s ease 1.55s forwards; }
.rd-flow.run .rd-loop-tracks i:nth-child(3)::after{ animation:rdFill 1.1s ease 1.8s forwards; }
@keyframes rdFill{ to{ transform:scaleX(1);} }
.rd-split{ display:flex; flex-direction:column; align-items:center; gap:0; margin-top:2px; }
.rd-branch-link{ width:1px; height:10px; background:var(--gold); margin:3px 0; }
.rd-branch{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; padding:3px 8px; border-radius:2px; border:1px solid var(--line-strong); color:var(--muted); }
.rd-flow.run .rd-branch-1{ animation:rdBranchCy 4s ease-in-out 1.95s infinite; }
.rd-flow.run .rd-branch-link{ transform:scaleY(0); transform-origin:top; animation:rdLinkCy 4s ease-in-out 1.95s infinite; }
.rd-flow.run .rd-branch-2{ animation:rdBranch2Cy 4s ease-in-out 1.95s infinite; }
@keyframes rdBranchCy{ 0%,12%{ color:var(--muted); border-color:var(--line-strong);} 22%,100%{ color:var(--gold); border-color:var(--gold-line);} }
@keyframes rdLinkCy{ 0%,24%{ transform:scaleY(0);} 40%,100%{ transform:scaleY(1);} }
@keyframes rdBranch2Cy{ 0%,42%{ color:var(--muted); border-color:var(--line-strong);} 55%,100%{ color:var(--gold); border-color:var(--gold-line);} }
@keyframes rdReveal{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }
.rd-foot{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); opacity:0; }
.rd-foot .rd-lock{ color:var(--gold); }
.rd-flow.run .rd-foot{ animation:rdReveal .6s ease 2.6s forwards; }
@media (prefers-reduced-motion: reduce){
  .rd-step, .rd-branch, .rd-foot{ opacity:1 !important; transform:none !important; }
  .rd-loop-tracks i::after{ transform:scaleX(1); }
  .rd-link::after{ display:none; }
}
@media (max-width:860px){
  .rd-flow{ overflow:hidden; padding-left:clamp(22px,6vw,40px); }
  .rd-track{ flex-direction:column; align-items:stretch; gap:0; }
  .rd-step{ flex-direction:row; align-items:center; text-align:left; gap:18px; padding:11px 0; min-height:54px; }
  .rd-step .rd-loop-tracks, .rd-step .rd-split{ display:none; }
  .rd-node{ width:30px; height:30px; flex:none; margin-left:4px; }
  .rd-lbl{ max-width:none; gap:2px; }
  .rd-t{ font-size:12px; }
  .rd-d{ font-size:9.5px; line-height:1.35; }
  .rd-flow.run .rd-step .rd-tri i b{ animation-duration:2.4s; }
  .rd-tri i b{ width:22px; left:-11px; }
  .rd-tri.t0 i b{ width:22px; left:-11px; }
  /* short vertical connector under the node column */
  .rd-link{ width:30px; height:28px; margin:0 0 0 4px; align-self:flex-start; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
  .rd-chev{ width:9px; height:5px; clip-path:polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%); }
  .rd-link .rd-chev:nth-child(n+4){ display:none; }   /* fewer elements */
  .rd-loop-tracks{ margin-top:6px; }
  /* collapsible log handled globally below */
}

.pipeline{ display:flex; flex-direction:column; }
.pl-row{
  display:grid; grid-template-columns:140px 1fr 220px; gap:32px; align-items:start;
  padding:30px 0; border-top:1px solid var(--line);
}
.pl-row:last-child{ border-bottom:1px solid var(--line); }
.pl-row .date{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--faint); padding-top:3px; }
.pl-row .main h4{ font-size:21px; font-weight:600; text-transform:uppercase; letter-spacing:.01em; margin:0 0 8px; }
.pl-row .main p{ margin:0; color:var(--muted); font-size:15px; max-width:62ch; line-height:1.6; }
.pl-stage{ display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.stage-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; border-radius:2px; border:1px solid var(--line-strong); color:var(--muted);
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
}
.stage-tag .sd{ width:7px; height:7px; border-radius:50%; background:var(--faint); }
.stage-tag.s-released{ color:var(--gold); border-color:var(--gold-line); }
.stage-tag.s-released .sd{ background:var(--gold); }
.stage-tag.s-field{ color:var(--light); }
.stage-tag.s-field .sd{ background:var(--light); }
.stage-tag.s-proto{ color:var(--light); }
.stage-tag.s-proto .sd{ background:var(--light); }
.stage-tag.s-eval{ color:var(--muted); }
.stage-tag.s-eval .sd{ background:var(--faint); }
.progress{ width:200px; height:3px; background:var(--ghost); border-radius:2px; overflow:hidden; }
.progress i{ display:block; height:100%; background:var(--gold); }

/* ============================================================
   TEASER — full-bleed video band
   ============================================================ */
.teaser{ position:relative; width:100%; height:clamp(380px,76vh,820px); overflow:hidden;
  background:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.teaser-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.teaser-veil{ position:absolute; inset:0; pointer-events:none; z-index:1; background:
  radial-gradient(125% 125% at 50% 45%, transparent 58%, rgba(20,20,21,.62) 100%),
  linear-gradient(180deg, rgba(20,20,21,.55) 0%, transparent 20%, transparent 74%, rgba(20,20,21,.9) 100%); }
.teaser-cap{ position:absolute; left:var(--gut); bottom:26px; z-index:2;
  display:flex; align-items:center; gap:12px; }
.teaser-cap .eyebrow::before{ content:""; }
.teaser-sound{ position:absolute; right:var(--gut); bottom:26px; z-index:2;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  background:rgba(16,16,17,.55); border:1px solid var(--line-strong); border-radius:2px; padding:9px 14px;
  backdrop-filter:blur(6px); transition:color .2s, border-color .2s; }
.teaser-sound:hover{ color:var(--light); border-color:var(--gold-line); }
.teaser-sound .sdot{ width:7px; height:7px; border-radius:50%; background:var(--faint); transition:background .2s; }
.teaser-sound.on{ color:var(--gold); border-color:var(--gold-line); }
.teaser-sound.on .sdot{ background:var(--gold); box-shadow:0 0 8px var(--gold); }

/* ============================================================
   DOCTRINE — youtube
   ============================================================ */
.doctrine .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:stretch; }
.doctrine .copy{ display:flex; flex-direction:column; }
.doctrine .video-frame{ align-self:stretch; }
.doctrine .copy h2{ font-size:clamp(30px,4.4vw,52px); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:1; margin:18px 0 22px; }
.doctrine .copy p{ color:var(--muted); font-size:16px; max-width:44ch; margin:0 0 32px; }
.doctrine .doc-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.doctrine .doc-note{ font-size:13px; line-height:1.55; color:var(--faint); max-width:44ch; margin:16px 0 0; font-style:italic; }
.doctrine .chan{
  display:inline-flex; align-items:center; gap:11px; font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.video-frame{
  position:relative; aspect-ratio:16/9; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--panel-3);
}
@media (min-width:1081px){ .doctrine .video-frame{ aspect-ratio:auto; height:100%; } }
.video-load{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--ink);
  color:var(--light); padding:24px; text-align:center; }
.video-load .vl-logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:82%; max-width:none; height:auto; opacity:.92; pointer-events:none; z-index:1; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.video-load .vl-play{ width:74px; height:74px; border-radius:50%; border:1px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  background:rgba(20,20,21,.5); transition:background .2s, transform .2s; position:relative; z-index:2; }
.video-load:hover .vl-play{ background:var(--gold); color:var(--ink); transform:scale(1.06); }
.video-poster{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:radial-gradient(60% 60% at 50% 45%, rgba(144,132,89,.12), transparent 70%), var(--panel-3);
}
.video-poster .play{
  width:74px; height:74px; border-radius:50%; border:1px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  background:rgba(20,20,21,.5); transition:background .2s, transform .2s;
}
.video-poster:hover .play{ background:var(--gold); color:var(--ink); transform:scale(1.05); }
.video-poster .vt{ position:absolute; left:20px; bottom:18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   MISSION
   ============================================================ */
.mission{ position:relative; }
.mission .wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,90px); }
.mission .lead{ position:relative; }
.mission .lead{ position:relative; display:flex; flex-direction:column; }
.mission .lead .big{
  font-size:clamp(28px,3.6vw,44px); font-weight:700; text-transform:uppercase; line-height:1.02; letter-spacing:-.01em; margin:18px 0 0;
}
.mission-photo{
  margin:34px 0 0; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--panel-3); position:relative; flex:none; aspect-ratio:4/5;
}
.mission-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 62%, rgba(20,20,21,.30) 100%);
}
.mission-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.mission .body{ display:flex; flex-direction:column; }
.mission .body p{ color:var(--muted); font-size:16.5px; line-height:1.72; margin:0 0 22px; max-width:60ch; }
.mission .body p.lede{ color:var(--light); font-size:19px; }
.mission .body p .semper{ color:var(--gold); font-weight:600; letter-spacing:.06em; white-space:nowrap; }
.mission .sign{ display:flex; align-items:stretch; gap:0; margin-top:0; padding-top:0; border-top:1px solid var(--line); }
.mission .sign .sign-id{ display:flex; align-items:flex-start; justify-content:flex-start; gap:14px; flex:1; padding:22px 0 22px 34px; text-align:left; }
.mission .sign .sign-id > div{ order:-1; }
.mission .sign .hessen{ display:flex; align-items:center; gap:11px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.mission .sign .hessen img{ height:42px; width:auto; display:block; }
.mission .sign .hessen-t{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.mission .sign .rd-mark{ height:41px; width:auto; color:var(--gold); display:block; flex:none; margin-top:3px; }
.mission .sign svg path, .mission .sign svg polygon{ fill:currentColor; }
.mission .sign .sign-id > div{ text-align:left; }
.mission .sign .nm{ font-weight:600; letter-spacing:.02em; margin-bottom:8px; font-size:20px; }
.mission .sign .rl{ font-family:var(--mono); font-size:14px; color:var(--muted); letter-spacing:.06em; }
.mission .sign .cage{ display:flex; align-items:center; gap:20px; padding:22px 34px 22px 0; border-right:1px solid var(--line); flex:1; }
.mission .sign .cage img{ height:104px; width:auto; display:block; opacity:.92; }
.mission .sign .cage-meta{ display:flex; flex-direction:column; gap:5px; }
.mission .sign .cage-k{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.mission .sign .cage-v{ font-family:var(--mono); font-size:17px; letter-spacing:.1em; color:var(--light); }
@media (max-width:620px){
  .mission .sign{ flex-direction:column; align-items:stretch; }
  .mission .sign .cage img{ height:64px; }
  .mission .sign .cage-k{ font-size:9px; letter-spacing:.16em; }
  .mission .sign .cage-v{ font-size:12px; }
  .mission .sign .rd-mark{ height:30px; }
  .mission .sign .nm{ font-size:14px; margin-bottom:5px; }
  .mission .sign .rl{ font-size:10px; }
  .mission .sign .hessen img{ height:30px; }
  .mission .sign .hessen-t{ font-size:9px; }
  .mission .sign .cage{ margin-left:0; padding:0 0 18px; border-right:0; border-bottom:1px solid var(--line); width:100%; flex-direction:column; align-items:center; text-align:center; gap:12px; }
  .mission .sign .cage-meta{ align-items:center; }
  .mission .sign .sign-id{ padding:18px 0 0; flex-direction:column; align-items:center; text-align:center; gap:12px; }
  .mission .sign .sign-id > div{ order:0; text-align:center; }
  .mission .sign .sign-id > div{ text-align:center; }
}
@media (max-width:540px){
  .mission .sign{ flex-wrap:wrap; }
  .mission .sign .cage{ margin-left:0; padding-right:0; border-right:0; width:100%; padding-top:16px; border-top:1px solid var(--line); }
}
.who{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:3px; margin-top:54px; margin-bottom:30px; overflow:hidden; position:relative; }
.who > div{ padding:30px 24px 28px; border-right:1px solid var(--line); position:relative; overflow:hidden; transition:background .3s ease, box-shadow .3s ease; text-align:center; }
.who > div:last-child{ border-right:0; }
.who > div:hover{ background:linear-gradient(135deg, rgba(144,132,89,.12) 0%, rgba(144,132,89,.04) 42%, transparent 76%); box-shadow:inset 0 0 0 1px rgba(144,132,89,.16); }
.who-ico, .who .k, .who .v{ position:relative; z-index:1; }
.who > div::before{ content:""; position:absolute; top:0; bottom:0; left:-65%; width:55%; z-index:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent, rgba(144,132,89,.08), transparent); transform:skewX(-12deg); }
.who > div:hover::before{ opacity:1; animation:whoSheen 1.5s ease forwards; }
@keyframes whoSheen{ from{ left:-65%; } to{ left:125%; } }
.who-ico{ height:60px; margin-bottom:20px; color:var(--gold); display:flex; align-items:flex-end; justify-content:center; transition:filter .3s ease; }
.who-ico svg{ height:58px; width:auto; display:block; }
.who-ico img{ height:60px; width:auto; display:block; object-fit:contain; }
.who-ico svg [data-thin]{ stroke-width:1.7; }
.who > div:hover .who-ico{ filter:brightness(1.18) drop-shadow(0 0 9px rgba(144,132,89,.45)); }
.who-trace{ display:none; }
.cell-trace{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.cell-trace i{ position:absolute; background:#a89a6c; border-radius:2px; box-shadow:0 0 5px 0 rgba(168,154,108,.5); }
.cell-trace .t-down{ left:0; top:0; width:2px; height:100%; transform:scaleY(0); transform-origin:top center; }
.cell-trace .t-right{ left:0; bottom:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left center; }
.who > div:hover .cell-trace .t-down{ animation:traceDown .5s ease forwards; }
.who > div:hover .cell-trace .t-right{ animation:traceRight .6s ease .45s forwards; }
@keyframes traceDown{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes traceRight{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .who > div:hover .cell-trace .t-down{ animation:none; transform:scaleY(1); }
  .who > div:hover .cell-trace .t-right{ animation:none; transform:scaleX(1); }
  .who > div:hover::before{ animation:none; }
}
.who .k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; transition:color .3s ease; }
.who > div:hover .k{ color:var(--gold-hi); }
.who .v{ text-align:center; }
.who .v{ color:var(--muted); font-size:14px; line-height:1.55; }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{ background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.partners .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.partners .pcopy .lead{ color:var(--muted); font-size:16px; max-width:42ch; margin:18px 0 26px; line-height:1.6; }
.partners .legend{ display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--line); padding-top:22px; margin-top:6px; }
.partners .legend .lg{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted); }
.partners .legend .lg .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); flex:none; }
.partners .legend .lg .dot.ring{ background:var(--gold); box-shadow:0 0 0 2px var(--ink), 0 0 0 3.5px var(--gold); }
.partners .legend .lg .dot.civ{ background:var(--light); box-shadow:0 0 8px rgba(243,243,242,.5); }
.partners .legend .lg .dot.net{ background:transparent; border:1.5px solid var(--gold); box-shadow:none; }
.partners .legend .lg b{ color:var(--light); font-weight:500; }
.partners .count{ display:flex; gap:30px; margin-top:30px; }
.partners .count .c .n{ font-size:34px; font-weight:700; letter-spacing:-.01em; line-height:1; }
.partners .count .c .k{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:8px; }

/* globe */
.globe-wrap{ position:relative; width:100%; aspect-ratio:7/6; max-width:620px; margin:0 auto; }
#globeCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab;
  -webkit-mask-image:radial-gradient(125% 115% at 50% 50%, #000 68%, rgba(0,0,0,.35) 88%, transparent 100%);
          mask-image:radial-gradient(125% 115% at 50% 50%, #000 68%, rgba(0,0,0,.35) 88%, transparent 100%);
}
.globe-tip{
  position:absolute; z-index:6; min-width:170px; max-width:230px; pointer-events:none;
  background:rgba(16,16,17,.96); border:1px solid var(--gold-line); border-radius:4px;
  padding:12px 13px; box-shadow:0 18px 44px rgba(0,0,0,.6);
  opacity:0; transform:translateY(5px) scale(.97); transition:opacity .16s ease, transform .16s ease;
}
.globe-tip.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.globe-tip .gtip-head{ display:flex; align-items:center; gap:11px; }
.globe-tip .gtip-logo-img{ width:40px; height:40px; object-fit:contain; flex:none; background:transparent; }
.globe-tip .gtip-mono{
  width:38px; height:38px; flex:none; border-radius:3px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(144,132,89,.35), rgba(144,132,89,.12));
  border:1px solid var(--gold-line); font-weight:700; font-size:14px; color:var(--gold); letter-spacing:.02em;
}
.globe-tip .gtip-mono.civ{
  background:linear-gradient(135deg, rgba(243,243,242,.30), rgba(243,243,242,.08));
  border-color:rgba(243,243,242,.35); color:var(--light);
}
.globe-tip .gtip-name{ font-size:14px; font-weight:600; line-height:1.15; }
.globe-tip .gtip-city{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px; }
.globe-tip .gtip-role{
  margin-top:11px; padding-top:9px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.globe-tip .gtip-role.civ{ color:var(--light); }
.globe-tip .gtip-note{
  margin-top:9px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; line-height:1.4;
  color:var(--muted); display:flex; align-items:flex-start; gap:7px;
}
.globe-tip .gtip-note::before{ content:"⚠"; color:var(--gold); font-size:11px; line-height:1.3; }
.globe-tip.pinned{ pointer-events:auto; }
.globe-tip .gtip-close{
  position:absolute; top:7px; right:8px; width:18px; height:18px; padding:0; cursor:pointer;
  background:transparent; border:0; color:var(--faint); font-family:var(--mono); font-size:11px; line-height:1;
}
.globe-tip .gtip-close:hover{ color:var(--light); }
.globe-tip .gtip-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); padding:8px 12px; border-radius:2px; transition:background .18s;
}
.globe-tip .gtip-btn:hover{ background:var(--gold-hi); }
.globe-tip .gtip-btn.civ{ background:var(--light); }
.globe-tip .gtip-btn.net{ background:transparent; color:var(--gold); border:1px solid var(--gold-line); }
.globe-tip .gtip-btn.net:hover{ background:rgba(144,132,89,.12); }

/* partner directory */
.partner-dir{
  max-width:var(--maxw); margin:clamp(40px,6vw,72px) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.pdir-col{ border:1px solid var(--line); border-radius:3px; background:var(--panel); overflow:hidden; display:flex; flex-direction:column; }
.pdir-h{
  display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--light);
}
.pdir-h .pdir-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--gold); }
.pdir-h .pdir-dot.civ{ background:var(--light); }
.pdir-h .pdir-dot.net{ background:transparent; border:1px solid var(--gold); }
.pdir-h .pdir-n{ margin-left:auto; color:var(--faint); font-size:11px; }
.pdir-h .pdir-caret{ display:none; }
.pdir-list{ list-style:none; margin:0; padding:0; flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; }
.pdir-col--single .pdir-list{ justify-content:center; }
.pdir-col--single .pdir-item{ padding:30px 22px; gap:18px; }
.pdir-col--single .pdir-logo{ width:88px; height:88px; }
.pdir-col--single .pdir-name{ font-size:20px; }
.pdir-col--single .pdir-role{ font-size:13px; }
.pdir-col--single .pdir-mono{ font-size:26px; }
.pdir-item{
  display:flex; flex-direction:column; gap:0; padding:14px 18px; border-top:1px solid var(--line);
  cursor:default; transition:background .18s; outline:none;
}
.pdir-row{ display:flex; align-items:center; gap:13px; }
.pdir-blurb{
  margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
  font-size:13px; line-height:1.5; color:var(--muted);
  display:flex; flex-direction:column; align-items:flex-start;
}
.pdir-cov{
  display:inline-block; margin-top:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-line); border-radius:2px; padding:3px 8px;
}
.pdir-col .pdir-list .pdir-item:first-child{ border-top:0; }
.pdir-item.has-link{ cursor:pointer; }
.pdir-item:hover, .pdir-item:focus-visible{ background:rgba(144,132,89,.08); }
.pdir-logo{
  width:42px; height:42px; flex:none; border-radius:3px; display:flex; align-items:center; justify-content:center;
  background:var(--panel-3); border:1px solid var(--line); overflow:hidden;
}
.pdir-logo img{ width:100%; height:100%; object-fit:contain; }
.pdir-mono{ font-weight:700; font-size:14px; color:var(--gold); letter-spacing:.02em; }
.pdir-mono.civ{ color:var(--light); }
.pdir-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pdir-name{ font-size:15px; font-weight:600; line-height:1.15; }
.pdir-role{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--muted); line-height:1.3; }
.pdir-go{ margin-left:auto; color:var(--faint); font-size:14px; transition:color .18s, transform .18s; }
.pdir-item.has-link:hover .pdir-go, .pdir-item.has-link:focus-visible .pdir-go{ color:var(--gold); transform:translate(2px,-2px); }
.pdir-item{ position:relative; }
.pdir-item.pdir-active{
  background:linear-gradient(135deg, rgba(144,132,89,.26) 0%, rgba(144,132,89,.10) 38%, transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(144,132,89,.34);
}
.pdir-item.pdir-active .pdir-go{ color:var(--gold); }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact{ position:relative; }
.contact .wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(32px,6vw,80px); align-items:end; }
.contact h2{ font-size:clamp(38px,6vw,82px); font-weight:700; text-transform:uppercase; letter-spacing:-.015em; line-height:.94; margin:18px 0 0; }
.contact .mailto{ display:inline-flex; align-items:center; gap:12px; font-size:clamp(18px,2.4vw,26px); color:var(--gold); margin-top:30px; font-weight:600; }
.contact .mailto:hover{ color:var(--gold-hi); }
.contact .info{ display:flex; flex-direction:column; gap:22px; }
.contact .info .blk .k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.contact .info .blk .v{ color:var(--muted); font-size:15px; line-height:1.6; }
.contact .info .blk a:hover{ color:var(--light); }
.channels{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.channels li a{ display:inline-flex; align-items:center; gap:11px; color:var(--muted); font-size:15px; transition:color .2s; }
.channels li a:hover{ color:var(--light); }
.channels .ch-ico{ width:19px; height:19px; flex:none; fill:var(--gold); transition:transform .2s; }
.channels li a:hover .ch-ico{ transform:scale(1.1); }

footer{
  position:relative;
  padding:46px var(--gut); border-top:1px solid var(--line); min-height:128px;
  display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto;
  align-items:center; column-gap:30px; row-gap:14px;
  background:var(--panel-2);
}
.footer-main{ display:contents; }
.footer-eagle{ grid-column:2; grid-row:1 / span 2; justify-self:center; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:13px; }
.footer-eagle .made-eagle{ height:84px; width:auto; display:block; }
.footer-eagle .made-eagle path{ fill:var(--gold); }
.footer-nato{ grid-column:3; grid-row:1; justify-self:end; display:flex; align-items:center; gap:8px; pointer-events:none; font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.footer-nato .fn-k{ color:var(--light); }
.footer-nato .fn-v{ color:var(--light); }
footer .l{ grid-column:1; grid-row:1 / span 2; justify-self:start; display:flex; align-items:center; gap:18px; }
footer .rd-mark{ height:34px; width:auto; color:var(--muted); display:block; }
footer svg path, footer svg polygon{ fill:currentColor; }
footer .legal{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--muted); }
footer .links{ grid-column:3; grid-row:2; justify-self:end; display:flex; gap:26px; }
footer .links a{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--light); }
footer .links a:hover{ color:var(--gold); }

/* stack the footer early so the centered eagle/NATO never overlap the text */
@media (max-width:1024px){
  footer{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; min-height:0; padding:40px var(--gut); }
  footer .footer-eagle{ order:1; justify-self:center; }
  footer .l{ order:2; flex-direction:column; align-items:center; gap:8px; text-align:center; }
  footer .footer-nato{ order:3; justify-self:center; justify-content:center; }
  footer .legal{ text-align:center; }
  footer .links{ order:4; justify-self:center; justify-content:center; flex-wrap:wrap; }
}

/* ============================================================
   ANNOTATIONS — pins on elements + fixed Design Notes panel
   ============================================================ */
.anno{ display:none; }   /* source data, hidden; cloned into panel by JS */

.anno-pin{
  position:absolute; z-index:45; width:24px; height:24px; border-radius:50%;
  background:var(--gold); color:var(--ink); border:2px solid var(--ink);
  font-family:var(--mono); font-size:12px; font-weight:600;
  display:none; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 0 0 1px var(--gold-line), 0 6px 18px rgba(0,0,0,.55);
  transition:transform .15s;
}
.anno-pin::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--gold); opacity:.45; }
.anno-pin:hover{ transform:scale(1.18); }
body.notes-on .anno-pin{ display:flex; animation:annoIn .35s ease both; }
body.notes-on [data-anno-host]{ outline:1px dashed var(--gold-line); outline-offset:6px; border-radius:2px; }
@keyframes annoIn{ from{ opacity:0; transform:scale(.5);} to{ opacity:1; transform:scale(1);} }

.anno-panel{
  position:fixed; top:88px; right:16px; z-index:55; width:312px;
  max-height:calc(100vh - 104px); overflow:auto;
  background:rgba(16,16,17,.94); backdrop-filter:blur(14px);
  border:1px solid var(--gold-line); border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  transform:translateX(calc(100% + 28px)); opacity:0; pointer-events:none;
  transition:transform .4s cubic-bezier(.4,0,.1,1), opacity .3s;
}
body.notes-on .anno-panel{ transform:none; opacity:1; pointer-events:auto; }
.anno-panel .ph{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0;
  background:rgba(16,16,17,.96);
}
.anno-panel .ph .t{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.anno-panel .ph .x{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); cursor:pointer; background:none; border:0; }
.anno-panel .ph .x:hover{ color:var(--light); }
.anno-row{
  display:flex; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .18s;
}
.anno-row:last-child{ border-bottom:0; }
.anno-row:hover, .anno-row.hot{ background:rgba(144,132,89,.08); }
.anno-row .num{
  width:22px; height:22px; flex:none; border-radius:50%; background:var(--gold); color:var(--ink);
  font-family:var(--mono); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.anno-row .c .ttl{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.anno-row .c .txt{ font-size:12.5px; line-height:1.5; color:var(--light); }
@media (max-width:560px){
  .anno-panel{ left:12px; right:12px; width:auto; top:auto; bottom:12px; max-height:46vh; transform:translateY(calc(100% + 24px)); }
  body.notes-on .anno-panel{ transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .nav-links{ gap:18px; }
  .nav-links a{ font-size:11px; letter-spacing:.12em; }
  .brand .rd-mark{ height:34px; }
  .brand .rd-word{ height:25px; }
}
/* tablet landscape / small laptop */
@media (max-width:1080px){
  .core-grid{ grid-template-columns:1fr; }
  .core-media{ border-right:0; border-bottom:1px solid var(--line); min-height:380px; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .doctrine .wrap, .mission .wrap, .contact .wrap{ grid-template-columns:1fr; gap:44px; }
  .who{ margin-top:40px; }
  .mission-photo{ min-height:0; flex:none; aspect-ratio:4/5; }
  .mission .sign{ margin-top:40px; }
  .partners .wrap{ grid-template-columns:1fr; gap:34px; }
  .globe-wrap{ max-width:560px; }
  .partner-dir{ grid-template-columns:1fr; gap:14px; }
  .pdir-h{ cursor:pointer; background:rgba(144,132,89,.05); }
  .pdir-h .pdir-caret{ display:block; width:13px; height:13px; margin-left:14px; border-right:3px solid var(--gold); border-bottom:3px solid var(--gold); transform:rotate(45deg); transition:transform .3s; filter:drop-shadow(0 0 4px rgba(144,132,89,.55)); }s ease; }
  .pdir-col.collapsed .pdir-caret{ transform:rotate(-45deg); }
  .pdir-col.collapsed .pdir-list{ display:none; }
  .pdir-h .pdir-n{ margin-left:auto; margin-right:0; }
  .pdir-h .pdir-caret{ margin-left:14px; }
/* tablet portrait — collapse nav to drawer earlier so links never crowd */
@media (min-width:761px) and (max-width:920px){
  .partner-dir{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1080px){
  .nav-links, .nav-cta{ display:none; }
  .nav-utils .lang-toggle{ display:none; }
  .menu-btn{ display:flex; }
  .nav{ height:66px; }
}
@media (max-width:920px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .section-head .aside{ text-align:left; max-width:46ch; }
  /* tighter body copy on phones */
  .dev-intro p{ font-size:14.5px; line-height:1.62; margin-bottom:24px; }
  .mission .body p{ font-size:14.5px; line-height:1.62; }
  .mission .body p.lede{ font-size:16px; }
  .doctrine .copy p{ font-size:14.5px; }
  .core-info .desc{ font-size:14.5px; }
  .contact .info .blk .v{ font-size:14px; }
  .hero{ padding-top:100px; }
}
/* phones */
@media (max-width:640px){
  :root{ --gut:18px; }
  .section{ padding:clamp(54px,9vh,90px) var(--gut); }
  .pl-row{ grid-template-columns:1fr; gap:12px; }
  .pl-stage{ align-items:flex-start; flex-direction:row; gap:16px; flex-wrap:wrap; }
  .progress{ width:160px; }
  .hero-tagline .b{ font-size:21px; }
  .who{ grid-template-columns:repeat(3,1fr); max-width:none; }
  .who div{ border-right:1px solid var(--line); border-bottom:0; }
  .who div:last-child{ border-right:0; }
  .who > div{ padding:18px 8px 16px; display:flex; flex-direction:column; }
  .who .v{ font-size:10.5px; line-height:1.4; margin-top:auto; }
  .who-ico{ height:38px; margin-bottom:12px; }
  .who-ico svg, .who-ico img{ height:36px; }
  .who .k{ font-size:8.5px; letter-spacing:.1em; margin-bottom:6px; }
  .spec-line{ gap:0; }
  .spec-line .cell{ border-right:0; margin-right:0; flex:1 0 46%; padding:14px 14px 14px 0; }
  .partners .count{ gap:22px; }
  .globe-wrap{ aspect-ratio:1/1; max-width:100%; }
  #globeCanvas{ touch-action:pan-y; cursor:default; }

  /* hero */
  .hero{ min-height:92svh; padding-top:94px; padding-bottom:clamp(40px,9vh,70px); }
  .hero-top{ flex-direction:column; gap:10px; }
  .hero-live{ display:none; }
  .hero-coord{ font-size:10px; letter-spacing:.16em; display:none; }
  .hero-sub{ flex-direction:column; align-items:flex-start; gap:16px; }
  .hero-sub p{ font-size:14px; }
  .hero-eyebrow{ font-size:10px; }

  /* core product */
  .core-media{ min-height:300px; }
  .core-info{ padding:30px 22px; }
  .core-info .kw{ font-size:9px; letter-spacing:.22em; }
  .core .spec-line{ display:none; }
  .core-cta{ flex-direction:column; }
  .core-cta .btn{ justify-content:center; }

  /* teaser */
  .teaser{ height:clamp(280px,52vh,460px); }
  .teaser-cap{ left:var(--gut); bottom:18px; }
  .teaser-sound{ right:var(--gut); bottom:18px; padding:8px 11px; }

  /* doctrine / contact */
  .doctrine .wrap, .mission .wrap, .contact .wrap{ gap:36px; }
  .contact .mailto{ font-size:clamp(15px,5.2vw,22px); word-break:break-word; }
  .contact .info{ align-items:center; text-align:center; }
  .contact .wrap > div:first-child{ text-align:center; }
  .contact h2{ text-align:center; }
  .contact .mailto{ font-size:clamp(15px,5.2vw,22px); word-break:break-word; justify-content:center; }
  .contact .info .blk{ width:100%; }
  .contact .channels{ align-items:center; }
  .contact .channels li a{ justify-content:center; }

  /* footer */
  footer{ padding:14px var(--gut) 16px; min-height:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; }
  footer .footer-main{ display:contents; }
  footer .footer-eagle{ display:none; }
  footer .l{ order:2; flex-direction:column-reverse; align-items:center; gap:7px; padding:0 24px; }
  footer .legal{ text-align:center; font-size:10px; }
  .footer-nato{ order:3; position:static; transform:none; justify-content:center; font-size:10px; }
  footer .links{ order:4; margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; max-width:240px; padding:0 12px; }
  footer .links a{ font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--light);
    border:1px solid var(--line-strong); border-radius:0; padding:6px 5px; text-align:center; background:rgba(243,243,242,.05);
    transition:background .18s, border-color .18s, color .18s; }
  footer .links a:active{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

  /* legal pages */
  .legal-hero{ padding-top:110px; }
  .legal-body{ padding:48px var(--gut) 90px; }
  .lsec .data .lbl{ min-width:0; display:block; margin-top:8px; color:var(--faint); }
}
@media (max-width:380px){
  .brand .rd-word{ display:none; }
  .hero-tagline .b{ font-size:18px !important; }
}

/* anchor scroll offset (fixed header) */
#rdLog, #development, #products, #doctrine, #mission, #partners, #contact, #nexum, #specs, #platform{ scroll-margin-top:90px; }

/* mobile credit fade */
@media(max-width:640px){ .img-credit{ color:rgba(243,243,242,.15) !important; font-size:8px; text-shadow:0 1px 2px rgba(0,0,0,.6); } }