/* ============================================================
   DXX Systems — Tech HUD design system
   ============================================================ */

:root {
  /* Palette */
  --bg:           #0e0e10;
  --bg-elev:     #15151a;
  --panel:       #1a1a1c;
  --panel-2:    #1e1e22;
  --line:        #2a2a30;
  --text:        #e7e7ea;
  --text-dim:    #a8a8af;
  --text-faint:  #6b6b73;

  --orange:      #f57b00;
  --orange-hi:   #ff9a2f;
  --orange-soft: rgba(245, 123, 0, 0.18);
  --orange-glow: rgba(245, 123, 0, 0.45);

  --dxx-blue:      #1c69d4;
  --dxx-navy:      #1c3f94;
  --dxx-red:       #e2231a;
  --grad-dxxstripe: linear-gradient(
    to right,
    var(--dxx-blue)  0%,    var(--dxx-blue)  33.33%,
    var(--dxx-navy)  33.33%, var(--dxx-navy)  66.66%,
    var(--dxx-red)   66.66%, var(--dxx-red)   100%
  );

  --ok:          #4ade80;
  --warn:        #facc15;
  --crit:        #ef4444;

  /* Type */
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --f-pixel:   'VT323', 'JetBrains Mono', monospace;

  /* Layout */
  --max:       1280px;
  --gutter:    clamp(16px, 4vw, 48px);
  --radius:    2px;          /* sharp HUD edges — almost no rounding */
  --border:    1px solid var(--line);
  --border-hi: 1px solid var(--orange);

  /* Motion */
  --t-fast: 120ms;
  --t-med:  220ms;
  --ease:   cubic-bezier(.2,.7,.2,1);
}

/* ------- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--orange); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--orange-hi); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--orange); color: var(--bg); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--text);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; color: var(--text-dim); }

/* ------- HUD overlays (full viewport) -------------------------- */
.hud-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
}
.hud-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: .55;
}
.hud-grid {
  background-image:
    linear-gradient(to right, rgba(245,123,0,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,123,0,0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(245,123,0,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,123,0,0.025) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
.hud-vignette {
  background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.65) 100%);
}

/* ------- Skip link --------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--orange); color: var(--bg);
  padding: 10px 14px; font-weight: 700; z-index: 1000;
}
.skip:focus { left: 8px; top: 8px; }

/* ------- Layout primitives ------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 3;
}
section { padding-block: clamp(64px, 8vw, 120px); position: relative; }

.eyebrow {
  font-family: var(--f-pixel);
  font-size: 1.15rem;
  letter-spacing: .18em;
  color: var(--orange);
  text-transform: uppercase;
  margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px; background: var(--orange);
  display: inline-block;
}

.dxxstripe {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--dxx-blue)  0%, var(--dxx-blue)  33.33%,
    var(--dxx-navy)  33.33%, var(--dxx-navy)  66.66%,
    var(--dxx-red)   66.66%, var(--dxx-red)   100%
  );
}
.dxxstripe--thin { height: 3px; }

.ascii-divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 32px;
}
.ascii-divider::before,
.ascii-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--orange) 50%, transparent);
}

/* ------- Header / Nav ------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,14,16,0.42);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--grad-dxxstripe);
  opacity: 0.9;
  pointer-events: none;
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text);
}
.brand-mark {
  width: 28px; height: 28px;
  border: 1.5px solid var(--orange);
  display: grid; place-items: center;
  position: relative;
}
.brand-mark::before {
  content: "D";
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--orange);
}
.brand-text {
  font-family: var(--f-mono); font-weight: 700;
  letter-spacing: .2em; font-size: 0.95rem;
  color: var(--orange);
}
.brand-text .brand-dxx {
  background: var(--grad-dxxstripe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.dxx-text {
  background: var(--grad-dxxstripe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.brand-text small {
  color: var(--text-dim); font-weight: 500; letter-spacing: .25em;
  font-size: 0.7rem; margin-left: 6px;
}

.nav {
  display: flex; align-items: center; gap: 28px;
}
.nav a {
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.82rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--orange); }
.nav a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--orange);
  box-shadow: 0 0 8px var(--orange-glow);
}
.nav .cta {
  border: 1px solid var(--orange);
  color: var(--orange);
  padding: 8px 14px;
  background: transparent;
  letter-spacing: .15em;
}
.nav .cta:hover {
  background: var(--orange-soft);
  color: var(--orange-hi);
}

.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 4px;
    width: 36px; height: 36px; padding: 8px;
    border: 1px solid var(--line);
  }
  .nav-toggle span {
    height: 2px; background: var(--orange); display: block; width: 100%;
  }
  /* Drop-down menu anchored to the bottom of the header. Instead of
     translating the panel from above the viewport (which physically
     animated it THROUGH the header band and made the nav bar look
     like it was sliding down with the menu), we expand max-height
     from 0 so the menu drops out of the header's bottom edge. The
     header itself never moves, never gets covered, never animates. */
  .nav {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg);
    padding: 0 var(--gutter);
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid transparent;
    transition: max-height var(--t-med) var(--ease),
                padding-block var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease);
  }
  .nav.open {
    max-height: 90vh;
    padding: 8px var(--gutter) 24px;
    border-bottom-color: var(--line);
  }
  .nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .cta { width: 100%; text-align: center; margin-top: 12px; }
}

