/* shared.css — styles used by both privacy.html and 404.html.
   The landing page (index.html) keeps its own inline CSS. */

:root {
  --bg: #08060c;
  --line: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.12);
  --ink: #f4f1f8;
  --ink-2: #b9b3c6;
  --ink-3: #807890;
  --m1: #cc03f9;
  --grad: linear-gradient(135deg, #cc03f9 0%, #8800ff 100%);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: rgba(204,3,249,0.35); color: white; }

/* ─── NAV ─────────────────────────────────────────────── */
nav.top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(8,6,12,0.35);
  border-bottom: 1px solid var(--line);
}
nav.top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(204,3,249,0) 0%,
    rgba(204,3,249,0.55) 35%,
    rgba(136,0,255,0.55) 65%,
    rgba(136,0,255,0) 100%);
  box-shadow: 0 0 6px rgba(204,3,249,0.45);
  pointer-events: none;
}
nav.top .nav-wrap {
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
nav.top .logo { height: 40px; width: auto; }
nav.top ul {
  display: flex; gap: 28px; list-style: none; margin: 0; padding: 0;
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
}
nav.top ul a { padding: 6px 2px; transition: color .2s; }
nav.top ul a:hover {
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
}
nav.top .cta {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
  padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink); text-transform: uppercase;
  transition: border-color .2s, color .2s;
}
nav.top .cta:hover {
  border-color: rgba(204,3,249,0.6);
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
}

/* ─── FOOTER ───────────────────────────────────────────── */
footer {
  position: relative;
  padding: 24px 0;
  color: var(--ink-3);
  font-size: 13px;
  border-top: 1px solid var(--line);
}
footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(204,3,249,0) 0%,
    rgba(204,3,249,0.55) 35%,
    rgba(136,0,255,0.55) 65%,
    rgba(136,0,255,0) 100%);
  box-shadow: 0 0 6px rgba(204,3,249,0.45);
  pointer-events: none;
}
footer .row {
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px;
}
footer .copyr { font-family: var(--mono); font-size: 12px; }
footer .links { display: flex; gap: 28px; }
footer .links a {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color .2s;
}
footer .links a:hover {
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
}

/* ─── SKIP LINK ────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px; left: 8px; z-index: 100;
  padding: 10px 16px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--m1);
  border-radius: 6px;
  font-family: var(--mono); font-size: 12.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: top .2s;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--m1);
  outline-offset: 2px;
}

/* ─── RESPONSIVE + REDUCED-MOTION ──────────────────────── */
@media (max-width: 700px) {
  nav.top ul { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}