:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; color: #edf2f7; background: #10151d; }
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; padding: 40px clamp(24px, 8vw, 128px) 28px; display: flex; flex-direction: column; background: radial-gradient(ellipse at 85% 35%, #18353866, transparent 55%); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; letter-spacing: .15em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #65d9bd; border-radius: 9px; color: #65d9bd; letter-spacing: -.06em; font-size: 17px; }
main { flex: 1; width: 100%; max-width: 1080px; margin: auto; padding: clamp(64px, 12vh, 150px) 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #86a9a6; letter-spacing: .22em; font-size: 11px; }
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #65d9bd; }
h1 { font-size: clamp(44px, 6.7vw, 88px); line-height: 1.07; font-weight: 600; letter-spacing: -.055em; margin: 28px 0; }
.accent { color: #65d9bd; }
.intro { font-size: clamp(16px, 1.6vw, 20px); color: #a5b0bf; line-height: 1.65; }
.notice { display: flex; align-items: flex-start; gap: 18px; max-width: 570px; margin-top: 44px; padding: 24px; background: #18232c; border: 1px solid #31414c; border-radius: 16px; }
.notice-mark { color: #65d9bd; font-size: 27px; line-height: 1; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 9px; }
.notice p { margin: 0; font-size: 14px; line-height: 1.7; color: #a5b0bf; }
footer { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; border-top: 1px solid #2c3542; padding-top: 24px; color: #8793a4; font-size: 11px; letter-spacing: .05em; }
@media (max-width: 600px) { body { padding-top: 24px; } .wide { display: none; } .notice { padding: 20px; } }