/* ------- Hero --------------------------------------------------- */
.hero {
  padding-block: clamp(96px, 14vw, 180px) clamp(48px, 6vw, 96px);
  position: relative;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 30%, rgba(245,123,0,0.10), transparent 70%),
    radial-gradient(50% 50% at 85% 70%, rgba(28,63,148,0.10), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-readout {
  font-family: var(--f-pixel);
  font-size: 1.1rem;
  letter-spacing: .14em;
  color: var(--orange);
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-bottom: 28px;
}
.hero-readout span { display: inline-flex; align-items: center; gap: 8px; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: .55; }
  50%     { opacity: 1; }
}
.hero h1 .accent { color: var(--orange); }
.hero p.lede {
  max-width: 60ch;
  color: var(--text-dim);
  font-size: 1.05rem;
  margin-top: 18px;
}

.clearance {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: 0;
  margin-top: 28px;
  max-width: 760px;
  border: 1px solid var(--orange);
  background:
    linear-gradient(90deg, rgba(245,123,0,0.10), transparent 60%),
    var(--panel);
  position: relative;
}
.clearance::before,
.clearance::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--orange);
  border-right: 0; border-bottom: 0;
}
.clearance::before { top: -1px; left: -1px; }
.clearance::after  { bottom: -1px; right: -1px; transform: rotate(180deg); }
.clearance-tag {
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  letter-spacing: .18em;
  color: var(--bg);
  background: var(--orange);
  padding: 10px 16px;
  display: inline-flex; align-items: center;
  white-space: nowrap;
}
.clearance-text {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  color: var(--text);
  padding: 10px 16px;
  display: inline-flex; align-items: center;
  flex: 1;
  min-width: 0;
}
@media (max-width: 640px) {
  .clearance { flex-direction: column; }
  .clearance-tag { width: 100%; justify-content: center; }
  .clearance-text { padding: 12px 16px 14px; }
}
.hero-cta {
  margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: var(--f-mono); font-size: 0.82rem;
  letter-spacing: .18em; text-transform: uppercase;
  background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  position: relative;
}
.btn:hover { background: var(--orange-soft); color: var(--orange-hi); box-shadow: 0 0 0 1px var(--orange), 0 0 18px var(--orange-glow); }
.btn--solid {
  background: var(--orange); color: var(--bg);
}
.btn--solid:hover { background: var(--orange-hi); color: var(--bg); }
.btn--ghost { border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange); background: transparent; }

/* "Click for Encryption" — engages DXX Vault for the next submission.
   Appears in the intake CTA row once the Email Intake panel is opened. */
.intake-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  align-items: center;
}
.btn--vault {
  background: transparent;
  border-color: var(--text-faint);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: .14em;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn--vault[hidden] { display: none; }
.btn--vault__icon { font-size: 0.95rem; line-height: 1; filter: grayscale(0.6); transition: filter .2s ease; }
.btn--vault__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  gap: 2px;
}
.btn--vault__label {
  font-size: 0.78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.btn--vault__sub {
  font-size: 0.62rem;
  letter-spacing: .08em;
  text-transform: none;
  opacity: 0.65;
  font-style: italic;
  font-weight: 400;
}
.btn--vault:hover,
.btn--vault:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(245, 123, 0, 0.06);
  outline: none;
}
.btn--vault:hover .btn--vault__icon { filter: none; }
/* Engaged state — green, mirrors the trust badge's --active styling. */
.btn--vault[aria-pressed="true"] {
  border-color: #3acf5a;
  color: #3acf5a;
  background: rgba(58, 207, 90, 0.08);
  box-shadow: 0 0 0 1px rgba(58, 207, 90, 0.35);
}
.btn--vault[aria-pressed="true"] .btn--vault__icon { filter: none; }
.btn--vault:disabled {
  border-color: var(--line);
  color: var(--text-faint);
  cursor: not-allowed;
  background: transparent;
}

.hero-stripe {
  margin-top: clamp(48px, 7vw, 80px);
  position: relative;
}
.hero-stripe .dxxstripe { width: min(100%, 720px); }

/* ------- Status bar (decorative) ------------------------------- */
.status-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: .18em;
  color: var(--text-dim);
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  /* Sit ABOVE the background canvas (z:1) and the HUD overlays (z:2)
     so the marquee renders on top of the motherboard art and the
     center-column dim doesn't wash the sector readout out. */
  z-index: 3;
}
.status-bar::before,
.status-bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 64px;
  pointer-events: none; z-index: 2;
}
.status-bar::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-elev), transparent);
}
.status-bar::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-elev), transparent);
}
.status-track {
  display: flex;
  width: max-content;
  animation: status-pan 90s linear infinite;
  will-change: transform;
}
.status-bar:hover .status-track {
  animation-play-state: paused;
}
.status-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 12px;
  padding-right: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-bar .k {
  color: var(--orange);
  margin-right: 4px;
}
.status-bar .v { color: var(--text); }
.status-bar .sep {
  color: var(--orange);
  opacity: 0.55;
  font-weight: 500;
}
@keyframes status-pan {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .status-track { animation: none; transform: translateX(0); }
}

/* Performance: while the user is actively dragging the window edge,
   pause every CSS animation and short-circuit every CSS transition so
   the browser isn't competing with itself for paint time. The
   themes/_anim.js helper toggles this class globally for ~170ms after
   the last resize event fires. */
body.is-resizing,
body.is-resizing *,
body.is-resizing *::before,
body.is-resizing *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

/* ------- Capability tiles -------------------------------------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cap-grid { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  display: block;
  padding: 22px 20px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  overflow: hidden;
  min-height: 180px;
}
.tile::before, .tile::after,
.tile > .br1, .tile > .br2 {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-color: var(--orange);
  border-style: solid;
  border-width: 0;
  transition: width var(--t-fast) var(--ease), height var(--t-fast) var(--ease);
}
.tile::before { top: -1px; left: -1px;  border-top-width: 2px; border-left-width: 2px; }
.tile::after  { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.tile .br1    { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }
.tile .br2    { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.tile:hover {
  border-color: var(--orange);
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--orange-soft), 0 12px 40px -20px var(--orange-glow);
}
.tile:hover::before, .tile:hover::after,
.tile:hover > .br1, .tile:hover > .br2 { width: 18px; height: 18px; }

.tile .id {
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  color: var(--orange);
  letter-spacing: .16em;
}
.tile h3 {
  font-family: var(--f-display);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 8px 0 8px;
  line-height: 1.25;
}
.tile p {
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 0;
}
.tile .arrow {
  position: absolute; right: 18px; bottom: 16px;
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 0.9rem;
  letter-spacing: .1em;
  transform: translateX(0);
  transition: transform var(--t-fast) var(--ease);
}
.tile:hover .arrow { transform: translateX(6px); }

/* ------- Dossier cards ----------------------------------------- */
.dossier-intro {
  border-left: 2px solid var(--orange);
  padding: 16px 20px;
  background: var(--bg-elev);
  color: var(--text-dim);
  margin-bottom: 36px;
  font-size: 0.95rem;
}
.dossier-intro strong { color: var(--orange); }

.dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 820px) { .dossier-grid { grid-template-columns: 1fr; } }

