:root{
  --paper:#FCFDFE; --ground:#F4F8FA; --card:#FFFFFF;
  --ink:#152A31; --ink2:#3D575F; --mut:#69828B;
  --line:#E2EAEE; --line2:#EDF2F5;
  --navy:#243D44; --navy2:#1B3138;
  --cyan:#29AAE3; --cyanD:#0F84C2; --cyanBg:#E7F5FC;
  --ok:#178A5E; --okBg:#E8F5EF; --bad:#C4453C; --badBg:#FBEEec;
  --wm:url("/assets/wm.png");
  --r:14px;
  --sh:0 1px 2px rgba(21,42,49,.04), 0 16px 40px -24px rgba(21,42,49,.28);
  --shBig:0 2px 4px rgba(21,42,49,.05), 0 32px 80px -40px rgba(21,42,49,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--paper); color:var(--ink);
  font:400 16.5px/1.65 "CV Sans","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"CV Sans","CV Sans",sans-serif; letter-spacing:-.02em; text-wrap:balance; line-height:1.08}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--cyanD); outline-offset:3px; border-radius:4px}
.in{max-width:1168px; margin:0 auto; padding:0 32px}
@media (max-width:720px){ .in{padding:0 20px} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15.5px; line-height:1;
  padding:15px 24px; border-radius:11px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn svg{flex:none}
.btn.primary{background:var(--navy); color:#fff; box-shadow:0 10px 24px -12px rgba(36,61,68,.55)}
.btn.primary:hover{background:var(--navy2); transform:translateY(-1px)}
.btn.cyan{background:var(--cyan); color:#0C2530; box-shadow:0 10px 24px -12px rgba(41,170,227,.6)}
.btn.cyan:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line); }
.btn.ghost:hover{border-color:#C9D6DC}
.btn.sm{padding:11px 18px; font-size:14.5px; border-radius:9px}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(252,253,254,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line2)}
.nav .in{display:flex; align-items:center; gap:34px; height:70px}
.logo{display:flex; align-items:center; gap:10px; color:var(--navy)}
.logo svg{width:32px; height:auto; display:block}
.logo .wm{height:20px; aspect-ratio:480/209; background:currentColor;
  -webkit-mask-image:var(--wm); mask-image:var(--wm);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center}
.nav ul{display:flex; gap:28px; font-size:15px; font-weight:500; color:var(--ink2)}
.nav ul a:hover{color:var(--ink)}
.nav .sp{flex:1}
.nav .login{font-weight:600; font-size:15px; color:var(--ink2)}
.nav .login:hover{color:var(--ink)}
@media (max-width:900px){ .nav ul,.nav .login{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(900px 480px at 78% -10%, rgba(41,170,227,.10), transparent 65%),
  var(--paper)}
.hero::before{
  content:""; position:absolute; top:0; right:0; width:54%; height:100%;
  background:repeating-linear-gradient(45deg, rgba(36,61,68,.045) 0 1px, transparent 1px 56px);
  -webkit-mask-image:radial-gradient(closest-side at 70% 40%, #000, transparent);
  mask-image:radial-gradient(closest-side at 70% 40%, #000, transparent);
  pointer-events:none;
}
.hero .in{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:64px; align-items:center; padding-top:76px; padding-bottom:96px}
@media (max-width:980px){ .hero .in{grid-template-columns:1fr; gap:56px; padding-top:56px} }
.kick{
  display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:100px;
  background:var(--cyanBg); color:var(--cyanD); font-size:13.5px; font-weight:600;
}
.kick i{width:7px;height:7px;border-radius:50%;background:var(--cyanD)}
.hero h1{font-size:clamp(42px,4.9vw,66px); font-weight:700; margin-top:26px; max-width:13ch; color:var(--ink)}
.hero h1 .u{position:relative; white-space:nowrap}
.hero h1 .u::after{content:""; position:absolute; left:-1%; right:-1%; bottom:.06em; height:.3em; background:rgba(41,170,227,.28); z-index:-1; border-radius:3px}
.hero .lead{margin-top:24px; font-size:19px; line-height:1.6; color:var(--ink2); max-width:52ch}
.hero .ctas{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap}
.trust{margin-top:26px; display:flex; gap:8px 26px; flex-wrap:wrap; font-size:14px; color:var(--mut)}
.trust li{display:flex; gap:8px; align-items:center}
.trust svg{color:var(--ok)}
.trust b{color:var(--ink2); font-weight:600}

/* ---------- hero visual ---------- */
.vis{position:relative; min-height:520px}
@media (max-width:980px){ .vis{min-height:480px; max-width:560px} }
.vis .watermark{position:absolute; right:-70px; top:-40px; width:420px; opacity:.06; pointer-events:none}
.sheet{
  position:relative; width:min(400px,86%); background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shBig); padding:30px 32px; z-index:2;
}
.sheet .nm{font-family:"CV Sans",sans-serif; font-size:23px; font-weight:700; letter-spacing:-.02em}
.sheet .rl{font-size:13.5px; color:var(--mut); margin-top:3px}
.sheet hr{border:0; border-top:1px solid var(--line2); margin:16px 0}
.sheet .lb{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); font-weight:600; margin-bottom:8px}
.sheet .ln{height:9px; border-radius:5px; background:var(--line2); margin-bottom:7px}
.sheet .ln.w70{width:70%} .sheet .ln.w85{width:85%} .sheet .ln.w55{width:55%} .sheet .ln.w40{width:40%}
.sheet .job{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.vis .ln + .job{margin-top:12px}
.sheet .job b{font-size:13.5px; font-weight:600}
.sheet .job span{font:500 11.5px monospace,monospace; color:var(--mut)}
.sheet .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.sheet .tags i{font-style:normal; font-size:11.5px; font-weight:500; background:var(--ground); border:1px solid var(--line2); color:var(--ink2); padding:4px 9px; border-radius:6px}
.scanline{position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--cyan) 30%, var(--cyan) 70%, transparent);
  box-shadow:0 0 18px rgba(41,170,227,.55); opacity:0; z-index:3}
.vis.play .scanline{animation:scan 2.4s cubic-bezier(.4,0,.3,1) .5s 1 both}
@keyframes scan{0%{top:2%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:97%;opacity:0}}
.float{
  position:absolute; background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--sh); z-index:4; opacity:0; transform:translateY(14px);
}
.vis.play .float{animation:pop .7s cubic-bezier(.2,.8,.3,1) forwards}
.vis:not(.ready) .float{opacity:1;transform:none}
.vis.play .f1{animation-delay:2.9s} .vis.play .f2{animation-delay:1.7s} .vis.play .f3{animation-delay:4s}
@keyframes pop{to{opacity:1; transform:none}}
.f1{top:26px; right:0; padding:16px 20px; display:flex; align-items:center; gap:16px}
.f1 .ring{position:relative; width:64px; height:64px}
.f1 .ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.f1 .ring b{position:absolute; inset:0; display:grid; place-items:center; font:700 19px "CV Sans",sans-serif; font-variant-numeric:tabular-nums}
.f1 .t b{display:block; font-size:15px; font-weight:700}
.f1 .t span{font-size:12.5px; color:var(--mut)}
.f2{bottom:104px; right:26px; padding:14px 18px; display:flex; flex-direction:column; gap:8px; min-width:224px}
.f2 .row{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500}
.f2 .row svg{color:var(--ok); flex:none}
.f2 .row span{color:var(--ink2)}
.f2 .row em{font-style:normal; margin-left:auto; font:500 12px monospace,monospace; color:var(--ok)}
.f3{bottom:-16px; left:34px; padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink2)}
.f3 .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--okBg)}
@media(max-width:540px){
  .vis{min-height:550px;width:100%}
  .vis .sheet{width:94%;padding:24px}
  .vis .f1{top:auto;bottom:58px;right:0;padding:12px 16px}
  .vis .f2{bottom:170px;right:0}
  .vis .f3{bottom:0;left:0;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .vis.play .scanline{animation:none; opacity:0}
  .vis.play .float{animation:none; opacity:1; transform:none}
}

/* ---------- ATS strip ---------- */
.strip{border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); background:var(--ground)}
.strip .in{display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap; padding:22px 32px}
.strip .cap{font-size:13.5px; font-weight:600; color:var(--mut); letter-spacing:.02em}
.strip ul{display:flex; gap:8px; flex-wrap:wrap}
.strip li{font:500 13px monospace,monospace; color:var(--ink2); background:var(--card); border:1px solid var(--line); padding:7px 13px; border-radius:100px}

