/* ============================================================
   EOTWSG — END OF THE WORLD SURVIVAL GUIDE · v3 design system
   ------------------------------------------------------------
   LAYER ORDER (do not reorder):
     1. Design tokens      — the single source of truth. Change a
                             value here, it propagates everywhere.
     2. Reset & base       — box model, typography, media defaults.
     3. Utilities          — one-job classes (a11y, spacing).
     4. Components         — buttons, header, hero, cards, forms…
     5. Motion             — reveal + keyframes, all motion-safe.
     6. Responsive         — breakpoints, mobile-first overrides.
     7. Print              — minimal ink-friendly output.

   CONVENTIONS
   - BEM-ish naming: .block, .block-element, .block--modifier.
   - No inline styles in markup: one-off spacing lives in §3.
   - z-index comes from --z-* tokens only (no magic numbers).
   - Every animation honors prefers-reduced-motion (§5).
   ============================================================ */

/* ============ 1. DESIGN TOKENS ============ */
:root{
  /* Brand */
  --bg:#141414;  --bg-2:#1c1c1c;  --bg-3:#0e0e0e;  --panel:#1a1a1a;
  --ink:#ededed; --muted:#b9b9b9; --faint:#8a8a8a;
  --orange:#e8641b; --orange-hi:#f2731f; --orange-dark:#b94e10;
  --gold:#c9a227;
  --line:#2c2c2c; --line-soft:#232323;
  --ok:#9fe0ae;  --ok-line:#2e7d44;
  --err:#f0a090; --err-line:#a03a28;

  /* Type */
  --font-d:'Oswald','Arial Narrow',sans-serif;
  --font-b:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-m:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  /* Shape & space */
  --radius:10px; --radius-s:6px;
  --max:1180px; --header-h:68px;
  --space-section:72px; --space-section-sm:56px;

  /* Elevation */
  --shadow-card:0 18px 44px rgba(232,100,27,.14);
  --shadow-pop:0 24px 60px rgba(0,0,0,.45);

  /* Motion — one vocabulary for the whole site */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-1:.18s; --dur-2:.25s; --dur-3:.6s;

  /* Focus ring — visible to keyboard users, subtle for mouse */
  --focus-ring:0 0 0 3px rgba(232,100,27,.55);

  /* z-index scale */
  --z-header:100; --z-tooltip:200; --z-skip:300;
  --z-progress:110; --z-top:120;
}

/* ============ 2. RESET & BASE ============ */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-b); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--orange); text-decoration:none; }
a:hover{ text-decoration:underline; }
::selection{ background:var(--orange); color:#141414; }

/* Keyboard users get a real focus indicator; mouse users don't get the noise. */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

/* Anchored sections (arsenal.html#pkg-001) clear the sticky header. */
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

/* ============ 3. UTILITIES ============ */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* Screen-reader-only text (paired with aria-labels, not a replacement). */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* Skip link: first tab stop on every page. */
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:var(--z-skip);
  background:var(--orange); color:#141414;
  font-family:var(--font-d); font-size:14px; letter-spacing:2px;
  padding:12px 20px; border-radius:0 0 var(--radius-s) var(--radius-s);
  transition:top var(--dur-1) var(--ease-out);
}
.skip-link:focus-visible{ top:0; text-decoration:none; }

/* One-off spacing that used to be inline styles — now named and reusable. */
.section-flush{ padding-top:0 !important; }
.section-head-gap{ margin-top:72px; }
.section-head-gap-sm{ margin-top:24px; }
.trust-gap{ margin-top:64px; }
.mt-44{ margin-top:44px; }
.banner-tight{ margin-bottom:36px; }
.banner-narrow{ max-width:760px; margin-left:auto; margin-right:auto; }
.fine-print{ font-size:15px; color:var(--faint); }
.dossier-sub{ max-width:640px; margin:0 auto 36px; color:var(--muted); font-size:18px; }
.disclaimer{ color:var(--faint); font-size:15px; max-width:640px; margin:0 auto; }

/* Typography helpers */
.eyebrow{
  font-family:var(--font-m); font-size:12px; letter-spacing:4px;
  color:var(--orange); margin-bottom:16px; text-transform:uppercase;
}
h1,h2,h3{ font-family:var(--font-d); font-weight:700; letter-spacing:1.5px; line-height:1.12; color:#fff; }
.accent{ color:var(--orange); }
.section{ padding:var(--space-section) 0; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.section-head h2{ font-size:clamp(28px,4.5vw,44px); margin-bottom:12px; }
.section-head p{ color:var(--muted); font-size:18px; }

/* ============ 4. COMPONENTS ============ */

/* ---------- Announcement bar ---------- */
.announce{
  background:linear-gradient(90deg,#1f1409,#2a1a08);
  border-bottom:1px solid var(--line);
  font-family:var(--font-m); font-size:12px; letter-spacing:2.5px; color:var(--gold);
}
.announce .wrap{
  display:flex; align-items:center; justify-content:center;
  gap:18px; padding-top:9px; padding-bottom:9px; flex-wrap:wrap;
}
.announce .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 10px var(--orange);
  animation:pulse 2s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.announce .btn{ padding:7px 18px; font-size:12px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(14,14,14,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow var(--dur-2) ease;
}
.site-header.scrolled{ box-shadow:0 8px 30px rgba(0,0,0,.5); }
.header-inner{
  max-width:var(--max); margin:0 auto; padding:0 24px; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; color:#fff; }
.brand:hover{ text-decoration:none; }
.brand svg, .brand img{ width:38px; height:38px; flex:none; }
.brand .wordmark{ font-family:var(--font-d); font-weight:700; font-size:22px; letter-spacing:3px; }
.brand .wordmark small{ display:block; font-family:var(--font-m); font-weight:400; font-size:9px; letter-spacing:3.5px; color:var(--faint); }
.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav a{
  font-family:var(--font-d); font-size:14px; font-weight:500;
  letter-spacing:2px; color:var(--muted);
  padding:10px 14px; border-radius:var(--radius-s); text-transform:uppercase;
  transition:color var(--dur-1) ease, background var(--dur-1) ease;
}
.main-nav a:hover{ color:#fff; background:#222; text-decoration:none; }
.main-nav a.active{ color:var(--orange); }
.nav-tag{
  font-size:10px; font-weight:700; letter-spacing:1px; color:#141414;
  background:var(--orange); border-radius:999px; padding:2px 7px; margin-left:6px;
  vertical-align:2px;
}
.nav-cta{ display:none; }
.header-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  border-radius:var(--radius-s); padding:9px 11px; cursor:pointer;
}
.nav-toggle span{ display:block; width:22px; height:2px; background:#fff; margin:5px 0; transition:var(--dur-2); }
/* Hamburger morphs to X when open — state is readable without color. */
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-d); font-weight:600; font-size:15px;
  letter-spacing:2px; text-transform:uppercase;
  padding:15px 34px; border-radius:var(--radius-s);
  border:2px solid transparent; cursor:pointer;
  transition:transform var(--dur-1) var(--ease-out),
             box-shadow var(--dur-1) ease, background var(--dur-1) ease;
  text-align:center; line-height:1.2;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
/* Pressed state: the micro-interaction that makes buttons feel physical. */
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible{ box-shadow:var(--focus-ring); }
.btn-primary{
  background:var(--orange); color:#141414;
  box-shadow:0 8px 26px rgba(232,100,27,.28);
}
.btn-primary:hover{ background:var(--orange-hi); box-shadow:0 12px 32px rgba(232,100,27,.4); color:#141414; }
.btn-ghost{ background:transparent; color:var(--orange); border-color:var(--orange); }
.btn-ghost:hover{ background:rgba(232,100,27,.12); color:var(--orange); }
.btn-sm{ padding:10px 20px; font-size:13px; }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
.btn-row.center{ justify-content:center; }
/* Loading state (vault form): spinner replaces label text, layout doesn't jump. */
.btn[aria-disabled="true"]{ cursor:wait; opacity:.85; transform:none; }
.btn .spinner{
  display:inline-block; width:16px; height:16px; margin-right:10px;
  border:2px solid rgba(20,20,20,.35); border-top-color:#141414;
  border-radius:50%; vertical-align:-3px;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:88px 0 96px;
  background:radial-gradient(ellipse 90% 65% at 50% 0%, #262626 0%, var(--bg) 72%);
  border-bottom:1px solid var(--line-soft); overflow:hidden;
}
/* Compact hero variant (arsenal, resources) — replaces inline padding. */
.hero-compact{ padding:72px 0 60px; }
.hero-compact h1{ font-size:clamp(34px,6vw,64px); }
#starfield{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.8; }
.hero-inner{ position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto; padding:0 24px; }
.status-bar{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-m); font-size:11px; letter-spacing:2.5px;
  color:#7fc97f; border:1px solid #2e4a2e; background:rgba(20,40,20,.35);
  padding:8px 18px; border-radius:20px; margin-bottom:28px; flex-wrap:wrap; justify-content:center;
}
.status-bar .sep{ color:#3a5a3a; }
.hero h1{ font-size:clamp(44px,8vw,92px); letter-spacing:3px; margin-bottom:22px; }
.hero .lede{ font-size:clamp(17px,2.4vw,21px); color:var(--muted); max-width:680px; margin:0 auto 38px; line-height:1.7; }

/* ---------- Image shell: shimmer placeholder + graceful failure ----------
   Every content image sits in .img-shell. While loading, a shimmer
   occupies the space (no pop-in, no layout shift). On error, JS swaps
   in .img-fallback — never a broken-image icon. */
.img-shell{ position:relative; overflow:hidden; background:var(--bg-3); }
.img-shell::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, #1a1a1a 40%, #232323 50%, #1a1a1a 60%);
  background-size:200% 100%;
  animation:shimmer 1.6s linear infinite;
}
@keyframes shimmer{ to{ background-position:-200% 0; } }
.img-shell img{ opacity:0; transition:opacity .5s ease; }
.img-shell.loaded::before{ display:none; }
.img-shell.loaded img{ opacity:1; }
.img-fallback{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:220px; padding:32px;
  font-family:var(--font-m); font-size:12px; letter-spacing:2px; color:var(--faint);
  text-align:center;
}
.img-fallback svg{ width:40px; height:40px; opacity:.5; }

/* ---------- Product strip (home) ---------- */
.strip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin-top:8px; }
.strip-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:22px 18px; text-align:center; color:var(--ink);
  transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.strip-card:hover{ transform:translateY(-4px); border-color:var(--orange); box-shadow:var(--shadow-card); text-decoration:none; }
.strip-card .code{ font-family:var(--font-m); font-size:10px; letter-spacing:2px; color:var(--orange); margin-bottom:8px; }
.strip-card h3{ font-size:15px; letter-spacing:1px; line-height:1.35; }
.strip-card .n{ font-family:var(--font-m); font-size:11px; color:var(--faint); margin-top:8px; }

/* ---------- Featured product ---------- */
.featured{
  display:flex; flex-wrap:wrap;
  background:var(--bg-2); border:1px solid var(--orange);
  border-radius:var(--radius); overflow:hidden; margin:8px 0;
}
.featured .fimg{ flex:0 1 340px; min-height:420px; background:var(--bg-3); }
.featured .fimg img{ width:100%; height:100%; object-fit:cover; }
.featured .fbody{ flex:1 1 320px; padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.flag{
  align-self:flex-start; font-family:var(--font-m); font-size:11px; letter-spacing:3px;
  color:#141414; background:var(--orange); padding:6px 14px; border-radius:3px; margin-bottom:18px;
}
.featured h2{ font-size:clamp(28px,4vw,44px); margin-bottom:10px; }
.featured .tag{ font-size:18px; color:var(--gold); font-style:italic; margin-bottom:16px; }
.featured p.desc{ color:var(--muted); margin-bottom:22px; max-width:560px; }

/* ---------- Product cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:28px; }
.card{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.card:hover{ transform:translateY(-6px); border-color:var(--orange); box-shadow:var(--shadow-card); }
/* Image eases into a slow zoom on hover — draws the eye to the product. */
.card .cimg{ aspect-ratio:5/8; max-height:340px; overflow:hidden; background:var(--bg-3); }
.card .cimg img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .8s var(--ease-out), opacity .5s ease; }
.card:hover .cimg img{ transform:scale(1.04); }
.card .cbody{ padding:24px 24px 28px; display:flex; flex-direction:column; flex:1; }
.card .code{ font-family:var(--font-m); font-size:11px; letter-spacing:2px; color:var(--orange); margin-bottom:8px; }
.card h3{ font-size:21px; margin-bottom:6px; line-height:1.25; }
.card .tag{ font-size:15px; color:var(--gold); font-style:italic; margin-bottom:12px; }
.card p.desc{ font-size:15px; color:#b5b5b5; flex:1; }
.card .meta{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--font-m); font-size:12px; letter-spacing:1px; color:var(--faint); }
.card .meta b{ color:var(--orange); }
.card .card-cta{ margin-top:18px; }

/* ---------- Trust row ---------- */
.trust{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.trust .t{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:8px; padding:30px 26px; text-align:center;
  transition:border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.trust .t:hover{ border-color:var(--line); transform:translateY(-3px); }
/* Clickable trust cards (e.g. Follow-the-operation links) */
.trust a.t{ color:inherit; text-decoration:none; }
.trust a.t:hover{ border-color:var(--orange); }
.trust .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); margin:0 auto 16px; box-shadow:0 0 12px var(--orange); }
.trust .ti{ font-family:var(--font-d); font-size:19px; letter-spacing:1.5px; color:#fff; margin-bottom:10px; }
.trust p{ font-size:15px; color:var(--faint); }

/* ---------- Capture band ---------- */
.capture{ text-align:center; padding:80px 24px; background:linear-gradient(180deg, var(--bg) 0%, #211407 100%); border-top:1px solid var(--line-soft); }
.capture h2{ font-size:clamp(30px,5vw,52px); margin-bottom:16px; }
.capture p{ max-width:600px; margin:0 auto 32px; color:var(--muted); font-size:18px; }
.capture .fine{ margin-top:20px; font-family:var(--font-m); font-size:12px; letter-spacing:2px; color:var(--faint); }

/* ---------- Vault form ---------- */
.vault-layout{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; max-width:1080px; margin:0 auto; }
.vault-copy h1{ font-size:clamp(34px,5vw,58px); margin-bottom:18px; }
.vault-copy .tag{ font-size:19px; color:var(--gold); font-style:italic; margin-bottom:18px; }
.vault-copy p{ color:var(--muted); margin-bottom:16px; }
.vault-copy ul{ list-style:none; margin:24px 0; }
.vault-copy li{ padding:12px 0 12px 34px; position:relative; color:var(--ink); font-size:16px; border-bottom:1px solid var(--line-soft); }
.vault-copy li::before{ content:"▸"; position:absolute; left:8px; color:var(--orange); font-weight:bold; }
.form-card{ background:var(--bg-2); border:1px solid var(--orange); border-radius:var(--radius); padding:40px 36px; box-shadow:var(--shadow-pop); }
.form-card h2{ font-size:26px; margin-bottom:8px; }
.form-card .sub{ color:var(--faint); font-size:15px; margin-bottom:26px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-m); font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:8px; text-transform:uppercase; }
.field input{
  width:100%; padding:15px 16px; font-size:16px; font-family:var(--font-b);
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius-s); color:#fff;
  transition:border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.field input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,100,27,.18); }
/* Textareas and selects share the input treatment (contact page). */
.field textarea, .field select{
  width:100%; padding:15px 16px; font-size:16px; font-family:var(--font-b);
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius-s); color:#fff;
  transition:border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.field textarea:focus, .field select:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,100,27,.18); }
.field textarea{ min-height:160px; resize:vertical; }
.field select{ appearance:none; }
/* Per-field validation state — the error is attached to the field, not just a banner. */
.field.invalid input{ border-color:var(--err-line); }
.field.invalid input:focus{ box-shadow:0 0 0 3px rgba(160,58,40,.25); }
.field-error{ display:none; margin-top:8px; font-size:13.5px; color:var(--err); }
.field.invalid .field-error{ display:block; }
/* Honeypot: positioned off-screen (not display:none) so naive bots still fill it. */
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-card .btn{ width:100%; }
.form-note{ margin-top:18px; font-size:13.5px; color:var(--faint); text-align:center; }
.form-msg{ display:none; margin-top:18px; padding:14px 16px; border-radius:var(--radius-s); font-size:15px; line-height:1.5; }
.form-msg.show{ display:block; animation:msg-in .3s var(--ease-out); }
@keyframes msg-in{ from{ opacity:0; transform:translateY(-6px); } }
.form-msg.error{ background:rgba(200,60,40,.12); border:1px solid var(--err-line); color:var(--err); }
.form-msg.success{ background:rgba(60,160,80,.12); border:1px solid var(--ok-line); color:var(--ok); }

/* ---------- Dossier / about ---------- */
.dossier{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:56px 52px; position:relative; overflow:hidden; }
.dossier::before{ content:"FILE: ORIGIN_PROTOCOL.TXT"; position:absolute; top:18px; right:24px; font-family:var(--font-m); font-size:10px; letter-spacing:2px; color:#4a4a4a; }
.dossier h1{ font-size:clamp(32px,5vw,56px); margin-bottom:20px; max-width:800px; }
.dossier .lead{ font-size:19px; color:var(--muted); max-width:760px; margin-bottom:12px; }
.cap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:44px; }
.cap{ background:var(--bg-3); border:1px solid var(--line); border-radius:8px; padding:28px 24px; }
.cap .cn{ font-family:var(--font-m); font-size:11px; letter-spacing:2px; color:var(--orange); margin-bottom:10px; }
.cap h3{ font-size:18px; margin-bottom:10px; }
.cap p{ font-size:15px; color:var(--faint); }

/* ---------- Resources directory ---------- */
.res-group{ margin-bottom:48px; }
.res-group > h2{ font-size:24px; letter-spacing:2px; margin-bottom:6px; padding-bottom:14px; border-bottom:2px solid var(--orange); }
.res-group > p{ color:var(--faint); font-size:15px; margin-bottom:20px; }
.res-list{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.res-list a{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px 20px; color:var(--ink); transition:border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out); }
.res-list a:hover{ border-color:var(--orange); transform:translateY(-2px); text-decoration:none; }
.res-list .rn{ font-family:var(--font-d); font-size:16px; letter-spacing:1px; color:#fff; margin-bottom:4px; }
.res-list .rd{ font-size:13.5px; color:var(--faint); }
.res-list .ru{ font-family:var(--font-m); font-size:11px; color:var(--orange); margin-top:8px; letter-spacing:1px; }

/* ---------- Legal prose ---------- */
.prose{ max-width:820px; margin:0 auto; }
.prose h1{ font-size:clamp(30px,4.5vw,48px); margin-bottom:10px; }
.prose .effective{ font-family:var(--font-m); font-size:12px; letter-spacing:2px; color:var(--faint); margin-bottom:36px; }
.prose h2{ font-size:22px; margin:36px 0 14px; letter-spacing:1px; }
.prose p, .prose li{ color:var(--muted); margin-bottom:14px; font-size:16.5px; }
.prose ul, .prose ol{ padding-left:24px; margin-bottom:18px; }
.prose a{ color:var(--orange); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-3); border-top:1px solid var(--line); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.footer-brand p{ color:var(--faint); font-size:15px; margin-top:14px; max-width:340px; }
.footer-col h4{ font-family:var(--font-d); font-size:14px; letter-spacing:2.5px; color:#fff; margin-bottom:18px; text-transform:uppercase; }
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:var(--faint); font-size:15px; }
.footer-col a:hover{ color:var(--orange); }
.footer-bottom{ border-top:1px solid var(--line-soft); padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--font-m); font-size:11.5px; letter-spacing:1.5px; color:#5a5a5a; }
.footer-bottom a{ color:#5a5a5a; }
.footer-bottom a:hover{ color:var(--orange); }

/* ---------- Banner & field intel ---------- */
.banner{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0 0 44px; background:var(--bg-3); }
.banner img{ width:100%; height:auto; }
.banner figcaption{ font-family:var(--font-m); font-size:11px; letter-spacing:2px; color:var(--faint); padding:12px 18px; border-top:1px solid var(--line-soft); text-transform:uppercase; }
.intel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:8px; }
.intel{ display:block; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; overflow:hidden; color:var(--ink); transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.intel:hover{ transform:translateY(-4px); border-color:var(--orange); text-decoration:none; box-shadow:var(--shadow-card); }
.intel img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.intel .ibody{ padding:18px 20px 22px; }
.intel .icode{ font-family:var(--font-m); font-size:11px; letter-spacing:2px; color:var(--orange); margin-bottom:6px; }
.intel h3{ font-size:17px; margin-bottom:6px; letter-spacing:1px; }
.intel p{ font-size:14px; color:var(--faint); }

/* ---------- Accessible tooltip ----------
   Trigger: any [data-tip]. CSS renders it on hover/focus immediately
   (no JS dependency); js/tooltips adds touch support + aria-describedby. */
[data-tip]{ position:relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip].tip-show::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
  z-index:var(--z-tooltip); max-width:240px; width:max-content;
  background:#0b0b0b; border:1px solid var(--orange); border-radius:var(--radius-s);
  color:var(--ink); font-family:var(--font-m); font-size:11.5px; letter-spacing:.5px;
  padding:10px 12px; line-height:1.5; text-align:center; white-space:normal;
  box-shadow:var(--shadow-pop); pointer-events:none;
  animation:tip-in var(--dur-1) var(--ease-out);
}
@keyframes tip-in{ from{ opacity:0; transform:translateX(-50%) translateY(4px); } }

/* ---------- Button label (vault form loading state) ---------- */
.btn-label{ display:inline-flex; align-items:center; gap:10px; }

/* ---------- Hero background image ---------- */
.hero-bg{ position:absolute; inset:0; z-index:0; background:var(--bg-3); }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.45; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.30) 45%, var(--bg) 96%);
}
#starfield{ z-index:1; }
.hero-inner{ z-index:2; }

/* ---------- Reversed feature split ---------- */
.featured.rev{ flex-direction:row-reverse; }

/* ---------- Capture band with image backdrop ---------- */
.capture{ position:relative; overflow:hidden; }
.capture .band-bg{ position:absolute; inset:0; z-index:0; }
.capture .band-bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.capture .band-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(12,12,12,.45) 40%, rgba(33,20,7,.75) 100%);
}
.capture > *:not(.band-bg){ position:relative; z-index:1; }

/* ---------- 404: lost signal ---------- */
.lost-code{
  font-family:var(--font-m); font-size:clamp(72px,16vw,160px); font-weight:700;
  letter-spacing:8px; color:var(--orange); line-height:1;
  text-shadow:0 0 60px rgba(232,100,27,.35); margin-bottom:8px;
}

/* ---------- Enterprise micro-interactions ----------
   Button shine sweep + click ripple, 3D tilt base, nav indicator,
   scroll progress, back-to-top ring, hero intro stagger, dividers.
   All transform/opacity-only; all gated by prefers-reduced-motion. */

/* Shine sweep: a diagonal light band crosses the button on hover. */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; top:0; left:-80%; width:60%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .01s; pointer-events:none;
}
.btn:hover::before{ left:130%; transition:left .55s var(--ease-out); }
/* Click ripple (span injected by 90-micro.js). */
.btn .ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.35); transform:scale(0);
  animation:ripple .6s var(--ease-out) forwards;
}
@keyframes ripple{ to{ transform:scale(1); opacity:0; } }

/* 3D tilt base — JS drives the transform, capped at 6deg. */
.tilt{ transform-style:preserve-3d; will-change:transform; }

/* Nav underline indicator (span injected by 90-micro.js). */
.main-nav{ position:relative; }
.nav-indicator{
  position:absolute; bottom:4px; height:2px; left:0; width:0; opacity:0;
  background:linear-gradient(90deg, var(--orange), var(--gold));
  border-radius:2px; pointer-events:none;
  transition:left .25s var(--ease-out), width .25s var(--ease-out), opacity .2s ease;
  box-shadow:0 0 12px rgba(232,100,27,.7);
}

/* Scroll progress bar — scaleX driven by 90-micro.js. */
#scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:var(--z-progress);
  background:linear-gradient(90deg, var(--orange), var(--gold));
  transform:scaleX(0); transform-origin:0 50%;
  box-shadow:0 0 10px rgba(232,100,27,.55);
}

/* Back-to-top with progress ring. */
#to-top{
  position:fixed; right:26px; bottom:26px; z-index:var(--z-top);
  width:52px; height:52px; border-radius:50%;
  background:rgba(20,20,20,.92); border:1px solid var(--orange);
  color:var(--orange); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .3s ease, transform .3s var(--ease-out), box-shadow .2s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#to-top.show{ opacity:1; transform:none; pointer-events:auto; }
#to-top:hover{ box-shadow:0 8px 28px rgba(232,100,27,.45); }
#to-top svg{ position:absolute; inset:5px; width:42px; height:42px; transform:rotate(-90deg); }
#to-top .ring-bg{ fill:none; stroke:rgba(232,100,27,.18); stroke-width:2.5; }
#to-top .ring-fg{ fill:none; stroke:var(--orange); stroke-width:2.5; stroke-linecap:round; }
#to-top .top-arrow{ position:relative; font-size:20px; line-height:1; }

/* Hero intro — staggered entrance once .page-loaded lands on <body>.
   Scoped under .js so no-JS visitors see the hero immediately. */
