/* ======================
GLOBAL
====================== */

:root{
--cyan:#00E5FF;
--orange:#FF4D00;
--bg:#0A0A0A;
--gold: rgb(201, 168, 76);
--dark-bg: rgb(10, 10, 10);
--text-light: rgba(255, 255, 255, 0.4);
--grid:rgba(0,229,255,.04);
}

.containera {
max-width: 1200px;
margin: 0 auto;
font-family: "JetBrains Mono", monospace;
color: var(--gold);
}


*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
background:var(--bg);
color:white;
font-family:'JetBrains Mono', monospace;
overflow-x:hidden;
}

/* grid */

.grid-bg{
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg,var(--grid) 1px, transparent 1px);
background-size:50px 50px;
}

/* ======================
NAV
====================== */

nav{
position:fixed;
top:0;
left:0;
right:0;
height:60px;
background:rgba(10,10,10,.9);
backdrop-filter:blur(6px);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
border-bottom:1px solid rgba(255,255,255,.08);
z-index:100;
}

#menuBtn{
cursor:pointer;
border:1px solid rgba(0,229,255,.3);
padding:8px 10px;
}

#mapOverlay{
position:fixed;
inset:0;
background:#050505;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:30px;
font-size:28px;
font-family:'Inter Tight';
transform:translateY(-100%);
transition:.4s;
z-index:200;
}

#mapOverlay.active{
transform:translateY(0);
}

.brand{
display:flex;
align-items:center;
gap:12px;
letter-spacing:.15em;
font-size:12px;
}

.brand-dot{
width:8px;
height:8px;
background:var(--cyan);
border-radius:50%;
box-shadow:0 0 10px var(--cyan);
}

.nav-links{
display:flex;
gap:28px;
font-size:12px;
letter-spacing:.15em;
}

.nav-links a{
color:rgba(255,255,255,.6);
text-decoration:none;
}

.nav-links a:hover{
color:white;
}

/* ======================
LEFT RAIL
====================== */

#rail{
position:fixed;
left:24px;
top:0;
height:100vh;
width:2px;
background:rgba(255,255,255,.08);
z-index:20;
}

#progress{
width:100%;
height:0%;
background:var(--cyan);
box-shadow:0 0 10px var(--cyan),0 0 25px rgba(0,229,255,.3);
}

/* ======================
SECTIONS
====================== */

section{
padding:120px 10vw;
position:relative;
}

/* ======================
HERO
====================== */

.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
}

.hero h1{
font-family:'Inter Tight',sans-serif;
font-weight:900;
font-size:clamp(60px,10vw,110px);
margin:0;
letter-spacing:-.02em;
}

.hero h2{
font-family:'Inter Tight',sans-serif;
font-size:clamp(36px,6vw,60px);
margin:10px 0 30px 0;
color:var(--orange);
}

.hero-line{
height:2px;
background:var(--cyan);
margin:40px 0;
box-shadow:0 0 10px var(--cyan);
}

.hero-rail{
position:relative;
height:2px;
background:rgba(0,229,255,.15);
margin:40px 0;
overflow:hidden;
}

.hero-rail::after{
content:"";
position:absolute;
left:-50%;
top:0;
width:50%;
height:100%;
background:linear-gradient(
90deg,
transparent,
#00E5FF,
transparent
);
animation:trainSweep 4s linear infinite;
}

@keyframes trainSweep{
0%{left:-50%}
100%{left:100%}
}

.rail-dot{
position:absolute;
left:50%;
transform:translate(-50%,-50%);
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,.2);
transition:all .3s;
}

.rail-dot.active{
background:#00E5FF;
box-shadow:0 0 10px #00E5FF;
}

.stop-pills{
display:flex;
gap:10px;
margin-top:20px;
flex-wrap:wrap;
}

.pill{
border:1px solid rgba(255,255,255,.2);
padding:6px 12px;
font-size:11px;
letter-spacing:.15em;
cursor:pointer;
}

.pill.orange{
border-color:#FF4D00;
color:#FF4D00;
}

.pill.cyan{
border-color:#00E5FF;
color:#00E5FF;
}

/* ======================
COUNTDOWN
====================== */

.countdown{
display:flex;
gap:24px;
margin-top:20px;
}

