/*
  STAMPLOCAL: strona jako karta na 8 pól
  Idea:        strona jest kartą stałego klienta. Każde pole to sekcja, ósme to nagroda (kontakt).
  Metafora:    karta z pieczątkami w Portfelu, 2 pola nabite na start.
  Sygnatura:   przewijanie i przycisk „Nabij pieczątkę” wbijają kolejne pola; przy 7/8 przychodzi
               powiadomienie jak na ekranie blokady.
  Ruch:        odbija się jak pieczątka (szybkie wejście, sprężyste osiadanie).
  Szkło:       tylko nawigacja, przycisk na karcie i powiadomienie. Treść leży na wypełnieniach.
*/
@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#FFFFFF; --ink:#0A0A0A; --muted:#4A4E53;
  --accent:#4ADE80; --accent-text:#15803D; --accent-soft:#E7F9EE;
  --fill:#F5F5F7; --fill2:#EBEBEF; --hair:rgba(0,0,0,.08);
  --glass:rgba(255,255,255,.58);
  --glass-hl:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 .5px rgba(255,255,255,.55);
  --glass-sh:0 1px 2px rgba(0,0,0,.05), 0 6px 22px rgba(0,0,0,.08);
  --tint:rgba(74,222,128,.9);
  --sys:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --r-out:32px; --pad:32px; --r-in:12px;
  --nav-h:64px;
  color-scheme:light;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass:rgba(255,255,255,.95)}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 28px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sys);letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--accent-text);text-underline-offset:3px}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:8px}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:16px;top:-80px;z-index:40;background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

main,.foot{max-width:1120px;margin-inline:auto}
main{display:flex;flex-direction:column;gap:clamp(96px,12vw,152px);padding-block:20px 0}

/* ---------- szkło ---------- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--glass-hl),var(--glass-sh)}

/* ---------- nawigacja ---------- */
.nav{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));z-index:20;max-width:1120px;margin:12px auto 0;
  display:flex;align-items:center;gap:8px;min-height:var(--nav-h);padding:8px 8px 8px 20px;border-radius:999px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.03em}
.ic-brand{width:24px;height:24px;color:var(--accent-text)}
.mini{display:flex;align-items:center;gap:8px;margin-left:12px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.6)}
.mini-dots{display:flex;gap:4px}
.mini-dots i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25);transition:background-color .3s,box-shadow .3s}
.mini-dots i.on{background:var(--accent);box-shadow:none}
.mini-dots i.cup{box-shadow:inset 0 0 0 1.5px var(--accent-text)}
.mini-dots i.cup.on{background:var(--accent-text)}
.mini-n{font-size:13px;font-weight:600;color:var(--muted);min-width:3ch}
.nav nav{margin-left:auto}
.nav-links{display:flex;gap:2px}
.nav-links a{position:relative;display:block;padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;transition:background-color .25s}
@media (hover:hover){.nav-links a:hover{background:rgba(0,0,0,.05)}}
.nav-links a:focus-visible{background:rgba(0,0,0,.05)}
.nav-links a[aria-current="true"]{background:rgba(74,222,128,.22)}
@media (max-width:760px){.nav-links{display:none}.mini{margin-left:auto}.nav nav{margin-left:0}}
@media (max-width:560px){.mini-dots{display:none}.mini{padding:6px 10px}.mini-n{min-width:0}.nav{padding-left:16px;gap:6px}.brand{font-size:17px}}
@media (max-width:340px){.mini{display:none}.btn-sm{padding:0 16px}}

/* ---------- przyciski: wciśnięcie jak pieczątka ---------- */
.btn,.btn-glass{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:0;border-radius:999px;
  font:600 17px/1 var(--sys);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--spring),box-shadow .3s ease,background-color .25s}
