/* ============ TOKENS ============ */
        :root, :root[data-theme="dark"] {
            --bg: #0B1020;
            --bg-alt: #0E1428;
            --surface: #131A2E;
            --surface-raised: #1A2238;
            --border: rgba(255,255,255,0.08);
            --border-emerald: rgba(16,185,129,0.22);
            --text: #F4F7FB;
            --text-secondary: #9AA7BE;
            --text-faint: #6B788F;
            --emerald: #10B981;
            --emerald-bright: #34D399;
            --emerald-deep: #059669;
            --amber: #F59E0B;
            --rose: #FB7185;
            --d-green: #34D399;
            --d-amber: #FBBF24;
            --d-red: #F87171;
            --d-blue: #60A5FA;
            --d-teal: #2DD4BF;
            --gauge-track: rgba(255,255,255,0.07);
            --card-shadow: 0 40px 80px -36px rgba(0,0,0,0.7);
            --mesh-emerald: rgba(16,185,129,0.16);
            --mesh-violet: rgba(124,58,237,0.16);
            --mesh-amber: rgba(245,158,11,0.09);
            --star: rgba(255,255,255,0.55);
            --badge-bg: #000;
        }
        :root[data-theme="light"] {
            --bg: #F7F9F5;
            --bg-alt: #EEF3EC;
            --surface: #FFFFFF;
            --surface-raised: #F3F6F1;
            --border: #E3E8E0;
            --border-emerald: rgba(5,150,105,0.20);
            --text: #0E1726;
            --text-secondary: #455062;
            --text-faint: #5C6B82;
            --emerald: #059669;
            --emerald-bright: #34D399;
            --emerald-deep: #047857;
            --amber: #D97706;
            --rose: #E11D48;
            --d-green: #059669;
            --d-amber: #D97706;
            --d-red: #DC2626;
            --d-blue: #2563EB;
            --d-teal: #0D9488;
            --gauge-track: rgba(14,23,38,0.10);
            --card-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 18px 40px -18px rgba(16,24,40,0.14);
            --mesh-emerald: rgba(16,185,129,0.12);
            --mesh-violet: rgba(124,58,237,0.08);
            --mesh-amber: rgba(245,158,11,0.07);
            --star: rgba(14,23,38,0.30);
            --badge-bg: #000;
        }

        * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        html { scroll-behavior: smooth; }
        html { overflow-x: clip; }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Inter', system-ui, sans-serif;
            overflow-x: clip;
        }
        :root, body, .themed { transition: background-color .22s ease, border-color .22s ease, color .22s ease; }

        .font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.01em; }
        .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

        h1.font-display { line-height: 1.04; font-weight: 600; }
        h2.font-display { line-height: 1.1; font-weight: 600; }

        .text-secondary { color: var(--text-secondary); }
        .text-faint { color: var(--text-faint); }
        .text-emerald { color: var(--emerald); }
        .emerald { color: var(--emerald); }

        .eyebrow {
            font-size: 0.8125rem; font-weight: 600; text-transform: uppercase;
            letter-spacing: 0.14em; color: var(--emerald);
            display: inline-flex; align-items: center; gap: .6rem;
        }
        .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--emerald); display: inline-block; opacity: .8; }
        .eyebrow.no-rule::before { display: none; }

        /* selection */
        ::selection { background: var(--emerald); color: #04130d; }

        /* hairline divider */
        .hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--border-emerald), transparent); border: 0; }

        /* focus */
        a:focus-visible, button:focus-visible, input:focus-visible, .device:focus-visible, .marquee:focus-visible {
            outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 6px;
        }
        /* eyebrow needs a darker green in light mode to clear WCAG AA at 13px bold */
        :root[data-theme="light"] .eyebrow { color: var(--emerald-deep); }
        :root[data-theme="light"] .eyebrow::before { background: var(--emerald-deep); }

        /* surfaces */
        .surface { background: var(--surface); border: 1px solid var(--border); }
        .surface-raised { background: var(--surface-raised); border: 1px solid var(--border); }

        /* ============ NAV ============ */
        .nav { background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
        .nav.scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
        .nav-link { color: var(--text-secondary); position: relative; }
        .nav-link::after { content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background: var(--emerald); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
        .nav-link:hover { color: var(--text); }
        .nav-link:hover::after { transform: scaleX(1); }

        /* ============ BUTTONS ============ */
        .btn-ghost { color: var(--text); display:inline-flex; align-items:center; gap:.5rem; font-weight:600; }
        .btn-ghost .u { background: linear-gradient(var(--emerald),var(--emerald)) no-repeat left bottom / 0% 2px; transition: background-size .25s ease; padding-bottom: 2px; }
        .btn-ghost:hover .u { background-size: 100% 2px; }
        .badge-link { display:inline-block; transition: transform .2s ease, filter .2s ease; }
        .badge-link:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); }
        .badge-link img { display:block; height: 52px; width:auto; }
        .badge-sm img { height: 40px; }

        /* ============ CARDS / CHIPS ============ */
        .card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--card-shadow); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
        .card.hoverable:hover { transform: translateY(-4px); border-color: var(--border-emerald); box-shadow: 0 28px 56px -24px rgba(16,185,129,0.28); }

        .icon-chip { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none;
            background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 22%, transparent), color-mix(in srgb, var(--emerald) 6%, transparent));
            border: 1px solid var(--border-emerald); color: var(--emerald); }
        .icon-chip svg { width:24px; height:24px; }

        .em-chip { font-size:.8125rem; padding:.3rem .6rem; border-radius:9px; border:1px solid var(--border); background: var(--surface-raised); display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; }
        .em-chip .v { font-weight:600; }
        .lvl-red .v { color: var(--d-red); } .lvl-amber .v { color: var(--d-amber); }
        .lvl-green .v { color: var(--d-green); } .lvl-blue .v { color: var(--d-blue); } .lvl-teal .v { color: var(--d-teal); }
        .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

        /* ============ DEVICE FRAME ============ */
        .device { position: relative; border-radius: 44px; padding: 10px; background: #1C2233; border: 1px solid var(--border);
            box-shadow: 0 40px 80px -24px rgba(0,0,0,0.6); transition: transform .3s ease, box-shadow .3s ease; }
        :root[data-theme="light"] .device { background: #11161f; }
        .device::after { content:""; position:absolute; inset:10px; border-radius:34px; pointer-events:none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); background: linear-gradient(105deg, rgba(255,255,255,0.10), transparent 38%); }
        .device .screen { position: relative; border-radius: 34px; overflow:hidden; background:#05070D; }
        .device .screen img { display:block; width:100%; height:auto; }
        .device .island { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:34%; max-width:112px; height:26px; background:#05070D; border-radius:16px; z-index:3; }
        .device.glow.in-view { box-shadow: 0 40px 80px -24px rgba(0,0,0,0.6), 0 0 0 1px var(--border-emerald), 0 20px 60px -24px rgba(16,185,129,0.30); }

        /* ============ HERO BACKDROP ============ */
        .dawn { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
        .blob { position:absolute; border-radius:50%; filter: blur(56px); }
        .blob-1 { width:520px; height:520px; background: var(--mesh-emerald); top:-120px; left:-60px; }
        .blob-2 { width:560px; height:560px; background: var(--mesh-violet); top:-80px; right:-120px; }
        .blob-3 { width:480px; height:480px; background: var(--mesh-amber); bottom:-160px; left:30%; }
        .horizon { position:absolute; left:0; right:0; bottom:0; height:220px; background: linear-gradient(0deg, color-mix(in srgb, var(--emerald) 10%, transparent), transparent); z-index:0; pointer-events:none; }
        .starfield { position:absolute; inset:0; z-index:0; pointer-events:none; }
        .star { position:absolute; width:2px; height:2px; border-radius:50%; background: var(--star); }

        /* ============ GAUGE ============ */
        .gauge-wrap { position: relative; display:grid; place-items:center; aspect-ratio: 1; }
        /* only the ring (direct-child svg) scales+rotates — NOT the nested leaf svg */
        .gauge-wrap > svg { transform: rotate(-90deg); width: 100%; height: 100%; }
        .gauge-arc { transition: stroke-dashoffset .25s ease, stroke .25s ease; }
        .gauge-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.1rem; }
        .gauge-leaf { width:30px; height:30px; color: var(--emerald-bright); margin-bottom:.25rem; transition: filter .25s ease, color .25s ease; }
        .gauge-num { font-weight:600; line-height:1; }
        .reticle { display:inline-flex; align-items:center; gap:.45rem; color: var(--emerald); font-size:.8125rem; }

        /* ============ MARQUEE ============ */
        .marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
        .marquee-track { display:flex; gap:1.5rem; width:max-content; animation: marquee 48s linear infinite; }
        .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
        @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* ============ TEMP METER ============ */
        .meter { height:14px; border-radius:999px; background: var(--surface-raised); border:1px solid var(--border); overflow:hidden; }
        .meter-fill { height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg, var(--d-green), var(--d-amber) 55%, var(--d-red)); transition: width 1.1s cubic-bezier(.22,1,.36,1); }

        /* ============ REVEALS ============ */
        .reveal { opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
        .reveal.in-view { opacity:1; transform:none; }

        /* mobile menu */
        .mobile-menu { transition: opacity .25s ease; }

        @keyframes twinkle { 0%,100% { opacity:.15; } 50% { opacity:.7; } }
        @keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-14px); } }
        .blob { animation: drift 30s ease-in-out infinite; }
        .blob-2 { animation-duration: 38s; } .blob-3 { animation-duration: 34s; }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .blob, .star, .marquee-track { animation: none !important; }
            .reveal { opacity:1 !important; transform:none !important; }
            .gauge-arc, .meter-fill { transition: none !important; }
        }

/* ============ CONTENT SUBPAGES ============ */
.subpage h1, .subpage h2, .subpage h3 { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.01em; }
.subpage h1 { line-height: 1.06; }
.subpage a.contentlink, .subpage .prose a { color: var(--emerald); }
.subpage a.contentlink:hover { text-decoration: underline; }