/* ===== STRONA GŁÓWNA ASFALT - ZAKTUALIZOWANA ===== */
:root {
  --szyld: "Oswald", "Arial Narrow", Impact, sans-serif;
  --naglowek: "Barlow Condensed", "Oswald", sans-serif;
  --tresc: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tlo: #0b0e13;
  --beton: #1a202a;
  --beton-jasny: #262e3b;
  --sod: #FFB347;
  --sod-hover: #ffc266;
  --kosc: #EDE9DE;
  --tekst-muted: rgba(237, 233, 222, 0.7);
  --krew: #FF4B4B;
  --mint: #3FE0C0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--kosc);
  font-family: var(--tresc);
  font-feature-settings: "cv02","cv03","cv04","ss01";
  letter-spacing: -0.006em;
  line-height: 1.6;
  scroll-behavior: smooth;
}

a { color: inherit; transition: color 0.2s; }
.text-center { text-align: center; }

.kontener {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.kontener.waski { max-width: 720px; }

/* NAGŁÓWEK */
.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 14, 19, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--beton-jasny);
}
.naglowek-in {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 65px;
}
.logo {
  font-family: var(--szyld);
  letter-spacing: .5px;
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--sod);
  text-decoration: none;
  text-shadow: 0 2px 0 #000;
}
.menu {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}
.menu a { text-decoration: none; color: var(--tekst-muted); }
.menu a:hover { color: var(--sod); }

/* PRZYCISKI */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}
.btn:active { transform: translateY(2px); }
.btn-glowny {
  background: var(--sod);
  color: #12161d;
  box-shadow: 0 4px 14px rgba(255, 179, 71, 0.2);
}
.btn-glowny:hover {
  background: var(--sod-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 179, 71, 0.3);
}
.btn-sec {
  background: var(--beton);
  color: var(--kosc);
  border: 1px solid var(--beton-jasny);
}
.btn-sec:hover {
  background: var(--beton-jasny);
  border-color: #39434F;
}
.btn.duzy { padding: 14px 28px; font-size: 15px; }

/* HERO SEKCJA I CANVAS */
.hero {
  position: relative;
  padding: 110px 0 140px; 
  text-align: center;
  overflow: hidden;
  background: var(--tlo); 
}

#bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  z-index: 0;
  opacity: 0.85; 
  pointer-events: none;
  
  /* Poprawiona maska: zanika TYLKO na samej górze (niebo). Dół (ulica) jest ostry! */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
  
  filter: blur(1.5px);
}

.hero-content {
  position: relative;
  z-index: 10; 
}

.etykieta {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(63, 224, 192, 0.15);
  border: 1px solid rgba(63, 224, 192, 0.4);
  color: var(--mint);
  text-shadow: 0 1px 2px #000;
}
.hero h1 {
  margin: 0 0 20px;
  font-family: var(--szyld);
  letter-spacing: .5px;
  font-size: clamp(36px, 7vw, 60px);
  line-height: 1.1;
  letter-spacing: 1px;
  text-shadow: 0 4px 6px rgba(0,0,0,0.8);
}
.akcent { color: var(--sod); }
.lead {
  max-width: 660px;
  margin: 0 auto 30px;
  font-size: 17px;
  color: var(--tekst-muted);
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}
.hero-btny {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Szklany panel ze statystykami */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 40px auto 0;
  padding: 20px 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(11, 14, 19, 0.85); 
  backdrop-filter: blur(12px);
  max-width: fit-content;
  color: var(--tekst-muted);
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.hero-stats b {
  display: block;
  font-size: 24px;
  color: var(--kosc);
  font-family: var(--szyld);
  letter-spacing: .5px;
  text-shadow: 0 2px 2px #000;
  margin-bottom: 2px;
}

/* CZERWONY PASEK Z NEWSAMI (TICKER) NA DOLE HERO */
.news-ticker-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* Ciemnoczerwone, mocno przezroczyste szkło - widać przez nie ruch uliczny */
  background: rgba(22, 10, 10, 0.45); 
  border-top: 1px solid rgba(255, 75, 75, 0.3); 
  box-shadow: 0 0 20px rgba(255, 75, 75, 0.15), 0 -4px 20px rgba(0,0,0,0.5); 
  backdrop-filter: blur(4px);
  
  z-index: 20;
  padding: 12px 0;
  display: flex;
  overflow: hidden;
}
.news-ticker {
  display: flex;
  width: max-content;
  animation: scrollTicker 25s linear infinite;
}
.news-ticker:hover {
  animation-play-state: paused;
}
.ticker-content {
  display: flex;
}
.ticker-content span {
  color: var(--kosc);
  font-size: 13.5px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ticker-content span b.w {
  color: #12161d;
  background: #FF4B4B; 
  box-shadow: 0 0 8px rgba(255, 75, 75, 0.6); 
  font-family: var(--szyld);
  letter-spacing: .5px;
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}
.ticker-content span::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: rgba(255, 75, 75, 0.5); 
  border-radius: 50%;
  margin-left: 25px;
}