.btn{background:var(--tint);color:#0A0A0A;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 0 rgba(21,128,61,0),0 6px 20px rgba(21,128,61,.22)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn-lg{min-height:56px;padding:0 30px;font-size:18px}
/* hover: ciemnozielony obrys tuszu wlewa się do środka i przycisk lekko „dociska” */
@media (hover:hover){.btn:hover{transform:scale(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 2.5px rgba(21,128,61,.85),0 10px 26px rgba(21,128,61,.28)}}
.btn:focus-visible{box-shadow:inset 0 0 0 2.5px rgba(21,128,61,.85)}
.btn:active,.btn-glass:active,.field:active,.copy:active{transform:scale(.95)}
.btn-glass{color:#fff;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 .5px rgba(255,255,255,.3)}
@media (hover:hover){.btn-glass:hover{transform:scale(1.03);background:rgba(255,255,255,.22)}}

/* ---------- hero: karta ---------- */
.pass{background:#0A0A0A;color:#fff;border-radius:var(--r-out);padding:clamp(22px,4vw,48px);display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 30px 60px -30px rgba(10,10,10,.55)}
.pass-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pass-brand{display:flex;align-items:center;gap:12px}
.pass-brand .ic{width:40px;height:40px;color:var(--accent);stroke-width:1.8}
.pass-brand span{display:flex;flex-direction:column}
.pass-brand b{font-size:20px;font-weight:600}
.pass-brand small,.pass-count small{font-size:14px;color:rgba(255,255,255,.75)}
.pass-count{text-align:right;flex-shrink:0}
.pass-count b{white-space:nowrap}
.pass-count b{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.pass h1{font-size:clamp(40px,7vw,96px);line-height:.96;letter-spacing:-.055em;margin-left:-.045em;max-width:14ch}

.fields{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
@media (max-width:820px){.fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px}}
.field{display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.86);text-decoration:none;transition:transform .35s var(--spring)}
.f-dot{position:relative;width:100%;max-width:104px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);transition:box-shadow .3s}
.f-dot .ic{width:38%;height:38%;color:#0A0A0A;stroke-width:2.6;opacity:0;grid-area:1/1}
.f-num{grid-area:1/1;font-size:clamp(14px,1.6vw,18px);font-weight:600;color:rgba(255,255,255,.72)}
.f-label{font-size:clamp(12px,1.2vw,14px);text-align:center;line-height:1.25}
.f-dot::before,.stamp::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);opacity:0;filter:url(#ink);transform:rotate(var(--rot,0deg)) scale(var(--sc,1))}
.field.on .f-dot{box-shadow:none}
.field.on .f-dot::before{opacity:1}
.f-dot>*{position:relative}
.field.on .f-dot .ic{opacity:1}
.field.on .f-num{opacity:0}
.field.reward .f-dot{box-shadow:inset 0 0 0 1.5px var(--accent)}
.field.reward .f-dot .ic{opacity:1;color:var(--accent);stroke-width:1.8;width:42%;height:42%}
.field.reward.on .f-dot .ic{color:#0A0A0A}
@media (hover:hover){.field:hover{transform:scale(1.06)}.field:not(.on):hover .f-dot{box-shadow:inset 0 0 0 2px rgba(74,222,128,.9)}}
/* następne wolne pole czeka na pieczątkę: spokojny oddech obrysu (stan spoczynku konceptu) */
.field.next .f-dot{animation:wait 2.6s ease-in-out infinite}
@keyframes wait{50%{box-shadow:inset 0 0 0 2px rgba(74,222,128,.75)}}
.field.pop .f-dot{animation:stampIn .36s var(--spring) both}
@keyframes stampIn{0%{transform:scale(1.7);opacity:0}100%{transform:none;opacity:1}}

.pass-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 28px}
.pass-msg{font-size:17px;line-height:1.5;color:rgba(255,255,255,.86);max-width:48ch;min-height:3em}
.pass-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- sekcje ---------- */
.sec{display:flex;flex-direction:column;gap:32px}
.sec-head{display:flex;flex-direction:column;gap:16px;min-width:0}
.sec-head.row{flex-direction:row;align-items:center;flex-wrap:wrap}
h2{font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.04em;margin-left:-.04em;max-width:16ch}
h3{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.lead{font-size:18px;line-height:1.55;color:var(--muted);max-width:46ch}
.note{font-size:15px;color:var(--muted)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 72px;align-items:start}
.split.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.split.bottom{align-items:end}
@media (max-width:860px){.split,.split.three{grid-template-columns:1fr}}

/* pieczątka sekcji: pusty obrys, wbija się, gdy sekcja wejdzie na ekran */
.stamp{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2);flex:none}
.stamp .ic{position:relative}
.stamp .ic{width:24px;height:24px;color:#0A0A0A;stroke-width:2.6;opacity:0}
.stamp.on{box-shadow:none}
.stamp.on::before{opacity:1}
.stamp.on .ic{opacity:1}
.stamp.pop{animation:stampIn .36s var(--spring) both}

.steps{display:flex;flex-direction:column;gap:36px}
.steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px}
.step-n{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent-text)}
.steps li>div{display:flex;flex-direction:column;gap:6px}
.steps p{color:var(--muted)}

.versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.versus{grid-template-columns:1fr}}
.vs{border-radius:var(--r-out);padding:var(--pad);display:flex;flex-direction:column;gap:18px}
.vs ul{display:flex;flex-direction:column;gap:14px;font-size:18px}
.vs-paper{background:var(--fill);color:var(--muted)}
.vs-paper li{text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25);text-decoration-thickness:1.5px}
.vs-card{background:#0A0A0A;color:#fff}
.vs-card h3{color:var(--accent)}
.vs-card li{display:flex;gap:12px}
.vs-card li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--accent)}

