/* CyberGuard — Privacy / legal marketing pages.
   Extracted for cacheable static delivery. */

:root {
      --bg: #030b16;
      --panel: rgba(9, 22, 40, 0.88);
      --panel-border: rgba(75, 220, 255, 0.16);
      --text: #eef6ff;
      --muted: #8fa8be;
      --cyan: #4bdcff;
      --blue: #3b82f6;
      --radius: 18px;
      --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(ellipse 90% 55% at 12% 8%, rgba(59, 130, 246, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 45% at 88% 78%, rgba(75, 220, 255, 0.1), transparent 52%),
        var(--bg);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--cyan); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .wrap { max-width: 880px; margin: 0 auto; padding: 28px 20px 64px; }
    .topnav {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      flex-wrap: wrap; margin-bottom: 28px;
    }
    .brand {
      display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none;
    }
    .brand strong { display: block; letter-spacing: .04em; font-size: 13px; }
    .brand em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
    .nav-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 13px;
      text-decoration: none !important; border: 1px solid transparent;
    }
    .btn-ghost {
      color: #e2e8f0 !important;
      background: rgba(15, 30, 50, 0.7);
      border-color: rgba(75, 220, 255, 0.22);
    }
    .btn-primary {
      color: #03111f !important;
      background: linear-gradient(135deg, #4bdcff, #3b82f6);
    }
    .panel {
      background: var(--panel);
      border: 1px solid var(--panel-border);
      border-radius: var(--radius);
      padding: 28px 26px 32px;
      box-shadow: 0 24px 70px rgba(0,0,0,.35);
    }
    .eyebrow {
      color: var(--cyan); font-size: 12px; font-weight: 800;
      letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px;
    }
    h1 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 36px); letter-spacing: -0.02em; }
    .lede { color: var(--muted); margin: 0 0 22px; font-size: 15px; }
    .meta {
      display: flex; flex-wrap: wrap; gap: 10px 18px;
      color: var(--muted); font-size: 13px; margin-bottom: 26px;
      padding-bottom: 18px; border-bottom: 1px solid rgba(75, 220, 255, 0.12);
    }
    h2 {
      margin: 28px 0 10px; font-size: 18px; color: #fff;
      letter-spacing: -0.01em;
    }
    h2:first-of-type { margin-top: 8px; }
    p, li { color: #c9d9ea; font-size: 14.5px; }
    p { margin: 0 0 12px; }
    ul { margin: 0 0 14px; padding-left: 1.2em; }
    li { margin: 0 0 8px; }
    .note {
      margin-top: 24px; padding: 14px 16px; border-radius: 12px;
      background: rgba(59, 130, 246, 0.08);
      border: 1px solid rgba(59, 130, 246, 0.2);
      color: #b7cfe6; font-size: 13px;
    }
    .subnav {
      display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px;
    }
    .subnav a {
      padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
      border: 1px solid rgba(75, 220, 255, 0.18);
      background: rgba(8, 18, 32, 0.7);
      color: #dbeafe; text-decoration: none !important;
    }
    .subnav a.active {
      border-color: rgba(75, 220, 255, 0.45);
      background: rgba(75, 220, 255, 0.12);
      color: #fff;
    }
    footer {
      margin-top: 28px; text-align: center; color: var(--muted); font-size: 12px;
    }
    footer .links { margin: 10px 0; }
    footer .links a { margin: 0 8px; }