/* ============================================================
     DESIGN TOKENS
     Brand palette (TSG red + obsidian) taken from the existing
     visual identity. Typography, motion, radius and spacing all
     resolve from the custom properties below.
     ============================================================ */

  html {
    --color-bg:        #0a0c0f;
    --color-surface:   #111417;
    --color-surface-2: #171b20;
    --color-primary:   #c0392b;
    --color-accent:    #e2503c;
    --color-text:      #ffffff;
    --color-muted:     rgba(255,255,255,0.58);
    --color-dim:       rgba(255,255,255,0.50);
    --color-border:    rgba(255,255,255,0.09);

    --font-heading: 'Bebas Neue', sans-serif;
    --font-drama:   'Barlow Condensed', sans-serif;
    --font-body:    'Barlow', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --head-tracking: 0.045em;
    --head-leading:  0.92;

    --motion-duration: 0.55;
    --motion-ease:     power2.out;
    --motion-stagger:  0.08;
    --motion-shift:    26px;

    --radius-card: 2px;
    --radius-pill: 3px;

    --section-py:    6.5rem;
    --content-max-w: 76rem;
  }

  /* ---------- BASE ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: var(--color-primary); color: #fff; }

  h1, h2, h3, .h {
    font-family: var(--font-heading);
    letter-spacing: var(--head-tracking);
    line-height: var(--head-leading);
    font-weight: 700;
  }
  h1, h2, h3, .h { font-weight: 400; }

  .mono { font-family: var(--font-mono); }
  .drama { font-family: var(--font-drama); }

  section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
  @media (max-width: 640px) { section { padding-top: 4rem; padding-bottom: 4rem; } }
  .wrap { max-width: var(--content-max-w); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
  @media (min-width: 768px) { .wrap { padding-left: 2.5rem; padding-right: 2.5rem; } }

  /* ---------- GLOBAL TEXTURE ---------- */
  #noise {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    opacity: 0.05; mix-blend-mode: overlay;
  }
  #grid-texture {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
    background-size: 64px 64px;
  }
  #scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0%;
    background: var(--color-primary); z-index: 80;
    box-shadow: 0 0 12px var(--color-primary);
  }

  /* ---------- EYEBROW ---------- */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--color-primary);
    display: inline-flex; align-items: center; gap: 12px;
  }
  .eyebrow::before {
    content: ''; width: 28px; height: 1px; background: var(--color-primary); display: block;
  }

  /* ---------- BUTTONS ---------- */
  .btn {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; overflow: hidden;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
    transition: transform 300ms cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 300ms ease;
    border: 1px solid var(--color-primary);
    color: #fff; background: transparent;
  }
  .btn > span.fill {
    position: absolute; inset: 0; background: var(--color-primary);
    transform: translateX(-101%); transition: transform 420ms cubic-bezier(0.65,0,0.35,1); z-index: 0;
  }
  .btn > span.lbl, .btn > i { position: relative; z-index: 1; }
  .btn:hover { transform: scale(1.025) translateY(-1px); box-shadow: 0 10px 34px rgba(192,57,43,0.24); }
  .btn:hover > span.fill { transform: translateX(0); }
  .btn.solid { background: var(--color-primary); }
  .btn.solid > span.fill { background: #fff; }
  .btn.solid:hover > span.lbl, .btn.solid:hover > i { color: var(--color-primary); }
  .btn.ghost { border-color: var(--color-border); }
  .btn.ghost > span.fill { background: rgba(255,255,255,0.08); }

  /* ---------- CARDS ---------- */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    transition: transform 320ms cubic-bezier(0.25,0.46,0.45,0.94), border-color 320ms ease, background 320ms ease;
    position: relative; overflow: hidden;
  }
  .card::after {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0;
    background: var(--color-primary); transition: width 420ms cubic-bezier(0.65,0,0.35,1);
  }
  .card:hover { transform: translateY(-5px); border-color: rgba(192,57,43,0.45); background: var(--color-surface-2); }
  .card:hover::after { width: 100%; }

  .hairline { border-top: 1px solid var(--color-border); }

  /* ---------- CORNER BRACKETS ---------- */
  .brackets::before, .brackets::after {
    content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
    border-color: var(--color-primary); opacity: 0.6;
  }
  .brackets::before { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
  .brackets::after { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }

  /* ---------- NAV ---------- */
  #navbar {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 70; width: calc(100% - 24px); max-width: 1340px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    transition: background 420ms ease, border-color 420ms ease, box-shadow 420ms ease, padding 420ms ease, max-width 420ms ease;
    padding: 16px 28px;
  }
  #navbar.scrolled {
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-color: var(--color-border);
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
    max-width: 1220px; padding: 12px 24px;
  }
  @media (max-width: 480px) {
    #navbar { padding: 12px 16px; }
    #navbar.scrolled { padding: 10px 14px; }
  }
  .navlink {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--color-muted); text-decoration: none;
    white-space: nowrap;
    transition: color 220ms ease, transform 220ms ease; position: relative;
  }
  .navlink:hover { color: #fff; transform: translateY(-1px); }
  .navlink::after {
    content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
    background: var(--color-primary); transition: width 280ms ease;
  }
  .navlink:hover::after { width: 100%; }

  .logo-mark {
    height: 56px; width: auto; flex-shrink: 0; display: block;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,0.7));
  }
  .logo-mark.lg { height: 76px; }
  @media (max-width: 640px) { .logo-mark { height: 44px; } .logo-mark.lg { height: 58px; } }

  #mobile-menu { position: fixed; inset: 0; z-index: 69; background: var(--color-bg); display: none; }
  #mobile-menu.open { display: flex; }

  /* ---------- HERO ---------- */
  #hero { padding: 0; min-height: 100dvh; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
  #hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.08); filter: saturate(0.72) contrast(1.06) brightness(0.72);
  }
  .hero-veil {
    position: absolute; inset: 0;
    background:
      linear-gradient(to top, var(--color-bg) 2%, rgba(10,12,15,0.82) 34%, rgba(10,12,15,0.42) 68%, rgba(10,12,15,0.72) 100%),
      linear-gradient(to right, rgba(10,12,15,0.94) 0%, rgba(10,12,15,0.45) 52%, rgba(10,12,15,0.2) 100%);
  }
  .scanlines {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
    background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0px, rgba(255,255,255,0.028) 1px, transparent 1px, transparent 4px);
  }
  .contact-veil {
    background: linear-gradient(to bottom, var(--color-bg) 0%, rgba(10,12,15,0.86) 40%, #000 100%);
  }

  /* ---------- 404 PAGE ---------- */
  .page-404 { min-height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center; }
  .code-404 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--color-primary); }
  .logo-404 { height: 64px; width: auto; margin: 0 auto 28px; display: block; }
  .title-404 { margin-top: 20px; font-size: 44px; }
  @media (min-width: 768px) { .title-404 { font-size: 56px; } }
  .sub-404 { margin-top: 12px; font-size: 18px; color: var(--color-muted); }
  .desc-404 { margin-top: 24px; color: var(--color-muted); max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.6; }
  .actions-404 { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
  #radar { position: absolute; right: -120px; bottom: -140px; width: 620px; height: 620px; opacity: 0.14; pointer-events: none; }
  @media (max-width: 900px) { #radar { width: 420px; height: 420px; right: -160px; bottom: -180px; opacity: 0.1; } }
  .sweep { transform-origin: 300px 300px; animation: sweep 5.5s linear infinite; }
  @keyframes sweep { to { transform: rotate(360deg); } }

  .hero-line-1 { font-size: clamp(31px, 5.1vw, 70px); }
  .hero-line-2 { font-size: clamp(31px, 5.1vw, 70px); color: var(--color-primary); }
  @media (max-width: 480px) {
    .hero-line-1, .hero-line-2 { font-size: 28px; }
  }

  /* ---------- TICKER ---------- */
  .ticker-track { display: flex; gap: 3.5rem; animation: ticker 42s linear infinite; white-space: nowrap; }
  @keyframes ticker { to { transform: translateX(-50%); } }
  .ticker-item { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-dim); display: flex; align-items: center; gap: 12px; }

  /* ---------- THREAT BARS ---------- */
  .threat-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding: 1.4rem 0; border-top: 1px solid var(--color-border); align-items: start; }
  @media (min-width: 768px) { .threat-row { grid-template-columns: 128px 260px 1fr; gap: 2rem; } }
  .sev { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; padding: 5px 10px; text-transform: uppercase; display: inline-block; border: 1px solid; }
  .sev-high { color: var(--color-accent); border-color: rgba(226,80,60,0.5); background: rgba(192,57,43,0.1); }
  .sev-med { color: #d9a441; border-color: rgba(217,164,65,0.4); background: rgba(217,164,65,0.08); }
  .sev-man { color: #7fb3a8; border-color: rgba(127,179,168,0.35); background: rgba(127,179,168,0.07); }

  /* ---------- STEP RAIL ---------- */
  .rail { position: relative; padding-left: 2.25rem; }
  .rail::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--color-border); }
  .rail-node { position: relative; }
  .rail-node::before {
    content: ''; position: absolute; left: -2.25rem; top: 8px; width: 7px; height: 7px;
    background: var(--color-primary); transform: translateX(-3px); box-shadow: 0 0 0 4px var(--color-bg);
  }

  /* ---------- LANG TOGGLE ---------- */
  .lang-btn {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; padding: 6px 9px;
    color: var(--color-dim); background: transparent; border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); cursor: pointer; transition: all 200ms ease;
  }
  .lang-btn[aria-current="true"] { color: #fff; border-color: var(--color-primary); background: rgba(192,57,43,0.16); }
  .lang-btn:hover { color: #fff; }

  /* ---------- MISC ---------- */
  .stat-num { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em; }
  .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-dim); }
  .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
  .reveal { opacity: 0; }
  img { user-select: none; }