.digit{
background:#111;
border:1px solid rgba(0,229,255,.25);
border-radius:4px;
font-family:'Inter Tight',sans-serif;
font-weight:900;
font-size:clamp(36px,6vw,70px);
padding:20px 30px;
min-width:100px;
text-align:center;
}

.label{
text-align:center;
font-size:10px;
letter-spacing:.2em;
opacity:.5;
margin-top:8px;
}

/* ======================
ROUTE MAP
====================== */

.route-header{
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:60px;
}

.route-title{
font-family:'Inter Tight',sans-serif;
font-size:70px;
font-weight:900;
}

.route-sub{
font-size:12px;
letter-spacing:.2em;
color:var(--cyan);
}

/* stops */

.stops{
display:grid;
gap:60px;
}

.stop{
display:grid;
grid-template-columns:200px 1fr 320px;
border-top:1px solid rgba(255,255,255,.08);
padding-top:40px;
}

.time{
font-family:'Inter Tight',sans-serif;
font-size:72px;
font-weight:900;
}

.time.cyan{color:var(--cyan)}
.time.orange{color:var(--orange)}

.stop-info{
padding:0 40px;
}

.stop-info h3{
font-family:'Inter Tight',sans-serif;
font-size:32px;
margin:10px 0;
}

.stop-meta{
font-size:11px;
letter-spacing:.2em;
color:rgba(255,255,255,.5);
}

.stop-img{
height:180px;
background:#111;
background-size:cover;
background-position:center;
}

/* ======================
STADIUM
====================== */

.stadium{
text-align:;
}

.stadium h2{
font-family:'Inter Tight',sans-serif;
font-size:48px;
margin-bottom:20px;
}

.badge{
display:inline-block;
padding:8px 16px;
border:1px solid var(--cyan);
margin:6px;
font-size:12px;
letter-spacing:.15em;
}

header.location-header {
display: flex;
align-items: center;
gap: 12px;
font-size: 11px;
letter-spacing: 0.3em;
margin-bottom: 24px;
color: var(--gold);
}

.event-title h2 {
font-family: "Inter Tight", sans-serif;
font-size: clamp(72px, 10vw, 140px);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 0.85;
margin-bottom: 32px;
}

.title-main { color: white; }
.title-sub {
color: var(--gold);
font-size: 55%;
margin-top: 8px;
display: block;
text-shadow: rgba(201,168,76,0.4) 0 0 40px;
letter-spacing: -0.02em;
}

.divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(201,168,76,0.6), transparent);
border: none;
margin-bottom: 40px;
}

.event-schedule .event-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
background: rgba(201,168,76,0.1);
border: 1px solid rgba(201,168,76,0.15);
max-width: 700px;
margin-bottom: 48px;
}

.event-card {
background: var(--dark-bg);
padding: 28px 24px;
}

.event-label {
font-size: 10px;
letter-spacing: 0.25em;
color: var(--text-light);
margin-bottom: 10px;
}

.event-time {
font-family: "Inter Tight", sans-serif;
font-size: clamp(36px, 6vw, 64px);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1;
color: white;
}

.event-time.highlight {
color: var(--gold);
text-shadow: rgba(201,168,76,0.25) 0 0 30px;
}

.event-info {
font-size: clamp(13px, 1.8vw, 16px);
line-height: 1.8;
color: rgba(255,255,255,0.45);
max-width: 560px;
margin-bottom: 32px;
}

footer.links {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 16px;
align-items: center;
}

.btn-directions {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: 1px solid rgba(201,168,76,0.5);
background: rgba(201,168,76,0.08);
color: var(--gold);
font-size: 11px;
letter-spacing: 0.2em;
text-decoration: none;
font-weight: 700;
}

address.address {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border: 1px solid rgba(201,168,76,0.2);
background: rgba(201,168,76,0.04);
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(201,168,76,0.7);
}

.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}

/* ======================
FAQ
====================== */

.faq-item{
border-top:1px solid rgba(255,255,255,.1);
padding:20px 0;
cursor:pointer;
}

.faq-q{
font-weight:bold;
}

.faq-a{
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
opacity:.7;
margin-top:10px;
}

.faq-item.active .faq-a{
max-height:200px;
}

/* ======================
MOBILE
====================== */

@media(max-width:900px){

.stop{
grid-template-columns:1fr;
}

.stop-info{
padding:20px 0;
}

}