.dossier {
  position: relative;
  background:
    linear-gradient(135deg, rgba(245,123,0,0.04), transparent 40%),
    var(--panel);
  border: 1px solid var(--line);
  padding: 22px 22px 22px;
  overflow: hidden;
}
.dossier::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
}
.dossier-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.dossier-id {
  font-family: var(--f-pixel);
  font-size: 1.1rem;
  color: var(--orange);
  letter-spacing: .16em;
}
.dossier-state {
  font-family: var(--f-mono);
  font-size: 0.7rem; letter-spacing: .2em;
  color: var(--text-faint);
  border: 1px solid var(--line);
  padding: 2px 8px;
  text-transform: uppercase;
}
.dossier-redacted {
  display: inline-block;
  background: var(--text);
  color: var(--text);
  padding: 2px 12px;
  letter-spacing: .2em;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  user-select: none;
  margin-bottom: 12px;
  position: relative;
}
.dossier-redacted::before {
  content: "CLIENT // CLASSIFIED";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--bg);
  font-weight: 700;
  letter-spacing: .2em;
}
.dossier h3 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin: 4px 0 10px;
}
.dossier p {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px;
}
.tag {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: .12em;
  color: var(--text-dim);
  border: 1px solid var(--line);
  padding: 3px 8px;
  text-transform: uppercase;
}
.dossier .cta-row {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.dossier .cta-row a {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.dossier .cta-row .meta {
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: .15em;
}

/* ------- Approach pillars -------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  padding: 22px 22px;
}
.pillar h3 {
  font-family: var(--f-display);
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.pillar p {
  font-size: 0.9rem;
  margin: 0;
}
.pillar .num {
  font-family: var(--f-pixel);
  color: var(--orange);
  font-size: 1.05rem;
  letter-spacing: .16em;
  display: block; margin-bottom: 8px;
}

/* ------- Philosophy / Manifesto block --------------------------- */
.philosophy {
  display: block;
  margin: 40px 0 8px;
  padding: 28px clamp(22px, 3vw, 36px) 30px;
  background:
    linear-gradient(135deg, rgba(245,123,0,0.05), transparent 55%),
    var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  position: relative;
  overflow: hidden;
  max-width: none;
}
.philosophy::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
}
.philosophy > * { position: relative; z-index: 1; }

.manifesto-eyebrow {
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  letter-spacing: .18em;
  color: var(--orange);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.manifesto-lede {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 18px;
}
.manifesto-lede strong { color: var(--orange); }

.philosophy p {
  font-size: 0.96rem;
  color: var(--text-dim);
  margin: 0 0 14px;
}

.manifesto-section {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}

ol.manifesto-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
ol.manifesto-list li {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 2px solid var(--orange);
  padding: 14px 16px;
  font-size: 0.93rem;
  color: var(--text);
  line-height: 1.55;
}
ol.manifesto-list li .k {
  display: block;
  font-family: var(--f-pixel);
  font-size: 1rem;
  letter-spacing: .16em;
  color: var(--orange);
  margin-bottom: 4px;
}

.manifesto-close {
  border-top: 1px dashed var(--line);
  padding-top: 16px;
  margin-top: 6px !important;
  font-size: 0.95rem !important;
  color: var(--text) !important;
}

/* ------- Contact ----------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;        /* stacked: Direct Lines above, Intake below */
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 28px;
  position: relative;
}
.contact-card h2 { margin-top: 0; }
.contact-card .meta {
  font-family: var(--f-mono); font-size: 0.78rem;
  letter-spacing: .15em; color: var(--text-faint);
  text-transform: uppercase;
}
.contact-list {
  list-style: none; padding: 0; margin: 18px 0 8px;
}
.contact-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--f-mono); font-size: 0.88rem;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .k { color: var(--text-faint); letter-spacing: .12em; text-transform: uppercase; font-size: .76rem; }
.contact-list .v { color: var(--text); }
.contact-list .v a { color: var(--orange); }

/* ----- Copy-email inline control (replaces the mailto: link) ----- */
.copy-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.copy-email__addr {
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  user-select: all;       /* one click on the address still selects it */
}
.copy-email__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-left: 2px solid var(--text-faint);
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  position: relative;
}
.copy-email__btn:hover,
.copy-email__btn:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(245, 123, 0, 0.07);
  outline: none;
}
.copy-email__btn:active { transform: translateY(1px); }
.copy-email__icon { flex-shrink: 0; }
.copy-email__icon--ok { display: none; color: #3acf5a; }
.copy-email__label { font-weight: 600; }

/* Post-copy state — JS adds .is-copied for ~1.4s */
.copy-email__btn.is-copied {
  color: #3acf5a;
  border-color: #3acf5a;
  border-left-color: #3acf5a;
  background: rgba(58, 207, 90, 0.08);
}
.copy-email__btn.is-copied .copy-email__icon--default { display: none; }
.copy-email__btn.is-copied .copy-email__icon--ok { display: inline-block; }
.copy-email__btn.is-copied .copy-email__label::after { content: 'COPIED'; }
.copy-email__btn.is-copied .copy-email__label { font-size: 0; } /* hide "COPY" so ::after replaces cleanly */
.copy-email__btn.is-copied .copy-email__label::after { font-size: 0.62rem; letter-spacing: 0.14em; }

/* ------- Footer ------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 48px;
  background: var(--bg-elev);
  margin-top: 48px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--grad-dxxstripe);
}
.site-footer .row {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
}
.site-footer small {
  color: var(--text-faint);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.site-footer .brand-text { font-size: 0.85rem; }

/* ------- Reveal animation -------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ------- Service detail page additions ------------------------- */
.breadcrumb {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .sep { color: var(--orange); padding: 0 8px; }

.service-hero {
  padding-block: clamp(72px, 9vw, 120px) clamp(36px, 4vw, 56px);
}
.service-hero h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
.service-hero .lede { font-size: 1.05rem; color: var(--text-dim); max-width: 64ch; }

.deliverables, .process {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 820px) {
  .deliverables, .process { grid-template-columns: 1fr; }
}
.deliverables li, .process li {
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--orange);
  padding: 16px 18px;
  font-size: 0.95rem;
  color: var(--text);
}
.deliverables li .k, .process li .k {
  display: block;
  font-family: var(--f-pixel);
  font-size: 1rem;
  letter-spacing: .16em;
  color: var(--orange);
  margin-bottom: 6px;
}
ul.deliverables, ul.process { padding: 0; margin: 0; }

.section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.section-h .id {
  font-family: var(--f-pixel);
  font-size: 1.15rem;
  color: var(--orange);
  letter-spacing: .2em;
}
.section-h h2 { margin: 0; }

/* ------- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hud-scanlines { display: none; }
  .dot { animation: none; }
}

/* ============================================================
   v2.1 — Mobile theme is now auto-selected by picker.js when the
   viewport is below 512px (40% of the 1280px design width). It
   uses the page's NATURAL responsive layout — no content clamping
   from this CSS. The device-frame strips on the L/R of the canvas
   are painted by themes/mobile.js itself.

   The previous "mobile-preview" mode (which forced .container to
   max-width:420px on a desktop viewport) was removed because it
   was distorting text layout. Desktop visitors always get the
   motherboard theme; narrow viewports always get the mobile
   theme — no preview-on-desktop intermediate state.

   When the mobile theme is active the canvas behind the header
   shows two visually-distinct regions (solid black device-frame
   strips at the sides, dim centre). The site-header's normal
   translucent background lets that split bleed through, making
   the header look "cannibalised" / chopped at the gutter
   boundary. Solid-out the header (and the slide-down nav menu)
   while mobile is active so the top bar reads as one uniform
   surface, no matter what the canvas is doing behind it.
   ============================================================ */
body[data-bg="mobile"] .site-header {
  background: rgba(14, 14, 16, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-bg="mobile"] .nav {
  background: rgba(14, 14, 16, 0.98);
}

/* The hero's clamp(96px, 14vw, 180px) top padding leaves a huge
   blank band between the header and the SYS_ONLINE readout on
   narrow viewports. Tighten the hero's vertical padding when the
   layout is in mobile breakpoint range so the content starts
   right under the header. */
@media (max-width: 720px) {
  .hero {
    padding-block: 32px 48px;
  }
}

/* ============================================================
   EMAIL INTAKE PANEL  (contact section, slide-down form)
   Toggled by [data-toggle-intake] in the contact card. Submits
   to /submit.php via fetch; no page reload, no third-party
   service. SMTP is native through contact@dxxsystems.com.
   ============================================================ */
.intake-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height var(--t-med) var(--ease),
              opacity var(--t-med) var(--ease),
              margin-top var(--t-med) var(--ease);
}
.intake-panel[aria-hidden="false"] {
  max-height: 900px;
  opacity: 1;
  margin-top: 22px;
  /* After the slide-down animation finishes, release overflow so
     trust-badge tooltips (and any other escaping UI) aren't clipped. */
  animation: intake-panel-overflow 0s var(--t-med) forwards;
}
@keyframes intake-panel-overflow {
  to { overflow: visible; }
}
.intake-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.intake-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) {
  .intake-row { grid-template-columns: 1fr; }
}
.intake-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intake-label-text {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.intake-form input,
.intake-form textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.intake-form input:focus,
.intake-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange-soft);
}
.intake-form textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--f-mono);
  line-height: 1.5;
}
/* honeypot — visually + functionally hidden but in the DOM for bots */
.intake-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.intake-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.intake-status {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: .05em;
  color: var(--text-dim);
}
.intake-status--success { color: var(--orange); }
.intake-status--error   { color: #e2231a; }

/* ----- DXX trust badges (compact status pills) -----
 * Each badge defaults to a dim "standby" state. The dot illuminates
 * GREEN only when the underlying system actually engages on this form
 * (Sentry: PoW solved · Interceptor: file loaded · Vault: clicked on).
 * The "?" info icon on the right reveals a tooltip on hover/focus. */
.dxx-trust-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 16px 0 6px;
}
.dxx-trust-badge {
  display: flex;
  align-items: stretch;
  height: 34px;                       /* fixed height for ultra-compact look */
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-faint);   /* dim by default */
  overflow: visible;                  /* tooltip needs to escape the pill */
  font-family: var(--f-mono);
  position: relative;
  transition: border-left-color .2s ease, background .2s ease;
}
.dxx-trust-badge__mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px 0 11px;             /* extra right padding gives the fade room to breathe */
  /* Soft horizontal fade — replaces the old hard 1px border on the right
     so the mark blends into the badge body instead of cutting against it. */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0.025) 55%,
    transparent 100%
  );
  border-right: 0;
  flex-shrink: 0;
}
.dxx-trust-badge__dxx {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.10em;
  color: var(--text-dim);             /* dim by default */
  line-height: 1;
  transition: color .2s ease;
}
.dxx-trust-badge__divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--text-faint);      /* dim by default */
  opacity: 0.8;
  transition: background .2s ease;
}
.dxx-trust-badge__name {
  font-family: var(--f-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);             /* dim by default */
  line-height: 1;
  transition: color .2s ease;
}

