:root{
  --bg:#0b0b0b; --gold:#C9A34E; --text:#F5F2EA; --muted:#a7a29a;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;display:block}

.app-header{position:sticky;top:0;z-index:9;display:flex;justify-content:center;padding:10px 12px 0;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0))}
.logo{width:56px;height:56px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}

.view{padding:20px 16px 96px;min-height:60vh;position:relative}
.view:not(.active){display:none}
.view h2{font-size:22px;letter-spacing:.03em;margin:8px 0 12px}
.subtle{color:var(--muted);margin-top:-6px}
.hero{margin-top:8vh;text-align:center}
.brand{font-size:44px;letter-spacing:.06em;margin:0 0 6px;color:var(--gold);text-shadow:0 8px 30px rgba(201,163,78,.22)}
.event{font-size:18px;letter-spacing:.2em;margin:0 0 8px;color:var(--gold);opacity:.85}
.meta{color:var(--muted);margin:4px 0}
.cta{display:inline-block;margin-top:18px;background:var(--gold);color:#111;padding:14px 18px;border-radius:var(--radius);text-decoration:none;font-weight:700;box-shadow:var(--shadow)}

.card-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.card h3{margin:0 0 4px;font-size:16px}
.card p{margin:4px 0;color:var(--muted)}

.tabbar{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:rgba(20,20,20,.8);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:6px;z-index:10;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.tabbar button{appearance:none;border:0;background:transparent;color:var(--text);padding:8px 10px;border-radius:12px;font-weight:600}
.tabbar button.active{background:rgba(201,163,78,.18);border:1px solid rgba(201,163,78,.35);color:var(--gold)}

/* Backgrounds */
.bg-landing::before,
.bg-program::before,
.bg-porsche::before{
  content:'';position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.18;
}
.bg-landing::before{ background-image:url('assets/landing_bg.png'); opacity:.22; }

/* DJ vibe background: subtle equalizer stripes */
.bg-program{overflow:hidden}
.bg-program::before{ 
  background-image: linear-gradient(180deg, rgba(201,163,78,.10), rgba(201,163,78,0) 60%);
  opacity:.18;
}
.bg-program::after{
  content:''; position:absolute; inset:-20% -20% -10% -20%; z-index:-2;
  background:
    repeating-linear-gradient(90deg, rgba(201,163,78,.08) 0 2px, transparent 2px 10px),
    radial-gradient(1000px 600px at 50% -120px, rgba(201,163,78,.18), transparent);
  opacity:.12;
}

.bg-porsche::before{ background-image:url('assets/porsche_bg.png'); opacity:.35; }
.bg-porsche .overlay{ background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2)); padding:24px 16px; border-radius:16px; margin-top:10vh; }

.placeholder .card::after{content:'Hamarosan…'; color:#a7a29a}

@media (min-width:900px){
  .view{max-width:840px;margin:0 auto}
  .tabbar{bottom:16px}
}