.js .hero-intro > *{ opacity:0; transform:translateY(26px); }
.js body.page-loaded .hero-intro > *{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s var(--ease-out);
}
.js body.page-loaded .hero-intro > *:nth-child(1){ transition-delay:.05s; }
.js body.page-loaded .hero-intro > *:nth-child(2){ transition-delay:.18s; }
.js body.page-loaded .hero-intro > *:nth-child(3){ transition-delay:.32s; }
.js body.page-loaded .hero-intro > *:nth-child(4){ transition-delay:.46s; }

/* Animated section divider. */
.divider{ padding:6px 0; }
.divider span{
  display:block; height:1px; max-width:var(--max); margin:0 auto;
  background:linear-gradient(90deg, transparent, var(--orange) 20%, var(--gold) 50%, var(--orange) 80%, transparent);
  background-size:200% 100%; opacity:.55;
  animation:divider-flow 6s linear infinite;
}
@keyframes divider-flow{ to{ background-position:-200% 0; } }

/* Glow border on card hover — layered over the existing lift. */
.card:hover, .intel:hover, .strip-card:hover, .post-card:hover{
  box-shadow:var(--shadow-card), 0 0 0 1px rgba(232,100,27,.35), 0 0 34px rgba(232,100,27,.12);
}

/* Staggered reveal trajectories — varied motion per column. */
.js .reveal{ transition:opacity var(--dur-3) ease, transform var(--dur-3) ease; }
.js .strip-grid .reveal:nth-child(3n+2){ transform:translateY(34px) scale(.985); }
.js .strip-grid .reveal:nth-child(3n){ transform:translateX(26px); }
.js .intel-grid .reveal:nth-child(2n){ transform:translateY(30px); }
.js .grid .reveal:nth-child(odd){ transform:translateY(28px); }
.js .reveal.in{ opacity:1 !important; transform:none !important; }

