:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 15% 12%, #4a347d 0, transparent 32rem), radial-gradient(circle at 85% 85%, #0f6468 0, transparent 35rem), #141833; color: #f6f3ff; }
.page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 620px); padding: clamp(2.5rem, 8vw, 5.25rem); text-align: center; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: rgba(25, 29, 62, .7); box-shadow: 0 24px 60px rgba(3, 5, 22, .38); backdrop-filter: blur(14px); }
.eyebrow { margin: 0 0 1rem; color: #b8c9ff; font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(3rem, 10vw, 5.8rem); line-height: .98; letter-spacing: -.07em; }
.intro { max-width: 30rem; margin: 1.45rem auto 2.3rem; color: #d4d7eb; font-size: clamp(1.05rem, 2.4vw, 1.25rem); line-height: 1.55; }
button { appearance: none; border: 0; border-radius: 999px; padding: .88rem 1.3rem; background: #f5edff; color: #22203b; font: inherit; font-weight: 750; cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,.2); transition: transform .18s ease, box-shadow .18s ease; }
button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
button:focus-visible { outline: 3px solid #85e8ea; outline-offset: 4px; }
.response { margin: 1.2rem 0 0; color: #9cf0eb; font-weight: 650; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }