/* ===============  ZMIENNE  =============== */
:root{
  --gold: #f7d774;
  --gold-strong: #ffd678;
  --ink: #e9ecff;
  --bg: #0a0d23;
  --card: rgba(10,13,35,.78);
  --border: rgba(255,255,255,.08);

  --chip: rgba(255,255,255,.06);
  --chip-h: rgba(255,255,255,.12);

  --btn: #4b56ff;
  --btn-h: #3944ff;

  --ghost: rgba(255,255,255,.09);
  --ghost-h: rgba(255,255,255,.16);

  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --radius: 22px;
}

/* ===============  RESET  =============== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===============  GLOBAL TŁO  =============== */
.site-bg{
  position: fixed;
  inset: 0;
  z-index:-2;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(1600px 800px at 50% 110%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%),
    url('tlo_galaktyczne.jpg') center/cover no-repeat fixed;
  filter: saturate(1.05) contrast(1.05);
}

/* ===============  KONTENER  =============== */
.container{
  width:min(1120px, 100%);
  margin-inline:auto;
  padding: clamp(16px, 2.5vw, 28px);
}

/* ===============  KARTY/SEKCJE  =============== */
.card{
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 28px);
  margin: clamp(14px, 2.2vw, 22px) auto;
  backdrop-filter: blur(3px);
}

.card--flush{
  padding:0;
}

/* ===============  TYPO  =============== */
.h2{
  font-family: Cinzel, serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(26px, 4.2vw, 40px);
  margin: 0 0 .4em 0;
  text-align:center;
}
.gold{ color: var(--gold); }
.gold-strong{ color: var(--gold-strong); }

.lead{
  font-size: clamp(16px, 2.4vw, 20px);
  text-align:center;
  margin: 0 0 1.2em 0;
}

/* ===============  OBRAZY  =============== */
.hero-img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.figure{
  display:block;
  margin-inline:auto;
  width:100%;
}
.figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius: calc(var(--radius) - 4px);
  box-shadow: var(--shadow);
}

/* ===============  NAWIGACJA I PRZYCISKI  =============== */
.nav{
  display:grid;
  gap: clamp(12px, 2vw, 20px);
  justify-items:center;
  margin: 14px 0 8px;
}

.nav__links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

.chip{
  display:inline-block;
  padding:.6em 1em;
  border-radius: 999px;
  text-decoration:none;
  color:var(--ink);
  background: var(--chip);
  border:1px solid var(--border);
  transition: .18s;
}
.chip:hover{ background: var(--chip-h); }

/* Główne buttony */
.btn{
  display:inline-block;
  font-weight:700;
  padding:.9em 1.4em;
  border-radius: 999px;
  text-decoration:none;
  border:1px solid transparent;
  box-shadow: var(--shadow);
  transition: .18s;
}
.btn--primary{ background: var(--btn); color:#fff; }
.btn--primary:hover{ background: var(--btn-h); }

.btn--ghost{
  color:var(--ink);
  background: var(--ghost);
  border-color: var(--border);
}
.btn--ghost:hover{ background: var(--ghost-h); }

.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:.5em;
}

/* ===============  STOPKA  =============== */
.footer{
  text-align:center;
  font-size:.95rem;
  opacity:.9;
  margin-top: 10px;
}
.footer a{ color:var(--gold); text-decoration:none; border-bottom:1px solid transparent; }
.footer a:hover{ border-color:var(--gold); }
.music-credit {
  color: gold;
  font-size: 14px;
  text-align: center;
  font-style: italic;
  margin-top: 20px;
}