@keyframes scrollTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* WSPÓLNE DLA SEKCJI */
.sekcja { padding: 80px 0; border-top: 1px solid var(--beton-jasny); position: relative; z-index: 10; background: var(--tlo); }
.sekcja.ciemna { background: #080b0f; }
.sekcja h2 {
  margin: 0 0 12px;
  font-family: var(--szyld);
  letter-spacing: .5px;
  font-size: 34px;
  letter-spacing: 1px;
  color: var(--sod);
}
.opis {
  max-width: 700px;
  margin: 0 0 34px;
  font-size: 16px;
  color: var(--tekst-muted);
}

/* KARTY W O GRZE */
.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.karta {
  background: var(--beton);
  border: 1px solid var(--beton-jasny);
  border-radius: 12px;
  padding: 24px;
  transition: transform 0.2s, border-color 0.2s;
}
.karta:hover {
  transform: translateY(-4px);
  border-color: var(--sod);
}
.karta .ikona {
  font-size: 32px;
  margin-bottom: 12px;
}
.karta h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--kosc);
  font-family: var(--szyld);
  letter-spacing: .5px;
  letter-spacing: 0.5px;
}
.karta p { margin: 0; font-size: 14px; color: var(--tekst-muted); }

/* GRID FUNKCJI */
.funkcje-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.funkcja-box {
  background: rgba(26, 32, 42, 0.4);
  border-left: 3px solid var(--mint);
  padding: 20px;
  border-radius: 0 8px 8px 0;
}
.funkcja-box h3 {
  margin: 0 0 8px;
  font-family: var(--szyld);
  letter-spacing: .5px;
  color: var(--mint);
}
.funkcja-box p {
  margin: 0;
  font-size: 14px;
  color: var(--tekst-muted);
}

/* FAQ AKORDEON */
.faq-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--beton);
  border: 1px solid var(--beton-jasny);
  border-radius: 8px;
  overflow: hidden;
}
.faq-item summary {
  padding: 16px 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--sod);
  font-size: 20px;
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-tresc {
  padding: 0 20px 16px;
  font-size: 14.5px;
  color: var(--tekst-muted);
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
  padding-top: 12px;
}

/* STOPKA */
.stopka {
  position: relative;
  z-index: 10;
  padding: 40px 0;
  border-top: 1px solid var(--beton-jasny);
  background: #06080b;
}
.stopka-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.stopka-lewo { color: var(--tekst-muted); font-size: 13px; }
.stopka-prawo {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--tekst-muted);
}
.stopka-prawo a:hover { color: var(--sod); }