.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.prices{grid-template-columns:1fr}}
.price{background:var(--fill);border-radius:var(--r-out);padding:var(--pad);display:flex;flex-direction:column;gap:14px}
.price-start{background:var(--accent-soft)}
.price-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.price-top h3{font-size:20px}
.tag{padding:5px 12px;border-radius:999px;background:#fff;color:var(--accent-text);font-size:13px;font-weight:600}
.price-v{color:var(--muted)}
.price-v b{font-size:56px;font-weight:700;letter-spacing:-.045em;color:var(--ink);line-height:1}
.price-sum{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);font-size:15px;color:var(--muted)}
.price-sum b{color:var(--ink)}

.incl{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.incl h3{font-size:17px;color:var(--muted)}
.incl p{font-size:21px;line-height:1.45}

.poster{gap:24px}
.poster h2{font-size:clamp(48px,8.4vw,120px);line-height:.94;letter-spacing:-.055em;margin-left:-.05em;max-width:13ch}
.poster .lead{max-width:58ch}

.big-num{display:flex;flex-direction:column;gap:6px}
.big-num b{font-size:clamp(140px,20vw,260px);line-height:.8;font-weight:700;letter-spacing:-.065em;margin-left:-.06em}
.big-num span{font-size:21px;font-weight:500}
.big-num small{font-size:15px;color:var(--muted)}

.photo{width:100%;max-width:360px;aspect-ratio:4/5;border-radius:var(--r-out);object-fit:cover}
.photo-ph{background:var(--fill2);display:grid;place-items:center;color:var(--muted);font-size:15px}

.faq{background:var(--fill);border-radius:var(--r-out);padding:4px 28px}
.faq details+details{border-top:1px solid var(--hair)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:19px;font-weight:600;cursor:pointer;list-style:none;border-radius:8px}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;width:22px;height:22px;flex:none;transition:transform .35s var(--spring)}
.plus::before,.plus::after{content:"";position:absolute;inset:50% 2px auto;height:2px;margin-top:-1px;background:var(--accent-text);border-radius:2px}
.plus::after{transform:rotate(90deg)}
details[open] .plus{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:60ch}

