:root{
    --bg:#07060d;
    --bg2:#0d0b1a;
    --ink:#f2f1fb;
    --muted:rgba(242,241,251,.56);
    --line:rgba(242,241,251,.14);
    --display:"Bebas Neue", sans-serif;
    --script:"Sedgwick Ave Display", cursive;
    --text:"Inter", sans-serif;

    --n-cyan:#00eaff;
    --n-pink:#ff2fb0;
    --n-blue:#4361ff;
    --n-purple:#b537ff;
    --n-green:#39ff8f;
    --n-yellow:#fff23d;
    --n-orange:#ff8a3d;
    --n-red:#ff3355;

    --edge: clamp(1.25rem, 5vw, 4.5rem);
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *,*::before,*::after{box-sizing:inherit}
  html,body{height:100%}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--text);-webkit-font-smoothing:antialiased;
    overflow-x:clip; /* NIE overflow-x:hidden na body — zabija position:sticky */
  }
  a{color:inherit;text-decoration:none}
  h1,h2,h3{margin:0}
  section{position:relative;width:100%;padding:clamp(3.5rem,9vw,7rem) var(--edge);background:var(--bg);transform:translateZ(0);backface-visibility:hidden}
  section.alt{background:var(--bg2)}

  .display{font-family:var(--display);letter-spacing:.01em;text-transform:uppercase}
  .script{font-family:var(--script);letter-spacing:0;text-transform:none}

  /* ---------- efekt neonu: kolorowa poświata na tekście ---------- */
  .neon{ color:#fff; }
  .neon-cyan{ --glow: var(--n-cyan); color:#eafeff }
  .neon-pink{ --glow: var(--n-pink); color:#ffe9f8 }
  .neon-purple{ --glow: var(--n-purple); color:#f3e6ff }
  .neon-green{ --glow: var(--n-green); color:#ecfff3 }
  .neon-yellow{ --glow: var(--n-yellow); color:#fffde8 }
  .neon-orange{ --glow: var(--n-orange); color:#fff2e6 }
  .neon-blue{ --glow: var(--n-blue); color:#eaf0ff }
  .neon-red{ --glow: var(--n-red); color:#ffeaf0 }
  .neon{
    text-shadow:
      0 0 4px currentColor,
      0 0 10px currentColor,
      0 0 18px var(--glow),
      0 0 42px var(--glow),
      0 0 90px var(--glow);
  }

  /* ---------- migotanie zwykłych neonów: czysty CSS (Twój wzorzec, rytm 4s) ----------
     Klaster szybkich mrugnięć na starcie cyklu, długi spokój do połowy, drugi klaster,
     znowu spokój. RÓŻNICA względem oryginału: zamiast text-shadow:none w dołkach —
     przygaszona, ale niezerowa poświata (0.28) — kontur ma nigdy nie znikać całkiem.
     animation-delay/-duration ustawia JS per element (rozjeżdża w czasie, patrz <script>). */
  @keyframes neonFlicker{
    0%, 100% { opacity: 1; }
    3%  { opacity: .12; }
    6%  { opacity: 1; }
    7%  { opacity: .22; }
    8%, 9% { opacity: 1; }
    10% { opacity: .4; }
    11% { opacity: 1; }
    50% { opacity: 1; }
    52% { opacity: .12; }
    54% { opacity: .7; }
    55% { opacity: .22; }
    56% { opacity: 1; }
  }
  .neon:not(.pin-item){
    animation-name: neonFlicker;
    animation-iteration-count: infinite;
    animation-duration: var(--flicker-dur, 4s);
    animation-delay: var(--flicker-delay, 0s);
  }

  .rule{border:none;border-top:1px solid var(--line)}

  /* ---------- NAV ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:.9rem var(--edge);
    padding-top:calc(.9rem + env(safe-area-inset-top,0px));
    background:rgba(7,6,13,.72);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(242,241,251,.08);
    box-shadow:0 0 24px rgba(0,234,255,.08);
  }
  .nav-logo{font-family:var(--display);font-size:1.3rem;letter-spacing:.02em}
  .nav-links{display:flex;gap:clamp(1rem,2.5vw,2rem);font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
  .nav-links a{position:relative;padding-bottom:4px;transition:color .5s ease, text-shadow .5s ease}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--n-pink);box-shadow:0 0 8px var(--n-pink);transition:right .25s ease}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{right:0}
  .nav-cta{
    font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
    padding:.55rem 1.1rem;border:1px solid var(--n-cyan);border-radius:999px;color:var(--ink);
    box-shadow:0 0 10px rgba(0,234,255,.35), inset 0 0 8px rgba(0,234,255,.1);
    transition:box-shadow .25s;
  }
  .nav-cta:hover{ box-shadow:0 0 18px rgba(0,234,255,.6), inset 0 0 10px rgba(0,234,255,.2); }

  /* kropka-przycisk: auto-przewijanie strony, bez podpisu, jak favicon */
  .autoplay-dot{
    width:15px;height:15px;border-radius:50%;border:none;padding:0;cursor:pointer;
    background:radial-gradient(circle at 35% 30%, #fff, var(--n-cyan) 40%, var(--n-pink) 100%);
    box-shadow:0 0 6px var(--n-cyan), 0 0 14px var(--n-pink);
    flex-shrink:0;
  }
  .autoplay-dot[aria-pressed="true"]{ box-shadow:0 0 10px var(--n-cyan), 0 0 22px var(--n-pink); } /* w trakcie odtwarzania — wyraźniejszy blask */

  /* przycisk muzyki — ikona nutki, ta sama rodzina co kropka autoplay:
     stały box-shadow (glow), a samo miganie neonem robi klasa .neon
     (animuje opacity całego elementu, patrz JS: querySelectorAll('.neon:not(.pin-item)')) */
  .music-btn{
    width:30px;height:30px;border-radius:50%;flex-shrink:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--n-pink);background:rgba(255,47,176,.08);
    box-shadow:0 0 8px var(--n-pink), inset 0 0 8px rgba(255,47,176,.15);
    transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
  }
  .music-btn svg{display:block}
  .music-btn:hover{ box-shadow:0 0 12px var(--n-pink), 0 0 24px var(--n-cyan); }
  .music-btn[aria-pressed="true"]{
    border-color:var(--n-cyan);background:rgba(0,234,255,.12);
    box-shadow:0 0 12px var(--n-cyan), 0 0 26px var(--n-pink), inset 0 0 10px rgba(0,234,255,.2);
  } /* gra muzyka — wyraźniejszy, dwukolorowy blask, jak przy aktywnym autoplay */

  /* hamburger — tylko na wąskim ekranie, chowa się na desktopie.
     z-index:51 jest tu konieczne: gdy menu jest OTWARTE, .nav-links (z-index:49)
     rozwija się na pełną wysokość i szerokość, przykrywając sobą także pasek
     nav łącznie z przyciskiem hamburgera — bez wyższego z-index przycisk
     przestawał być klikalny w momencie otwarcia (nie dało się zamknąć menu
     ponownym kliknięciem w X). 51 > 49 (.nav-links) i > 50 (.nav) trzyma
     hamburger zawsze na wierzchu, w obu stanach. */
  .nav-burger{
    display:none;width:34px;height:34px;border:none;background:none;color:var(--ink);
    padding:0;cursor:pointer;position:relative;z-index:51;
  }
  .nav-burger span{
    position:absolute;left:6px;right:6px;height:2px;background:currentColor;border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav-burger span:nth-child(1){top:11px}
  .nav-burger span:nth-child(2){top:17px}
  .nav-burger span:nth-child(3){top:23px}
  .nav.open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav.open .nav-burger span:nth-child(2){opacity:0}
  .nav.open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* hamburger tylko na wąskim, PIONOWYM telefonie. Po obróceniu na poziom
     wraca pełne menu jak na desktopie — stąd (orientation:portrait) w
     warunku, a nie sam max-width (telefon w poziomie często wciąż ma
     szerokość <760px, więc samo max-width dalej łapałoby landscape i
     zostawiałoby hamburger zamiast widoku desktopowego). */
  @media(max-width:760px) and (orientation:portrait){
    .nav-links{
      position:fixed;top:0;left:0;right:0;z-index:49;
      flex-direction:column;align-items:stretch;gap:0;
      background:rgba(7,6,13,.97);backdrop-filter:blur(10px);
      padding:calc(4.2rem + env(safe-area-inset-top,0px)) var(--edge) 1.5rem;
      max-height:0;overflow:hidden;opacity:0;
      /* KLUCZOWE dla działania hamburgera: box .nav-links, mimo max-height:0,
         nadal ma realną wysokość równą sumie paddingu — box-sizing:border-box
         nie potrafi "zgnieść" paddingu poniżej 0 samym max-height, więc
         zamknięte menu i tak zajmowało niewidoczny pasek ~91px na samej
         górze ekranu, dokładnie tam gdzie leży przycisk hamburgera. Miało
         z-index:49 (wyżej niż hamburger, który nie ma z-index, czyli 0),
         więc to ten niewidzialny pasek przechwytywał kliknięcia zamiast
         przycisku — burger wyglądał, jakby "nie działał". pointer-events:none
         wyłącza go z przechwytywania kliknięć, dopóki menu faktycznie nie
         jest otwarte. */
      pointer-events:none;
      transition:max-height .3s ease, opacity .25s ease;
    }
    .nav-links a{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:1rem}
    .nav.open .nav-links{max-height:80vh;opacity:1;pointer-events:auto}
    .nav-burger{display:block}
  }

  /* ---------- HERO (fixed reveal) ---------- */
  .hero-fixed{
    position:fixed;inset:0;z-index:-1;
    overflow:hidden;background:transparent;
    transform:translateZ(0);backface-visibility:hidden; /* własna warstwa kompozycji — mniej okazji do przebłysku przy szybkim scrollu */
  }
  .hero-image{
    position:absolute;inset:0;z-index:0; /* CAŁY hero, nie tylko prawa połowa */
    background:url('hero.jpg') center/contain no-repeat; /* contain = cała grafika widoczna, bez przycinania */
  }

  #bgFx{
    position:fixed;inset:0;z-index:-2;
    width:100%;height:100%;display:block;background:#07060d;
    transform:translateZ(0); /* własna warstwa kompozycji — izoluje canvas od repaintu reszty strony przy scrollu */
  }

  .hero-inner{
    position:absolute;z-index:2;
    left:0;right:0;bottom:0;
    top:clamp(4.5rem,11vh,7.5rem); /* miejsce na fixed nav, żeby napis się pod nim nie chował */
  }

  /* góra hero, pod paskiem nav — NIGHT CITY INK. z-index:3 (wyżej niż hero-mark:2)
     to zabezpieczenie: gdyby na wąskim/niskim ekranie duży napis NEON ALLEY
     mimo wszystko wszedł w tę samą przestrzeń co ten napis, ten ma zawsze
     rysować się NAD nim, a nie być przez niego zasłonięty */
  .hero-night{
    position:absolute;left:50%;top:1rem;transform:translateX(-50%);
    z-index:3;
    text-align:center;white-space:nowrap;
    font-family:var(--script);
    font-size:clamp(1.4rem,3.6vw,2.6rem);
    line-height:1.2;
  }

  /* prawa strona hero — NEON / ALLEY, duże, jak w oryginale */
  .hero-mark{
    position:absolute;right:var(--edge);top:50%;transform:translateY(-50%);
    line-height:.86;letter-spacing:.01em;text-align:right;
  }
  .hero-mark .line-a{display:block;font-size:clamp(4.8rem,17vw,15rem)}
  .hero-mark .line-b{display:block;font-size:clamp(5.6rem,20vw,17.5rem)}

  /* odbicie w mokrym asfalcie pod neonem */
  .hero-reflect{
    position:absolute;left:0;right:0;bottom:-6%;z-index:1;
    transform:scaleY(-1);opacity:.3;filter:blur(2px);
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 65%);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 65%);
  }

  .hero-foot{
    position:absolute;z-index:2;left:var(--edge);right:var(--edge);
    bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
    display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
    color:var(--muted);font-size:.85rem;letter-spacing:.02em;
  }
  .hero-foot span{display:block;color:var(--ink);font-weight:600}

  /* linki social — własne, kryjące tło (pigułka), żeby były czytelne
     nawet na jasnym/kolorowym fragmencie zdjęcia w tle */
  .social-links{display:flex;gap:.6rem;flex-wrap:wrap}
  .social-links a{
    background:rgba(7,6,13,.72);backdrop-filter:blur(6px);
    border:1px solid var(--line);border-radius:999px;
    padding:.5rem 1rem;font-size:.78rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.02em;
    text-decoration:none;
  }
  .hero-spacer{height:100vh}
  /* ---------- HERO — MOBILE PION (telefon w pionie: wąsko, dużo wysokości) ----------
     Osobny blok tylko dla (orientation:portrait) — celowo NIE reaguje na telefon
     położony poziomo (na to jest osobny blok landscape niżej), żeby jedne ustawienia
     nie gryzły się z drugimi ani nie odziedziczały niczego przez przypadek. */
  @media (max-width:640px) and (orientation:portrait){
    /* na wąskim/pionowym ekranie "contain" dawał tylko wąski poziomy pasek
       zdjęcia (hero.jpg jest szerokie, ~2.33:1) — "cover" wypełnia całe hero,
       kosztem lekkiego przycięcia boków */
    .hero-image{background-size:cover}
    /* odbicie duplikuje cały napis (NEON/ALLEY) tym samym CSS co prawdziwy
       tekst — po przełączeniu na layout pionowy ląduje w tym samym miejscu
       co oryginał i wygląda jak nachodzące na siebie napisy, więc na mobile
       wyłączamy je całkowicie */
    .hero-reflect{display:none}
    .hero-night{position:static;transform:none;text-align:center;margin:0 auto 1.5rem;white-space:normal}
    /* transform:none jest tu krytyczne — .hero-mark ma bazowo transform:translateY(-50%),
       a transform działa niezależnie od position. Samo position:static NIE kasuje
       tego przesunięcia — element w dalszym ciągu wizualnie jedzie o połowę własnej
       wysokości w górę, prosto na hero-night, mimo że w normalnym przepływie stoi
       już pod nim. To była prawdziwa przyczyna nachodzenia napisów. */
    .hero-mark{position:static;transform:none;text-align:center;margin:0 auto}
    .hero-inner{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 var(--edge);text-align:center}
    .hero-foot{position:static;margin-top:2rem;justify-content:center;text-align:center;gap:1.2rem}
  }

  /* ---------- HERO — MOBILE POZIOM (telefon w poziomie: mało wysokości, sporo szerokości) ----------
     Telefon w landscape ma często szerokość >640px (np. 800-930px), więc blok
     powyżej (oparty na max-width) go w ogóle nie łapał — hero zostawał w pełni
     desktopowym układzie: hero-night mały u góry, hero-mark ogromny (nawet
     17.5rem) wyśrodkowany w pionie na całej wysokości. Przy niskim viewport
     (telefon poziomo ma zwykle 320-430px wysokości) ten ogromny napis realnie
     wjeżdżał na hero-night i — jako element PÓŹNIEJSZY w kodzie — rysował się
     NAD nim, więc "Night City Ink" wyglądało jakby było POD "NEON ALLEY".
     Tu dajemy hero landscape własny, dużo bardziej kompaktowy układ, żeby oba
     napisy realnie się mieściły jeden nad drugim bez zachodzenia. */
  @media (max-height:500px) and (orientation:landscape){
    .hero-image{background-size:cover}
    .hero-reflect{display:none}
    .hero-inner{
      display:flex;flex-direction:column;justify-content:center;align-items:center;
      gap:.5rem;padding:.5rem var(--edge);text-align:center;
    }
    .hero-night{position:static;transform:none;white-space:normal;font-size:clamp(1rem,3vw,1.4rem);margin:0}
    /* ten sam brakujący transform:none co w bloku portrait wyżej — bez niego
       .hero-mark i tak jedzie w górę o połowę wysokości i nachodzi na hero-night,
       niezależnie od tego, jak bardzo zmniejszymy font. Stąd napis mimo że
       mniejszy, dalej się nakładał. */
    .hero-mark{position:static;transform:none;margin:0}
    .hero-mark .line-a{font-size:clamp(2.2rem,8vw,3.6rem)}
    .hero-mark .line-b{font-size:clamp(2.6rem,9vw,4.2rem)}
    .hero-foot{
      position:static;margin-top:.6rem;gap:1rem;
      font-size:.7rem;justify-content:center;text-align:center;
    }
  }

  /* ---------- INTRO ---------- */
  .intro-head{font-family:var(--display);line-height:.92;font-size:clamp(2.2rem,6vw,4.6rem);max-width:20ch;letter-spacing:.01em}
  /* naprawa dla .neon wtopionego W ŚRODEK zdania (jedyny taki przypadek na stronie) —
     Safari czasem liczy duży text-shadow od linii tekstu zamiast kształtu liter,
     dając wypełniony prostokąt; inline-block daje mu własne, jednoznaczne pudełko */
  .intro-head .neon{display:inline-block}
  .intro-sub{margin-top:1.5rem;max-width:44ch;font-size:clamp(1rem,1.3vw,1.1rem);color:var(--muted)}
  .intro-stats{margin-top:clamp(2.5rem,6vw,4rem);display:grid;grid-template-columns:repeat(3,auto);gap:clamp(1.8rem,5vw,4rem);justify-content:start}
  .stat-num{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1}
  .stat-label{margin-top:.4rem;font-size:.78rem;letter-spacing:.03em;color:var(--muted);text-transform:uppercase}
  /* poniżej pewnej szerokości 3 kolumny robią się ciasne (etykiety typu
     "zrealizowanych sesji" się łamią) — więc to nie skalowanie w dół,
     tylko inny układ: pozioma lista wiersz-po-wierszu, liczba obok etykiety */
  @media(max-width:640px){
    .intro-stats{grid-template-columns:1fr;gap:1rem;justify-content:stretch}
    .intro-stats > div{display:flex;align-items:baseline;gap:.9rem}
    .stat-label{margin-top:0}
  }

  /* ---------- SEKCJE PRZYPIĘTE ---------- */
  .pin-sec{position:relative;background:var(--bg)}
  .pin-in{position:sticky;top:0;height:100vh;overflow:hidden;display:block;background:var(--bg);contain:paint}
  .pin-head{position:absolute;top:clamp(4.5rem,11vh,7.5rem);left:var(--edge);z-index:3;font-family:var(--display);font-size:clamp(1.7rem,3.6vw,2.8rem)}
  .pin-head .script{display:block;font-size:.5em;margin-bottom:.2rem}
  .pin-phase{position:absolute;inset:0}
  .pin-item{
    position:absolute;top:50%;left:50%;
    will-change:transform,opacity;text-align:center;white-space:nowrap;
    font-family:var(--display);letter-spacing:.01em;
    font-size:clamp(2.2rem,6.4vw,7rem);line-height:1;pointer-events:none;
  }
  .pin-rail{position:absolute;left:50%;bottom:calc(2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:.5rem;z-index:3}
  .pin-rail i{width:26px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;position:relative}
  .pin-rail i::after{content:"";position:absolute;inset:0;background:var(--n-cyan);box-shadow:0 0 6px var(--n-cyan);transform:scaleX(var(--fill,0));transform-origin:left}

  /* okrągłe okienko z wideo — dziecko .pin-item, dziedziczy animację i kolor.
     Duże, przesunięte na krawędź, mogą wychodzić poza ekran — .pin-in i tak
     przycina (overflow:hidden), więc to bezpieczne.
     box-shadow niżej daje ramce realny neonowy blask w kolorze --glow
     odziedziczonym z .neon-xxx na rodzicu .pin-item — dotyczy to jednakowo
     desktopu i mobile (wspólna baza, żeby wyglądały tak samo). */
  .pin-video{
    /* pionowe przesunięcie zmniejszone z -38% na -10%: przy max. rozmiarze koła
       (560px) to 213px vs 56px w górę od środka napisu — 213px na niższych oknach
       przeglądarki (50vh bliżej góry w px) realnie wjeżdżało pod .pin-head */
    position:absolute;top:50%;left:50%;transform:translate(-70%,-20%);
    width:clamp(260px,30vw,560px);aspect-ratio:1;border-radius:50%;
    border:1.5px solid var(--glow, currentColor);
    box-shadow:0 0 10px var(--glow, currentColor), 0 0 26px var(--glow, currentColor);
    background:#0d0b17;
    z-index:-1; /* pod tekstem — cały napis zostaje w pełni czytelny */
    overflow:hidden;
  }
  .pin-video video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    /* niektóre przeglądarki mobilne (zwłaszcza iOS Safari) renderują <video> na
       osobnej warstwie sprzętowej i IGNORUJĄ overflow:hidden/border-radius
       rodzica — samo zaokrąglenie kontenera .pin-video nie wystarczało, więc
       wideo w sekcji Style wyglądało kwadratowo, mimo że obrazki w Proces
       (zwykłe background-image, bez tego problemu) były już okrągłe.
       Zaokrąglenie trzeba więc dać też bezpośrednio na samym <video>. */
    border-radius:50%;
  }

  /* ---------- SEKCJE PRZYPIĘTE — MOBILE (TYLKO pion) ----------
     Uproszczony, statyczny układ (kafelki jeden pod drugim, bez scrollowego
     parallaxu) dotyczy WYŁĄCZNIE wąskiego, PIONOWEGO telefonu. Po obróceniu
     na poziom sekcja ma działać dokładnie jak na desktopie — pełny
     position:sticky + scrollowy parallax z updatePinSections() — stąd
     (orientation:portrait) w warunku zamiast samego max-width. Zgodnie z tym
     zmieniony jest też JS: zmienna `mobile` w master loop używa dokładnie tego
     samego zapytania (matchMedia), żeby CSS i JS nigdy się nie rozjechały. */
  @media(max-width:768px) and (orientation:portrait){
    .pin-sec{height:auto!important}
    .pin-in{position:relative;height:auto;padding:96px 0 48px}
    .pin-head{position:relative;top:auto;left:auto;padding:0 var(--edge);margin-bottom:2rem}
    .pin-phase{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;gap:28px;margin-bottom:48px;padding:0 var(--edge)}
    .pin-phase:last-child{margin-bottom:0}
    .pin-item{
      position:static!important;transform:none!important;
      /* BEZ !important na opacity: to JS (funkcja updatePinSections) ma sterować
         tą wartością klatka po klatce, żeby migotanie neonu działało na mobile
         tak samo jak na desktopie — !important by to całkowicie blokował. 1
         poniżej to tylko bezpieczny stan startowy, zanim JS w ogóle ruszy. */
      opacity:1;
      font-size:clamp(1.8rem,7vw,3.2rem);
      display:flex;flex-direction:column;align-items:center;gap:.7rem;
    }
    /* na mobile okienko nie "lata" w tle — staje się statyczną miniaturką nad
       napisem, WYRAŹNIE większą niż poprzednio, z tym samym neonowym obramowaniem
       co na desktopie (dziedziczone z bazy powyżej). Ten sam rozmiar dotyczy
       jednakowo sekcji Style i Proces (obie używają .pin-video) — clamp skaluje
       się z szerokością viewportu, więc w landscape (szerszy ekran) koło i tak
       wypadnie bliżej górnej granicy automatycznie, bez osobnej reguły.
       !important na position/transform/width/height jest tu konieczne: prawie
       każdy .pin-video w HTML ma inline style="width:...;transform:..." (desktopowe
       rozmiary/przesunięcia), a inline style zawsze wygrywa ze zwykłą regułą klasy —
       nawet wewnątrz media query. Bez !important te inline wartości przebijały tę
       regułę i na mobile wideo zostawały w desktopowym rozmiarze/przesunięciu. */
    .pin-video{
      /* position:relative, NIE static: .pin-video video ma position:absolute;
         width:100%;height:100% — taki procentowy rozmiar potrzebuje najbliższego
         POZYCJONOWANEGO przodka jako "containing block". Gdy .pin-video było
         static, przeglądarka szukała dalej w górę drzewa (.pin-item — też
         static na mobile, potem .pin-phase, które ma position:relative, ale
         wysokość "auto" zależną od zawartości, czyli NIEOKREŚLONĄ) — przy
         nieokreślonej wysokości przodka height:100% na elemencie position:absolute
         nie działa i przeglądarka cofa się do naturalnych proporcji wideo
         (16:9), więc <video> wychodził poza okrągłą ramkę zamiast dokładnie
         ją wypełniać. Sekcja Proces (obrazki jako background-image WPROST na
         .pin-video, bez dziecka position:absolute) nie miała tego problemu —
         stąd różnica "w Proces dobrze, w Style źle", o którą chodziło.
         position:relative naprawia to: .pin-video samo staje się containing
         block (ma już jawną, policzoną wysokość z clamp() niżej), więc
         video video o width/height:100% dokładnie je wypełnia — tak jak
         obrazki w Proces. Layoutowo position:relative bez top/left zachowuje
         się identycznie jak static (ten sam przepływ dokumentu), więc nic
         poza tym się nie zmienia. */
      position:relative!important;transform:none!important;
      /* top/left:50% z reguły bazowej (desktopowy trik position:absolute) trzeba
         tu jawnie wyzerować: przy position:static te offsety były ignorowane
         (static ich nie honoruje), ale position:relative już TAK — bez tego
         resetu okrąg wjeżdżał o 50% szerokości/wysokości rodzica w prawo i w
         dół, mimo transform:none. To była przyczyna "przesunięcia w prawo". */
      top:auto!important;left:auto!important;
      width:clamp(334px,87.8vw,543px)!important;height:clamp(334px,87.8vw,543px)!important;
      opacity:1;border-width:2px;
    }
    .pin-rail{display:none}
  }

  /* ---------- GALERIA ---------- */
  .gallery-grid{margin-top:clamp(2rem,5vw,3rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.5vw,1rem)}
  .gallery-tile{
    aspect-ratio:1;border-radius:4px;position:relative;overflow:hidden;
    background:var(--bg);border:1px solid var(--line);
    cursor:zoom-in;transition:border-color .25s;
  }
  .gallery-tile:hover{border-color:var(--n-cyan)}
  .gallery-glow{position:absolute;inset:-15%;background:radial-gradient(circle at 50% 38%, var(--glow) 0%, transparent 68%);filter:blur(22px)}
  .gallery-img{position:absolute;inset:5%;background-size:contain;background-position:center;background-repeat:no-repeat;z-index:1}
  @media(max-width:700px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:420px){ .gallery-grid{grid-template-columns:1fr} } /* 2 kolumny robią się za ciasne na małych telefonach — pełna szerokość czyta się lepiej */

  /* ---------- LIGHTBOX + LUPA ---------- */
  .lightbox{
    position:fixed;inset:0;z-index:100;
    background:rgba(7,6,13,.94);
    display:flex;align-items:center;justify-content:center;padding:3rem;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .lightbox.open{opacity:1;pointer-events:auto}
  .lightbox-stage{position:relative;display:inline-block;max-width:88vw;max-height:84vh} /* shrink-wrap = dokładnie te same wymiary co <img>, lupa liczy się bez przesunięć */
  .lightbox-img{display:block;max-width:88vw;max-height:84vh;width:auto;height:auto;border-radius:4px;user-select:none;-webkit-user-drag:none;cursor:none}
  .lightbox-lens{
    position:absolute;width:360px;height:360px;border-radius:50%;
    border:2px solid var(--n-cyan);
    box-shadow:0 0 18px var(--n-cyan),0 0 38px var(--n-pink),inset 0 0 24px rgba(0,0,0,.35);
    pointer-events:none;display:none;background-repeat:no-repeat;background-color:#000;
  }
  .lightbox-close{
    position:fixed;top:1.2rem;right:1.5rem;z-index:101;
    width:44px;height:44px;border-radius:50%;
    background:rgba(7,6,13,.7);border:1px solid var(--line);color:var(--ink);
    font-size:1.6rem;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .2s, box-shadow .2s;
  }
  .lightbox-close:hover{border-color:var(--n-pink);box-shadow:0 0 12px var(--n-pink)}
  @media(max-width:760px){ .lightbox-lens{display:none!important} .lightbox-img{cursor:default} } /* lupa za kursorem myszy nie ma sensu na dotyku */

  /* ---------- ARTYŚCI ---------- */
  .artist-grid{margin-top:clamp(2rem,5vw,3rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,2.5rem)}
  .artist-card{border-top:1px solid var(--line);padding-top:1.2rem}
  .artist-photo{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);margin-bottom:1rem;background:var(--bg)}
  .photo-glow{position:absolute;inset:-15%;background:radial-gradient(circle at 50% 38%, var(--glow) 0%, transparent 68%);filter:blur(22px)}
  .photo-img{position:absolute;inset:6%;background-size:contain;background-position:center;background-repeat:no-repeat;z-index:1}
  .artist-name{font-family:var(--display);font-size:1.4rem}
  .artist-spec{margin-top:.2rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
  .artist-bio{margin-top:.6rem;font-size:.92rem;color:var(--muted);line-height:1.6}

  /* ---------- PIERCING ---------- */
  .piercing-grid{margin-top:clamp(2rem,5vw,3rem);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.2rem,3vw,2rem)}
  .piercing-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem}
  .piercing-photo{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--bg)}
  .piercing-svg{position:relative;z-index:1;width:56%;height:56%}
  .piercing-item span{font-family:var(--display);font-size:.95rem;letter-spacing:.01em}
  @media(max-width:900px){ .piercing-grid{grid-template-columns:repeat(3,1fr)} }
  @media(max-width:560px){ .piercing-grid{grid-template-columns:repeat(2,1fr)} }
  .piercing-cta{margin-top:clamp(2.5rem,6vw,3.5rem);text-align:center}
  @media(max-width:760px){ .artist-grid{grid-template-columns:1fr;max-width:360px;margin:clamp(2rem,5vw,3rem) auto 0} }

  /* ---------- OPINIE ---------- */
  .quote-grid{margin-top:clamp(2rem,5vw,3rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,2.5rem)}
  .quote{border-left:2px solid var(--n-pink);padding-left:1.2rem;box-shadow:-6px 0 16px -10px var(--n-pink)}
  .quote p{font-family:var(--script);font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.5}
  .quote span{display:block;margin-top:.7rem;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
  @media(max-width:760px){ .quote-grid{grid-template-columns:1fr;max-width:420px;margin:clamp(2rem,5vw,3rem) auto 0} }

  /* ---------- CENNIK ---------- */
  .price-row{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:1.1em 0;border-bottom:1px solid var(--line)}
  .price-row:first-of-type{border-top:1px solid var(--line)}
  .price-name{font-family:var(--display);font-size:1.54em;letter-spacing:.01em}
  .price-val{font-family:var(--display);font-size:1.54em;color:var(--n-cyan);text-shadow:0 0 10px rgba(0,234,255,.5)}
  .price-note{margin-top:1em;font-size:1.19em;color:var(--muted)}

  /* DWIE IDENTYCZNE, KWADRATOWE RAMKI obok siebie — ten sam border, to samo tło,
     ten sam rozmiar. Lewa: cennik wypełnia ramkę od brzegu do brzegu (padding).
     Prawa: wideo wypełnia ramkę od brzegu do brzegu (object-fit:cover). */
  .cennik-grid{margin-top:2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
  .cennik-list,.cennik-video{
    aspect-ratio:1;width:100%;
    border:1px solid var(--line);border-radius:4px;overflow:hidden;position:relative;
    background:var(--bg);
  }
  .cennik-list{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,3vw,2.75rem)}
  .cennik-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  @media(max-width:760px){
    .cennik-grid{grid-template-columns:1fr}
    /* na jednej kolumnie tekst cennika (4 wiersze + notka) nie mieści się
       w kwadratowej ramce — usuwamy aspect-ratio i overflow:hidden dla listy,
       żeby ramka rosła do wysokości treści zamiast ją obcinać od góry/dołu */
    .cennik-list{aspect-ratio:auto;overflow:visible}
  }
  @media(max-width:480px){
    /* dłuższe pary (np. "Cover-up / duże projekty" + "wycena indywidualna")
       gryzły się w jednym wierszu — czytelniej jako etykieta nad ceną */
    .price-row{flex-direction:column;align-items:flex-start;gap:.25rem}
    .price-val{font-size:1.3rem}
  }

  /* ---------- CTA / KONTAKT ---------- */
  #kontakt{
    background:
      radial-gradient(130% 130% at 100% 0%, transparent 0%, transparent 22%, rgba(7,6,13,.55) 55%, rgba(7,6,13,.9) 100%),
      url('hero2.jpg') center/cover no-repeat;
  }
  .cta-title{font-family:var(--display);line-height:.9;font-size:clamp(2.6rem,9vw,6.2rem);max-width:14ch}
  .cta-title .neon{display:inline-block} /* ten sam wzorzec co .intro-head — neon wtopiony w zdanie */
  .cta-row{margin-top:clamp(2rem,6vw,3.5rem);display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:clamp(1.5rem,4vw,2rem)}
  .cta-link{
    font-family:var(--display);font-size:clamp(1.2rem,3vw,1.8rem);
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.7rem 1.4rem;border:1px solid var(--n-pink);border-radius:999px;
    box-shadow:0 0 14px rgba(255,47,176,.4), inset 0 0 10px rgba(255,47,176,.1);
    transition:box-shadow .3s, gap .3s cubic-bezier(.16,1,.3,1);
  }
  .cta-link:hover{ gap:1.1rem; box-shadow:0 0 24px rgba(255,47,176,.65), inset 0 0 14px rgba(255,47,176,.2); }
  .cta-meta{font-size:.85rem;color:var(--muted);line-height:1.7;text-align:right}
  .cta-meta.neon-cyan{color:#eafeff} /* wyższa specyficzność niż samo .cta-meta — neon ma wygrać */
  @media(max-width:560px){
    .cta-row{flex-direction:column;align-items:flex-start;gap:1.5rem}
    .cta-meta{text-align:left}
  }

  /* ---------- FOOTER ---------- */
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding:1.6rem var(--edge);font-size:.78rem;color:var(--muted);letter-spacing:.02em;background:var(--bg2);transform:translateZ(0);backface-visibility:hidden}
  .foot-logo{font-family:var(--display);font-size:1.1rem;color:var(--ink)}
  @media(max-width:560px){ .foot{flex-direction:column;text-align:center;gap:.5rem} }