/* ==========================================================================
   sigsec.tech — design system stylesheet ("premium dark")
   Tokens/rules per docs/superpowers/specs/2026-07-12-website-redesign-design.md
   Shared by: index, services, about, contact, blog, fingerprint.
   Not used by admin.html (loads css/style.css) or css/cards.css (retired).

   Hard requirement: no font-loading directives, no reference to any
   external host. System fonts only — no Google Fonts, no CDN, no
   third-party request of any kind. A security firm's site should phone
   no one.
   ========================================================================== */

:root {
  /* palette — cold, no warmth anywhere */
  --bg: #050506;
  --bg-rgb: 5, 5, 6;
  --panel: #121214;
  --line: #1f1f23;
  --line-strong: #2a2a30;
  --line-btn: #33333a;
  --dim: #6e6e76;     /* decorative / large text only — 4.03:1, below AA for body copy */
  --dim-fg: #9a9aa2;  /* readable secondary text — 7.29:1 on --bg, clears AA */
  --body: #8a8a92;
  --text: #d6d6d6;
  --text-bright: #ececec;
  --accent: #e02020;
  --ghost: #2e2e34;   /* footer whisper (barely-visible easter-egg quote) */
  --ghost-2: #4a4a52; /* faint detail text on the fingerprint page (e.g. coordinates) */

  /* layout */
  --gutter: 28px;
  --nav-h: 74px;      /* measured height of the fixed .nav (18px pad + boxed
                         cta + 1px border) — anything that starts at the top
                         of the page must clear this or it renders underneath */

  /* type — two voices, zero webfonts */
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --display: 'Arial Black', Arial, sans-serif;
}

/* ==========================================================================
   reset + base
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

ul, ol { list-style: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* default links resolve to the accent, not browser blue — "cold, no warmth,
   one loud color" applies to every corner of the page, not just headlines */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

::selection {
  background: var(--accent);
  color: var(--bg);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* generic vertical rhythm for an ordinary page section. .strip / .ticker /
   .cta-block carry their own padding and do NOT take this class. */
.section {
  padding: 96px 0;
}

/* ==========================================================================
   nav
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
}

.nav-logo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--accent);
}
.nav-logo:hover { text-decoration: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim-fg);
}

.nav-links a {
  color: var(--dim-fg);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--text-bright); }

.nav-links a.nav-cta {
  color: var(--text);
  border: 1px solid var(--line-btn);
  padding: 8px 16px;
}
.nav-links a.nav-cta:hover {
  color: var(--text-bright);
  border-color: var(--accent);
}

/* ==========================================================================
   hamburger / mobile menu
   ========================================================================== */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 200;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(78vw, 320px);
  background: var(--panel);
  border-left: 1px solid var(--line-strong);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 90px 32px 32px;
}
.mobile-menu.active { transform: translateX(0); }

.mobile-menu a {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}
.mobile-menu a:hover { color: var(--accent); }

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(var(--bg-rgb), 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   hero
   ========================================================================== */

/* the nav is position:fixed, so the hero sits at y=0 and its content would
   render UNDERNEATH the nav bar without this top padding. --nav-h is the
   clearance; the rest is breathing room. flex + align-items:center then
   vertically centres .hero-content in the remaining 92vh. */
.hero {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 76px) 0 110px;
}

/* dot-field canvas sits behind hero content; content wrapper must be
   position:relative so it stacks above it. #dotfield is the id used by
   js/dotfield.js (later task) — .hero-content is the established wrapper
   class (matches css/style.css convention) for anything placed on top. */
#dotfield {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* .hero is a flex container, so this flex item must be told to take the full
   line — otherwise it shrink-wraps its text and the container's max-width
   /gutter centring stops working. */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.kicker {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

/* ==========================================================================
   display type — one scale, three steps

     .page-title    h1  — the page's single shout
     .section-title h2  — a section headline
     .card-title    h3  — a card headline

   All three are the same voice (--display, uppercase, heavy, tight tracking,
   --text-bright); only size, tracking and leading step down. Tracking has to
   loosen as the type shrinks — -2px on 16px text would collide the glyphs.
   ========================================================================== */

h1,
.page-title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: -2px;
  line-height: 1.02;
  color: var(--text-bright);
  overflow-wrap: break-word;
}

.section-title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -1px;
  line-height: 1.06;
  color: var(--text-bright);
  overflow-wrap: break-word;
}

