/* ===========================================================
   HIENKA — oprawa wizualna wg wytycznych
   Paleta, typografia, siatka i komponenty są wiążące.
   Mechanika hero / wiru / filmu / przejścia — w drugiej połowie pliku.
   =========================================================== */

:root{
  /* kolory */
  --ink:#06060A;
  --bone:#F1EDE3;
  --dust:#8C8779;
  --amber:#FF9B2F;
  --acid:#CBFF2E;
  --line:#24242E;
  --field:#0D0D13;
  --hint:#5A574D;

  /* kroje */
  --display:"Unbounded","Trebuchet MS",system-ui,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* siatka */
  --gut:clamp(20px,4.2vw,56px);
  --maxw:1440px;

  /* siła motywu w tle */
  --bg-dj:.07;
  --bg-trip:.085;

  /* marmur: miękkie plamy + pojedyncze żyłki */
  --marble:
    radial-gradient(120% 80% at 18% 12%, rgba(60,62,86,.30) 0%, rgba(6,6,10,0) 55%),
    radial-gradient(90% 70% at 82% 30%, rgba(90,70,54,.16) 0%, rgba(6,6,10,0) 60%),
    radial-gradient(140% 90% at 55% 100%, rgba(38,40,60,.32) 0%, rgba(6,6,10,0) 62%),
    radial-gradient(70% 42% at 33% 64%, rgba(74,78,104,.22) 0%, rgba(6,6,10,0) 58%),
    radial-gradient(46% 58% at 92% 76%, rgba(120,92,66,.13) 0%, rgba(6,6,10,0) 64%),
    radial-gradient(38% 30% at 8% 88%, rgba(203,255,46,.045) 0%, rgba(6,6,10,0) 66%),
    linear-gradient(113deg, rgba(6,6,10,0) 17.4%, rgba(241,237,227,.055) 17.6%, rgba(6,6,10,0) 17.9%, rgba(6,6,10,0) 41.2%, rgba(241,237,227,.030) 41.4%, rgba(6,6,10,0) 41.8%, rgba(6,6,10,0) 78.3%, rgba(241,237,227,.045) 78.5%, rgba(6,6,10,0) 78.8%),
    linear-gradient(129deg, rgba(6,6,10,0) 29.1%, rgba(241,237,227,.028) 29.3%, rgba(6,6,10,0) 29.7%, rgba(6,6,10,0) 58.6%, rgba(241,237,227,.038) 58.8%, rgba(6,6,10,0) 59.2%, rgba(6,6,10,0) 88.1%, rgba(255,155,47,.045) 88.4%, rgba(6,6,10,0) 88.8%),
    linear-gradient(72deg, rgba(6,6,10,0) 22.7%, rgba(241,237,227,.022) 22.9%, rgba(6,6,10,0) 23.4%, rgba(6,6,10,0) 63.5%, rgba(203,255,46,.030) 63.7%, rgba(6,6,10,0) 64.1%);
  --marble-b:
    radial-gradient(110% 76% at 76% 8%, rgba(64,66,92,.26) 0%, rgba(6,6,10,0) 58%),
    radial-gradient(96% 64% at 12% 38%, rgba(96,74,56,.15) 0%, rgba(6,6,10,0) 62%),
    radial-gradient(130% 86% at 42% 100%, rgba(36,38,58,.30) 0%, rgba(6,6,10,0) 60%),
    radial-gradient(60% 46% at 68% 60%, rgba(70,74,100,.20) 0%, rgba(6,6,10,0) 60%),
    radial-gradient(40% 34% at 90% 90%, rgba(255,155,47,.05) 0%, rgba(6,6,10,0) 66%),
    linear-gradient(97deg, rgba(6,6,10,0) 12.2%, rgba(241,237,227,.042) 12.4%, rgba(6,6,10,0) 12.8%, rgba(6,6,10,0) 52.4%, rgba(241,237,227,.026) 52.6%, rgba(6,6,10,0) 53%, rgba(6,6,10,0) 84.6%, rgba(203,255,46,.026) 84.8%, rgba(6,6,10,0) 85.2%),
    linear-gradient(142deg, rgba(6,6,10,0) 35.5%, rgba(241,237,227,.034) 35.7%, rgba(6,6,10,0) 36.1%, rgba(6,6,10,0) 71.4%, rgba(241,237,227,.022) 71.6%, rgba(6,6,10,0) 72%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* ===========================================================
   MOTYW W TLE — konsola, od rozdziału 02 palmy ze słońcem
   =========================================================== */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg__art{
  position:absolute;left:50%;top:50%;
  width:min(1180px,118vw);height:auto;
  margin-left:min(-590px,-59vw);margin-top:-24vh;
  color:var(--bone);filter:blur(.4px);
}
.bg__dj{opacity:var(--bg-dj)}
.bg__trip{opacity:0;color:var(--amber)}

/* treść zawsze nad tłem */
.track,.shift,.sec,.foot{position:relative;z-index:1}
.nav{z-index:50}

/* ===========================================================
   ELEMENTY WSPÓLNE
   =========================================================== */
.eyebrow{
  font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);margin:0 0 18px;
  display:flex;align-items:center;gap:.9em;
}
.eyebrow .num{color:var(--acid)}
.h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,5.4vw,76px);
  line-height:1.02;letter-spacing:-.04em;
  margin:0 0 clamp(48px,7vw,96px);
  text-wrap:balance;
}
.note{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--dust);margin:28px 0 0;
}
.star{color:var(--dust)}

