/* ══════════════════════════════════════════════════════════════════════════
   CYBERPUNK RP — cyberpunkrp.pl
   Styl: Night City po zmroku — czerń z fioletem, neonowa czerwień,
   kanciaste ksztalty (clip-path), skanlinie i glitche.

   Spis:
     00  zmienne i reset
     01  warstwy FX (skanlinie, szum, winieta, siatka)
     02  boot / preloader
     03  typografia i elementy wspolne (kicker, przyciski, tagi)
     04  nawigacja
     05  hero + ticker
     06  sekcje: naglowki, siatki
     07  dzielnice
     08  systemy (feature grid)
     09  galeria / sneak peek
     10  roadmapa
     11  FAQ
     12  CTA / Discord
     13  stopka
     14  animacje glitch
     15  responsywnosc + prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 00 · zmienne i reset ─────────────────────────────────────────────── */
:root{
  /* tlo — prawie czysta czern, minimalny chlodny odcien (jak HUD w grze) */
  --bg:        #08080b;
  --bg-2:      #0b0c10;
  --bg-3:      #101116;
  --panel:     rgba(32, 11, 13, .62);
  --panel-2:   rgba(52, 14, 18, .66);

  /* czerwien: cynober, nie roz */
  --red:       #ff2f3c;
  --red-soft:  #ff6a72;
  --red-deep:  #a8121d;
  --red-dim:   rgba(255, 47, 60, .12);

  /* cyjan: drugi pelnoprawny kolor UI — etykiety, wartosci, stany aktywne */
  --cyan:      #2ff3ff;
  --cyan-soft: #8bf8ff;
  --cyan-dim:  rgba(47, 243, 255, .1);

  /* fiolet: juz tylko akcent "rzadkosci" (jak rarity przedmiotow) */
  --violet:    #a04dff;
  --violet-2:  #c88bff;

  --yellow:    #fcee0a;   /* sygnaturowy zolty 2077 — bardzo oszczednie */

  /* tekst */
  --tx:        #f0f2f5;
  --tx-2:      #a8adb8;
  --tx-3:      #6d7280;

  /* linie: czerwona dla ramek, cyjanowa dla siatek i podzialow */
  --line:      rgba(255, 47, 60, .34);
  --line-2:    rgba(255, 47, 60, .17);

  --wrap:      1200px;
  --r:         0px;

  --f-disp:    'Chakra Petch', 'Rajdhani', 'Arial Narrow', system-ui, sans-serif;
  --f-ui:      'Rajdhani', 'Chakra Petch', system-ui, sans-serif;
  --f-mono:    'Share Tech Mono', ui-monospace, 'DejaVu Sans Mono', monospace;

  /* kanciasty naroznik — sygnatura UI z 2077 */
  --clip-tr:   polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --clip-btn:  polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--f-ui);
  font-size:clamp(16px, 1.05vw, 18px);
  line-height:1.65;
  overflow-x:hidden;
  font-weight:500;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--f-disp); font-weight:700; line-height:1.02; letter-spacing:.01em; margin:0; }