.card-title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: -0.2px;
  line-height: 1.25;
  color: var(--text-bright);
  overflow-wrap: break-word;
  margin-bottom: 10px;
}

.accent { color: var(--accent); }

/* the signature motif: a redacted word. background and color are the same
   token so the block is genuinely unreadable — no contrast — while the
   text underneath stays real, selectable text (not an image, not blanked). */
.redact {
  background: var(--line);
  color: var(--line);
  padding: 0 10px;
}

/* ==========================================================================
   body copy — the murmur half of the two voices

   --body is the token the spec assigns to running copy (--dim is decorative /
   large-only, --dim-fg is for real secondary text like labels and nav).

     .muted      bare colour utility
     .lead       the one mono setup sentence under a title (measure + rhythm)
     .note       a trailing mono line under a block
     .card-body  copy inside a .card (one step down in size)
     .stack      a run of short lines that need to breathe (the "who" block)
   ========================================================================== */

.muted,
.lead,
.note,
.card-body {
  color: var(--body);
}

/* ~660px keeps a mono line under roughly 75 characters — past that the eye
   loses its place on the return sweep. */
.lead {
  max-width: 660px;
  margin-top: 22px;
}

/* when a lead is followed straight by content, it needs real separation, not
   paragraph spacing */
.lead + .grid {
  margin-top: 44px;
}

.note {
  margin-top: 28px;
}

.card-body {
  font-size: 14px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================================
   buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: transparent;
  color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-btn);
}
.btn-ghost:hover {
  color: var(--text-bright);
  border-color: var(--accent);
}

/* one or more buttons closing out a block. wraps on narrow screens instead of
   pushing the layout sideways. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* ==========================================================================
   cards
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* two-column variant — balanced 50/50 (e.g. contact: reach-us + form).
   Collapses to a single column at the mobile breakpoint below. */
.grid-2 { grid-template-columns: 1fr 1fr; }

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  padding: 28px;
  transition: border-color 0.15s ease;
}

/* 14px accent corner-bracket, top-left. Corners stay sharp everywhere in
   this file, no transform/translateY/float on hover — spec explicitly
   rejects hover-float; the border sharpening to accent IS the hover state. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}

.card:hover { border-color: var(--accent); }

.card-num {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ==========================================================================
   breadcrumb
   ========================================================================== */

.breadcrumb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim-fg);
  margin-bottom: 14px;
}
.breadcrumb a { color: var(--dim-fg); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-bright); }
/* the current page name inside a breadcrumb takes the .accent utility
   (color: var(--accent)) already defined above */

/* ==========================================================================
   strip / ticker / cta-block
   ========================================================================== */

.strip {
  padding: 56px var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.ticker {
  padding: 48px var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--body);
}

/* .strip's border-bottom lands directly on .ticker's border-top and the two
   render as a doubled 2px hairline. Collapse them to one — both components
   keep their own border when they stand alone. */
.strip + .ticker {
  border-top: none;
}

/* the ticker headline is display type but deliberately a size below a section
   headline — it's a running list, not a statement. Takes .section-title too. */
.ticker-title {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: -0.5px;
  line-height: 1.25;
}

/* live-demo strip: a label above a value the visitor's own browser handed over */
.data-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--dim-fg);
}

/* break-all so a long user-agent string wraps instead of forcing the page to
   scroll sideways on a phone */
.data-value {
  font-family: var(--mono);
  color: var(--text-bright);
  word-break: break-all;
}

.cta-block {
  text-align: center;
  padding: 80px var(--gutter);
  border-top: 1px solid var(--line);
}
.cta-block .btn { margin-top: 24px; }

/* ==========================================================================
   footer
   ========================================================================== */

footer {
  padding: 32px var(--gutter);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim-fg);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.whisper { color: var(--ghost); }

/* ==========================================================================
   form controls
   ========================================================================== */

input,
textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s ease;
}
input::placeholder,
textarea::placeholder { color: var(--dim-fg); }
input:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 32, 32, 0.25);
}

/* ==========================================================================
   focus-visible — on-brand keyboard focus ring for interactive elements
   that otherwise fall back to the browser default (which clashes with the
   palette). Form fields keep their own focus treatment above.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.hamburger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .grid, .grid-2 { grid-template-columns: 1fr; }

  /* same rhythm, less of it — the desktop padding eats a phone screen */
  .section { padding: 72px 0; }
  .hero { padding: calc(var(--nav-h) + 48px) 0 72px; }
}

/* ==========================================================================
   motion guard
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}