.sec{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(72px,9vw,120px) var(--gut) clamp(86px,10vw,140px);
  border-top:1px solid var(--line);
  background-color:transparent;
  background-image:var(--marble);
}
.sec:nth-of-type(even){background-image:var(--marble-b)}
.sec:first-of-type{border-top:0}

/* ---------- nawigacja ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;
  display:flex;align-items:center;gap:clamp(12px,3vw,40px);
  min-height:84px;padding:0 var(--gut);
  background:rgba(6,6,10,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
  transition:background .35s,border-color .35s;
}
.nav__mark{
  font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:-.04em;text-decoration:none;
}
.nav__links{display:flex;gap:clamp(12px,1.8vw,26px);margin-left:auto;flex-wrap:wrap}
.nav__links a{
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;
  text-transform:lowercase;color:var(--dust);text-decoration:none;
  transition:color .25s;
}
.nav__links a:hover{color:var(--bone)}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acid);border:1px solid rgba(203,255,46,.45);
  padding:9px 18px;border-radius:999px;white-space:nowrap;line-height:1;
}
@media (max-width:820px){ .nav__links{display:none} .nav{min-height:64px} }

/* ===========================================================
   KIM JEST
   =========================================================== */
.bio{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px)}
@media (min-width:960px){
  .bio{grid-template-columns:1.05fr 1fr;align-items:start}
  .bio .h2{grid-column:1/-1}
}
.bio__text p{margin:0 0 1.2rem;max-width:62ch;color:#D7D2C6}
.facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.facts>div{
  padding:20px 22px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.facts dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);margin-bottom:8px;
}
.facts dd{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:18px;letter-spacing:-.02em;line-height:1.3;
}

/* ===========================================================
   SOUND
   =========================================================== */
.mixes{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media (min-width:900px){
  .mixes{grid-template-columns:repeat(3,1fr)}
  .mix+.mix{border-left:1px solid var(--line)}
}
@media (max-width:899px){ .mix+.mix{border-top:1px solid var(--line)} }
.mix{padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:16px}
.mix h3{
  font-family:var(--display);font-weight:600;font-size:25px;
  letter-spacing:-.03em;margin:0;line-height:1.1;
}
.mix__wave{display:flex;align-items:flex-end;gap:3px;height:56px}
.mix__wave i{display:block;width:3px;background:var(--dust);opacity:.5;transition:opacity .3s}
.mix__wave i.hot{background:var(--amber);opacity:1}
.mix:hover .mix__wave i{opacity:.85}
.mix:hover .mix__wave i.hot{opacity:1}
.mix__meta{
  display:flex;flex-wrap:wrap;gap:14px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);
}
.mix__cta{
  margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--bone);
}
.mix__cta:hover{color:var(--acid)}

/* ===========================================================
   LIVE
   =========================================================== */
.dates{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dates li{
  display:grid;grid-template-columns:88px 1fr auto;
  align-items:baseline;gap:6px 20px;
  padding:22px 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s;
}
.dates li:hover{padding-left:10px}
.dates .d{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  color:var(--acid);font-variant-numeric:tabular-nums;
}
.dates .c{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.15rem,2.2vw,26px);letter-spacing:-.03em;
}
.dates .v{grid-column:2;font-size:14px;color:var(--dust)}
.dates .s{
  grid-row:1;grid-column:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:9px 18px;border-radius:999px;
  color:var(--bone);line-height:1;white-space:nowrap;
}
.dates .s--out{color:var(--dust)}
.dates .s--soon{color:var(--acid);border-color:rgba(203,255,46,.45)}

/* ===========================================================
   SZLAK
   =========================================================== */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:34px;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
}
.marquee__row{display:flex;gap:64px;width:max-content;animation:slide 42s linear infinite}
.marquee__row span{
  font-family:var(--display);font-weight:600;letter-spacing:-.035em;
  font-size:clamp(1.5rem,4.2vw,54px);white-space:nowrap;
  display:flex;align-items:baseline;gap:16px;
}
.marquee__row em{
  font-family:var(--mono);font-style:normal;font-size:11px;
  letter-spacing:.16em;color:var(--acid);
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ===========================================================
   GALERIA
   =========================================================== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media (min-width:900px){
  .grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:196px}
  .g:nth-child(1){grid-column:1/6;grid-row:1/3}
  .g:nth-child(2){grid-column:6/13;grid-row:1/2}
  .g:nth-child(3){grid-column:6/9;grid-row:2/3}
  .g:nth-child(4){grid-column:9/13;grid-row:2/3}
  .g:nth-child(5){grid-column:1/13;grid-row:3/4}
}
.g{margin:0;position:relative;overflow:hidden;background:var(--ink);min-height:150px}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1);filter:saturate(.9)}
.g:hover img{transform:scale(1.04)}
.g figcaption{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);text-shadow:0 1px 10px rgba(6,6,10,.9);
}

/* ===========================================================
   BOOKING
   =========================================================== */
.book{display:grid;gap:clamp(32px,4vw,64px)}
@media (min-width:960px){ .book{grid-template-columns:1fr 1fr;align-items:start} }
.book__lead{max-width:46ch;color:#D7D2C6;font-size:18px}
.mail{
  display:inline-block;margin:26px 0 30px;
  font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.4vw,30px);
  letter-spacing:-.03em;color:var(--acid);text-decoration:none;
  border-bottom:1px solid rgba(203,255,46,.5);
}
.social{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.social a{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--bone);
  border:1px solid var(--line);padding:9px 18px;border-radius:999px;
  transition:border-color .25s,color .25s;line-height:1;
}
.social a:hover{border-color:#3A3A46}
.social a[aria-disabled]{color:var(--dust)}

.form{display:flex;flex-direction:column;gap:6px}
.form label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);margin-top:18px;
}
.form input,.form textarea{
  width:100%;background:var(--field);border:1px solid var(--line);color:var(--bone);
  font-family:var(--body);font-size:15px;padding:15px 16px;border-radius:0;
}
.form input::placeholder,.form textarea::placeholder{color:var(--hint)}
.form input:focus,.form textarea:focus{border-color:#3E3E4A;outline:none}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form button{
  margin-top:30px;align-self:flex-start;
  background:var(--acid);color:var(--ink);border:0;border-radius:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 30px;cursor:pointer;transition:filter .25s;
}
.form button:hover{filter:brightness(1.08)}
.form__note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dust);margin:16px 0 0}
.form__note.sent{color:var(--acid)}

