/* BUDLEE · czerń i biel, a turkus tylko jako światło: ramki, linie, poświata */
:root{
  --tq:#38C6C4;
  --tq-hi:#5EE6D9;
  --tq-mint:#C9FFF8;
  --sky:#5CB8FF;
  --glow:56,198,196;
  --glow-hi:94,230,217;
  /* krążące światło: jasna turkusowa kometa z ogonem (obraca się wokół przycisków i maskotki) */
  --ring:conic-gradient(rgba(94,230,217,0) 0%,rgba(94,230,217,0) 50%,#38C6C4 64%,#5EE6D9 74%,#FFFFFF 80%,#C9FFF8 84%,#5CB8FF 90%,rgba(92,184,255,0) 100%);
  --white-btn:linear-gradient(180deg,#FFFFFF 0%,#E3EBEA 100%);
  --on-white:#061212;
  --bg:#050707;
  --bg-2:#0B0B0B;
  --bg-3:#141414;
  --text:#F2F2F2;
  --text-2:#BDBDBD;
  --text-3:#9A9A9A;
  --coral:#FF9A8A;
  --gold:#E6E6E6;
  --grad:linear-gradient(90deg,#38C6C4 0%,#5CB8FF 100%);
  --line:rgba(255,255,255,0.128);
  --line-2:rgba(255,255,255,0.289);
  --glass:linear-gradient(160deg,rgba(30,30,30,0.66) 0%,rgba(12,12,12,0.78) 100%);
  --focus:#5EE6D9;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --f-display:"Baloo 2",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(20px,5vw,72px);
  --maxw:1180px;
  --r:22px;
  --nav-h:72px;
}

/* ---------- podstawy ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;overflow-x:hidden;overflow-x:clip;color:var(--text);font:400 17px/1.62 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
fieldset{border:0;padding:0;margin:0;min-width:0}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.012em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
::selection{background:var(--tq);color:var(--on-white)}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--bg-3);color:var(--text);padding:12px 18px;border-radius:12px;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
.wrap{width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto}
.kicker{display:inline-flex;align-items:center;gap:12px;font:500 12.5px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.kicker::before{content:"";flex:none;width:24px;height:2px;border-radius:2px;background:var(--grad);box-shadow:0 0 10px rgba(var(--glow),.85)}
/* numer sekcji obok małego napisu (01 / 05) */
.kicker[data-n]::after{content:attr(data-n);color:var(--text-3);letter-spacing:.12em}

/* ---------- tło: czerń z turkusowym światłem + siatka kropek ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* plamy światła to miękkie gradienty (bez filtra rozmycia, żeby telefon nie gubił klatek) */
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){width:80vmax;height:58vmax;left:-24vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(255,255,255,0.07),rgba(255,255,255,0));animation:au1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:68vmax;height:48vmax;right:-26vmax;top:18vh;background:radial-gradient(closest-side,rgba(var(--glow),0.13),rgba(var(--glow),0));animation:au2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:64vmax;height:44vmax;left:4vw;bottom:-30vmax;background:radial-gradient(closest-side,rgba(var(--glow),0.08),rgba(var(--glow),0));animation:au3 38s ease-in-out infinite alternate}
.aurora i:nth-child(4){width:36vmax;height:26vmax;left:52vw;top:48vh;background:radial-gradient(closest-side,rgba(255,255,255,0.06),rgba(255,255,255,0));animation:au1 30s ease-in-out infinite alternate-reverse}
/* delikatne ziarno: czerń nie wygląda płasko, a gradienty światła nie robią pasków */
.env::after{content:"";position:absolute;inset:0;opacity:.05;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' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
@keyframes au1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vmax,9vmax,0) scale(1.15)}}
@keyframes au2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-16vmax,-7vmax,0) scale(.9)}}
@keyframes au3{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(10vmax,-12vmax,0) scale(.92)}}
.dots{position:absolute;inset:0;width:100%;height:100%}

/* ---------- przyciski ---------- */
.btn{--bh:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--bh);padding:0 26px;border-radius:999px;border:1.5px solid transparent;font:600 16px/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out),box-shadow .35s var(--ease-out)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease-out)}
.btn:active{transform:translateY(1px) scale(.98)}
/* główne przyciski: białe, a po ramce krąży turkusowe światło.
   Kręci się warstwa z gradientem (transform), a nie sam gradient: obraca ją karta graficzna, bez przemalowywania strony co klatkę.
   .btn-accent to jeden element (warstwy w ::before i ::after), .magic ma środek w osobnym <span>. */
.btn-accent,.magic{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:999px;color:var(--on-white);background:rgba(var(--glow-hi),.38);box-shadow:0 0 24px -6px rgba(var(--glow),.75),0 12px 30px -16px rgba(var(--glow),.9)}
.btn-accent{font-weight:700;padding:0 28px}
.btn-accent::before,.magic::before{content:"";position:absolute;left:50%;top:50%;z-index:-2;width:max(150%,220px);aspect-ratio:1;background:var(--ring);transform:translate(-50%,-50%);animation:spin 3.4s linear infinite;will-change:transform;pointer-events:none}
.btn-accent::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:inherit;background:var(--white-btn)}
.btn-ghost{background:rgba(242,242,242,0.04);border-color:rgba(242,242,242,0.3);color:var(--text)}
.btn-sm{--bh:42px;padding:0 18px;font-size:15px}
.btn:disabled{opacity:.6;cursor:progress}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* każdy przycisk podświetla się na turkusowo: kursor na komputerze, dotknięcie na telefonie */
.btn-ghost:active,.btn-ghost:focus-visible{border-color:var(--tq-hi);background:rgba(var(--glow),.1);box-shadow:0 0 0 1px rgba(var(--glow-hi),.5),0 0 26px -4px rgba(var(--glow),.75)}
.btn-accent:active,.btn-accent:focus-visible,.magic:active,.magic:focus-visible{box-shadow:0 0 0 3px rgba(var(--glow-hi),.3),0 0 36px -4px rgba(var(--glow-hi),.95)}
@media (hover:hover){
  .btn:hover svg{transform:translateX(3px)}
  .btn-accent:hover,.magic:hover{box-shadow:0 0 0 3px rgba(var(--glow-hi),.22),0 0 38px -4px rgba(var(--glow-hi),.95)}
  .btn-ghost:hover{border-color:var(--tq-hi);background:rgba(var(--glow),.1);box-shadow:0 0 0 1px rgba(var(--glow-hi),.5),0 0 26px -4px rgba(var(--glow),.75)}
}
@media (pointer:coarse){.btn{min-height:max(44px,var(--bh))}}
/* stuknięcie: krótki błysk turkusowego światła wokół przycisku (klasę dodaje skrypt) */
@keyframes blysk{0%{box-shadow:0 0 0 2px var(--tq-hi),0 0 34px -2px rgba(var(--glow),.95)}100%{box-shadow:0 0 0 0 rgba(var(--glow),0),0 0 0 0 rgba(var(--glow),0)}}
.blysk{animation:blysk .7s var(--ease-out)}