/* Status dot — dim/gray by default; green when active. */
.dxx-trust-badge__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: none;
  margin-left: 3px;
  vertical-align: middle;
  transition: background .2s ease, box-shadow .2s ease;
}

/* Hover/focus the whole badge to reveal a tooltip describing the system.
   Tooltip is anchored to the right edge for the last two badges
   (extends leftward), and re-anchored to the left edge for the first one. */
.dxx-trust-badge { cursor: help; }
.dxx-trust-badge:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.dxx-trust-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 260px;
  padding: 8px 11px;
  background: #0b0b0d;
  border: 1px solid var(--orange);
  border-left-width: 3px;
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 400;       /* override <button> bold inheritance, just in case */
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.dxx-trust-badge[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  right: 14px;
  width: 8px;
  height: 8px;
  background: #0b0b0d;
  border-right: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
  transform: rotate(45deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 51;
}
.dxx-trust-badge:hover::after,
.dxx-trust-badge:focus-visible::after,
.dxx-trust-badge:hover::before,
.dxx-trust-badge:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}
/* Leftmost badge — flip anchor so the tooltip grows rightward
   (prevents it from pushing past the contact-card's left edge). */
[data-trust-badge="sentry"][data-tooltip]::after  { right: auto; left: 0; }
[data-trust-badge="sentry"][data-tooltip]::before { right: auto; left: 14px; }

/* Standby is the default visual state — explicit class kept for clarity
   so JS can toggle it on/off symmetrically with --active. */
.dxx-trust-badge--standby {}

/* ── ACTIVE state — system has engaged. Dot turns GREEN with glow. ── */
.dxx-trust-badge--active {
  border-left-color: #3acf5a !important;
  background: linear-gradient(135deg, rgba(58, 207, 90, 0.08), transparent 70%), var(--bg-elev);
}
.dxx-trust-badge--active .dxx-trust-badge__dot {
  background: #3acf5a;
  box-shadow: 0 0 6px rgba(58, 207, 90, 0.85);
  animation: dxx-dot-pulse 2.4s ease-in-out infinite;
}
.dxx-trust-badge--active .dxx-trust-badge__dxx { color: var(--text); }
.dxx-trust-badge--active .dxx-trust-badge__divider { background: #3acf5a; }
.dxx-trust-badge--active .dxx-trust-badge__name { color: #3acf5a; }

@keyframes dxx-dot-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1.0; }
}
@media (prefers-reduced-motion: reduce) {
  .dxx-trust-badge__dot { animation: none; }
}

@media (max-width: 480px) {
  .dxx-trust-badges { grid-template-columns: 1fr; }
}

