/* =====================================================================
   LofToDance — strona wydarzenia "15 Urodziny"
   Odwzorowanie projektu z PDF (frame 1536 x 5625 px).
   Skala: 1rem = 10 px projektu. Root font-size skaluje sie z viewportem,
   dzieki czemu uklad desktopowy jest proporcjonalnie 1:1.
   ===================================================================== */

:root{
  --bg:        #0C0C0C;   /* tlo strony            */
  --panel:     #121212;   /* duzy panel / sekcje   */
  --card:      #1C1B1A;   /* karty wewnetrzne      */
  --yellow:    #FEDC3C;   /* akcent                */
  --line:      rgba(254,220,60,.85);
  --stroke:    rgba(255,255,255,.13);
  --stroke-s:  rgba(255,255,255,.07);
  --track:     #575D5D;
  --txt:       #FFFFFF;
  --txt-dim:   rgba(255,255,255,.88);
  --ff:        'Asap', 'Barlow', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

/* --- skala --------------------------------------------------------- */
/* Wartości w % zamiast px, żeby szanować rozmiar czcionki ustawiony w przeglądarce
   (41.6% ≈ 6.66px, 62.5% = 10px przy domyślnych 16px). */
html{ font-size: clamp(41.6%, 0.651vw, 62.5%); }   /* 100vw / 153.6 — desktop 1:1 */
@media (max-width:1023px){ html{ font-size: clamp(50%, 2.3vw, 65.6%); } }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--ff); font-size:2.2rem; line-height:1.35;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; margin:0; padding:0; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:800; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--yellow); color:#000; padding:1rem 2rem; border-radius:0 0 .8rem 0;
}
.skip-link:focus{ left:0; }

