/* Wspólne style strony głównej i podstron (realizacje, automatyzacje, cennik, sprawdz).
   Źródło: ten plik. Strony HTML składa scripts/strony.mjs. */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/onest-min.woff2') format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/onest-pl.woff2') format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600 700;font-display:swap;src:url('/fonts/caveat-min.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600 700;font-display:swap;src:url('/fonts/caveat-pl.woff2') format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
:root{
  --bg:#FFFFFF;
  --soft:#F6F6F3;
  --ink:#17191E;
  --ink-2:#4F535C;
  --ink-3:#676C75;
  --line:#E7E6E1;
  --green:#1f7a4d;
  --green-2:#17603c;
  --green-soft:#eaf5ef;
  --mark:#FFE7A0;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(18px,3.2vw,32px)}
mark{background:linear-gradient(transparent 58%,var(--mark) 58%);color:inherit;padding:0 .08em}

.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  font-weight:600;font-size:16px;padding:13px 22px;border-radius:10px;
  background:var(--green);color:#fff;border:1px solid var(--green);transition:background .15s ease;
}
.btn:hover{background:var(--green-2);border-color:var(--green-2)}
.btn.line{background:#fff;color:var(--ink);border-color:#CFCEC7}
.btn.line:hover{border-color:var(--ink)}
.btn.sm{font-size:14.5px;padding:9px 16px}

/* ---------- menu ---------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:26px;height:64px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.logo img{width:36px;height:36px;flex:none}
.logo .lw{display:flex;flex-direction:column;line-height:1}
.logo .lw b{font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.logo .lw small{font-weight:500;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);margin-top:4px;padding-left:1px}
header nav{display:flex;gap:24px;font-size:15px;color:var(--ink-2)}
header nav a{text-decoration:none;white-space:nowrap}
header nav a:hover{color:var(--ink)}
.hmenu{display:flex;align-items:center;gap:26px;margin-left:auto}
.hacts{display:flex;gap:8px}
.hacts .btn{flex:none}
.menu-btn{display:none}
@media(max-width:1040px){header nav{gap:16px;font-size:14.5px}.hmenu{gap:18px}}
@media(max-width:880px){
  header .wrap{height:60px}
  .menu-btn{display:grid;place-items:center;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;padding:0}
  .menu-btn svg{width:24px;height:24px}
  .menu-btn .mb-x,.menu-btn[aria-expanded="true"] .mb-o{display:none}
  .menu-btn[aria-expanded="true"] .mb-x{display:block}
  .hmenu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(20,22,28,.12);padding:6px clamp(18px,3.2vw,32px) 18px}
  .hmenu.open{display:flex}
  header nav{flex-direction:column;gap:0;font-size:17px}
  header nav a{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  header nav a::after{display:none}
  .hacts{flex-direction:column;gap:10px;margin-top:16px}
  .hacts .btn{justify-content:center;font-size:16px;padding:12px 18px}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(36px,5vw,64px) clamp(40px,5vw,70px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(32px,4.4vw,54px)}
.hero .lead{margin-top:20px;font-size:clamp(17px,1.4vw,19px);color:var(--ink-2);max-width:40ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .small{margin-top:16px;font-size:14.5px;color:var(--ink-3)}

/* makieta: laptop z telefonem */
.devices{position:relative;padding-right:12%;padding-bottom:4%}
.laptop{position:relative}
.laptop .screen{background:#1A1B1F;border-radius:14px 14px 0 0;padding:2.2% 2.2% 0;box-shadow:0 18px 50px rgba(20,22,28,.18)}
.laptop .screen img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:4px 4px 0 0}
.laptop .base{height:14px;background:linear-gradient(#D9D9DC,#BFC0C4);border-radius:0 0 12px 12px;margin-inline:-4%;position:relative}
.laptop .base::after{content:"";position:absolute;left:50%;top:0;width:16%;height:5px;background:#A9AAAE;border-radius:0 0 6px 6px;transform:translateX(-50%)}
.phone{
  position:absolute;right:0;bottom:0;width:24%;background:#1A1B1F;border-radius:22px;padding:2.6% 1.6%;
  box-shadow:0 18px 44px rgba(20,22,28,.28);
}
.phone img{width:100%;aspect-ratio:1/2;object-fit:cover;object-position:top center;border-radius:14px}
/* telefon przy realizacji: gdy projekt wjedzie na ekran, strona sama sie przewija */
.phone .pscr{position:relative;aspect-ratio:1/2;overflow:hidden;border-radius:14px;background:#fff}
.phone .pscr img{width:100%;height:auto;aspect-ratio:auto;border-radius:0;transform:translateY(0);transition:transform 8s cubic-bezier(.45,0,.3,1)}
.phone .pscr.go img{transform:translateY(-58%)}
.devices{transition:transform .4s ease}
.case:hover .devices{transform:translateY(-4px)}
@media (prefers-reduced-motion: reduce){.phone .pscr.go img{transform:none}}
.phone::before{content:"";position:absolute;top:1.4%;left:50%;width:26%;height:1.6%;background:#1A1B1F;border-radius:6px;transform:translateX(-50%);z-index:2}

/* hero: trzy telefony, kazdy sam przewija strone i co chwile
   przechodzi na kolejna realizacje */
.trio{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,1.6vw,20px);padding-block:8px 4px}
.phwrap{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}
.phwrap.mid{width:clamp(150px,15.5vw,210px);z-index:2}
.phwrap.left,.phwrap.right{width:clamp(126px,13vw,176px);margin-bottom:28px}
.phwrap.left{animation:float 7s ease-in-out infinite;--r:-4deg}
.phwrap.mid{animation:float 7s ease-in-out -2.3s infinite;--r:0deg}
.phwrap.right{animation:float 7s ease-in-out -4.6s infinite;--r:4deg}
@keyframes float{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(var(--r)) translateY(-9px)}}
.ph{
  width:100%;background:#1A1B1F;border-radius:26px;padding:8px;
  box-shadow:0 20px 46px rgba(20,22,28,.22);position:relative;
}
.ph::before{content:"";position:absolute;top:13px;left:50%;width:26%;height:9px;background:#1A1B1F;border-radius:6px;transform:translateX(-50%);z-index:3}
.ph .scr{position:relative;width:100%;aspect-ratio:1/2;overflow:hidden;border-radius:19px;background:#fff}
.ph .sl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.ph .sl.on{opacity:1}
.ph .sl img{width:100%;height:auto;transform:translateY(0);will-change:transform}
.lbl{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:opacity .5s ease;min-height:1.4em}
.lbl.fade{opacity:0}
@media(max-width:520px){
  .trio{gap:8px}
  .ph{padding:6px;border-radius:20px}
  .ph .scr{border-radius:15px}
  .phwrap.left,.phwrap.right{width:26vw}
  .phwrap.mid{width:31vw}
  .lbl{font-size:10.5px}
}
@media (prefers-reduced-motion: reduce){.phwrap{animation:none!important;transform:rotate(var(--r))}}

/* scena pod telefonami: miekka plama, kropki, notatka i powiadomienia */
.stage{position:relative;padding:18px 0 6px}
.stage::before{
  content:"";position:absolute;inset:-4% -2% 4%;z-index:0;pointer-events:none;
  background-image:radial-gradient(#C9DDD2 1.3px,transparent 1.4px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 72%);
}
.blob{
  position:absolute;left:50%;top:48%;width:78%;aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:0;
  background:radial-gradient(circle at 35% 30%,#DCEFE5 0%,#E9F3EE 55%,rgba(233,243,238,0) 72%);
  border-radius:43% 57% 52% 48% / 46% 42% 58% 54%;animation:morph 14s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{border-radius:43% 57% 52% 48% / 46% 42% 58% 54%}
  50%{border-radius:56% 44% 45% 55% / 55% 57% 43% 45%}
}
.trio{position:relative;z-index:1}
.note-hand{
  position:absolute;z-index:2;left:-2%;top:-6px;font-family:"Caveat",cursive;font-weight:700;
  font-size:23px;line-height:1;color:var(--green);transform:rotate(-5deg);white-space:nowrap;
}
.note-hand svg{display:block;width:62px;height:42px;margin:4px 0 0 96px}
.pops{position:absolute;inset:0;z-index:3;pointer-events:none}
.pop{
  position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;
  padding:9px 14px 9px 10px;box-shadow:0 12px 30px rgba(20,22,28,.16);border:1px solid var(--line);
  opacity:0;transform:translateY(10px) scale(.96);transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.2,.4,1);
  max-width:230px;
}
.pop.show{opacity:1;transform:none}
.pop .i{width:30px;height:30px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:none}
.pop .i svg{width:16px;height:16px}
.pop b{display:block;font-size:13.5px;line-height:1.25}
.pop small{display:block;font-size:12px;color:var(--ink-3);line-height:1.3}
.pop.p1{left:-4%;top:40%}
.pop.p2{right:-3%;bottom:16%}
@media(max-width:1100px){.note-hand{display:none}}
@media(max-width:520px){.pop{max-width:190px;padding:7px 10px 7px 8px}.pop b{font-size:12px}.pop small{font-size:11px}.pop.p1{left:0;top:30%}.pop.p2{right:0;bottom:14%}}
@media (prefers-reduced-motion: reduce){.blob{animation:none}}

/* ---------- lista klientow ---------- */
.clients{border-block:1px solid var(--line);background:var(--soft)}
.clients .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 34px;padding-block:20px}
.clients p{font-size:14.5px;color:var(--ink-3);margin-right:6px}
.clients span{font-weight:700;font-size:16.5px;color:var(--ink-2);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:34px}
.clients span + span::before{content:"";width:5px;height:5px;border-radius:50%;background:#C9DDD2;margin-left:-20px;margin-right:-14px}

/* ---------- sekcje ---------- */
section{padding-block:clamp(56px,7vw,96px)}
.head{max-width:640px;margin-bottom:clamp(32px,4vw,52px)}
.head h2{font-size:clamp(27px,3.2vw,40px)}
.head p{margin-top:14px;color:var(--ink-2);font-size:18px}

/* ---------- realizacje ---------- */
.case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center}
.case + .case{margin-top:clamp(56px,7vw,100px)}
.case.flip .devices{order:2}
@media(max-width:940px){.case{grid-template-columns:1fr}.case.flip .devices{order:0}}
.case .who{font-size:15px;color:var(--ink-3)}
.case h3{font-size:clamp(24px,2.6vw,32px);margin-top:6px}
.case .what{margin-top:16px;color:var(--ink-2)}
.case .gain{margin-top:18px;padding:16px 18px;background:var(--green-soft);border-radius:12px;font-size:16px;color:#1F3B30}
.case .gain b{display:block;font-size:13.5px;font-weight:600;color:var(--green);margin-bottom:3px}
.case .soon{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:600;color:#8A5A00;background:#FFF1CC;border-radius:99px;padding:4px 12px}
.case .addr{margin-top:14px;font-size:15px;color:var(--ink-3)}
.case .visit{display:inline-block;margin-top:20px;font-weight:600;color:var(--green);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.case .visit:hover{color:var(--green-2)}

/* ---------- wiecej niz strona ---------- */
.more{background:var(--soft);border-block:1px solid var(--line)}
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,30px)}
@media(max-width:900px){.apps{grid-template-columns:1fr}}
.app{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease}
.app:hover{box-shadow:0 18px 44px rgba(20,22,28,.10);transform:translateY(-3px)}
.app-shot{padding:18px 18px 0;background:linear-gradient(180deg,var(--green-soft),#fff)}
.app-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:10px 10px 0 0;
  box-shadow:0 -1px 0 var(--line),0 10px 30px rgba(20,22,28,.12);border:1px solid var(--line);border-bottom:0}
.app-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;border-top:1px solid var(--line)}
.app-kind{font-size:14.5px;color:var(--green);font-weight:600}
.app h3{font-size:clamp(22px,2.2vw,27px);margin-top:4px}
.app-desc{margin-top:12px;color:var(--ink-2);font-size:16px}
.feat{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px dashed #D8DDD9;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
@media(max-width:520px){.feat{grid-template-columns:1fr}}
.feat li{position:relative;padding-left:18px;font-size:14.5px;color:var(--ink);line-height:1.4}
.feat li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;background:var(--green-soft);box-shadow:inset 0 0 0 2px var(--green)}
.app-use{margin-top:16px;font-size:14.5px;color:var(--ink-3)}
.app-link{margin-top:auto;padding-top:18px;align-self:flex-start;font-weight:600;color:var(--green);text-decoration:none;border-bottom:2px solid currentColor}
.app-link:hover{color:var(--green-2)}

/* ---------- co dostajesz ---------- */
.gets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px) clamp(24px,3vw,48px)}
@media(max-width:880px){.gets{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gets{grid-template-columns:1fr}}
.gets h3{font-size:19px}
.gets p{margin-top:8px;color:var(--ink-2);font-size:16px}
.gets div{border-top:2px solid var(--ink);padding-top:18px}
.gets .gic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--green-soft);color:var(--green);margin-bottom:14px}
.gets .gic svg{width:22px;height:22px}

/* ---------- pakiety ---------- */
.price{background:var(--soft);border-block:1px solid var(--line)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px 26px;display:flex;flex-direction:column}
.plan.best{border:2px solid var(--green);position:relative}
.plan.best .tag{position:absolute;top:-13px;left:22px;background:var(--green);color:#fff;font-size:13px;font-weight:600;padding:3px 12px;border-radius:99px}
.plan h3{font-size:22px}
.plan .for{margin-top:6px;color:var(--ink-3);font-size:15px}
.plan ul{margin:18px 0 0;padding-left:20px;display:grid;gap:7px;color:var(--ink-2);font-size:16px}
.plan .time{margin-top:auto;padding-top:20px;font-size:15px;color:var(--ink-2)}
.plan .time b{color:var(--ink)}
.plan .btn{margin-top:16px;justify-content:center}
.price .note{margin-top:22px;font-size:15.5px;color:var(--ink-2);max-width:720px}
.plan h3,.plan h4{font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:0;text-wrap:balance}

/* dwie drogi: abonament i na zamówienie */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:clamp(40px,5vw,60px)}
@media(max-width:700px){.ways{grid-template-columns:1fr}}
.way{display:grid;gap:4px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-color .15s ease}
.way:hover{border-color:var(--green)}
.way b{font-size:18px;letter-spacing:-.01em}
.way .way-p{font-weight:700;color:var(--green);font-size:15.5px}
.way span{font-size:15.5px;color:var(--ink-2);line-height:1.45}
.path{scroll-margin-top:84px}
.path + .path{margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.path-head{max-width:640px;margin-bottom:24px}
.path-head h2,.path-head h3{font-size:clamp(23px,2.4vw,30px)}
.path-head p{margin-top:10px;color:var(--ink-2)}
.subs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:900px){.subs{grid-template-columns:1fr}}
.sub{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;display:flex;flex-direction:column}
.sub.main{border:2px solid var(--green);position:relative}
.sub .tag{position:absolute;top:-13px;left:22px;background:var(--green);color:#fff;font-size:13px;font-weight:600;padding:3px 12px;border-radius:99px}
.sub h3,.sub h4{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0}
.sub-pr{margin-top:8px;font-size:15px;color:var(--ink-2)}
.sub-pr b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-right:4px}
.sub .for{margin-top:4px;color:var(--ink-3);font-size:15px}
.sub ul{margin:16px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2);font-size:15.5px}
.sub-all{margin-top:18px;font-size:15.5px;color:var(--ink-2);max-width:760px}
.tpl{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.tpl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.tpl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.tpl a{display:block;text-decoration:none;border-radius:12px}
.tpl img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top center;border-radius:10px;border:1px solid var(--line);background:#fff;transition:transform .2s ease,box-shadow .2s ease}
.tpl a:hover img{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,22,28,.12)}
.tpl b{display:block;margin-top:8px;font-size:15px;line-height:1.3}
.tpl small{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.35}
.sub-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.club-line{margin-top:18px;font-size:15.5px;color:var(--ink-2)}
.club-line a{color:var(--green);font-weight:600}
@media(max-width:520px){.hero{overflow-x:clip}}
@media(max-width:360px){.check-form{flex-wrap:wrap}.check-form .btn{width:100%;justify-content:center}.mbar.mbar{padding-inline:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mbar.mbar .btn{font-size:14px;padding-inline:6px}}

/* ---------- jak to wyglada ---------- */
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);counter-reset:k;position:relative}
.how::before{content:"";position:absolute;left:19px;right:12%;top:19px;border-top:2px dashed #C9DDD2;z-index:0}
@media(max-width:900px){.how::before{display:none}}
.how div{position:relative;z-index:1}
@media(max-width:900px){.how{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.how{grid-template-columns:1fr}}
.how div{counter-increment:k}
.how div::before{content:counter(k);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:800;font-size:17px;margin-bottom:14px}
.how h3{font-size:18px}
.how p{margin-top:8px;font-size:16px;color:var(--ink-2)}

/* ---------- kto ---------- */
.who-box{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,36px);align-items:start;max-width:880px}
@media(max-width:600px){.who-box{grid-template-columns:1fr}}
.avatar{width:96px;height:96px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:32px;letter-spacing:-.02em}
.who-box h2{font-size:clamp(24px,2.6vw,32px)}
.who-box p{margin-top:14px;color:var(--ink-2);font-size:18px;max-width:60ch}

/* ---------- pytania ---------- */
.faq{max-width:820px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;font-size:18px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;color:var(--green);transition:transform .2s ease}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 0 22px;color:var(--ink-2);max-width:68ch}

/* ---------- kontakt ---------- */
.contact{background:var(--ink);color:#fff}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:880px){.contact .wrap{grid-template-columns:1fr}}
.contact h2{font-size:clamp(28px,3.4vw,44px)}
.contact p{margin-top:16px;color:rgba(255,255,255,.75);font-size:18px;max-width:46ch}
.hand-note{margin-top:26px!important;font-family:"Caveat",cursive;font-weight:700;font-size:25px;color:#8FD3B6!important;display:flex;align-items:center;gap:10px;transform:rotate(-2deg)}
.hand-note svg{width:96px;height:36px;flex:none}
@media(max-width:880px){.hand-note svg{transform:rotate(80deg);width:60px}}
.write{background:#fff;color:var(--ink);border-radius:16px;padding:28px 26px}
.write .l{font-size:15px;color:var(--ink-3)}
.write .m{display:block;margin-top:6px;font-weight:800;font-size:clamp(18px,2vw,23px);letter-spacing:-.02em;text-decoration:none;word-break:break-all}
.write .m:hover{color:var(--green)}
.write ol{margin:18px 0 0;padding-left:20px;color:var(--ink-2);font-size:16px;display:grid;gap:5px}
.write .btn{margin-top:22px;width:100%;justify-content:center}

.mbar{display:none}
@media(max-width:700px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s ease}
  .mbar.show{transform:none}
  .mbar .btn{justify-content:center;padding:11px 10px;font-size:15px}
  footer{padding-bottom:90px!important}
}
footer{border-top:1px solid var(--line);padding-block:26px 34px;font-size:14.5px;color:var(--ink-3)}
.flogo{display:inline-flex;align-items:center;gap:9px}
.flogo img{width:22px;height:22px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
footer .fdocs{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px}
footer .fdocs a{text-decoration:none}
footer .fdocs a:hover{color:var(--green)}
footer .legal{flex-basis:100%;margin-top:4px;font-size:13.5px;line-height:1.55}
footer .legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
footer .legal a:hover{color:var(--green)}

:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- ozdobniki i nowe sekcje ---------- */
.branze{overflow:hidden;border-bottom:1px solid var(--line);padding-block:14px;background:#fff}
.branze .tape{display:flex;width:max-content;animation:tape 42s linear infinite}
.branze ul{display:flex;list-style:none;margin:0;padding:0}
.branze li{font-family:"Caveat",cursive;font-weight:700;font-size:25px;color:var(--green);padding-inline:22px;white-space:nowrap;display:flex;align-items:center;gap:22px}
.branze li::after{content:"";width:6px;height:6px;border-radius:50%;background:#C9DDD2;margin-left:22px}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.branze:hover .tape{animation-play-state:paused}

.hl{position:relative;white-space:nowrap;display:inline-block}
.hl .scr{position:absolute;left:-2%;bottom:-.28em;width:104%;height:.42em;overflow:visible}
.hl .scr path{fill:none;stroke:#F2C94C;stroke-width:4;stroke-linecap:round}
.hl .scr path + path{stroke-width:2.6;opacity:.75}

.ba{margin:clamp(40px,6vw,70px) 0 0;display:grid;gap:14px}
.ba-cap{font-size:16px;color:var(--ink-2);max-width:62ch}
.ba-hand{font-family:"Caveat",cursive;font-weight:700;font-size:26px;color:var(--green);margin-right:8px;display:inline-block;transform:rotate(-3deg)}
.ba-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 44px rgba(20,22,28,.12);--p:50%;aspect-ratio:16/10;background:#fff;user-select:none}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.ba-old{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.ba-line i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.ba-line i::before,.ba-line i::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;margin-top:-6px}
.ba-line i::before{left:5px;border-right-color:#fff}
.ba-line i::after{right:5px;border-left-color:#fff}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-range:focus-visible + *{outline:none}
.ba-frame:focus-within{outline:2px solid var(--green);outline-offset:3px}
.ba-tag{position:absolute;top:14px;font-size:13px;font-weight:700;padding:5px 11px;border-radius:99px;background:rgba(23,25,30,.78);color:#fff;pointer-events:none}
.ba-tag.l{left:14px}
.ba-tag.r{right:14px;background:var(--green)}
.ba-src{font-size:13px;color:var(--ink-3)}

.fromblog{border-top:1px solid var(--line)}
.fb-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;max-width:none}
.fb-head h2{grid-column:1}
.fb-head p{grid-column:1;margin-top:8px}
.fb-all{grid-column:2;grid-row:1 / span 2;align-self:end;font-weight:600;color:var(--green);text-decoration:none;border-bottom:2px solid currentColor;white-space:nowrap}
@media(max-width:640px){.fb-head{grid-template-columns:1fr}.fb-all{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}
.fb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.fb-cards{grid-template-columns:1fr}}
.fb-cards .card{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;transition:box-shadow .2s ease,transform .2s ease}
.fb-cards .card:hover{box-shadow:0 14px 34px rgba(20,22,28,.09);transform:translateY(-3px)}
.fb-cards .cat{align-self:flex-start;font-size:13px;font-weight:600;color:var(--green);background:var(--green-soft);border-radius:99px;padding:3px 11px}
.fb-cards h3{font-size:19px;line-height:1.3}
.fb-cards p{font-size:15px;color:var(--ink-2)}
.fb-cards .more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--green)}

.wave{line-height:0;margin-top:-1px;margin-bottom:-2px;position:relative;z-index:1}
.wave svg{display:block;width:100%;height:clamp(28px,4vw,60px)}
.wave path{fill:var(--ink)}
.flinks a{text-decoration:none}
.flinks a:hover{color:var(--green)}
@media (prefers-reduced-motion: reduce){.branze .tape{animation:none}}

/* ---------- bajery ---------- */
header{position:sticky}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(0)}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--green);background:var(--green-soft);border-radius:99px;padding:5px 12px;white-space:nowrap}
.avail i{width:8px;height:8px;border-radius:50%;background:#2FB27A;position:relative}
.avail i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #2FB27A;opacity:0;animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@media(max-width:1100px){.avail{display:none}}

.rot{white-space:nowrap}
/* zmieniające się słowo zawsze w osobnej, jednej linii: nagłówek nie skacze */
.rot-line{display:block;white-space:nowrap}
.hero-grid > div:first-child{min-width:0}
#rot::after{content:"";display:inline-block;width:3px;height:.8em;margin-left:3px;background:var(--green);vertical-align:-.05em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.clients .cl{font-weight:700;font-size:16.5px;color:var(--ink-2);letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:center;gap:34px;transition:color .15s ease}
.clients .cl:hover{color:var(--green)}
.clients .cl + .cl::before{content:"";width:5px;height:5px;border-radius:50%;background:#C9DDD2;margin-left:-20px;margin-right:-14px}
.peek{position:fixed;z-index:80;left:0;top:0;width:300px;pointer-events:none;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 20px 50px rgba(20,22,28,.25);border:1px solid var(--line);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .18s ease,transform .18s ease}
.peek.on{opacity:1;transform:none}
.peek img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
@media (hover:none){.peek{display:none}}

.case{perspective:1400px}
.case .devices{transform-style:preserve-3d;will-change:transform}

.how::before{transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.3,.7,.2,1)}
.how.drawn::before{transform:scaleX(1)}
.how div::before{transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .3s ease,color .3s ease}
.how.drawn div::before{background:var(--green);color:#fff}
.how.drawn div:nth-child(1)::before{transition-delay:.1s}
.how.drawn div:nth-child(2)::before{transition-delay:.5s}
.how.drawn div:nth-child(3)::before{transition-delay:.9s}
.how.drawn div:nth-child(4)::before{transition-delay:1.3s}
.how div:hover::before{transform:scale(1.15) rotate(-6deg)}

.gets div:hover .gic{animation:wiggle .5s ease}
.gets .gic{transition:background .2s ease,color .2s ease}
.gets div:hover .gic{background:var(--green);color:#fff}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg) scale(1.08)}}

.btn.mag{transition:background .15s ease,transform .25s cubic-bezier(.3,1.4,.5,1)}

.who-av{position:relative;width:96px}
.who-hand{position:absolute;left:78px;top:-30px;display:flex;align-items:flex-start;gap:2px;font-family:"Caveat",cursive;font-weight:700;font-size:24px;color:var(--green);transform:rotate(-6deg);white-space:nowrap}
.who-hand svg{width:40px;height:34px;margin-top:10px;transform:scaleX(-1) rotate(20deg)}
@media(max-width:600px){.who-hand{left:108px;top:24px}}

.copy{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font:inherit;font-size:14px;font-weight:600;color:var(--green);background:var(--green-soft);border:0;border-radius:8px;padding:7px 12px;cursor:pointer}
.copy:hover{background:#DDEEE5}
.copy svg{width:16px;height:16px}
.write .live{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:14.5px;color:var(--ink-2);max-width:none}
.live i{width:9px;height:9px;border-radius:50%;background:#2FB27A;flex:none;position:relative}
.live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #2FB27A;opacity:0;animation:ping 2s ease-out infinite}
.live.off i{background:#E0A23B}
.live.off i::after{border-color:#E0A23B}
.toast{position:fixed;left:50%;bottom:28px;z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;font-size:15px;font-weight:600;padding:11px 18px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:opacity .2s ease,transform .2s ease}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.toast{bottom:86px}}

@media (prefers-reduced-motion: reduce){
  #rot::after,.avail i::after,.live i::after{animation:none}
  .how::before{transform:scaleX(1)}
}

/* ---------- bajery 3 ---------- */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.check{border-top:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--green-soft))}
.check-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:900px){.check-grid{grid-template-columns:1fr}}
.check-hand{display:inline-block;font-family:"Caveat",cursive;font-weight:700;font-size:25px;color:var(--green);transform:rotate(-3deg)}
.check h2{font-size:clamp(27px,3.2vw,40px);margin-top:4px}
.check p{margin-top:14px;color:var(--ink-2);max-width:52ch}
.check-form{display:flex;gap:10px;margin-top:22px;max-width:520px}
.check-form input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 16px;border:1.5px solid #CFCEC7;border-radius:10px;background:#fff;color:var(--ink)}
.check-form input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(30,107,82,.14)}
.check-err{color:#B4461F!important;font-size:14.5px;margin-top:8px!important}
.check-out{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;min-height:260px;box-shadow:0 18px 44px rgba(20,22,28,.08)}
.check-empty{height:100%;min-height:214px;display:grid;place-items:center;align-content:center;gap:10px;color:var(--ink-3);text-align:center}
.check-empty svg{width:40px;height:40px}
.check-empty p{margin:0!important;color:var(--ink-3)!important}
.check-dom{font-weight:700;font-size:15px;color:var(--ink-3);margin-bottom:12px}
.check-dom b{color:var(--ink)}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check-list a{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;text-decoration:none;padding:12px 14px;border:1px solid var(--line);border-radius:12px;transition:border-color .15s ease,transform .15s ease,background .15s ease;opacity:0;transform:translateY(8px);animation:ck .4s ease forwards}
.check-list li:nth-child(2) a{animation-delay:.08s}.check-list li:nth-child(3) a{animation-delay:.16s}.check-list li:nth-child(4) a{animation-delay:.24s}
@keyframes ck{to{opacity:1;transform:none}}
.check-list a:hover{border-color:var(--green);background:var(--green-soft)}
.check-list .ci{width:40px;height:40px;border-radius:10px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
.check-list .ci svg{width:20px;height:20px}
.check-list b{display:block;font-size:15.5px}
.check-list small{display:block;font-size:13px;color:var(--ink-3);line-height:1.35}
.check-list .go{color:var(--green);font-weight:700}
.check-cta{display:block;line-height:1.6;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:14.5px;color:var(--ink-2)}
.check-cta a{font-weight:600;color:var(--green)}

.quiz{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:26px;display:grid;gap:10px}
.quiz-t{font-weight:700;font-size:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.quiz-hand{font-family:"Caveat",cursive;font-size:24px;color:var(--green);font-weight:700;transform:rotate(-2deg);display:inline-block}
.quiz-q{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px dashed var(--line);font-size:15.5px;color:var(--ink-2)}
.quiz-q div{display:flex;gap:6px}
.quiz-q button{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border-radius:99px;padding:6px 16px;background:#fff;border:1.5px solid #D6D5CF;color:var(--ink-2);transition:all .15s ease}
.quiz-q button:hover{border-color:var(--green);color:var(--green)}
.quiz-q button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.quiz-a{font-size:16px;padding:12px 14px;border-radius:12px;background:var(--green-soft);color:#1F3B30}
.quiz-a b{color:var(--green)}
.plan{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s ease,opacity .35s ease}
.plans.picked .plan{opacity:.55}
.plans.picked .plan.pick{opacity:1;transform:translateY(-8px);box-shadow:0 24px 50px rgba(30,107,82,.22)}

.plan.best{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(var(--ang,0deg),#1f7a4d,#8FD3B6,#F2C94C,#1f7a4d) border-box;border:2px solid transparent;animation:spin 6s linear infinite}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
.twinkle{position:absolute;right:16px;top:-16px;width:70px;height:40px;pointer-events:none}
.twinkle i{position:absolute;width:12px;height:12px;background:#F2C94C;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tw 2.4s ease-in-out infinite}
.twinkle i:nth-child(1){left:0;top:14px}
.twinkle i:nth-child(2){left:26px;top:0;width:16px;height:16px;animation-delay:.6s}
.twinkle i:nth-child(3){left:52px;top:18px;width:9px;height:9px;animation-delay:1.2s;background:#8FD3B6}
@keyframes tw{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.15) rotate(45deg);opacity:1}}

details p{transform-origin:top}
details[open] p{animation:faq .32s ease}
@keyframes faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
summary{transition:color .15s ease}
summary:hover{color:var(--green)}
.faq-more{margin-top:22px;font-size:16px;color:var(--ink-2)}
.faq-more a{color:var(--green);font-weight:600}

.contact{position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),rgba(143,211,182,.16),transparent 60%);transition:opacity .3s ease}
.contact .wrap{position:relative}

.spark{position:fixed;z-index:95;width:8px;height:8px;border-radius:50%;pointer-events:none;animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

.totop{position:fixed;right:28px;bottom:88px;z-index:69;width:48px;height:48px;border-radius:50%;border:0;background:#fff;box-shadow:0 10px 28px rgba(20,22,28,.18);cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop .ring{position:absolute;inset:2px;width:44px;height:44px;transform:rotate(-90deg)}
.totop .ring circle{fill:none;stroke:var(--line);stroke-width:3}
.totop .ring .ring-p{stroke:var(--green);stroke-linecap:round;stroke-dasharray:125.7;stroke-dashoffset:125.7}
.totop .arr{width:18px;height:18px;color:var(--green);position:relative}
.totop:hover .arr{animation:up .5s ease}
@keyframes up{50%{transform:translateY(-4px)}}
@media(max-width:700px){.totop{bottom:86px;right:14px}}

.blob,.stage::before{transition:transform .5s ease-out}

@media (prefers-reduced-motion: reduce){
  .plan.best,.twinkle i,.check-list a,details[open] p{animation:none!important}
  .check-list a{opacity:1;transform:none}
}

/* ---------- bajery 4 ---------- */
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4c14-3 36-4 58-1' fill='none' stroke='%231f7a4d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
header nav a.on{color:var(--ink)}
header nav a.on::after,header nav a:hover::after{transform:scaleX(1)}

.dots-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:12px;
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.dots-nav.show{opacity:1;pointer-events:auto}
.dots-nav a{position:relative;display:block;width:12px;height:12px;border-radius:50%;border:2px solid #B9C7BF;background:#fff;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.dots-nav a:hover{transform:scale(1.25);border-color:var(--green)}
.dots-nav a.on{background:var(--green);border-color:var(--green);transform:scale(1.2)}
.dots-nav span{position:absolute;right:22px;top:50%;transform:translate(6px,-50%);white-space:nowrap;font-size:13px;font-weight:600;color:#fff;
  background:var(--ink);border-radius:6px;padding:4px 9px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.dots-nav a:hover span,.dots-nav a:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media(max-width:1279px){.dots-nav{display:none}}

.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

#realizacje{counter-reset:cs}
.case{position:relative;counter-increment:cs}
.case::before{content:"0" counter(cs);position:absolute;top:-78px;left:-28px;z-index:0;pointer-events:none;
  font-weight:800;font-size:clamp(80px,11vw,150px);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px #D5E4DB;
  transform:translateY(var(--ny,0px));transition:transform .1s linear}
.case.flip::before{left:auto;right:-28px}
.case > *{position:relative;z-index:1}
@media(max-width:900px){.case::before,.case.flip::before{top:-30px;left:auto;right:0;font-size:76px}}

.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg)}
.btn:hover::after{animation:shine .7s ease}
@keyframes shine{to{left:130%}}

.hi{display:inline-block;font-family:"Caveat",cursive;font-weight:700;font-size:28px;color:#FFE7A0;transform:rotate(-4deg);margin-bottom:2px}

.confetti{position:fixed;z-index:120;width:8px;height:12px;border-radius:2px;pointer-events:none;
  animation:conf 1.3s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.btn:hover::after{animation:none}.case::before{transform:none}}

/* ---------- bajery 5 ---------- */
.hero-more{margin-top:10px;font-size:15px;color:var(--ink-2)}
.hero-more a{color:var(--green);font-weight:600}

.live-tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--green);background:var(--green-soft);border-radius:99px;padding:4px 12px}
.live-tag i,.live-list i{position:relative;width:8px;height:8px;border-radius:50%;background:#2FA36B;flex:none}
.live-tag i::after,.live-list i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2FA36B;animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{from{transform:scale(1);opacity:.6}to{transform:scale(2.8);opacity:0}}

.live-list{margin:-6px 0 clamp(26px,3vw,40px)}
.live-h{font-size:14.5px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.live-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.live-list ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.live-list ul{grid-template-columns:1fr}}
.live-list a{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;height:100%;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.live-list a:hover{border-color:#BFD8CB;box-shadow:0 10px 26px rgba(20,22,28,.07);transform:translateY(-2px)}
.live-list b{font-size:15.5px;color:var(--ink)}
.live-list span{grid-column:2;font-size:14px;color:var(--ink-2);line-height:1.35}

.fit{border-top:1px solid var(--line)}
.fit-hand{display:inline-block;font-family:"Caveat",cursive;font-weight:700;font-size:25px;color:var(--green);transform:rotate(-3deg)}
.fit-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,48px);align-items:start}
@media(max-width:900px){.fit-grid{grid-template-columns:1fr}}
.fit-form fieldset{border:0;margin:0 0 22px;padding:0;min-width:0}
.fit-form legend{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;margin-bottom:12px;padding:0}
.fit-form legend span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-size:14px}
.fit-form legend small{font-weight:400;font-size:14px;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font:inherit;font-size:15px;padding:9px 15px;border-radius:99px;border:1.5px solid #CFCEC7;background:#fff;color:var(--ink);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.chips button:hover{border-color:var(--green)}
.chips button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.fit-form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid #CFCEC7;border-radius:12px;resize:vertical;color:var(--ink)}
.fit-form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(30,107,82,.14)}
.fit-err{color:#B4461F;font-size:14.5px;margin-top:10px}
.fit-out{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;min-height:300px;box-shadow:0 18px 44px rgba(20,22,28,.08)}
@media(max-width:900px){.fit-out{position:static}}
.fit-empty{min-height:248px;display:grid;place-items:center;align-content:center;gap:10px;color:var(--ink-3);text-align:center}
.fit-empty svg{width:42px;height:42px}
.fit-kind{font-size:14px;font-weight:600;color:var(--green)}
.fit-out h3{font-size:clamp(24px,2.4vw,30px);margin-top:4px}
.fit-desc{margin-top:10px;color:var(--ink-2)}
.fit-out ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.fit-out li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15.5px;line-height:1.4}
.fit-out li svg{width:18px;height:18px;color:var(--green);margin-top:2px}
.fit-out li s{color:var(--ink-3);text-decoration-thickness:1.5px}
.fit-proof{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.fit-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.fit-res{animation:fitin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes fitin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.build{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;
  background:var(--green-soft);color:var(--ink);border:1px solid #cfe5d9;border-radius:22px;padding:clamp(26px,4vw,48px)}
@media(max-width:900px){.build{grid-template-columns:1fr}}
.build .fit-hand{color:var(--green)}
.build h2,.build h3{font-size:clamp(25px,2.8vw,34px);margin-top:4px}
.zbuduj{padding-top:0}
.zbuduj .build{margin-top:0}
.build-t p{margin:12px 0 22px;color:#475569}
.build-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;counter-reset:bs}
@media(max-width:560px){.build-steps{grid-template-columns:1fr}}
.build-steps li{counter-increment:bs;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px 16px 54px;position:relative;font-size:15px;color:#475569}
.build-steps li::before{content:counter(bs);position:absolute;left:16px;top:15px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center}
.build-steps b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}
@media(prefers-reduced-motion:reduce){.live-tag i::after,.live-list i::after{animation:none}.fit-res{animation:none}}

/* ---------- nowa strona główna i podstrony (2026-10) ---------- */
header nav a[aria-current="page"]{color:var(--ink)}
header nav a[aria-current="page"]::after{transform:scaleX(1)}
.head h1{font-size:clamp(30px,3.8vw,46px)}
.check h1{font-size:clamp(30px,3.8vw,46px);margin-top:4px}
.page-top{padding-block:clamp(40px,5vw,64px) 0}
.page-top + section{padding-top:clamp(32px,4vw,48px)}
.page-top h1{font-size:clamp(32px,4.2vw,50px);max-width:820px}
.page-top .lead{margin-top:16px;font-size:clamp(17px,1.4vw,19px);color:var(--ink-2);max-width:640px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.jump a{font-size:15px;font-weight:600;text-decoration:none;color:var(--green);background:var(--green-soft);border-radius:99px;padding:7px 14px}
.jump a:hover{background:#DDEEE5}

.hero2{padding-block:clamp(44px,6vw,72px) clamp(40px,5vw,56px)}
.hero2 h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.02em;line-height:1.08;max-width:820px}
.hero2 .lead{margin:16px 0 clamp(28px,4vw,40px);font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:640px}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media(max-width:1180px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{min-height:190px;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.tile:hover{border-color:var(--green);box-shadow:0 14px 34px rgba(20,22,28,.08);transform:translateY(-3px)}
.tile .ti{width:48px;height:48px;border-radius:12px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
.tile .ti svg{width:24px;height:24px}
.tile strong{font-size:20px;line-height:1.25;letter-spacing:-.01em}
.tile .td{color:var(--ink-2);font-size:15px;flex-grow:1;line-height:1.5}
.tile .tp{font-weight:600;color:var(--green)}
@media(max-width:560px){.tile{min-height:0}}

.stories{background:var(--soft);border-block:1px solid var(--line)}
.story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:center}
.story + .story{margin-top:clamp(48px,6vw,72px)}
.story.flip .devices{order:2}
@media(max-width:940px){.story{grid-template-columns:1fr}.story.flip .devices{order:0}}
.story .kick{font-size:15px;color:var(--ink-3)}
.story h2,.story h3{font-size:clamp(25px,2.8vw,32px);margin-top:6px;line-height:1.2}
.story p.sd{margin-top:14px;color:var(--ink-2)}
.story ul.feat{grid-template-columns:1fr 1fr}
.story .links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:4px}
.story .visit{display:inline-block;margin-top:18px;font-weight:600;color:var(--green);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.story .visit:hover{color:var(--green-2)}
.story .soon{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:600;color:#8A5A00;background:#FFF1CC;border-radius:99px;padding:4px 12px}
.all-btn{margin-top:clamp(40px,5vw,56px)}
.auto-rows{scroll-margin-top:84px}
.auto-rows .story{scroll-margin-top:90px}

.ways3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:940px){.ways3{grid-template-columns:1fr}}
.pc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px}
.pc.acc{border:2px solid var(--green)}
.pc h3{font-size:22px;font-weight:700;letter-spacing:-.015em}
.pc p{color:var(--ink-2)}
.pc .pd{flex-grow:1}
.pc .pr{font-weight:700;font-size:20px;color:var(--ink)}
.pc .go{align-self:flex-start;font-weight:600;color:var(--green);text-decoration:none;border-bottom:2px solid currentColor}
.pc .go:hover{color:var(--green-2)}
.pc .thumbs{display:flex;gap:8px}
.pc .thumbs img{width:calc((100% - 16px) / 3);aspect-ratio:16/11;object-fit:cover;object-position:top center;border-radius:8px;border:1px solid var(--line)}
.pc .shot{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.pc .shot img{width:100%;height:118px;object-fit:cover;object-position:top center}
.pc .feats{display:flex;flex-direction:column;gap:8px}
.pc .feats span{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--green-soft);font-weight:600;font-size:15px;line-height:1.3}
.pc .feats svg{width:20px;height:20px;flex:none;color:var(--green)}

/* /realizacje: siatka miniatur na górze */
.rgrid{list-style:none;margin:0 0 clamp(44px,6vw,72px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:900px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.rgrid a{display:block;text-decoration:none;color:var(--ink)}
.rgrid .mini{display:block;background:#1A1B1F;border-radius:8px 8px 0 0;padding:4px 4px 0;box-shadow:0 10px 24px rgba(20,22,28,.12);transition:transform .2s ease,box-shadow .2s ease}
.rgrid .mini img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:3px 3px 0 0}
.rgrid .mini::after{content:"";display:block;height:6px;margin:0 -4px;background:linear-gradient(#D9D9DC,#BFC0C4);border-radius:0 0 6px 6px}
.rgrid a:hover .mini{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,22,28,.16)}
.rgrid b{display:block;margin-top:12px;font-size:15.5px;line-height:1.3}
.rgrid small{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.35}
.cases-h{margin-bottom:clamp(28px,4vw,44px)}
.cases-h h2{font-size:clamp(25px,2.8vw,34px)}
.plan .plan-pr{margin-top:8px;font-weight:700;font-size:17px;color:var(--green)}
.sub-time{margin-top:12px;font-size:15.5px;color:var(--ink-2);max-width:760px}
.quiz-a{scroll-margin-top:90px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.steps li{border-top:3px solid var(--green);padding-top:20px}
.steps strong{display:block;font-size:20px;margin-bottom:8px;letter-spacing:-.01em}
.steps span{color:var(--ink-2)}

.cbar{border-top:1px solid var(--line);background:var(--green-soft);padding-block:clamp(40px,5vw,56px)}
.cbar .wrap{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.cbar .ct{flex:1 1 480px;min-width:0}
.cbar h2{font-size:clamp(25px,2.8vw,30px);margin-bottom:8px}
.cbar p{color:#334155}
.cbar p a{color:var(--green);font-weight:600}
.cbar .ca{display:flex;flex-wrap:wrap;gap:12px}
.cbar .btn.line{background:transparent;border-color:#94a3b8}
@media(max-width:420px){.cbar .ca .btn{flex:1 1 100%;justify-content:center}}
footer .flinks{display:flex;flex-wrap:wrap;gap:6px 18px}
[id]{scroll-margin-top:80px}

/* ---------- strona główna: telefony w hero, klienci, dopiski, blog (2026-10-18) ---------- */
.hero2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,3vw,48px);align-items:center;margin-bottom:clamp(24px,3vw,36px)}
.hero2-grid .lead{margin-bottom:0}
.hero2 .stage{padding:4px 0 0}
.hero2 .phwrap.mid{width:clamp(120px,11vw,156px)}
.hero2 .phwrap.left,.hero2 .phwrap.right{width:clamp(100px,9.2vw,132px);margin-bottom:22px}
.hero2 .ph{border-radius:22px;padding:6px}
.hero2 .ph::before{top:10px;height:7px}
.hero2 .ph .scr{border-radius:16px}
.hero2 .lbl{font-size:11.5px}
@media(max-width:940px){.hero2-grid{grid-template-columns:1fr}.hero2 .stage{max-width:460px;margin-inline:auto;width:100%}}
@media(max-width:600px){.hero2 .stage{display:none}}
.tiles-box{position:relative}
.hand-tip,.hand-own{font-family:"Caveat",cursive;font-weight:700;font-size:24px;line-height:1;color:var(--green);white-space:nowrap;pointer-events:none}
.hand-tip{position:absolute;right:6px;top:-40px;display:flex;align-items:flex-start;gap:2px;transform:rotate(-3deg)}
.hand-tip svg{width:38px;height:32px;margin-top:6px}
.hand-own{position:absolute;right:-2%;top:100%;margin-top:6px;display:flex;align-items:flex-end;gap:4px;transform:rotate(-2deg)}
.hand-own svg{width:40px;height:34px;transform:translateY(-8px)}
.story{margin-bottom:0}
.stories .story:first-child{padding-bottom:28px}
@media(max-width:940px){.hand-tip{top:-36px}}
@media(max-width:700px){.hand-tip,.hand-own{display:none}.stories .story:first-child{padding-bottom:0}}
.withus{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:22px;font-size:14px;color:var(--ink-3)}
.withus a{font-weight:600;color:#646A74;text-decoration:none;letter-spacing:-.01em;transition:color .15s ease}
.withus a:hover{color:var(--green)}
@media(max-width:560px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:14px;gap:6px;border-radius:14px}
  .tile .ti{width:38px;height:38px;border-radius:10px}
  .tile .ti svg{width:20px;height:20px}
  .tile strong{font-size:16px}
  .tile .td{display:none}
  .tile .tp{font-size:14px;margin-top:auto}
  .tile:last-child:nth-child(odd){grid-column:1 / -1}
  .withus{gap:4px 14px;font-size:13.5px}
}
.fromblog + .cbar{margin-top:0}
.hero2 .phwrap.left,.hero2 .phwrap.right{z-index:3}
.fb-cards .card .more{background:none;border:0}

/* ---------- stopka na ciemnym tle (18.10.2026) ---------- */
footer.foot{position:relative;overflow:hidden;margin-top:clamp(40px,6vw,72px);padding:clamp(56px,7vw,88px) 0 0;border-top:0;border-radius:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0 0;color:#B9C4BE;font-size:15px;
  background:radial-gradient(900px 420px at 12% 0%,rgba(31,122,77,.35),transparent 60%),radial-gradient(700px 380px at 95% 100%,rgba(31,122,77,.22),transparent 65%),#0F1A15}
footer.foot::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%);pointer-events:none}
footer.foot .wrap{position:relative;z-index:1;display:block}
footer.foot a{color:#E6EEE9;text-decoration:none}
footer.foot a:hover{color:#8FD3B6}
footer.foot .f-gora{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-end;justify-content:space-between;padding-bottom:clamp(28px,4vw,40px);border-bottom:1px solid rgba(255,255,255,.1)}
footer.foot .f-marka{max-width:460px}
footer.foot .f-logo img{display:block;width:200px;height:auto}
footer.foot .f-haslo{margin-top:16px;font-size:17px;line-height:1.55;color:#C9D3CD}
footer.foot .f-cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
footer.foot .f-reka{font-family:"Caveat",cursive;font-weight:700;font-size:24px;color:#8FD3B6;display:inline-flex;align-items:flex-end;gap:4px;transform:rotate(-3deg);margin-right:60px}
footer.foot .f-reka svg{width:42px;height:32px;flex:none}
footer.foot .f-przyciski{display:flex;flex-wrap:wrap;gap:10px}
footer.foot .f-przyciski .btn{color:#fff}
footer.foot .f-btn-jasny{background:transparent;border-color:rgba(255,255,255,.35)}
footer.foot .f-btn-jasny:hover{background:rgba(255,255,255,.08);border-color:#fff}
footer.foot .f-kolumny{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-block:clamp(28px,4vw,44px)}
footer.foot h2{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FD3B6;margin:0 0 14px}
footer.foot nav{display:flex;flex-direction:column;gap:9px;font-size:15px}
footer.foot nav a{color:#C9D3CD;position:relative;width:fit-content}
footer.foot nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#8FD3B6;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
footer.foot nav a:hover{color:#fff}
footer.foot nav a:hover::after{transform:scaleX(1)}
footer.foot .f-kontakt p{margin-top:10px;line-height:1.6;color:#9FAEA6;font-size:14.5px}
footer.foot .f-mail{font-weight:600;color:#fff;font-size:16px}
footer.foot .legal{margin:0;padding:18px 0 26px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#8C9A93;line-height:1.55}
footer.foot .f-znak{position:relative;z-index:0;margin-top:-6px;text-align:center;font-weight:800;letter-spacing:-.04em;line-height:.8;font-size:clamp(80px,17vw,250px);color:transparent;-webkit-text-stroke:1px rgba(143,211,182,.16);user-select:none;pointer-events:none;white-space:nowrap}
@media(max-width:880px){footer.foot .f-kolumny{grid-template-columns:repeat(2,minmax(0,1fr))}footer.foot .f-cta{align-items:flex-start}footer.foot .f-reka{margin-right:0}}
@media(max-width:460px){footer.foot .f-kolumny{grid-template-columns:1fr 1fr;gap:24px 18px}footer.foot .f-kontakt{grid-column:1/-1}footer.foot .f-przyciski{width:100%}footer.foot .f-przyciski .btn{flex:1 1 0;justify-content:center}}
@media(max-width:700px){footer.foot{padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){footer.foot nav a::after{transition:none}}

/* ---------- stopka: ozdobniki i ruch (18.10.2026) ---------- */
footer.foot::after{content:"";position:absolute;width:520px;height:520px;left:-160px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(46,160,103,.28),transparent 65%);filter:blur(10px);pointer-events:none;animation:f-plywa 18s ease-in-out infinite alternate}
@keyframes f-plywa{from{transform:translate(0,0)}to{transform:translate(220px,90px)}}
footer.foot .f-pigulki{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
footer.foot .f-pigulki li{font-size:13px;font-weight:600;color:#CFE9DC;background:rgba(143,211,182,.08);border:1px solid rgba(143,211,182,.22);border-radius:99px;padding:5px 12px}
footer.foot .f-status{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:#8FD3B6}
footer.foot .f-status i{position:relative;width:8px;height:8px;border-radius:50%;background:#3FD08A;flex:none}
footer.foot .f-status i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #3FD08A;opacity:0;animation:f-puls 2.4s ease-out infinite}
@keyframes f-puls{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
footer.foot .f-gora{border-bottom:0;position:relative}
footer.foot .f-gora::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(143,211,182,0),rgba(143,211,182,.45),rgba(143,211,182,0))}
footer.foot .f-dol{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;padding:18px 0 26px;border-top:1px solid rgba(255,255,255,.1)}
footer.foot .f-dol .legal{padding:0;border-top:0;flex-basis:auto;margin:0}
footer.foot .f-gora-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#CFE9DC;border:1px solid rgba(143,211,182,.25);border-radius:99px;padding:6px 12px;transition:background .2s ease,border-color .2s ease}
footer.foot .f-gora-link svg{width:15px;height:15px;transition:transform .2s ease}
footer.foot .f-gora-link:hover{background:rgba(143,211,182,.1);border-color:#8FD3B6;color:#fff}
footer.foot .f-gora-link:hover svg{transform:translateY(-2px)}
footer.foot .f-iskra{position:absolute;fill:#8FD3B6;opacity:.35;pointer-events:none;animation:f-mruga 4s ease-in-out infinite}
footer.foot .f-iskra-1{width:18px;height:18px;right:9%;top:46px}
footer.foot .f-iskra-2{width:11px;height:11px;right:14%;top:84px;animation-delay:1.6s}
@keyframes f-mruga{0%,100%{opacity:.15;transform:scale(.85) rotate(0)}50%{opacity:.6;transform:scale(1.1) rotate(20deg)}}
footer.foot .f-znak{background:linear-gradient(90deg,rgba(143,211,182,.05),rgba(143,211,182,.22),rgba(143,211,182,.05));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(143,211,182,.18);animation:f-blask 9s linear infinite}
@keyframes f-blask{from{background-position:200% 0}to{background-position:-200% 0}}
footer.foot .f-przyciski .btn{box-shadow:0 10px 30px rgba(31,122,77,.35)}
footer.foot .f-przyciski .f-btn-jasny{box-shadow:none}
@media(max-width:700px){footer.foot .f-iskra{display:none}}
@media(prefers-reduced-motion:reduce){footer.foot::after,footer.foot .f-status i::after,footer.foot .f-iskra,footer.foot .f-znak{animation:none}}

/* ---------- okruszki, W skrócie, podtytuł H1, Przeczytaj też (SEO) ---------- */
.crumbs-bar{padding-top:18px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--ink-3)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--green)}
.crumbs-bar + section,.crumbs-bar + .page-top{padding-top:clamp(20px,3vw,36px)}
.h1-sub{display:block;margin-top:12px;font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--green)}
.tldr{max-width:760px;margin:0 0 clamp(26px,3vw,38px);padding:16px 20px;border-left:4px solid var(--green);background:var(--green-soft);border-radius:0 12px 12px 0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.tldr b{display:block;margin-bottom:4px;color:var(--ink);font-size:14px;letter-spacing:.02em}
.page-top .tldr{margin-top:20px;margin-bottom:0}
.readmore{border-top:1px solid var(--line)}

/* Podstrona /pinroom */
.pr-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:940px){.pr-hero{grid-template-columns:1fr}}
.pr-dev{padding-right:0}
.pr-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pr-cards4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.pr-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.pr-cards,.pr-cards4{grid-template-columns:1fr}}
.pr-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px}
.pr-card h3{font-size:19px}
.pr-card p{margin-top:8px;color:var(--ink-2);font-size:15.5px}
.pr-problem,.pr-for{background:var(--soft)}
.pr-four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.pr-four{grid-template-columns:1fr}}
.pr-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
@media(max-width:900px){.pr-shots{grid-template-columns:1fr}}
.pr-shots figure{margin:0}
.pr-shots figcaption{margin-top:18px;color:var(--ink-2);font-size:15.5px}
.pr-shots figcaption b{display:block;color:var(--ink);font-size:17px}
.pr-note{margin-top:22px;color:var(--ink-2);font-size:16px}
.pr-note a{color:var(--green);font-weight:600}
.pr-in{margin:22px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2);font-size:15.5px;max-width:820px}
.pr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
@media(max-width:820px){.pr-cols{grid-template-columns:1fr}}
.pr-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px}
.pr-box h3{font-size:19px}
.pr-s{margin-top:6px;color:var(--ink-3);font-size:15px}
.pr-t{width:100%;border-collapse:collapse;margin-top:12px;font-size:15.5px}
.pr-t th,.pr-t td{padding:11px 0;border-top:1px solid var(--line);vertical-align:top}
.pr-t th{text-align:left;font-weight:600}
.pr-t th small{display:block;font-weight:400;color:var(--ink-3);font-size:14px}
.pr-t td{text-align:right;font-weight:800;white-space:nowrap;padding-left:12px}
.pr-price .sub{position:relative}
.pr-case-box{max-width:820px;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:0 16px 16px 0;padding:24px 26px;background:#fff}
.pr-case-box h2{font-size:clamp(24px,2.6vw,32px)}
.pr-case-box p{margin:12px 0 14px;color:var(--ink-2)}