:root{--ink:#0b1324;--ink2:#334155;--mut:#64748b;--line:#e2e8f0;--bg:#ffffff;--soft:#f5f8fc;--pri:#0b5cad;--pri2:#0a4a8c;--acc:#14b8a6;--hero1:#071a33;--hero2:#0b3b70;--card:#fff;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:var(--pri)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9;border-radius:8px}
/* nagłówek */
header.top{position:sticky;top:0;z-index:5;background:rgba(7,26,51,.82);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
header.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.01em}
.mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#38bdf8,#14b8a6);display:grid;place-items:center;box-shadow:0 6px 18px rgba(20,184,166,.35)}
.mark svg{width:20px;height:20px}
nav.main{display:flex;gap:22px;margin-left:auto}
nav.main a{color:#cbd5e1;text-decoration:none;font-size:15px}nav.main a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;font-weight:600;font-size:15.5px;text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.pri{background:linear-gradient(135deg,#14b8a6,#0ea5e9);color:#04121f;box-shadow:0 10px 28px rgba(20,184,166,.35)}
.btn.ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.dark{background:var(--ink);color:#fff}
.btn.line{border-color:var(--line);color:var(--ink);background:#fff}
header.top .btn{padding:9px 16px;font-size:14.5px}
/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(1200px 600px at 85% -10%,rgba(56,189,248,.35),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(20,184,166,.28),transparent 60%),linear-gradient(160deg,var(--hero1),var(--hero2));margin-top:-68px;padding:140px 0 0}
.hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.hero .wrap>*,.show>*,.pain>*,.duo>*{min-width:0}
.pill{display:inline-flex;max-width:100%;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#bae6fd;font-size:13.5px;font-weight:600;letter-spacing:.02em}
.pill i{width:7px;height:7px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 0 4px rgba(45,212,191,.2)}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.025em;margin:18px 0 18px;font-weight:800}
h1 em{font-style:normal;background:linear-gradient(90deg,#5eead4,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:19px;color:#cbd5e1;max-width:560px;margin:0 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin:30px 0 0;padding:0;list-style:none;color:#94a3b8;font-size:14px}
.trust li::before{content:"✓";color:#2dd4bf;font-weight:700;margin-right:7px}
.stage{position:relative;padding-bottom:56px}
.browser{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);transform:perspective(1600px) rotateY(-9deg) rotateX(3deg);transform-origin:left center}
.bar{height:34px;background:#eef2f7;display:flex;align-items:center;gap:7px;padding:0 14px}
.bar i{width:11px;height:11px;border-radius:50%;background:#cbd5e1}.bar i:nth-child(1){background:#fb7185}.bar i:nth-child(2){background:#fbbf24}.bar i:nth-child(3){background:#34d399}
.browser>img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top left}
.bar span{margin-left:12px;flex:1;height:20px;border-radius:6px;background:#fff;color:#94a3b8;font-size:11.5px;line-height:20px;padding:0 10px;overflow:hidden;white-space:nowrap}
.phone{position:absolute;right:-12px;bottom:0;width:27%;aspect-ratio:9/17;object-fit:cover;object-position:top;border-radius:24px;border:6px solid #0b1324;background:#fff;box-shadow:0 30px 60px -10px rgba(0,0,0,.6)}
.wave{display:block;width:100%;height:70px;margin-top:-1px}
/* sekcje */
section{padding:96px 0}section.soft{background:var(--soft)}
.kicker{color:var(--pri);font-weight:700;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase}
h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15;letter-spacing:-.02em;margin:10px 0 14px}
.sub{color:var(--ink2);font-size:18px;max-width:720px;margin:0}
.center{text-align:center}.center .sub{margin:0 auto}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-36px;position:relative;z-index:2}
.fact{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 12px 30px -18px rgba(15,23,42,.35)}
.fact b{display:block;font-size:17px}.fact span{color:var(--mut);font-size:14.5px}
.pain{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.pain>div{border-radius:var(--r);padding:28px 30px}
.pain .before{background:#fff5f5;border:1px solid #fecaca}.pain .after{background:#f0fdfa;border:1px solid #99f6e4}
.pain h3{margin:0 0 12px;font-size:19px}.pain ul{margin:0;padding-left:20px;color:var(--ink2)}.pain li{margin:7px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .2s,box-shadow .2s}
.feat:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(11,92,173,.45)}
.ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#e0f2fe,#ccfbf1);margin-bottom:14px}
.ico svg{width:24px;height:24px;stroke:var(--pri);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin:0 0 6px;font-size:18px}.feat p{margin:0;color:var(--ink2);font-size:15.5px}
.show{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center;margin-top:72px}
.show.rev{grid-template-columns:1.25fr 1fr}.show.rev .txt{order:2}
.show h3{font-size:26px;letter-spacing:-.015em;margin:8px 0 10px}.show p{color:var(--ink2);margin:0 0 14px}
.show ul{margin:0;padding:0;list-style:none}.show li{padding:6px 0 6px 28px;position:relative;color:var(--ink2)}
.show li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border-radius:50%;background:#ccfbf1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
.shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(15,23,42,.45);background:#fff}
.shot figcaption{font-size:13px;color:var(--mut);padding:10px 14px;border-top:1px solid var(--line);background:#fbfdff}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 26px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:24px;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--pri),#0ea5e9);color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 20px -8px rgba(11,92,173,.6)}
.step h3{margin:6px 0 6px;font-size:18px}.step p{margin:0;color:var(--ink2);font-size:15.5px}
.sec{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 34px;margin-top:40px}
.sec div{display:flex;gap:14px;align-items:flex-start}.sec b{display:block}.sec span{color:var(--ink2);font-size:15.5px}
.sec svg{flex:none;width:26px;height:26px;stroke:var(--acc);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
/* licencja */
.dark{background:radial-gradient(800px 400px at 100% 0,rgba(56,189,248,.18),transparent 60%),linear-gradient(170deg,#071a33,#0b2d55);color:#fff}
.dark .kicker{color:#5eead4}.dark .sub{color:#cbd5e1}
.plans{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:22px;margin-top:48px;align-items:stretch}
.plan{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:30px 28px;display:flex;flex-direction:column}
.plan.best{background:#fff;color:var(--ink);border:0;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:translateY(-12px);position:relative}
.plan.best .tag{position:absolute;top:-13px;left:28px;background:linear-gradient(135deg,#14b8a6,#0ea5e9);color:#04121f;font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.04em}
.plan h3{margin:0;font-size:21px}.plan .price{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:14px 0 2px}
.plan .note{font-size:14px;color:#94a3b8;margin:0 0 18px}.plan.best .note{color:var(--mut)}
.plan ul{list-style:none;padding:0;margin:0 0 26px;flex:1}.plan li{padding:7px 0 7px 26px;position:relative;font-size:15.5px;color:#e2e8f0}
.plan.best li{color:var(--ink2)}
.plan li::before{content:"✓";position:absolute;left:0;color:#2dd4bf;font-weight:800}.plan.best li::before{color:#0f766e}
.plan .btn{width:100%}
/* FAQ */
.faq{max-width:820px;margin:40px auto 0}
.faq details{border:1px solid var(--line);border-radius:14px;padding:4px 22px;margin:12px 0;background:#fff}
.faq summary{cursor:pointer;font-weight:650;font-size:17px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:22px;color:var(--pri);line-height:1}
.faq details[open] summary::after{content:"–"}.faq details p{margin:0 0 16px;color:var(--ink2)}
.final{border-radius:26px;padding:56px;background:linear-gradient(135deg,#0b5cad,#0e7490);color:#fff;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 30px 60px -30px rgba(11,92,173,.7)}
.final h2{margin:0 0 6px;color:#fff}.final p{margin:0;color:#e0f2fe;font-size:17px}
footer{padding:44px 0;color:var(--mut);font-size:14.5px;border-top:1px solid var(--line)}
footer .wrap{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}footer a{color:var(--ink2);text-decoration:none;margin-left:18px}
@media (max-width:960px){
 nav.main{display:none}.hero .wrap,.show,.show.rev,.pain{grid-template-columns:1fr}.show.rev .txt{order:0}
 .browser{transform:none}.grid3,.steps,.plans{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}.plan.best{transform:none}
 .sec{grid-template-columns:1fr}section{padding:72px 0}.final{padding:36px}
}
@media (max-width:560px){.facts{grid-template-columns:1fr}.duo{grid-template-columns:1fr}header.top .btn.ghost{display:none}.phone{width:36%;right:-6px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}