:root{--plate:#ffffff;--eu:#1a3e9c;--ac:#ffc800;--acd:#c99d00;--asphalt:#1e2023;--asphalt2:#26292d;--concrete:#e8eaec;--ink:#000;
--bg:var(--asphalt);--panel:var(--asphalt2);--line:#3a3e44;--tx:#f5f6f7;--mut:#b9bfc6;--ok:#22b45e;
--disp:"Barlow Condensed","Arial Narrow",Inter,sans-serif;--body:Barlow,Inter,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{font-size:20px;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--body);font-weight:500;line-height:1.4;padding-bottom:env(safe-area-inset-bottom,0px);overflow-x:hidden;-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
[hidden]{display:none!important}
html{overflow-x:clip}.f2,.fh,.shout,h2{overflow-wrap:break-word}
h1,h2,.btn,.done-h,.f2,.f3,.fh,.shout,.stats3 b,.tk span,.top a span,summary,.card figcaption,.plate{font-family:var(--disp);text-transform:uppercase}
h2{font-size:clamp(2.3rem,10vw,3.6rem);line-height:.92;margin:0 0 14px;font-weight:800;letter-spacing:-.005em}

/* ---------- pasek kontaktu ---------- */
.top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;background:rgba(30,32,35,.97);border-bottom:3px solid var(--ac)}
.top a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;border-radius:10px;text-decoration:none;line-height:1.05}
.top a small{font-size:.72rem;font-weight:700;opacity:.8}
.top a span{font-size:1.55rem;font-weight:800;letter-spacing:.01em}
.top .c1{background:var(--ac);color:var(--ink)}
.top .c2{background:var(--plate);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;padding:22px 0 0;background:var(--concrete);overflow-x:clip;isolation:isolate}
.intro{position:relative;padding-bottom:8px}
.intro::before{content:"";position:absolute;top:-22px;bottom:-46px;left:-100vw;right:-100vw;background:linear-gradient(180deg,rgba(20,21,23,.35),rgba(20,21,23,.9) 75%),url(img/laweta.jpg) center 30%/cover no-repeat,var(--asphalt);z-index:-1}
.hero .wrap{position:relative;z-index:1}
.logolink{display:block;width:max-content;margin:0 auto 22px;background:var(--plate);padding:8px 14px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.logo{display:block;height:46px;width:auto}

/* tablica rejestracyjna */
h1{margin:0 0 14px;text-align:center;font-weight:800}
.plate{display:inline-flex;align-items:stretch;background:var(--plate);color:var(--ink);border:4px solid var(--ink);border-radius:12px;box-shadow:0 0 0 3px var(--plate),0 18px 40px rgba(0,0,0,.55);overflow:hidden;font-size:clamp(2.6rem,14.5vw,6.4rem);line-height:1;letter-spacing:.02em;max-width:100%}
.plate .eu{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;background:var(--eu);color:#fff;padding:8px 8px 7px;font-family:var(--body);font-weight:700;font-size:clamp(.8rem,3.4vw,1.15rem);letter-spacing:.02em}
.plate .eu svg{width:1.7em;height:1.7em}
.plate .pt{padding:.06em .22em .02em;white-space:nowrap}
.h1b{display:block;margin-top:14px;color:var(--plate);font-size:clamp(3.4rem,18vw,7rem);line-height:.86;text-shadow:0 4px 24px rgba(0,0,0,.6);letter-spacing:-.01em;overflow-wrap:anywhere}
.h1b.long{font-size:clamp(2.2rem,11vw,4.6rem)}
.lead{text-align:center;font-size:1.25rem;font-weight:600;margin:0 0 20px;color:#e9ebee;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.lead b{color:var(--ac);font-weight:700}

.trust{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 10px;background:var(--ac);color:var(--ink);border-radius:12px;padding:10px 16px}
.trust b{font-family:var(--disp);font-size:clamp(3.4rem,17vw,5rem);line-height:.85;font-weight:800}
.trust span{font-family:var(--disp);font-size:clamp(1.25rem,5.6vw,1.7rem);line-height:1;font-weight:800;text-transform:uppercase}
.badges{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.badges li{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 12px;background:rgba(20,21,23,.82);border-left:5px solid var(--ac);border-radius:6px;font-family:var(--disp);font-size:clamp(1.05rem,4.8vw,1.35rem);font-weight:800;line-height:1;text-transform:uppercase;color:#fff}
.badges li i{display:none}

/* ---------- formularz: biała karta ---------- */
.panel{--tx:#0b0c0d;--mut:#4d555e;--line:#c9ced4;background:var(--plate);color:var(--tx);border-radius:14px;padding:24px 18px;box-shadow:0 24px 60px rgba(0,0,0,.35);border-top:10px solid var(--ac);margin-bottom:0}
.fh{font-size:clamp(3rem,15vw,4.8rem);line-height:.85;margin:0 0 6px;font-weight:800;color:var(--ink)}
.f2{font-size:clamp(1.9rem,9vw,2.8rem);line-height:.92;font-weight:800;margin:0 0 12px;color:var(--eu)}
.f2 em{font-style:normal;background:var(--ac);color:var(--ink);padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.f3{display:inline-block;background:var(--ok);color:#fff;font-size:clamp(1.3rem,6vw,1.7rem);font-weight:800;padding:6px 14px 4px;border-radius:8px;margin:0 0 10px}
.sub{color:var(--mut);font-size:1.05rem;font-weight:600;margin:0 0 20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.full{grid-column:1/-1}
.l{display:block;font-size:.9rem;font-weight:700;color:var(--mut);margin-bottom:6px}
input[type=text],input[type=number],input[type=tel],textarea{width:100%;min-height:64px;background:#f4f5f6;color:var(--tx);border:2px solid var(--line);border-radius:10px;padding:14px 16px;font:inherit;font-size:1.25rem;font-weight:600}
textarea{min-height:110px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8a929b;font-weight:400}
input:focus,textarea:focus{outline:0;border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(255,200,0,.45)}
#tel{font-size:1.5rem;border-color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:58px;padding:10px 12px;background:#f4f5f6;border:2px solid var(--line);border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;text-align:center;white-space:nowrap;user-select:none}
.seg.two label{flex:1 1 0}
.seg input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--ac)}
.seg input:focus-visible+label{outline:3px solid var(--ac);outline-offset:2px}
.unit{position:relative}.unit input{padding-right:64px}
.unit span{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--mut);font-weight:700;pointer-events:none}
.addph{display:flex;align-items:center;justify-content:center;gap:10px;min-height:78px;width:100%;border:3px dashed var(--ink);border-radius:12px;background:#fff8d6;color:var(--ink);font-family:var(--disp);font-size:1.6rem;font-weight:800;text-transform:uppercase;cursor:pointer;text-align:center;padding:12px}
.glink{display:block;text-align:center;padding:12px 0 2px;color:var(--mut);font-size:1.05rem;font-weight:700;text-decoration:underline;cursor:pointer}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:12px 0}
.th{position:relative;aspect-ratio:1;border-radius:10px;background-size:cover;background-position:center;border:3px solid var(--ok)}
.th button{position:absolute;top:4px;right:4px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.75);color:#fff;font-size:1.3rem;cursor:pointer}
.count{font-weight:700;font-size:1rem;color:var(--mut);margin:6px 0 16px}
.count.ok{color:var(--ok)}
details{border:2px solid var(--line);border-radius:10px;margin:0 0 20px}
summary{cursor:pointer;list-style:none;padding:16px 18px;font-size:1.35rem;font-weight:800;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:2rem;line-height:1;color:var(--eu)}
details[open] summary::after{content:"–"}
details .grid{padding:0 14px 4px;margin-bottom:14px}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:76px;background:var(--ac);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:12px 18px;font-size:1.9rem;font-weight:800;letter-spacing:.01em;cursor:pointer;text-align:center;text-decoration:none;line-height:1;box-shadow:0 6px 0 var(--ink);transition:transform .07s,box-shadow .07s}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn[disabled]{background:#d7dbe0;color:#5f6770;border-color:#aab1b9;box-shadow:none;cursor:not-allowed}
.btn.w{background:var(--plate)}
.btn+.btn{margin-top:16px}
.need{color:var(--mut);font-size:.95rem;font-weight:600;text-align:center;margin:10px 0 0}
.err{color:#c62828;font-size:1.1rem;font-weight:700;text-align:center;margin:12px 0 0}
.fine{color:var(--mut);font-size:.85rem;margin:14px 0 0;text-align:center}
#done{display:none}
.done-h{font-size:clamp(5rem,26vw,9rem);line-height:.85;font-weight:800;margin:0 0 10px;color:var(--ok)}
#done h2{color:var(--ink)}

/* ---------- pasek haseł ---------- */
.hero+.ticker{margin-top:28px}
.ticker{background:var(--ink);color:var(--ac);overflow:hidden;white-space:nowrap;padding:12px 0}
.tk{display:inline-block;animation:tk 26s linear infinite}
.tk span{font-size:1.9rem;font-weight:800;padding:0 18px;letter-spacing:.02em}
.tk span::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:36px;background:var(--ac);transform:rotate(45deg) translateY(-.15em)}
@keyframes tk{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tk{animation:none}}

/* ---------- sekcje ---------- */
section{padding:56px 0}
#skup{--tx:#0b0c0d;--mut:#4d555e;--line:#c9ced4;background:var(--concrete);color:var(--tx)}
.kick{display:inline-block;font-family:var(--disp);font-size:1.15rem;font-weight:800;text-transform:uppercase;background:var(--eu);color:#fff;padding:4px 12px 2px;border-radius:6px;margin-bottom:12px}
.big{font-size:1.3rem;font-weight:600;margin:0 0 24px;color:var(--mut)}
.cards{display:grid;gap:12px;margin-bottom:28px}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;margin:0;border-radius:12px;overflow:hidden;background:#cfd3d8}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.card figcaption{position:absolute;left:0;bottom:0;background:var(--ac);color:var(--ink);font-size:1.7rem;font-weight:800;padding:6px 14px 3px;border-top-right-radius:10px}
@media(min-width:700px){.card img{aspect-ratio:4/5}.card figcaption{font-size:1.35rem}}

.steps{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:0;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:6px;background:repeating-linear-gradient(180deg,var(--ink) 0 14px,transparent 14px 26px)}
.steps li{counter-increment:s;position:relative;display:flex;gap:16px;align-items:center;padding:10px 0;font-size:1.35rem;font-weight:700}
.steps li::before{content:counter(s);flex:0 0 60px;height:60px;border-radius:50%;background:var(--ac);border:4px solid var(--ink);color:var(--ink);display:grid;place-items:center;font-family:var(--disp);font-size:2rem;font-weight:800;position:relative;z-index:1}
.ticks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.ticks li{font-size:1.3rem;font-weight:700;padding-left:42px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.15em;width:28px;height:28px;border-radius:6px;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 26px;background:var(--ink);color:#fff;border-radius:12px;overflow:hidden}
.stats3 div{padding:16px 6px 14px;text-align:center;border-right:2px solid #2c2f33}
.stats3 div:last-child{border-right:0}
.stats3 b{display:block;font-size:clamp(2.4rem,11vw,3.4rem);line-height:.9;font-weight:800;color:var(--ac)}
.stats3 span{display:block;font-size:.9rem;font-weight:700;margin-top:4px}
.shout{font-size:clamp(2.8rem,13vw,4.6rem);line-height:.88;font-weight:800;margin:0 0 30px;color:var(--ink)}
.shout em{font-style:normal;color:var(--eu)}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:28px}
.gal img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#cfd3d8}

/* laweta */
.hazard{height:16px;background:repeating-linear-gradient(-45deg,var(--ac) 0 20px,var(--ink) 20px 40px)}
#laweta{background:var(--asphalt)}
.laweta-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:24px;background:#2c2f33}
#laweta .btn.w,#obszar .btn.w{border-color:var(--plate);box-shadow:0 6px 0 #8b9198}

/* obszar */
#obszar{background:#17191b}
.chips a{border-radius:8px!important}
.near a{color:var(--ac)}
.faq details{background:var(--asphalt2);border-color:var(--line)}

/* stopka */
footer{background:#0f1011;padding:40px 0 calc(28px + env(safe-area-inset-bottom,0px));color:var(--mut);font-size:1.05rem}
.flogo{display:block;width:auto;height:52px;background:var(--plate);padding:6px 12px;border-radius:8px;margin:0 0 24px}
footer .cols{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:22px}
footer .cols>div{border-left:4px solid var(--ac);padding:4px 0 4px 14px}
footer b{color:#fff;display:block;margin-bottom:2px;font-family:var(--disp);font-size:1.3rem;text-transform:uppercase}
footer a{color:#fff;font-weight:700}

@media(max-width:600px){section{padding:46px 0}.panel{padding:22px 14px}}
@media(max-width:400px){html{font-size:17px}.wrap{padding:0 12px}.top{gap:6px;padding-left:8px;padding-right:8px}.panel{padding:20px 12px}.seg label{padding:10px 8px;font-size:1.02rem}}

/* film na górze hero: pełna szerokość, cały kadr widoczny */
.hv{display:block;width:100vw;max-width:none;margin:-22px 0 22px calc(50% - 50vw);aspect-ratio:736/400;max-height:78vh;object-fit:cover;object-position:center top;background:#2c2f33;border-bottom:5px solid var(--ac)}
/* interlinia bez nachodzenia polskich znaków */
h2{line-height:1.02}
.fh{line-height:1}
.f2{line-height:1.08}
.f2 em{display:inline-block;margin-top:4px;padding:.02em .15em}
.h1b{line-height:.98}
.shout{line-height:1}

.rmap{display:block;width:100%;height:auto;background:#0d0f12;border:2px solid var(--line);border-radius:18px;margin:0 0 22px}
.rmap .g{stroke:#1d2128;stroke-width:1}
.rmap .zone{fill:rgba(255,212,0,.05);stroke:rgba(255,212,0,.35);stroke-width:2;stroke-dasharray:8 8}
.rmap .ln{stroke:var(--ac);stroke-width:2;stroke-dasharray:4 6;opacity:.7}
.rmap .dot{fill:var(--ac);stroke:#0d0f12;stroke-width:3}
.rmap text{fill:var(--tx);font:800 21px Inter,system-ui,sans-serif;paint-order:stroke;stroke:#0d0f12;stroke-width:5px;stroke-linejoin:round}
.rmap .pt.on .dot{fill:var(--ok)}
.rmap .pt.on text{fill:var(--ok);font-size:27px}
.rmap .pulse{fill:rgba(47,210,122,.25)}
.rmap a:hover text,.rmap a:focus text{fill:var(--ac)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.chips a{display:block;padding:10px 14px;border:2px solid var(--line);border-radius:12px;color:var(--tx);text-decoration:none;font-weight:800;font-size:1rem}
.chips a.on{background:var(--ok);border-color:var(--ok);color:#111}
.near{font-size:1.15rem;font-weight:700;margin:0 0 18px}
.near a{color:var(--ac)}
.faq details{background:#0d0f12;margin-bottom:10px}
.faq p{margin:0;padding:0 18px 18px;font-size:1.1rem;color:var(--mut);font-weight:600}