p{ margin:0 0 1em; }
::selection{ background:var(--red); color:#0b0210; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 860px); }

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; left:-9999px; top:0; z-index:999;
  background:var(--red); color:#12000a; padding:.6rem 1.2rem; font-weight:700;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* pasek przewijania */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:#0a0a0d; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--red-deep), #0d4a52); border:2px solid #0a0a0d; }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

/* ── 01 · warstwy FX ──────────────────────────────────────────────────── */
.fx{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.fx__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
/* Boczne szyny danych — te kolumny drobnego monotypu przy krawedziach ekranu,
   ktore w grze wisza na kazdym ekranie terminala. Czysta dekoracja, aria-hidden. */
.fx__rail{
  position:absolute; top:80px; bottom:0; width:78px; overflow:hidden;
  font-family:var(--f-mono); font-size:9px; line-height:1.75; letter-spacing:.08em;
  color:var(--red); opacity:.26; white-space:pre; user-select:none;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent);
}
.fx__rail--l{ left:10px; }
.fx__rail--r{ right:10px; text-align:right; color:var(--cyan); opacity:.2; }
.fx__rail b{ color:var(--cyan); font-weight:400; }
.fx__rail--r b{ color:var(--red); }
@media (max-width:1500px){ .fx__rail{ display:none; } }

.fx__scanlines{
  position:absolute; left:0; right:0; top:-300px; height:calc(100% + 300px);
  opacity:.3;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.075) 0 1px, transparent 1px 3px);
  animation:scanmove 9s linear infinite;
  will-change:transform;
}
.fx__noise{
  position:absolute; inset:-20%; opacity:.045; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noiseshift .6s steps(3) infinite;
}
.fx__vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 30%, transparent 35%, rgba(4,1,9,.75) 100%);
}
@keyframes scanmove{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,300px,0); } }
@keyframes noiseshift{
  0%{transform:translate3d(0,0,0)} 33%{transform:translate3d(-9px,5px,0)}
  66%{transform:translate3d(5px,-9px,0)} 100%{transform:translate3d(0,0,0)}
}
main,.nav,.foot{ position:relative; z-index:1; }

/* ── 02 · boot / preloader ────────────────────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .35s ease, visibility .35s;
  /* Znika sam, bez udzialu JS — inaczej przy wylaczonym skrypcie zostalby
     czarny ekran na zawsze. Krotko, bo zaslania tresc i psuje LCP. */
  animation:boot-znika .3s ease .55s forwards;
}
@keyframes boot-znika{ to{ opacity:0; visibility:hidden; } }
.boot.is-gone{ opacity:0; visibility:hidden; }
.boot__inner{ width:min(92vw, 460px); font-family:var(--f-mono); color:var(--red-soft); font-size:.9rem; }
.boot__line{ margin:0 0 .35rem; opacity:0; animation:bootline .25s forwards; letter-spacing:.06em; }
.boot__line span{ color:var(--cyan); }
.boot__line--2{ animation-delay:.22s; }
.boot__line--3{ animation-delay:.44s; }
.boot__bar{ margin-top:.9rem; height:4px; background:rgba(255,47,60,.16); overflow:hidden; }
.boot__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--red)); animation:bootbar .55s cubic-bezier(.6,.05,.3,1) forwards; }
.boot__dots::after{ content:''; animation:dots 1s steps(4,end) infinite; }
@keyframes bootline{ to{ opacity:1; } }
@keyframes bootbar{ to{ width:100%; } }
@keyframes dots{ 0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'} }
body.is-loading{ overflow:hidden; }

/* ── 03 · elementy wspolne ────────────────────────────────────────────── */
.kicker{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--red-soft); display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem;
}
.kicker .sep{ color:var(--tx-3); }
.kicker .dot{
  width:8px; height:8px; background:var(--red); display:inline-block;
  box-shadow:0 0 12px var(--red); animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)} }

