/* ==========================================================================
   Project Cyber Echelon — shared design system
   Palette matched to TXWERX: pure-black terminal ground, hot-orange accent.
   Single committed dark look — background and every color set explicitly so it
   holds on any host, regardless of the viewer's OS light/dark setting.
   ========================================================================== */

:root{
  --bg:#000000; --surface:#0a0a0a; --surface-2:#111214; --raise:#141518;
  --line:#1f2124; --line-soft:#17181b;
  /* All text is white for legibility (2026-10-06). The four names are kept so the pages need no edits;
     --dim is the old faint grey, used only for input placeholders and small non-text marks. */
  --ink:#ffffff; --ink-2:#ffffff; --muted:#ffffff; --faint:#ffffff; --dim:#6b7178;
  --accent:#ff5c1a; --accent-ink:#ff7a45; --accent-soft:rgba(255,92,26,.12); --accent-line:rgba(255,92,26,.34);
  --rust:#c2410c;
  --sev-crit:#ff453a; --sev-high:#ff5c1a; --sev-med:#e8b33e; --sev-low:#5aa2d6;
  --ok:#4ade80;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 16px 34px -24px rgba(0,0,0,.9);
  --shadow-lg:0 2px 6px rgba(0,0,0,.7), 0 34px 66px -34px rgba(0,0,0,1);

  --f-display:'Chivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-body:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1220px;
  --pad:clamp(18px,4vw,40px);
  --radius:14px; --radius-sm:9px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--accent-ink); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--f-display); margin:0; letter-spacing:-.02em; text-wrap:balance; font-weight:700; }
p{ margin:0; }
hr{ border:none; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--accent-soft); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.mono{ font-family:var(--f-mono); }
.eyebrow{ font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-ink); }

/* strata rule — signature divider */
.strata{ height:9px; background:
  linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,
  linear-gradient(var(--line-soft),var(--line-soft)) 0 4px/100% 1px no-repeat,
  linear-gradient(var(--line-soft),var(--line-soft)) 0 8px/100% 1px no-repeat;
  opacity:.8; }

/* ---------- top bar ---------- */
.top{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line-soft); }
.top__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:62px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand__mark{ width:30px; height:30px; flex:none; }
.brand__name{ font-family:var(--f-display); font-weight:800; font-size:17px; letter-spacing:-.02em; line-height:1; }
.brand__name span{ color:var(--accent-ink); }
.brand__sub{ display:block; font-family:var(--f-mono); font-weight:500; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin-top:3px; }
/* The three-word wordmark stays on one line; the narrowest phones step it down a size so it clears the menu button. */
.brand__name{ white-space:nowrap; }
@media (max-width:374px){ .brand__name{ font-size:15px; } }
@media (max-width:334px){ .brand{ gap:8px; } .brand__name{ font-size:14px; } }
.nav{ display:flex; align-items:center; gap:3px; }
.nav a{ font-size:14px; font-weight:600; color:var(--ink-2); padding:8px 13px; border-radius:9px; transition:.14s; }
.nav a:hover{ color:var(--ink); background:var(--surface-2); text-decoration:none; }
.nav a.active{ color:var(--accent-ink); background:var(--accent-soft); }
.nav a.cta{ color:var(--bg); background:var(--accent); margin-left:6px; }
.nav a.cta:hover{ background:var(--accent-ink); color:var(--bg); }
.navtoggle{ display:none; }
@media (max-width:860px){
  .brand__sub{ display:none; }
  .nav{ position:fixed; inset:62px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--line); padding:10px var(--pad) 16px;
    transform:translateY(-120%); transition:transform .22s ease; box-shadow:var(--shadow); }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:12px 14px; font-size:15px; }
  .nav a.cta{ margin-left:0; margin-top:6px; text-align:center; }
  .navtoggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer; }
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-body); font-weight:650;
  font-size:15px; padding:11px 18px; border-radius:11px; border:1px solid transparent; cursor:pointer;
  transition:.15s; text-decoration:none; }
.btn--primary{ background:var(--accent); color:var(--bg); }
.btn--primary:hover{ background:var(--accent-ink); text-decoration:none; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--surface-2); text-decoration:none; }

/* ---------- generic section ---------- */
.sec{ padding:clamp(44px,7vw,84px) 0; }
.sec__head{ max-width:64ch; margin-bottom:30px; display:flex; flex-direction:column; gap:12px; }
.sec__head h2{ font-size:clamp(26px,3.6vw,38px); line-height:1.08; }
.sec__head p{ color:var(--ink-2); font-size:clamp(15px,2vw,17px); }