/* ---------- generic section ---------- */
section{padding:104px 0}
section.tint{background:var(--ground); border-top:1px solid var(--line2); border-bottom:1px solid var(--line2)}
.shead{max-width:60ch; margin-bottom:52px}
.shead.center{margin-left:auto; margin-right:auto; text-align:center}
.eyebrow{font:600 12.5px/1 monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--cyanD)}
.shead h2{font-size:clamp(30px,3.4vw,44px); font-weight:700; margin-top:16px; color:var(--ink)}
.shead p{margin-top:16px; font-size:17.5px; line-height:1.6; color:var(--ink2)}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .steps{grid-template-columns:1fr} }
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:30px; position:relative; box-shadow:var(--sh)}
.step .n{font:600 13px monospace,monospace; color:var(--cyanD); letter-spacing:.08em}
.step h3{font-size:21px; font-weight:700; margin:14px 0 10px}
.step p{font-size:15px; line-height:1.6; color:var(--ink2)}
.step .mini{margin-top:22px; height:120px; border-radius:10px; border:1px solid var(--line2); background:var(--ground); overflow:hidden; position:relative}

/* ---------- parser split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.pane{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; display:flex; flex-direction:column}
.pane .ph{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line2); font-size:13px; font-weight:600; color:var(--mut)}
.pane .ph .tag{font:600 11px monospace,monospace; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:6px}
.pane .ph .tag.you{background:var(--ground); color:var(--ink2)}
.pane .ph .tag.bot{background:var(--cyanBg); color:var(--cyanD)}
.pane .pb{padding:22px 24px; flex:1}
.parsed{display:flex; flex-direction:column}
.parsed .row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed var(--line2); font-size:14.5px}
.parsed .row:last-child{border-bottom:0}
.parsed .k{font:500 12.5px monospace,monospace; color:var(--mut); width:132px; flex:none}
.parsed .v{font-weight:500; color:var(--ink)}
.parsed .row svg{margin-left:auto; flex:none}
.parsed .row.ok svg{color:var(--ok)}
.parsed .row.bad .v{color:var(--bad); font-weight:600}
.parsed .row.bad svg{color:var(--bad)}
.legend{margin-top:22px; display:flex; gap:20px; flex-wrap:wrap; font-size:13.5px; color:var(--mut)}

/* ---------- templates ---------- */
.tpls{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:980px){ .tpls{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .tpls{grid-template-columns:1fr} }
.tpl{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--sh); transition:transform .18s ease, box-shadow .18s ease}
.tpl:hover{transform:translateY(-4px); box-shadow:var(--shBig)}
.tpl .prev{border:1px solid var(--line2); border-radius:9px; background:#fff; aspect-ratio:210/260; padding:11%; display:flex; flex-direction:column; gap:5.5%}
.tpl .prev .b1{height:5%; border-radius:99px; background:#22343B; width:62%; flex:none}
.tpl .prev .b2{height:3%; border-radius:99px; background:#C7D4D9; width:40%; flex:none}
.tpl .prev .rule{height:1px; background:#E4EAEC; flex:none}
.tpl .prev .l{height:2.8%; border-radius:99px; background:#DCE5E8; flex:none}
.tpl .prev .l.c{background:#9BD4EF}
.tpl .prev .l.w80{width:80%} .tpl .prev .l.w65{width:65%} .tpl .prev .l.w90{width:90%} .tpl .prev .l.w50{width:50%}
.tpl .meta{display:flex; align-items:center; justify-content:space-between; padding:14px 6px 4px}
.tpl .meta b{font-size:15px; font-weight:700}
.tpl .meta span{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ok)}
.tpl.t2 .prev{background:linear-gradient(#F2F7F9 30%, #fff 30%)}
.tpl.t3 .prev{border-left:7px solid #243D44}
.tpl.t4 .prev{background:linear-gradient(90deg,#F2F7F9 34%, #fff 34%)}

/* ---------- pricing ---------- */
.prices{display:grid; grid-template-columns:repeat(2,minmax(0,420px)); gap:22px; justify-content:center}
@media (max-width:820px){ .prices{grid-template-columns:1fr} }
.price{background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:36px; position:relative; display:flex; flex-direction:column}
.price.hi{border-color:var(--cyan); box-shadow:0 0 0 4px rgba(41,170,227,.12), var(--shBig)}
.price .flag{position:absolute; top:-13px; left:32px; background:var(--cyan); color:#0C2530; font-size:12px; font-weight:700; letter-spacing:.04em; padding:6px 12px; border-radius:100px}
.price h3{font-size:19px; font-weight:700}
.price .amt{display:flex; align-items:baseline; gap:10px; margin:20px 0 6px}
.price .amt b{font:700 52px/1 "CV Sans",sans-serif; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.price .amt span{font-size:15.5px; color:var(--mut); font-weight:500}
.price .per{font-size:14px; color:var(--mut)}
.price ul{margin:26px 0 30px; display:flex; flex-direction:column; gap:12px}
.price li{display:flex; gap:11px; font-size:15px; color:var(--ink2)}
.price li svg{flex:none; color:var(--ok); margin-top:3px}
.price .btn{margin-top:auto; width:100%}
.honest{margin:30px auto 0; max-width:640px; text-align:center; font-size:14.5px; color:var(--mut)}
.honest b{color:var(--ink2)}

/* ---------- reviews ---------- */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .reviews{grid-template-columns:1fr} }
.rev{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh); display:flex; flex-direction:column; gap:18px}
.rev .stars{color:#E9A93A; letter-spacing:2px; font-size:15px}
.rev p{font-size:15.5px; line-height:1.65; color:var(--ink2)}
.rev .who{display:flex; align-items:center; gap:12px; margin-top:auto}
.rev .av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; flex:none}
.rev .who b{display:block; font-size:14.5px}
.rev .who span{font-size:12.5px; color:var(--mut)}

/* ---------- faq ---------- */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:20px 24px; font-weight:600; font-size:16px; display:flex; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font:400 22px/1 "CV Sans",sans-serif; color:var(--cyanD); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 24px 22px; font-size:15px; line-height:1.65; color:var(--ink2); max-width:64ch}

/* ---------- articles ---------- */
.arts{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .arts{grid-template-columns:1fr} }
.art{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease}
.art:hover{transform:translateY(-4px); box-shadow:var(--shBig)}
.art .cover{height:150px; position:relative; overflow:hidden}
.art .cover svg{position:absolute; inset:0; width:100%; height:100%}
.art .body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.art .k{font:600 11px monospace,monospace; letter-spacing:.13em; text-transform:uppercase; color:var(--cyanD)}
.art h3{font-size:19px; font-weight:700; line-height:1.25}
.art p{font-size:14.5px; line-height:1.6; color:var(--ink2)}
.art .rd{margin-top:auto; padding-top:8px; font-size:13px; color:var(--mut)}

/* ---------- cta band ---------- */
.band{background:var(--navy); border-radius:24px; padding:72px 64px; position:relative; overflow:hidden; color:#fff}
.band .bandmark{position:absolute; right:-56px; top:50%; transform:translateY(-50%); width:380px; height:auto; opacity:.9; pointer-events:none}
.band h2{font-size:clamp(28px,3.2vw,42px); font-weight:700; max-width:18ch; position:relative; z-index:1; letter-spacing:-.02em}
.band p{margin-top:14px; font-size:17px; color:#B8CBD1; max-width:48ch; position:relative; z-index:1}
.band .ctas{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:1}
@media (max-width:720px){ .band{padding:52px 32px} .band .bandmark{opacity:.35} }

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line2); background:var(--ground); padding:64px 0 44px; margin-top:104px}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
@media (max-width:820px){ .fgrid{grid-template-columns:1fr 1fr} }
.fgrid .about p{margin-top:16px; font-size:14px; color:var(--mut); max-width:30ch; line-height:1.6}
.fgrid h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); font-weight:600; margin-bottom:16px}
.fgrid ul{display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--ink2)}
.fgrid ul a:hover{color:var(--ink)}
.legal{margin-top:52px; padding-top:24px; border-top:1px solid var(--line2); display:flex; gap:14px 28px; flex-wrap:wrap; font-size:13px; color:var(--mut)}
.legal .sp{flex:1}


/* ============ shared additions across the site ============ */
::selection{background:rgba(41,170,227,.25)}
[id]{scroll-margin-top:92px}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.on{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* nav active state + burger */
.nav ul a{position:relative; padding-bottom:4px}
body[data-page="kreator"]  .nav a[data-nav="kreator"],
body[data-page="test"]     .nav a[data-nav="test"],
body[data-page="szablony"] .nav a[data-nav="szablony"],
body[data-page="cennik"]   .nav a[data-nav="cennik"],
body[data-page="poradnik"] .nav a[data-nav="poradnik"]{color:var(--ink)}
body[data-page="kreator"]  .nav a[data-nav="kreator"]::after,
body[data-page="test"]     .nav a[data-nav="test"]::after,
body[data-page="szablony"] .nav a[data-nav="szablony"]::after,
body[data-page="cennik"]   .nav a[data-nav="cennik"]::after,
body[data-page="poradnik"] .nav a[data-nav="poradnik"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2.5px; border-radius:2px; background:var(--cyan);
}
.burger{display:none; width:42px; height:42px; border:1.5px solid var(--line); border-radius:10px; background:var(--card); align-items:center; justify-content:center}
.burger svg{display:block}
@media (max-width:900px){ .burger{display:inline-flex} }
.mnav{display:none; border-bottom:1px solid var(--line2); background:var(--paper)}
.mnav.open{display:block}
.mnav ul{display:flex; flex-direction:column; padding:10px 32px 18px; gap:2px}
.mnav a{display:block; padding:12px 4px; font-weight:600; font-size:16px; color:var(--ink2); border-bottom:1px solid var(--line2)}
.mnav li:last-child a{border-bottom:0}
.mnav a:hover{color:var(--ink)}

/* inner page hero */
.phero{background:radial-gradient(760px 360px at 82% -20%, rgba(41,170,227,.10), transparent 68%), var(--paper); border-bottom:1px solid var(--line2)}
.phero .in{padding-top:64px; padding-bottom:56px}
.phero.center .in{text-align:center}
.phero .crumbs{font:500 12.5px monospace,monospace; color:var(--mut); display:flex; gap:10px; justify-content:flex-start}
.phero.center .crumbs{justify-content:center}
.phero .crumbs a:hover{color:var(--cyanD)}
.phero h1{font-size:clamp(34px,4.2vw,54px); font-weight:700; margin-top:18px; letter-spacing:-.025em}
.phero h1 .u{position:relative; white-space:nowrap}
.phero h1 .u::after{content:""; position:absolute; left:-1%; right:-1%; bottom:.06em; height:.3em; background:rgba(41,170,227,.28); z-index:-1; border-radius:3px}
.phero .lead{margin-top:16px; font-size:18px; line-height:1.6; color:var(--ink2); max-width:62ch}
.phero.center .lead{margin-left:auto; margin-right:auto}

/* forms */
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:13.5px; font-weight:600; color:var(--ink2)}
.field label .opt{font-weight:500; color:var(--mut)}
.field input,.field textarea,.field select{
  font:inherit; font-size:15px; color:var(--ink); background:var(--card);
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:96px; line-height:1.55}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(41,170,227,.14)}
.field .hint{font-size:12.5px; color:var(--mut)}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){ .frow{grid-template-columns:1fr} }

/* ============ TEST ATS page ============ */
.dropzone{
  border:2px dashed #BFD2DA; border-radius:18px; background:var(--card); padding:52px 40px;
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.dropzone:hover,.dropzone.drag{border-color:var(--cyan); background:#F4FBFE}
.dropzone .dzi{width:64px; height:64px; border-radius:16px; background:var(--cyanBg); color:var(--cyanD); display:grid; place-items:center}
.dropzone b{font-size:18px}
.dropzone span{font-size:14px; color:var(--mut)}
.dz-alt{margin-top:16px; text-align:center; font-size:14.5px; color:var(--mut)}
.dz-alt button{color:var(--cyanD); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.scanbox{max-width:760px; margin:0 auto}
.progresslist{display:flex; flex-direction:column; gap:0; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--sh)}
.pstep{display:flex; align-items:center; gap:14px; padding:15px 22px; border-bottom:1px solid var(--line2); font-size:15px; color:var(--mut)}
.pstep:last-child{border-bottom:0}
.pstep .pico{width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; flex:none; color:transparent; font-size:0}
.pstep.run{color:var(--ink)}
.pstep.run .pico{border-color:var(--cyan); border-top-color:transparent; animation:spin 0.8s linear infinite}
.pstep.done{color:var(--ink2)}
.pstep.done .pico{border-color:var(--ok); background:var(--okBg); color:var(--ok); font-size:12px}
.pstep .pfile{margin-left:auto; font:500 12px monospace,monospace; color:var(--mut)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .pstep.run .pico{animation:none; border-top-color:var(--cyan)} }

.report{display:none}
.report.show{display:block}
.scorehead{display:grid; grid-template-columns:220px minmax(0,1fr); gap:40px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px 38px; box-shadow:var(--sh)}
@media (max-width:760px){ .scorehead{grid-template-columns:1fr; text-align:center; justify-items:center} }
.bigring{position:relative; width:200px; height:200px}
.bigring svg{width:100%; height:100%; transform:rotate(-90deg)}
.bigring .v{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.bigring .v b{font:700 56px/1 "CV Sans",sans-serif; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.bigring .v span{font:500 11px monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-top:6px}
.scorehead h2{font-size:26px; font-weight:700; letter-spacing:-.02em}
.scorehead .sub2{margin-top:10px; font-size:15.5px; color:var(--ink2); max-width:52ch}
.sysrow{margin-top:18px; display:flex; flex-wrap:wrap; gap:8px}
.sysrow li{font:500 12.5px monospace,monospace; padding:6px 12px; border-radius:100px; border:1px solid var(--line)}
.sysrow li.okp{color:var(--ok); border-color:#BFE3D3; background:var(--okBg)}
.sysrow li.badp{color:var(--bad); border-color:#EBC7C3; background:var(--badBg)}

.findings{display:flex; flex-direction:column; gap:12px}
.fnd{display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 22px; box-shadow:var(--sh)}
.fnd .sev{flex:none; font:700 10.5px monospace,monospace; letter-spacing:.09em; text-transform:uppercase; padding:6px 9px; border-radius:6px; margin-top:2px}
.fnd.crit .sev{background:var(--badBg); color:var(--bad)}
.fnd.warn .sev{background:#FCF3E3; color:#A06A10}
.fnd.okf .sev{background:var(--okBg); color:var(--ok)}
.fnd b{display:block; font-size:15.5px}
.fnd p{font-size:14px; color:var(--ink2); margin-top:3px}
.fnd .fix{margin-left:auto; flex:none; align-self:center; font-size:13.5px; font-weight:700; color:var(--cyanD); white-space:nowrap}
@media (max-width:640px){ .fnd{flex-wrap:wrap} .fnd .fix{margin-left:0} }

/* ============ KREATOR page ============ */
.studio{display:grid; grid-template-columns:340px minmax(0,1fr) 300px; gap:24px; align-items:start}
@media (max-width:1140px){ .studio{grid-template-columns:320px minmax(0,1fr)} .scorecol{grid-column:1 / -1} }
@media (max-width:860px){ .studio{grid-template-columns:1fr} }
.panel{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh)}
.panel .phd{padding:15px 20px; border-bottom:1px solid var(--line2); display:flex; align-items:center; gap:10px}
.panel .phd b{font-size:14px}
.panel .phd .n{font:600 11px monospace,monospace; color:var(--cyanD); background:var(--cyanBg); border-radius:6px; padding:4px 7px}
.panel .pbd{padding:20px; display:flex; flex-direction:column; gap:16px}
.chips-edit{display:flex; flex-wrap:wrap; gap:8px}
.chips-edit .chip{display:inline-flex; align-items:center; gap:7px; background:var(--cyanBg); color:var(--cyanD); font-size:13px; font-weight:600; border-radius:100px; padding:7px 12px}
.chips-edit .chip button{display:grid; place-items:center; width:16px; height:16px; border-radius:50%; font-size:12px; line-height:1; color:var(--cyanD)}
.chips-edit .chip button:hover{background:rgba(15,132,194,.15)}
.addskill{display:flex; gap:8px}
.addskill input{flex:1}
.addskill .btn{padding:12px 16px}
.a4wrap{position:sticky; top:92px}
.a4{background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shBig); aspect-ratio:210/297; padding:7.5% 8.5%; font-size:clamp(9px,1.05vw,13px); line-height:1.55; color:#2A3F47; overflow:hidden}
.a4 .anm{font-family:"CV Sans",sans-serif; font-weight:700; font-size:2.05em; letter-spacing:-.02em; color:#152A31}
.a4 .arl{color:#69828B; font-size:1.02em; margin-top:.25em}
.a4 .actc{margin-top:.4em; font-size:.92em; color:#69828B; display:flex; gap:1.2em; flex-wrap:wrap}
.a4 hr{border:0; border-top:1px solid #E6EDF0; margin:1.1em 0}
.a4 .albl{font-size:.78em; letter-spacing:.13em; text-transform:uppercase; color:#8CA1A9; font-weight:600; margin-bottom:.5em}
.a4 p.sum{font-size:.98em}
.a4 .ajob{display:flex; justify-content:space-between; align-items:baseline; font-weight:600; font-size:1em; margin-top:.7em}
.a4 .ajob span{font-family:monospace,monospace; font-weight:400; font-size:.82em; color:#8CA1A9}
.a4 ul.apts{margin:.3em 0 0 1.1em; list-style:disc; font-size:.94em; color:#41595F}
.a4 ul.apts li{margin-top:.15em}
.a4 .achips{display:flex; flex-wrap:wrap; gap:.45em; margin-top:.2em}
.a4 .achips i{font-style:normal; font-size:.85em; font-weight:500; background:#F0F6F8; border:1px solid #E2EAEE; color:#3D575F; padding:.25em .7em; border-radius:.5em}
.scorecol{position:sticky; top:92px; display:flex; flex-direction:column; gap:16px}
.scorebox{background:var(--navy); color:#fff; border-radius:14px; padding:24px; display:flex; align-items:center; gap:20px}
.scorebox .mring{position:relative; width:84px; height:84px; flex:none}
.scorebox .mring svg{width:100%; height:100%; transform:rotate(-90deg)}
.scorebox .mring b{position:absolute; inset:0; display:grid; place-items:center; font:700 26px "CV Sans",sans-serif; font-variant-numeric:tabular-nums}
.scorebox .t b{display:block; font-size:15px}
.scorebox .t span{font-size:12.5px; color:#AFC5CC}
.cklist{display:flex; flex-direction:column}
.cklist .ck{display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px dashed var(--line2); font-size:14px; color:var(--mut)}
.cklist .ck:last-child{border-bottom:0}
.cklist .ck .ic{width:20px; height:20px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; flex:none; color:transparent}
.cklist .ck.done{color:var(--ink2)}
.cklist .ck.done .ic{border-color:var(--ok); background:var(--okBg); color:var(--ok)}
.cklist .ck .pts{margin-left:auto; font:600 12px monospace,monospace; color:var(--mut)}
.demobadge{display:inline-flex; align-items:center; gap:8px; font:600 12px monospace,monospace; letter-spacing:.1em; text-transform:uppercase; color:#A06A10}

/* ============ SZABLONY ============ */
.filters{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:40px}
.filters button{font-size:14px; font-weight:600; color:var(--ink2); background:var(--card); border:1.5px solid var(--line); border-radius:100px; padding:10px 18px; transition:all .15s ease}
.filters button:hover{border-color:#C4D4DB}
.filters button.on{background:var(--navy); border-color:var(--navy); color:#fff}
.tpls.big{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){ .tpls.big{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .tpls.big{grid-template-columns:1fr} }
.tpl .use{display:flex; gap:10px; padding:0 6px 8px}
.tpl .use .btn{flex:1; padding:11px 10px; font-size:13.5px; border-radius:9px}
.tpl.hidden{display:none}

/* ============ CENNIK ============ */
.cmp{overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh)}
.cmp table{border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px}
.cmp th,.cmp td{padding:14px 20px; border-bottom:1px solid var(--line2); text-align:left; vertical-align:top}
.cmp thead th{font:600 11.5px monospace,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); background:var(--ground)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.us{background:#F3FAFE}
.cmp thead th.us{color:var(--cyanD); background:#E9F6FD}
.cmp .yes{color:var(--ok); font-weight:700}
.cmp .no{color:var(--bad); font-weight:600}
.cmp .meh{color:var(--mut)}
.paynote{margin-top:22px; display:flex; gap:12px 26px; flex-wrap:wrap; justify-content:center; font-size:14px; color:var(--mut)}
.paynote b{color:var(--ink2)}

/* ============ PORADNIK / ARTYKUŁ ============ */
.featured{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--sh)}
@media (max-width:880px){ .featured{grid-template-columns:1fr} }
.featured .fcov{position:relative; min-height:300px}
.featured .fcov svg{position:absolute; inset:0; width:100%; height:100%}
.featured .fbody{padding:38px 42px; display:flex; flex-direction:column; gap:14px}
.featured .fbody h2{font-size:clamp(24px,2.6vw,34px); font-weight:700; letter-spacing:-.02em; line-height:1.15}
.featured .fbody p{font-size:15.5px; color:var(--ink2)}
.featured .fbody .m{font-size:13px; color:var(--mut)}
.featured .fbody .btn{align-self:flex-start; margin-top:6px}
.progressbar{position:fixed; top:0; left:0; height:3px; background:var(--cyan); width:0; z-index:100}
.article{display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:64px; align-items:start}
@media (max-width:980px){ .article{grid-template-columns:1fr} .toc{display:none} }
.prose{max-width:68ch; font-size:17px; line-height:1.75; color:#2E464E}
.prose > *+*{margin-top:1.15em}
.prose h2{font-size:28px; font-weight:700; letter-spacing:-.02em; margin-top:2em; color:var(--ink)}
.prose h3{font-size:20px; font-weight:700; margin-top:1.6em; color:var(--ink)}
.prose strong{color:var(--ink)}
.prose a{color:var(--cyanD); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(15,132,194,.35)}
.prose ul{padding-left:1.3em; list-style:disc}
.prose ol{padding-left:1.3em; list-style:decimal}
.prose li{margin-top:.5em}
.prose li::marker{color:var(--cyanD)}
.prose .box{background:var(--cyanBg); border:1px solid #C4E6F7; border-left:4px solid var(--cyan); border-radius:10px; padding:18px 22px; font-size:15.5px}
.prose .box.warn2{background:#FCF3E3; border-color:#EFD9AE; border-left-color:#DEA83C}
.prose .box b{display:block; margin-bottom:4px}
.prose table{border-collapse:collapse; width:100%; font-size:14.5px}
.prose table th{font:600 11.5px monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); text-align:left; padding:10px 14px; background:var(--ground); border:1px solid var(--line2)}
.prose table td{padding:10px 14px; border:1px solid var(--line2); vertical-align:top}
.prose .tblwrap{overflow-x:auto}
.prose pre{background:var(--navy); color:#C9DEE6; border-radius:12px; padding:20px 24px; font:400 13.5px/1.8 monospace,monospace; overflow-x:auto}
.prose pre .miss{color:#F09A90}
.prose pre .okk{color:#7FD9AE}
.prose figure{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.prose figcaption{font-size:13px; color:var(--mut); padding:10px 16px; border-top:1px solid var(--line2); background:var(--ground)}
.toc{position:sticky; top:100px; border-left:2px solid var(--line); padding-left:22px}
.toc .tt{font:600 11px monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:14px}
.toc ol{display:flex; flex-direction:column; gap:9px}
.toc ol a{font-size:14px; color:var(--mut); line-height:1.4; display:block}
.toc ol a:hover{color:var(--ink)}
.toc ol a.on{color:var(--cyanD); font-weight:600}
.authcard{margin-top:56px; display:flex; gap:18px; align-items:center; background:var(--ground); border:1px solid var(--line2); border-radius:14px; padding:22px 26px}
.authcard .av{width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:700; flex:none}
.authcard b{display:block; font-size:15px}
.authcard span{font-size:13.5px; color:var(--mut)}
.artmeta{display:flex; gap:10px 22px; flex-wrap:wrap; font-size:13.5px; color:var(--mut); margin-top:18px}
.artmeta b{color:var(--ink2)}
.kpill{display:inline-flex; font:600 11.5px monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--cyanD)}

/* ============ KONTAKT + LEGAL ============ */
.split2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; align-items:start}
@media (max-width:880px){ .split2{grid-template-columns:1fr} }
.cinfo{display:flex; flex-direction:column; gap:16px}
.cinfo .row{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 22px}
.cinfo .row svg{flex:none; color:var(--cyanD); margin-top:2px}
.cinfo .row b{display:block; font-size:15px}
.cinfo .row span{font-size:14px; color:var(--ink2)}
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(80px); background:var(--navy); color:#fff; font-size:14.5px; font-weight:600; padding:14px 24px; border-radius:100px; box-shadow:var(--shBig); opacity:0; transition:all .35s cubic-bezier(.2,.8,.3,1); z-index:90}
.toast.show{opacity:1; transform:translateX(-50%)}
.legalpage{max-width:72ch}
.legalpage h2{font-size:21px; font-weight:700; margin-top:2em}
.legalpage p,.legalpage li{font-size:15.5px; line-height:1.7; color:#33484F; margin-top:.8em}
.legalpage ol{padding-left:1.4em; list-style:decimal}
.draftnote{margin-top:40px; display:flex; gap:12px; align-items:flex-start; background:#FCF3E3; border:1px solid #EFD9AE; border-radius:12px; padding:16px 20px; font-size:14px; color:#7A5510}

/* ============ MEGA FOOTER (jasna) ============ */
footer.mfoot{background:var(--paper); border-top:0; padding:0; margin-top:112px; color:var(--ink2)}
.mfoot .fscene{position:relative; overflow:hidden; min-height:420px; display:flex; align-items:center;
  border-top:1px solid var(--line2); background:#F3F8FA}
.mfoot .fscene::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, #F3F8FA 0%, #F3F8FA 32%, rgba(243,248,250,0) 62%)}
.mfoot .fcta{position:relative; z-index:2; padding-top:64px; padding-bottom:76px; max-width:1168px; width:100%}
.mfoot .fkick{font:600 12px/1 monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--cyanD)}
.mfoot .fcta h2{margin-top:16px; font-size:clamp(30px,3.6vw,48px); font-weight:700; letter-spacing:-.025em; color:var(--ink); max-width:17ch; line-height:1.05}
.mfoot .fsub{margin-top:14px; font-size:16.5px; line-height:1.6; color:var(--ink2); max-width:42ch}
.mfoot .fbtns{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap}

.mfoot .fsvg{position:absolute; inset:0; width:100%; height:100%}
.mfoot .fscene::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, #F3F8FA 0%, #F3F8FA 32%, rgba(243,248,250,0) 62%)}
.mfoot .fcta{position:relative; z-index:2; padding-top:64px; padding-bottom:76px; max-width:1168px; width:100%}
.mfoot .fkick{font:600 12px/1 monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--cyanD)}
.mfoot .fcta h2{margin-top:16px; font-size:clamp(30px,3.6vw,48px); font-weight:700; letter-spacing:-.025em; color:var(--ink); max-width:17ch; line-height:1.05}
.mfoot .fsub{margin-top:14px; font-size:16.5px; line-height:1.6; color:var(--ink2); max-width:42ch}
.mfoot .fbtns{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap}
@media (max-width:900px){
  .mfoot .fsvg{opacity:.22}
  .mfoot .fcta{padding-top:56px; padding-bottom:56px}
}

.fpulse line{animation:fpulse 7s linear infinite}
@keyframes fpulse{from{stroke-dashoffset:1520} to{stroke-dashoffset:0}}
.fscan{animation:fscan 3.4s ease-in-out infinite alternate}
@keyframes fscan{from{transform:translateX(-60px); opacity:.3} 50%{opacity:1} to{transform:translateX(44px); opacity:.4}}
.fsheet{animation:fbob 5.2s ease-in-out infinite alternate}
.fsheet.s2{animation-delay:-1.4s}
.fsheet.s3{animation-delay:-2.6s}
.fsheet.s4{animation-delay:-.8s}
.fsheet.s5{animation-delay:-2s}
@keyframes fbob{from{translate:0 0} to{translate:0 -7px}}
@media (prefers-reduced-motion:reduce){ .fpulse line,.fscan,.fsheet{animation:none} }

.mfoot .fstatus{border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); background:var(--card)}
.mfoot .fstatus .in{display:flex; gap:10px 30px; flex-wrap:wrap; align-items:center; padding-top:13px; padding-bottom:13px;
  font:500 12.5px/1.6 monospace,monospace; color:var(--mut)}
.mfoot .fstatus b{color:var(--ink2); font-weight:600}
.mfoot .fstatus .sp{flex:1}
.mfoot .fstatus .live{display:inline-flex; align-items:center; gap:8px; color:var(--ok)}
.mfoot .fstatus .live i{width:7px; height:7px; border-radius:50%; background:#22B57E; box-shadow:0 0 0 3px rgba(34,181,126,.18); animation:flive 2.2s ease-in-out infinite}
@keyframes flive{50%{box-shadow:0 0 0 6px rgba(34,181,126,.05)}}
@media (prefers-reduced-motion:reduce){ .mfoot .fstatus .live i{animation:none} }

.mfoot .fmain{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; padding-top:56px; padding-bottom:26px}
@media (max-width:900px){ .mfoot .fmain{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .mfoot .fmain{grid-template-columns:1fr} }
.mfoot .logo{color:var(--navy)}
.mfoot .fcol.about p{margin-top:16px; font-size:14px; line-height:1.65; color:var(--mut); max-width:34ch}
.mfoot .fcol h4{font:600 11.5px/1 monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:16px}
.mfoot .fcol ul{display:flex; flex-direction:column; gap:11px; font-size:14.5px}
.mfoot .fcol ul a{color:var(--ink2)}
.mfoot .fcol ul a:hover{color:var(--ink)}
.fnews{margin-top:24px; display:flex; flex-direction:column; gap:9px; max-width:360px}
.fnews label{font-size:14px; font-weight:600; color:var(--ink)}
.fnews .row{display:flex; gap:8px}
.fnews input{flex:1; min-width:0; font:inherit; font-size:14px; color:var(--ink); background:var(--card);
  border:1.5px solid var(--line); border-radius:9px; padding:11px 14px}
.fnews input::placeholder{color:var(--mut)}
.fnews input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(41,170,227,.14)}
.fnews .row .btn{background:var(--navy); color:#fff}
.fnews .micro{font-size:12px; color:var(--mut)}

.mfoot .fgroup{border-top:1px solid var(--line2); background:var(--card)}
.mfoot .fgroup .in{display:flex; align-items:center; gap:14px 30px; flex-wrap:wrap; padding-top:18px; padding-bottom:18px}
.mfoot .glabel{font:600 11px/1 monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); flex:none}
.mfoot .glogos{display:flex; align-items:center; gap:8px 26px; flex-wrap:wrap}
.mfoot .glogos a{display:inline-flex; align-items:center; gap:7px; filter:grayscale(1); opacity:.62; transition:filter .15s ease, opacity .15s ease}
.mfoot .glogos a:hover{filter:none; opacity:1}
.mfoot .glogos img, .mfoot .glogos svg{display:block; height:18px; width:auto}
.mfoot .gtxt{font-weight:700; font-size:14.5px; color:var(--navy); letter-spacing:-.01em}
.mfoot .gtu{font-size:12.5px; color:var(--mut)}
.mfoot .flegal{border-top:1px solid var(--line2); background:var(--ground); position:relative}
.mfoot .flegal .in{display:flex; gap:10px 28px; flex-wrap:wrap; padding-top:20px; padding-bottom:22px; font-size:13px; color:var(--mut)}
.mfoot .flegal .sp{flex:1}

/* ============ FLAT PANORAMA (pas na dole stopki) ============ */
.mfoot .fcity{position:relative; overflow:hidden; background:#F5FBFE}
.mfoot .fsortsvg{display:block; width:100%; height:clamp(190px, 22vw, 320px)}

/* ============ STATYCZNA LINIA SORTOWANIA (pas na dole stopki) ============ */
.mfoot .fsortsvg{position:absolute; inset:0; width:100%; height:100%; display:block}

/* ============ STATYCZNA LINIA SORTOWANIA (pas na dole stopki) ============ */
.mfoot .fsortsvg{position:absolute; inset:0; width:100%; height:100%; display:block}

/* Ikony w kolkach (.ic, .pico) i w liscie wynikow rysujemy inline SVG zamiast
   glifow ✓ / ✗ z fontu: glif potrafil sie zrenderowac jako sama ukosna kreska,
   a font-size:0 na .pico dodatkowo go chowal. SVG ma wlasny rozmiar i dziedziczy
   kolor przez currentColor, wiec stany (done / transparent) dzialaja jak wczesniej. */
.cklist .ck .ic svg.gl,
.pstep .pico svg.gl{display:block}
.sysrow li svg.gl{display:inline-block; vertical-align:-2px; margin-left:2px}

/* Editor, exports and local font assets. */
@font-face{font-family:"CV Sans";src:url("/assets/fonts/NotoSans-Regular.ttf") format("truetype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"CV Sans";src:url("/assets/fonts/NotoSans-Bold.ttf") format("truetype");font-weight:600 900;font-style:normal;font-display:swap}
[hidden]{display:none!important}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 18px}
.hero-actions.centered{justify-content:center}
.template-mini{align-items:stretch!important;justify-content:space-between;font-size:12px;gap:12px!important}
.template-mini>b{font-size:15px}
.template-mini>span{font-size:10px;color:var(--mut)}
.template-mini hr{width:100%;border:0;border-top:1px solid var(--cv-accent)}
.tpl .use{opacity:1;transform:none;position:static;display:flex;padding:0 18px 20px}
.tpl .meta span{font-size:12px;white-space:nowrap}
.builder-section{padding-top:32px}
.builder-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:28px}
.builder-toolbar .field{min-width:170px;margin:0}
.builder-toolbar #draftStatus{font-size:12px;color:var(--mut)}
.cv-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.builder-form{display:grid;gap:20px;min-width:0}
.builder-form fieldset{margin:0;padding:0;min-width:0;border:1px solid var(--line2)}
.builder-form legend{font-size:17px;font-weight:700;padding:0 10px;margin-left:16px}
.builder-form input,.builder-form textarea,.builder-form select{min-width:0;width:100%;font-size:16px}
.builder-form .field{margin-bottom:16px}
.builder-form .frow{gap:14px}
.cv-entry{border-bottom:1px solid var(--line2);padding-bottom:20px;margin-bottom:22px}
.cv-entry>b{display:block;margin-bottom:14px}
.current-check{display:flex;align-items:center;gap:8px;font-size:14px;margin:10px 0 16px}
.current-check input{width:18px;height:18px}
.builder-result{min-width:0}
.content-check{padding:20px}
.content-check ul{font-size:13px;line-height:1.6;margin:12px 0 0;padding-left:20px}
.content-check .hint{margin-top:7px}
.builder-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.builder-actions .btn{font-size:13px;padding:12px 16px}
.nav .btn{white-space:nowrap}
.content-check ul{list-style:disc}
#builderMessage,.scan-message{font-size:14px;color:var(--ink2);overflow-wrap:anywhere;margin:14px 0}
#builderMessage:empty,.scan-message:empty{display:none}
.preview-hint{margin:12px 0}
.cv-preview{font-family:"CV Sans",sans-serif;background:white;box-shadow:var(--shBig);border:1px solid var(--line2);padding:36px;min-height:660px;overflow-wrap:anywhere;line-height:1.6;color:#222;font-size:var(--cv-size,1rem)}
.cv-preview>p{white-space:pre-wrap;margin:0 0 12px;font-size:.85em;line-height:1.65}
.cv-preview .cv-name{font-size:2em;color:var(--cv-accent);margin:0 0 7px;text-align:var(--cv-align);line-height:1.25}
.cv-preview .cv-headline,.cv-preview .cv-contact{text-align:var(--cv-align)}
.cv-preview .cv-contact{font-size:.7em}
.cv-preview .cv-section{color:var(--cv-accent);font-size:.95em;margin:22px 0 12px;padding-top:8px;line-height:1.4}
.cv-preview[data-rule=true] .cv-section{border-top:1px solid var(--cv-accent)}
.cv-preview .cv-title{font-weight:700;margin-bottom:3px}
.cv-preview .cv-dates{color:#555;font-size:.72em;margin-bottom:10px}
.cv-preview .cv-clause{font-size:.65em}
input[aria-invalid=true]{border-color:#c4453c}
button:disabled{opacity:.6;cursor:wait}
.method-note{max-width:880px;margin:28px auto 0;text-align:center;font-size:14px;color:var(--mut);line-height:1.7}
.checkout-off{max-width:880px;margin:0 auto 28px;justify-content:center;text-align:center}
.btn.btn-off{opacity:.6;cursor:not-allowed;pointer-events:none}
.report{scroll-margin-top:90px}
.report .fnd,.report .parsed .row{overflow-wrap:anywhere}
.report .fnd>div{min-width:0}
.dropzone:focus-within{outline:3px solid var(--cyan);outline-offset:4px}
.payment-wrap{max-width:700px}
.payment-wrap .panel{margin-bottom:24px}
.payment-form .field{margin:22px 0}
.payment-form input:not([type=checkbox]),.payment-form textarea{width:100%;font-size:16px}
.payment-form textarea{overflow-wrap:anywhere}
.payment-check{display:flex;align-items:flex-start;gap:10px;margin:20px 0;line-height:1.6}
.payment-check input{flex:none;width:18px;height:18px;margin-top:4px}
.payment-wrap [role=status]{margin:16px 0;overflow-wrap:anywhere}
.payment-wrap ul{list-style:disc;padding-left:20px;margin:18px 0}
.invoice-fields{border:1px solid var(--line);border-radius:12px;padding:4px 18px 18px;margin:22px 0}
.invoice-fields legend{font-size:13.5px;font-weight:600;color:var(--ink2);padding:0 6px}
.invoice-fields .field{margin:16px 0}
.invoice-fields label .hint{display:inline;font-weight:500}
.invoice-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px}
.subscription-item{border-top:1px solid var(--line);padding:18px 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.subscription-item p{width:100%;font-size:14px}.subscription-item .btn{margin-left:auto}
.report-paywall{margin-top:22px;padding:20px;background:var(--cyanBg);border-radius:12px}.report-paywall p{font-size:14px;line-height:1.6;margin:12px 0}.report-paywall .btn{margin:4px}
.template-gallery{gap:30px}
.template-cover{position:relative;display:block;background:#edf2f4;padding:16px;border-radius:10px;overflow:hidden}
.template-cover img{display:block;width:100%;height:auto;aspect-ratio:210/297;box-shadow:0 8px 20px #243d4414}
.template-zoom{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;padding:7px 10px;border-radius:6px;background:#243d44;color:white;font-size:12px;line-height:1.5}
.template-cover:hover .template-zoom,.template-cover:focus-visible .template-zoom{background:var(--cyanD)}
.template-description{padding:6px 6px 18px;font-size:13px;line-height:1.5;color:var(--mut);min-height:63px}
.template-gallery .use{padding:0 6px 8px}
.template-dialog{width:min(1100px,calc(100vw - 40px));height:calc(100dvh - 40px);max-width:none;max-height:none;margin:auto;border:1px solid var(--line);border-radius:18px;padding:0;background:var(--card);color:var(--ink);box-shadow:var(--shBig)}
.template-dialog[open]{display:flex;flex-direction:column}
.template-dialog::backdrop{background:rgba(15,34,41,.72);backdrop-filter:blur(4px)}
.template-dialog-bar,.template-dialog-tools,.template-dialog-bottom{display:flex;align-items:center;gap:14px;padding:16px 24px;flex-shrink:0}
.template-dialog-bar{justify-content:space-between;border-bottom:1px solid var(--line)}
.template-dialog-bar .eyebrow{font-size:10px}.template-dialog-bar h2{font-size:26px;margin-top:5px}
.template-dialog-tools{flex-wrap:wrap;padding-top:12px;padding-bottom:12px;font-size:13px}
.template-dialog-tools label{margin-left:auto}.template-dialog-tools select{padding:8px;border:1px solid var(--line);border-radius:8px}
.template-dialog-paper{flex:1;overflow:auto;min-height:0;padding:24px;background:#e7edf0;overscroll-behavior:contain}
.template-dialog-paper img{display:block;height:auto;margin:0 auto;box-shadow:var(--shBig)}
.template-dialog-bottom{justify-content:space-between;border-top:1px solid var(--line)}
.template-modal-open{overflow:hidden}
.subscription-prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.subscription-prices .price{padding:30px 26px}.subscription-prices h2{font-size:22px}
.subscription-prices .amt b{font-size:46px}.subscription-prices .amt{white-space:nowrap}
@media(max-width:980px){.subscription-prices{grid-template-columns:1fr;max-width:540px;margin:auto;gap:34px}}
@media(max-width:600px){.template-dialog{width:100%;height:100dvh;border-radius:0;border:0}.template-dialog-bar,.template-dialog-tools,.template-dialog-bottom{padding:12px}.template-dialog-paper{padding:12px}.template-dialog-tools{gap:10px}.template-dialog-tools label{margin-left:0}.template-dialog-bottom .btn{font-size:12px;padding:12px}.template-description{min-height:0}}
@media(max-width:900px){
.cv-builder{grid-template-columns:1fr}.builder-result{position:static}.cv-preview{max-width:640px;margin:0 auto;min-height:500px}
.a4wrap,.scorecol{position:static;top:auto}
}
@media(max-width:540px){
.invoice-row{grid-template-columns:1fr}
.builder-toolbar{gap:10px}.builder-toolbar .btn{font-size:12px;padding:12px}
.builder-toolbar .field{width:100%}.builder-toolbar #draftStatus{width:100%}
.cv-preview{padding:24px}.builder-form .frow{grid-template-columns:1fr;display:grid}
.report .scorehead{gap:20px}.report .split{grid-template-columns:1fr}
.report .parsed .row{grid-template-columns:110px minmax(0,1fr)}
}