:root{
  --bg:#F5F6F8; --ink:#14181F; --muted:#5B6472; --faint:#8A93A2;
  --card:#FFFFFF; --line:#E6E8EC; --line-2:#EEF0F3;
  --brand:#4B3FE4; --brand-ink:#3A2FC7; --brand-wash:#EEEBFF;
  --win:#0F9F6E; --win-wash:#E7F7F0; --win-line:#B8E8D5;
  --warn:#B7791F; --warn-wash:#FBF3E2;
  --r:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(20,24,31,.04), 0 8px 24px rgba(20,24,31,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
a{color:inherit; text-decoration:none}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif; letter-spacing:-.02em; line-height:1.05; margin:0}
img{max-width:100%; height:auto}

header{position:sticky; top:0; z-index:20; background:rgba(245,246,248,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:9px; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:22px; letter-spacing:-.03em}
.logo .mk{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--brand); color:#fff; font-size:16px; transform:rotate(-4deg)}
.logo b{color:var(--brand-ink)}
nav.main{display:flex; align-items:center; gap:22px; font-size:14.5px; font-weight:500; color:var(--muted)}
nav.main a:hover{color:var(--ink)}
.lang{display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-weight:600; font-size:13.5px}
.tg{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:var(--brand); color:#fff; font-weight:600; font-size:14px}
.tg:hover{background:var(--brand-ink)}
@media(max-width:720px){ nav.main .hide-sm{display:none} }

.hero{padding:56px 0 28px; text-align:center}
.eyebrow{display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-ink); background:var(--brand-wash); padding:6px 12px; border-radius:999px; margin-bottom:18px}
.hero h1{font-size:clamp(34px,5.4vw,58px); font-weight:800}
.hero h1 .u{position:relative; white-space:nowrap}
.hero h1 .u::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.28em; background:var(--win-wash); z-index:-1; border-radius:3px}
.hero p.sub{max-width:620px; margin:18px auto 0; font-size:clamp(16px,2.1vw,19px); color:var(--muted)}

.search{max-width:680px; margin:30px auto 0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:10px; display:flex; gap:10px; align-items:center}
.search:focus-within{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-wash)}
.search .ic{margin-left:8px; color:var(--faint); flex:0 0 auto}
.search input{flex:1; border:0; outline:0; font-size:16px; font-family:inherit; background:transparent; color:var(--ink); min-width:0}
.search button{flex:0 0 auto; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:15px; color:#fff; background:var(--brand); padding:13px 22px; border-radius:13px}
.search button:hover{background:var(--brand-ink)}
.search button:disabled{opacity:.55; cursor:not-allowed}
.flags{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px auto 0}
.flag{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--muted); background:var(--card); border:1px solid var(--line); padding:6px 12px; border-radius:999px}
.flag i{font-style:normal; font-size:15px}

