:root{
  --kremowy:#FFF6EF; --krem-cien:#FBEFE8; --sliwka:#33293A; --sliwka-65:#7A6C72;
  --koral:#F2785C; --koral-deep:#B23D26; --koral-tint:#FAECE7;
  --zloto:#F6B24E; --zloto-deep:#C77D12; --zloto-tint:#FDEFD8;
  --jadeit:#20B3A1; --jadeit-deep:#0B5A4F; --jadeit-tint:#DCF3EF;
  --czerwien:#D4332E; --czerwien-tint:#FBE9E8; --czerwien-deep:#A32D2D;
  --bursztyn:#BA7517; --bursztyn-tint:#FAEEDA; --bursztyn-deep:#854F0B;
  --linia:#EDE0D4; --przygas:#9A8478;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--kremowy); color:var(--sliwka);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
section{padding:78px 0}
h1,h2,h3{line-height:1.18; letter-spacing:-.015em; margin:0}
a{color:var(--koral-deep)}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--koral-deep); margin:0 0 16px; display:flex; align-items:center; gap:8px}
.lead-p{font-size:18px; color:var(--sliwka-65); line-height:1.6}
.sun{display:inline-block; vertical-align:middle}

.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:21px}
.brand .my{font-weight:400; opacity:.5}
.nav a.cta-link{font-size:14px; font-weight:600; color:var(--koral-deep); text-decoration:none; border:1.5px solid var(--koral); border-radius:999px; padding:8px 16px}
.nav a.cta-link:hover{background:var(--koral-tint)}

.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; padding-top:34px}
.hero h1{font-size:clamp(32px,5vw,52px); font-weight:700}
.hero h1 em{font-style:normal; color:var(--koral-deep)}
.hero .lead-p{margin:20px 0 28px; max-width:36ch}

