:root {
    --bg: #0A0E18;
    --surface: #0E1422;
    --surface-2: #121A28;
    --border: #283143;
    --text: #E8ECF6;
    --muted: #8294AE;
    --secondary: #AEB9CD;
    --accent: #4FC3F7;
    --accent-soft: #4FC3F71f;
    --cyan: #00BCD4;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: 'IBM Plex Mono', monospace; }

/* ─── Hero ─── */
.hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 1.25rem 3rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(800px 380px at 80% -10%, #4FC3F722, transparent 60%),
        radial-gradient(circle at 1px 1px, #ffffff14 1px, transparent 1.4px) 0 0 / 44px 44px,
        var(--bg);
}
.hero-inner { position: relative; max-width: 680px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); font-weight: 600; }
.tagline {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--secondary);
    margin: 0.7rem auto 2rem;
    max-width: 46ch;
}

/* Orbit mark (CSS) */
.mark { width: 132px; height: 132px; margin: 0 auto 1.5rem; position: relative; }
.mark .orbit {
    position: absolute; inset: 0;
    border: 2.5px solid #4FC3F7d9; border-radius: 50%;
    transform: rotate(-24deg) scaleY(.46);
}
.mark .body {
    position: absolute; top: 50%; left: 50%; width: 26px; height: 26px;
    margin: -13px 0 0 -13px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #6Fd0ff, #1c7fb8);
}
.mark .flare {
    position: absolute; top: 18px; right: 26px; width: 13px; height: 13px;
    border-radius: 50%; background: #EAF6FF;
    box-shadow: 0 0 14px 4px #78d2ffe6;
}

.btn {
    display: inline-block; margin-top: 0.4rem; padding: 0.75rem 1.4rem;
    background: var(--accent); color: #06121C; font-weight: 600;
    border-radius: 12px; font-size: 0.98rem;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }

/* ─── Content ─── */
main { max-width: 680px; margin: 0 auto; padding: 2.5rem 1.25rem; width: 100%; flex: 1; }
.card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.1rem;
}
.card h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--text); }
.card p { color: var(--secondary); margin-bottom: 0.6rem; }
.card p:last-child { margin-bottom: 0; }
.card ul { color: var(--secondary); padding-left: 1.2rem; }
.card li { margin-bottom: 0.35rem; }
.card strong { color: var(--text); }
.chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; color: var(--secondary);
    font-family: 'IBM Plex Mono', monospace;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #4CAF50; }
.fineprint { font-size: 0.85rem; color: var(--muted); }

body.legal main { padding-top: 3rem; }
body.legal h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-bottom: 0.3rem; }

footer {
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 1.5rem;
    color: var(--muted);
    font-size: 0.85rem;
}