.sr-only{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.fs{ border:0; margin:0; padding:0; min-width:0; }
.fs > legend{ float:left; width:100%; padding:0; margin-bottom:2.4rem; }   /* float = legend zachowuje się jak zwykły blok */
/* element pod legendą opływa ją (clear), więc jego margin-top i tak by zniknął — odstęp daje margin-bottom legendy */
.fs > legend + *{ clear:both; }
.fs > legend + .pack, .fs > legend + .opt{ margin-top:0; }
html.nav-open{ overflow:hidden; }

.wrap{ width:100%; max-width:153.6rem; margin-inline:auto; position:relative; }
.center{ display:flex; justify-content:center; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(12,12,12,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--stroke-s);
}
.hdr{
  height:10.31rem; display:flex; align-items:center;
  padding-left:3.28rem; padding-right:5.3rem;
}
.brand img{ width:18.04rem; height:auto; }

.nav{ display:flex; align-items:center; gap:4.5rem; margin-left:5.4rem; flex:1; }
.nav__link{
  font-size:2.3rem; font-weight:500; text-transform:uppercase; letter-spacing:.005em;
  position:relative; padding-block:1rem; white-space:nowrap; transition:color .18s;
}
.nav__link:hover{ color:var(--yellow); }
.nav__link.is-active{ color:var(--yellow); }
.nav__link.is-active::after{
  content:""; position:absolute; left:-.9rem; right:-.8rem; bottom:-1.1rem;
  height:.2rem; background:var(--yellow);
}
.nav__logo img{ width:9.18rem; }
.nav__actions{ display:flex; align-items:center; gap:1.25rem; margin-left:auto; }
.icon-btn{ display:grid; place-items:center; width:4.23rem; height:4.23rem; margin-left:1.9rem; }
.icon-btn img{ width:4.23rem; opacity:.95; }
.lang{
  font-size:2.3rem; font-weight:500; letter-spacing:.02em; margin-left:2.2rem;
  transition:color .18s;
}
.lang:hover{ color:var(--yellow); }

.burger{ display:none; width:5rem; height:4rem; margin-left:auto; flex-direction:column; justify-content:center; gap:.9rem; }
.burger span{ display:block; height:.3rem; background:var(--txt); border-radius:2px; transition:transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(1.2rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-1.2rem) rotate(-45deg); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; text-transform:uppercase; letter-spacing:.01em; white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s, transform .12s;
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--yellow); color:#0C0C0C; border:1px solid var(--yellow); }
.btn--solid:hover{ background:#fff0a0; border-color:#fff0a0; }
.btn--outline{ color:var(--yellow); border:1px solid var(--yellow); background:transparent; }
.btn--outline:hover{ background:rgba(254,220,60,.12); }

.btn--xs{ height:3.96rem; padding:0 1.9rem; border-radius:.8rem; font-size:max(1.55rem,11.5px); font-weight:600; }
.btn--md{ height:4.9rem; padding:0 3.2rem; border-radius:1.2rem; font-size:2.2rem; font-weight:500; }
.btn--lg{ height:6.79rem; padding:0 3.6rem; border-radius:1.2rem; font-size:3rem; font-weight:500; }
.btn--block{ display:flex; width:100%; height:5.8rem; border-radius:1.2rem; font-size:2.5rem; }

/* =====================================================================
   HERO HEAD (poza panelem)
   ===================================================================== */
.hero-head{ padding:0 6.83rem; position:relative; z-index:2; }

.tag{
  display:inline-flex; align-items:center; gap:1.05rem;
  height:4.9rem; padding:0 2.4rem 0 1.85rem; margin-top:5.24rem;
  border:1px solid var(--yellow); border-radius:2.45rem;
  font-size:2.2rem; font-weight:500; text-transform:uppercase; letter-spacing:.01em;
}
.tag b{ color:var(--yellow); font-weight:500; }
.tag__star{ width:3.64rem; height:3.64rem; }

.hero-title{
  margin:2.17rem 0 0 1.77rem;
  font-size:9.8rem; line-height:9.6rem; font-weight:800;
  letter-spacing:-.005em; text-transform:uppercase;
}
.hero-title span{ color:var(--yellow); }
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 2.8rem;
  margin:1.6rem 0 0 1.77rem; font-size:2.4rem; font-weight:500; text-transform:uppercase;
  text-shadow:0 .2rem 1.2rem rgba(0,0,0,.9), 0 0 .4rem rgba(0,0,0,.8);
}
.hero-meta b{ color:var(--yellow); font-weight:700; }
.hero-meta__cta{ display:none; }

/* --- poswiaty tla --------------------------------------------------- */
/* Tlo hero — dokladne pozycje warstw z projektu (rysowane pod panelem). */
.bg-glows{ position:absolute; inset:0 0 auto 0; height:115rem; z-index:0; pointer-events:none; overflow:hidden; }
.bg-glows img{ position:absolute; max-width:none; }   /* warstwy tła celowo wychodzą poza kontener */
.glow-1{ left:4.12rem;   top:11.05rem; width:148.58rem; height:93.93rem; }
.glow-2{ left:-.19rem;   top:10.29rem; width:73.28rem;  height:80.15rem; }
.glow-3{ left:-.19rem;   top:41.01rem; width:154.22rem; height:74.37rem; }
.glow-4{ left:110.91rem; top:10.09rem; width:43.17rem;  height:80.15rem; }

/* =====================================================================
   PANEL
   ===================================================================== */
.panel{
  position:relative; z-index:1;
  margin:2.36rem 4.3rem 0 4.55rem;
  padding:5.75rem 0 3.23rem;
  background:var(--panel);
  border:1px solid var(--stroke-s); border-bottom:0;
  border-radius:4rem 4rem 0 0;
}
.sec--cols{ padding-inline:7.48rem 3.01rem; }
.sec--full{ padding-inline:8.55rem 8rem; }
.sec--faq { padding-inline:2.61rem 3.16rem; }

.cols{ display:grid; grid-template-columns:91.9rem 37.42rem; column-gap:4.94rem; align-items:start; }
.cols > *{ min-width:0; }   /* karuzele nie rozpychaja siatki */

/* --- naglowki ------------------------------------------------------- */
.h-sm{ font-size:3.2rem; font-weight:700; text-transform:uppercase; line-height:1.1; }
.h-md{ font-size:3.4rem; font-weight:700; text-transform:uppercase; line-height:1.1; }
.h-sub{ font-size:3rem; font-weight:700; text-transform:uppercase; color:var(--yellow); line-height:1.1; }
.h-sm span,.h-md span{ color:var(--yellow); }

.rule{ height:1px; border:0; margin:0; background:var(--line); opacity:.9; }

/* =====================================================================
   PLAKAT
   ===================================================================== */
.poster{
  margin:0; border:1.5px solid var(--yellow); border-radius:2.4rem; overflow:hidden;
  aspect-ratio:919/481; background:#000;
}
.poster img{ width:100%; height:100%; object-fit:cover; }

/* =====================================================================
   ZAUFALI NAM
   ===================================================================== */
.col-main > .block, .col-main > .rule{ margin-left:1.4rem; }
.block--trust{ margin-top:4.4rem; }
.partners-wrap{ width:87.2rem; max-width:100%; margin:1.5rem 0 0 -.53rem; overflow:hidden; contain:inline-size; }
.partners{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  height:9.1rem;
}
.partners li{ flex:0 0 11rem; display:grid; place-items:center; height:100%; }
.partners a{ display:block; width:100%; }

/* Logo się nie mieszczą → płynny pasek bez końca (JS dokleja kopię listy). */
.partners-wrap.is-marquee{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.partners-wrap.is-marquee .partners{ width:max-content; justify-content:flex-start; gap:0; }
/* odstęp jako margines (nie gap), żeby połowa paska = dokładnie jedna lista i pętla nie skakała */
.partners-wrap.is-marquee .partners li{ margin-right:4.5rem; }
.partners-wrap.is-rolling .partners{ animation:partnersRoll var(--dur, 30s) linear infinite; }
.partners-wrap.is-rolling:hover .partners,
.partners-wrap.is-rolling:focus-within .partners{ animation-play-state:paused; }
@keyframes partnersRoll{ to{ transform:translateX(-50%); } }
/* bez animacji (ustawienia systemu): zwykłe przewijanie */
.partners-wrap.is-marquee:not(.is-rolling){ overflow-x:auto; scrollbar-width:none; }
.partners-wrap.is-marquee:not(.is-rolling)::-webkit-scrollbar{ display:none; }
.partners img{ width:100%; height:7.4rem; object-fit:contain; opacity:.9; }
.block--trust + .rule{ margin-top:2.8rem; }

/* =====================================================================
   OPIS
   ===================================================================== */
.rule + .block{ margin-top:3.1rem; }
.desc{ max-width:81.5rem; margin-top:2.5rem; }
.desc__text{ font-size:2.5rem; line-height:2.85rem; font-weight:700; }
.link-more{
  display:block; margin-left:auto; margin-top:.2rem;
  font-size:max(1.8rem,12.5px); font-weight:700; text-transform:uppercase; color:var(--yellow);
}
.link-more:hover{ text-decoration:underline; }
.block:has(.desc) + .rule{ margin-top:2.1rem; }

/* =====================================================================
   DLA KOGO
   ===================================================================== */
.who{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; margin-top:1.5rem; }
.who__item{
  position:relative; min-height:20.4rem; border-radius:1.6rem; overflow:hidden;
  border:1px solid var(--stroke); background:var(--card);
  display:flex; flex-direction:column; align-items:center;
  padding:1.9rem 1rem 1.4rem; text-align:center;
}
.who__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.30; filter:saturate(.8);
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.who__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.55),rgba(12,12,12,.88));
}
.who__ico{ position:relative; z-index:2; height:6.4rem; width:auto; flex:none; }
.who__item p{ position:relative; z-index:2; margin-top:auto; padding-top:1.2rem; max-width:16ch; font-size:max(1.8rem,12.5px); font-weight:700; line-height:1.15; text-wrap:balance; }
.who + .rule, .block:has(.who) + .rule{ margin-top:4.4rem; }

