* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* Deepened from #080A0F for more velvet */
            --bg-primary: #05070C;
            --bg-elevated: #0A0D14;
            --mint: #6EE7B7;
            --mint-deep: #4FD4A4;
            --ice: #7DD3FC;
            --text-primary: #E8ECF2;
            --text-secondary: #B5BFD0;
            --text-muted: #8793A8;
            --text-whisper: #5E6678;
            --border: #161C2B;
            --hairline: rgba(232, 236, 242, 0.12);
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            font-family: 'Instrument Sans', system-ui, sans-serif;
            font-weight: 400;
            line-height: 1.6;
            font-feature-settings: "ss01", "liga", "tnum";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ---------- Materiality layers (sit behind everything) ---------- */

        /* Soft centered ambient glow — barely there, adds lift */
        .ambient-glow {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                radial-gradient(ellipse 70% 50% at 50% 35%, rgba(110, 231, 183, 0.05) 0%, transparent 55%),
                radial-gradient(ellipse 80% 60% at 50% 90%, rgba(125, 211, 252, 0.035) 0%, transparent 60%);
        }

        /* Radial vignette — darkens corners to frame the composition */
        .vignette {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 3;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
        }

        /* Fine grain overlay — adds tactile materiality, like printed matter */
        .grain {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 4;
            opacity: 0.06;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        }

        /* ---------- Vortex (refined) ---------- */
        @keyframes vortexSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Slow breathing for the center core */
        @keyframes breathe {
            0%, 100% { opacity: 0.18; transform: scale(1); }
            50%      { opacity: 0.32; transform: scale(1.06); }
        }

        .vortex-bg {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 900px;
            height: 900px;
            pointer-events: none;
            z-index: 1;
        }

        .vortex-bg svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        /* Slower than the original — 120s / 90s reads as intentional, not mechanical */
        .vortex-outer      { transform-origin: 400px 400px; animation: vortexSpin 120s linear infinite; }
        .vortex-outer-glow { transform-origin: 400px 400px; animation: vortexSpin 120s linear infinite; }
        .vortex-inner      { transform-origin: 400px 400px; animation: vortexSpin  90s linear infinite reverse; }
        .vortex-inner-glow { transform-origin: 400px 400px; animation: vortexSpin  90s linear infinite reverse; }

        /* A soft breathing core behind the rings — feels like the eye of a storm */
        .vortex-core {
            transform-origin: 400px 400px;
            animation: breathe 8s ease-in-out infinite;
        }

        /* ---------- Particles ---------- */
        #particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        /* ---------- Composition ---------- */
        .page-wrapper {
            position: relative;
            z-index: 5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 36px 28px 32px;
        }

        /* Top corner marks — subtle architectural framing */
        .top-bar {
            width: 100%;
            max-width: 1360px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--text-muted);
            animation: fadeIn 1.4s ease-out 0.1s both;
        }

        .top-bar .mark {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .top-bar .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--mint);
            box-shadow: 0 0 8px rgba(110, 231, 183, 0.6);
            animation: breathe 3.2s ease-in-out infinite;
        }

        .top-bar .bar-sep {
            display: inline-block;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--text-whisper);
            margin: 0 10px 2px;
            vertical-align: middle;
        }

        #stat-alerts, #stat-sars {
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }

        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 1080px;
            padding: 40px 0;
        }

        /* ---------- Logo ---------- */
        .logo-container {
            margin-bottom: 88px;
            animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
        }

        .logo-container svg {
            width: 172px;
            height: 42px;
        }

        /* ---------- Eyebrow ---------- */
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin-bottom: 36px;
            animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
        }

        .eyebrow::before,
        .eyebrow::after {
            content: "";
            width: 28px;
            height: 1px;
            background: var(--hairline);
        }

        /* ---------- Headline ---------- */
        .tagline {
            font-family: 'Instrument Sans', system-ui, sans-serif;
            font-size: clamp(34px, 6.4vw, 76px);
            font-weight: 500;
            text-align: center;
            margin-bottom: 32px;
            line-height: 1.12;
            letter-spacing: -0.02em;
            max-width: 18ch;
            animation: fadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
        }

        /* Highlight phrase — Fraunces italic with mint→ice gradient.
           Alternative: swap font-family to 'Instrument Serif' for a more
           institutional pairing with Instrument Sans (add the import above). */
        .tagline-highlight {
            font-family: 'Fraunces', 'Instrument Sans', serif;
            font-style: italic;
            font-weight: 400;
            letter-spacing: -0.015em;
            background: linear-gradient(135deg, var(--mint) 0%, var(--ice) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ---------- Subtitle ---------- */
        .subtitle {
            font-size: clamp(15px, 1.6vw, 17px);
            color: var(--text-secondary);
            text-align: center;
            margin-bottom: 56px;
            font-weight: 400;
            line-height: 1.6;
            max-width: 52ch;
            animation: fadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
        }

        /* ---------- CTA (hairline link, not filled pill) ---------- */
        .cta-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 18px 34px 18px 36px;
            font-size: 14px;
            font-weight: 500;
            font-family: 'Instrument Sans', system-ui, sans-serif;
            color: var(--text-primary);
            background-color: transparent;
            border: 1px solid var(--hairline);
            border-radius: 2px;
            text-decoration: none;
            cursor: pointer;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            transition:
                color 0.5s ease,
                border-color 0.5s ease,
                background-color 0.5s ease,
                box-shadow 0.5s ease,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            animation: fadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
            position: relative;
            overflow: hidden;
        }

        .cta-button .arrow {
            display: inline-block;
            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            color: var(--mint);
        }

        .cta-button:hover {
            color: var(--bg-primary);
            background-color: var(--mint);
            border-color: var(--mint);
            box-shadow: 0 0 40px rgba(110, 231, 183, 0.18);
        }

        .cta-button:hover .arrow {
            transform: translateX(6px);
            color: var(--bg-primary);
        }

        /* ---------- Primary CTA (filled mint, prominent) ---------- */
        .cta-button.btn-primary {
            color: var(--bg-primary);
            background-color: var(--mint);
            border-color: var(--mint);
            font-weight: 600;
        }

        .cta-button.btn-primary .arrow {
            color: var(--bg-primary);
        }

        .cta-button.btn-primary:hover {
            background-color: #8CF0CC;
            border-color: #8CF0CC;
            box-shadow: 0 8px 30px rgba(110, 231, 183, 0.32);
            transform: translateY(-2px);
        }

        body.light .cta-button.btn-primary {
            background-color: #059669;
            border-color: #059669;
            color: #fff;
        }

        body.light .cta-button.btn-primary:hover {
            background-color: #047857;
            border-color: #047857;
            box-shadow: 0 8px 30px rgba(5, 150, 105, 0.28);
            transform: translateY(-2px);
        }

        body.light .cta-button.btn-primary .arrow { color: #fff; }

        /* ---------- Provenance whisper ---------- */
        .provenance {
            margin-top: 72px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            column-gap: 20px;
            row-gap: 14px;
            max-width: 960px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 10.5px;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: var(--text-muted);
            animation: fadeInUp 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
        }

        .provenance .sep {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--text-whisper);
            flex-shrink: 0;
            transition: background 0.5s ease;
        }

        /* Hover light-up: the targeted item brightens to mint with a soft
           glow, and siblings dim back so the focus feels deliberate. */
        .provenance > span:not(.sep) {
            cursor: default;
            transition:
                color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                text-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .provenance:hover > span:not(.sep) {
            color: var(--text-whisper);
        }

        .provenance:hover .sep {
            background: #1A2030;
        }

        .provenance > span:not(.sep):hover {
            color: var(--mint);
            text-shadow:
                0 0 16px rgba(110, 231, 183, 0.45),
                0 0 4px  rgba(110, 231, 183, 0.3);
        }

        @media (hover: none) {
            /* Don't dim siblings on touch devices — no hover state to recover from */
            .provenance:hover > span:not(.sep) { color: var(--text-muted); }
            .provenance:hover .sep { background: var(--text-whisper); }
        }

        /* ---------- Footer ---------- */
        .footer {
            text-align: center;
            padding-top: 22px;
            border-top: 1px solid var(--border);
            font-size: 12px;
            color: var(--text-muted);
            font-family: 'IBM Plex Mono', monospace;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            animation: fadeIn 1.6s ease-out 1.4s both;
            width: 100%;
            max-width: 1360px;
        }

        .footer-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            margin-left: 28px;
            transition: color 0.4s ease;
            font-weight: 500;
        }

        .footer-links a:first-child { margin-left: 0; }

        .footer-links a:hover {
            color: var(--mint);
        }

        /* ---------- Animations ---------- */
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 900px) {
            .provenance { gap: 14px; font-size: 9.5px; letter-spacing: 0.22em; flex-wrap: wrap; justify-content: center; }
            .logo-container { margin-bottom: 64px; }
        }

        @media (max-width: 768px) {
            .vortex-bg { width: 560px; height: 560px; }
            .page-wrapper { padding: 24px 20px 24px; }
            .logo-container svg { width: 150px; height: 36px; }
            .eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 28px; }
            .eyebrow::before, .eyebrow::after { width: 18px; }
            .tagline { margin-bottom: 24px; }
            .subtitle { margin-bottom: 40px; }
            .provenance { margin-top: 48px; }
            .footer { font-size: 10px; }
            .footer-row { flex-direction: column; gap: 12px; }
            .footer-links a { margin-left: 18px; }
        }

        @media (max-width: 480px) {
            .vortex-bg { width: 380px; height: 380px; }
            .logo-container svg { width: 130px; height: 30px; }
            .top-bar { font-size: 9.5px; letter-spacing: 0.14em; }
            .top-bar .mark.hide-sm { display: none; }
            .cta-button { padding: 15px 26px; font-size: 12px; letter-spacing: 0.12em; }
            .provenance { font-size: 9px; letter-spacing: 0.18em; }
        }

        @media (prefers-reduced-motion: reduce) {
            .vortex-outer, .vortex-outer-glow, .vortex-inner, .vortex-inner-glow, .vortex-core, .top-bar .dot {
                animation: none !important;
            }
            .cta-button .arrow { transition: none; }
            #particles { display: none; }
        }

        /* Theme toggle */
        .theme-toggle{position:relative;display:inline-block;width:44px;height:24px;border-radius:24px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);cursor:pointer;padding:0;vertical-align:middle;transition:background 0.3s ease, border-color 0.3s ease}
        .theme-toggle:hover{border-color:rgba(110,231,183,0.4);background:rgba(255,255,255,0.08)}
        .theme-toggle-thumb{position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:50%;background:#E8ECF2;display:flex;align-items:center;justify-content:center;color:#080A0F;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease}
        body.light .theme-toggle{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1)}
        body.light .theme-toggle:hover{background:rgba(0,0,0,0.06);border-color:rgba(5,150,105,0.4)}
        body.light .theme-toggle-thumb{transform:translateX(20px);background:#059669;color:#fff}
        .footer-row .theme-toggle { margin-left: 20px; }

        /* ── LIGHT MODE ── */
        body.light {
          background: #F7F8FA;
          color: #111827;
        }
        body.light .ambient-glow {
          background:
            radial-gradient(ellipse 900px 600px at 15% 10%, rgba(5,150,105,0.04), transparent 60%),
            radial-gradient(ellipse 800px 500px at 85% 90%, rgba(2,132,199,0.03), transparent 60%);
        }
        body.light .vignette {
          background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.04) 100%);
        }
        body.light .grain { opacity: 0.015; }
        body.light .footer { border-top-color: rgba(0,0,0,0.08); color: rgba(17,24,39,0.55); }
        body.light .footer-links a { color: rgba(17,24,39,0.6); }
        body.light .footer-links a:hover { color: #059669; }
        body.light .logo-container svg text { fill: #111827; }
        body.light .eyebrow { color: rgba(17,24,39,0.6); }
        body.light .eyebrow::before, body.light .eyebrow::after { background: rgba(17,24,39,0.12); }
        body.light .subtitle { color: rgba(17,24,39,0.7); }
        body.light .cta-button {
          color: #111827;
          border-color: rgba(17,24,39,0.14);
        }
        body.light .cta-button:hover {
          color: #fff;
          background-color: #059669;
          border-color: #059669;
          box-shadow: 0 0 40px rgba(5,150,105,0.22);
        }
        body.light .cta-button .arrow { color: #059669; }
        body.light .cta-button:hover .arrow { color: #fff; }

        /* Hero-specific light-mode adaptations (vortex + particles + highlight + provenance + top bar) */
        body.light .vortex-bg, body.light #particles {
          opacity: 0.4;
          mix-blend-mode: multiply;
        }
        body.light .tagline-highlight {
          background: linear-gradient(135deg, #047857 0%, #0284C7 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        body.light .provenance > span:not(.sep) { color: rgba(17,24,39,0.55); }
        body.light .provenance > span:not(.sep):hover {
          color: #047857;
          text-shadow: 0 0 16px rgba(5,150,105,0.35), 0 0 4px rgba(5,150,105,0.2);
        }
        body.light .provenance:hover > span:not(.sep) { color: rgba(17,24,39,0.7); }
        body.light .provenance .sep { background: rgba(17,24,39,0.2); }
        body.light .provenance:hover .sep { background: rgba(17,24,39,0.3); }
        body.light .top-bar { color: rgba(17,24,39,0.6); }
        body.light .top-bar .bar-sep { background: rgba(17,24,39,0.18); }
        body.light #stat-alerts, body.light #stat-sars { color: rgba(17,24,39,0.75); }