/* Signup form: name + email row, then button */
.form{display:flex; gap:10px; flex-wrap:wrap; max-width:460px}
.form .fields{display:flex; gap:10px; flex:1; min-width:100%; flex-wrap:wrap}
.form input[type=email],.form input[type=text]{
  flex:1; min-width:150px; font:inherit; font-size:16px; color:var(--sliwka);
  background:#fff; border:1px solid var(--linia); border-radius:12px; padding:14px 16px;
}
.form input::placeholder{color:#B7A99C}
.form input:focus-visible{outline:2px solid var(--koral); outline-offset:1px; border-color:var(--koral)}
.form input[name=website]{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.btn{
  font:inherit; font-size:16px; font-weight:600; cursor:pointer;
  background:var(--koral); color:#fff; border:0; border-radius:12px; padding:14px 22px;
}
.btn:hover{background:#E8694D}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--sliwka); outline-offset:2px}
.btn.secondary{background:#fff; color:var(--sliwka); border:1.5px solid var(--linia)}
.btn.secondary:hover{background:var(--krem-cien)}
.btn.danger{background:var(--czerwien); color:#fff}
.btn.danger:hover{background:var(--czerwien-deep)}

/* Consent checkbox */
.consent{display:flex; align-items:flex-start; gap:9px; margin:14px 0 0; max-width:460px; font-size:13px; color:var(--sliwka-65); line-height:1.5}
.consent input[type=checkbox]{margin-top:3px; width:17px; height:17px; flex-shrink:0; accent-color:var(--koral)}
.consent.error{color:var(--czerwien-deep)}
.consent a{color:var(--koral-deep)}

.micro{font-size:13px; color:var(--przygas); margin:14px 0 0; max-width:460px}
.info-layer{font-size:11.5px; color:var(--przygas); margin:12px 0 0; max-width:460px; line-height:1.5}
.info-layer a{color:var(--przygas); text-decoration:underline}
.err-msg{display:none; font-size:13px; color:var(--czerwien-deep); margin:10px 0 0}
.err-msg.show{display:block}
.ok{display:none; font-size:16px; font-weight:600; color:var(--jadeit-deep); background:var(--jadeit-tint); border-radius:12px; padding:14px 18px; max-width:460px}
.ok.show{display:flex; align-items:center; gap:10px}

.device{background:var(--kremowy); border:1px solid var(--linia); border-radius:22px; overflow:hidden; max-width:340px; margin-left:auto; box-shadow:0 1px 0 var(--linia)}
.device .top{background:var(--koral); color:#fff; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:15px}
.device .top .av{width:26px; height:26px; border-radius:50%; background:#fff; color:var(--koral-deep); display:flex; align-items:center; justify-content:center; font-size:12px}
.device .body{padding:14px 16px}
.bubble{background:#fff; border-left:3px solid var(--koral); padding:10px 12px; margin-bottom:14px}
.bubble .who{font-size:11px; font-weight:600; color:var(--koral-deep); margin:0 0 3px}
.bubble p{margin:0; font-size:13px; line-height:1.5}
.row{background:#fff; border-radius:12px; padding:10px 11px; display:flex; align-items:center; gap:11px; margin-bottom:9px}
.row .ico{width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center}
.row .t{flex:1; min-width:0}
.row .t b{font-size:12.5px; font-weight:500; display:block}
.row .t span{font-size:11px; color:var(--przygas)}
.pill{font-size:10px; padding:2px 8px; border-radius:7px; white-space:nowrap; font-weight:500}
.note{display:flex; align-items:center; gap:8px; background:var(--zloto-tint); border-radius:11px; padding:9px 12px; margin-top:4px}
.note span{font-size:11px; line-height:1.4}

.problem{background:var(--krem-cien)}
.problem h2{font-size:clamp(26px,3.6vw,36px); font-weight:700; max-width:18ch}
.problem .lead-p{margin-top:18px; max-width:54ch}

.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px}
.step{background:#fff; border:1px solid var(--linia); border-radius:18px; padding:26px 22px}
.step .badge{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.step h3{font-size:18px; font-weight:600; margin-bottom:9px}
.step p{margin:0; font-size:14.5px; color:var(--sliwka-65); line-height:1.55}
.section-head{max-width:46ch}
.section-head h2{font-size:clamp(26px,3.6vw,36px); font-weight:700}
.section-head .lead-p{margin-top:16px}

.voice{background:var(--kremowy)}
.chat{max-width:560px; margin:38px auto 0}
.msg{background:#fff; border:1px solid var(--linia); border-radius:18px 18px 18px 6px; padding:14px 18px; margin-bottom:14px; font-size:16px; line-height:1.55}
.msg .who{font-size:11px; font-weight:600; color:var(--koral-deep); margin:0 0 4px; display:flex; align-items:center; gap:6px}
.msg p{margin:0}
.voice .kicker{text-align:center; font-size:14px; color:var(--przygas); margin-top:22px}

.trust .inner{background:#fff; border:1px solid var(--linia); border-radius:22px; padding:46px 40px; max-width:760px; margin:0 auto; text-align:center}
.trust h2{font-size:clamp(24px,3.4vw,32px); font-weight:700; max-width:22ch; margin:0 auto}
.trust p{font-size:17px; color:var(--sliwka-65); margin:18px auto 0; max-width:52ch; line-height:1.6}

.final{text-align:center}
.final h2{font-size:clamp(30px,4.4vw,46px); font-weight:700}
.final .lead-p{margin:18px auto 28px; max-width:40ch}
.final .form, .final .ok, .final .consent, .final .micro, .final .info-layer{margin-left:auto; margin-right:auto}
.final .consent{text-align:left}

footer{border-top:1px solid var(--linia); padding:30px 0; color:var(--przygas); font-size:13px}
footer .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer .brand{font-size:17px; color:var(--sliwka)}
footer .links{display:flex; gap:18px; flex-wrap:wrap}
footer .links a,footer .links button{
  color:var(--przygas); font-size:12.5px; text-decoration:none; background:none; border:0;
  padding:0; cursor:pointer; font-family:inherit;
}
footer .links a:hover,footer .links button:hover{color:var(--sliwka); text-decoration:underline}

.fade{opacity:0; transform:translateY(10px); animation:rise .7s ease forwards}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .fade{animation:none; opacity:1; transform:none} html{scroll-behavior:auto} }

/* jak to działa */
.how{background:var(--krem-cien)}
.flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:14px; margin-top:42px}
.fstep{background:#fff; border:1px solid var(--linia); border-radius:18px; padding:20px 18px; display:flex; flex-direction:column}
.fstep .fnum{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--koral-deep); margin-bottom:12px}
.fstep h3{font-size:16px; font-weight:600; margin-bottom:7px}
.fstep p{margin:0 0 16px; font-size:13.5px; color:var(--sliwka-65); line-height:1.5}
.fstep .vis{margin-top:auto}
.arrow{display:flex; align-items:center; justify-content:center; color:var(--koral)}
.note-card{background:#FBF7F0; border:1px solid var(--linia); border-radius:10px; padding:13px 14px; transform:rotate(-1.4deg); position:relative}
.note-card .cam{position:absolute; top:-10px; right:-10px; width:28px; height:28px; border-radius:50%; background:var(--koral); display:flex; align-items:center; justify-content:center}
.scrawl{font-family:"Bradley Hand","Segoe Script","Comic Sans MS",cursive; color:#6B5E66; font-size:13.5px; line-height:1.75}
.scan{display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center; padding-top:6px}
.scan .orb{width:52px; height:52px; border-radius:50%; background:var(--zloto-tint); display:flex; align-items:center; justify-content:center; color:var(--zloto-deep)}
.scan .mini-bubble{background:#fff; border:1px solid var(--linia); border-radius:12px 12px 12px 4px; padding:7px 11px; font-size:11.5px; color:var(--sliwka)}
.todo{background:#fff; border:1px solid var(--linia); border-radius:10px}
.todo .ti{display:flex; align-items:center; gap:9px; padding:9px 11px; font-size:12.5px}
.todo .ti + .ti{border-top:1px solid var(--linia)}
.todo .chk{width:17px; height:17px; border-radius:5px; border:1.5px solid var(--jadeit); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff}
.todo .chk.done{background:var(--jadeit)}
.todo .rmd{margin-left:auto; font-size:10px; background:var(--jadeit-tint); color:var(--jadeit-deep); padding:2px 7px; border-radius:6px; white-space:nowrap}
.ahead{margin:34px auto 0; background:#fff; border:1px solid var(--linia); border-left:3px solid var(--koral); border-radius:14px; padding:22px 24px; max-width:700px}
.ahead .lab{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--koral-deep); margin-bottom:10px}
.ahead .src{font-size:11px; color:var(--przygas); background:var(--krem-cien); border-radius:6px; padding:3px 9px; display:inline-block; margin-bottom:12px}
.ahead .mz{font-size:17px; line-height:1.55; margin:0}
.ahead .mz .who{color:var(--koral-deep); font-weight:600}
.ahead .sub{font-size:13px; color:var(--sliwka-65); margin:13px 0 0}

/* ---- Cookie consent banner ---- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:#fff; border-top:1px solid var(--linia); box-shadow:0 -2px 20px rgba(51,41,58,.08);
  padding:18px 24px; display:none;
}
.cookie-banner.show{display:block}
.cookie-banner .cb-inner{max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.cookie-banner p{margin:0; font-size:13.5px; color:var(--sliwka-65); line-height:1.5; flex:1; min-width:260px}
.cookie-banner .cb-actions{display:flex; gap:10px; flex-wrap:wrap}
.cookie-banner .btn{padding:11px 18px; font-size:14px}

/* ---- Sub-pages (privacy policy, confirm, manage, unsubscribe) ---- */
.page{max-width:760px; margin:0 auto; padding:56px 24px}
.page h1{font-size:clamp(28px,4vw,40px); font-weight:700; margin-bottom:8px}
.page h2{font-size:22px; font-weight:600; margin:34px 0 10px}
.page h3{font-size:17px; font-weight:600; margin:22px 0 8px}
.page p,.page li{font-size:15.5px; color:var(--sliwka-65); line-height:1.65}
.page ul{padding-left:20px}
.page .back{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; text-decoration:none; margin-bottom:24px}
.card{background:#fff; border:1px solid var(--linia); border-radius:18px; padding:34px 32px; margin-top:20px}
.card h1{font-size:26px; margin-bottom:14px}
.status-icon{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.status-icon.ok{background:var(--jadeit-tint); color:var(--jadeit-deep)}
.status-icon.warn{background:var(--czerwien-tint); color:var(--czerwien-deep)}
.data-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--linia); font-size:15px}
.data-row .k{color:var(--przygas)}
.data-row .v{font-weight:600; color:var(--sliwka); text-align:right; word-break:break-word}
.spinner{display:inline-block; width:20px; height:20px; border:2.5px solid var(--linia); border-top-color:var(--koral); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:860px){
  .flow{grid-template-columns:1fr; gap:12px}
  .arrow{transform:rotate(90deg); padding:4px 0}
  .hero{grid-template-columns:1fr; gap:36px}
  .device{margin:0 auto}
  .steps-grid{grid-template-columns:1fr; gap:16px}
  section{padding:60px 0}
}