:root{
  --ground:#EEF0F3; --surface:#FFFFFF; --ink:#15171C; --muted:#545A68;
  --blue:#2B3BFF; --blue-ink:#FFFFFF; --yellow:#FFD23F; --line:#D5D9E0;
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --body:"Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101218; --surface:#1A1D26; --ink:#F1F2F5; --muted:#A6ACBA;
    --blue:#6F7BFF; --blue-ink:#0B0D14; --yellow:#FFD23F; --line:#2C303C; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#101218; --surface:#1A1D26; --ink:#F1F2F5; --muted:#A6ACBA;
  --blue:#6F7BFF; --blue-ink:#0B0D14; --yellow:#FFD23F; --line:#2C303C; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}

/* NAV */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{display:inline-block;flex:none;width:18px;height:18px;border:2.5px solid var(--ink);border-radius:4px;background:linear-gradient(90deg,var(--ground) 50%,var(--yellow) 50%);transform:rotate(-8deg)}
.logo > span{display:flex;align-items:baseline;gap:8px;line-height:1;white-space:nowrap}
.logo .wm span{display:inline}
.logo small{font:600 12px/1 var(--body);letter-spacing:.02em;color:var(--muted)}
@media (max-width:480px){.logo > span{flex-direction:column;align-items:flex-start;gap:4px}.logo small{font-size:11px}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:0;font:600 16px/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .2s ease}
.btn-blue{background:var(--blue);color:var(--blue-ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.nav .btn{min-height:44px;padding:0 18px;font-size:15px}

/* HERO */
.hero{padding:56px 0 40px}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,6.2vw,76px);line-height:1.04;letter-spacing:-.035em;margin:0}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:block;transform:translateY(105%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.12s}
.hero h1 .ln:nth-child(3) span{animation-delay:.24s}
.hero h1 .pay{color:var(--blue)}
.retro .hero h1 .pay{color:#0000EE}
@keyframes rise{to{transform:none}}
.hero-row{display:grid;grid-template-columns:1fr;gap:28px}
.hero-meta{display:grid;gap:24px;align-items:end}
.hero-meta p.lead{margin:0}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:44ch;margin:0 0 22px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){.hero-row{gap:40px}.hero-meta{grid-template-columns:1fr auto;gap:40px}.hero{padding-top:96px}}

/* BEFORE / AFTER */
.compare{margin-top:clamp(48px,6vw,72px)}
.compare .frame{max-width:min(100%,760px,calc((100svh - 280px) * 1.532));margin-inline:auto}
.compare-note{text-align:center}
.frame{background:var(--surface);border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:10px 10px 0 var(--ink)}
.chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:2px solid var(--ink);background:var(--surface)}
.chrome b{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink)}
.chrome b:nth-child(1){background:#FF6B5B}.chrome b:nth-child(2){background:var(--yellow)}.chrome b:nth-child(3){background:#3DD68C}
.chrome .url{margin-left:10px;flex:1;max-width:340px;font-size:13px;color:var(--muted);background:var(--ground);border-radius:999px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot{position:relative;aspect-ratio:720/470;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.stage{position:absolute;inset:0 auto auto 0;width:720px;height:470px;transform-origin:0 0;transform:scale(var(--s,1))}
.layer{position:absolute;inset:0}
.after-l{clip-path:inset(0 0 0 var(--pos,50%))}
.handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:0;pointer-events:none}
.handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink)}
.knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--yellow);border:2.5px solid var(--ink);display:grid;place-items:center}
.knob svg{width:26px;height:26px;stroke:#15171C}
.tag{position:absolute;top:12px;font:600 12px/1 var(--body);padding:7px 10px;border-radius:999px;background:var(--ink);color:var(--ground);pointer-events:none;transition:opacity .25s}
.tag.l{left:12px}.tag.r{right:12px;background:var(--blue);color:var(--blue-ink)}
.shot input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;pointer-events:none}
.shot:focus-within .knob{outline:3px solid var(--blue);outline-offset:3px}
.compare-note{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 16px}