.btn{
  --btn-bg:transparent;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.6rem; border:1px solid var(--red); background:var(--btn-bg);
  color:var(--tx); font-family:var(--f-disp); font-weight:700; font-size:1rem;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  clip-path:var(--clip-btn); transition:color .2s, box-shadow .25s, transform .12s;
  isolation:isolate; overflow:hidden;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--red);
  transform:translateY(101%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.btn:hover::before, .btn:focus-visible::before{ transform:translateY(0); }
.btn:hover, .btn:focus-visible{ color:#12000a; box-shadow:0 0 26px rgba(255,47,60,.45); }
.btn:active{ transform:translateY(1px); }
.btn--primary{ --btn-bg:rgba(255,47,60,.1); }
.btn--ghost{ border-color:var(--line-2); color:var(--tx-2); }
.btn--ghost::before{ background:var(--cyan); }
.btn--ghost:hover{ color:#0d0018; box-shadow:0 0 26px rgba(47,243,255,.4); }
.btn--sm{ padding:.5rem 1rem; font-size:.82rem; }
.btn--lg{ padding:1.05rem 2.4rem; font-size:1.15rem; }
.btn.is-locked{
  border-color:var(--tx-3); color:var(--tx-3); cursor:not-allowed;
  background:repeating-linear-gradient(45deg, rgba(109,114,128,.07) 0 6px, transparent 6px 12px);
}
.btn.is-locked::before{ display:none; }
.btn.is-locked:hover{ color:var(--tx-2); box-shadow:none; }
.btn.is-shaking{ animation:denyshake .3s; }
@keyframes denyshake{ 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} }

.tag{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; padding:.15rem .45rem;
  border:1px solid currentColor; line-height:1.4;
}
.tag--soon{ color:var(--yellow); border-color:rgba(252,238,10,.5); }

.note{
  font-family:var(--f-mono); font-size:.8rem; color:var(--tx-3); text-align:center;
  margin-top:2rem; letter-spacing:.05em;
}

/* pojawianie sie przy scrollu */
/* Sekcje wjezdzaja przy scrollu, ale tresc NIE MOZE zalezec od JS.
   Dwa zabezpieczenia: (1) gdy przegladarka zna @media scripting, przy wylaczonym
   JS pokazujemy wszystko od razu; (2) awaryjna animacja odslania tresc po 4 s,
   gdyby skrypt nie wstal. Przy dzialajacym JS obie sa niewidoczne — klasa
   .is-in odslania element wczesniej, a stan koncowy jest identyczny. */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  animation:reveal-awaryjnie 0s linear 4s forwards;
}
.reveal.is-in{ opacity:1; transform:none; }
@keyframes reveal-awaryjnie{ to{ opacity:1; transform:none; } }
@media (scripting: none){
  .reveal{ opacity:1; transform:none; animation:none; }
  .boot{ display:none; }
}

/* ── 04 · nawigacja ───────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(6px);
  background:linear-gradient(to bottom, rgba(8,8,11,.96), rgba(8,8,11,.82));
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.nav.is-stuck{ box-shadow:0 10px 40px -18px rgba(255,47,60,.6); }
.nav__in{ display:flex; align-items:center; gap:1.5rem; height:68px; }
.nav__scan{
  position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg, transparent, var(--red), var(--cyan), transparent);
  background-size:200% 100%; animation:navscan 6s linear infinite; opacity:.8;
}
@keyframes navscan{ to{ background-position:-200% 0; } }

.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.brand__pic{ display:block; flex:none; }
.brand__mark{
  width:42px; height:42px; display:block; flex:none;
  /* sciety naroznik zamiast kwadratu — zeby znaczek siedzial w jezyku reszty UI */
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  filter:drop-shadow(0 0 10px rgba(255,47,60,.45));
  transition:filter .25s, transform .25s;
}
.brand:hover .brand__mark{ filter:drop-shadow(0 0 16px rgba(255,47,60,.8)); transform:scale(1.05); }
.foot__logo{ display:flex; align-items:center; gap:.85rem; margin:0 0 .1rem; }
.foot__logo picture{ display:block; flex:none; }
.foot__logo img{
  width:52px; height:52px; flex:none;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  filter:drop-shadow(0 0 12px rgba(255,47,60,.35));
}
.brand__txt{ font-family:var(--f-disp); font-weight:700; letter-spacing:.1em; font-size:1.05rem; }
.brand__txt b{ color:var(--tx); }
.brand__txt i{
  font-style:normal; color:var(--red); margin-left:.3rem;
  text-shadow:0 0 14px rgba(255,47,60,.7);
}
.brand:hover .brand__txt i{ animation:flicker .5s steps(2) 2; }
@keyframes flicker{ 50%{ opacity:.25; } }

.nav__links{ display:flex; gap:1.5rem; }
.nav__links a{
  position:relative; font-family:var(--f-disp); font-weight:600; font-size:.92rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tx-2); padding:.3rem 0;
  transition:color .2s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--red); box-shadow:0 0 10px var(--red); transition:width .25s;
}
.nav__links a:hover{ color:var(--tx); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ flex:none; }

.burger{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:var(--red); margin:5px 0; transition:.25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

[hidden]{ display:none !important; }
.mobile-menu{
  position:sticky; top:68px; z-index:99; display:grid; gap:.2rem; padding:1rem 1.25rem 1.5rem;
  background:rgba(9,9,13,.97); border-bottom:1px solid var(--line);
  font-family:var(--f-mono); letter-spacing:.1em;
}
.mobile-menu a{ padding:.6rem 0; color:var(--tx-2); border-bottom:1px solid rgba(47,243,255,.14); }
.mobile-menu a:hover{ color:var(--red-soft); }

/* ── 05 · hero ────────────────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(4rem,11vh,8rem) 0 0; overflow:hidden; min-height:min(92vh,900px); display:flex; flex-direction:column; }
.hero__in{ flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:4rem; }
.hero__bg{ position:absolute; inset:0; z-index:-1; }
.hero__glow{ position:absolute; border-radius:50%; opacity:.5; will-change:transform; }
.hero__glow--red{ width:52vw; height:52vw; background:radial-gradient(circle, rgba(255,47,60,.42) 0%, rgba(255,47,60,.26) 28%, rgba(255,47,60,.1) 52%, transparent 72%); top:-14vw; right:-10vw; animation:float1 18s ease-in-out infinite; }
.hero__glow--violet{ width:46vw; height:46vw; background:radial-gradient(circle, rgba(47,243,255,.16) 0%, rgba(47,243,255,.1) 30%, rgba(47,243,255,.04) 54%, transparent 74%); bottom:-16vw; left:-10vw; animation:float2 22s ease-in-out infinite; }
@keyframes float1{ 50%{ transform:translate3d(-4vw, 4vw, 0) scale(1.1); } }
@keyframes float2{ 50%{ transform:translate3d(5vw, -3vw, 0) scale(1.08); } }
.hero__grid{
  position:absolute; inset:0; overflow:hidden;
  mask-image:radial-gradient(90% 70% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 40%, #000 20%, transparent 80%);
}
.hero__grid i{
  position:absolute; inset:-64px;
  background-image:
    linear-gradient(rgba(255,47,60,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,47,60,.07) 1px, transparent 1px);
  background-size:64px 64px;
  animation:gridslide 24s linear infinite;
  will-change:transform;
}
@keyframes gridslide{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(64px,64px,0); } }

.hero__title{
  font-size:clamp(3rem, 9.6vw, 8.6rem);
  letter-spacing:-.02em; margin:0 0 1.2rem; text-transform:uppercase;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .25em;
}
.hero__title-l1{
  color:var(--tx);
  text-shadow:0 0 40px rgba(255,47,60,.35);
}
.hero__title-l2{
  color:var(--red);
  -webkit-text-stroke:0;
  text-shadow:0 0 24px rgba(255,47,60,.9), 0 0 70px rgba(255,47,60,.5);
}
.hero__lead{
  max-width:62ch; font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--tx-2);
  border-left:2px solid var(--red); padding-left:1.1rem;
}
.hero__lead strong{ color:var(--tx); font-weight:700; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0 3rem; }

.stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); margin:0;
  clip-path:var(--clip-tr); max-width:760px;
}
.stat{ background:rgba(24,10,12,.8); padding:1rem 1.15rem; }
.stat dt{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em; color:var(--tx-3); text-transform:uppercase; }
.stat dd{ margin:.25rem 0 0; font-family:var(--f-disp); font-weight:700; font-size:1.05rem; color:var(--cyan); letter-spacing:.06em; }

.hero__scroll{
  position:absolute; bottom:5.6rem; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid var(--line); display:grid; place-items:start center;
  padding-top:7px; opacity:.75;
}
.hero__scroll span{ width:3px; height:8px; background:var(--red); animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 50%{ transform:translateY(14px); opacity:.2; } }

/* ticker */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(255,47,60,.1), rgba(47,243,255,.05));
  overflow:hidden; padding:.55rem 0;
}
.ticker__track{ display:flex; width:max-content; animation:ticker 42s linear infinite; will-change:transform; }
.ticker__track span{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.24em; color:var(--red-soft); white-space:nowrap; }
@keyframes ticker{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ── 06 · sekcje ──────────────────────────────────────────────────────── */
.sec{ padding:clamp(4.5rem, 9vw, 8rem) 0; position:relative; }
.sec--alt{ background:linear-gradient(180deg, transparent, rgba(16,14,18,.6) 20%, rgba(16,14,18,.6) 80%, transparent); }
.sec--alt::before, .sec--alt::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.sec--alt::before{ top:0; } .sec--alt::after{ bottom:0; }

.sec__head{ margin-bottom:clamp(2.5rem,5vw,4rem); max-width:70ch; }
.sec__num{ font-family:var(--f-mono); color:var(--red); letter-spacing:.3em; font-size:.8rem; margin:0 0 .5rem; }
.sec__title{ font-size:clamp(2rem, 5.2vw, 3.6rem); text-transform:uppercase; margin-bottom:.6rem; }
.sec__title::after{
  content:''; display:block; width:70px; height:3px; margin-top:.8rem;
  background:linear-gradient(90deg, var(--red) 55%, var(--cyan)); box-shadow:0 0 18px rgba(255,47,60,.55);
}
.sec__sub{ color:var(--tx-2); font-size:1.05rem; margin:0; }

.grid-2{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.prose p{ color:var(--tx-2); font-size:1.08rem; }
.prose strong{ color:var(--tx); }

.pill-list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); clip-path:var(--clip-tr); }
.pill-list li{ background:rgba(22,10,12,.86); padding:.85rem 1.1rem; font-size:.98rem; color:var(--tx-2); }
.pill__k{
  display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.22em;
  color:var(--cyan); text-transform:uppercase; margin-bottom:.15rem;
}

/* ── 07 · dzielnice ───────────────────────────────────────────────────── */
.districts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:1.25rem; }
.district{
  position:relative; padding:1.7rem 1.5rem 1.5rem; background:var(--panel);
  border:1px solid var(--line-2); clip-path:var(--clip-tr);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, background .3s;
  overflow:hidden;
}
.district::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:linear-gradient(135deg, rgba(255,47,60,.14), transparent 55%);
}
.district::after{
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition:none;
}
.district:hover{ transform:translateY(-6px); border-color:var(--red); background:var(--panel-2); }
.district:hover::before{ opacity:1; }
.district:hover::after{ animation:sweep .7s ease; }
@keyframes sweep{ to{ left:140%; } }
.district__id{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.25em; color:var(--red);
  position:absolute; top:1rem; right:1.2rem; opacity:.8;
}
.district h3{ font-size:1.5rem; text-transform:uppercase; margin-bottom:.5rem; }
.district p{ color:var(--tx-2); font-size:.97rem; margin-bottom:1rem; }
.district__tag{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--cyan-soft);
  border-top:1px solid var(--line-2); padding-top:.7rem; display:block;
}

/* ── 08 · systemy ─────────────────────────────────────────────────────── */
.features{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1px; }
.feat{
  background:rgba(18,9,11,.9); padding:1.9rem 1.6rem; position:relative; transition:background .3s;
  box-shadow:0 0 0 1px var(--line-2);   /* obrys zamiast tla siatki — brak "pustych" kafli */
}
.feat::before{
  content:''; position:absolute; left:0; top:0; width:2px; height:0; background:var(--red);
  box-shadow:0 0 14px var(--red); transition:height .35s ease;
}
.feat:hover{ background:rgba(44,12,16,.9); }
.feat:hover::before{ height:100%; }
.feat__ico{
  width:46px; height:46px; display:grid; place-items:center; color:var(--red);
  border:1px solid var(--line); margin-bottom:1rem;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition:color .3s, border-color .3s, transform .3s;
}
.feat:hover .feat__ico{ color:var(--cyan); border-color:var(--cyan); transform:rotate(-4deg) scale(1.06); }
.feat h3{ font-size:1.25rem; text-transform:uppercase; margin-bottom:.45rem; }
.feat p{ color:var(--tx-2); font-size:.95rem; margin:0; }

