body {
    background:
        radial-gradient(circle at 78% 16%, rgba(188,153,106,.24), transparent 28%),
        radial-gradient(circle at 12% 92%, rgba(214,200,188,.10), transparent 32%),
        linear-gradient(145deg, #17191b 0%, #24282b 48%, #121416 100%);
    color: #f7f1e8;
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    opacity: .12;
    pointer-events: none;
    background-image: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.035) 19px);
}

.container {
    position: relative;
    isolation: isolate;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 64px 32px;
    text-align: center;
    gap: 18px;
}

.ambient-orb { position: absolute; border-radius: 50%; filter: blur(2px); z-index: -1; }
.ambient-orb-one { width: 420px; height: 420px; top: -260px; right: -180px; border: 1px solid rgba(188,153,106,.28); box-shadow: inset 0 0 90px rgba(188,153,106,.08); }
.ambient-orb-two { width: 300px; height: 300px; bottom: -210px; left: -120px; border: 1px solid rgba(214,200,188,.13); }

.logo-lockup { margin-bottom: 8px; }
.logo-lockup img { width: min(350px, 66vw); filter: invert(1) sepia(.2) saturate(.6); }
.eyebrow { color: var(--color-gold); text-transform: uppercase; letter-spacing: .28em; font-size: .74rem; font-weight: 600; margin-bottom: 4px; }
.title { color: #fbf7f1; font-size: clamp(3rem, 7vw, 5.4rem); line-height: .98; max-width: 720px; margin: 6px 0 12px; text-wrap: balance; }
.subtext { color: rgba(247,241,232,.65); font-size: 1.05rem; line-height: 1.7; max-width: 32em; margin-bottom: 28px; }

#profile-button { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px 17px 30px; box-shadow: 0 16px 45px rgba(188,153,106,.18); }
#profile-button span:last-child { display: grid; place-items: center; width: 34px; height: 34px; margin: -8px -12px -8px 16px; border-radius: 50%; background: rgba(255,255,255,.18); }
#sample-results-button { color: rgba(247,241,232,.62); border-color: rgba(247,241,232,.25); padding: 12px 28px; }
.floating-actions { position: absolute; top: 24px; right: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; z-index: 2; }
.settings-button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: .2s ease; }
.settings-button:hover { border-color: var(--color-gold); background: rgba(188,153,106,.12); }
.settings-button svg { width: 20px; height: 20px; stroke: #f5eee4; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.language-menu { display: none; flex-direction: column; width: 120px; padding: 8px; background: #242628; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.language-menu.active { display: flex; }
.language-option { background: transparent; border: 0; color: #f5eee4; padding: 10px; border-radius: 9px; cursor: pointer; text-align: right; }
.language-option:hover { background: rgba(188,153,106,.12); }

@media (max-height: 700px) { .title { font-size: 2.8rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }