/* NewWeb — strona główna v3 (10.10.2026)
   Cel: zgłoszenie z telefonu. Jedno pole (numer) w pierwszym ekranie, przyklejony pasek, krótka strona.
   Bez GSAP i bez animacji ukrywających treść — pierwszy ekran maluje się od razu. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-vf.woff2) format('woff2-variations'),url(../fonts/manrope-vf.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-vf.woff2) format('woff2-variations'),url(../fonts/inter-vf.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  --ink:#0B0D12; --paper:#F7F7F4; --white:#fff;
  --blue:#2A5BFF; --blue-deep:#1638B8; --blue-soft:#E8EEFF;
  --g-200:#E3E3DE; --g-300:#CFCFC9; --g-500:#6E6E69; --g-600:#55554F;
  --line:rgba(11,13,18,.12);
  --display:"Manrope","Inter","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --m:clamp(16px,5vw,96px);
  --nav-h:60px;
  --r:12px;
  --shadow:0 1px 2px rgba(11,13,18,.06),0 12px 32px -12px rgba(11,13,18,.22);
  --dock-h:0px; --ck-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:calc(var(--dock-h) + var(--ck-h))}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--m);top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;font-weight:600;text-decoration:none}
.skip:focus{top:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(28px,3.6vw,48px)}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.2}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:10px;background:var(--ink);color:var(--paper);font:600 16px/1.1 var(--body);text-decoration:none;text-align:center;transition:background .2s}
.btn:hover{background:#2b2d33}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-deep)}
.btn--sm{min-height:40px;padding:0 16px;font-size:15px;border-radius:8px}
.link{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;color:var(--blue-deep)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;height:var(--nav-h);padding:0 var(--m);background:rgba(247,247,244,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__logo{margin-right:auto}
.nav__logo img{height:20px;width:auto}
.nav__links{display:flex;gap:24px}
.nav__links a{font-weight:500;font-size:15px;text-decoration:none}
.nav__links a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:759px){.nav__links{display:none}}
/* telefon: jeden przycisk na ekranie — w nagłówku nie dublujemy formularza z hero ani przyklejonego paska */
@media (max-width:959px){.nav__cta{display:none}}

/* ---------- hero ---------- */
/* tło: dwie miękkie poświaty (niebieska + fioletowa) + siatka 1 px wygaszana do brzegów.
   Poświaty dryfują powoli (tylko transform — tanie dla GPU), bez reduced-motion stoją. */