/* =====================================================================
   ARTYSCI
   ===================================================================== */
.artists{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.9rem; margin-top:2.1rem; }
.artist{
  position:relative; height:30.91rem; border-radius:1.4rem; overflow:hidden;
  border:1px solid var(--stroke); background:#151515;
}
.artist img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.artist::after{
  content:""; position:absolute; inset:auto 0 0 0; height:60%;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.92));
}
.artist__badge{
  position:absolute; z-index:2; top:.8rem; left:3.8rem;
  display:grid; place-items:center; height:2.54rem; padding:0 1.3rem;
  background:var(--yellow); color:#0C0C0C; border-radius:1.27rem;
  font-size:max(1.5rem,11px); font-weight:700; text-transform:uppercase; letter-spacing:.01em;
}
.artist__name{
  position:absolute; z-index:2; left:0; right:0; bottom:1.9rem;
  width:min-content; max-width:calc(100% - 1.2rem); margin-inline:auto;
  text-align:center; font-size:2.8rem; font-weight:700; line-height:2.6rem;
  text-transform:uppercase;
}
.artist--tba{ display:grid; place-items:center; }
.artist__tba{ font-size:5.4rem; font-weight:800; color:var(--yellow); transform:translateY(-1.5rem); }
.artist--tba::after{ display:none; }
.artists + .center{ margin-top:2.9rem; }

/* =====================================================================
   SIDEBAR — BUYBOX
   ===================================================================== */
.col-side{ display:flex; flex-direction:column; }
.buybox{
  background:#131313; border:1px solid var(--stroke-s); border-radius:2.4rem;
  padding:2.8rem 2.38rem 3.6rem;
}
.buybox__sub{ margin-top:5rem; }

.countdown{ margin-top:2.4rem; }
.countdown__row{ display:grid; grid-template-columns:repeat(7,auto); justify-content:space-between; align-items:center; }
.countdown__row--lbl{ font-size:2.2rem; font-weight:500; }
.countdown__row--lbl i{ width:1.8rem; }
.countdown__row--val{ margin-top:1.6rem; font-size:3.1rem; font-weight:700; color:var(--yellow); }
.countdown__row--val i{ font-style:normal; color:var(--txt); font-weight:500; padding:0 .4rem; }
.countdown__row span{ text-align:center; min-width:5rem; }
.countdown__caption{ margin-top:1rem; text-align:center; font-size:max(1.6rem,11px); color:var(--txt-dim); }
.countdown.is-over .countdown__row{ opacity:.35; }
.countdown.is-over .countdown__caption{ color:var(--yellow); font-weight:700; }

.progress{ height:.6rem; border-radius:.3rem; background:var(--track); margin-top:2.2rem; overflow:hidden; }
.progress span{ display:block; height:100%; background:var(--yellow); border-radius:.3rem; }