/* ── 09 · galeria ─────────────────────────────────────────────────────── */
.shots{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:1.5rem; }
.shot{ margin:0; }
.shot__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3);
  border:1px solid var(--line-2); clip-path:var(--clip-tr);
  transition:border-color .3s, box-shadow .3s;
}
.shot__frame picture{ display:block; width:100%; height:100%; }
.shot__frame img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s; }
.shot:hover .shot__frame{ border-color:var(--red); box-shadow:0 0 34px -8px rgba(255,47,60,.55); }
.shot:hover .shot__frame img{ transform:scale(1.06); filter:saturate(1.15); }
.shot__locked{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.3rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,47,60,.06) 0 10px, transparent 10px 20px),
    linear-gradient(150deg, rgba(160,77,255,.18), rgba(255,47,60,.12));
  font-family:var(--f-mono); text-align:center; padding:1rem;
}
.shot__locked b{ font-size:.9rem; letter-spacing:.25em; color:var(--red-soft); }
.shot__locked em{ font-style:normal; font-size:.72rem; letter-spacing:.18em; color:var(--tx-3); }
.shot__lockicon{ font-size:2rem; color:var(--red); animation:pulse 2.4s ease-in-out infinite; line-height:1; }
.shot__idx{
  position:absolute; left:.9rem; bottom:.8rem; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.2em; color:var(--tx-3);
}
.shot figcaption{ padding:.9rem .2rem 0; }
.shot figcaption b{ display:block; font-family:var(--f-disp); font-size:1.08rem; letter-spacing:.04em; text-transform:uppercase; }
.shot figcaption span{ display:block; color:var(--tx-2); font-size:.93rem; }

/* ── 10 · roadmapa ────────────────────────────────────────────────────── */
.road{ list-style:none; margin:0; padding:0 0 0 2rem; position:relative; }
.road::before{
  content:''; position:absolute; left:6px; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(var(--red), var(--cyan), transparent);
}
.road__item{ position:relative; padding:0 0 2.2rem 1.4rem; }
.road__dot{
  position:absolute; left:-2rem; top:.45rem; width:13px; height:13px;
  background:var(--bg); border:2px solid var(--tx-3); transform:rotate(45deg);
}
.road__item.is-done .road__dot{ border-color:var(--cyan); background:var(--cyan-dim); }
.road__item.is-active .road__dot{ border-color:var(--red); background:var(--red); box-shadow:0 0 16px var(--red); animation:pulse 2s ease-in-out infinite; }
.road__stage{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.25em; color:var(--tx-3); margin:0 0 .3rem; display:flex; align-items:center; gap:.6rem; }
.road__body h3{ font-size:1.35rem; text-transform:uppercase; margin-bottom:.35rem; }
.road__body p{ color:var(--tx-2); margin:0; font-size:.98rem; max-width:65ch; }
.badge{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; padding:.12rem .45rem;
  border:1px solid var(--tx-3); color:var(--tx-3);
}
.badge--done{ color:var(--cyan-soft); border-color:rgba(47,243,255,.45); }
.badge--live{ color:var(--red); border-color:var(--red); box-shadow:0 0 12px rgba(255,47,60,.35); }

/* ── 11 · FAQ ─────────────────────────────────────────────────────────── */
.faq{ display:grid; gap:.7rem; }
.faq__i{
  border:1px solid var(--line-2); background:var(--panel); clip-path:var(--clip-btn);
  transition:border-color .25s, background .25s;
}
.faq__i[open]{ border-color:var(--red); background:var(--panel-2); }
.faq__i summary{
  cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.3rem; position:relative;
  font-family:var(--f-disp); font-weight:600; font-size:1.08rem; letter-spacing:.03em;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::before{ content:'>'; color:var(--red); font-family:var(--f-mono); margin-right:.6rem; }
.faq__i summary::after{
  content:'+'; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  color:var(--red); font-family:var(--f-mono); font-size:1.3rem; transition:transform .25s;
}
.faq__i[open] summary::after{ content:'−'; }
.faq__i summary:hover{ color:var(--red-soft); }
.faq__a{ padding:0 1.3rem 1.2rem 2.4rem; color:var(--tx-2); animation:faqin .3s ease; }
.faq__a p{ margin:0; }
.faq__a b{ color:var(--tx); }
@keyframes faqin{ from{ opacity:0; transform:translateY(-6px); } }

/* ── 12 · CTA ─────────────────────────────────────────────────────────── */
.cta__in{ display:grid; }
.cta__panel{
  position:relative; text-align:center; padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3.5rem);
  border:1px solid var(--line); clip-path:var(--clip-tr);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255,47,60,.16), transparent 60%),
    linear-gradient(160deg, rgba(24,13,16,.9), rgba(9,9,13,.94));
}
.cta__panel .kicker{ justify-content:center; }
.cta__title{ font-size:clamp(2.4rem,7vw,4.5rem); text-transform:uppercase; color:var(--tx); margin-bottom:1rem; }
.cta__lead{ color:var(--tx-2); max-width:56ch; margin-inline:auto; }
.cta__note{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; color:var(--tx-3); margin:1.2rem 0 0; }