/* ---------- cards / pills ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); }
.pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11px;
  font-weight:600; letter-spacing:.04em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill--free{ color:var(--ok); background:color-mix(in srgb,var(--ok) 13%,transparent); border:1px solid color-mix(in srgb,var(--ok) 34%,transparent); }
.pill--paid{ color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line); }
.pill--soon{ color:var(--muted); background:var(--surface-2); border:1px solid var(--line); }

.sev-crit{ --sev:var(--sev-crit); } .sev-high{ --sev:var(--sev-high); }
.sev-med{ --sev:var(--sev-med); } .sev-low{ --sev:var(--sev-low); }

/* ---------- forms ---------- */
.field{ width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--raise);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
.field::placeholder{ color:var(--dim); }
.field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
label.lab{ font-size:12.5px; font-weight:650; color:var(--ink-2); display:block; margin-bottom:6px; }
.hint{ font-size:12px; color:var(--muted); margin-top:5px; }
.formmsg{ font-size:14px; padding:12px 14px; border-radius:10px; display:none; line-height:1.5; }
.formmsg.ok{ display:block; color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 32%,transparent); }
.formmsg.err{ display:block; color:var(--sev-crit); background:color-mix(in srgb,var(--sev-crit) 12%,transparent); border:1px solid color-mix(in srgb,var(--sev-crit) 32%,transparent); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); background:var(--surface); margin-top:20px; }
.foot__in{ padding:44px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
@media (max-width:760px){ .foot__in{ grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:460px){ .foot__in{ grid-template-columns:1fr; } }
.foot h4{ font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.foot li a{ color:var(--ink-2); font-size:14px; }
.foot__legal{ border-top:1px solid var(--line-soft); padding:20px 0 40px; color:var(--muted); font-size:12.5px; line-height:1.6; }

/* ---------- utilities ---------- */
.grid{ display:grid; gap:16px; }
.g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .g-3{ grid-template-columns:1fr; } .g-2{ grid-template-columns:1fr; } }
.tag{ font-family:var(--f-mono); font-size:11px; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--line-soft); padding:3px 8px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ==========================================================================
   SIGNATURE LAYER — the parts that make this Project Cyber Echelon and not a template.
   Everything below is additive: no existing class is redefined or removed.
   Motif: an escarpment — one hard cap-line over softer bedding, with
   an orange outcrop where the rock is exposed.
   ========================================================================== */

/* --- 1. grain -------------------------------------------------------------
   Pure #000 reads as "unfinished". A film of noise over everything gives the
   black a surface. Fixed + pointer-events:none so it never intercepts input. */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ body::after{ opacity:.03; } }

/* --- 2. strata backdrop ---------------------------------------------------
   Two sets of bedding planes at slightly different angles, offset from each
   other = a fault line. Drop inside any position:relative container. */
.strata-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.strata-bg::before,.strata-bg::after{ content:""; position:absolute; inset:-30% -15%; }
.strata-bg::before{
  background:repeating-linear-gradient(179deg, transparent 0 27px,
    color-mix(in srgb,var(--ink) 6%,transparent) 27px 28px);
  transform:rotate(-1.1deg);
  -webkit-mask-image:radial-gradient(115% 88% at 14% 0%, #000 0%, transparent 68%);
          mask-image:radial-gradient(115% 88% at 14% 0%, #000 0%, transparent 68%);
}
.strata-bg::after{
  background:repeating-linear-gradient(181deg, transparent 0 27px,
    color-mix(in srgb,var(--accent) 9%,transparent) 27px 28px);
  transform:translateX(46%) rotate(1.7deg);
  -webkit-mask-image:radial-gradient(80% 80% at 86% 6%, #000 0%, transparent 66%);
          mask-image:radial-gradient(80% 80% at 86% 6%, #000 0%, transparent 66%);
}

/* --- 3. rimrock rule ------------------------------------------------------
   The signature divider: one hard cap-line with an exposed orange outcrop,
   three softer beds underneath. Heavier sibling of .strata. */
.rimrock{ position:relative; height:24px; margin:6px 0; }
.rimrock::before{ content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg, var(--accent) 0 72px, var(--line) 72px 100%); }
.rimrock::after{ content:""; position:absolute; left:0; right:0; top:7px; height:11px; opacity:.75;
  background:
    linear-gradient(var(--line-soft),var(--line-soft)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--line-soft),var(--line-soft)) 0 5px/62% 1px no-repeat,
    linear-gradient(var(--line-soft),var(--line-soft)) 0 10px/84% 1px no-repeat; }

/* --- 4. panel — bespoke replacement for a generic bordered card ------------
   Square top-left corner + an accent cap-line that runs the full width on
   hover. The squared corner is the tell: no off-the-shelf kit does that. */
.panel{ position:relative; overflow:hidden; padding:22px;
  border:1px solid var(--line); border-radius:3px var(--radius) var(--radius) var(--radius);
  background:linear-gradient(180deg, color-mix(in srgb,var(--raise) 76%,transparent), var(--surface) 52%);
  box-shadow:var(--shadow); transition:border-color .18s, transform .18s; }
.panel::before{ content:""; position:absolute; left:0; top:0; height:2px; width:44px;
  background:var(--accent); transition:width .34s cubic-bezier(.2,.7,.3,1); }
.panel:hover{ border-color:color-mix(in srgb,var(--accent) 26%,var(--line)); transform:translateY(-2px); }
.panel:hover::before{ width:100%; }
.panel__ix{ position:absolute; top:15px; right:17px; font-family:var(--f-mono);
  font-size:9.5px; font-weight:600; letter-spacing:.16em; color:var(--faint); }

/* --- 5. spine — numbered steps threaded on a real line -------------------- */
.spine{ counter-reset:sp; list-style:none; margin:0; padding:0; position:relative; }
.spine::before{ content:""; position:absolute; left:18px; top:30px; bottom:30px; width:1px;
  background:linear-gradient(180deg, var(--accent-line), var(--line) 18%, var(--line) 82%, transparent); }
.spine li{ position:relative; display:grid; grid-template-columns:38px 1fr; gap:18px;
  padding:13px 0; align-items:start; }
.spine li::before{ counter-increment:sp; content:counter(sp,decimal-leading-zero);
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line);
  font-family:var(--f-mono); font-size:11.5px; font-weight:600; color:var(--muted);
  transition:.2s; }
.spine li:hover::before{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.spine li:last-child::before{ border-color:var(--accent-line); color:var(--accent-ink); }
.spine .t{ font-family:var(--f-display); font-weight:700; font-size:16px; padding-top:8px; }
.spine .d{ font-size:14px; color:var(--ink-2); margin-top:5px; line-height:1.55; }

/* --- 6. console — a panel that reads as an instrument, not a form ---------- */
.console{ border:1px solid var(--line); border-radius:3px var(--radius) var(--radius) var(--radius);
  background:var(--surface); box-shadow:var(--shadow-lg); overflow:hidden; }
.console__bar{ display:flex; align-items:center; gap:11px; padding:11px 17px;
  background:linear-gradient(180deg, var(--raise), var(--surface-2));
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); }
.console__bar b{ color:var(--ink-2); font-weight:600; }
.console__dots{ display:flex; gap:5px; flex:none; }
.console__dots i{ width:7px; height:7px; border-radius:50%; background:var(--line); display:block; }
.console__dots i:first-child{ background:var(--accent); }
.console__b{ padding:24px 22px 26px; }

/* --- 7. hatch — "no route exists here" fill ------------------------------- */
.hatch{ background-image:repeating-linear-gradient(45deg, transparent 0 5px,
  color-mix(in srgb,var(--ink) 7%,transparent) 5px 6px); }

/* --- 8. metastrip — mono facts under a heading ---------------------------- */
.metastrip{ display:flex; flex-wrap:wrap; gap:9px 24px; font-family:var(--f-mono);
  font-size:10.5px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); }
.metastrip span{ display:inline-flex; align-items:center; gap:8px; }
.metastrip span::before{ content:""; width:5px; height:5px; border-radius:1px; background:var(--accent); flex:none; }
.metastrip b{ color:var(--ink-2); font-weight:500; }

/* --- 9. refinements to existing primitives -------------------------------- */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--accent); flex:none; }

.btn--primary{ box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 32%,transparent),
  0 12px 26px -16px var(--accent); }
.btn--primary:hover{ box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent),
  0 14px 30px -14px var(--accent); }

.nav a.active{ position:relative; }
.nav a.active::after{ content:""; position:absolute; left:13px; right:13px; bottom:2px; height:1.5px;
  background:var(--accent); border-radius:1px; }
@media (max-width:860px){ .nav a.active::after{ display:none; } }

/* --- 10. reveal on scroll (progressive; content shows if JS never runs) --- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){ .reveal, .reveal.in{ opacity:1; transform:none; transition:none; } }

/* --- 11. nav links must not wrap in the 62px bar at mid widths ----------- */
@media (min-width:861px){ .nav a{ white-space:nowrap; } }

/* --- 12. bug fix: restore .wrap gutters in the footer ---------------------
   .foot__in and .foot__legal each carry a `padding` shorthand, which resets
   the horizontal padding .wrap supplies — so footer text ran to the screen
   edge on every page. Re-state both axes explicitly. */
.foot__in{ padding-inline:var(--pad); padding-block:44px 40px; }
.foot__legal{ padding-inline:var(--pad); padding-block:20px 40px; }