.pack{
  margin-top:2.1rem; padding:2.2rem 4.2rem 2rem; border-radius:1.6rem;
  background:var(--card); border:1px solid var(--stroke);
  display:block; cursor:pointer; transition:border-color .18s, background .18s;
}
.buybox__sub + .pack{ margin-top:2.4rem; }
.pack:hover{ border-color:rgba(254,220,60,.5); }
.pack:has(input:checked){ border-color:var(--yellow); background:#22201a; }
.pack:has(input:focus-visible){ outline:2px solid var(--yellow); outline-offset:3px; }
.buybox.is-invalid .pack:not(:has(input:checked)){ border-color:rgba(255,120,90,.55); }
.pack__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.pack__top b{ font-size:2.4rem; font-weight:700; text-transform:uppercase; }
.pack__top em{ font-size:max(1.8rem,12.5px); font-style:normal; font-weight:500; text-transform:uppercase; }
.pack__desc{ display:block; margin-top:2.2rem; margin-inline:-1.35rem; font-size:max(1.06rem,10px); line-height:1.3; text-align:justify; color:var(--txt-dim); }
.pack__desc--c{ text-align:center; }

.opt{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1.6rem;
  width:100%; min-height:6.16rem; margin-top:2.15rem; padding:0 3.4rem;
  background:var(--card); border:1px solid var(--stroke); border-radius:1.2rem;
  font-size:2.4rem; font-weight:700; text-transform:uppercase;
  transition:border-color .18s;
}
.buybox__sub + .opt{ margin-top:2.4rem; }
.opt:hover{ border-color:rgba(254,220,60,.45); }
.opt--plain{ display:flex; justify-content:center; cursor:pointer; }
.opt--plain[aria-pressed="true"]{ border-color:var(--yellow); color:var(--yellow); }
.opt__price{ margin-left:.8rem; font-size:max(1.6rem,11px); font-weight:500; color:var(--txt-dim); text-transform:none; white-space:nowrap; }
.stepper{ display:grid; grid-template-columns:2.8rem 3.4rem 2.8rem; align-items:center; justify-items:center; gap:.9rem; }
.stepper button{ font-size:2.6rem; font-weight:500; line-height:1; padding:.4rem .6rem; color:var(--txt); }
.stepper button:hover:not(:disabled){ color:var(--yellow); }
.stepper button:disabled{ opacity:.3; cursor:default; }
.stepper output{
  display:grid; place-items:center; min-width:3.18rem; height:3.7rem; padding:0 .4rem;
  background:var(--yellow); color:#0C0C0C; border-radius:.6rem; font-size:2.2rem; font-weight:700;
}

.total{ margin-top:6rem; font-size:3.6rem; font-weight:700; text-transform:uppercase; }
.buybox__hint{ min-height:1.4em; margin-top:.8rem; font-size:max(1.7rem,12px); color:var(--yellow); }
.buybox__hint:empty{ min-height:0; }
.buybox__hint + .btn{ margin-top:1.9rem; }

.askbox{
  margin-top:13.69rem; padding:2.6rem 2.6rem 2.8rem; text-align:center;
  background:var(--panel); border:1px solid var(--stroke); border-radius:2.4rem;
}
.askbox p{ font-size:2.2rem; font-weight:700; text-transform:uppercase; line-height:1.18; }
.askbox span{ color:var(--yellow); }
.askbox .btn{ margin-top:1.5rem; }

/* =====================================================================
   ZDJĘCIA / FILM (pełna szerokość)
   ===================================================================== */
.sec--full .media{ margin-top:5rem; }
.media{
  margin:0; aspect-ratio:1282/481; overflow:hidden; background:#000;
  border:1.5px solid var(--yellow); border-radius:2.4rem;
}
.media img, .media video, .media iframe{ width:100%; height:100%; object-fit:cover; border:0; }

/* =====================================================================
   HARMONOGRAM
   ===================================================================== */
.sec--full.block{ margin-top:3.5rem; }
.days{ margin-inline:1.6rem 2.15rem; position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:.26rem; align-items:end; margin-top:3rem; }
.day{
  height:4.2rem; border-radius:1rem 1rem 0 0;
  background:var(--card); border:1px solid var(--stroke); border-bottom:0;
  font-size:2.4rem; font-weight:500; text-transform:uppercase; color:var(--txt);
  transition:background .18s,color .18s;
}
.day:hover{ color:var(--yellow); }
.day.is-active{ height:5.06rem; background:var(--yellow); border-color:var(--yellow); color:#0C0C0C; font-weight:600; }

.sched{
  position:relative; z-index:1; margin-top:-3.21rem; padding-top:3.21rem;
  border:1px solid var(--stroke); border-radius:1.6rem; overflow:hidden;
}
.sched__list li{
  display:grid; grid-template-columns:22.37rem 1fr; align-items:center;
  min-height:6.13rem; border-bottom:1px solid var(--stroke);
  font-size:2.6rem;
}
.sched__list li:last-child{ border-bottom:0; }
.sched__list span{ text-align:center; border-right:1px solid var(--stroke); align-self:stretch; display:grid; place-items:center; }
.sched__list p{ padding-left:4.7rem; }
.sched__list b{ font-weight:400; color:var(--yellow); }
.sched + .center{ margin-top:4.4rem; }

.rule-wrap{ margin-top:4.7rem; }
.rule-wrap + .sec{ margin-top:3rem; }
.rule-wrap + .sec--faq{ margin-top:6rem; }

/* =====================================================================
   JAK DOTRZEC
   ===================================================================== */
.reach{
  display:grid; grid-template-columns:43.46rem 40.4rem 1fr;
  column-gap:4.19rem; margin-top:2.6rem;
}
.reach__col:nth-of-type(3){ margin-left:3.4rem; }
.reach__map{
  display:block; border:1.5px solid var(--yellow); border-radius:1.6rem; overflow:hidden;
  aspect-ratio:4346/4178; background:#0f0f0f;
}
.reach__map img{ width:100%; height:100%; object-fit:cover; }
.reach__col p{ font-size:2.6rem; line-height:3.8rem; margin-top:1.6rem; }
.reach__col b{ color:var(--yellow); font-weight:400; }
.reach__col address{ font-style:normal; }
.reach__col p + .h-sub{ margin-top:3.2rem; }
.reach__col .h-sub + p{ margin-top:.6rem; }
.reach__col address + .h-sub, .reach__col p + .h-sub{ margin-top:3.2rem; }

/* =====================================================================
   OCENY
   ===================================================================== */
.reviews{ position:relative; margin-top:1.5rem; }
.reviews__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:21.17rem; gap:2.5rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:0 0 1rem .4rem; margin-right:9rem;
  scrollbar-width:none;
}
.reviews__track::-webkit-scrollbar{ display:none; }
.reviews__track{ scroll-padding-inline:.4rem 0; }   /* przyciąganie liczy wcięcie — lista startuje od zera */
.review{
  scroll-snap-align:start;
  display:flex; flex-direction:column; min-height:29.62rem; padding:2.7rem 2.4rem 2rem;
  background:var(--card); border:1px solid var(--stroke); border-radius:1.6rem;
}
.review p{ font-size:2.05rem; line-height:2.2rem; }
/* stała wysokość kafelka: długi tekst ucinamy, całość w okienku („Czytaj całą”) */
.review__text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden; }
.review__more{
  align-self:flex-start; margin-top:.8rem; padding:0;
  font-size:max(1.5rem,11px); font-weight:700; text-transform:uppercase; color:var(--yellow);
}
.review__more:hover{ text-decoration:underline; }
.review__mid{ margin:auto 0; text-align:center; }
.review .stars{ margin-top:auto; display:flex; gap:.72rem; }
.review .stars i{
  width:2.22rem; height:2.22rem; display:block;
  background:url(../img/star-solid.png) center/contain no-repeat;
}
.review b{ margin-top:1.4rem; font-size:2.8rem; font-weight:400; }
.reviews__nav{
  position:absolute; top:50%; right:1.5rem; transform:translateY(-50%);
  width:5.27rem; height:5.27rem; color:var(--yellow); line-height:0;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), filter .25s;
}
.reviews__nav--next{ top:calc(50% + 3.4rem); }
.reviews__nav--prev[hidden] + .reviews__nav--next{ top:50%; }   /* sama „dalej” — na środku */
/* wszystko się mieści — bez strzałek i bez zarezerwowanego na nie miejsca */
.reviews.is-static .reviews__track{ margin-right:0; }
.reviews__nav--prev{ top:calc(50% - 3.4rem); width:4.2rem; height:4.2rem; right:2rem; opacity:.75; }
.reviews__nav:hover{ transform:translateY(-50%) scale(1.1); filter:drop-shadow(0 0 1.4rem rgba(254,220,60,.5)); opacity:1; }
.reviews__nav:active{ transform:translateY(-50%) scale(.96); }
.reviews__nav svg{ width:100%; height:100%; display:block; }
.reviews + .center{ margin-top:5.1rem; }

