/*
 * OSINT4ALL 2026 product UI layer
 * Final cascade layer intentionally lives after the retired compatibility rules.
 * It normalizes the public product around the official gold/green/graphite brand.
 */
:root {
  --o4-bg: #03060b;
  --o4-bg-2: #07080d;
  --o4-graphite: #121318;
  --o4-graphite-2: #191a20;
  --o4-graphite-3: #22232a;
  --o4-ink: #2a2a30;
  --o4-deep: #111318;
  --o4-accent: #c8b88d;
  --o4-accent-strong: #e1d1a5;
  --o4-silver: #adb2b6;
  --o4-silver-2: #d8dcdf;
  --o4-white: #f5f6f7;
  --o4-muted: #9ea4aa;
  --o4-line: rgba(173, 178, 182, 0.16);
  --o4-line-strong: rgba(173, 178, 182, 0.32);
  --o4-line-soft: rgba(173, 178, 182, 0.08);
  --o4-glow: rgba(200, 184, 141, 0.34);
  --o4-success: #86c89d;
  --o4-radius: 10px;
  --o4-radius-lg: 14px;
  --o4-radius-xl: 18px;
  --o4-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
  --o4-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.26);
  --bg: var(--o4-bg);
  --panel: var(--o4-graphite);
  --panel-2: var(--o4-graphite-2);
  --panel-strong: var(--o4-ink);
  --brand: var(--o4-accent);
  --brand-strong: var(--o4-accent-strong);
  --text: var(--o4-silver-2);
  --text-strong: var(--o4-white);
  --text-muted: var(--o4-muted);
  --line: var(--o4-line);
  --line-strong: var(--o4-line-strong);
  --radius: var(--o4-radius);
  --radius-lg: var(--o4-radius-lg);
  --shadow: var(--o4-shadow-soft);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--o4-silver-2);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  background:
    radial-gradient(circle at 78% 8%, rgba(200, 184, 141, 0.32), transparent 30rem),
    radial-gradient(circle at 16% 0%, rgba(173, 178, 182, 0.09), transparent 23rem),
    linear-gradient(180deg, #05060a 0%, #03060b 44%, #08080d 100%);
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(173, 178, 182, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 178, 182, 0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 78%);
}

body.nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #e1d1a5;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

a:hover,
a:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-kicker,
.panel-label,
.card-meta,
.feature-card-meta,
.header-nav-link,
.button {
  font-family: "Oxanium", "Montserrat", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-head h2,
.section-title h1,
.section-title h2,
.card h1,
.card h2,
.card h3 {
  margin: 0;
  color: var(--o4-white);
  line-height: 1.08;
  letter-spacing: 0;
}

p {
  margin-top: 0;
}

p:last-child,
li:last-child {
  margin-bottom: 0;
}

.container {
  width: min(100%, 1400px);
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: 34px;
}