/* ---------- pole 8: nagroda ---------- */
.reward-card{background:#0A0A0A;color:#fff;border-radius:var(--r-out);padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:24px}
.full{display:flex;flex-wrap:wrap;gap:10px}
.full i{width:40px;height:40px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.full i.cup{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.full i.cup .ic{width:20px;height:20px;stroke-width:1.8}
.reward-card h2{font-size:clamp(40px,6vw,80px);line-height:.98;letter-spacing:-.05em;max-width:15ch}
.reward-card p{font-size:18px;line-height:1.5;color:rgba(255,255,255,.86);max-width:52ch}
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.link-light{color:#fff;font-size:18px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px;transition:text-decoration-color .25s}
@media (hover:hover){.link-light:hover{text-decoration-color:var(--accent)}}
.copy{font:500 15px var(--sys);color:rgba(255,255,255,.86);background:none;border:0;padding:10px 4px;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px;transition:transform .35s var(--spring)}

/* ---------- powiadomienie ---------- */
.banner{position:fixed;z-index:50;left:50%;top:calc(12px + env(safe-area-inset-top,0px));width:min(380px,calc(100% - 32px));
  display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:24px;color:var(--ink);
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--glass-hl),0 12px 40px rgba(0,0,0,.18);transform:translate(-50%,-140%);transition:transform .55s var(--spring)}
.banner.show{transform:translate(-50%,0)}
.banner-ic{width:38px;height:38px;border-radius:10px;background:#0A0A0A;display:grid;place-items:center;flex:none}
.banner-ic svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.banner-tx{display:flex;flex-direction:column;gap:1px;font-size:15px;line-height:1.35;min-width:0}
.banner-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.banner-tx b{font-weight:600}

/* liczba, która się zmieniła */
.bump{animation:bump .5s var(--spring)}
@keyframes bump{35%{transform:scale(1.12)}}

/* ---------- stopka ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:40px 0 48px;font-size:14px;color:var(--muted)}
.foot a{color:var(--muted)}
@media (hover:hover){.foot a:hover{color:var(--ink)}}

/* ---------- podstrony ---------- */
.page{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;gap:20px;padding-block:72px 40px}
.page h1{font-size:clamp(36px,5vw,56px);line-height:1.02;letter-spacing:-.045em;margin-left:-.04em}
.page h2{font-size:24px;letter-spacing:-.02em;margin:16px 0 0;max-width:none}
.page p,.page li{color:var(--muted)}
.page ul{list-style:disc;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .banner{transform:translate(-50%,0)}
}

/* ===== dopracowanie: tusz, lot pieczątki, dźwięk, wejście, demo, formularz ===== */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.field.on .f-dot .ic{transform:rotate(var(--rot,0deg))}

/* lecąca pieczątka: z pola na karcie do sekcji */
.flyer{position:fixed;z-index:45;left:0;top:0;border-radius:50%;pointer-events:none;background:var(--accent);filter:url(#ink);
  box-shadow:0 18px 40px rgba(21,128,61,.35);will-change:transform}

/* przycisk dźwięku */
.btn-icon{width:52px;height:52px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 .5px rgba(255,255,255,.3);transition:transform .35s var(--spring),background-color .25s}
.btn-icon .ic{width:22px;height:22px;stroke-width:1.8;grid-area:1/1}
.btn-icon .ic-on{opacity:0}
.btn-icon[aria-pressed="true"]{background:rgba(74,222,128,.28)}
.btn-icon[aria-pressed="true"] .ic-on{opacity:1}
.btn-icon[aria-pressed="true"] .ic-off{opacity:0}
@media (hover:hover){.btn-icon:hover{transform:scale(1.06)}}
.btn-icon:active{transform:scale(.92)}

/* wejście strony: karta osiada, słowa nagłówka wjeżdżają, pola pojawiają się po kolei */
@media (prefers-reduced-motion:no-preference){
  .js .pass{animation:settle .9s cubic-bezier(.2,.8,.2,1) both}
  .js .pass h1 .w{display:inline-block;animation:wordUp .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--i) * 45ms)}
  .js .fields li{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.45s + var(--i) * 45ms)}
  .js .pass-bottom{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) .8s both}
  .js .nav{animation:fadeDown .7s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes settle{from{transform:translateY(24px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@keyframes wordUp{from{transform:translateY(.55em);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeDown{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

/* karta demo */
.demo{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  background:var(--accent-soft);border-radius:var(--r-out);padding:24px 28px}
.demo>div{display:flex;flex-direction:column;gap:6px;max-width:56ch}
.demo h3{font-size:20px}
.demo p{color:var(--ink)}
.demo-note{flex-basis:100%;font-size:15px;color:var(--accent-text)!important}

/* pole 8: nagroda z formularzem */
.reward-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 56px;align-items:start}
@media (max-width:900px){.reward-grid{grid-template-columns:1fr}}
.reward-copy{display:flex;flex-direction:column;gap:24px}
.contact{flex-direction:column;align-items:flex-start;gap:10px}
.form{display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.06);border-radius:24px;padding:24px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:480px){.fld-row{grid-template-columns:1fr}}
.fld label{font-size:15px;font-weight:500;color:rgba(255,255,255,.9)}
.fld label span{color:rgba(255,255,255,.65);font-weight:400}
.fld input,.fld textarea{font:inherit;font-size:17px;color:#fff;background:rgba(255,255,255,.1);border:0;border-radius:12px;padding:13px 14px;min-height:48px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:box-shadow .2s,background-color .2s;width:100%}
.fld textarea{resize:vertical;min-height:88px}
.fld input::placeholder{color:rgba(255,255,255,.45)}
.fld input:focus,.fld textarea:focus{outline:none;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--accent)}
.fld input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #FCA5A5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:rgba(255,255,255,.86);cursor:pointer}
.consent input{appearance:none;flex:none;width:24px;height:24px;margin:0;border-radius:7px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--accent);box-shadow:none}
.consent input:checked::after{content:"";width:6px;height:11px;border:solid #0A0A0A;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.consent input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #FCA5A5}
.consent a{color:#fff}
.form .btn{align-self:flex-start;gap:10px}
.spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(10,10,10,.25);border-top-color:#0A0A0A;animation:spin .8s linear infinite}
.form.busy .spin{display:block}
.form.busy .btn{pointer-events:none;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
.form-msg{font-size:16px;min-height:1.5em;color:rgba(255,255,255,.9)}
.form-msg.err{color:#FCA5A5}
.sent{display:flex;flex-direction:column;gap:12px;background:rgba(74,222,128,.14);border-radius:24px;padding:28px}
.sent b{font-size:24px;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.spin{animation:none!important;border-top-color:rgba(10,10,10,.25)}}

/* hover dla pól już nabitych i dla „Skopiuj numer” */
@media (hover:hover){
  .field.on:hover .f-dot{box-shadow:0 0 0 4px rgba(74,222,128,.28)}
  .copy:hover{text-decoration-color:var(--accent);transform:translateX(3px)}
}
.copy:focus-visible{text-decoration-color:var(--accent)}

/* ===== poprawki po ocenie krytyka ===== */
/* przejścia między podstronami: karta i pasek przechodzą płynnie (Chrome, Edge, Safari 18+) */
@view-transition{navigation:auto}
.nav{view-transition-name:pasek}
.pass{view-transition-name:karta}
::view-transition-group(karta),::view-transition-group(pasek){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* pasek: gęstsze szkło, żeby nie mazał się nad ciemnymi blokami i wielkimi liczbami */
.nav{background:rgba(255,255,255,.82)}

/* powiadomienie pod paskiem, przy prawej krawędzi; nie zasłania nawigacji */
.banner{left:auto;right:max(16px,calc((100vw - 1120px) / 2));top:calc(var(--nav-h) + 26px + env(safe-area-inset-top,0px));transform:translateY(-12px) scale(.96);opacity:0;
  transition:transform .5s var(--spring),opacity .25s}
.banner.show{transform:none;opacity:1}
@media (max-width:560px){.banner{left:16px;right:16px;width:auto}}

/* logo i linki w treści też odpowiadają na najechanie */
.brand .ic-brand{transition:transform .45s var(--spring)}
@media (hover:hover){.brand:hover .ic-brand{transform:rotate(-14deg) scale(1.12)}}
.brand:focus-visible .ic-brand{transform:rotate(-14deg) scale(1.12)}
.page a,.consent a{text-decoration-thickness:1px;transition:text-decoration-thickness .2s,text-underline-offset .2s}
@media (hover:hover){.page a:hover,.consent a:hover{text-decoration-thickness:2.5px;text-underline-offset:5px}}

/* FAQ: otwarte pytanie dostaje pieczątkę zamiast plusa */
.plus{border-radius:50%;width:28px;height:28px;transition:transform .35s var(--spring),background-color .2s}
.plus::before,.plus::after{inset:50% 7px auto}
details[open] .plus{transform:rotate(45deg);background:var(--accent)}
details[open] .plus::before,details[open] .plus::after{background:#0A0A0A}

/* cennik: karta Start z odciskiem pieczątki w rogu */
.price-start{position:relative;overflow:hidden}
.price-start::after{content:"";position:absolute;right:-26px;bottom:-26px;width:120px;height:120px;border-radius:50%;background:var(--accent);opacity:.55;filter:url(#ink);transform:rotate(-8deg)}
.price-start>*{position:relative;z-index:1}

/* małe linki: wygodny cel dla palca */
.foot a,.page p>a,.consent a{display:inline-block;padding-block:4px}

/* wejście szybciej i bez znikania tekstu (LCP liczy się od razu) */
@media (prefers-reduced-motion:no-preference){
  .js .pass{animation:settleT .7s cubic-bezier(.2,.8,.2,1) both}
  .js .pass h1 .w{animation:wordUpT .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.05s + var(--i) * 28ms)}
  .js .fields li{animation-delay:calc(.3s + var(--i) * 35ms);animation-duration:.5s}
  .js .pass-bottom{animation-delay:.5s}
}
@keyframes settleT{from{transform:translateY(20px) scale(.985)}to{transform:none}}
@keyframes wordUpT{from{transform:translateY(.35em)}to{transform:none}}

/* powiadomienie na dole ekranu: nie zasłania paska ani formularza */
.banner{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateY(16px) scale(.96)}
.banner.show{transform:none}
main:focus{outline:none}