* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #0b0b0d; color: #f5f5f2; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 34px 42px 26px; overflow: hidden; }
.brand { font-size: 15px; font-weight: 800; letter-spacing: .18em; }
.brand span { opacity: .45; font-weight: 600; }
.hero { margin: auto; width: min(100%, 1100px); text-align: center; }
.eyebrow { margin: 0 0 18px; font-size: 12px; letter-spacing: .32em; font-weight: 700; opacity: .45; }
h1 { margin: 0; font-size: clamp(64px, 12vw, 168px); line-height: .83; letter-spacing: -.075em; font-weight: 900; }
h1 span { opacity: .5; }
.subtitle { margin: 30px 0 0; color: rgba(245,245,242,.58); font-size: clamp(14px, 1.5vw, 18px); letter-spacing: .04em; }
.socials { display: flex; justify-content: center; gap: 12px; margin-top: 42px; }
.social { display: inline-flex; align-items: center; gap: 10px; min-width: 142px; justify-content: center; padding: 12px 18px; border: 1px solid rgba(245,245,242,.14); border-radius: 999px; color: #f5f5f2; text-decoration: none; font-size: 13px; font-weight: 650; letter-spacing: .02em; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.social:hover { transform: translateY(-2px); background: rgba(245,245,242,.08); border-color: rgba(245,245,242,.3); }
.social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social:nth-child(2) svg { fill: currentColor; stroke: none; }
footer { text-align: center; color: rgba(245,245,242,.28); font-size: 11px; letter-spacing: .08em; }
@media (max-width: 600px) { .page { padding: 26px 20px 20px; } .socials { flex-direction: column; align-items: center; } .social { width: min(100%, 220px); } }