/* najważniejszy przycisk (wycena): ten sam biały środek z krążącym światłem, trochę większy */
.magic{display:inline-flex;padding:2px;text-decoration:none;transition:box-shadow .4s var(--ease-out)}
.magic>span{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--white-btn);font:700 16px/1 var(--f-body);white-space:nowrap;transition:transform .35s var(--ease-out)}
.magic svg{width:18px;height:18px;color:var(--on-white);transition:transform .35s var(--ease-out)}
@media (hover:hover){.magic:hover svg{transform:translateX(4px)}}
.magic:active>span{transform:scale(.98)}
.menu:not(.open) .btn-accent::before{animation-play-state:paused}

/* ---------- karty ze świecącą krawędzią (turkusowe światło idzie za kursorem albo palcem) ---------- */
.gc{position:relative;isolation:isolate;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 24px 50px -34px rgba(0,0,0,.85)}
.gc::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:radial-gradient(230px circle at var(--mx,-999px) var(--my,-999px),rgba(94,230,217,.95),rgba(94,230,217,0) 50%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.gc::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(320px circle at var(--mx,-999px) var(--my,-999px),rgba(var(--glow),.09),rgba(var(--glow),0) 50%);pointer-events:none}

/* ---------- intro: logo zapala się turkusowym światłem i mruga ---------- */
.intro{position:fixed;inset:0;z-index:150;display:grid;place-items:center;overflow:hidden;background:radial-gradient(90% 70% at 50% 45%,#0C1A1A 0%,#050505 70%);animation:introLift .55s var(--ease-io) 1.55s forwards;cursor:pointer}
.intro.skip{animation:introLift .3s var(--ease-io) forwards}
@keyframes introLift{to{opacity:0;visibility:hidden}}
.intro-ring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:1.5px solid rgba(94,230,217,.7);box-shadow:0 0 30px rgba(var(--glow),.5),inset 0 0 30px rgba(var(--glow),.25);opacity:0;animation:ringOut 1.5s var(--ease-out) .35s forwards}
.intro-ring+.intro-ring{animation-delay:.6s}
@keyframes ringOut{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(4.2)}}
.intro-logo{position:relative;display:flex;align-items:center;gap:18px}
.intro-logo .ico{width:88px;height:88px;border-radius:20px;box-shadow:0 0 60px -6px rgba(var(--glow),.7);animation:logoPop .7s var(--ease-out) .1s both}
.intro-logo .word{width:auto;height:52px;animation:wordIn .55s var(--ease-out) .5s both}
@keyframes logoPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.intro .eye-open{animation:eyeOpen .01s linear 1.05s forwards}
.intro .eye-wink{opacity:0;animation:eyeWink .01s linear 1.05s forwards}
@keyframes eyeOpen{to{opacity:0}}
@keyframes eyeWink{to{opacity:1}}
.intro-skip{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* ---------- nawigacja ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut);transition:background-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.nav.scrolled{background:rgba(5,5,5,0.9);box-shadow:0 1px 0 var(--line),0 14px 34px -20px rgba(0,0,0,.8)}
@supports (backdrop-filter:blur(8px)){@media (pointer:fine){.nav.scrolled{background:rgba(5,5,5,0.66);backdrop-filter:blur(14px) saturate(1.4)}}}
.nav-logo{display:flex;align-items:center;min-height:44px}
.nav-logo img{height:38px;width:auto}
.nav-links{display:flex;gap:2px}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-weight:500;font-size:15.5px;text-decoration:none;color:var(--text-2);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:9px;height:2px;border-radius:2px;background:var(--grad);box-shadow:0 0 10px rgba(var(--glow),.8);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav-links a.is-active{color:var(--text)}
.nav-links a.is-active::after{transform:scaleX(1)}
@media (hover:hover){.nav-links a:hover{color:var(--text)}.nav-links a:hover::after{transform:scaleX(1)}}
.nav-right{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;font:500 13px/1 var(--f-mono);letter-spacing:.08em}
.lang span{padding:8px 7px;border-radius:8px;color:var(--text-3);transition:background-color .3s,color .3s}
.lang span.on{background:rgba(255,255,255,0.119);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .3s}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-2);background:rgba(12,12,12,0.7);cursor:pointer;place-items:center;transition:border-color .3s,box-shadow .3s}
.lang:active span.on,.burger:active{box-shadow:inset 0 0 0 1.5px var(--tq),0 0 22px -4px rgba(var(--glow),.8)}
@media (hover:hover){
  .lang:hover span.on{box-shadow:inset 0 0 0 1px var(--tq),0 0 16px -4px rgba(var(--glow),.8)}
  .burger:hover{border-color:var(--tq);box-shadow:0 0 22px -4px rgba(var(--glow),.8)}
}
.burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .4s var(--ease-out),opacity .3s}
.burger i+i{margin-top:5px}
.burger span{display:grid;justify-items:center}
.nav.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:99;background:rgba(5,5,5,0.97);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--nav-h) var(--gut) 40px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out),visibility 0s .5s}
.menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease-out),transform .5s var(--ease-out),visibility 0s}
.menu a{font:700 34px/1.15 var(--f-display);text-decoration:none;padding:8px 0}
.menu .btn{margin-top:22px;align-self:flex-start;padding:0 28px;font:700 16px/1 var(--f-body)}
@media (max-width:1060px){
  .nav-links,.nav-cta{display:none}
  .burger{display:grid}
  .nav-logo img{height:32px}
}

/* ---------- start ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-top:var(--nav-h)}
/* turkusowe światło za maskotką (na telefonie za nagłówkiem) */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 42% 52% at 76% 46%,rgba(var(--glow),.14),rgba(var(--glow),0) 72%)}
.hero-in{flex:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(30px,5vw,80px);padding-block:clamp(24px,4vh,60px)}
.hero .kicker{margin-bottom:20px}
.hero h1{font-size:clamp(48px,6.4vw,92px);font-weight:800;line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.hero .lede{margin-top:22px;max-width:36ch;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--text-2)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
/* nad hasłem: „Przyjmuję nowe projekty” z pulsującą turkusową kropką */
.status{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:9px 15px 9px 13px;border-radius:999px;background:rgba(var(--glow),.08);box-shadow:inset 0 0 0 1px rgba(var(--glow-hi),.32);font:500 12.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.status i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--tq-hi);box-shadow:0 0 10px rgba(var(--glow-hi),.9)}
.status i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--tq-hi);animation:ping 2.4s var(--ease-out) infinite -.6s}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.2);opacity:0}}
/* nagłówek wchodzi słowo po słowie; odpowiedź („Ja mam.”) trzyma się razem w jednej linii */
.split .w{display:inline-block;white-space:nowrap}
.hero .split .w{opacity:0;transform:translateY(.45em) rotate(var(--jr,0deg));transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(.1s + var(--th,0)*1.3s)}
.split .hl{display:inline-block;white-space:nowrap}
/* ukryte na start tylko z działającym JS (html.js); bez JS wszystko widać od razu */
.js .hero .status,.js .hero .lede,.js .hero .cta-row,.js .hero .hero-stats,.js .hero-art{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.js .hero .lede{transition-delay:.5s}
.js .hero .cta-row{transition-delay:.65s}
.js .hero .hero-stats{transition-delay:.8s}
.js .hero-art{transition-delay:.3s;transform:scale(.94)}
.hero.go .split .w,.hero.go .status,.hero.go .lede,.hero.go .cta-row,.hero.go .hero-stats,.hero.go .hero-art{opacity:1;transform:none}

/* liczniki pod przyciskami */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px}
.stat>span{color:var(--text-2);font-size:14px;line-height:1.35}
.hero-stats{margin-top:30px;max-width:560px}
/* licznik jak licznik kilometrów: kolumny cyfr przewijają się w pionie */
/* bez poświaty: kolumny cyfr mają overflow:hidden i przycinały ją do jasnego prostokąta */
.odo{display:block;font:800 clamp(30px,2.8vw,40px)/1.1 var(--f-display);color:var(--text);font-variant-numeric:tabular-nums}
.odo-cols{display:inline-flex;align-items:flex-start;height:1.1em;overflow:hidden;vertical-align:top}
.odo .col{display:flex;flex-direction:column;transition:transform 1.9s cubic-bezier(.2,1,.3,1)}
.odo .col>span{display:block;height:1.1em;line-height:1.1em;text-align:center}
.odo .suf{color:var(--tq-hi);white-space:pre;line-height:1.1em}

/* biała maskotka w turkusowym świetle, orbity i szklane powiadomienia */
.hero-art{position:relative;justify-self:center;width:min(460px,100%);aspect-ratio:1}
.orbit{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(255,255,255,0.12);animation:turn 28s linear infinite}
/* znak rozpoznawczy: po zewnętrznej orbicie krąży turkusowa kometa, ogon ciągnie się za kropką (to samo światło co na przyciskach) */
.orbit:not(.o2)::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:conic-gradient(rgba(94,230,217,0) 0%,rgba(94,230,217,0) 58%,rgba(56,198,196,.45) 84%,#5EE6D9 97%,#C9FFF8 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));filter:drop-shadow(0 0 6px rgba(var(--glow-hi),.8))}
.orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--tq-hi);box-shadow:0 0 14px 3px rgba(var(--glow),.85)}
.orbit.o2{inset:15%;border-style:dashed;border-color:rgba(255,255,255,0.1);animation-duration:19s;animation-direction:reverse}
.orbit.o2 i{background:#FFFFFF;box-shadow:0 0 14px 3px rgba(var(--glow),.7)}
@keyframes turn{to{transform:rotate(360deg)}}
.mascot-glow{position:absolute;inset:25%;animation:float 7s ease-in-out infinite}
.mascot-glow::before{content:"";position:absolute;inset:-55%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--glow),.42) 0%,rgba(var(--glow),.15) 52%,rgba(var(--glow),0) 100%)}
.mascot-glow svg{width:100%;height:100%;border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 70px -14px rgba(var(--glow),.75),0 30px 60px -20px rgba(0,0,0,.7)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float-card{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;animation:float 8s ease-in-out infinite -2s}
.float-card>i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--tq-hi);background:rgba(var(--glow),.14);box-shadow:inset 0 0 0 1px rgba(var(--glow),.42),0 0 18px -6px rgba(var(--glow),.7)}
.float-card>i svg{width:22px;height:22px}
.float-card b{display:block;font:700 15px/1.25 var(--f-body);color:var(--text)}
.float-card small{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--text-2)}
.fc1{left:-8%;top:10%}
.fc2{right:-8%;bottom:13%;animation-duration:9.5s;animation-delay:-5s}
.hero:not(.live) .orbit,.hero:not(.live) .mascot-glow,.hero:not(.live) .float-card,.hero:not(.live) .magic::before,.hero:not(.live) .status i::after{animation-play-state:paused}

/* pasek usług na dole pierwszego ekranu */
.marquee{position:relative;overflow:hidden;padding:18px 0;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(12,12,12,0.2),rgba(24,24,24,0.55),rgba(12,12,12,0.2));-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;align-items:center;gap:40px;width:max-content;white-space:nowrap;font:800 clamp(28px,3.2vw,46px)/1.15 var(--f-display);letter-spacing:-.01em;will-change:transform}
.mq-track span{color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,0.527)}
.mq-track span:nth-of-type(3n+1){color:var(--text);-webkit-text-stroke:0}
.mq-track i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--tq);box-shadow:0 0 12px 2px rgba(var(--glow),.75)}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:10px}
  .hero-art{order:-1;width:min(300px,70vw)}
}

/* ---------- sekcje ---------- */
.sec{position:relative;padding:clamp(90px,11vw,150px) 0}
.sec::before{content:"";position:absolute;top:0;left:50%;width:min(900px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(var(--glow),0),rgba(var(--glow),.55),rgba(var(--glow),0))}
.sec-head{max-width:760px}
.sec-head h2{font-size:clamp(34px,4.4vw,60px);margin-top:16px;text-wrap:balance}
.sec-head .sub{margin-top:16px;font-size:clamp(17px,1.4vw,19.5px);color:var(--text-2);max-width:52ch}
.h-sub{font-size:clamp(28px,3vw,42px);margin-top:14px;text-wrap:balance}

/* wejście elementów (IntersectionObserver dodaje .in) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.stagger>.rv:nth-child(2){transition-delay:.08s}
.stagger>.rv:nth-child(3){transition-delay:.16s}
.stagger>.rv:nth-child(4){transition-delay:.24s}
.stagger>.rv:nth-child(5){transition-delay:.32s}
.stagger>.rv.settled,.stagger>.rv.settled:nth-child(n){transition-delay:0s!important}

/* ---------- oferta ---------- */
.offers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(36px,4vw,56px)}
.offer{display:flex;flex-direction:column;gap:18px;padding:24px 22px 26px;border-radius:22px;transition:transform .5s var(--ease-out)}
.offer .ico{flex:none;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:var(--tq-hi);background:rgba(var(--glow),.12);box-shadow:inset 0 0 0 1px rgba(var(--glow),.38),0 0 26px -8px rgba(var(--glow),.55)}
.offer .ico svg{width:26px;height:26px}
.offer h3{font-size:20px;line-height:1.2}
.offer p{margin-top:8px;color:var(--text-2);font-size:15px;line-height:1.5}
@media (hover:hover){.offer:hover{transform:translateY(-6px)}}
.offer-note{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:22px 26px;border-radius:22px}
.offer-note p{font-size:clamp(17px,1.4vw,19px);color:var(--text-2)}
.offer-note b{font:800 1.3em/1 var(--f-display);color:var(--text)}
.offer-note .cta-row{margin-top:0}
@media (max-width:1100px){.offers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- realizacje ---------- */
.work{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,80px);align-items:center;margin-top:clamp(32px,4vw,52px)}
.work-name{font-size:clamp(30px,3vw,42px)}
.work .desc{margin-top:12px;color:var(--text-2);font-size:18px;max-width:44ch}
.work .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.work .tags span{font:500 12px/1 var(--f-mono);letter-spacing:.06em;padding:9px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,0.056);color:var(--text)}
.work .cta-row{margin-top:26px}
/* realizacja jak szkło: przechyla się za kursorem, odblask przesuwa się po ekranach */
.devices{position:relative;padding-bottom:6%;perspective:1100px}
.dv-tilt{position:relative;transform-style:preserve-3d;transition:transform .5s var(--ease-out);--gx:28%;--gy:8%}
.laptop{position:relative;width:90%;animation:bob 9s ease-in-out infinite -2s}
.laptop .scr{position:relative;overflow:hidden;border-radius:14px 14px 4px 4px;padding:2.2% 2.2% 0;background:#0A0A0A;box-shadow:0 0 0 1px rgba(255,255,255,0.153),0 0 90px -24px rgba(var(--glow),.5),0 40px 80px -40px rgba(0,0,0,.9)}
.laptop .scr img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px 6px 0 0}
.laptop .base{height:14px;margin:0 -5%;border-radius:0 0 18px 18px;background:linear-gradient(#2A2A2A,#141414);box-shadow:0 1px 0 rgba(255,255,255,0.15) inset}
.phone{position:absolute;right:0;bottom:0;width:26%;padding:2.2%;overflow:hidden;border-radius:32px;background:#0A0A0A;box-shadow:0 0 0 1px rgba(255,255,255,0.187),0 30px 60px -24px rgba(0,0,0,.9);transform:translateZ(46px);animation:bob 7s ease-in-out infinite -4.5s}
.phone img{width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:24px}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(440px circle at var(--gx) var(--gy),rgba(255,255,255,.24),rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 52%)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.sec:not(.live) .laptop,.sec:not(.live) .phone,.sec:not(.live) .magic::before,.sec:not(.live) .btn-accent::before{animation-play-state:paused}
.ba-wrap{margin-top:clamp(80px,9vw,130px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(30px,4vw,64px);align-items:center}
.ba{position:relative;--pos:50%;border-radius:22px;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;background:#0A0A0A;box-shadow:0 0 0 1px var(--line-2),0 40px 80px -40px rgba(0,0,0,.9)}
.ba img{width:100%;height:auto;pointer-events:none}
.ba picture{display:block}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba .after img{width:100%;height:100%;object-fit:cover}
.ba .lbl{position:absolute;top:14px;font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:8px 11px;border-radius:999px;background:rgba(8,8,8,0.86);color:var(--text)}
.ba .lbl.l{left:14px}
.ba .lbl.r{right:14px;background:var(--tq-hi);color:var(--on-white)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;pointer-events:none}
.ba .handle .line{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--tq-hi);box-shadow:0 0 12px 2px rgba(var(--glow),.8)}
.ba .knob{position:absolute;top:50%;left:0;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#FFFFFF;color:#050505;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(var(--glow),.4),0 0 26px rgba(var(--glow),.7);transition:transform .3s var(--ease-out)}
.ba.dragging .knob{transform:scale(1.1)}
.ba .knob svg{width:26px;height:26px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.ba:focus-within{outline:3px solid var(--focus);outline-offset:4px}
/* aplikacja w ramce telefonu (nagranie z konta testowego) */
.work-app{margin-top:clamp(80px,9vw,130px)}
.app-media{position:relative;display:grid;place-items:center}
.app-media::before{content:"";position:absolute;inset:-10% 5%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--glow),.3),rgba(var(--glow),.08) 55%,rgba(var(--glow),0))}
.app-phone{position:relative;width:min(280px,72vw);padding:9px;border-radius:44px;background:#0A0A0A;box-shadow:0 0 0 1px rgba(255,255,255,0.213),0 0 80px -20px rgba(var(--glow),.55),0 40px 80px -30px rgba(0,0,0,.9);animation:bob 8s ease-in-out infinite -3s}
.app-phone video{display:block;width:100%;height:auto;aspect-ratio:540/1168;border-radius:36px;background:#000;object-fit:cover}
.sec:not(.live) .app-phone{animation-play-state:paused}
@media (max-width:900px){.work-app .app-media{order:2}}
.next{margin-top:clamp(60px,7vw,100px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;border-radius:26px}
.next p{font:700 clamp(22px,2.2vw,30px)/1.2 var(--f-display)}
@media (max-width:900px){.work,.ba-wrap{grid-template-columns:1fr}.devices{max-width:640px}}

/* ---------- jak pracuję: kroki po lewej, po prawej okno przeglądarki, w którym strona buduje się sama ----------
   Jedyna interakcja na stronie: odwiedzający przytrzymuje przycisk, pasek postępu rośnie, kroki zapalają się po kolei,
   a w oknie pojawia się rozmowa, szkic strony i gotowa strona „online”. Puszczony za wcześnie postęp łagodnie wraca.
   Stan prowadzi skrypt klasami na .build: s1 (rozmowa), s2 (szkic), s3 (gotowa strona), done (koniec). */
.build{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(34px,5vw,80px);align-items:center;margin-top:clamp(40px,5vw,64px)}
.steps{position:relative;display:grid;gap:30px}
/* oś między numerami: szara pod spodem, turkusowa rośnie razem z postępem */
.rail{position:absolute;left:31px;top:32px;bottom:32px;width:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.rail i{position:absolute;inset:0;background:linear-gradient(180deg,var(--tq),var(--sky));transform:scaleY(0);transform-origin:top}
.step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start}
.step .num{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#0A0F0F;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);font:800 22px/1 var(--f-display);color:var(--text-2);transition:color .4s,background-color .4s,box-shadow .4s}
.step.on .num{color:var(--on-white);background:var(--tq-hi);box-shadow:0 0 0 6px rgba(var(--glow-hi),.14),0 0 28px rgba(var(--glow-hi),.6)}
.step .tag{margin-top:6px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);transition:color .4s}
.step.on .tag{color:var(--tq-hi)}
.step h3{font-size:clamp(21px,1.9vw,25px);margin-top:9px}
.step p{margin-top:8px;color:var(--text-2);font-size:16.5px}

/* okno przeglądarki (ozdoba: czytnik ekranu go pomija, kroki obok mówią to samo) */
.stage{position:relative;display:grid;gap:20px;justify-items:center}
.stage::before{content:"";position:absolute;inset:-10% -8% 10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--glow),.26),rgba(var(--glow),0));opacity:.45;transition:opacity .7s var(--ease-out)}
.build.s3 .stage::before{opacity:1}
.win{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#090D0D;box-shadow:0 0 0 1px rgba(255,255,255,.13),0 40px 80px -40px rgba(0,0,0,.9);transition:box-shadow .6s var(--ease-out)}
.build.s3 .win{box-shadow:0 0 0 1px rgba(var(--glow-hi),.6),0 0 70px -16px rgba(var(--glow),.75),0 40px 80px -40px rgba(0,0,0,.9)}
.win-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:#101616;border-bottom:1px solid rgba(255,255,255,.08)}
.wd{display:flex;gap:6px}
.wd i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.url{flex:1;min-width:0;max-width:220px;margin-inline:auto;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);font:500 11.5px/1 var(--f-mono);color:var(--text-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.net{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);transition:color .4s}
.net i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:background-color .4s,box-shadow .4s}
.build.s3 .net{color:var(--tq-hi)}
.build.s3 .net i{background:var(--tq-hi);box-shadow:0 0 10px rgba(var(--glow-hi),.9)}
.win-body{position:relative;aspect-ratio:16/10}
/* 0: pusto */
.empty{position:absolute;inset:0;display:grid;place-items:center;padding:0 8%;font:500 14px/1.4 var(--f-mono);color:var(--text-2);text-align:center;transition:opacity .4s,transform .5s var(--ease-out)}
/* mrugający kursor: przezroczystość (robi to karta graficzna), zatrzymany, gdy go nie widać */
.caret{display:inline-block;width:2px;height:1.15em;margin-left:5px;vertical-align:-3px;background:var(--tq-hi);animation:blink 1.1s linear infinite;will-change:opacity}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.build.s1 .empty{opacity:0;transform:translateY(-12px)}
.build.s1 .caret{animation-play-state:paused}
/* 1: rozmowa */
.chat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 9%;transition:opacity .45s,transform .6s var(--ease-out)}
.bub{max-width:76%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.35;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .4s var(--ease-out),transform .55s var(--ease-out)}
.bub.b1{align-self:flex-start;background:rgba(255,255,255,.1);color:var(--text);border-bottom-left-radius:5px}
.bub.b2{align-self:flex-end;background:var(--tq-hi);color:var(--on-white);font-weight:600;border-bottom-right-radius:5px;transition-delay:.3s}
.build.s1 .bub{opacity:1;transform:none}
.build.s2 .chat{opacity:0;transform:translateY(-26px)}
/* 2: szkic z przerywanych ramek, 3: ramki wypełniają się kolorem */
.site{position:absolute;inset:8% 7% 9%;display:grid;grid-template-rows:8% minmax(0,1fr) 24%;gap:7%}
.blk{position:relative;display:block;border-radius:6px;border:1.5px dashed rgba(var(--glow-hi),.6);opacity:0;transform:scale(.92);transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),border-color .5s;transition-delay:calc(var(--d,0)*60ms)}
.build.s3 .blk{border-color:transparent}
.blk::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;background:var(--fill,rgba(255,255,255,.1));opacity:0;transition:opacity .5s var(--ease-out);transition-delay:calc(var(--d,0)*50ms)}
.build.s2 .blk{opacity:1;transform:none}
.build.s3 .blk::after{opacity:1}
.s-nav{display:flex;align-items:center;gap:3.5%}
.s-nav .logo{height:100%;aspect-ratio:1;border-radius:5px;--fill:#F2F2F2}
.s-nav .gap{flex:1}
.s-nav .ln{height:30%;width:8%;border-radius:3px;--fill:rgba(255,255,255,.4)}
.s-nav .pill{height:100%;width:15%;border-radius:999px;--fill:#FFFFFF}
.s-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:7%}
.s-copy{display:flex;flex-direction:column;justify-content:center;gap:8%}
.s-copy .h{height:15%;width:94%;border-radius:4px;--fill:#F2F2F2}
.s-copy .h.short{width:62%}
.s-copy .p{height:6%;width:82%;border-radius:3px;--fill:rgba(255,255,255,.35)}
.s-copy .cta{height:17%;width:40%;border-radius:999px;--fill:#FFFFFF;transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),box-shadow .5s}
.build.s3 .s-copy .cta{box-shadow:0 0 0 2px rgba(var(--glow-hi),.7),0 0 16px rgba(var(--glow-hi),.7)}
.s-img{border-radius:10px;--fill:radial-gradient(circle at 72% 28%,#E9FFFC 0 7%,rgba(233,255,252,0) 8%),linear-gradient(150deg,#5EE6D9 0%,#38C6C4 42%,#0E3838 100%)}
.s-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5%}
.s-cards .blk{border-radius:8px;--fill:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06))}
/* koniec: znaczek „gotowe” wskakuje na dolny róg okna */
.win-wrap{position:relative;width:100%}
.ok{position:absolute;right:-14px;bottom:-14px;z-index:2;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--tq-hi);color:var(--on-white);box-shadow:0 0 0 6px rgba(var(--glow-hi),.16),0 0 30px rgba(var(--glow-hi),.7);opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.ok svg{width:22px;height:22px}
.build.done .ok{opacity:1;transform:none}
/* przycisk „Przytrzymaj”: biały z krążącym światłem, przy trzymaniu wypełnia go turkus */
.hold{--bh:56px;min-width:min(100%,300px);font-size:16.5px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hold-fill{position:absolute;inset:2px;border-radius:inherit;overflow:hidden;pointer-events:none}
.hold-fill i{position:absolute;inset:0;background:linear-gradient(90deg,#38C6C4,#5EE6D9 62%,#C9FFF8);transform:scaleX(0);transform-origin:left}
.hold-txt,.hold>svg{position:relative}
.build.holding .hold{box-shadow:0 0 0 3px rgba(var(--glow-hi),.3),0 0 44px -2px rgba(var(--glow-hi),.95)}
.hold-done{min-height:1.45em;font:600 16.5px/1.45 var(--f-body);color:var(--tq-hi);text-align:center;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.build.done .hold-done{opacity:1;transform:none}
.sec:not(.live) .caret{animation-play-state:paused}
@media (max-width:900px){
  .build{grid-template-columns:1fr;gap:34px}
  .stage{order:-1;width:100%;max-width:560px;justify-self:center}
}

/* ---------- o mnie ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"photo head" "photo text";grid-template-rows:auto auto;gap:0 clamp(36px,6vw,96px);align-items:start}
/* całe zdjęcie, od głowy do butów, bez kadrowania */
.portrait{grid-area:photo;align-self:center;justify-self:center;width:100%;max-width:340px;border-radius:26px;overflow:hidden;background:#DDE5E6;box-shadow:0 0 0 1px var(--line-2),0 0 80px -20px rgba(var(--glow),.45),0 40px 70px -40px rgba(0,0,0,.9)}
.portrait img{width:100%;height:auto}
.about-head{grid-area:head;align-self:end}
.about-text{grid-area:text}
.about h2{font-size:clamp(34px,4vw,56px);margin-top:16px}
.medal{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:9px 14px 9px 10px;border-radius:999px;background:rgba(255,255,255,0.072);border:1px solid rgba(255,255,255,0.27);color:var(--text);font:500 13px/1.25 var(--f-body)}
.medal svg{flex:none;width:26px;height:26px;color:var(--gold)}
.medal b{font-weight:600}
.about .txt{margin-top:22px;color:var(--text);font-size:clamp(18px,1.5vw,21px);line-height:1.6;max-width:44ch}
/* słowa zapalają się przy przewijaniu (JS dzieli akapit na słowa) */
.words .ww{color:rgba(242,242,242,0.26);transition:color .35s ease}
.words .ww.on{color:var(--text)}
.about .sign{margin-top:24px;font:700 20px/1.2 var(--f-display);color:var(--tq-hi)}
@media (max-width:860px){.about{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}

/* ---------- wycena: pytania + krótki formularz ---------- */
.quote{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,72px);align-items:start}
.quote .alt{margin-top:24px;display:grid;gap:4px}
.quote .alt a{display:flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;color:var(--text);font-weight:500}
.quote .alt svg{width:22px;height:22px;color:var(--tq-hi)}
@media (hover:hover){.quote .alt a:hover span{text-decoration:underline;text-underline-offset:4px}}
.faq{margin-top:34px}
.faq-h{font:500 12.5px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:12px}
.faq-item{border-radius:16px;margin-top:10px;transition:border-color .35s}
.faq-item[open]{border-color:rgba(var(--glow),.42)}
.faq-item summary{position:relative;display:flex;align-items:center;min-height:54px;padding:14px 54px 14px 18px;font-weight:600;font-size:16px;line-height:1.35;cursor:pointer;list-style:none;border-radius:16px;transition:box-shadow .3s var(--ease-out)}
.faq-item summary:active{box-shadow:inset 0 0 0 1.5px var(--tq),0 0 22px -6px rgba(var(--glow),.7)}
@media (hover:hover){.faq-item summary:hover{box-shadow:inset 0 0 0 1.5px rgba(var(--glow),.7),0 0 22px -6px rgba(var(--glow),.6)}}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:20px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--tq-hi),var(--tq-hi)) center/100% 2px no-repeat,linear-gradient(var(--tq-hi),var(--tq-hi)) center/2px 100% no-repeat;transition:transform .35s var(--ease-out)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 18px 16px;color:var(--text-2);font-size:15.5px;line-height:1.55}
.faq-item[open] p{animation:fadeUp .4s var(--ease-out)}
.form{position:relative;padding:clamp(24px,3.2vw,40px);border-radius:30px;background:linear-gradient(165deg,rgba(26,26,26,0.78) 0%,rgba(10,10,10,0.9) 100%);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 0 90px -34px rgba(var(--glow),.45),0 50px 90px -50px rgba(0,0,0,.9)}
.form .lbl{display:block;padding:0;margin-bottom:14px;font:700 clamp(21px,1.9vw,26px)/1.2 var(--f-display)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
/* wybór puszcza falę światła od miejsca stuknięcia */
.opt .box{position:relative;display:flex;align-items:center;min-height:44px;overflow:hidden;padding:10px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,0.198);background:rgba(0,0,0,0.45);font-weight:500;font-size:15px;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.opt input:checked+.box{border-color:var(--tq);background:rgba(var(--glow),.14);box-shadow:inset 0 0 0 1px var(--tq),0 0 26px -8px rgba(var(--glow),.8)}
.opt input:focus-visible+.box{outline:3px solid var(--focus);outline-offset:2px}
.opt:active .box{border-color:var(--tq);box-shadow:0 0 22px -6px rgba(var(--glow),.75)}
.rip{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:radial-gradient(circle,rgba(201,255,248,.55),rgba(var(--glow),.25) 60%,rgba(var(--glow),0) 72%);transform:scale(0);animation:rip .75s var(--ease-out) forwards;pointer-events:none}
@keyframes rip{to{transform:scale(26);opacity:0}}
@media (hover:hover){.opt:hover .box{border-color:var(--tq);box-shadow:0 0 22px -8px rgba(var(--glow),.7)}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:10px}
.field{display:grid;gap:8px;margin-top:16px}
.field label{font-weight:600;font-size:15px}
.field label small{font-weight:400;color:var(--text-2)}
.field input,.field textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.27);background:rgba(0,0,0,0.6);color:var(--text);font-size:16px;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--tq);box-shadow:0 0 0 4px rgba(var(--glow),.22),0 0 24px -6px rgba(var(--glow),.6)}
.field .err{display:none;color:var(--coral);font-size:14px;font-weight:500}
.field.bad input,.field.bad textarea{border-color:var(--coral)}
.field.bad .err{display:block}
.fnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.form .note{margin-top:12px;font-size:13.5px;color:var(--text-2)}
.form .note:empty{display:none}
.form .privacy{margin-top:10px;font-size:13px;line-height:1.5;color:var(--text-2)}
.form .privacy a{color:var(--tq-hi);text-underline-offset:3px}
.qdone{display:none;text-align:center;padding:30px 10px}
.qdone.on{display:block;animation:fadeUp .6s var(--ease-out)}
.qdone:focus{outline:none}
.qdone svg{width:110px;height:110px;margin:0 auto 18px;border-radius:24px;box-shadow:0 0 60px -8px rgba(var(--glow),.7)}
.qdone h3{font-size:clamp(26px,2.6vw,36px)}
.qdone p{margin-top:12px;color:var(--text-2);max-width:40ch;margin-inline:auto}
.qdone .btn{margin-top:22px}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:900px){.quote{grid-template-columns:1fr}}
@media (max-width:560px){.two{grid-template-columns:1fr}.fnav .btn{flex:1 1 auto}}

/* ---------- stopka ---------- */
.foot{position:relative;padding:clamp(80px,9vw,120px) 0 max(40px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%)}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(var(--glow),0),rgba(var(--glow),.55),rgba(var(--glow),0))}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:40px;align-items:start}
.foot .logo{height:auto;width:min(300px,100%)}
.foot .line{margin-top:20px;font:700 22px/1.2 var(--f-display);color:var(--text)}
.foot h3{font:500 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.foot ul{margin-top:16px;display:grid;gap:6px}
.foot a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--text);transition:color .3s}
.foot a svg{width:20px;height:20px;color:var(--tq-hi)}
@media (hover:hover){.foot a:hover{color:var(--tq-hi)}}
.foot-bottom{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--text-2)}
.foot-bottom a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.foot .mascot-wink{width:56px;height:56px;border-radius:13px;box-shadow:0 0 34px -6px rgba(var(--glow),.6)}
.foot.live .mascot-wink .eye-open{animation:blinkOpen 5s infinite}
.foot.live .mascot-wink .eye-wink{animation:blinkWink 5s infinite}
.mascot-wink .eye-wink{opacity:0}
@keyframes blinkOpen{0%,70%{opacity:1}71%,85%{opacity:0}86%,100%{opacity:1}}
@keyframes blinkWink{0%,70%{opacity:0}71%,85%{opacity:1}86%,100%{opacity:0}}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr}}