/* --- pełna opinia ---------------------------------------------------- */
.review-dlg{
  width:min(56rem, calc(100vw - 3.2rem)); padding:3.4rem 3.4rem 3rem; border:1px solid rgba(254,220,60,.45);
  border-radius:2rem; background:var(--card); color:var(--txt); box-shadow:0 3rem 8rem rgba(0,0,0,.7);
}
.review-dlg::backdrop{ background:rgba(0,0,0,.72); backdrop-filter:blur(3px); }
.review-dlg p{ font-size:2.2rem; line-height:1.5; }
.review-dlg .stars{ display:flex; gap:.72rem; margin-top:2.4rem; }
.review-dlg .stars i{ width:2.22rem; height:2.22rem; display:block; background:url(../img/star-solid.png) center/contain no-repeat; }
.review-dlg b{ display:block; margin-top:1.2rem; font-size:2.6rem; font-weight:400; }
.review-dlg__close{
  position:absolute; top:1.4rem; right:1.4rem; width:4rem; height:4rem; border-radius:50%;
  display:grid; place-items:center; font-size:2.6rem; line-height:1; color:var(--txt-dim);
}
.review-dlg__close:hover{ color:var(--yellow); }

/* =====================================================================
   FAQ
   ===================================================================== */
.sec--faq{ margin-top:6rem; }
.faq{
  padding:3.6rem 3.86rem 4.6rem;
  border:1px solid var(--stroke); border-radius:4rem;
}
.faq__title{ font-size:2.6rem; font-weight:700; text-transform:uppercase; }
.faq__title span{ color:var(--yellow); }
.faq__item{ margin-top:1.3rem; border:1px solid rgba(255,255,255,.22); border-radius:1rem; overflow:hidden; }
.faq__item:first-of-type{ margin-top:3.6rem; }
.faq__q{
  display:flex; align-items:center; width:100%; min-height:6.22rem; padding:1rem 6rem 1rem 2.48rem;
  list-style:none; cursor:pointer;
  font-size:2.5rem; font-weight:700; text-transform:uppercase; text-align:left;
  position:relative; transition:color .18s;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--yellow); }