/* ----- DXX Sentry status line (live op feedback below the badge) ----- */
.sentry-status {
  margin: 8px 0 0;
  padding: 7px 11px;
  font-family: var(--f-mono);
  font-size: 0.70rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  background: rgba(245, 123, 0, 0.04);
  border: 1px solid var(--line);
  border-left: 2px solid var(--text-faint);
  border-radius: 0;
  transition: border-left-color .25s ease, color .25s ease, background .25s ease;
}
.sentry-status--preview {
  color: var(--text-dim);
  border-left-color: var(--orange);
  background: rgba(245, 123, 0, 0.05);
}
.sentry-status--busy {
  color: var(--text-dim);
  border-left-color: var(--orange);
  background: rgba(245, 123, 0, 0.06);
  animation: sentry-pulse 1.4s ease-in-out infinite;
}
.sentry-status--ok {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(245, 123, 0, 0.08);
}
.sentry-status--error {
  color: #e2231a;
  border-left-color: #e2231a;
  background: rgba(226, 35, 26, 0.05);
}
@keyframes sentry-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.00; }
}
@media (prefers-reduced-motion: reduce) {
  .sentry-status--busy { animation: none; }
}

/* ----- DXX Vault — encrypted inquiry panel ----- */
.vault-banner {
  padding: 14px 16px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, rgba(245, 123, 0, 0.07), transparent 60%), var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
}
.vault-banner .meta {
  font-family: var(--f-pixel);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}
.vault-fingerprint {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  color: var(--orange);
  background: rgba(245, 123, 0, 0.04);
  border: 1px solid var(--line);
  border-left: 2px solid var(--orange);
  word-break: break-all;
}
.vault-status {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  background: rgba(28, 105, 212, 0.05);
  border: 1px solid var(--line);
  border-left: 2px solid var(--text-faint);
  transition: border-left-color .25s ease, color .25s ease, background .25s ease;
}
.vault-status--busy {
  color: var(--text-dim);
  border-left-color: var(--orange);
  background: rgba(245, 123, 0, 0.06);
  animation: sentry-pulse 1.4s ease-in-out infinite;
}
.vault-status--ready,
.vault-status--ok {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(245, 123, 0, 0.08);
}
.vault-status--error {
  color: #e2231a;
  border-left-color: #e2231a;
  background: rgba(226, 35, 26, 0.05);
}

