/* Rollatrax landing (endless runner). Placeholder palette until splash art lands: deep night blue, electric orange + cyan. */
:root {
    --ink: #080b14;
    --night: #0e1322;
    --neon-pink: #ff8a1f;
    --neon-teal: #2ee6ff;
    --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(8, 11, 20, .85), rgba(8, 11, 20, 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, 138, 31, .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; }
/* No splash art yet: a road running to a vanishing point, drawn in CSS. */
.hero-placeholder { position: relative; background: radial-gradient(ellipse at 50% 34%, #1c2a52 0%, #0e1322 45%, #080b14 80%); }
.hero-placeholder::before, .hero-placeholder::after { content: ''; position: absolute; inset: 0; }
.hero-placeholder::before { /* glowing road edges */
    background: linear-gradient(to bottom, rgba(255, 138, 31, .15), #ff8a1f);
    clip-path: polygon(49% 34%, 51% 34%, 100% 100%, 0 100%);
}
.hero-placeholder::after { /* road surface with a dashed centre line */
    background:
        repeating-linear-gradient(to bottom, rgba(46, 230, 255, .85) 0 26px, transparent 26px 46px) center / 6px 100% no-repeat,
        #0b1020;
    clip-path: polygon(49.6% 34%, 50.4% 34%, 96% 100%, 4% 100%);
}
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(8, 11, 20, 0) 55%, rgba(8, 11, 20, .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, 138, 31, .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(46, 230, 255, .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; }
}