.faq__q::after{
  content:""; position:absolute; right:2.6rem; top:50%; width:1.3rem; height:1.3rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg); transition:transform .22s;
}
.faq__item[open] > .faq__q{ color:var(--yellow); }
.faq__item[open] > .faq__q::after{ transform:translateY(-20%) rotate(-135deg); }
.faq__a > p{ font-size:2.1rem; line-height:1.45; padding:0 2.48rem 2.4rem; color:var(--txt-dim); }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-.8rem); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  .faq__item[open] .faq__a{ animation:faqIn .28s ease; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{
  margin-top:3.23rem; background:var(--panel); border-top:1px solid var(--stroke-s);
  min-height:7.87rem; display:flex; align-items:center;
}
.footer{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 3rem; padding:1.6rem 4.5rem; }
.footer__brand{ font-size:2.4rem; color:var(--yellow); }
.footer__links{ display:flex; flex-wrap:wrap; gap:1rem 3rem; font-size:max(1.8rem,12.5px); }
.footer__links a{ color:var(--txt-dim); transition:color .18s; }
.footer__links a:hover{ color:var(--yellow); text-decoration:underline; }

/* przyklejony pasek zakupu — tylko mobile */
.buybar{ display:none; }

/* =====================================================================
   MOBILE / TABLET  (< 1024 px)
   ===================================================================== */
@media (max-width:1023px){
  body{ font-size:1.9rem; }

  /* na tabletach kolumna nie rozjeżdża się na całą szerokość */
  .site-header .wrap, .hero-head, .panel, .site-footer .wrap{ max-width:70rem; margin-inline:auto; }

  .hdr{ height:7.2rem; padding-inline:2rem; }
  .brand img{ width:14rem; }
  .burger{ display:flex; }

  .nav{
    position:fixed; inset:7.2rem 0 auto 0; z-index:39;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:#101010; border-bottom:1px solid var(--stroke-s);
    padding:1.5rem 2rem 3rem;
    transform:translateY(-120%); transition:transform .3s ease; visibility:hidden;
  }
  .nav.is-open{ transform:none; visibility:visible; }
  .nav__link{ font-size:2.4rem; padding:1.5rem .4rem; border-bottom:1px solid var(--stroke-s); }
  .nav__link.is-active::after{ display:none; }
  .nav__logo{ padding:2rem .4rem; border-bottom:1px solid var(--stroke-s); }
  .nav__logo img{ width:11rem; }
  .nav__actions{ margin:2.4rem 0 0; gap:1.2rem; }
  .nav__actions .btn{ flex:1; height:5rem; font-size:1.9rem; }
  .icon-btn{ margin-left:.6rem; width:3.6rem; height:3.6rem; }
  .icon-btn img{ width:3.6rem; }
  .lang{ margin-left:1rem; font-size:2rem; }

  .bg-glows{ height:52rem;
    -webkit-mask-image:linear-gradient(#000 62%, transparent);
            mask-image:linear-gradient(#000 62%, transparent); }
  .glow-1{ left:-15%; top:7.2rem; width:130%; height:auto; }
  .glow-2,.glow-4{ display:none; }
  .glow-3{ left:-15%; top:30rem; width:130%; height:auto; }

  .hero-head{ padding-inline:2.4rem; }
  .tag{ margin-top:3rem; height:4rem; font-size:1.8rem; padding:0 1.8rem 0 1.4rem; gap:.8rem; }
  .tag__star{ width:2.6rem; height:2.6rem; }
  .hero-title{ margin:2rem 0 0; font-size:5rem; line-height:5rem; }
  .hero-meta{ margin:1.4rem 0 0; font-size:1.8rem; gap:.4rem 2rem; }

  .panel{ width:calc(100% - 2.4rem); margin-inline:auto; padding-top:3rem; border-radius:2.4rem 2.4rem 0 0; }
  .sec--cols,.sec--full,.sec--faq{ padding-inline:2.2rem; }

  /* Kolejnosc na mobile: plakat -> box zakupu -> reszta tresci -> kontakt */
  .cols{ display:flex; flex-direction:column; align-items:stretch; }
  .col-main,.col-side{ display:contents; }
  .poster{ order:1; border-radius:1.6rem; }
  .buybox{ order:2; margin-top:3rem; }
  .col-main > .block, .col-main > .rule{ order:3; margin-left:0; }
  .askbox{ order:4; }

  .h-sm,.h-md{ font-size:2.9rem; }
  .h-sub{ font-size:2.6rem; }

  .partners-wrap{ width:100%; margin-inline:0; }
  .partners{ height:8rem; justify-content:center; gap:2.6rem; }
  .partners li{ flex:0 0 9rem; }
  .partners-wrap.is-marquee .partners li{ margin-right:3.4rem; }
  .partners img{ height:6rem; }

  .desc{ max-width:none; }
  .desc__text{ font-size:2.2rem; line-height:2.6rem; }

  .who{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
  .who__item{ min-height:17rem; }
  .who__item p{ font-size:1.7rem; }

  .artists{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
  .artist{ height:auto; aspect-ratio:206/309; }
  .artist__badge{ left:1.2rem; font-size:1.3rem; }
  .artist__name{ font-size:2.2rem; line-height:2.2rem; bottom:1.4rem; padding-inline:.6rem; }
  .artist__tba{ font-size:4.4rem; }

  .buybox{ padding:2.4rem 2rem 3rem; border-radius:1.8rem; }
  .buybox__sub{ margin-top:3.6rem; }
  .countdown__row span{ min-width:4rem; }
  .countdown__row--val{ font-size:3.4rem; }
  .pack__desc{ font-size:1.35rem; line-height:1.7rem; }
  .opt{ min-height:5.6rem; padding-inline:2rem; font-size:2.1rem; }
  .total{ margin-top:3.6rem; font-size:3.2rem; }
  .askbox{ margin-top:2.4rem; }

  .media{ aspect-ratio:16/10; border-radius:1.6rem; }
  .sec--full .media{ margin-top:3.4rem; }

  .days{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(15rem,1fr); overflow-x:auto; scrollbar-width:none; }
  .days::-webkit-scrollbar{ display:none; }
  .day{ font-size:1.9rem; height:4.4rem; }
  .day.is-active{ height:5rem; }
  .sched__list li{ grid-template-columns:14.5rem 1fr; height:auto; min-height:5.6rem; font-size:1.9rem; padding-block:.8rem; }
  .sched__list p{ padding-left:1.8rem; padding-right:1.2rem; }

  .reach{ grid-template-columns:1fr; row-gap:3rem; }
  .reach__col:nth-of-type(3){ margin-left:0; }
  .reach__col p{ font-size:2rem; line-height:2.9rem; }

  .reviews__track{ grid-auto-columns:min(21rem,62vw); margin-right:0; }
  .review{ min-height:26rem; }
  .review p{ font-size:1.9rem; line-height:2rem; }
  .review__text{ -webkit-line-clamp:6; }
  .review b{ font-size:2.2rem; }
  .reviews__nav{ display:none; }

  .faq{ padding:2.6rem 1.8rem 3rem; border-radius:2.4rem; }
  .faq__title{ font-size:2.3rem; }
  .faq__q{ height:auto; min-height:5.6rem; padding:1.4rem 4.6rem 1.4rem 1.6rem; font-size:1.85rem; }
  .faq__a > p{ padding-inline:1.8rem; font-size:1.9rem; }

  .btn--md,.btn--lg{ height:5.4rem; font-size:2rem; padding-inline:2.2rem; white-space:normal; text-align:center; line-height:1.15; }
  .site-footer{ min-height:6rem; padding-bottom:7rem; }   /* miejsce na pasek zakupu */
  .footer{ padding-inline:2.4rem; }
  .footer__brand{ font-size:2rem; }

  .buybar{
    position:fixed; z-index:30; left:1.2rem; right:1.2rem; bottom:1.2rem;
    display:flex; align-items:center; justify-content:space-between; gap:1.6rem;
    padding:1rem 1rem 1rem 2rem; border-radius:1.4rem;
    background:rgba(18,18,18,.96); border:1px solid rgba(254,220,60,.4);
    box-shadow:0 1rem 3rem rgba(0,0,0,.6); backdrop-filter:blur(8px);
    font-size:1.9rem; font-weight:500; text-transform:uppercase;
    transform:translateY(160%); transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .buybar[hidden]{ display:none; }
  .buybar.is-on{ transform:none; }
  .buybar b{ color:var(--yellow); }
  .buybar .btn{ height:4.6rem; font-size:1.8rem; padding-inline:2.4rem; }
}

@media (max-width:479px){
  .who{ grid-template-columns:1fr 1fr; }
  .hero-title{ font-size:4.4rem; line-height:4.5rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =====================================================================
   ANIMACJE I STANY INTERAKCJI
   Wszystko poza :hover jest wlaczane klasa .js na <html>, wiec bez JS
   strona pozostaje w pelni widoczna. Respektuje prefers-reduced-motion.
   ===================================================================== */

html{ scroll-behavior:smooth; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; border-radius:.4rem; }

/* --- wejscia przy scrollu ------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-anim]{ opacity:0; transform:translateY(2.4rem); }
  .js [data-anim="zoom"]{ transform:scale(.975); }
  .js [data-anim="fade"]{ transform:none; }
  .js [data-anim].is-in{
    opacity:1; transform:none;
    transition:opacity .7s cubic-bezier(.2,.75,.25,1) var(--d,0ms),
               transform .7s cubic-bezier(.2,.75,.25,1) var(--d,0ms);
  }
}

/* --- naglowek po przewinieciu ---------------------------------------- */
.site-header{ transition:background .3s ease, box-shadow .3s ease; }
.hdr{ transition:height .3s cubic-bezier(.2,.7,.3,1); }
.brand img{ transition:width .3s cubic-bezier(.2,.7,.3,1); }
.site-header.is-scrolled{ background:rgba(9,9,9,.97); box-shadow:0 .6rem 2.4rem rgba(0,0,0,.6); }
.site-header.is-scrolled .hdr{ height:8rem; }
.site-header.is-scrolled .brand img{ width:15.2rem; }

/* --- przyciski: blysk ------------------------------------------------ */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transition:transform .75s cubic-bezier(.3,.7,.3,1);
}
.btn--outline::after{ background:linear-gradient(105deg,transparent 38%,rgba(254,220,60,.22) 50%,transparent 62%); }
.btn:hover::after{ transform:translateX(130%); }
.btn--solid:hover{ box-shadow:0 .8rem 2.6rem rgba(254,220,60,.28); }

/* --- plakat / mapa ---------------------------------------------------- */
.poster img,.reach__map img{ transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.poster:hover img,.reach__map:hover img{ transform:scale(1.035); }
.poster{ transition:box-shadow .4s ease; }
.poster:hover{ box-shadow:0 0 4rem rgba(254,220,60,.18); }

/* --- karty ------------------------------------------------------------ */
.who__item,.artist{ transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s; }
.who__item:hover{ transform:translateY(-.6rem); border-color:rgba(254,220,60,.45); box-shadow:0 1.6rem 3.2rem rgba(0,0,0,.55); }
.who__item:hover .who__bg{ opacity:.5; transform:scale(1.07); }
.artist img{ transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .4s ease; }
.artist:hover{ transform:translateY(-.8rem); box-shadow:0 2rem 4rem rgba(0,0,0,.6); }
.artist:hover img{ transform:scale(1.07); filter:brightness(1.12); }

.partners img{ transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1); }
.partners li:hover img{ opacity:1; transform:scale(1.09); }

.pack,.opt{ transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, background .25s; }
.pack:hover,.opt:hover{ transform:translateY(-.25rem); }
.review{ transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s; }
.review:hover{ transform:translateY(-.5rem); border-color:rgba(254,220,60,.35); }
.faq__item{ transition:border-color .3s ease, background .3s ease; }
.faq__item:hover{ border-color:rgba(254,220,60,.5); }
.faq__item[open]{ border-color:var(--yellow); background:rgba(254,220,60,.04); }
.sched__list li{ transition:background .25s ease; }
.sched__list li:hover{ background:rgba(255,255,255,.04); }

/* --- licznik: zmiana cyfry -------------------------------------------- */
.countdown__row--val span{ display:inline-block; }
@keyframes cdTick{ from{ transform:translateY(-.45em); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:no-preference){
  .cd-tick{ animation:cdTick .45s cubic-bezier(.2,.85,.3,1); }
}

/* --- pasek postepu ----------------------------------------------------- */
.progress span{ width:var(--p,42.7%); }
.js .progress span{ width:0; transition:width 1.5s cubic-bezier(.2,.8,.25,1) .25s; }
.js .progress.is-in span{ width:var(--p,42.7%); }

/* --- gwiazdki: wysyp po kolei ------------------------------------------ */
@keyframes starPop{ from{ transform:scale(0); } to{ transform:none; } }
@media (prefers-reduced-motion:no-preference){
  .js .review.is-in .stars i{
    animation:starPop .5s cubic-bezier(.2,1.5,.4,1) both;
    animation-delay:calc(var(--i,0) * 70ms + 160ms);
  }
}

/* --- gwiazdka w plakietce ---------------------------------------------- */
@keyframes starPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }
@media (prefers-reduced-motion:no-preference){
  .tag__star{ animation:starPulse 3.4s ease-in-out infinite; }
}

/* --- tlo hero: powolny oddech ------------------------------------------ */
@keyframes heroDrift{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
@media (prefers-reduced-motion:no-preference){
  .glow-1{ transform-origin:62% 45%; animation:heroDrift 22s ease-in-out infinite alternate; }
}

/* --- zdjęcia pełnej szerokości ----------------------------------------- */
.media img{ transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.media:hover img{ transform:scale(1.025); }

/* --- menu mobilne: pozycje wjezdzaja po kolei --------------------------- */
@keyframes navIn{ from{ opacity:0; transform:translateY(-1rem); } to{ opacity:1; transform:none; } }
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  .nav.is-open .nav__link,
  .nav.is-open .nav__logo,
  .nav.is-open .nav__actions{ animation:navIn .38s both cubic-bezier(.2,.75,.25,1); }
  .nav.is-open .nav__link:nth-of-type(1){ animation-delay:.03s; }
  .nav.is-open .nav__link:nth-of-type(2){ animation-delay:.06s; }
  .nav.is-open .nav__link:nth-of-type(3){ animation-delay:.09s; }
  .nav.is-open .nav__link:nth-of-type(4){ animation-delay:.12s; }
  .nav.is-open .nav__logo{ animation-delay:.15s; }
  .nav.is-open .nav__link:nth-of-type(5){ animation-delay:.18s; }
  .nav.is-open .nav__actions{ animation-delay:.21s; }
}