:root { color-scheme: dark; background: #0b0b0b; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: #0b0b0b; }
body { min-height: 100svh; }
.landing { display: grid; min-height: 100svh; place-items: center; padding: clamp(1.5rem, 6vw, 5rem); overflow: hidden; }
.brand { display: flex; width: min(76vw, 36rem); align-items: center; flex-direction: column; transform: translateY(-1.5vh); }
.brand__logo { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.socials { display: flex; align-items: center; justify-content: center; gap: clamp(1.35rem, 4.5vw, 2.4rem); margin-top: clamp(-1.75rem, -3vw, -.75rem); }
.social { display: grid; width: clamp(2.75rem, 5vw, 3.25rem); height: clamp(2.75rem, 5vw, 3.25rem); place-items: center; color: #fff; border-radius: 50%; opacity: .82; transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease; }
.social svg { width: clamp(1.35rem, 2.5vw, 1.65rem); height: clamp(1.35rem, 2.5vw, 1.65rem); overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.social .fill { fill: currentColor; stroke: none; }
.social:hover, .social:focus-visible { opacity: 1; transform: translateY(-3px); background: rgba(255,255,255,.08); }
.social:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 480px) { .brand { width: min(88vw, 25rem); } .socials { margin-top: -.5rem; } }
@media (max-height: 560px) and (orientation: landscape) { .brand { width: min(48vh, 24rem); } .socials { margin-top: -.75rem; } }
@media (prefers-reduced-motion: reduce) { .social { transition: none; } }