/* RWD */
@media(max-width: 768px) {
  .funkcje-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: column; gap: 15px; }
}
@media(max-width: 640px) {
  .menu { display: none; }
  .hero { padding: 80px 0 100px; }
  .sekcja { padding: 50px 0; }
  .stopka-in { flex-direction: column; text-align: center; }
  .ticker-content span { font-size: 12.5px; padding: 0 15px; }
  .ticker-content span::after { margin-left: 15px; }
}
/* logo graficzne w nagłówku */
.naglowek .logo{display:flex;align-items:center;height:38px;padding:0}
.naglowek .logo img{height:30px;width:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));transition:filter .2s,transform .2s}
.naglowek .logo:hover img{filter:drop-shadow(0 2px 10px rgba(255,179,71,.35));transform:translateY(-1px)}
@media(max-width:640px){.naglowek .logo img{height:24px}}

/* logo w stopce */
.stopka-logo{height:26px;width:auto;display:block;opacity:.55;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));transition:opacity .2s}
.stopka-logo:hover{opacity:.85}
@media(max-width:640px){.stopka-lewo{text-align:center}.stopka-logo{margin:0 auto}}

/* ===== TYPOGRAFIA ===== */
h1,h2,h3,.logo{font-family:var(--szyld);letter-spacing:.4px;text-transform:uppercase}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.08;font-weight:700}
h3{font-size:clamp(17px,1.9vw,22px);font-weight:600}
.opis{font-family:var(--tresc);font-size:15px;line-height:1.75;max-width:66ch;
  color:rgba(237,233,222,.68);text-transform:none;letter-spacing:0}