/* ===========================================================
   STOPKA
   =========================================================== */
.foot{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  max-width:var(--maxw);margin-inline:auto;
  padding:30px var(--gut) 48px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dust);
  background-image:var(--marble-b);
}
.foot a{text-decoration:none}
.foot a:hover{color:var(--bone)}

/* ===========================================================
   HERO — wspólne dla wariantów
   =========================================================== */
.track{height:400vh}
.stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 102%,#15151C 0%,#0A0A0F 45%,var(--ink) 100%);
}
.stage__glow{
  position:absolute;left:50%;bottom:-12%;translate:-50% 0;
  width:min(1200px,120vw);aspect-ratio:1/.62;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,155,47,.20),rgba(255,155,47,0) 70%);
  opacity:0;pointer-events:none;
}
.bulbs{position:absolute;inset:0;pointer-events:none}
.bulbs i{
  position:absolute;top:clamp(58px,12vh,130px);left:var(--x);
  width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 16px 5px rgba(255,155,47,.45),0 0 44px 14px rgba(255,155,47,.16);
  opacity:0;animation:flicker 5s ease-in-out var(--d) infinite;
}
.bulbs i::before{
  content:"";position:absolute;left:50%;top:-38px;width:1px;height:38px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.12));
}
@keyframes flicker{0%,100%{filter:brightness(1)}48%{filter:brightness(1.35)}52%{filter:brightness(.85)}}

.stage__copy{
  position:absolute;inset:0;z-index:1;
  display:grid;grid-template-rows:auto 1fr;
  padding:clamp(96px,14vh,150px) var(--gut) 0;
  pointer-events:none;
}
.stage__top{display:flex;flex-direction:column;gap:10px}
.stage__copy .eyebrow{margin-bottom:0}
.tagline{
  font-family:var(--display);font-weight:400;font-size:clamp(.95rem,1.6vw,22px);
  letter-spacing:-.02em;margin:0;max-width:24ch;
}
.wordmark{
  grid-row:2;align-self:center;justify-self:center;margin:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(3.4rem,13vw,168px);
  letter-spacing:-.055em;line-height:.82;color:var(--bone);
  transform-origin:50% 50%;will-change:transform;
}

.hud{
  position:absolute;z-index:6;left:var(--gut);bottom:clamp(20px,4vh,40px);
  display:flex;align-items:center;gap:16px;
}
.hud__bar{width:clamp(90px,14vw,160px);height:2px;background:var(--line);overflow:hidden}
.hud__bar span{display:block;height:100%;width:0%;background:var(--acid)}
.hud__label{
  margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);
}

/* ---------- teksty przewijane z filmem ---------- */
.beats{
  position:absolute;z-index:3;left:var(--gut);right:var(--gut);
  bottom:clamp(78px,16vh,150px);max-width:34rem;min-height:7.5rem;pointer-events:none;
}
.beat{
  position:absolute;inset:auto auto 0 0;margin:0;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility .25s;
  pointer-events:none;
}
.beat.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.beat__t{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.9vw,36px);line-height:1.05;letter-spacing:-.035em;
  text-wrap:balance;
}
.beat__s{font-family:var(--body);font-size:16px;line-height:1.6;max-width:44ch;opacity:.9}

/* ---------- wariant A: sylwetka ---------- */
.ania{
  position:absolute;z-index:3;left:50%;bottom:18%;translate:-50% 0;
  height:min(70vh,600px);width:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.85)) contrast(1.04);
  will-change:transform;
}

