/* Barber King — slide pages with fixed background + scroll snapping */
/* Reset / base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root {
  --brand:#e2b200;        /* złoty przycisk */
  --brand-2:#f3cc2e;
  --fg:#f7f7f7;
  --muted:#d3d3d3;
  --bg:#0a0a0a;
  --overlay: rgba(0,0,0,.50);
  --glass: color-mix(in oklab, #111 40%, transparent);
  --max: 1100px;
}
/* Body + global fixed background image */
body {
  margin: 0;
  color: var(--fg);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  min-height: 100svh;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("../assets/bg.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: brightness(.38);
  transform: translateZ(0);
}
a { color: inherit; text-decoration: none; }
.container { width: min(100% - 2rem, var(--max)); margin-inline: auto; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, black 72%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav {
  display:flex; align-items:center; gap: 22px; padding: .65rem .75rem;
}
.nav .brand { display:flex; align-items:center; gap:.65rem; font-weight:700; }
.nav img { width: 32px; height: 32px; }
.nav ul { list-style:none; display:flex; gap: 18px; margin:0; padding:0; }
.nav a.link { opacity:.85; padding:.4rem .6rem; border-radius: 10px; }
.nav a.link:hover { background: rgba(255,255,255,.06); opacity:1; }
.nav a.active { outline: 2px solid rgba(255,255,255,.14); }
.nav .spacer { flex:1; }
.cta {
  background: linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#111; padding:.55rem .95rem; border-radius: 999px;
  font-weight:800; border: none; cursor:pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.cta:hover { transform: translateY(-1px); }
@media (max-width: 920px){
  .nav ul { display:none; }
}

/* Slide wrapper */
.wrapper {
  height: calc(100svh - 64px); /* header ~64px */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0px;
  overscroll-behavior: none;
}
.panel {
  position: relative;
  min-height: calc(100svh - 64px);
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: clamp(28px, 4vw, 48px) 16px;
}
.panel::after{
  content:"";
  position:absolute; inset:0;
  background: var(--overlay);
  z-index:-1;
}

/* Content cards */
.card {
  width: min(100%, 900px);
  background: color-mix(in oklab, #000 58%, transparent);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: clamp(18px, 2.8vw, 34px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
h1, h2, h3 { font-family: ui-serif, Georgia, "Times New Roman", serif; line-height:1.15; margin: 0 0 .35em; }
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(24px, 3.6vw, 36px); }
.lead { font-size: clamp(16px, 2.1vw, 20px); opacity:.95; }
.grid { display:grid; gap:12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 720px){ .grid{ grid-template-columns:1fr; }}

/* Dots (progress indicators) */
.dots {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 60;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: transparent; opacity:.7;
  transition: transform .2s ease, background .2s ease, opacity .2s;
}
.dot.active { background: var(--brand); border-color: #111; opacity:1; transform: scale(1.15); }

/* Buttons / tags */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.tag { font-size:.85rem; opacity:.9; padding:.25rem .55rem; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);}

/* Footer mini */
.footer {
  padding: 24px 0; font-size: .9rem; color: #ddd;
  border-top: 1px solid rgba(255,255,255,.1);
  background: color-mix(in oklab, black 70%, transparent);
}
.footer .muted { opacity:.75; }