.landing { min-height: 100vh; overflow-x: hidden; }
.landing-bg { position: fixed; inset: 0; z-index: -1; background: #000 url(/media/bg_arena.jpg) center / cover no-repeat; }
.landing-video { position: absolute; inset: 0; isolation: isolate; }
.landing-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.landing-bg video.ready { opacity: .9; }
.landing-tint { position: absolute; inset: 0; mix-blend-mode: multiply; background: radial-gradient(60% 70% at 12% 88%, var(--accent), transparent 72%), radial-gradient(55% 65% at 88% 12%, var(--accent-2), transparent 72%), linear-gradient(125deg, var(--accent), var(--accent-2)); }
.landing-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 45%, rgba(6, 8, 14, .45), rgba(6, 8, 14, .92)); }
.landing-main { width: min(100%, 860px); margin: 0 auto; padding: 8vh 20px 60px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.landing-logo { height: 120px; width: auto; max-width: min(640px, 88vw); object-fit: contain; filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .55)); }
.landing-cup { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 50px rgba(255, 200, 80, .25)); animation: float 6s ease-in-out infinite; }
.landing h1 { font: 900 clamp(34px, 7vw, 64px)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: -.02em; background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--accent) 50%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 560px; color: var(--muted); font-size: 17px; }
.landing-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; width: 100%; margin-top: 18px; }
.landing-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; text-align: left; border-radius: 20px; background: rgba(16, 21, 31, .72); border: 1px solid var(--line-2); backdrop-filter: blur(16px); transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; }
.landing-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 20px 50px color-mix(in srgb, var(--accent) 18%, transparent); }
.landing-card b { font: 700 18px/1.2 var(--font); margin-top: 8px; }
.landing-card span:last-child { color: var(--muted); font-size: 14px; }
.landing-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.landing-ico .ico { width: 26px; height: 26px; }
.landing-screen { width: 100%; max-width: 520px; margin-top: 22px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.landing-screen label { font-size: 13px; font-weight: 600; color: var(--muted); }
.landing-screen-row { display: flex; gap: 8px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }