/* HandbalLens landing: przewijanie = podejście do bramki */

/* Fonty lokalnie (OFL), bez Google Fonts */
@font-face{font-family:Anybody;font-style:normal;font-weight:300 900;font-stretch:50% 150%;font-display:swap;
  src:url(../fonts/anybody-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Anybody;font-style:normal;font-weight:300 900;font-stretch:50% 150%;font-display:swap;
  src:url(../fonts/anybody-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --deep:#040D24;
  --night:#07163A;
  --night-2:#0B2154;
  --court:#1A4BC4;
  --six:#FF7A1F;
  --six-2:#FF9147;
  --chalk:#EEF2F8;
  --ice:#9DB9FF;
  --mute:#A9B6D6;
  --line:rgba(238,242,248,.14);
  --post:#D7262E;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
body{
  font-family:Anybody,system-ui,sans-serif;font-stretch:94%;font-size:1.0625rem;line-height:1.6;
  background:var(--deep);color:var(--chalk);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--six);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}

/* ---------- scena w tle ---------- */
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#dim{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--deep);opacity:.05}
#lensFx{position:fixed;inset:0;z-index:45;width:100%;height:100%;pointer-events:none}
#flash{position:fixed;inset:0;z-index:46;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%,#fffef6 0%,#fff6cf 30%,#ffe57a 65%,#ffd23f 100%)}
main,.foot{position:relative;z-index:2}

/* ---------- skala odległości ---------- */
.ruler{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:30;height:min(56vh,440px);width:84px}
.ruler ol{list-style:none;position:relative;height:100%;border-right:1px solid rgba(238,242,248,.3)}
.ruler li{position:absolute;right:0;transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.ruler li::after{content:"";width:12px;height:1px;background:rgba(238,242,248,.6)}
.ruler button{background:none;border:0;color:rgba(238,242,248,.55);font:inherit;font-stretch:125%;font-weight:600;font-size:.78rem;cursor:pointer;padding:2px 4px;white-space:nowrap}
.ruler button:hover,.ruler li.on button{color:var(--chalk)}
.ruler-marker{position:absolute;right:-5px;top:0;width:9px;height:9px;border-radius:50%;background:var(--six);box-shadow:0 0 0 4px rgba(255,122,31,.25);transform:translateY(-50%)}
.mprog{display:none}

/* ---------- nawigacja ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;color:var(--chalk);
  background:none}
/* menu bez osobnego paska: po przewinięciu tylko miękki cień od góry, żeby napisy były czytelne na treści */
.nav::before{content:"";position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(180deg,rgba(4,13,36,.92) 0%,rgba(4,13,36,.7) 55%,rgba(4,13,36,0) 100%)}
.nav.solid::before{opacity:1}
.nav .wrap{display:flex;align-items:center;gap:24px;height:72px;max-width:none;padding-right:132px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-stretch:150%;font-weight:750;font-size:1.1rem}
.brand svg{width:28px;height:28px}
.nav-links{display:flex;gap:clamp(14px,1.6vw,28px);margin-left:auto;font-size:1rem}
.nav-links a,.nav-login,.nav .btn-s{white-space:nowrap}
.nav-links a,.nav-login{position:relative;text-decoration:none;color:#fff;font-weight:700;font-stretch:112%;padding:6px 0;transition:color .15s ease;
  text-shadow:0 1px 2px rgba(4,13,36,.9),0 0 14px rgba(4,13,36,.85)}
.brand{text-shadow:0 1px 2px rgba(4,13,36,.9),0 0 14px rgba(4,13,36,.85)}
.nav-links a::after,.nav-login::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--six);
  transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav-links a:hover,.nav-login:hover,.nav-links a:focus-visible,.nav-login:focus-visible{color:#FFB37A}
.nav-links a:hover::after,.nav-login:hover::after,.nav-links a:focus-visible::after,.nav-login:focus-visible::after{transform:scaleX(1)}
.nav-login{font-size:1rem}
/* logowanie wyróżnione: błękitna pigułka (kolor oka) z ikoną i delikatną poświatą; „Book a demo” zostaje pomarańczowe */
.nav-login{display:inline-flex;align-items:center;gap:8px;padding:8px 17px 8px 13px;border:1.5px solid #6CCBFF;border-radius:999px;
  background:rgba(70,184,255,.14);box-shadow:0 0 16px rgba(70,184,255,.35);transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease}
.nav-login::after{display:none}
.nav-login svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.nav-login:hover,.nav-login:focus-visible{background:#46B8FF;border-color:#46B8FF;color:#04122E;text-shadow:none;box-shadow:0 0 26px rgba(70,184,255,.6)}
.nav-login:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){
  .nav-login{animation:loginGlow 3.2s ease-in-out infinite}
  .nav-login:hover,.nav-login:focus-visible{animation:none}
}
@keyframes loginGlow{50%{box-shadow:0 0 26px rgba(70,184,255,.6)}}
.lang{display:flex;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;overflow:hidden;background:rgba(4,13,36,.45)}
.lang button{background:none;border:0;color:#fff;font:inherit;font-weight:700;font-size:.8rem;font-stretch:120%;padding:5px 11px;cursor:pointer;opacity:.85}
.lang button:hover{opacity:1;color:#fff}
.lang button[aria-pressed="true"]{background:var(--chalk);color:var(--night);opacity:1}

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;
  font:inherit;font-stretch:125%;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;border:0;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-s{min-height:40px;padding:0 18px;font-size:.88rem}
.btn-six{background:var(--six);color:var(--deep)}
.btn-six:hover{background:var(--six-2)}
.btn-ghost{color:var(--chalk);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(238,242,248,.45)}   /* transparent: <button> ma domyślnie białe tło */
.btn-ghost:hover{background:rgba(238,242,248,.12);box-shadow:inset 0 0 0 1.5px var(--chalk)}
.btn-six:hover{box-shadow:0 10px 30px -8px rgba(255,122,31,.7)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- typografia ---------- */
.display{font-stretch:135%;font-weight:830;font-size:clamp(3rem,8.2vw,8rem);line-height:.9;letter-spacing:-.03em;text-wrap:balance}
h2{font-stretch:128%;font-weight:800;font-size:clamp(2.1rem,4.6vw,4.2rem);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
h3{font-stretch:130%;font-weight:750;font-size:1.25rem;line-height:1.15;letter-spacing:-.005em}
.ch-head{position:relative;max-width:880px;margin-bottom:64px}
.ch-lede{margin-top:22px;font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--mute);max-width:40em}

/* ---------- 40 m: hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:78px 0 96px;position:relative;overflow:hidden}
.hl-hand{will-change:transform}
/* oko w centrum: grafika nad tekstem, wszystko wyśrodkowane */
.hero-grid{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
/* żółta latarka: ciemny tekst w snopie */
#beamFx{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.hero .hero-copy.lit{position:absolute;margin:0;z-index:5;pointer-events:none;color:#0B0F1A}
.hero .hero-copy.lit .lede{color:#1A1406}
.hero .hero-copy.lit .btn-six{background:#0B0F1A;color:#A9E2FF}
.hero .hero-copy.lit .btn-ghost{color:#0B0F1A;box-shadow:inset 0 0 0 2px #0B0F1A}
.hero .hero-copy.lit .btn{pointer-events:auto;cursor:pointer}
.hero .hero-copy.lit .btn-six:hover{background:#1E2640;color:#D6F1FF}
.hero .hero-copy.lit .btn-ghost:hover{background:rgba(11,15,26,.14);box-shadow:inset 0 0 0 2.5px #0B0F1A}
.hero-art{position:relative;z-index:3;order:-1;
  width:min(84vw,calc(46vh * 940 / 670),760px);
  /* oko leży w 61,7% szerokości grafiki: przesuwamy ją tak, żeby oko wypadło na środku ekranu */
  transform:translateX(-11.7%);margin-bottom:clamp(4px,1.2vh,16px)}
.hero-copy{position:relative;display:flex;flex-direction:column;align-items:center;max-width:860px}
/* miękkie przyciemnienie za tekstem: linie boiska i bramka w tle nie przecinają liter */
.hero-copy:not(.lit)::before{content:"";position:absolute;inset:-40px -110px -70px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,13,36,.82) 55%,rgba(4,13,36,0) 100%)}
.hero-grid .display{font-size:clamp(2.1rem,3.9vw,4.4rem);line-height:.98;max-width:16ch;margin-bottom:clamp(12px,2vh,22px)}
.hero .lede{font-size:clamp(1rem,1.25vw,1.18rem);max-width:36em;color:#D5DEF0;margin-bottom:clamp(16px,2.6vh,28px)}
.hero .ctas{justify-content:center}
.hero .sources{margin-top:clamp(10px,1.8vh,20px);font-size:.88rem;color:var(--mute)}
@media (max-width:900px){
  .hero-art{width:min(108vw,560px)}
  .hero-grid .display{max-width:14ch}
}
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:#DCE5F7;font-stretch:115%}
.cue span{padding:6px 14px;border-radius:999px;background:rgba(4,13,36,.85);box-shadow:inset 0 0 0 1px rgba(238,242,248,.18)}
.cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--six),transparent)}
@media (prefers-reduced-motion:no-preference){ .cue i{animation:cue 1.8s var(--ease) infinite} }
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 20 m: szum ---------- */
.noise{padding:20vh 0}
.noise-pin{display:flex;flex-direction:column;align-items:center;gap:6vh;text-align:center;padding:0 24px}
.nl{font-stretch:120%;font-weight:700;font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:1.1;letter-spacing:-.015em;max-width:20ch;text-wrap:balance}
.nl-big{font-stretch:150%;font-weight:900;font-size:clamp(3rem,9vw,8.5rem);line-height:.92;max-width:none;color:var(--chalk)}
.fx .noise{padding:0;height:100vh}
.fx .noise-pin{position:relative;height:100vh;justify-content:center;gap:0}
.fx .nl{position:absolute;left:50%;top:50%;width:min(92vw,1100px);transform:translate(-50%,-50%);opacity:0}

/* ---------- 9 m: jak to działa ---------- */
.steps{padding:140px 0 120px}
.steps-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.steps-list{list-style:none;counter-reset:none}
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:28px 0;border-top:1px solid var(--line);min-height:62vh;align-content:start;transition:opacity .4s ease}
.step:last-child{min-height:72vh}
.step-n{font-stretch:150%;font-weight:800;font-size:1rem;color:var(--six);padding-top:3px}
.step h3{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:12px}
.step p{color:var(--mute);max-width:30em}
.fx .step{opacity:.32}
/* ekran przyklejony na środku wysokości okna (top liczy app.js), a tekst każdego kroku przechodzi przez środek obok niego */
.step{min-height:78vh;align-content:center;border-top:0}
.steps-list{padding-bottom:6vh}
.fx .step.on{opacity:1}
.device{position:sticky;top:var(--dev-top,120px);border-radius:16px;overflow:hidden;background:#05070d;box-shadow:0 0 0 1px rgba(157,185,255,.22),0 40px 100px -30px rgba(0,0,0,.8)}
.device-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#0a1330;border-bottom:1px solid var(--line)}
.device-bar i{width:9px;height:9px;border-radius:50%;background:rgba(238,242,248,.2)}
.device-bar span{margin-left:12px;font-size:.78rem;color:var(--mute);font-stretch:115%}
.views{position:relative;aspect-ratio:960/600}
.view{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;background:#05070d}
.view.is-on{opacity:1;visibility:visible}
.view[data-view="0"]{background:#0E2C80}
.view > img{width:100%;height:100%;object-fit:cover;object-position:top left}
.view .view-over{position:absolute;right:3%;bottom:4%;width:38%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(157,185,255,.3),0 24px 60px rgba(0,0,0,.7)}
.kreator{width:100%;height:100%;display:block}

/* ---------- 7 m: XPS ---------- */
.xps{padding:160px 0 120px}
.xps-shots{position:relative;aspect-ratio:1100/700;max-width:1100px;margin:0 auto 72px;perspective:1600px}
.xs{position:absolute;height:auto;border-radius:12px;box-shadow:0 0 0 1px rgba(157,185,255,.25),0 30px 80px -20px rgba(0,0,0,.85)}
.xs-back{right:0;top:0;width:52%}
.xs-front{left:0;bottom:0;width:76%}
.xps-feats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 40px}
.xps-feats li{padding-left:20px;border-left:2px solid rgba(255,122,31,.5)}
.xps-feats h3{margin-bottom:6px}
.xps-feats p{color:var(--mute);font-size:1rem}
.xps-note{margin-top:56px;color:var(--mute);font-size:.95rem}

/* ---------- 6 m: scouting ---------- */
.scout{padding:160px 0 120px}
.scout-shot{position:relative;margin:0 0 110px;padding-bottom:8%}
.scout-shot > img:first-child{width:100%;border-radius:12px;box-shadow:0 0 0 1px rgba(157,185,255,.25),0 30px 80px -20px rgba(0,0,0,.85)}
.scout-over{position:absolute;right:-2%;bottom:-14%;width:30%;border-radius:12px;box-shadow:0 0 0 1px rgba(157,185,255,.35),0 30px 70px rgba(0,0,0,.85)}

/* bramka: siatka, rzuty wlatują jak piłki, strefy świecą jak mapa ciepła */
.goal-demo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:center}
.gd-text h3{font-size:clamp(1.6rem,2.6vw,2.3rem);margin-bottom:10px}
.gd-text > p{color:var(--mute)}
.toggle{display:inline-flex;margin:22px 0 22px;background:rgba(238,242,248,.08);border-radius:999px;padding:4px}
.toggle button{border:0;background:none;font:inherit;font-stretch:115%;font-weight:600;font-size:.9rem;padding:8px 15px;border-radius:999px;color:var(--mute);cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--chalk);color:var(--night)}
.caption{min-height:3.4em;font-size:1.05rem}
.caption b{font-stretch:130%;color:var(--six)}
.caption small{display:block;color:var(--mute);font-size:.82rem;margin-top:4px}
.goal3d{position:relative;perspective:1400px}
.goal-frame{
  position:relative;aspect-ratio:3/2;padding:16px 16px 0;transform-style:preserve-3d;
  background:
    repeating-linear-gradient(90deg,var(--post) 0 22px,#F4F6FA 22px 44px) top/100% 16px no-repeat,
    repeating-linear-gradient(180deg,var(--post) 0 22px,#F4F6FA 22px 44px) left/16px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--post) 0 22px,#F4F6FA 22px 44px) right/16px 100% no-repeat;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
}
.net{
  position:relative;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);overflow:hidden;
  background-color:#06102c;
  background-image:
    repeating-linear-gradient(45deg,rgba(238,242,248,.09) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(-45deg,rgba(238,242,248,.09) 0 1px,transparent 1px 15px),
    radial-gradient(120% 90% at 50% 0%,rgba(26,75,196,.35),transparent 70%);
  box-shadow:inset 0 30px 60px rgba(0,0,0,.65),inset 0 -10px 30px rgba(0,0,0,.4);
}
.zone{position:relative;border:0;background:none;font:inherit;color:var(--chalk);cursor:pointer;overflow:visible;
  border-right:1px dashed rgba(238,242,248,.14);border-bottom:1px dashed rgba(238,242,248,.14);transition:opacity .3s ease}
.zone:nth-child(3n){border-right:0}
.zone:nth-child(n+7){border-bottom:0}
.zone .heat{position:absolute;inset:-25%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,122,31,var(--h,0)) 0,rgba(255,122,31,0) 60%);transition:opacity .3s ease}
.zone .dots{position:absolute;inset:0;pointer-events:none}
.dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%}
.dot.g{background:var(--six);box-shadow:0 0 0 2px rgba(4,13,36,.6),0 0 14px rgba(255,122,31,.9)}
.dot.m{border:2px solid rgba(238,242,248,.75);background:rgba(4,13,36,.4)}
.ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--six);pointer-events:none}
.zone .lbl{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;pointer-events:none;opacity:.92;transition:transform .3s var(--ease)}
.zone .pct{font-stretch:140%;font-weight:850;font-size:clamp(1.2rem,2.4vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 16px rgba(4,13,36,.95)}
.zone .raw{font-size:.78rem;color:var(--mute);margin-top:4px;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(4,13,36,.95)}
.net.focus .zone{opacity:.42}
.net.focus .zone.sel{opacity:1}
.zone.sel .lbl{transform:scale(1.12)}
.zone.sel{box-shadow:inset 0 0 0 2px rgba(255,122,31,.85)}
.goal-floor{height:34px;margin:0 -6%;background:radial-gradient(50% 50% at 50% 0,rgba(0,0,0,.55),transparent 70%)}

/* przechylanie za myszką + odblask */
.tilt{transform-style:preserve-3d;will-change:transform}
.glare{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 42%)}
.tilt:hover > .glare{opacity:1}

/* ---------- dla kogo ---------- */
.roles{padding:140px 0 120px}
.roles-head{margin-bottom:56px}
.roles-track{display:grid;gap:28px;padding:0 32px;max-width:1240px;margin:0 auto}
.role{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px;align-items:center;padding:36px;border-radius:20px;background:rgba(11,33,84,.55);box-shadow:inset 0 0 0 1px var(--line)}
.role h3{font-size:1rem;color:var(--six);font-stretch:120%;margin-bottom:12px}
.role-big{font-stretch:125%;font-weight:780;font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.04;letter-spacing:-.015em;margin-bottom:22px;text-wrap:balance}
.role ul{list-style:none;display:grid;gap:10px;color:var(--mute)}
.role li{padding-left:18px;position:relative}
.role li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--six)}
.role img{width:100%;border-radius:12px;box-shadow:0 0 0 1px rgba(157,185,255,.22),0 24px 60px -20px rgba(0,0,0,.8)}

/* ---------- cennik ---------- */
.roles-track{display:grid}
/* ---------- kontakt ---------- */
.contact{padding:150px 0 130px}
.contact-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;padding:48px;border-radius:24px;
  background:linear-gradient(160deg,rgba(26,75,196,.28),rgba(11,33,84,.55) 55%);box-shadow:inset 0 0 0 1px rgba(157,185,255,.22),0 40px 100px -40px rgba(0,0,0,.8)}
.contact-copy h2{margin-bottom:18px;font-size:clamp(1.9rem,3vw,2.9rem);font-stretch:112%;overflow-wrap:break-word}   /* długie „Porozmawiajmy” nie wchodzi na formularz */
.contact-copy p{color:var(--mute);font-size:1.08rem;max-width:30em}
.contact-points{list-style:none;display:grid;gap:10px;margin:26px 0 28px}
.contact-points li{padding-left:22px;position:relative}
.contact-points li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--ice);box-shadow:0 0 12px rgba(157,185,255,.8)}
.contact-mail{font-stretch:120%;font-weight:700;color:var(--chalk);text-decoration:none;border-bottom:2px solid rgba(157,185,255,.5)}
.contact-mail:hover{border-color:var(--ice)}
.contact-form,.login-pool{display:grid;gap:8px;align-content:start}
.contact-form label,.login-pool label{font-size:.85rem;font-weight:600;color:#C9D4EC;margin-top:6px}
.contact-form input,.contact-form textarea,.login-pool input[type=text],.login-pool input[type=password]{
  font:inherit;font-size:1rem;color:var(--chalk);background:rgba(4,13,36,.7);border:1px solid rgba(157,185,255,.28);border-radius:12px;padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease}
.contact-form textarea{resize:vertical;min-height:110px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px rgba(157,185,255,.25)}
.contact-form .btn{margin-top:12px;justify-self:start}
.cf-err,.lp-err{font-size:.9rem;color:#FFB4A6;margin:4px 0 0}
.cf-err.ok{color:#9FE6B8}
/* ---------- logowanie w świetle latarki ---------- */
.login-pool{position:fixed;left:0;right:0;margin:0 auto;top:96px;z-index:50;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px);overflow:auto;overscroll-behavior:contain;
  padding:26px 26px 22px;border-radius:20px;text-align:left;
  background:rgba(4,13,36,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,170,90,.45),0 0 90px rgba(255,140,50,.28),0 30px 80px -20px rgba(0,0,0,.8)}
.login-pool[hidden]{display:none}
.logging .mprog,.logging .ruler,.logging .cue{opacity:0;pointer-events:none}
.login-pool h2{font-size:1.45rem;margin:0 0 8px;text-wrap:balance}
.login-pool input[type=text]:focus,.login-pool input[type=password]:focus{outline:none;border-color:#FFB070;box-shadow:0 0 0 3px rgba(255,150,70,.3)}
.lp-chk{display:flex;align-items:center;gap:8px;margin-top:8px !important;cursor:pointer}
.lp-chk input{accent-color:#FF9A4D;width:16px;height:16px}
.lp-go{margin-top:12px;width:100%}
.lp-go[disabled]{cursor:progress}
.lp-foot{margin-top:10px;font-size:.82rem;color:var(--mute)}

/* ---------- bramka ---------- */
.final{height:100vh;height:100svh;min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;padding:90px 24px 40px}
.final-goal{max-width:760px;display:flex;flex-direction:column;align-items:center}
.final-h{font-stretch:150%;font-weight:900;font-size:clamp(2.4rem,4vw,4.8rem);line-height:.95;margin-bottom:22px}
@media (min-width:901px){.final-h{white-space:nowrap}}
.final p{color:#D5DEF0;font-size:clamp(1rem,1.3vw,1.18rem);max-width:28em;margin-bottom:28px;text-shadow:0 2px 18px rgba(4,13,36,.9)}
.final .ctas{justify-content:center}

.faq-sec{padding:40px 0 120px}
.faq{max-width:860px}
.faq h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:28px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-stretch:120%;font-weight:700;font-size:1.15rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--six);border-bottom:2px solid var(--six);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--mute);padding:0 0 24px;max-width:44em}

.foot{background:var(--deep);border-top:1px solid var(--line);color:var(--mute);font-size:.9rem;padding:28px 0 36px}
.foot .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.foot .wrap > span:last-child{margin-left:auto}
.linkish{background:none;border:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* ---------- kursor: celownik ostrości i lupa ---------- */
.af{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:44px;height:44px;margin:-22px 0 0 -22px;opacity:0;transition:opacity .25s ease}
.af.on{opacity:1}
.af svg{width:100%;height:100%;overflow:visible;transition:transform .25s var(--ease)}
.af path{fill:none;stroke:var(--chalk);stroke-width:2;transition:stroke .2s ease}
.af circle{fill:var(--six)}
.af.link svg{transform:scale(1.45)}
.af.link path{stroke:var(--six)}
.af.lens svg{transform:scale(4.2)}
.af.lens path{stroke:rgba(238,242,248,.9);stroke-width:.6}
.af.lens circle{opacity:0}
.loupe{position:fixed;left:0;top:0;z-index:69;width:184px;height:184px;margin:-92px 0 0 -92px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.6);
  background-repeat:no-repeat;transition:opacity .2s ease,transform .25s var(--ease);
  box-shadow:0 0 0 1.5px rgba(238,242,248,.9),0 0 0 7px rgba(4,13,36,.55),0 20px 50px rgba(0,0,0,.6)}
.loupe.on{opacity:1;transform:scale(1)}
[data-loupe]{cursor:zoom-in}

/* ---------- zgody na cookies ---------- */
.cc-bar{
  position:fixed;left:20px;bottom:20px;z-index:60;width:min(440px,calc(100vw - 40px));padding:22px;border-radius:18px;
  background:rgba(7,22,58,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(157,185,255,.25),0 30px 80px rgba(0,0,0,.6);color:var(--chalk);font-family:Anybody,system-ui,sans-serif;
}
.cc-title{font-stretch:125%;font-weight:800;font-size:1.15rem;margin-bottom:8px}
.cc-body{font-size:.9rem;line-height:1.5;color:var(--mute);margin-bottom:16px}
.cc-link{color:var(--chalk)}
.cc-row{display:flex;flex-wrap:wrap;gap:8px}
.cc-btn{flex:1 1 auto;min-height:42px;padding:0 16px;border-radius:999px;border:0;background:var(--chalk);color:var(--deep);font:inherit;font-stretch:115%;font-weight:700;font-size:.88rem;cursor:pointer}
.cc-btn:hover{background:#fff}
.cc-ghost{background:none;color:var(--chalk);box-shadow:inset 0 0 0 1.5px rgba(238,242,248,.45)}
.cc-ghost:hover{background:rgba(238,242,248,.08)}
.cc-dlg{
  margin:auto;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:28px;border:0;border-radius:20px;
  background:var(--night);color:var(--chalk);font-family:Anybody,system-ui,sans-serif;box-shadow:0 0 0 1px rgba(157,185,255,.25),0 40px 100px rgba(0,0,0,.7);
}
.cc-dlg::backdrop{background:rgba(4,13,36,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cc-x{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(238,242,248,.08);color:var(--chalk);font-size:1.3rem;cursor:pointer}
.cc-opts{display:grid;gap:10px;margin:6px 0 20px}
.cc-opt{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(238,242,248,.05);cursor:pointer;position:relative}
.cc-opt-t{display:grid;gap:3px}
.cc-opt b{font-stretch:120%}
.cc-opt small{color:var(--mute);font-size:.84rem;line-height:1.45}
.cc-always{position:absolute;right:16px;top:14px;font-size:.75rem;color:var(--mute)}
.cc-sw{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:rgba(238,242,248,.2);position:relative;cursor:pointer;transition:background-color .2s ease;flex:none}
.cc-sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--chalk);transition:transform .2s var(--ease)}
.cc-sw:checked{background:var(--six)}
.cc-sw:checked::after{transform:translateX(18px)}
.cc-sw:disabled{opacity:.6;cursor:not-allowed;margin-top:18px}

/* ---------- mniejsze ekrany ---------- */
@media (min-width:1101px) and (max-width:1300px){   /* menu w jednej linii także po polsku */
  .nav .wrap{padding-right:88px;gap:18px}
  .nav-links{font-size:.9rem}
  .nav-login{font-size:.9rem;padding:7px 14px 7px 11px}
  .nav .btn-s{font-size:.88rem}
}
@media (max-width:1160px){ .nav-links{display:none} .nav-login{margin-left:auto} }
@media (max-width:1100px){
  .nav-links{display:none}
  .ruler{display:none}
  .nav .wrap{padding-right:32px}
  .nav-login{margin-left:auto}
  .mprog{display:block;position:fixed;left:0;right:0;top:0;height:3px;z-index:45;pointer-events:none}
  .mprog span{display:block;height:100%;width:0;background:var(--six)}
  .mprog b{position:fixed;left:16px;bottom:16px;padding:5px 10px;border-radius:999px;background:rgba(7,22,58,.85);font-stretch:125%;font-size:.75rem;box-shadow:0 0 0 1px var(--line)}
}
@media (max-width:900px){
  .steps-grid,.goal-demo{grid-template-columns:1fr;gap:44px}
  .xps-feats{grid-template-columns:1fr 1fr}
  .scout-over{width:42%;right:0}
  .device{top:66px;z-index:3;order:-1}
  .step{min-height:46vh;align-content:start;border-top:1px solid var(--line)}
  .step:last-child{min-height:60vh}
  .role{grid-template-columns:1fr;padding:26px}
  .contact-card{grid-template-columns:1fr;padding:28px;gap:32px}
}
@media (max-width:640px){
  .xps-feats{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav .wrap{padding:0 16px;gap:12px;height:62px}
  .brand{font-size:.95rem;gap:8px}
  .brand svg{width:24px;height:24px}
  .nav-login{white-space:nowrap;font-size:.9rem;padding:6px 13px 6px 10px;gap:6px}
  .nav-login svg{width:15px;height:15px}
  .lang button{padding:4px 8px}
  .nav .btn-s{display:none}
  .hero{padding-top:100px}
  .steps,.xps,.scout,.roles,.pricing{padding:96px 0 80px}
  .roles-track{padding:0 16px}
  .btn{width:100%}
  .ctas{width:100%}
  .cc-bar{left:10px;right:10px;bottom:10px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  html:not(.lenis){scroll-behavior:auto}
  .btn,.zone,.cc-sw::after{transition:none}
}
@media (max-width:380px){
  .nav .wrap{gap:8px;padding:0 12px}
  .brand{font-size:.85rem}
  .lang button{padding:3px 6px;font-size:.72rem}
}