/* the old site */
.old{background:#C0C0C0;font-family:"Times New Roman",Times,serif;color:#000;height:100%}
.old .top{background:#000080;color:#FFFF00;text-align:center;padding:14px 0 10px;border-bottom:4px ridge #999}
.old .top h2{margin:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:30px;letter-spacing:1px;text-shadow:2px 2px 0 #FF0000}
.old .top small{color:#fff;font-style:italic;font-size:15px}
.old .mq{background:#FFFF00;color:#FF0000;font:bold 15px "Comic Sans MS","Comic Sans",cursive;white-space:nowrap;overflow:hidden;padding:4px 0;border-bottom:2px solid #000}
.old .mq span{display:inline-block;padding-left:100%;animation:mq 11s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
.old .cols{display:flex;gap:10px;padding:10px}
.old .side{width:150px;background:#FFFFCC;border:3px outset #fff;padding:8px;font-size:15px;line-height:1.8}
.old .side a{color:#0000EE;display:block}
.old .main{flex:1;background:#fff;border:3px inset #fff;padding:10px 14px;font-size:15px}
.old .main h3{margin:0 0 6px;color:#800000;font-size:21px;text-decoration:underline}
.old .wip{display:inline-block;margin:8px 0;padding:6px 14px;font:bold 14px Arial,sans-serif;background:repeating-linear-gradient(45deg,#FFD700 0 10px,#000 10px 20px);color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.old .cnt{font-family:"Courier New",monospace;background:#000;color:#0F0;padding:2px 6px;letter-spacing:2px}
.old .foot{font-size:12px;color:#333;text-align:center;padding-top:4px}
.old .blink{animation:bl 1s steps(1) infinite}
@keyframes bl{50%{visibility:hidden}}

/* the new site */
.new{--n-bg:#FBFAF7;--n-ink:#1F3B2D;--n-acc:#C08A55;--n-mut:#4A5A50;--n-line:#E5E1D8;background:var(--n-bg);color:var(--n-ink);height:100%;transition:background .4s,color .4s;font-family:"Instrument Sans","Segoe UI",system-ui,sans-serif;display:flex;flex-direction:column}
.new nav{display:flex;align-items:center;justify-content:space-between;padding:18px 34px}
.new .wm{font:600 24px/1 "Fraunces",Georgia,serif;color:var(--n-ink);max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--n-mut)}
.new .call{background:var(--n-ink);color:var(--n-bg);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600}
.new .hx{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;padding:18px 34px 0;flex:1}
.new h3{font:600 44px/1.02 "Fraunces",Georgia,serif;margin:10px 0 14px;letter-spacing:-.02em;color:var(--n-ink)}
.new p{margin:0 0 20px;font-size:15px;color:var(--n-mut);max-width:32ch}
.new .b{display:inline-block;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;margin-right:8px}
.new .b1{background:var(--n-acc);color:#fff}.new .b2{box-shadow:inset 0 0 0 1.5px var(--n-ink);color:var(--n-ink)}
.new .wood{position:relative;border-radius:18px 18px 0 0;background:var(--n-acc);overflow:hidden;transition:background .4s}
.new .wood::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(97deg,transparent 0 22px,rgba(90,50,20,.18) 22px 24px,transparent 24px 40px,rgba(255,240,220,.14) 40px 43px)}
.new .wood::after{content:"";position:absolute;left:30%;top:38%;width:70px;height:46px;border-radius:50%;border:3px solid rgba(90,50,20,.25);box-shadow:0 0 0 10px rgba(90,50,20,.08)}
.new .badge{position:absolute;left:18px;bottom:18px;z-index:1;background:var(--n-bg);border-radius:12px;padding:10px 14px;font-size:13px;color:var(--n-ink);font-weight:600}
.new .strip{display:flex;border-top:1px solid var(--n-line)}
.new .strip div{flex:1;padding:14px 34px;font:600 15px "Fraunces",Georgia,serif;color:var(--n-ink);border-right:1px solid var(--n-line)}
.new .strip div:last-child{border:0}

/* SECTIONS */
section{padding:clamp(64px,8vw,112px) 0}
section:not(.cta){position:relative}
section:not(.cta)::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1180px,100% - 40px);height:1px;background:var(--line)}
.retro section:not(.cta)::before{height:4px;background:none;border-top:4px ridge #999}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.2vw,50px);line-height:1.05;letter-spacing:-.03em;margin:0 0 18px;max-width:18ch}
.sub{color:var(--muted);max-width:52ch;margin:0 0 clamp(40px,5vw,64px)}

/* steps */
.steps{position:relative;display:grid;gap:44px;list-style:none;margin:0;padding:0 0 0 64px;counter-reset:s}
.steps::before,.steps .fill{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:4px;border-radius:4px;background:var(--line)}
.steps .fill{background:var(--blue);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .1s linear}
.steps li{position:relative;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:-64px;top:-4px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:700 18px var(--display);background:var(--surface);border:2.5px solid var(--line);color:var(--muted);transition:background .3s,border-color .3s,color .3s}
.steps li.on::before{background:var(--blue);border-color:var(--blue);color:var(--blue-ink)}
.steps li:last-child.on::before{background:var(--yellow);border-color:var(--ink);color:#15171C}
.steps h3{font:700 20px/1.2 var(--display);margin:0 0 6px;letter-spacing:-.01em}
.steps p{margin:0;color:var(--muted);max-width:50ch}
@media (min-width:900px){.steps-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}.steps-wrap .intro{position:sticky;top:120px;align-self:start}}

/* pricing */
.plans{display:grid;gap:20px;max-width:880px;margin-inline:auto}
#cennik .h2,#cennik .sub{text-align:center;margin-inline:auto}
.netto{max-width:880px;margin:16px auto 0;text-align:center;font-size:13px;color:var(--muted)}
@media (min-width:820px){.plans{grid-template-columns:1fr 1fr;align-items:stretch}}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:24px 22px;font-size:16px}
.plan h3{font:800 21px/1.1 var(--display);letter-spacing:-.02em;margin:0 0 6px}
.plan .for{margin:0 0 12px;font-size:15px;color:var(--muted);max-width:34ch}
.plan .num,.care .num{font:800 clamp(40px,5vw,54px)/1 var(--display);letter-spacing:-.04em;margin:0 0 16px}
.plan .num small,.care .num small{font-size:.3em;letter-spacing:0;margin-left:6px}
.plan ul,.care ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.plan li,.care li{display:flex;gap:12px;align-items:flex-start}
.plan li svg,.care li svg{flex:none;width:20px;height:20px;margin-top:1px;stroke:var(--blue)}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan-hot{background:var(--yellow);color:#15171C;box-shadow:8px 8px 0 var(--ink)}
.plan-hot .for{color:#3B3A2E}
.plan-hot li svg{stroke:#15171C}
.plan-hot .btn-blue{background:#15171C;color:#FFD23F}
.flag{position:absolute;top:-13px;right:20px;background:var(--ink);color:var(--ground);font:600 13px/1 var(--body);padding:7px 12px;border-radius:999px}
.care{margin-top:24px;max-width:880px;margin-inline:auto;display:grid;gap:8px 32px;align-items:center;border:2px dashed var(--ink);border-radius:18px;padding:20px 22px;font-size:16px}
.care h3{font:800 20px/1.2 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.care h3 span{display:block;font:600 14px/1.3 var(--body);letter-spacing:0;color:var(--muted);margin-top:6px}
.care p{margin:0 0 18px;color:var(--muted);max-width:40ch}
.care ul{margin:0}
.care .num{margin:10px 0 0}
@media (min-width:820px){.care{grid-template-columns:1.2fr 1fr auto}.care p{margin:0}.care .num{margin:0}}
.retro .plan{border-radius:0;border:4px ridge #999;background:#FFFFCC;box-shadow:none}
.retro .plan-hot{background:#FFFF00}
.retro .flag{border-radius:0;background:#FF0000;color:#FFFF00;font-family:"Comic Sans MS",cursive}
.retro .plan .num,.retro .care .num{color:#FF0000;font-family:"Comic Sans MS",cursive;letter-spacing:0}
.retro .plan li svg,.retro .care li svg{stroke:#008000}
.retro .care{border-radius:0;border:4px dashed #000080;background:#FFFFFF}

/* form */
.cta{background:var(--yellow);color:#15171C;border-block:2px solid var(--ink)}
.cta .h2{color:#15171C}
.cta .sub{color:#3B3A2E}
.form{display:grid;gap:16px;max-width:720px}
.form .row{display:grid;gap:16px}
@media (min-width:700px){.form .row{grid-template-columns:1fr 1fr}}
.form label{display:grid;gap:6px;font-weight:600;font-size:15px}
.form input,.form textarea{font:inherit;font-size:17px;padding:14px 16px;border-radius:12px;border:2px solid #15171C;background:#FFFDF3;color:#15171C;min-height:52px;width:100%}
.form textarea{min-height:110px;resize:vertical}
.form .btn{background:#15171C;color:#FFD23F;justify-self:start;min-height:54px;padding:0 28px;font-size:17px}
.form .hint{font-size:14px;color:#3B3A2E;margin:0}
.status{font-weight:600;margin:0;min-height:1.5em}
.hp{position:absolute;left:-9999px}

/* footer */
footer{padding:56px 0 64px;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 36px;justify-content:space-between;align-items:center}
footer .links{display:flex;flex-wrap:wrap;gap:12px 24px}
footer a{text-decoration:none;font-weight:600}
footer small{color:var(--muted);font-size:14px}
footer .pp{font-weight:500;font-size:14px;color:var(--muted);text-decoration:underline}
.form .hint a{color:inherit;text-decoration:underline}




/* FAQ */
.faq{border-top:2px solid var(--ink);max-width:860px}
.faq details{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:22px 0;font:700 clamp(17px,2vw,21px)/1.3 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .2s}
.faq summary .pm svg{width:18px;height:18px;stroke:var(--ink)}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--yellow)}
.faq details[open] summary .pm svg{stroke:#15171C}
.faq .ans{padding:0 56px 24px 0;color:var(--muted);max-width:60ch}
.faq .ans p{margin:0}
.faq details[open] .ans{animation:faqIn .35s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}
.retro .faq{border-top:4px ridge #999}
.retro .faq details{border-bottom:4px ridge #999;background:#FFFFCC}
.retro .faq summary{color:#0000EE;text-decoration:underline;padding-inline:12px}
.retro .faq summary .pm{border-radius:0;border:3px outset #fff;background:#C0C0C0}
.retro .faq .ans{padding-inline:12px;color:#000}


/* wordmark NowaStronka.pl */
.logo .wm{display:inline;letter-spacing:-.03em}
.logo .w1{color:var(--blue)}
.logo .w2{color:var(--ink)}
.logo .w3{color:var(--muted);font-weight:500}
.retro .logo .w1{color:#00FFFF}.retro .logo .w2{color:#FFFF00}.retro .logo .w3{color:#FFFFFF}
.retro footer .logo .w2{color:#FFFF00}

/* ===== TIME MACHINE: the whole page as a 2005 website ===== */
.only-retro{display:none}
.tm{position:fixed;z-index:50;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--yellow);font:600 15px/1 var(--body);cursor:pointer;box-shadow:4px 4px 0 var(--yellow)}
.tm svg{width:22px;height:22px;stroke:currentColor}
.tm-wipe{position:fixed;inset:0;z-index:60;background:var(--yellow);pointer-events:none;clip-path:inset(0 100% 0 0)}
.tm-wipe::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4px)}

:root.retro{
  --ground:#C0C0C0; --surface:#FFFFFF; --ink:#000000; --muted:#333333;
  --blue:#0000EE; --blue-ink:#FFFFFF; --yellow:#FFFF00; --line:#808080;
  --display:"Times New Roman",Times,serif; --body:"Times New Roman",Times,serif; color-scheme:light;
}
.retro .only-retro{display:block}
.retro span.only-retro{display:inline}
.retro .nav{background:#000080;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:4px ridge #999}
.retro .nav .logo{font-family:"Comic Sans MS","Comic Sans",cursive;color:#FFFF00;text-shadow:2px 2px 0 #FF0000}
.retro .nav .logo small{color:#FFFFFF;font-family:"Times New Roman",serif}
.retro .logo i{border-radius:0;transform:none;border:2px outset #fff}
.retro .btn,.retro .form .btn{border-radius:0;background:#C0C0C0;color:#000;box-shadow:none;border:3px outset #FFFFFF;font:bold 15px Arial,sans-serif;text-decoration:none}
.retro .btn:active{border-style:inset}
.retro .hero{text-align:center}
.retro .hero-row{grid-template-columns:1fr}
.retro .hero-meta{grid-template-columns:1fr;justify-items:center}
.retro .hero h1{max-width:none;color:#800000;text-decoration:underline;letter-spacing:0;font-weight:700;text-shadow:3px 3px 0 #FFFF00}
.retro .hero p.lead,.retro .sub{margin-inline:auto;color:#000}
.retro .hero .ctas{justify-content:center}
.retro .frame{border-radius:0;box-shadow:none;border:4px ridge #999}
.retro .chrome{background:#000080;border-bottom:0}
.retro .chrome .url{background:#fff;border-radius:0;color:#000;border:2px inset #fff}
.retro section{text-align:left}
.retro .h2{color:#800000;text-decoration:underline;letter-spacing:0;max-width:none}
.retro .steps li::before{border-radius:0;border:3px outset #fff;background:#FFFFCC;color:#000}
.retro .steps li.on::before{background:#0000EE;color:#FFFF00}
.retro .steps .fill{background:#FF0000}
.retro .steps h3{color:#0000EE;text-decoration:underline}
.retro .form input,.retro .form textarea{border-radius:0;border:3px inset #fff;background:#fff;font-family:"Courier New",monospace}
.retro .compare-note{text-align:center}
.retro footer{background:#000080;color:#FFFF00;text-align:center}
.retro footer .wrap{justify-content:center}
.retro footer a{color:#00FFFF;text-decoration:underline}
.retro footer small{color:#fff}
.retro .tm{border-radius:0;background:#C0C0C0;color:#000;border:3px outset #fff;box-shadow:none;font:bold 15px Arial,sans-serif}
.retro-mq{background:#FFFF00;color:#FF0000;font:bold 16px "Comic Sans MS","Comic Sans",cursive;white-space:nowrap;overflow:hidden;padding:6px 0;border-bottom:2px solid #000}
.retro-mq span{display:inline-block;padding-left:100%;animation:mq 14s linear infinite}
.retro-wip{text-align:center;padding:18px 0 0}
.retro-wip span{display:inline-block;padding:8px 18px;font:bold 16px Arial,sans-serif;background:repeating-linear-gradient(45deg,#FFD700 0 12px,#000 12px 24px);color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.retro-cnt{font-family:"Courier New",monospace;background:#000;color:#0F0;padding:2px 6px;letter-spacing:2px}


/* sticky call button (phones) */
.callbar{display:none}
@media (max-width:899px){
  body.has-call{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.has-call .callbar{position:fixed;z-index:49;left:82px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;background:var(--blue);color:var(--blue-ink);font:600 17px/1 var(--body);text-decoration:none;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
  .callbar svg{width:22px;height:22px;stroke:currentColor}
  body.has-call .tm{width:52px;height:52px;min-height:52px;padding:0;justify-content:center}
  body.has-call .tm #tm-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.retro .callbar{border-radius:0;background:#C0C0C0;color:#000;border:3px outset #fff;box-shadow:none;font:bold 16px Arial,sans-serif}


/* ===== WERSJA POŚREDNIA (podgląd) ===== */
:root:not(.retro){
  --ground:#F1F3F6; --surface:#FFFFFF; --ink:#1E2230; --muted:#5B6272;
  --blue:#3F55F0; --blue-ink:#FFFFFF; --yellow:#FFDB6E; --line:#DCE0E7;
}
@media (prefers-color-scheme:dark){
  :root:not(.retro):not([data-theme="light"]){
    --ground:#12151B; --surface:#1B1F28; --ink:#EEF0F4; --muted:#A5ACBA;
    --blue:#7D8CFF; --blue-ink:#0E1118; --yellow:#FFDB6E; --line:#2C313C;
  }
}
html:not(.retro) .logo{font-weight:700}
html:not(.retro) .logo i{border-width:2px}
html:not(.retro) .hero h1{font-weight:700;letter-spacing:-.035em}
html:not(.retro) .h2{font-weight:700}
html:not(.retro) .btn-ghost{box-shadow:inset 0 0 0 1.5px var(--ink)}
html:not(.retro) .frame{border-width:1.5px;box-shadow:6px 6px 0 var(--ink)}
html:not(.retro) .chrome{border-bottom-width:1.5px}
html:not(.retro) .chrome b{border-width:1.5px}
html:not(.retro) .handle::before{width:2px;left:-1px;box-shadow:0 0 0 1px var(--ink)}
html:not(.retro) .knob{width:46px;height:46px;border-width:1.5px}
html:not(.retro) .knob svg{width:22px;height:22px}
html:not(.retro) .steps::before,html:not(.retro) .steps .fill{width:3px;left:21.5px}
html:not(.retro) .steps li::before{border-width:1.5px}
html:not(.retro) .steps li:last-child.on::before{border-color:var(--ink)}
html:not(.retro) .plan{border-width:1.5px}
html:not(.retro) .plan-hot{box-shadow:6px 6px 0 var(--ink)}
html:not(.retro) .flag{font-weight:600}
html:not(.retro) .care{border-width:1.5px}
html:not(.retro) .faq{border-top-width:1.5px}
html:not(.retro) .faq details{border-bottom:1.5px solid var(--line)}
html:not(.retro) .faq details:last-child{border-bottom-color:var(--ink)}
html:not(.retro) .faq summary .pm{border-width:1.5px;width:38px;height:38px}
html:not(.retro) .cta{border-block-width:1.5px}
html:not(.retro) .form input,html:not(.retro) .form textarea{border-width:1.5px}
html:not(.retro) .tm{border-width:1.5px;box-shadow:3px 3px 0 var(--yellow)}
@media (max-width:899px){html:not(.retro) body.has-call .callbar{border-width:1.5px;box-shadow:3px 3px 0 var(--ink)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .ln span{transform:none}
  html{scroll-behavior:auto}
}