/* =========================================================
   RAUWE HAP — STYLE.CSS
   ========================================================= */

/* ---------- CSS VARS ---------- */
:root{
  --bg:#070b12;
  --bg2:#0b1220;
  --text:#e5e7eb;
  --muted:rgba(226,232,240,.72);
  --accent:#ef4444;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
  --max:1100px;
}

/* ---------- RESET ---------- */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(239,68,68,.22), transparent 55%),
    radial-gradient(1200px 500px at 80% 0%, rgba(245,158,11,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

/* ---------- LAYOUT ---------- */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}
.muted{ color:var(--muted) }

.site-main{
  padding-bottom:40px;
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,11,18,.72);
  border-bottom:1px solid rgba(148,163,184,.16);
}
.header-inner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand-logo{
  height:46px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

/* ---------- NAV ---------- */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-link{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:600;
  font-size:14px;
  color:rgba(226,232,240,.9);
}
.nav-link:hover{
  border-color:rgba(148,163,184,.28);
  background:rgba(255,255,255,.04);
}
.nav-cta{
  border-color:rgba(239,68,68,.45);
  background:rgba(239,68,68,.10);
}

/* ---------- MOBILE NAV ---------- */
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.04);
}
.nav-toggle span{
  display:block;
  height:2px;
  width:18px;
  background:rgba(226,232,240,.9);
  margin:5px auto;
  border-radius:2px;
}

.mobile-nav{
  border-top:1px solid rgba(148,163,184,.16);
  background: rgba(7,11,18,.88);
}
.mobile-nav-inner{
  padding:12px 18px;
  display:grid;
  gap:10px;
}
.mobile-link{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.03);
  font-weight:700;
}
.mobile-cta{
  border-color:rgba(239,68,68,.55);
  background:rgba(239,68,68,.10);
}

/* =========================================================
   HERO — HOMEPAGE
   ========================================================= */
.hero{
  position:relative;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.hero-media{
  width:100%;
  aspect-ratio:21/9;
  background:
    linear-gradient(90deg,
      rgba(7,11,18,.78) 0%,
      rgba(7,11,18,.48) 36%,
      rgba(7,11,18,.18) 64%,
      rgba(7,11,18,.76) 100%
    ),
    url("../img/hero-21x9.png") center 22% / cover no-repeat;
  filter:saturate(1.06) contrast(1.10);
}

/* =========================================================
   SECTIONS & CARDS
   ========================================================= */
.section{ padding:26px 0 }
.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top:1px solid rgba(148,163,184,.10);
  border-bottom:1px solid rgba(148,163,184,.10);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
h2{ font-size:26px; margin:0 0 10px }
h3{ font-size:18px; margin:0 0 10px }

.card{
  background: radial-gradient(circle at top, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(148,163,184,.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad{ padding:16px }

/* ---------- AUDIO ---------- */
.audio-list{ display:grid; gap:12px; padding:16px }
.audio-item{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.03);
}
.audio-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.audio-sub{
  font-size:12px;
  color:rgba(226,232,240,.65);
}
audio{ width:100% }

/* ---------- GRID ---------- */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

/* ---------- CTA ---------- */
.cta-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.cta-label{ font-size:12px; color:rgba(226,232,240,.7) }
.cta-value{ font-weight:900 }

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid rgba(148,163,184,.12);
  padding:18px 0;
  background: rgba(7,11,18,.72);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 820px){
  .nav{ display:none }
  .nav-toggle{ display:inline-block }
  .grid-2{ grid-template-columns:1fr }
  .hero-media{ aspect-ratio:16/9 }
}
@media (max-width: 520px){
  .hero-media{ aspect-ratio:4/3 }
}