/* ── 13 · stopka ──────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:3rem 0 2.5rem; background:rgba(6,6,9,.75); }
.foot__in{ display:grid; gap:1.5rem; }
.foot__brand p{ color:var(--tx-3); font-size:.92rem; margin:.4rem 0 0; max-width:46ch; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.2rem; font-family:var(--f-mono); font-size:.8rem; letter-spacing:.12em; }
.foot__nav a{ color:var(--tx-2); }
.foot__nav a:hover{ color:var(--red); }
.foot__legal{ color:var(--tx-3); font-size:.8rem; max-width:80ch; margin:0; border-top:1px solid var(--line-2); padding-top:1.2rem; }
.foot__copy{ font-family:var(--f-mono); font-size:.75rem; color:var(--tx-3); letter-spacing:.1em; margin:0; }
.foot__copy .sep{ color:var(--red); }

/* ── 14 · glitch ──────────────────────────────────────────────────────── */
[data-glitch]{ position:relative; }
[data-glitch].is-glitching::before,
[data-glitch].is-glitching::after{
  content:attr(data-glitch); position:absolute; inset:0; pointer-events:none;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
}
[data-glitch].is-glitching::before{ color:var(--cyan); transform:translate(-3px,0); clip-path:inset(0 0 55% 0); opacity:.85; mix-blend-mode:screen; }
[data-glitch].is-glitching::after{ color:var(--red); transform:translate(3px,0); clip-path:inset(52% 0 0 0); opacity:.85; mix-blend-mode:screen; }
[data-glitch].is-glitching{ animation:glitchshift .28s steps(2) 2; }
@keyframes glitchshift{ 25%{transform:translateX(-2px)} 50%{transform:translateX(3px)} 75%{transform:translateX(-1px)} }

.glitch-txt{ position:relative; display:inline-block; }

/* ── 15 · responsywnosc ───────────────────────────────────────────────── */
@media (max-width:980px){
  .grid-2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:block; }
  .hero{ min-height:auto; padding-bottom:1rem; }
  .hero__scroll{ display:none; }
  .hero__title{ font-size:clamp(2.8rem,15vw,5rem); }
  .road{ padding-left:1.5rem; }
  .road__dot{ left:-1.5rem; }
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .btn{ width:100%; justify-content:center; }
  .hero__cta{ gap:.75rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  /* Zero teatru: preloader nie pojawia sie wcale. Przy okazji rozwiazuje kolizje,
     w ktorej opoziniona animacja CSS przebijala klase .is-gone zdejmowana przez JS. */
  .boot{ display:none !important; animation:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .fx__canvas, .fx__noise{ display:none; }
}

/* wydruk — ktos kiedys wydrukuje, niech nie zmarnuje tonera */
@media print{
  .fx,.boot,.nav,.mobile-menu,.ticker,.hero__scroll{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ── 16 · strona 404 ──────────────────────────────────────────────────── */
.e404{ min-height:100vh; display:grid; place-items:center; text-align:center; padding:2rem; }
.e404 h1{ font-size:clamp(5rem,22vw,14rem); color:var(--red); line-height:.9;
          text-shadow:0 0 40px rgba(255,47,60,.6); margin-bottom:1rem; }
.e404 p{ color:var(--tx-2); max-width:46ch; margin-inline:auto; }
.e404 .kicker{ justify-content:center; }
.e404 .cta-row{ margin-top:2rem; }