/* ---------- wariant B: wir sprzętu ---------- */
.stage--wir{background:radial-gradient(110% 75% at 50% 44%,#16161E 0%,#0B0B11 46%,var(--ink) 100%)}
.swirl{
  position:absolute;left:50%;top:52%;z-index:1;
  width:min(1420px,140vw);aspect-ratio:1/.56;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(203,255,46,0) 0deg, rgba(203,255,46,.22) 46deg,
    rgba(255,155,47,.26) 128deg, rgba(203,255,46,.04) 208deg,
    rgba(255,155,47,.18) 296deg, rgba(203,255,46,0) 360deg);
  filter:blur(26px);transform:translate(-50%,-50%);pointer-events:none;
}
.rig{
  position:absolute;z-index:4;left:50%;bottom:-8%;translate:-50% 0;
  width:min(1500px,130vw);height:auto;overflow:visible;
}
.stage--wir .stage__copy{z-index:2}
.rig .part,.rig .orb{will-change:transform,opacity}
.rig .pad{fill:#14141A;stroke:#33333E}
.rig .pad.on{fill:rgba(203,255,46,.75);stroke:var(--acid)}
.rig .cap{fill:#D8D3C6;stroke:#8C8578}
.rig .led{fill:#1A1A22;stroke:#2C2C36}
.rig .led.lit{fill:var(--acid);stroke:var(--acid)}
.rig .led.hot.lit{fill:var(--amber);stroke:var(--amber)}
.rig .pwr{fill:#1A1A22;stroke:#33333E}
.rig .pwr.on{fill:var(--amber);stroke:var(--amber)}
.rig .pwr2{fill:#2A2A33}
.rig.playing .pwr2{fill:var(--acid)}
.rig .jog-mark{opacity:.25}
.rig .etch{font-family:var(--mono);font-size:13px;fill:#4E4A42;letter-spacing:.12em}
.rig .label{font-family:var(--display);font-weight:800;font-size:15px;fill:#0A0A0E;text-anchor:middle;letter-spacing:-.02em}
.rig .label.sm{font-family:var(--mono);font-weight:400;font-size:8.5px;letter-spacing:.24em}
.rig .spin{transform-box:fill-box;transform-origin:center;animation:spin 2.1s linear infinite;animation-play-state:paused}
.rig.playing .spin{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- wariant C: film przewijany scrollem ---------- */
.track--film{height:420vh}
.stage--film{background:#05050A}
.filmv{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;background:#05050A;
}
.filmv__shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 46%,rgba(6,6,10,0) 38%,rgba(6,6,10,.72) 100%),
    linear-gradient(180deg,rgba(6,6,10,.85) 0%,rgba(6,6,10,0) 26%,rgba(6,6,10,0) 62%,rgba(6,6,10,.9) 100%);
}
.stage--film .stage__copy{z-index:3}
.stage--film .hud{z-index:4}

/* jasny film: czarna typografia, jaśniejąca gdy kadr ciemnieje */
.stage--light{background:#EDEBE6}
.stage--light .filmv{background:#EDEBE6}
.stage--light .filmv__shade{
  background:
    radial-gradient(120% 78% at 50% 42%,rgba(237,235,230,0) 42%,rgba(237,235,230,.5) 100%),
    linear-gradient(180deg,rgba(237,235,230,.9) 0%,rgba(237,235,230,0) 20%,rgba(6,6,10,0) 54%,rgba(6,6,10,.96) 100%);
}
.stage--light .wordmark,.stage--light .tagline,.stage--light .beats{color:#0B0B10}
.stage--light .beat__s{color:#2A2A30}
.stage--light .eyebrow,.stage--light .hud__label{color:#6A6455}
.stage--light .eyebrow .num{color:#B8801F}
.stage--light .hud__bar{background:rgba(11,11,16,.16)}
.stage--light .hud__bar span{background:#B8801F}

.stage--light.is-dark{background:#08080C}
.stage--light.is-dark .filmv{background:#08080C}
.stage--light.is-dark .filmv__shade{
  background:
    radial-gradient(120% 80% at 50% 46%,rgba(6,6,10,0) 38%,rgba(6,6,10,.6) 100%),
    linear-gradient(180deg,rgba(6,6,10,.8) 0%,rgba(6,6,10,0) 24%,rgba(6,6,10,0) 58%,rgba(6,6,10,.96) 100%);
}
.stage--light.is-dark .wordmark,.stage--light.is-dark .tagline,.stage--light.is-dark .beats{color:var(--bone)}
.stage--light.is-dark .beat__s{color:#D7D2C6}
.stage--light.is-dark .eyebrow,.stage--light.is-dark .hud__label{color:var(--dust)}
.stage--light.is-dark .eyebrow .num{color:var(--acid)}
.stage--light.is-dark .hud__bar{background:var(--line)}
.stage--light.is-dark .hud__bar span{background:var(--acid)}

/* nawigacja nad jasnym kadrem */
body.nav-light .nav{background:rgba(237,235,230,.88);border-bottom-color:rgba(11,11,16,.14)}
body.nav-light .nav__mark{color:#0B0B10}
body.nav-light .nav__links a{color:#6A6455}
body.nav-light .nav__links a:hover{color:#0B0B10}
body.nav-light .chip{color:#B8801F;border-color:rgba(184,128,31,.5)}

/* wariant D: neon */
.stage--neon{--acid:#6FE6FF}
.stage--neon .filmv__shade{
  background:
    radial-gradient(120% 82% at 50% 44%,rgba(6,6,12,0) 34%,rgba(6,6,12,.76) 100%),
    linear-gradient(180deg,rgba(6,6,12,.88) 0%,rgba(6,6,12,0) 24%,rgba(6,6,12,0) 58%,rgba(6,6,12,.92) 100%);
}
.stage--neon .beats{color:var(--bone)}
.stage--neon .beat__s{color:#D7D2C6}
.stage--neon .hud__bar span{background:#6FE6FF}
.stage--neon .eyebrow .num{color:#6FE6FF}

/* ===========================================================
   PRZEJŚCIE — winyl kończy się wschodem
   =========================================================== */
.shift{height:300vh}
.shift__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
.shift__stage::after{
  content:"";position:absolute;inset:auto 0 0 0;height:26%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,10,0),rgba(6,6,10,.55));
}
.shift__stage.has-video::after{background:linear-gradient(180deg,rgba(6,6,10,0),rgba(6,6,10,.8))}
.shift__sky{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,#150F26 0%,#3A2436 36%,#7A4130 64%,#C4742F 84%,#E0A25C 100%);
}
.shift__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.shift__video.is-on{opacity:1}
.shift__art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.shift__art #s-stars circle{fill:var(--bone)}
.shift__art #s-horizon{stroke:rgba(241,237,227,.35);stroke-width:1;opacity:0}
.shift__copy{
  position:absolute;inset:auto 0 0 0;z-index:3;color:var(--bone);
  padding:0 var(--gut) clamp(44px,9vh,92px);pointer-events:none;
}
.shift__copy .eyebrow .num{color:var(--amber)}
.shift__lines{position:relative;height:clamp(2.6rem,7vw,5.2rem)}
.shift__h{
  position:absolute;inset:0;margin:0;
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,5.4vw,66px);line-height:1;letter-spacing:-.04em;
  text-wrap:balance;
}
.shift__sub{margin:16px 0 0;max-width:36ch;font-size:17px;opacity:.92}

/* ===========================================================
   MNIEJSZE EKRANY
   =========================================================== */
@media (max-width:760px){
  :root{--bg-dj:.05;--bg-trip:.07}
  .bg__art{width:170vw;margin-left:-85vw;margin-top:-22vh}
  .track{height:320vh}
  .track--film{height:340vh}
  .shift{height:260vh}
  .ania{height:min(46vh,380px);bottom:26%}
  .rig{width:172vw;bottom:-2%}
  .swirl{width:200vw;top:50%}
  .wordmark{align-self:center;justify-self:center;margin-top:0;font-size:clamp(2.6rem,15vw,5.2rem);text-align:center}
  .stage--film .wordmark{margin-top:0}
  .filmv{object-fit:cover;object-position:50% 50%}
  .stage--light .filmv__shade,.stage--light.is-dark .filmv__shade,.stage--film .filmv__shade{
    background:linear-gradient(180deg,
      rgba(6,6,10,.6) 0%,rgba(6,6,10,0.12) 20%,rgba(6,6,10,0.12) 46%,
      rgba(6,6,10,.82) 74%,rgba(6,6,10,.96) 100%) !important;
  }
  .stage--light .wordmark,.stage--light .tagline,.stage--light .beats{color:var(--bone)}
  .stage--light .beat__s{color:#D7D2C6}
  .stage--light .eyebrow,.stage--light .hud__label{color:var(--dust)}
  .stage--light .eyebrow .num{color:var(--acid)}
  .stage--light .hud__bar{background:var(--line)}
  .stage--light .hud__bar span{background:var(--acid)}
  body.nav-light .nav{background:rgba(6,6,10,.82);border-bottom-color:var(--line)}
  body.nav-light .nav__mark{color:var(--bone)}
  body.nav-light .nav__links a{color:var(--dust)}
  body.nav-light .chip{color:var(--acid);border-color:rgba(203,255,46,.45)}
  .beats{
    position:absolute;
    inset:auto var(--gut) clamp(62px,11vh,88px) var(--gut);
    max-width:none;
    min-height:auto;
    pointer-events:none;
    z-index:5;
  }
  .beat{
    position:absolute;
    inset:auto 0 0 0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .beat__t{
    font-size:clamp(1.15rem,4.8vw,1.55rem);
    line-height:1.15;
    letter-spacing:-.03em;
    color:#FFFFFF;
    text-shadow:0 2px 10px rgba(0,0,0,.7);
  }
  .beat__s{
    font-size:clamp(.84rem,3.4vw,.96rem);
    line-height:1.45;
    max-width:38ch;
    color:#E6E2D8;
    text-shadow:0 1px 8px rgba(0,0,0,.7);
  }
  .hud{bottom:clamp(16px,3.2vh,28px);z-index:6}
  .form__row{grid-template-columns:1fr}
}

/* ===========================================================
   MNIEJ RUCHU
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track,.track--film{height:130vh}
  .shift{height:120vh}
  .marquee__row,.bulbs i,.rig .spin{animation:none}
  .stage__glow{opacity:1}
  .beat{transition:none}
}

/* ===========================================================
   PRZEŁĄCZNIK DŹWIĘKU
   =========================================================== */
.snd{
  display:inline-flex;align-items:center;gap:10px;
  background:none;border:0;padding:0;margin-left:auto;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);
  transition:color .25s;
}
.nav__links+.snd{margin-left:clamp(12px,2vw,28px)}
.snd:hover{color:var(--bone)}
.snd.is-on{color:var(--acid)}
.snd__bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.snd__bars i{display:block;width:2px;height:4px;background:currentColor}
.snd.is-on .snd__bars i{animation:eq .9s ease-in-out infinite}
.snd.is-on .snd__bars i:nth-child(2){animation-delay:.15s}
.snd.is-on .snd__bars i:nth-child(3){animation-delay:.3s}
.snd.is-on .snd__bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}
body.nav-light .snd{color:#6A6455}
body.nav-light .snd.is-on{color:#B8801F}
@media (prefers-reduced-motion:reduce){ .snd.is-on .snd__bars i{animation:none;height:8px} }

.snd.is-pulse{
  color:var(--acid);
  animation:sndPulse 1.8s ease-in-out infinite;
}
@keyframes sndPulse{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.08);opacity:1;filter:drop-shadow(0 0 8px var(--acid))}
}

.snd-hint{
  position:fixed;bottom:24px;left:50%;translate:-50% 0;z-index:99;
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(10,10,15,.92);border:1px solid var(--acid);
  color:var(--bone);padding:10px 20px;border-radius:999px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 20px rgba(203,255,46,.25);
  cursor:pointer;backdrop-filter:blur(10px);
  opacity:0;transform:translate(-50%,16px);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:auto;
}
.snd-hint.is-visible{opacity:1;transform:translate(-50%,0)}
.snd-hint:hover{background:var(--acid);color:#08080C}

/* ===========================================================
   MIEJSCA DO UZUPEŁNIENIA — warstwa robocza
   Kasujemy razem z todo.js, gdy treść będzie kompletna.
   =========================================================== */
:root{ --todo:#FF4D3D }
.todo{
  color:var(--todo);
  font-family:var(--mono);font-size:.85em;letter-spacing:.04em;
  border-bottom:1px dashed rgba(255,77,61,.55);
  padding-bottom:1px;
}
.todo.is-ping{animation:todoPing 1.1s ease-out}
@keyframes todoPing{
  0%{background:rgba(255,77,61,.32)}
  100%{background:rgba(255,77,61,0)}
}
.todo-legend{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:60;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(6,6,10,.9);color:var(--todo);
  border:1px solid rgba(255,77,61,.5);border-radius:999px;
  padding:11px 18px;line-height:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(6px);transition:background .25s;
}
.todo-legend:hover{background:rgba(255,77,61,.14)}
.todo-legend b{font-weight:500}
.todo-legend span{color:var(--bone)}

/* ===========================================================
   NOWE SEKCJE: live dwukolumnowo, opinie, kroki, FAQ
   =========================================================== */
.lead-p{font-size:19px;color:#D7D2C6;max-width:60ch;margin:0 0 40px}
.mix__desc{margin:0;color:#D7D2C6;font-size:15px;max-width:40ch}
.mix__todo{margin:0;font-size:12px}

.live{display:grid;gap:clamp(36px,5vw,72px)}
@media (min-width:960px){ .live{grid-template-columns:1.25fr 1fr;align-items:start} }
.live__k{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);margin:0 0 18px;
}
.played{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.played li{
  padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.025em;
}

.says{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:900px){ .says{grid-template-columns:repeat(3,1fr)} }
.say{margin:0;background:var(--ink);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:18px}
.say blockquote{
  margin:0;font-family:var(--display);font-weight:400;font-size:19px;
  line-height:1.35;letter-spacing:-.02em;
}
.say blockquote::before{content:"„"}
.say blockquote::after{content:"”"}
.say figcaption{
  margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);
}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:900px){ .steps{grid-template-columns:repeat(3,1fr)} }
.steps li{background:var(--ink);padding:clamp(24px,2.6vw,36px)}
.steps__n{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--acid);margin-bottom:18px;
}
.steps h3{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.03em;margin:0 0 10px}
.steps p{margin:0;color:#D7D2C6;font-size:15px}

.faq{border-top:1px solid var(--line)}
.faq__i{padding:24px 0;border-bottom:1px solid var(--line);display:grid;gap:6px 40px}
@media (min-width:900px){ .faq__i{grid-template-columns:1fr 1.4fr} }
.faq__i h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.03em;margin:0}
.faq__i p{margin:0;color:#D7D2C6;max-width:60ch}

.dl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust);margin:26px 0 0}
.dl a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line)}

.form select{
  width:100%;background:var(--field);border:1px solid var(--line);color:var(--bone);
  font-family:var(--body);font-size:15px;padding:15px 16px;border-radius:0;
}