/* ============================================================
   PRODUCTS — productized DXX systems showcase
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.product-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  position: relative;
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245, 123, 0, 0.04), transparent 60%);
  pointer-events: none;
}
.product-card > * { position: relative; z-index: 1; }
.product-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(245, 123, 0, 0.10);
}

.product-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.product-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: rgba(245, 123, 0, 0.07);
  border: 1px solid var(--line);
}
.product-card__dxx {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.10em;
  color: var(--text);
}
.product-card__divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--orange);
  opacity: 0.8;
}
.product-card__name {
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--orange);
  line-height: 1;
}

.product-card__status {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid currentColor;
}
.product-card__status--live { color: #3acf5a; }   /* green = active / shipping */
.product-card__status--beta { color: #f5d000; }
.product-card__status--dev  { color: var(--text-faint); }

.product-card h3 {
  margin: 6px 0 8px;
  font-family: var(--f-display);
  font-size: 1.20rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.product-card__tag {
  margin: 0 0 16px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  line-height: 1.5;
}
/* ── Tier sub-cards (inside .product-card--tiered) ── */
.product-card__tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 12px;
  background: rgba(245, 123, 0, 0.04);
  border: 1px solid var(--line);
  border-left: 2px solid var(--orange);
}
.product-tier {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(20, 20, 26, 0.6);
  border: 1px solid var(--line);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.product-tier:hover {
  border-color: var(--orange);
  background: rgba(245, 123, 0, 0.05);
}
.product-tier__num {
  font-family: var(--f-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.10em;
  color: var(--orange);
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.product-tier__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.product-tier__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.2;
}
.product-tier__desc {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.product-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.product-card__features li {
  position: relative;
  padding-left: 16px;
  margin: 7px 0;
  font-size: 0.81rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.product-card__features li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}
.product-card__features li strong { color: var(--orange); font-weight: 500; }

.product-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.product-card__license {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.product-card__cta {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--orange);
}
.product-card__cta:hover { color: var(--orange-hi); }

/* ============================================================
   INTERCEPTOR — file upload dropzone (intake form)
   ============================================================ */
.interceptor-zone {
  margin: 14px 0 4px;
}
.interceptor-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  background: rgba(245, 123, 0, 0.03);
  border: 1px dashed var(--line);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  user-select: none;
}
.interceptor-dropzone:hover,
.interceptor-dropzone:focus-visible {
  border-color: var(--orange);
  background: rgba(245, 123, 0, 0.06);
  outline: none;
}
.interceptor-dropzone--active {
  border-color: var(--orange);
  border-style: solid;
  background: rgba(245, 123, 0, 0.10);
}
.interceptor-dropzone--has-file {
  border-style: solid;
  border-color: var(--orange);
  background: rgba(245, 123, 0, 0.05);
  cursor: default;
}
.interceptor-dropzone__prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
}
.interceptor-dropzone--has-file .interceptor-dropzone__prompt { display: none; }
.interceptor-dropzone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  line-height: 1;
}
.interceptor-dropzone:hover .interceptor-dropzone__icon,
.interceptor-dropzone:focus-visible .interceptor-dropzone__icon,
.interceptor-dropzone--active .interceptor-dropzone__icon {
  color: var(--orange);
}
.interceptor-dropzone__text {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.interceptor-dropzone__preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-family: var(--f-mono);
  font-size: 0.80rem;
}
.interceptor-dropzone__preview.hidden { display: none; }
.interceptor-dropzone__filename {
  flex: 1;
  color: var(--orange);
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.interceptor-dropzone__filesize {
  color: var(--text-dim);
  font-size: 0.74rem;
  flex-shrink: 0;
}
.interceptor-dropzone__clear {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  flex-shrink: 0;
}
.interceptor-dropzone__clear:hover {
  border-color: var(--red);
  color: var(--red);
}
.interceptor-dropzone__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.interceptor-status {
  margin: 8px 0 0;
  padding: 6px 11px;
  font-family: var(--f-mono);
  font-size: 0.70rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  background: rgba(245, 123, 0, 0.04);
  border: 1px solid var(--line);
  border-left: 2px solid var(--text-faint);
}
.interceptor-status--ready    { color: var(--text-dim); border-left-color: var(--orange); background: rgba(245,123,0,0.05); }
.interceptor-status--ok       { color: var(--orange); border-left-color: var(--orange); background: rgba(245,123,0,0.08); }
.interceptor-status--error    { color: var(--red); border-left-color: var(--red); background: rgba(226,35,26,0.05); }

.hidden { display: none !important; }

/* ============================================================
   SECURED-BY-THREAT-ID FOOTER BADGE
   ============================================================ */
.secured-by-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  /* Active = green tint, mirrors the trust-badge --active treatment. */
  background: linear-gradient(135deg, rgba(58, 207, 90, 0.08), transparent 70%), var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 2px solid #3acf5a;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  line-height: 1;
  letter-spacing: 0.10em;
  white-space: nowrap;
  cursor: help;
  position: relative;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.secured-by-badge:hover {
  border-color: #3acf5a;
  background: linear-gradient(135deg, rgba(58, 207, 90, 0.14), transparent 70%), var(--bg-elev);
}
.secured-by-badge:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.secured-by-badge__icon {
  font-size: 0.85rem;
  line-height: 1;
}
.secured-by-badge__label {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.62rem;
}
.secured-by-badge__divider {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--line);
}
.secured-by-badge__dxx {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.10em;
  color: var(--text);
}
.secured-by-badge__sep {
  color: #3acf5a;
  opacity: 0.75;
  font-size: 0.85rem;
  line-height: 1;
}
.secured-by-badge__name {
  font-family: var(--f-pixel);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: #3acf5a;          /* green = active, mirrors the trust badge --active state */
  line-height: 1;
}
.secured-by-badge__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3acf5a;
  box-shadow: 0 0 6px rgba(58, 207, 90, 0.85);
  margin-left: 1px;
  animation: secured-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes secured-dot-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1.0; }
}
@media (prefers-reduced-motion: reduce) {
  .secured-by-badge__dot { animation: none; }
}

/* Tooltip — matches the trust-badge tooltip aesthetic. Anchored to the
   right edge of the badge so it extends LEFTWARD into the footer space
   (the badge usually sits at the far right of the footer row). */
.secured-by-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 280px;
  padding: 8px 11px;
  background: #0b0b0d;
  border: 1px solid var(--orange);
  border-left-width: 3px;
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.secured-by-badge[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  right: 14px;
  width: 8px;
  height: 8px;
  background: #0b0b0d;
  border-right: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
  transform: rotate(45deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 51;
}
.secured-by-badge:hover::after,
.secured-by-badge:focus-visible::after,
.secured-by-badge:hover::before,
.secured-by-badge:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 640px) {
  .secured-by-badge { font-size: 0.60rem; padding: 4px 9px; gap: 6px; }
  .secured-by-badge__name { font-size: 0.80rem; }
  .secured-by-badge__dxx  { font-size: 0.72rem; }
}

/* ----- Footer legal links (Terms · Privacy) ----- */
.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.footer-legal a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color .15s ease, border-color .15s ease;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
  outline: none;
}