section.blk{padding:26px 0}
.lead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px}
.lead h2{font-size:clamp(22px,3vw,30px); font-weight:700}
.lead .eye{font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.lead a.more{font-size:14px; font-weight:600; color:var(--brand-ink)}

.cmp{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.cmp .top{display:flex; gap:18px; padding:20px; border-bottom:1px solid var(--line-2); align-items:center}
.cmp .ph{flex:0 0 auto; width:82px; height:82px; border-radius:12px; background:linear-gradient(135deg,#EEF0F3,#E3E6EB); display:grid; place-items:center; color:var(--faint); font-size:24px; border:1px solid var(--line); overflow:hidden}
.cmp .ph img{width:100%; height:100%; object-fit:contain; background:#fff}
.cmp .ti{flex:1; min-width:0}
.cmp .ti h3{font-size:18px; font-weight:700; line-height:1.2}
.cmp .ti .meta{font-size:13px; color:var(--faint); margin-top:5px}
.cmp .best{flex:0 0 auto; text-align:right}
.cmp .best .lbl{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--win)}
.cmp .best .val{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:26px; color:var(--win)}
.cmp .best .cy{font-size:12.5px; color:var(--muted)}
@media(max-width:640px){ .cmp .top{flex-wrap:wrap} .cmp .best{width:100%; text-align:left} }

.rows{padding:8px 8px 12px}
.row{display:grid; grid-template-columns:150px 1fr 132px 118px; align-items:center; gap:12px; padding:12px; border-radius:12px}
.row+.row{margin-top:2px}
.row.win{background:var(--win-wash); box-shadow:inset 0 0 0 1px var(--win-line)}
.co{display:flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px}
.co i{font-style:normal; font-size:17px}
.co .tag{font-size:10.5px; font-weight:700; letter-spacing:.05em; color:#fff; background:var(--win); padding:2px 7px; border-radius:999px; text-transform:uppercase}
.track{height:8px; border-radius:999px; background:var(--line-2); overflow:hidden}
.track > span{display:block; height:100%; border-radius:999px; background:var(--faint); width:0; transition:width .9s cubic-bezier(.22,1,.36,1)}
.row.win .track > span{background:var(--win)}
.price{text-align:right; font-weight:600; font-size:14.5px}
.price .loc{color:var(--muted); font-size:12.5px; font-weight:500}
.price .pln{color:var(--ink); font-weight:700}
.row.win .price .pln{color:var(--win)}
.act{text-align:right}
.buy{display:inline-block; width:100%; text-align:center; font-weight:600; font-size:13px; padding:9px 10px; border-radius:10px; background:var(--brand); color:#fff; cursor:pointer}
.buy:hover{background:var(--brand-ink)}
.buy.soon{background:transparent; color:var(--faint); border:1px dashed var(--line); cursor:not-allowed}
@media(max-width:640px){
  .row{grid-template-columns:1fr auto; row-gap:8px}
  .track{grid-column:1/-1; order:3}
  .act{grid-column:1/-1; order:4}
  .buy{width:auto; padding:9px 16px}
}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:860px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .grid{grid-template-columns:1fr} }
.pc{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; display:block}
.pc:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:#DADDE3}
.pc .thumb{height:96px; border-radius:10px; background:linear-gradient(135deg,#EEF0F3,#E3E6EB); display:grid; place-items:center; color:var(--faint); margin-bottom:11px; overflow:hidden}
.pc .thumb img{width:100%; height:100%; object-fit:contain; background:#fff}
.pc h4{font-size:13.5px; font-weight:600; line-height:1.3; margin:0 0 8px; height:2.6em; overflow:hidden}
.pc .pcp{display:flex; align-items:baseline; justify-content:space-between}
.pc .pcp .from{font-size:11.5px; color:var(--faint)}
.pc .pcp .amt{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:17px; color:var(--win)}
.pc .cflag{font-size:11.5px; color:var(--muted); margin-top:4px; font-weight:500}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:760px){ .steps{grid-template-columns:1fr} }
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.step .n{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:15px; color:var(--brand); width:34px; height:34px; border-radius:10px; background:var(--brand-wash); display:grid; place-items:center; margin-bottom:12px}
.step h3{font-size:16.5px; font-weight:700; margin-bottom:6px}
.step p{margin:0; font-size:14px; color:var(--muted)}

.crumb{font-size:13px; color:var(--faint); padding:20px 0 4px}
.crumb a{color:var(--muted); font-weight:500}
.crumb a:hover{color:var(--brand-ink)}
.stale{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; color:var(--warn); background:var(--warn-wash); border:1px solid #F0E2C4; border-radius:10px; padding:9px 13px; margin:12px 0 0}
.stale .rf{margin-left:auto; font-weight:600; color:var(--brand-ink); cursor:pointer; background:none; border:0; font-family:inherit; font-size:13px}
.hist{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px; margin-top:16px}
.hist .cvs{height:170px; margin-top:14px; border-radius:12px; background:linear-gradient(0deg, var(--brand-wash), transparent 60%),repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 76px); position:relative; overflow:hidden; border:1px solid var(--line-2)}
.hist .cvs svg{position:absolute; inset:0; width:100%; height:100%}
.tgbig{display:flex; flex-wrap:wrap; align-items:center; gap:14px; background:var(--brand); color:#fff; border-radius:var(--r-lg); padding:20px 24px; margin-top:16px}
.tgbig h3{font-size:19px; font-weight:700; color:#fff}
.tgbig p{margin:2px 0 0; font-size:14px; color:#DAD6FF}
.tgbig a{margin-left:auto; background:#fff; color:var(--brand-ink); font-weight:700; font-size:14px; padding:11px 18px; border-radius:11px}

.feat{margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px}
.feat h2{font-size:20px; font-weight:700; margin-bottom:12px}
.feat ul{margin:0; padding-left:18px; color:var(--muted); font-size:14.5px; line-height:1.7}

footer{margin-top:36px; border-top:1px solid var(--line); background:var(--card)}
.foot{display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; padding:30px 0}
.foot .col h5{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; font-weight:700}
.foot .col a{display:block; font-size:14px; color:var(--muted); padding:3px 0}
.foot .col a:hover{color:var(--ink)}
.disc{border-top:1px solid var(--line); padding:16px 0 30px; font-size:12.5px; color:var(--faint); line-height:1.6}
.disc b{color:var(--muted); font-weight:600}

.geo{background:var(--brand-wash); border-bottom:1px solid #DED8FF; font-size:14px}
.geo .wrap{display:flex; align-items:center; gap:12px; padding:9px 20px}
.geo b{font-weight:600}
.geo a{margin-left:auto; font-weight:700; color:var(--brand-ink)}
.geo .x{color:var(--faint); cursor:pointer; font-weight:700; padding:0 4px}
.countries{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:820px){ .countries{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .countries{grid-template-columns:1fr} }
.cc{display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; transition:transform .15s, box-shadow .15s, border-color .15s; position:relative}
.cc.live:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:#CFC9FA}
.cc .fl{font-size:34px; line-height:1; flex:0 0 auto}
.cc .tx .nm{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px}
.cc .tx .sb{font-size:13px; color:var(--muted); margin-top:2px}
.cc .go{margin-left:auto; color:var(--brand); font-weight:700; flex:0 0 auto}
.cc.soon{opacity:.72}
.cc.soon .go{color:var(--faint); font-size:12px; font-weight:600; border:1px dashed var(--line); padding:4px 9px; border-radius:999px}

.alert{max-width:680px; margin:16px auto 0; background:var(--warn-wash); border:1px solid #F0E2C4; color:var(--warn); border-radius:12px; padding:12px 16px; font-size:14px; text-align:center}

@media(prefers-reduced-motion:reduce){ *{transition:none !important} html{scroll-behavior:auto} }
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
/* ===== DODAĆ na koniec public/css/vartzon.css ===== */

.price .vatnote{
  display:inline-block; font-size:10.5px; color:var(--faint); font-weight:500;
  margin-left:4px; cursor:help; border-bottom:1px dotted var(--line);
}
.price .shipnote{
  display:block; font-size:10.5px; color:var(--warn); font-weight:500; margin-top:2px;
}
.vatbanner{
  margin:0 8px 12px; padding:10px 13px; border-radius:10px;
  background:var(--warn-wash); border:1px solid #F0E2C4;
  color:var(--warn); font-size:12.5px; line-height:1.5;
}
/* ===== DODAĆ na koniec public/css/vartzon.css (nakładka wyszukiwania) ===== */

.s-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,24,31,.55); backdrop-filter:blur(4px);
  display:grid; place-items:center; padding:20px;
}
.s-card{
  background:var(--card); border-radius:var(--r-lg); box-shadow:0 20px 60px rgba(20,24,31,.25);
  padding:32px 30px; max-width:380px; width:100%; text-align:center;
}
.s-spinner{
  width:42px; height:42px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--brand);
  animation:s-spin .8s linear infinite;
}
@keyframes s-spin{ to{ transform:rotate(360deg); } }
.s-title{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:19px; color:var(--ink); }
.s-sub{ font-size:13.5px; color:var(--muted); margin-top:6px; }
.s-steps{ display:flex; flex-direction:column; gap:7px; margin-top:20px; text-align:left; }
.s-step{
  font-size:13px; color:var(--faint); padding:8px 12px; border-radius:9px;
  background:var(--bg); border:1px solid var(--line-2); transition:.2s;
}
.s-step.active{ color:var(--brand-ink); background:var(--brand-wash); border-color:#D6D0FA; font-weight:600; }
.s-step.done{ color:var(--win); background:var(--win-wash); border-color:var(--win-line); }
.s-step.done::before{ content:"✓ "; font-weight:700; }

/* niewidoczny Turnstile nie zajmuje miejsca */
#cfWidget[data-size="invisible"]{ width:0; height:0; overflow:hidden; }

@media(prefers-reduced-motion:reduce){ .s-spinner{ animation:none; } }
/* ===== DODAĆ na koniec public/css/vartzon.css (wyszukiwarka w nagłówku) ===== */

.hsearch{
  flex:1; max-width:420px; margin:0 18px;
  display:flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:5px 6px 5px 12px;
}
.hsearch:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash); }
.hsearch .ic{ color:var(--faint); font-size:14px; flex:0 0 auto; }
.hsearch input{
  flex:1; border:0; outline:0; background:transparent; min-width:0;
  font-size:14px; font-family:inherit; color:var(--ink);
}
.hsearch button{
  flex:0 0 auto; border:0; cursor:pointer; width:30px; height:30px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:15px; font-weight:700; line-height:1;
}
.hsearch button:hover{ background:var(--brand-ink); }

@media(max-width:720px){
  .hsearch{ margin:0 10px; max-width:none; }
  .hsearch .ic{ display:none; }
}
/* ===== ZAMIEŃ w vartzon.css regułę #cfWidget[data-size="invisible"] na to ===== */
/* (albo po prostu doklej — widoczny widżet wyśrodkowany w karcie) */

.s-cf{ display:flex; justify-content:center; margin:16px 0 4px; }
#cfWidget{ min-height:65px; }

/* Nakładka ukryta gdy [hidden] — bez tego display:grid ją zawsze pokazuje */
.s-overlay[hidden]{ display:none !important; }