.btn{font-family:var(--naglowek);text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
.link-inline{color:#FFB347;text-decoration:underline;text-underline-offset:3px}
.link-inline:hover{color:#ffc98a}
.sekcja h2::after{content:"";display:block;width:56px;height:3px;margin-top:14px;
  background:linear-gradient(90deg,#FFB347,transparent);border-radius:2px}
.text-center h2::after{margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,transparent,#FFB347,transparent)}
.hz-numer,.dz-box h3,.stat-num{font-family:var(--szyld)}
.news-ticker span{font-family:var(--naglowek);letter-spacing:.7px;text-transform:uppercase;
  font-size:12.5px}

/* ===== FORMULARZ KONTAKTOWY ===== */
.form-kontakt{max-height:0;overflow:hidden;opacity:0;text-align:left;
  transition:max-height .45s ease,opacity .35s ease,margin .35s}
.form-kontakt.on{max-height:900px;opacity:1;margin-top:26px}
.form-pola{display:flex;flex-direction:column;gap:14px;padding:24px;
  background:#11161f;border:1px solid #212a38;border-radius:12px}
.form-rzad{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-pola label{display:flex;flex-direction:column;gap:7px;
  font-family:var(--naglowek);font-size:12px;text-transform:uppercase;letter-spacing:1px;
  color:rgba(237,233,222,.55)}
.form-pola input[type=text],.form-pola input[type=email],
.form-pola select,.form-pola textarea{
  background:#0b0f16;color:#EDE9DE;border:1px solid #2a3444;border-radius:8px;
  padding:11px 13px;font-family:var(--tresc);font-size:13.5px;outline:none;
  text-transform:none;letter-spacing:0;transition:border-color .16s}
.form-pola input:focus,.form-pola select:focus,.form-pola textarea:focus{border-color:#FFB347}
.form-pola textarea{resize:vertical;line-height:1.6}
.form-check{flex-direction:row !important;align-items:flex-start;gap:10px;
  font-size:11.5px !important;text-transform:none !important;letter-spacing:0 !important;
  line-height:1.6;color:rgba(237,233,222,.6) !important;font-family:var(--tresc) !important}
.form-check input{margin-top:2px;accent-color:#FFB347;width:16px;height:16px;flex:0 0 auto}
.form-check a{color:#8FB4D9;text-decoration:underline}
.form-info{display:none;padding:10px 12px;border-radius:8px;font-size:12.5px;line-height:1.55}
.form-info.on{display:block}
.form-info.blad{background:#1c0f10;border:1px solid #7a2f2f;color:#FF9B8A}
.form-info.ok{background:#0c1a14;border:1px solid #2f7a4a;color:#8FD9A8}
@media(max-width:640px){.form-rzad{grid-template-columns:1fr}.form-pola{padding:18px}}

/* ===== NAGŁÓWEK STRONY: LOGO, SEZON, CYTAT ===== */
.hero-content{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(30px,6vh,70px);padding-bottom:clamp(50px,9vh,90px)}

/* pasek sezonu — kapsuła z pulsującą kropką */
.hero-sezon{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(22px,4vh,38px);
  padding:8px 18px;border-radius:22px;
  background:rgba(11,14,19,.72);border:1px solid rgba(63,224,192,.28);
  backdrop-filter:blur(8px);
  font-family:var(--naglowek);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(237,233,222,.82);white-space:nowrap}
.hs-kropka{width:8px;height:8px;border-radius:50%;background:#3FE0C0;flex:0 0 auto;
  box-shadow:0 0 10px rgba(63,224,192,.9);animation:hsPuls 2.4s ease-in-out infinite}
@keyframes hsPuls{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

/* logo jako główny element */
.hero-logo{display:block;width:min(660px,86vw);height:auto;margin:0 auto 10px;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.9)) drop-shadow(0 0 60px rgba(255,179,71,.14));
  animation:heroLogo 1.1s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes heroLogo{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.hero-tagline{margin-bottom:clamp(26px,4.5vh,44px);
  font-family:var(--naglowek);font-size:clamp(11px,1.3vw,14px);
  letter-spacing:clamp(5px,1.1vw,9px);text-transform:uppercase;
  color:rgba(237,233,222,.5);animation:heroFade 1.3s .4s both}
@keyframes heroFade{from{opacity:0}to{opacity:.5}}

/* nagłówek pod logo — mniejszy, bo to już podtytuł */
.hero-content h1{margin:0 0 18px;font-family:var(--szyld);
  font-size:clamp(23px,3.4vw,42px);line-height:1.12;letter-spacing:.4px;
  text-transform:uppercase;color:#EDE9DE;text-shadow:0 3px 14px rgba(0,0,0,.85);
  max-width:20ch}
.hero-content h1 .akcent{color:#FFB347}
.hero-content .lead{max-width:60ch;margin:0 auto 32px;font-family:var(--tresc);
  font-size:clamp(14px,1.5vw,16.5px);line-height:1.8;color:rgba(237,233,222,.66);
  text-transform:none;letter-spacing:0}

.hero-stats{display:flex;gap:clamp(20px,4vw,52px);flex-wrap:wrap;justify-content:center;
  margin-top:clamp(30px,5vh,46px);padding-top:clamp(24px,4vh,34px);
  border-top:1px solid rgba(255,255,255,.07)}
.hero-stats span{display:flex;flex-direction:column;gap:5px;
  font-family:var(--naglowek);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(237,233,222,.45)}
.hero-stats b{font-family:var(--szyld);font-size:clamp(26px,3.4vw,38px);
  line-height:1;color:#FFB347;letter-spacing:1px}

/* cytat pod statystykami */
.hero-cytat{max-width:62ch;margin:clamp(30px,5vh,46px) auto 0;padding:0;
  opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s ease}
.hero-cytat.on{opacity:1;transform:none}
.hero-cytat q{display:block;font-family:var(--tresc);font-style:italic;
  font-size:clamp(15px,1.9vw,20px);line-height:1.7;color:rgba(245,242,235,.86);
  quotes:"„" "”";text-shadow:0 2px 10px rgba(0,0,0,.8)}
.hero-cytat q::before,.hero-cytat q::after{color:#FFB347;opacity:.55;font-style:normal}
.hero-cytat cite{display:block;margin-top:12px;font-family:var(--naglowek);font-style:normal;
  font-size:12.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:#FFB347;opacity:.78;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.hero-cytat cite::before{content:"— "}

@media(max-width:640px){
  .hero-sezon{font-size:10.5px;letter-spacing:1px;padding:7px 14px}
  .hero-content h1{font-size:20px}
  .hero-stats{gap:22px}
}