.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;display:grid;grid-template-columns:1fr;gap:22px;padding:22px var(--m) 36px}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(11,13,18,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(11,13,18,.055) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(120% 80% at 70% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(120% 80% at 70% 20%,#000 20%,transparent 75%)}
.hero::after{content:"";position:absolute;z-index:-1;width:900px;height:900px;right:-380px;top:-420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(42,91,255,.30),rgba(42,91,255,.10) 55%,transparent);filter:blur(10px);animation:drift 18s ease-in-out infinite alternate}
.hero__glow{position:absolute;z-index:-1;width:700px;height:700px;left:-320px;bottom:-380px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(139,92,246,.20),rgba(56,189,248,.08) 60%,transparent);animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-60px,50px,0)}}
.eyebrow{font:600 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--g-600)}
.eyebrow--blue{color:var(--blue)}
.hero__h1{font-size:clamp(34px,9.4vw,68px);margin-top:10px;max-width:13ch}
.hero__h1 .hl{background:linear-gradient(92deg,#2A5BFF 10%,#7B5CFF 60%,#2A5BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{margin-top:14px;font-size:17px;color:var(--g-600);max-width:34em}
.hero .cb{margin-top:20px;padding:16px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(11,13,18,.08);box-shadow:0 1px 2px rgba(11,13,18,.04),0 18px 40px -24px rgba(42,91,255,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ticks{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:500;color:var(--g-600);order:2}
.ticks li{display:flex;align-items:center;gap:7px}
.ticks li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232A5BFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.scene{order:3}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:48px;align-items:center;padding-top:48px;padding-bottom:56px;min-height:calc(100vh - var(--nav-h) - 40px)}
  .hero__txt{grid-column:1}
  .scene{grid-column:2;grid-row:1/3}
  .ticks{grid-column:1}
}

/* ---------- scena 3D: laptop + telefon ---------- */
.scene{--rx:8deg;--ry:-16deg;position:relative;perspective:1600px;padding:6% 2% 0}
.scene__tilt{position:relative;aspect-ratio:16/11.5;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.laptop{position:absolute;left:0;top:0;width:84%;display:block;text-decoration:none;transform-style:preserve-3d;transform:translateZ(0)}
.laptop__lid{position:relative;display:block;padding:2.4% 2.4% 3%;border-radius:16px 16px 6px 6px;background:linear-gradient(160deg,#2b2e36,#0d0f14 60%);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 40px 80px -30px rgba(11,13,18,.55),0 18px 30px -18px rgba(11,13,18,.5)}
.laptop__cam{position:absolute;top:1%;left:50%;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:#3a3d46}
.laptop__screen{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#fff}
.laptop__base{position:relative;display:block;height:clamp(10px,2.2vw,16px);margin:0 -6.5%;border-radius:2px 2px 18px 18px / 2px 2px 100% 100%;background:linear-gradient(#eceef2,#b9bcc4 70%,#8d9099);box-shadow:0 26px 34px -16px rgba(11,13,18,.45)}
.laptop__base::after{content:"";position:absolute;left:41%;right:41%;top:0;height:40%;border-radius:0 0 8px 8px;background:#a4a7b0}
.laptop__screen img,.phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .7s ease}
.laptop__screen img.is-on,.phone__screen img.is-on{opacity:1}
.phone{position:absolute;right:0;bottom:-2%;width:29%;display:block;padding:2.2%;border-radius:22% / 10.5%;background:linear-gradient(150deg,#3a3d46,#0d0f14 55%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 50px 70px -28px rgba(11,13,18,.6),0 20px 30px -20px rgba(42,91,255,.45);transform:translateZ(90px) rotateY(-8deg);animation:float 6s ease-in-out infinite}
.phone__screen{position:relative;display:block;aspect-ratio:390/844;overflow:hidden;border-radius:19% / 9%;background:#fff}
.phone__screen::before{content:"";position:absolute;z-index:2;top:2.2%;left:50%;width:30%;height:3.2%;transform:translateX(-50%);border-radius:99px;background:#0d0f14}
@keyframes float{0%,100%{transform:translateZ(90px) rotateY(-8deg) translateY(0)}50%{transform:translateZ(90px) rotateY(-8deg) translateY(-10px)}}
.chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink);
  background:rgba(255,255,255,.82);border:1px solid rgba(11,13,18,.08);box-shadow:0 14px 30px -16px rgba(11,13,18,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(42,91,255,.18)}
.chip i.ok{background:#14A35A;box-shadow:0 0 0 4px rgba(20,163,90,.18)}
.chip--a{left:-2%;bottom:10%;transform:translateZ(140px);animation:float2 7s ease-in-out infinite}
.chip--b{right:24%;top:-6%;transform:translateZ(60px)}
@keyframes float2{0%,100%{transform:translateZ(140px) translateY(0)}50%{transform:translateZ(140px) translateY(-8px)}}
.scene__cap{margin-top:18px;font-size:14px;color:var(--g-600);text-align:center}
.scene__cap a{color:var(--blue-deep);font-weight:600;text-decoration:none}
@media (max-width:959px){.scene{--rx:10deg;--ry:-12deg;margin:4px -4px 0}.chip{font-size:11px;padding:6px 10px}.chip--a{left:5%;bottom:4%}.chip--b{right:30%}}
@media (prefers-reduced-motion:reduce){.hero::after,.hero__glow,.phone,.chip--a{animation:none}.scene__tilt{transition:none}}

/* ---------- formularz „oddzwońcie” ---------- */
.cb{max-width:520px}
.cb__lab{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.cb__lab--opt{margin-top:14px}
.cb__lab span{font-weight:400;color:var(--g-500)}
.cb__row{display:flex;gap:8px}
.cb__in{width:100%;min-width:0;height:52px;padding:0 14px;border:1.5px solid var(--g-300);border-radius:10px;background:var(--white);color:var(--ink);font:500 17px/1 var(--body)}
.cb__in::placeholder{color:#9a9a94;font-weight:400}
.cb__in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,91,255,.18)}
.cb__in[aria-invalid="true"]{border-color:#C8322B}
.cb__btn{height:52px;width:100%;margin-top:14px}
.cb__ok{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;line-height:1.45;color:var(--g-600);cursor:pointer}
.cb__ok input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--blue)}
.cb__ok a{color:inherit}
.cb__ok.is-err{color:#C8322B}
.cb__msg{margin-top:10px;font-weight:600;font-size:15px}
.cb__msg:empty{display:none}
.cb__msg.is-ok{color:#14794A}
.cb__msg.is-err{color:#C8322B}
.cb__note{margin-top:8px;font-size:13px;color:var(--g-500)}
.cb.is-done .cb__row,.cb.is-done .cb__ok,.cb.is-done .cb__lab,.cb.is-done > .cb__in,.cb.is-done > .cb__btn,.cb.is-done .cb__note{display:none}

/* ---------- sekcje ---------- */
.sec{position:relative;isolation:isolate;padding:clamp(56px,7vw,112px) var(--m)}
.sec__head{display:grid;gap:10px;margin-bottom:30px;max-width:760px}
.sec__lead{color:var(--g-600);font-size:16px;max-width:38em}

/* przykłady — białe tło z siatką kropek; telefon: karuzela 3D (coverflow) przewijana palcem */
.strony{background:radial-gradient(rgba(11,13,18,.09) 1px,transparent 1.2px) 0 0/22px 22px,linear-gradient(#fff,var(--paper))}
.strony::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--paper),transparent 18%,transparent 80%,var(--paper))}
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:min(70%,300px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--m));padding:10px var(--m) 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;perspective:900px}
.cards::-webkit-scrollbar{display:none}
.card{scroll-snap-align:center;transform-style:preserve-3d}
.card a{position:relative;display:block;text-decoration:none;border-radius:14px;background:var(--white);border:1px solid var(--line);overflow:hidden;height:100%;
  box-shadow:0 1px 2px rgba(11,13,18,.05),0 22px 40px -26px rgba(11,13,18,.45);transform:rotateY(var(--cy,0deg)) scale(var(--cs,1));transition:transform .15s linear,box-shadow .3s}
.card a::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(42,91,255,.16),transparent 60%)}
.card a:hover::after{opacity:1}
.card img{aspect-ratio:16/10;width:100%;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.card__t{display:block;padding:12px 14px 0;font-weight:700;font-size:15px}
.card__d{display:block;padding:2px 14px 14px;font-size:13px;color:var(--g-500)}
.cards__dots{display:flex;justify-content:center;gap:6px;margin-top:-4px}
.cards__dots i{width:6px;height:6px;border-radius:99px;background:var(--g-300);transition:width .3s,background .3s}
.cards__dots i.is-on{width:20px;background:var(--blue)}
@media (min-width:960px){
  .cards{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0;perspective:1200px}
  .card a{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .25s ease,box-shadow .3s}
  .card a:hover{box-shadow:0 2px 4px rgba(11,13,18,.06),0 40px 60px -30px rgba(42,91,255,.45)}
  .cards__dots{display:none}
}
.strony__more{margin-top:18px;font-size:15px;color:var(--g-600)}

/* kreator — jasna sekcja z kolorową poświatą za telefonem */
.kreator{background:linear-gradient(180deg,var(--paper),#EEF1FB 60%,var(--paper));overflow:hidden;overflow:clip}
.kreator::before{content:"";position:absolute;z-index:-1;width:760px;height:760px;right:-200px;top:20%;border-radius:50%;
  background:conic-gradient(from 90deg,rgba(42,91,255,.28),rgba(123,92,255,.22),rgba(56,189,248,.22),rgba(42,91,255,.28));filter:blur(70px);opacity:.9}
.kreator__grid{display:grid;gap:28px;align-items:center}
@media (min-width:960px){.kreator__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.kr{display:grid;gap:16px;padding:20px;border-radius:18px;background:rgba(255,255,255,.8);border:1px solid rgba(11,13,18,.08);box-shadow:0 30px 60px -40px rgba(11,13,18,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kr__two{display:grid;gap:14px}
@media (min-width:520px){.kr__two{grid-template-columns:1fr 1fr}}
.kr__f{display:grid;gap:6px}
.kr__f span,.kr__set legend{font-weight:600;font-size:14px}
.kr__f input{height:46px;padding:0 12px;border:1.5px solid var(--g-300);border-radius:10px;background:#fff;font:500 16px/1 var(--body);color:var(--ink);min-width:0;width:100%}
.kr__f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,91,255,.18)}
.kr__set{border:0;margin:0;padding:0;min-width:0}
.kr__set legend{padding:0;margin-bottom:8px}
.kr__co{margin-top:10px}
.kr__co[hidden]{display:none}
.kr__chips{display:flex;flex-wrap:wrap;gap:8px}
.kr__chips label,.kr__seg label{position:relative;cursor:pointer}
.kr__chips input,.kr__seg input,.kr__sw input{position:absolute;opacity:0;width:1px;height:1px}
.kr__chips span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:99px;border:1.5px solid var(--g-300);background:#fff;font-size:14px;font-weight:500;transition:all .2s}
.kr__chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.kr__chips input:focus-visible+span,.kr__seg input:focus-visible+span,.kr__sw input:focus-visible+i{outline:2px solid var(--blue);outline-offset:2px}
.kr__sw{display:flex;gap:10px}
.kr__sw label{cursor:pointer;position:relative}
.kr__sw i{display:block;width:32px;height:32px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3.5px transparent;transition:box-shadow .2s}
.kr__sw input:checked+i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.kr__seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--g-200)}
.kr__seg span{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--g-600)}
.kr__seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,13,18,.15)}
.kr__cta{width:100%;min-height:52px;margin-top:4px}
.kr__note{font-size:13px;color:var(--g-500)}
.kr__note a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* telefon 3D w kreatorze — przeciągnij, żeby obrócić (pointer events w site.js) */
.kr__stage{--dy:0deg;position:relative;display:grid;justify-items:center;perspective:1300px;padding:10px 0 0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.kr__stage.is-drag{cursor:grabbing}
.kr__sway{transform-style:preserve-3d;animation:sway 9s ease-in-out infinite}
.kr__stage.is-drag .kr__sway,.kr__stage.is-touched .kr__sway{animation-play-state:paused}
@keyframes sway{0%,100%{transform:rotateY(-14deg) rotateX(6deg)}50%{transform:rotateY(10deg) rotateX(3deg)}}
.kr__phone{position:relative;width:min(290px,74vw);aspect-ratio:9/18.6;padding:11px;border-radius:46px;background:linear-gradient(150deg,#41444e,#0d0f14 50%,#22252d);transform:rotateY(var(--dy));transition:transform .5s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 60px 80px -40px rgba(11,13,18,.7),0 30px 60px -30px rgba(42,91,255,.55)}
.kr__stage.is-drag .kr__phone{transition:none}
.kr__phone::before{content:"";position:absolute;z-index:3;top:20px;left:50%;width:84px;height:22px;transform:translateX(-50%);border-radius:99px;background:#0d0f14}
.kr__phone::after{content:"";position:absolute;inset:11px;z-index:4;border-radius:36px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 32%,transparent 70%,rgba(255,255,255,.06))}
.kr__hint{margin-top:22px;font-size:13px;color:var(--g-500)}
@media (prefers-reduced-motion:reduce){.kr__sway{animation:none;transform:rotateY(-10deg) rotateX(4deg)}}

/* mini-strona w telefonie */
.ms{--k:#1F2933;--bg:#FAFAF7;--fg:#14161B;--mut:#5E6068;position:relative;height:100%;overflow:hidden;border-radius:36px;background:var(--bg);color:var(--fg);font-family:var(--body);transition:background .4s,color .4s}
.ms.is-dark{--bg:#0F1115;--fg:#F3F3EF;--mut:#A5A7AE}
.ms__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:46px 16px 10px}
.ms__logo{font:800 14px/1.1 var(--display);letter-spacing:-.02em;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms__call{flex:none;padding:6px 10px;border-radius:7px;background:var(--k);color:#fff;font-size:11px;font-weight:600;transition:background .4s}
.ms__img{position:relative;height:30%;margin:0 12px;border-radius:14px;overflow:hidden;background:var(--k)}
.ms__img img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.ms__ph{position:absolute;inset:0;display:none;place-items:center;font:800 54px/1 var(--display);color:rgba(255,255,255,.9);background:linear-gradient(135deg,var(--k),color-mix(in srgb,var(--k) 55%,#fff))}
.ms.is-inna .ms__ph{display:grid}
.ms.is-inna .ms__img img{opacity:0}
.ms__body{padding:14px 16px}
.ms__h{font:800 21px/1.08 var(--display);letter-spacing:-.025em}
.ms__p{margin-top:8px;font-size:12px;line-height:1.45;color:var(--mut)}
.ms__btn{display:block;margin-top:10px;padding:10px;border-radius:9px;background:var(--k);color:#fff;text-align:center;font-size:12px;font-weight:600;transition:background .4s}
.ms__btn--o{margin-top:7px;background:transparent;color:var(--fg);border:1.5px solid currentColor}
.ms__list{margin-top:12px;display:grid;gap:6px}
.ms__list li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.ms__list li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--k);transition:background .4s}

/* proces — jasna sekcja, oś 7 dni jak harmonogram (bez kart, bez poświat) */
.proc{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gantt{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:8px;padding-bottom:4px;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(100% / 7) 100%;border-right:1px solid var(--line)}
.gantt__d{padding:0 0 10px 8px;font-size:12px;font-weight:600;color:var(--g-500);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{display:flex;align-items:center;gap:8px;height:40px;margin:0 4px;padding:0 10px;border-radius:8px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden}
.bar b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font-size:12px}
.bar em{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.bar--1{grid-column:1/2;grid-row:2;background:var(--ink);color:#fff}
.bar--1 b{background:#fff;color:var(--ink)}
.bar--2{grid-column:2/7;grid-row:2;background:var(--blue-soft);color:var(--blue-deep);box-shadow:inset 0 0 0 1px rgba(42,91,255,.25)}
.bar--2 b{background:var(--blue);color:#fff}
.bar--3{grid-column:7/8;grid-row:2;background:var(--blue);color:#fff}
.bar--3 b{background:#fff;color:var(--blue-deep)}
@media (max-width:759px){.gantt__w{display:none}.bar--1 em,.bar--3 em{display:none}.bar--1,.bar--3{justify-content:center;padding:0}.gantt__d{padding-left:6px}}
.steps{display:grid;gap:22px;margin-top:34px}
.step{padding-top:16px;border-top:3px solid var(--ink)}
.step--2{border-top-color:#9DB4FF}
.step--3{border-top-color:var(--blue)}
.step__d{font-size:13px;font-weight:600;color:var(--g-500);margin-bottom:6px}
.step p:last-child{margin-top:6px;font-size:15px;color:var(--g-600)}
@media (min-width:960px){.steps{grid-template-columns:repeat(3,1fr);gap:32px}}
.proc__note{margin-top:24px;font-size:14px;color:var(--g-500)}

/* cennik — trzy jednakowe karty; polecany pakiet wyróżnia tylko grubsza czarna ramka */
.cena{background:var(--paper)}
.plans{display:grid;gap:14px}
.plan{display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff}
.plan--hot{border:2px solid var(--ink);padding:23px}
.plan__n{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--g-600);font-family:var(--body);font-weight:600;letter-spacing:0}
.plan__tag{padding:2px 8px;border-radius:6px;background:var(--ink);color:#fff;font-size:12px;font-weight:600}
.plan__p{font:800 38px/1.1 var(--display);letter-spacing:-.03em;margin-top:6px}
.plan__d{font-size:14px;color:var(--g-600);margin-top:2px}
.plan ul{margin:16px 0 20px;display:grid;gap:8px;font-size:15px}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.plan__btn{margin-top:auto;width:100%}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--g-300)}
.btn--line:hover{background:var(--ink);color:#fff;box-shadow:none}
@media (min-width:960px){.plans{grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}}
.cena__after{margin-top:22px;font-size:15px;color:var(--g-600)}
.cena__legal{margin-top:12px;font-size:12px;color:var(--g-500);max-width:60em}

/* pytania */
.faq{background:radial-gradient(rgba(11,13,18,.07) 1px,transparent 1.2px) 0 0/22px 22px,var(--paper)}
.faq__list{max-width:820px;border-radius:18px;background:#fff;border:1px solid var(--line);padding:4px 20px;box-shadow:0 24px 50px -40px rgba(11,13,18,.35)}
.faq details+details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;position:relative;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;width:28px;height:28px;display:grid;place-items:center;transform:translateY(-50%);border-radius:50%;background:var(--blue-soft);color:var(--blue-deep);font:500 18px/1 var(--body);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--g-600);font-size:15px;max-width:44em}

/* kontakt — ciemna sekcja, bez poświat */
.kontakt{background:#0B0D12;color:var(--paper);overflow:hidden;overflow:clip}
.kontakt h2{max-width:16ch}
.kontakt .sec__lead{color:#B9B9B3;margin-top:12px}
.kontakt .cb{margin-top:24px}
.cb--dark .cb__in{background:#16181E;border-color:#3A3C44;color:var(--paper)}
.cb--dark .cb__ok,.cb--dark .cb__lab span{color:#B9B9B3}
.cb--dark .cb__msg.is-ok{color:#5FD69B}
.cb--dark .cb__msg.is-err,.cb--dark .cb__ok.is-err{color:#FF7B73}
.kontakt__mail{margin-top:22px;color:#B9B9B3;font-size:15px}

/* stopka */
.foot{background:#0B0D12;color:#B9B9B3;padding:32px var(--m) 28px;border-top:1px solid #1E2027;font-size:14px}
.foot__row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-start}
.foot__logo{height:20px;width:auto}
.foot a{color:inherit}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.foot__links a{text-decoration:none}
.foot__links a:hover{color:var(--paper)}
.foot__meta{margin-top:22px;font-size:12px;color:#7d7d78}

/* przyklejony pasek (tylko telefon) */
.dock{position:fixed;left:0;right:0;bottom:var(--ck-h);z-index:45;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--m) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(11,13,18,.3);transform:translateY(0);transition:transform .25s}
.dock[hidden]{display:flex;transform:translateY(130%);visibility:hidden}
.dock__txt{font-size:14px;color:var(--g-600);line-height:1.25;min-width:0}
.dock .btn{white-space:nowrap;flex:none}
.dock__txt b{color:var(--ink)}
@media (min-width:960px){.dock{display:none!important}}

/* okienko z formularzem — na telefonie wysuwane od dołu */
.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:520px;border-radius:18px 18px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -12px 40px rgba(0,0,0,.25)}
.sheet::backdrop{background:rgba(11,13,18,.5)}
.sheet .cb{position:relative;padding:22px var(--m) calc(22px + env(safe-area-inset-bottom));max-width:none}
.sheet__h{font:800 22px/1.15 var(--display);letter-spacing:-.02em;margin:0 40px 16px 0}
.sheet__x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;font-size:26px;line-height:1;color:var(--g-600)}
.sheet__x:hover{background:var(--g-200)}
@media (min-width:600px){.sheet{margin:auto;border-radius:18px}.sheet .cb{padding:28px}}

/* cookies — wąski pasek na dole, nie zasłania pierwszego ekranu */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:46;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;justify-content:space-between;padding:10px var(--m) calc(10px + env(safe-area-inset-bottom));background:var(--ink);color:#D6D6D0;font-size:13px;line-height:1.35}
.cookies[hidden]{display:none}
.cookies p{flex:1 1 220px}
.cookies a{color:#fff}
.cookies__btns{display:flex;gap:8px}
.cookies__btns button{min-height:36px;padding:0 14px;border-radius:8px;font-weight:600;font-size:13px;border:1px solid #4A4C54;color:#fff}
#cookies-ok{background:#fff;color:var(--ink);border-color:#fff}
@media (max-width:959px){.cookies{flex-wrap:nowrap}.cookies p{flex:1 1 auto}.cookies__btns{flex:none}}
@media (max-width:359px){.cookies{flex-wrap:wrap}}
@media (min-width:960px){.cookies{left:auto;right:20px;bottom:20px;max-width:480px;padding:14px 16px;border-radius:12px}}