/* =====================================================================
   SKIN: NEON GRID — terminal dark, electric cyan + magenta, engineered
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Barlow:wght@400;500;600&family=Share+Tech+Mono&display=swap');

:root {
  --font-display: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -.015em;

  --bg: #05070d;
  --surface: #0b1018;
  --surface-2: #121a26;
  --ink: #e6f2f7;
  --ink-soft: #93a7b8;
  --ink-faint: #5d7488;
  --line: #16202e;
  --line-strong: #22303f;

  --accent: #22d3ee;
  --accent-hover: #4ce0f7;
  --accent-ink: #04121a;
  --accent-soft: #157c8c;
  --accent-wash: rgba(34,211,238,.10);
  --accent-2: #f43f8e;

  --danger: #ff5d7a; --danger-wash: rgba(255,93,122,.11); --danger-ink: #ffa6b6;
  --ok: #3ddc97; --ok-wash: rgba(61,220,151,.11); --ok-ink: #93f0c6;

  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 3px;
  --radius-btn: 2px;
  --shadow-lg: 0 0 0 1px rgba(34,211,238,.22), 0 26px 60px -22px rgba(0,0,0,.9);
  --shadow-accent: 0 0 22px -4px rgba(34,211,238,.55);
  --scrim: .78;
  --grain: .04;
  --grain-blend: screen;
  --logo-filter: grayscale(1) brightness(2.4) contrast(.75);
  --map-filter: invert(.9) hue-rotate(175deg) saturate(.55) contrast(1.05);
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2393a7b8' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(34,211,238,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
}
.wrap, .wrap--narrow, .wrap--wide, .site-head, .hero { position: relative; z-index: 1; }

.marker, .eyebrow, .pcard__cat, .svc__no { font-family: var(--font-mono); color: var(--accent); }
h1, h2, h3 { text-transform: none; }
.hero__title { text-shadow: 0 0 42px rgba(34,211,238,.24); }
.btn--primary { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-family: var(--font-mono); }
.btn--ghost { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-family: var(--font-mono); }
.btn--ghost:hover { box-shadow: 0 0 18px -4px rgba(34,211,238,.5); }
.pcard { border-color: var(--line-strong); }
.pcard:hover { border-color: var(--accent); }
.pcard__badge { background: var(--accent-2); color: #fff; }
.svc:hover::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.svc__ico { border: 1px solid var(--accent-soft); background: rgba(34,211,238,.06); border-radius: 2px; }
.stat b { color: var(--accent); text-shadow: 0 0 26px rgba(34,211,238,.4); }
.stats, .svc-grid, .logos { border-color: var(--line-strong); }
.site-foot { background: #03050a; }
.cta { background: linear-gradient(135deg, #0a1520, #05070d); border: 1px solid var(--accent-soft); }
.cta h2 { color: var(--ink); } .cta p { color: var(--ink-soft); }
.ticker { background: #03050a; color: var(--ink-soft); }
.topbar { background: #03050a; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.filter.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }