/* Lumaverto / Veltivio — strona agencji (wersja lokalna, prototyp)
   Tylko lokalne zasoby: bez fontów i bibliotek z sieci. Animacje: wyłącznie transform i opacity. */
:root{
  --paper:#FAF6EF;--paper2:#FFFDF8;--ink:#172821;--green:#52644B;
  --lime:#D9EDB0;--peach:#E9C6B5;--lav:#DCD5F1;
  --muted:#46563F;--line:#D9D6C8;
  --radius:28px;
  --font:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:12px;scroll-padding-bottom:12px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-motion="off"]{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html:not([data-motion="on"]){scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 14px}
h1,h2,h3{margin:0;font-weight:500}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.contact :focus-visible{outline-color:var(--lime)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.nw{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.small{font-size:14.5px;line-height:1.55;color:var(--muted)}
.on-dark .small{color:#D2DCCB}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--muted);max-width:60ch}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:0 0 14px}
.on-dark .eyebrow{color:var(--lime)}
[lang="de"] h1,[lang="de"] h2,[lang="de"] h3,[lang="de"] p,[lang="de"] li,[lang="de"] td,[lang="de"] th,[lang="de"] summary{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* skip link */
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* etykieta prototypu */
.proto{background:var(--lav);color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-align:center;padding:9px clamp(16px,4vw,48px);line-height:1.4}

/* nagłówek */
.site-header{position:relative;z-index:50;background:var(--paper)}
@media (min-width:1001px){.site-header{position:sticky;top:0;box-shadow:0 1px 0 var(--line)}}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;margin-right:auto}
.brand img{height:34px;width:auto}
.wordmark{font-size:26px;font-weight:600;letter-spacing:-.04em}
.navlinks{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.navlinks a{text-decoration:none;font-weight:600;font-size:15.5px;padding:10px 5px;min-width:44px;justify-content:center;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.navlinks a:hover{border-color:var(--green)}
.tools{display:flex;gap:10px;align-items:center}
.langs{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.langs a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;font-size:14px}
.langs a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.langs a:focus-visible{outline-offset:-5px}
.motion-toggle{font:inherit;font-size:14px;font-weight:700;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.motion-toggle:hover{background:var(--lime)}
@media (max-width:1000px){
  .nav{min-height:0}
  .navlinks{order:5;width:100%;gap:0 6px}
  .site-header .nav-cta,.site-header .mt-header{display:none}
  .tools{margin-left:auto}
  .brand{margin-right:0}
}
@media (min-width:1001px){.mbar{display:none!important}html{scroll-padding-top:92px}}
@media (max-width:1000px){html{scroll-padding-bottom:96px}}

/* przyciski */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font:inherit;font-weight:700;font-size:16.5px;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease);text-align:center}
.button:hover{transform:translateY(-2px)}
.button.secondary{background:transparent;color:var(--ink)}
.button.secondary:hover{background:var(--lime)}
.button.lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.button.lime:hover{background:#E6F4C8}
.nav-cta{min-height:44px;padding:8px 20px;font-size:15px}
html[data-motion="off"] .button:hover{transform:none}

/* HERO */
.hero{padding:clamp(28px,5vw,72px) 0 clamp(48px,7vw,104px);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:center}
h1{font-size:clamp(46px,6.3vw,100px);line-height:.96;letter-spacing:-.06em;margin:0 0 26px}
h1 .ln{display:block;position:relative;width:fit-content;max-width:100%}
h1 .l2{color:var(--green)}
h1 .l2::after{content:"";position:absolute;left:-.04em;right:-.06em;bottom:.07em;height:.3em;background:var(--lime);border-radius:.2em;z-index:-1;transform-origin:left center}
.hero-copy{position:relative;isolation:isolate}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 18px}
.hero .lead{margin-bottom:0}
.heroprice{font-size:15.5px;font-weight:600;line-height:1.5;margin:0 0 10px;max-width:60ch}
.heroprice a{text-decoration:underline;text-underline-offset:3px;display:inline-block;min-height:24px}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.hero .eyebrow{animation:rise .6s var(--ease) both}
.hero h1 .l1{animation:rise .75s var(--ease) .05s both}
.hero h1 .l2{animation:rise .75s var(--ease) .12s both}
.hero h1 .l2::after{animation:sweep .6s var(--ease) .4s both}
.hero .lead{animation:rise .7s var(--ease) .2s both}
.hero .actions{animation:rise .7s var(--ease) .26s both}
.hero .heroprice,.hero .small{animation:rise .7s var(--ease) .32s both}
.hero .visual{animation:pop .9s var(--ease) .1s both}
.visual{position:relative;min-height:clamp(340px,40vw,540px);display:grid;place-items:center;padding:clamp(18px,3vw,36px) clamp(18px,3vw,36px) calc(clamp(18px,3vw,36px) + 64px)}
.visual::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,var(--lime) 0 46%,var(--lav) 46% 100%);border-radius:62% 38% 55% 45% / 48% 58% 42% 52%;z-index:0}
.visual::after{content:"";position:absolute;width:34%;aspect-ratio:1;right:-2%;top:-4%;background:var(--peach);border-radius:50% 50% 46% 54%;z-index:0}
.window{position:relative;z-index:1;width:min(100%,430px);background:var(--paper2);border:2px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:10px 12px 0 rgba(23,40,33,.9);animation:float 6s ease-in-out infinite alternate;will-change:transform}
.visual.paused .window{animation-play-state:paused}
.window .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:2px solid var(--ink);background:var(--lime)}
.window .bar i{width:11px;height:11px;border-radius:50%;background:var(--ink);opacity:.85}
.window .bar span{margin-left:8px;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini{padding:18px 20px 22px}
.mini-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:18px}
.mini-top span{color:var(--muted)}
.mini-title{font-size:clamp(26px,3vw,36px);line-height:1;letter-spacing:-.05em;margin-bottom:10px}
.mini-p{font-size:13.5px;line-height:1.45;color:var(--muted);margin-bottom:14px}
.mini-cta{display:inline-block;background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:99px;font-size:13px;font-weight:700}
.house{margin:12px -6px 8px}
.mini-tags{display:flex;gap:6px;flex-wrap:wrap}
.mini-tags span,.scene-details span{background:var(--peach);padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700}
.pill{position:absolute;z-index:2;left:clamp(14px,3vw,34px);bottom:clamp(12px,2vw,22px);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:700;font-size:14.5px;text-decoration:none}
.pill:focus-visible{outline-color:var(--ink);outline-offset:4px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .visual{min-height:380px}
}

/* SCENA */
.scene-section{margin:0 clamp(8px,2vw,24px);border-radius:clamp(28px,4vw,56px);background:var(--lav);padding:clamp(48px,7vw,104px) 0}
.scene-heading{max-width:820px;margin-bottom:clamp(28px,4vw,52px)}
.scene-toprow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.scene-toprow .eyebrow{color:var(--ink);margin-bottom:10px}
h2{font-size:clamp(34px,4.8vw,66px);line-height:1.02;letter-spacing:-.05em;margin-bottom:18px}
.scene-heading .lead{color:#2D3C2F}
.scene-shell{--p:.3;display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);grid-template-areas:"notes site" "ctrl ctrl";gap:clamp(16px,3vw,40px) clamp(16px,3vw,40px);background:var(--paper);border-radius:clamp(24px,3vw,40px);padding:clamp(18px,3vw,40px);overflow:clip;border:2px solid var(--ink)}
html:not(.js) .scene-shell{--p:1!important}
html:not(.js) .scene-controls .ctrl,html:not(.js) #sceneStage{display:none}
.scene-notes{grid-area:notes;display:flex;flex-direction:column;gap:14px;justify-content:center}
.note{display:block;padding:14px 16px;border-radius:18px;border:2px solid var(--ink);font-size:16px;line-height:1.35;--x:-30%;--y:0;--r:-6deg;transform:translate(calc((1 - var(--p)) * var(--x)),calc((1 - var(--p)) * var(--y))) rotate(calc((1 - var(--p)) * var(--r)));transition:transform .12s linear}
.note small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;margin-bottom:4px}
.note span{font-weight:600}
.note.n1{background:var(--peach);--x:-6%;--y:18%;--r:-5deg}
.note.n2{background:var(--lime);--x:10%;--y:0%;--r:4deg}
.note.n3{background:var(--lav);--x:-8%;--y:-20%;--r:-3deg}
.scene-site{grid-area:site;background:var(--paper2);border:2px solid var(--ink);border-radius:26px;overflow:hidden;min-height:360px;display:flex;flex-direction:column;box-shadow:8px 10px 0 var(--ink);transform:translateY(calc((1 - var(--p)) * 26px)) rotate(calc((1 - var(--p)) * 2.5deg)) scale(calc(.9 + .1 * var(--p)));opacity:1;transition:transform .12s linear;position:relative}
.scene-site::after{content:"";position:absolute;left:clamp(22px,4vw,48px);right:clamp(22px,4vw,48px);top:96px;height:190px;background:linear-gradient(var(--lav),var(--lav)) 0 0/46% 34px no-repeat,linear-gradient(#EAE6D9,#EAE6D9) 0 56px/78% 14px no-repeat,linear-gradient(#EAE6D9,#EAE6D9) 0 82px/64% 14px no-repeat,linear-gradient(var(--peach),var(--peach)) 0 120px/30% 40px no-repeat;border-radius:10px;opacity:clamp(0,calc(1 - (var(--p) - .1) * 6),1);transition:opacity .12s linear;pointer-events:none}
.scene-site-top{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:2px solid var(--ink);background:var(--lime);font-size:13.5px;opacity:clamp(0,calc((var(--p) - .06) * 14),1);transition:opacity .12s linear}
.scene-site-top span{color:var(--ink)}
.scene-site-content{position:relative;padding:clamp(22px,4vw,48px);flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;overflow:hidden}
.scene-site-content::before{content:"";position:absolute;right:-12%;bottom:-24%;width:62%;aspect-ratio:1;background:var(--peach);border-radius:48% 52% 40% 60%;opacity:clamp(0,calc((var(--p) - .5) * 2),1);transform:scale(calc(.6 + .4 * var(--p)));transition:transform .12s linear,opacity .12s linear;z-index:0}
.scene-site-content>*{position:relative;z-index:1}
.scene-site-content .eyebrow{margin:0;opacity:clamp(0,calc((var(--p) - .14) * 14),1)}
.scene-site h3{font-size:clamp(34px,5vw,64px);line-height:.98;letter-spacing:-.055em;opacity:clamp(0,calc((var(--p) - .22) * 14),1);transform:translateY(calc((1 - var(--p)) * 22px));transition:transform .12s linear,opacity .12s linear}
.scene-site p{max-width:30ch;color:var(--muted);margin:0;opacity:clamp(0,calc((var(--p) - .34) * 14),1);transform:translateY(calc((1 - var(--p)) * 18px));transition:transform .12s linear,opacity .12s linear}
.scene-details{display:flex;gap:8px;flex-wrap:wrap;opacity:clamp(0,calc((var(--p) - .44) * 14),1);transition:opacity .12s linear}
.scene-cta{display:inline-block;background:var(--ink);color:var(--paper);padding:10px 20px;border-radius:99px;font-weight:700;font-size:15px;opacity:clamp(0,calc((var(--p) - .64) * 14),1);transform:translateY(calc((1 - var(--p)) * 16px));transition:transform .12s linear,opacity .12s linear}
.scene-controls{grid-area:ctrl;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:20px clamp(16px,3vw,40px);align-items:start;border-top:2px solid var(--ink);padding-top:20px}
.stage{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;margin:0 0 6px}
.ctrl label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.nojs-note{grid-column:1/-1;margin:0}
.js .nojs-note{display:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:99px;background:var(--lime);border:2px solid var(--ink)}
input[type=range]::-moz-range-track{height:10px;border-radius:99px;background:var(--lime);border:2px solid var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:34px;height:34px;border-radius:50%;background:var(--ink);border:4px solid var(--paper);box-shadow:0 0 0 2px var(--ink);margin-top:-11px}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--ink);border:4px solid var(--paper);box-shadow:0 0 0 2px var(--ink)}
input[type=range]:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:99px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chips button{font:inherit;font-weight:700;font-size:15px;min-height:44px;padding:0 18px;border-radius:99px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;opacity:.78;transition:opacity .12s linear}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);opacity:1}
.chips button:hover{opacity:1;background:var(--lime)}
.chips button[aria-pressed="true"]:hover{background:var(--ink)}
@media (max-width:860px){
  .scene-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"notes" "site" "ctrl"}
  .scene-notes{gap:10px}
  .note{padding:10px 14px;font-size:15px}
  .scene-controls{grid-template-columns:minmax(0,1fr)}
  .scene-site{min-height:320px}
}

/* DEMO — zapowiedź */
.demo-section{margin:clamp(12px,2vw,24px) clamp(8px,2vw,24px) 0;border-radius:clamp(28px,4vw,56px);background:var(--lime);padding:clamp(44px,6vw,88px) 0}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);align-items:center}
.demo-section .eyebrow{color:var(--ink)}
.demo-section .lead{color:#2A3A2B}
.demo-section .small{color:#2A3A2B}
.demo-views{list-style:none;display:grid;gap:8px}
.demo-views a{display:flex;align-items:center;gap:16px;min-height:56px;padding:10px 20px;border-radius:20px;background:var(--paper);border:2px solid var(--ink);text-decoration:none;font-weight:700;font-size:18px}
.demo-views a:hover{background:var(--peach)}
.demo-views a:hover .num{color:var(--ink)}
.demo-views .num{font-size:13px;letter-spacing:.1em;color:var(--green)}
@media (max-width:860px){.demo-grid{grid-template-columns:minmax(0,1fr)}}

/* pasek */
.stripe{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin:clamp(40px,6vw,80px) 0 0}
.stripe li{display:flex;gap:14px;align-items:baseline;padding:18px 0;border-top:2px solid var(--ink);font-size:clamp(17px,1.6vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.stripe b{font-size:14px;letter-spacing:.1em;color:var(--green)}
@media (max-width:760px){.stripe{grid-template-columns:minmax(0,1fr)}}

/* sekcje */
.section{padding:clamp(64px,9vw,128px) 0;scroll-margin-top:64px}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}
.explainer{padding:24px 0;border-top:2px solid var(--ink)}
.explainer:last-child{border-bottom:2px solid var(--ink)}
.explainer h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;margin-bottom:8px}
.explainer p{margin:0;color:var(--muted)}

/* CENY */
.sectionhead{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.sectionhead .intro{max-width:780px}
.switch{display:inline-flex;border:2px solid var(--ink);border-radius:99px;padding:4px;background:var(--paper2)}
.switch button{font:inherit;font-weight:700;font-size:15.5px;min-height:46px;padding:0 24px;border-radius:99px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.switch button:focus-visible{outline-offset:2px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:stretch}
.card{display:flex;flex-direction:column;background:var(--paper2);border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(22px,2.4vw,32px)}
.card.featured{background:var(--lime)}
.badge{align-self:flex-start;background:var(--peach);border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.card.featured .badge{background:var(--paper)}
.card h3{font-size:clamp(28px,3vw,38px);letter-spacing:-.05em;margin-bottom:6px}
.card .desc{color:var(--muted);min-height:3.1em}
.card.featured .desc{color:#2A3A2B}
.price{font-size:clamp(40px,4.4vw,58px);font-weight:500;letter-spacing:-.06em;line-height:1.05;margin:8px 0 2px}
.price small{font-size:17px;letter-spacing:0;font-weight:600;color:var(--muted)}
.card.featured .price small{color:#2A3A2B}
.fee{font-size:15px;font-weight:600;margin:0 0 16px;color:var(--green)}
.card.featured .fee{color:var(--ink)}
.card ul{list-style:none;display:grid;gap:9px;margin:6px 0 24px;flex:1}
.card li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.45}
.card li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:12px;border-radius:50%;background:var(--green)}
.card .button{width:100%}
.js #pricesWrap[data-billing="buy"] [data-mode="abo"],.js #pricesWrap[data-billing="abo"] [data-mode="buy"]{display:none}
html:not(.js) .switch{display:none}
.cost{margin-top:clamp(32px,5vw,64px)}
.cost-table{width:100%;border-collapse:collapse;background:var(--paper2);border:2px solid var(--ink);border-radius:20px;overflow:hidden;font-size:16px}
.cost-table caption{text-align:left;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;font-weight:500;padding:0 0 14px}
.cost-table caption.vh{padding:0}
.cost-table th,.cost-table td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.cost-table thead th{background:var(--ink);color:var(--paper);border-top:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.cost-table tbody th{font-weight:700}
.cost-table td.sum{font-weight:700;font-size:18px;text-align:right}
.cost-table td.sum{white-space:nowrap}
.cost-table:not(.addons) thead th:last-child,.cost-table.addons thead th:nth-child(2){text-align:right}
.cost-table tr.diff{background:var(--peach)}
.table-note{margin-top:14px;max-width:80ch;color:var(--muted)}
.addons-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(40px,6vw,72px);align-items:start}
.h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;margin-bottom:14px}
.scope ul{list-style:none;display:grid;gap:10px}
.scope li{padding:14px 18px;border-radius:18px;background:var(--lav);font-size:15.5px;line-height:1.45}
.tax-note{margin-top:28px;max-width:80ch}
@media (max-width:1000px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .card .desc{min-height:0}
  .addons-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .cost-table caption{padding:0 0 12px}
  .cost-table,.cost-table tbody,.cost-table tr,.cost-table th,.cost-table td{display:block;width:100%}
  .cost-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cost-table tr{border-top:2px solid var(--ink);padding:10px 0}
  .cost-table tr:first-child{border-top:0}
  .cost-table th,.cost-table td{border:0;padding:6px 16px;text-align:left!important}
  .cost-table td::before,.cost-table tbody th::before{content:attr(data-label);display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:1px}
  .cost-table tr.diff td::before,.cost-table tr.diff th::before{color:var(--ink)}
  .cost-table td.sum{white-space:normal}
}

/* PROCES */
.process{background:linear-gradient(var(--paper),var(--paper))}
.workflow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin:clamp(28px,4vw,48px) 0 24px;counter-reset:s}
.step{border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:6px;min-height:280px}
.step:nth-child(1){background:var(--peach)}.step:nth-child(2){background:var(--lime)}.step:nth-child(3){background:var(--lav)}.step:nth-child(4){background:var(--paper2)}
.step b{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.step h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.05em;margin:28px 0 6px}
.step p{margin:0;font-size:15.5px;line-height:1.5}
@media (max-width:1000px){.workflow{grid-template-columns:repeat(2,minmax(0,1fr))}.step{min-height:0}.step h3{margin-top:14px}}
@media (max-width:620px){.workflow{grid-template-columns:minmax(0,1fr)}}

/* FAQ */
.faq-list details{border-top:2px solid var(--ink)}
.faq-list details:last-child{border-bottom:2px solid var(--ink)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:14px 0;font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-size:22px;line-height:1}
.faq-list details[open] summary::after{content:"–";background:var(--lime)}
.faq-list details p{margin:0 0 22px;max-width:62ch;color:var(--muted)}

/* BRIEF */
.brief{padding-bottom:clamp(40px,6vw,80px)}
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);background:var(--ink);color:var(--paper);border-radius:clamp(28px,4vw,56px);padding:clamp(28px,5vw,72px)}
.contact h2{color:var(--paper)}
.contact-copy>p:not(.eyebrow):not(.small){font-size:clamp(17px,1.5vw,20px);color:#E6EDE0}
.note-block{padding:14px 16px;border:2px dashed #8FA487;border-radius:16px;color:#E6EDE0!important}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.field{min-width:0;border:0;padding:0;margin:0}
.field.full,.full{grid-column:1/-1}
.field label,.field legend{display:block;font-weight:700;font-size:15px;margin-bottom:6px;padding:0}
.req{color:var(--peach)}
.field input[type=text],.field input[type=url],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;font:inherit;font-size:16px;min-height:50px;padding:12px 16px;border-radius:14px;border:2px solid #8FA487;background:var(--paper);color:var(--ink)}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder{color:#5A6A57}
.field [aria-invalid="true"]{border-color:var(--peach);border-width:3px}
.err{margin:6px 0 0;font-size:14.5px;font-weight:700;color:var(--peach)}
.radio,.checkbox{display:flex!important;align-items:center;gap:12px;font-weight:500!important;min-height:44px;cursor:pointer;margin:0!important}
.radio input,.checkbox input{width:22px;height:22px;accent-color:var(--lime);flex:none}
.hint{margin:4px 0 0 34px;color:var(--lime);font-size:14.5px}
.submit{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.submit .button{margin-bottom:8px}
.submit .small{margin:0}
.status{margin:10px 0 0;padding:0;font-weight:700;color:var(--lime);min-height:1.4em}
.status.error{color:var(--peach)}
.contact .nojs-note{color:#E6EDE0}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}

/* stopka */
.site-footer{padding:40px 0 48px}
.site-footer p{margin:0 0 8px}
.site-footer a{display:inline-flex;align-items:center;min-height:44px}
.site-footer p:first-child{font-weight:700}

/* dolny pasek (telefon / tablet) */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;align-items:center;padding:10px clamp(12px,3vw,24px) calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:2px solid var(--ink);transition:transform .25s var(--ease),opacity .25s}
.mbar .button{flex:1 1 auto;min-height:48px;padding:10px 16px;font-size:15.5px;white-space:nowrap}
.mbar .motion-toggle{padding:0 14px;font-size:13.5px;line-height:1.2;flex:0 1 auto}
.mbar.hide{transform:translateY(110%);opacity:0;visibility:hidden;transition:transform .25s var(--ease),opacity .25s,visibility 0s .25s}
@media (max-width:1000px){body{padding-bottom:78px}}

/* ujawnianie sekcji (tylko z JS; treść zawsze dostępna bez JS) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* WYŁĄCZNIK RUCHU: stan ręczny albo ustawienie systemu */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
html[data-motion="off"] .rv{opacity:1!important;transform:none!important}
html[data-motion="off"] .window{will-change:auto}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) *,html:not([data-motion="on"]) *::before,html:not([data-motion="on"]) *::after{animation:none!important;transition:none!important}
  html:not([data-motion="on"]) .rv{opacity:1!important;transform:none!important}
}

@media print{
  .mbar,.site-header .tools,.motion-toggle,.proto{display:none!important}
  .rv{opacity:1!important;transform:none!important}
  body{padding:0}
}

/* SEO proposal 15.10: reuse existing responsive layout and table rules. */
.seo { background:var(--paper, #faf6ef); }
.seo .scope { margin-top:2rem; }
.seo .price small { margin-left:.3em; }

/* ===== SEO 18.10: strony usług PL, menu, okruszki, przegląd usług. Tylko transform/opacity w animacjach; bez zasobów zewnętrznych. ===== */

/* okruszki */
.crumbs{padding-top:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;font-size:15px}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"›";margin:0 10px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
.crumbs [aria-current]{font-weight:700}

/* nagłówek podstrony */
.sub-hero{padding:clamp(4px,1.5vw,20px) 0 clamp(40px,6vw,84px)}
.sub-hero h1{font-size:clamp(34px,5.2vw,76px);line-height:1;letter-spacing:-.05em;margin:0 0 22px;max-width:17em;text-wrap:balance}
.sub-hero .lead{max-width:64ch}
.sub-hero .actions{margin:26px 0 14px}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.facts li{background:var(--lime);border:2px solid var(--ink);border-radius:99px;padding:6px 16px;font-weight:700;font-size:15.5px;line-height:1.4}
.facts li:nth-child(2){background:var(--peach)}
.facts li:nth-child(3){background:var(--lav)}
.facts li:nth-child(4){background:var(--paper2)}

/* sekcje treści */
.section.sub{padding:clamp(44px,6vw,88px) 0;border-top:2px solid var(--ink)}
.sub-wrap{display:flex;flex-direction:column;gap:18px}
.sub h2{font-size:clamp(28px,3.6vw,46px);line-height:1.05;letter-spacing:-.045em;margin:0 0 6px;max-width:24ch;text-wrap:balance}
.sub-p{max-width:68ch;margin:0;font-size:17.5px;line-height:1.6}
.sub-note{max-width:80ch;margin:0}
.sub-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(14px,2vw,24px);margin-top:6px}
.sub-card{border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(20px,2.4vw,30px);background:var(--paper2)}
.sub-card:nth-child(3n+1){background:var(--lime)}
.sub-card:nth-child(3n+2){background:var(--lav)}
.sub-card:nth-child(3n){background:var(--peach)}
.sub-card h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;line-height:1.15;margin:0 0 10px}
.sub-card p{margin:0;font-size:16px;line-height:1.55}
.sub-list{list-style:none;display:grid;gap:10px;max-width:72ch;margin:0}
.sub-list li{position:relative;padding-left:26px;line-height:1.5}
.sub-list li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--green)}
.sub-card .sub-list{margin-top:4px}
.sub-steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(12px,1.6vw,20px);margin:6px 0 0}
.sub-steps li{border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:6px}
.sub-steps li:nth-child(4n+1){background:var(--peach)}
.sub-steps li:nth-child(4n+2){background:var(--lime)}
.sub-steps li:nth-child(4n+3){background:var(--lav)}
.sub-steps li:nth-child(4n){background:var(--paper2)}
.sub-steps b{font-size:13px;letter-spacing:.12em}
.sub-steps h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.04em;line-height:1.1;margin:12px 0 4px}
.sub-steps p{margin:0;font-size:15.5px;line-height:1.5}
.sub-table.cost{margin-top:6px}
.cost .cost-table.textual:not(.addons) thead th:last-child{text-align:left}
.sub a:not(.button){text-underline-offset:3px}
.sub .actions{margin:8px 0 0}

/* powiązane strony */
.related{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;margin:6px 0 0}
.related a{display:flex;flex-direction:column;gap:4px;height:100%;min-height:96px;padding:16px 20px;border:2px solid var(--ink);border-radius:20px;background:var(--paper2);text-decoration:none;font-size:15.5px;line-height:1.45}
.related a:hover{background:var(--peach)}
.related-t{font-weight:700;font-size:18px;text-decoration:underline;text-underline-offset:3px}

/* wezwanie do briefu na końcu podstrony */
.cta-band{padding:0 0 clamp(40px,6vw,80px)}
.cta-inner{background:var(--ink);color:var(--paper);border-radius:clamp(28px,4vw,56px);padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cta-inner h2{color:var(--paper);font-size:clamp(28px,3.6vw,46px);line-height:1.05;letter-spacing:-.045em;margin:0 0 4px}
.cta-inner p{max-width:60ch;color:#E6EDE0;margin:0 0 6px}
.cta-inner .small{color:#D2DCCB}

/* menu „Usługi” (details; działa bez JS) */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 5px;font-weight:600;font-size:15.5px;border-bottom:2px solid transparent}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.menu[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.menu summary:hover{border-color:var(--green)}
.menu ul{list-style:none;position:absolute;left:-12px;top:100%;z-index:70;min-width:260px;margin:4px 0 0;padding:8px;background:var(--paper2);border:2px solid var(--ink);border-radius:18px;box-shadow:6px 8px 0 rgba(23,40,33,.9)}
.navlinks .menu li a{display:flex;justify-content:flex-start;align-items:center;min-height:44px;padding:8px 14px;border-radius:12px;border-bottom:0;font-weight:600;font-size:15.5px}
.navlinks .menu li a:hover{background:var(--lime)}
.navlinks .menu li a[aria-current="page"]{background:var(--lav)}

/* menu mobilne: ukryte na desktopie */
.mnav{display:none}
@media (max-width:1000px){
  .has-mnav .navlinks{display:none}
  .has-mnav .brand{margin-right:auto}
  .has-mnav .tools{margin-left:0}
  .mnav{display:block}
  .mnav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);font-weight:700;font-size:14px}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav[open] summary{background:var(--ink);color:var(--paper)}
  .mnav nav{position:absolute;left:0;right:0;top:100%;z-index:70;background:var(--paper);border-bottom:2px solid var(--ink);box-shadow:0 14px 24px rgba(23,40,33,.18);padding:10px clamp(20px,4vw,48px) 18px;max-height:calc(100vh - 150px);overflow:auto}
  .mnav-h{font-size:12px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:var(--green);margin:12px 0 2px}
  .mnav ul{list-style:none}
  .mnav-local{display:flex;flex-direction:column}
  .mnav nav a{display:flex;align-items:center;min-height:44px;padding:8px 4px;text-decoration:none;font-weight:600;font-size:16.5px}
  .mnav nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
}

/* stopka z linkami do usług */
.footnav ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 22px;margin:2px 0 12px}
.footnav a{display:inline-flex;align-items:center;min-height:44px}

/* przegląd usług na stronie głównej */
.services{padding-top:clamp(56px,8vw,112px)}
.svc-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin:clamp(24px,4vw,44px) 0 0}
.svc{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(20px,2.4vw,30px);background:var(--paper2)}
.svc:nth-child(5n+1){background:var(--lime)}
.svc:nth-child(5n+2){background:var(--lav)}
.svc:nth-child(5n+3){background:var(--peach)}
.svc:nth-child(5n+4){background:var(--paper2)}
.svc:nth-child(5n){background:var(--lime)}
.svc h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.04em;line-height:1.1;margin:0 0 10px}
.svc p{margin:0 0 12px;font-size:16px;line-height:1.5}
.svc .svc-price{font-weight:700}
.svc-link{margin-top:auto;align-self:flex-start;display:inline-block;padding:10px 0;min-height:44px;font-weight:700;text-underline-offset:3px}
.svc-note{margin-top:22px;max-width:80ch}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc-grid{grid-template-columns:minmax(0,1fr)}}

/* landing instalatorów */
.h1-long{font-size:clamp(36px,4.6vw,68px);line-height:1;letter-spacing:-.05em;margin:0 0 24px;text-wrap:balance}
.hero .h1-long{animation:rise .75s var(--ease) .05s both}
.hero-landing{padding-top:clamp(4px,1.5vw,20px)}
.prices-lite .actions{margin:8px 0 0}