/* ============ 5. MOTION ============ */
/* Progressive enhancement: .reveal only hides when JS is confirmed present
   (the <html class="no-js"> → "js" swap in <head>). If scripts fail, the
   page renders fully — never a blank screen. */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-3) ease, transform var(--dur-3) ease; }
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .announce .dot, .img-shell::before, .btn .spinner{ animation:none; }
  .card:hover .cimg img{ transform:none; }
  .btn::before, .btn .ripple, .divider span{ animation:none; display:none; }
  .btn:hover::before{ left:-80%; }
  .js .hero-intro > *{ opacity:1; transform:none; transition:none; }
  #to-top{ transition:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ============ 6. RESPONSIVE ============ */
@media (max-width:900px){
  .vault-layout{ grid-template-columns:1fr; gap:40px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .dossier{ padding:40px 28px; }
}
@media (max-width:760px){
  .main-nav{
    display:none; position:absolute; top:var(--header-h); left:0; right:0;
    background:#0e0e0e; flex-direction:column; align-items:stretch;
    border-bottom:1px solid var(--line); padding:12px 20px 20px;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:14px 8px; border-bottom:1px solid var(--line-soft); }
  .nav-cta{
    display:block; margin-top:12px; text-align:center;
    font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:2px; text-transform:uppercase;
    color:#141414!important; background:var(--orange); border-radius:var(--radius-s);
    padding:15px 18px!important; border-bottom:none!important;
  }
  .nav-cta:hover{ background:#fff; text-decoration:none; }
  .nav-toggle{ display:block; }
  .header-cta .btn{ display:none; }
  .section{ padding:var(--space-section-sm) 0; }
  .featured .fimg{ flex:1 1 100%; min-height:300px; }
  .featured .fbody{ padding:32px 26px; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .announce .wrap{ gap:10px; }
}

/* ============ 6.5 FIELD LOG (blog feed) ============ */
/* ============ 6.6 FAQ ============ */
.faq{ max-width:840px; margin:8px auto 0; }
.faq details{ background:var(--bg-2); border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }
.faq summary{ cursor:pointer; padding:20px 24px; font-family:var(--font-d); font-weight:600; letter-spacing:1.5px; font-size:15px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:""; }
.faq summary::after{ content:"+"; color:var(--orange); font-size:22px; font-weight:400; flex:none; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq .fanswer{ padding:0 24px 22px; color:var(--muted); font-size:15px; line-height:1.7; }

#blog-posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:8px; }
.post-card{ display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:26px 24px 22px; color:var(--ink); transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.post-card:hover{ transform:translateY(-4px); border-color:var(--orange); text-decoration:none; box-shadow:var(--shadow-card); }
.post-card .code{ font-family:var(--font-m); font-size:10px; letter-spacing:2px; color:var(--orange); margin-bottom:10px; }
.post-card h3{ font-size:17px; letter-spacing:0.5px; line-height:1.4; margin-bottom:10px; }
.post-card p{ font-size:14px; color:var(--faint); line-height:1.65; flex:1 1 auto; margin-bottom:14px; }
.post-card .n{ font-family:var(--font-m); font-size:11px; letter-spacing:1px; color:var(--orange); }

/* ============ 6.7 OFFER COMPARISON + GLOSSARY (added 2026-10-11) ============ */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.compare-table{ width:100%; border-collapse:collapse; min-width:720px; font-size:15px; }
.compare-table th, .compare-table td{ text-align:left; padding:16px 18px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.compare-table thead th{ font-family:var(--font-d); text-transform:uppercase; letter-spacing:1px; font-size:13px; color:var(--orange-hi); background:var(--bg-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.compare-table tbody th{ font-family:var(--font-d); text-transform:uppercase; letter-spacing:.5px; font-size:15px; color:var(--ink); white-space:nowrap; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table td{ color:var(--muted); line-height:1.65; }
.compare-table td a{ color:var(--orange-hi); }
.compare-callout{ max-width:720px; margin:28px auto 0; text-align:center; color:var(--muted); font-size:16px; }
.compare-callout b{ color:var(--ink); }
.gloss{ max-width:840px; margin:8px auto 0; }
.gloss > div{ background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:18px 24px; margin-bottom:12px; }
.gloss dt{ font-family:var(--font-d); text-transform:uppercase; letter-spacing:1px; font-size:15px; color:var(--orange-hi); margin-bottom:6px; }
.gloss dd{ color:var(--muted); font-size:15px; line-height:1.7; margin:0; }

/* --- option thumbnails --- */
.compare-table .opt{ display:flex; align-items:center; gap:14px; }
.opt-thumb{ flex:none; width:72px; height:72px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.opt-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.opt-label{ transition:color var(--dur-2) ease; }
.compare-table tbody tr{ transition:background-color var(--dur-2) ease; }
.compare-table tbody tr:hover{ background:rgba(232,100,27,.05); }
.compare-table tbody tr:hover .opt-thumb{ transform:scale(1.08); border-color:var(--orange); box-shadow:var(--shadow-card); }
.compare-table tbody tr:hover .opt-label{ color:var(--orange-hi); }
.compare-table a{ border-radius:4px; }
.compare-table a:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* --- staggered entrances (fill backwards: hover transforms keep working) --- */
@keyframes row-in{ from{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:no-preference){
  .table-scroll.in tbody tr{ animation:row-in var(--dur-3) var(--ease-out) backwards; }
  .table-scroll.in tbody tr:nth-child(2){ animation-delay:.06s; }
  .table-scroll.in tbody tr:nth-child(3){ animation-delay:.12s; }
  .table-scroll.in tbody tr:nth-child(4){ animation-delay:.18s; }
  .table-scroll.in tbody tr:nth-child(5){ animation-delay:.24s; }
  .gloss.in > div{ animation:row-in var(--dur-3) var(--ease-out) backwards; }
  .gloss.in > div:nth-child(2){ animation-delay:.05s; }
  .gloss.in > div:nth-child(3){ animation-delay:.1s; }
  .gloss.in > div:nth-child(4){ animation-delay:.15s; }
  .gloss.in > div:nth-child(5){ animation-delay:.2s; }
  .gloss.in > div:nth-child(6){ animation-delay:.25s; }
}

/* --- glossary card hover (matches .post-card language) --- */
.gloss > div{ transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.gloss > div:hover{ transform:translateY(-3px); border-color:var(--orange); box-shadow:var(--shadow-card); }

/* ============ 7. PRINT ============ */
@media print{
  .announce, .site-header, .capture, .site-footer, #starfield,
  #scroll-progress, #to-top, .divider{ display:none; }
  body{ background:#fff; color:#111; font-size:12pt; }
  h1,h2,h3{ color:#111; }
  a{ color:#111; text-decoration:underline; }
}