:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #111c20; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
.welcome { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 28px; position: relative; background: radial-gradient(ellipse at 50% 40%, #233338 0%, #152328 42%, #0c1519 100%); }
.welcome::before { content: ""; position: absolute; inset: 22px; border: 1px solid #e7b48530; pointer-events: none; }
.welcome-content { width: min(100%, 590px); display: flex; flex-direction: column; align-items: center; gap: clamp(48px, 8vh, 80px); }
.logo { display: block; width: 100%; height: auto; }
.menu-button { display: flex; align-items: center; justify-content: center; gap: 36px; min-width: 192px; min-height: 56px; padding: 18px 30px; border: 1px solid #e7b485; color: #e7b485; text-decoration: none; text-transform: uppercase; font-size: 12px; letter-spacing: 3px; transition: background .2s, color .2s; }
.menu-button span { font-size: 19px; line-height: 1; }
.menu-button:hover { background: #e7b485; color: #111c20; }
.menu-button:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
@media (max-width: 480px) { .welcome { padding: 40px; } .welcome::before { inset: 14px; } .welcome-content { gap: 52px; } }
@media (prefers-reduced-motion: reduce) { .menu-button { transition: none; } }