:root {
            --bg: #06111f;
            --card: rgba(10, 22, 39, 0.88);
            --line: rgba(149, 177, 217, 0.16);
            --text: #f5f7fb;
            --muted: #a4b3cb;
            --brand: #28d7b0;
            --brand-2: #52a7ff;
            --shadow: 0 28px 80px rgba(3, 8, 18, 0.42);
            --container: 1240px;
            --radius: 24px;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            color: var(--text);
            font: 16px/1.6 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            background:
                radial-gradient(circle at 20% 0%, rgba(40, 215, 176, 0.18), transparent 28%),
                radial-gradient(circle at 85% 8%, rgba(82, 167, 255, 0.16), transparent 25%),
                linear-gradient(180deg, #06111f 0%, #0b1627 42%, #08111d 100%);
        }
        a { color: inherit; text-decoration: none; }
        .container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
        .topbar {
            position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px);
            background: rgba(6, 17, 31, 0.84); border-bottom: 1px solid var(--line);
        }
        .topbar-inner {
            min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0;
        }
        .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: 0.02em; }
        .brand-mark {
            width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
            background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #04111f; font-weight: 900;
        }
        .brand small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
        .nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
        .nav a:hover { color: var(--text); }
        .button {
            border: 0; border-radius: 999px; padding: 14px 22px; font-weight: 800; font-size: 14px;
            display: inline-flex; align-items: center; justify-content: center; color: #04111f;
            background: linear-gradient(135deg, var(--brand), #5ef1d0);
            cursor: pointer;
        }
        .button-secondary {
            background: rgba(255,255,255,0.08);
            color: var(--text);
            border: 1px solid var(--line);
        }
        .hero { padding: 48px 0 24px; }
        .hero-card, .card {
            background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
        }
        .hero-card, .card { padding: 32px; }
        .eyebrow {
            display: inline-flex; gap: 10px; align-items: center; border-radius: 999px; padding: 8px 14px;
            background: rgba(40, 215, 176, 0.10); border: 1px solid rgba(40, 215, 176, 0.24);
            color: var(--brand); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
        }
        h1, h2, h3, p { margin-top: 0; }
        h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: -0.05em; margin: 18px 0 16px; }
        h2 { font-size: 24px; margin-bottom: 10px; }
        .lead, .helper { color: var(--muted); }
        .content { display: grid; gap: 16px; padding-bottom: 56px; }
        .footer { padding: 24px 0 70px; color: var(--muted); }
        .footer-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
        .footer-links a { color: var(--text); font-size: 14px; }
        .disclosure-block {
            margin-top: 24px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,0.03);
            border: 1px solid rgba(149, 177, 217, 0.12);
        }
        .disclosure-block h3 { margin-bottom: 10px; }
        .disclosure-block p { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
        .cookie-banner {
            position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 60; display: none;
            padding: 18px; border-radius: 22px; background: rgba(8, 16, 28, 0.97);
            border: 1px solid rgba(149, 177, 217, 0.18); box-shadow: 0 24px 50px rgba(0,0,0,0.35);
        }
        .cookie-banner.show { display: block; }
        .cookie-inner { display: flex; gap: 18px; align-items: center; justify-content: space-between; }
        .cookie-copy p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
        .cookie-status {
            display: none; margin-top: 10px; padding: 10px 12px; border-radius: 14px;
            background: rgba(82, 167, 255, 0.08); border: 1px solid rgba(82, 167, 255, 0.18);
            color: #c6e3ff; font-size: 13px;
        }
        .cookie-banner.manage-mode .cookie-status { display: block; }
        .cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; }
        @media (max-width: 840px) {
            .topbar-inner { flex-direction: column; align-items: start; }
            .hero-card, .card { padding: 22px; }
            .cookie-inner { flex-direction: column; align-items: start; }
        }