:root {
    --bg: #031219;
    --gold: #4fe3c8;
    --violet: #2fa8ff;
    --text: #b4cfd6;
    --line: rgba(79, 227, 200, .28);
    --wheel: min(86vw, 420px);
}

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

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }

body {
    font-family: Inter, sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

/* starfield + nebula */
.sky {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1px 1px at 12% 20%, #fff, transparent),
        radial-gradient(1px 1px at 28% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 44% 35%, #fff, transparent),
        radial-gradient(1px 1px at 63% 82%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 78% 18%, #fff, transparent),
        radial-gradient(1px 1px at 90% 55%, #fff, transparent),
        radial-gradient(1px 1px at 6% 88%, #fff, transparent),
        radial-gradient(60% 50% at 85% 10%, rgba(47, 168, 255, .28), transparent),
        radial-gradient(50% 45% at 10% 95%, rgba(79, 227, 200, .12), transparent),
        var(--bg);
    animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle { from { opacity: .75; } to { opacity: 1; } }

.shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: .02em;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
}

.pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink { 50% { opacity: .2; } }

.hero > * { min-width: 0; }

.hero {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 48px;
    padding: 40px 0;
}

.eyebrow {
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
}

h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(44px, 7vw, 84px);
    font-weight: 500;
    line-height: 1.02;
    color: #fff;
}

h1 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--gold), #e6fffb 50%, var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lead {
    max-width: 480px;
    margin: 24px 0 34px;
    font-size: 16.5px;
    line-height: 1.7;
}

.steps {
    max-width: 380px;
    list-style: none;
    border-left: 1px solid var(--line);
}

.steps li {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0 9px 22px;
    font-size: 14.5px;
    opacity: .55;
}

.steps li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--gold);
}

.steps b { font-family: "Cormorant Garamond", serif; font-size: 18px; color: var(--gold); }
.steps .done { opacity: .85; }
.steps .done::before { background: var(--gold); }
.steps .now { opacity: 1; color: #fff; }
.steps .now::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(79, 227, 200, .2); animation: blink 1.6s infinite; }

/* zodiac wheel */
.wheel-wrap { display: grid; place-items: center; }

.wheel {
    position: relative;
    width: var(--wheel);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--line);
}

.ring--out { inset: 0; animation: spin 90s linear infinite; }
.ring--mid { inset: 17%; border-style: dashed; animation: spin 60s linear infinite reverse; }
.ring--in  { inset: 30%; border-color: rgba(47, 168, 255, .5); box-shadow: 0 0 60px rgba(47, 168, 255, .25) inset; }

.ring--out span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', Symbola, sans-serif;
    font-variant-emoji: text;
    color: var(--gold);
    background: none;
    transform: rotate(calc(var(--i) * 30deg)) translateY(calc(var(--wheel) / -2)) rotate(calc(var(--i) * -30deg));
}

.core {
    position: relative;
    width: 24%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: clamp(30px, 6vw, 48px);
    color: #fff;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif;
    font-variant-emoji: text;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7fd4ff, #0b4a7a 70%);
    box-shadow: 0 0 50px rgba(47, 168, 255, .6);
}

@keyframes spin { to { transform: rotate(360deg); } }

.foot {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
    color: #6f94a0;
}

@media (max-width: 820px) {
    :root { --wheel: min(72vw, 340px); }
    .hero { grid-template-columns: 1fr; gap: 44px; padding: 28px 0 36px; text-align: center; }
    .copy { display: flex; flex-direction: column; align-items: center; }
    .lead { margin-left: auto; margin-right: auto; }
    .steps { text-align: left; }
    .wheel-wrap { padding: 0 20px; }
}

@media (max-width: 480px) {
    .shell { padding: 18px 16px 16px; }
    .top { flex-direction: column; align-items: flex-start; gap: 12px; }
    .logo { font-size: 21px; }
    .pill { font-size: 11px; padding: 5px 10px; }
    .eyebrow { font-size: 12px; letter-spacing: .24em; }
    h1 { font-size: clamp(38px, 12vw, 48px); }
    .lead { font-size: 15.5px; margin: 18px 0 26px; }
    .steps { width: 100%; max-width: 320px; }
    .ring--out span { width: 28px; height: 28px; margin: -14px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
}