/* Nitro Renegade landing. Neon-noir street racing: near-black night, hot magenta + teal neon. */
:root {
    --ink: #07070c;
    --night: #0e0d17;
    --neon-pink: #ff2fb4;
    --neon-teal: #19e3d2;
    --text: #f2eef8;
    --muted: #a59fb8;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--ink); color: var(--text); }
body { font-family: 'Fredoka', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }

nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    padding-top: env(safe-area-inset-top, 0px);
    background: linear-gradient(rgba(7, 7, 12, .85), rgba(7, 7, 12, 0));
}
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; }
.logo { text-decoration: none; }
.logo-text {
    font-family: 'Press Start 2P', monospace; font-size: 14px; letter-spacing: 1px; color: var(--text);
    text-shadow: 0 0 6px var(--neon-pink), 0 0 16px rgba(255, 47, 180, .6);
}

main { flex: 1; }

.hero { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; }
.hero picture, .hero-art { display: block; width: 100%; height: 100%; }
.hero-art { object-fit: cover; object-position: center; }
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(7, 7, 12, 0) 55%, rgba(7, 7, 12, .9));
}

.hero-title { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 2; text-align: center; padding: 0 20px; }
.hero-title h1 {
    margin: 0; font-family: 'Press Start 2P', monospace; font-weight: 400;
    font-size: clamp(22px, 5vw, 56px); line-height: 1.25; color: var(--text);
    text-shadow: 0 0 8px var(--neon-pink), 0 0 24px var(--neon-pink), 0 0 48px rgba(255, 47, 180, .5);
}
.hero-title sup { font-size: .4em; vertical-align: super; }
.hero-sub {
    margin: 18px 0 0; font-size: clamp(14px, 2vw, 18px); letter-spacing: 4px; text-transform: uppercase;
    color: var(--neon-teal); text-shadow: 0 0 10px rgba(25, 227, 210, .7);
}

footer {
    background: var(--night); color: var(--muted); font-size: 13px; text-align: center;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
}
footer a { color: var(--text); text-decoration: none; }
footer a:hover { color: var(--neon-pink); }
footer .sep { margin: 0 8px; opacity: .5; }

@media (orientation: portrait) and (max-width: 900px) {
    .hero-title { top: 16vh; bottom: auto; }
}