/* SEO Do It Yourself – IT LOGIC */
:root{
	--red:#B83B3B;--red-d:#9E3030;--red-l:#FCEDEC;--ink:#25282D;--ink2:#4E535B;--grey:#5A5F68;--mute:#8A8E95;
	--bg:#F6F6F7;--line:#E4E5E8;--white:#fff;--green:#3E8E5E;--gold:#E9B949;
	--metal:linear-gradient(160deg,#FDFDFD 0%,#D9DADC 16%,#8F9196 42%,#B7B9BD 55%,#EDEEEF 70%,#A3A5A9 88%,#6E7075 100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#E9EAEC;line-height:1.5}
a{color:var(--red)}a:hover{color:var(--red-d)}
button,input{font-family:inherit;font-size:inherit}
.shell{max-width:480px;min-height:100vh;margin:0 auto;background:var(--bg);display:flex;flex-direction:column;position:relative}
@media (min-width:600px){.shell{box-shadow:0 0 0 1px var(--line),0 20px 60px rgba(20,20,22,.08)}}
.main{flex:1;padding:8px 20px 28px;display:flex;flex-direction:column;gap:14px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px 10px}
.top small{display:block;font-size:13px;font-weight:700;color:var(--grey)}
.top b{display:block;font-size:18px;font-weight:800;line-height:1.25}
.pill{font-size:12px;font-weight:700;color:var(--red);background:var(--red-l);padding:6px 10px;border-radius:999px;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.brand{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand-l{display:flex;align-items:center;gap:10px}
.brand-n{font-weight:800;font-size:17px;line-height:1.1}
.brand-s{font-size:11px;font-weight:700;color:var(--grey)}
.by{font-size:12px;font-weight:700;color:var(--grey)}
h1{margin:0;font-size:29px;line-height:1.15;font-weight:800}
h2{margin:0;font-size:20px;line-height:1.25;font-weight:800}
h3{margin:0;font-size:16px;line-height:1.3;font-weight:800}
p{margin:0}
.lead{font-size:16px;color:var(--ink2);line-height:1.55}
.muted{color:var(--grey);font-size:14px}
.small{font-size:13px;color:var(--grey)}
.center{text-align:center}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.card.pink{background:var(--red-l);border:0}
.dark{background:var(--ink);color:#fff;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}
.dark .k{font-size:13px;font-weight:700;color:#F2B8B4}
.dark p{color:#DADCE0;font-size:15px}
.form{display:flex;flex-direction:column;gap:14px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
label.f span{font-size:13px;font-weight:500;color:var(--grey)}
input[type=text],input[type=email],input[type=url]{height:48px;border-radius:10px;border:1px solid #CFD1D6;padding:0 14px;font-size:16px;background:#FAFAFB;color:var(--ink);width:100%}
input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border:0;border-radius:14px;background:var(--red);color:#fff!important;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{background:var(--red-d)}
.btn.block{width:100%}
.btn.ghost{background:#fff;color:var(--red)!important;border:1px solid var(--red);min-height:44px;font-size:15px}
.btn.ghost:hover{background:var(--red-l)}
.btn.dk{background:var(--ink)}.btn.dk:hover{background:#000}
.btn.sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:10px}
.lnk{background:none;border:0;padding:0 6px;min-height:40px;font-weight:800;font-size:14px;color:var(--ink);text-decoration:underline;cursor:pointer}
.err{background:var(--red-l);color:var(--red-d);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:700}
.note{display:flex;gap:12px;align-items:flex-start}
.demo{background:#FFF7E0;border:1px solid #F1DFA6;border-radius:12px;padding:10px 12px;font-size:13px;color:#6B5513}

/* Metalowe ikony jak na itlogic24.pl */
.ico{position:relative;width:46px;height:46px;border-radius:13px;color:#3B3D41;display:grid;place-items:center;flex-shrink:0;background:var(--metal);box-shadow:inset 0 1px 1px #fff,inset 0 -2px 3px rgba(0,0,0,.35),inset 2px 0 3px rgba(255,255,255,.5),0 8px 14px -6px rgba(20,20,22,.45),0 2px 4px rgba(20,20,22,.25)}
.ico::before{content:"";position:absolute;inset:5px;border-radius:9px;background:linear-gradient(170deg,rgba(255,255,255,.85) 0%,rgba(225,226,228,.55) 35%,rgba(150,152,156,.25) 70%,rgba(255,255,255,.4) 100%)}
.ico>*{position:relative;filter:drop-shadow(0 1px 0 rgba(255,255,255,.75))}
.ico span{font-weight:800;font-size:15px}
.ico.round{width:36px;height:36px;border-radius:999px}.ico.round::before{inset:4px;border-radius:999px}
.ico.xs{width:26px;height:26px;border-radius:999px}.ico.xs::before{inset:3px;border-radius:999px}
.ico.sm{width:40px;height:40px;border-radius:12px}

/* Porównanie */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) 64px 82px;gap:8px;align-items:center;font-size:14px}
.cmp.h{font-size:12px;font-weight:800;color:var(--grey);border-bottom:1px solid var(--line);padding-bottom:8px}
.cmp .l{font-weight:700;line-height:1.3}
.cmp .v{text-align:center;font-weight:800;border-radius:8px;padding:4px 0;background:var(--bg)}
.cmp .v.bad{color:var(--red);background:var(--red-l)}
.cmp .o{text-align:center;font-weight:700;color:var(--ink2)}
.comps{font-size:12px;color:var(--mute);line-height:1.5}

/* Zadania */
.bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bar i{display:block;height:8px;border-radius:999px;background:var(--red);transition:width .3s}
.task-h{display:flex;gap:12px;align-items:flex-start}
.chk{flex-shrink:0;width:44px;height:44px;border-radius:12px;border:2px solid #C3C6CC;background:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.chk svg{opacity:0}
.task.done .chk{background:var(--red);border-color:var(--red)}
.task.done .chk svg{opacity:1}
.task.done .tt{text-decoration:line-through;color:#6B6F76}
.tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--red);background:var(--red-l);padding:3px 8px;border-radius:999px}
.ready{background:var(--bg);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.ready .rl{font-size:12px;font-weight:800;color:var(--grey);letter-spacing:.04em}
.ready .rt{font-size:14px;line-height:1.5;white-space:pre-line;word-break:break-word}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.flyer-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 12px;border-radius:12px;border:0;background:var(--ink);color:#fff!important;font-size:14px;font-weight:800;text-decoration:none}

/* Plan */
.plan{border:2px solid var(--red)}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price b{font-size:34px;font-weight:800}
.feat{display:flex;gap:10px;align-items:center;font-size:14px;line-height:1.45}

/* Statystyki */
.stat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat small{display:block;font-size:12px;font-weight:700;color:var(--grey)}
.stat b{font-size:24px;font-weight:800}
.stat .q{color:#A3A6AC}

/* Dolne menu */
.nav{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-top:1px solid var(--line);padding:6px 8px calc(10px + env(safe-area-inset-bottom))}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;font-size:12px;font-weight:800;color:#6B6F76;text-decoration:none}
.nav a.on{color:var(--red)}
.foot{padding:16px 20px 22px;font-size:12px;color:var(--mute);text-align:center}
.foot a{color:var(--mute)}

/* Okienko */
dialog{border:0;padding:0;max-width:480px;width:100%;margin:auto auto 0;border-radius:22px 22px 0 0;background:#fff}
dialog::backdrop{background:rgba(37,40,45,.55)}
.sheet{padding:22px 22px 28px;display:flex;flex-direction:column;gap:14px}
.sheet-h{display:flex;justify-content:space-between;align-items:center}
.x{width:40px;height:40px;border:0;border-radius:999px;background:var(--bg);display:grid;place-items:center;cursor:pointer}
.steps{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45;color:var(--ink2)}
.steps b{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:700;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.toast.on{opacity:1}
.loading{position:fixed;inset:0;background:rgba(246,246,247,.92);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:20;text-align:center;padding:20px}
.loading.on{display:flex}
.spin{width:44px;height:44px;border-radius:999px;border:4px solid var(--line);border-top-color:var(--red);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}