:root {
    color-scheme: dark;
    --bg: #050506;
    --fg: #e9edf2;
    --dim: #8d95a1;
    --faint: #69727e;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.16);
    --gold: #c9a66a;
    --text-metal: linear-gradient(180deg, #f5f8fb 0%, #d9dfe7 30%, #949da9 58%, #d6dde5 80%, #a8b1bc 100%);
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { background: var(--bg); }

body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    background: var(--bg);
    color: var(--fg);
    font: 300 15px/1.6 Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ambient light and grain */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(720px 520px at var(--lx, 50%) var(--ly, 34%), rgba(150, 168, 194, 0.075), transparent 70%);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid #e4eaf2; outline-offset: 6px; }
::selection { background: rgba(201, 166, 106, 0.24); color: #fff; }

/* ---------- top and bottom rails ---------- */
.top,
.bottom {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.top { padding: 26px clamp(20px, 3.4vw, 48px); }

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    letter-spacing: 0.025em;
    color: #dfe4ea;
}
.brand img { display: block; width: 26px; height: 26px; object-fit: contain; }
.brand span { transition: color 0.35s; }
.brand:hover span { color: #fff; }

.top-right {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.8vw, 38px);
    font: 300 10px var(--mono);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.top-note { color: var(--faint); }
.top-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #aeb6c0;
    transition: color 0.35s;
}
.top-link:hover { color: var(--fg); }
.top-link span { transition: transform 0.5s var(--ease); }
.top-link:hover span { transform: translate(2px, -2px); }

.bottom {
    padding: 19px clamp(20px, 3.4vw, 48px) 23px;
    border-top: 1px solid var(--line);
    color: var(--faint);
    font: 300 10px var(--mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.bottom-mid { color: #7e8793; }

/* ---------- stage ---------- */
main {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: grid;
    min-height: 0;
}

.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    overflow: clip;
    min-height: 0;
    padding: clamp(28px, 4vh, 56px) 24px;
}

/* halo */
.aura {
    position: absolute;
    z-index: 0;
    width: min(78vmin, 880px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(174, 192, 216, 0.12), rgba(174, 192, 216, 0.035) 44%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    opacity: 0.75;
    animation: aura-breathe 13s ease-in-out infinite;
}

.orrery {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    translate: 0 14px;
    animation: scene-in 2.2s var(--ease) 0.1s forwards;
    will-change: transform;
}
.orbit {
    fill: none;
    stroke: rgba(223, 231, 241, 0.10);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.orbit.dim { stroke: rgba(223, 231, 241, 0.06); }
.orbit-set.slow .orbit { opacity: 0.5; }
.guideline {
    fill: none;
    stroke: rgba(223, 231, 241, 0.07);
    stroke-width: 1;
    stroke-dasharray: 2 9;
    vector-effect: non-scaling-stroke;
}
.sat { color: #e8edf4; }

/* ---------- the words ---------- */
.content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: clamp(4px, 2vh, 22px);
}
.content > * { max-width: 100%; }

.status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9fa8b4;
    font: 300 10px/1 var(--mono);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    animation: fade-up 1s var(--ease) 0.25s both;
}
.status .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 11px rgba(201, 166, 106, 0.75);
    animation: pulse 3.4s ease-in-out infinite;
}
.status .sep { color: rgba(255, 255, 255, 0.22); letter-spacing: 0; }

/* per-letter breath */
@property --blr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --mlt { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --dimv { syntax: "<number>"; inherits: false; initial-value: 1; }

.wordmark {
    margin-top: clamp(16px, 2.6vh, 30px);
    font-size: clamp(108px, 20.5vw, 340px);
    font-weight: 200;
    line-height: 0.78;
    letter-spacing: -0.045em;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}
.wordmark .ch {
    display: inline-block;
    white-space: pre;
    color: transparent;
    background: var(--text-metal);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    filter: brightness(var(--br, 1));
    transform: translateY(0.28em) scale(1.05);
    animation: letter-in 1.25s var(--ease) both;
    animation-delay: calc(var(--i) * 85ms + 150ms);
    will-change: transform, filter, opacity;
}
/* pointer light after entrance */
.wordmark.entered .ch {
    animation: none;
    opacity: 1;
    transform: none;
    filter: brightness(var(--br, 1));
    transition: filter 0.28s linear;
}
/* slow per-letter breath */
.wordmark.settled .ch {
    opacity: 1;
    transform-origin: 50% 0;
    transform: scaleY(var(--mlt)) translateY(calc((var(--mlt) - 1) * 0.4em));
    filter: brightness(calc(var(--br, 1) * var(--dimv))) blur(var(--blr));
    animation: breathe 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    animation-delay: calc(var(--i) * 140ms);
    transition: none;
}

.tagline {
    margin-top: clamp(18px, 3.2vh, 38px);
    font-size: clamp(25px, 3.1vw, 46px);
    font-weight: 200;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: #f0f3f7;
    text-wrap: balance;
    animation: fade-up 1.1s var(--ease) 0.72s both;
}

.lede {
    max-width: 46ch;
    margin-top: 15px;
    color: var(--dim);
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.68;
    text-wrap: pretty;
    animation: fade-up 1.1s var(--ease) 0.9s both;
}

.actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(18px, 2.6vw, 34px);
    margin-top: clamp(26px, 4vh, 44px);
    animation: fade-up 1.1s var(--ease) 1.08s both;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    height: 48px;
    padding: 0 21px;
    background: var(--fg);
    color: #07080a;
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.4s, transform 0.5s var(--ease);
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn .arr { font-family: Inter, sans-serif; font-size: 14px; transition: transform 0.5s var(--ease); }
.btn:hover .arr { transform: translate(3px, -3px); }

.alt {
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    color: var(--faint);
    font: 300 10px var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 0.35s, border-color 0.35s;
}
.alt:hover { color: var(--fg); border-color: var(--line-2); }

/* ---------- motion ---------- */
@keyframes letter-in {
    from { opacity: 0; filter: blur(14px) brightness(1.12); transform: translateY(0.28em) scale(1.05); }
    to { opacity: 1; filter: blur(0) brightness(var(--br, 1)); transform: none; }
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes scene-in {
    to { opacity: 1; translate: 0 0; }
}
@keyframes breathe {
    0%, 100% { --blr: 0px; --mlt: 1; --dimv: 1; }
    50% { --blr: 2.6px; --mlt: 1.018; --dimv: 0.78; }
}
@keyframes aura-breathe {
    50% { opacity: 0.52; transform: scale(1.045); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.72); }
}

/* force final state in previews that pause animations */
.ready .status,
.ready .tagline,
.ready .lede,
.ready .actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
.ready .orrery {
    animation: none !important;
    opacity: 1 !important;
    translate: 0 0 !important;
}
.ready .wordmark:not(.settled) .ch {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: brightness(var(--br, 1)) !important;
}

/* ---------- shorter screens ---------- */
@media (max-height: 760px) and (min-width: 700px) {
    .wordmark { font-size: clamp(96px, 16vw, 232px); }
    .tagline { margin-top: 20px; font-size: clamp(22px, 2.4vw, 34px); }
    .lede { margin-top: 11px; }
    .actions { margin-top: 24px; }
}

/* ---------- phones ---------- */
@media (max-width: 820px) {
    .top { padding: 20px 20px; }
    .top-note { display: none; }
    .hero { padding: 28px 18px 34px; }
    .wordmark { font-size: clamp(86px, 22vw, 176px); }
    .tagline { font-size: clamp(24px, 6vw, 34px); }
    .lede { max-width: 36ch; font-size: 14px; }
    .bottom { padding: 17px 20px 21px; font-size: 9px; }
    .bottom-mid { display: none; }
}

@media (max-width: 520px) {
    .brand span { font-size: 12px; }
    .content { padding-bottom: 0; }
    .wordmark { font-size: clamp(78px, 23.5vw, 128px); }
    .tagline { margin-top: 22px; }
    .actions { flex-direction: column; gap: 17px; width: 100%; max-width: 280px; }
    .btn { width: 100%; }
    .aura { width: 98vmin; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .orrery { opacity: 1; translate: 0 0; }
    .wordmark .ch { opacity: 1; transform: none; filter: brightness(var(--br, 1)); }
    .aura { opacity: 0.75; }
}