/* ════════════════════════════════════════════════════════════════════
   base.css — design tokens, reset, typography, utilities
   v4.0 — mirrors the usxcyber.com design system (dark / Outfit / DM Sans)
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand (identical to usxcyber.com) */
  --cida:      #44d7b6;            /* brand teal */
  --principle: #4fabbd;            /* CTA blue */
  --deep:      #006e7b;            /* anchor panels */
  --alert:     #f1754a;            /* warning orange */

  /* Surfaces */
  --bg:        #07080B;
  --bg2:       #0C0F14;
  --bg3:       #111620;
  --surface:   #161D2A;
  --surface-2: #1B2433;

  /* Text */
  --text:      #EEF2F8;
  --muted:     #9BB8CC;
  --faint:     rgba(255,255,255,.04);

  /* Lines */
  --border:      rgba(68,215,182,.13);
  --border-soft: rgba(255,255,255,.08);

  /* Status (scorer) */
  --ok:      #44d7b6;
  --warn:    #e8c468;
  --danger:  #f1754a;
  --crit:    #e25d5d;

  /* Type */
  --font-d: 'Outfit', sans-serif;
  --font-b: 'DM Sans', sans-serif;

  /* Layout */
  --max-w: 1200px;
  --nav-h: 68px;
  --r:     6px;
  --r-lg:  10px;
  --ease:  cubic-bezier(.4, 0, .2, 1);
  --tr:    all .2s var(--ease);

  --shadow-glow-teal: 0 0 28px rgba(68,215,182,.35);
  --shadow-glow-blue: 0 0 32px rgba(79,171,189,.45);
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  font-size: 15.5px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* dot-grid texture, same as the main site */
  background-image: radial-gradient(rgba(68,215,182,.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
img    { max-width: 100%; height: auto; display: block; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
strong { color: var(--text); font-weight: 600; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
hr     { border: 0; border-top: 1px solid var(--border-soft); }

/* ── Headings ──────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-d);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--text);
}
h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 18px; letter-spacing: -.025em; }
h2 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 14px; }
h3 { font-size: 20px; margin-bottom: 8px; }
h4 { font-size: 16px; margin-bottom: 6px; }
h1 em, h2 em { font-style: normal; color: var(--cida); }

p { margin-bottom: 12px; }
p:last-child { margin-bottom: 0; }

/* ── Eyebrow / lead ────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-d);
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cida);
  margin-bottom: 16px;
}
.eyebrow-on-dark { color: var(--cida); }
.lead {
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 64ch;
}

/* ── Utilities ─────────────────────────────────────────────────────── */
.muted  { color: var(--muted); }
.small  { font-size: 13px; }
.center { text-align: center; }
.hidden { display: none !important; }
.error-text { color: var(--alert); font-size: 13px; margin: 4px 0 0; }

.row   { display: flex; align-items: center; gap: 12px; }
.row.top { align-items: flex-start; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 14px; }

.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.cols-2 { grid-template-columns: 1fr; }
}

/* ── Selection / focus ─────────────────────────────────────────────── */
::selection { background: rgba(68,215,182,.28); }
:focus-visible {
  outline: 2px solid var(--cida);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Scrollbar (webkit) ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: #2a3548; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4a64; }