/* WhatsApp pod ręką na tablecie */
.float-wa{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:90;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--white-btn);color:var(--on-white);box-shadow:0 0 0 2px rgba(var(--glow-hi),.55),0 0 26px -4px rgba(var(--glow),.8),0 14px 30px -10px rgba(0,0,0,.8);transform:translateY(120px);transition:transform .6s var(--ease-out),box-shadow .3s}
.float-wa:active{box-shadow:0 0 0 3px rgba(var(--glow),.35),0 0 30px -2px rgba(var(--glow),.95)}
.float-wa svg{width:28px;height:28px}
.float-wa.show{transform:none}
@media (min-width:901px){.float-wa{display:none}}

/* ---------- strona z polityką prywatności ---------- */
.legal{padding:calc(var(--nav-h) + 40px) 0 80px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(34px,5vw,52px);margin-top:16px}
.legal h2{font-size:22px;margin-top:34px}
.legal p,.legal li{margin-top:12px;color:var(--text-2);font-size:16.5px}
.legal ul{padding-left:20px;list-style:disc}
.legal a{color:var(--tq-hi)}
.legal .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:36px}

/* ================= telefon (do 720 px): przewijany start i podstrony z pływającym paskiem ================= */
.pa-app,.tabwave{display:none}
@media (max-width:720px){
  :root{--nav-h:64px}
  .sec{padding:70px 0 58px}
  .sec-head h2{font-size:clamp(28px,8vw,36px);margin-top:10px}
  .sec-head .sub{margin-top:12px;font-size:16px}
  .hero h1{font-size:clamp(40px,11.6vw,56px)}
  .hero .lede{font-size:17px}
  .cta-row .magic,.cta-row .btn{flex:1 1 auto}
  .magic>span{width:100%}
  .marquee{padding:10px 0}
  .mq-track{gap:22px;font-size:24px}
  .mq-track i{width:7px;height:7px}
  .stats{gap:8px}
  .stat{padding:12px 10px;border-radius:16px}
  .odo{font-size:26px}
  .stat>span{font-size:12px;line-height:1.3}

  /* JS dodaje body.pa; bez JS zostaje zwykła, przewijana strona */
  body.pa{height:100vh;height:100svh;overflow:hidden;overscroll-behavior:none}
  body.pa .foot,body.pa main>.sec,body.pa .float-wa,body.pa .burger{display:none!important}

  /* start na telefonie: bez grafiki z maskotką, zwykłe przewijanie */
  body.pa .hero{min-height:0;display:block;padding:0}
  body.pa main .hero{padding-top:calc(var(--nav-h) + 4px)}
  body.pa .hero-in{display:block;padding:16px 0 4px}
  body.pa .hero-art{display:none}
  body.pa .hero .kicker{margin-bottom:12px}
  body.pa .hero .lede{margin-top:14px;font-size:16.5px}
  body.pa .hero .cta-row{margin-top:22px;gap:10px}
  body.pa .hero-stats{margin-top:18px}
  body.pa .marquee{margin-top:24px}

  /* podstrony: przezroczyste, za nimi zorza i kropki */
  body.pa .pa-app{display:block;position:fixed;inset:0;z-index:20;visibility:hidden;pointer-events:none}
  body.pa.inside .pa-app{visibility:visible;pointer-events:auto}
  .pg{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--nav-h) + 2px) 0 calc(96px + env(safe-area-inset-bottom));visibility:hidden}
  body.pa.inside .pg.on{visibility:visible}
  .pg:focus{outline:none}
  body.pa.inside .nav{background:rgba(5,5,5,0.92);box-shadow:0 1px 0 var(--line),0 14px 34px -20px rgba(0,0,0,.8)}
  .pg .sec{padding:22px 0 22px}
  .pg .sec::before{display:none}
  .pg .wrap{width:calc(100% - 2*var(--gut))}
  .pg .sec-head h2,.pg .about h2{font-size:clamp(26px,7.6vw,32px);margin-top:8px}
  .pg .rv{opacity:1;transform:none;transition:none}

  /* oferta: lista pod startem */
  .pg .offers{grid-template-columns:1fr;gap:8px;margin-top:16px}
  .pg .offer{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;border-radius:18px}
  .pg .offer .ico{width:44px;height:44px;border-radius:13px}
  .pg .offer .ico svg{width:23px;height:23px}
  .pg .offer h3{font-size:17px}
  .pg .offer p{margin-top:3px;font-size:14px;line-height:1.4}
  .pg .offer-note{margin-top:12px;padding:18px;border-radius:18px;gap:14px}
  .pg .offer-note .cta-row{width:100%;gap:8px}
  .pg .offer-note .btn{flex:1 1 auto}

  /* realizacje */
  .pg .work{gap:22px;margin-top:18px}
  .pg .work .desc{font-size:16px;margin-top:8px}
  .pg .work .tags{margin-top:14px}
  .pg .work .cta-row{margin-top:16px}
  .pg .ba-wrap{margin-top:40px;gap:16px}
  .pg .work-app{margin-top:44px}
  .pg .app-phone{width:min(240px,64vw);border-radius:38px;padding:8px}
  .pg .app-phone video{border-radius:31px}
  .pg .h-sub{font-size:clamp(24px,7vw,30px)}
  .pg .next{margin-top:30px;padding:18px;border-radius:20px}
  .pg .next p{font-size:20px}
  .pg .next .magic{width:100%}

  /* jak pracuję: okno i przycisk na górze, pod nimi kroki z osią po lewej */
  .pg .build{margin-top:18px;gap:26px}
  .pg .stage{gap:16px}
  .pg .win{border-radius:14px}
  .pg .win-bar{height:34px;padding:0 11px;gap:9px}
  .pg .wd i{width:8px;height:8px}
  .pg .bub{font-size:13.5px;padding:9px 12px}
  .pg .empty{font-size:13px}
  .pg .ok{bottom:-12px;right:-8px;width:36px;height:36px}
  .pg .hold{width:100%}
  .pg .steps{gap:20px}
  .pg .step{grid-template-columns:50px minmax(0,1fr);gap:14px}
  .pg .step .num{width:50px;height:50px;font-size:18px}
  .pg .rail{left:24px;top:25px;bottom:25px}
  .pg .step .tag{margin-top:4px}
  .pg .step h3{font-size:19px;margin-top:7px}
  .pg .step p{font-size:15px;margin-top:6px}

  /* o mnie */
  .pg .about{grid-template-columns:44% 1fr;grid-template-areas:"photo head" "text text";column-gap:16px;row-gap:18px}
  .pg .portrait{border-radius:16px;align-self:center}
  .pg .medal{font-size:11.5px;padding:7px 10px 7px 8px;gap:7px;margin-top:12px}
  .pg .medal svg{width:20px;height:20px}
  .pg .about .txt{margin-top:0;font-size:17px}
  .pg .about .sign{margin-top:14px}

  /* wycena: pytania nad formularzem */
  .pg .quote{gap:22px}
  .pg .quote .alt{margin-top:14px;gap:0}
  .pg .faq{margin-top:22px}
  .pg .faq-item summary{font-size:15.5px;min-height:50px}
  .pg .form{padding:20px 16px;border-radius:22px}
  .pg .form .lbl{font-size:20px}
  .pg .opts{gap:6px}
  .pg .opt .box{padding:9px 13px;font-size:14px}

  /* wejście treści po zmianie podstrony */
  .pg.enter .sec .wrap>*,.pg.enter .hero-in>*{animation:pgIn .7s var(--ease-out) both}
  .pg.enter .sec .wrap>*:nth-child(2){animation-delay:.07s}
  .pg.enter .sec .wrap>*:nth-child(3){animation-delay:.14s}
  .pg.enter .sec .wrap>*:nth-child(4){animation-delay:.21s}
  @keyframes pgIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

  /* pływająca kapsuła na dole: same ikonki, przy aktywnej zakładce biała pigułka z turkusową poświatą i napisem */
  .tabbar{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:30;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:2px;width:min(calc(100% - 24px),420px);height:60px;padding:6px;border-radius:999px;background:rgba(14,14,14,0.94);box-shadow:0 0 0 1px var(--line-2),0 0 34px -12px rgba(var(--glow),.45),0 18px 40px -14px rgba(0,0,0,.85);color:var(--text-2)}
  .tabbar button{display:flex;align-items:center;justify-content:center;height:48px;min-width:48px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:inherit;font:700 13.5px/1 var(--f-body);cursor:pointer;transition:background-color .35s var(--ease-out),color .3s,box-shadow .35s,padding .35s var(--ease-out)}
  .tabbar button svg{flex:none;width:22px;height:22px}
  .tabbar button span{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease-out),opacity .25s,margin .4s var(--ease-out)}
  .tabbar button[aria-current="page"]{background:var(--white-btn);color:var(--on-white);box-shadow:0 0 0 2px rgba(var(--glow-hi),.6),0 0 22px -2px rgba(var(--glow-hi),.75);padding:0 16px 0 14px}
  .tabbar button[aria-current="page"] span{max-width:120px;opacity:1;margin-left:8px}
  .tabbar button:active{transform:scale(.94);box-shadow:inset 0 0 0 1.5px var(--tq),0 0 22px -4px rgba(var(--glow),.8)}

  /* zmiana podstrony: przez ekran przechodzi pas turkusowego światła */
  body.pa .tabwave{display:block;position:fixed;left:0;right:0;top:-14%;height:128%;z-index:40;pointer-events:none;transform:translateY(120%);will-change:transform;background:linear-gradient(180deg,rgba(5,5,5,0) 0%,#050505 11%,#081010 50%,#050505 89%,rgba(5,5,5,0) 100%)}
  .tabwave::before{content:"";position:absolute;left:0;right:0;top:10%;height:2px;background:linear-gradient(90deg,rgba(var(--glow),0),#5EE6D9 30%,#38C6C4 70%,rgba(var(--glow),0));box-shadow:0 0 22px 6px rgba(var(--glow),.55)}
  .tabwave::after{content:"";position:absolute;left:0;right:0;top:10%;height:34%;background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(var(--glow),.2),rgba(var(--glow),0))}
}

/* pauza animacji na niewidocznych podstronach telefonu */
body.pa .pg:not(.on) *,body.pa .pg:not(.on) *::before,body.pa .pg:not(.on) *::after,
body.pa:not(.inside) .pg *,body.pa:not(.inside) .pg *::before,body.pa:not(.inside) .pg *::after{animation-play-state:paused!important}
/* pauza animacji w ukrytej karcie */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ograniczony ruch: wszystko w stanie końcowym */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv,.hero .split .w,.hero .status,.hero .lede,.hero .cta-row,.hero .hero-stats,.hero-art{opacity:1!important;transform:none!important}
  .intro{display:none!important}
}
html.pinned .rv{opacity:1!important;transform:none!important;transition:none!important}