/* ============ TOKENI ============ */
:root{
  --ink:#0B1622;
  --ink-2:#1D2A3A;
  --muted:#5A6B80;
  --paper:#F3F6FA;
  --white:#fff;
  --line:#DCE3EC;
  --line-2:#EDF1F6;
  --accent:#1F4BF2;
  --accent-d:#1636C4;
  --accent-w:#EEF2FE;
  --save:#0E9F6E;
  --err:#D8352C;
  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(11,22,34,.05), 0 12px 32px -12px rgba(11,22,34,.14);
  --shadow-lg:0 2px 4px rgba(11,22,34,.05), 0 28px 60px -20px rgba(11,22,34,.25);
  --disp:"Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-family:var(--disp); line-height:1.1; letter-spacing:-.02em; font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:min(1180px, 100% - 40px); margin-inline:auto}
.wrap--narrow{width:min(760px, 100% - 40px)}

:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}

.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:100}
.skip:focus{left:12px; top:12px}

/* ============ GUMBI ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; border:0; border-radius:11px;
  font-family:var(--body); font-size:16px; font-weight:600; line-height:1;
  padding:16px 22px; cursor:pointer; text-decoration:none;
  transition:background .15s ease, transform .1s ease;
}
.btn:hover{background:var(--accent-d); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:11px 16px; font-size:14.5px}
.btn--lg{padding:19px 34px; font-size:17px}
.btn--full{width:100%; margin-top:6px}
.btn--ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn--ghost:hover{background:var(--paper)}
.btn--go{position:relative; background:var(--save)}
.btn--go:hover{background:#0B855C}
.btn__spin{display:none; width:17px; height:17px; border:2.4px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
.is-sending .btn__spin{display:block}
.is-sending .btn__txt{opacity:.65}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ GLAVA ============ */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2)}
.topbar__in{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo{display:flex; align-items:center; gap:9px; color:var(--ink)}
.logo:hover{text-decoration:none}
.logo__mark{display:flex}
.logo__txt{font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:-.03em}
.logo__dot{color:var(--save)}
.topnav{display:flex; align-items:center; gap:26px}
.topnav a{color:var(--muted); font-size:15px; font-weight:500}
.topnav a:hover{color:var(--ink); text-decoration:none}
.topnav .btn{color:#fff}

/* ============ HERO ============ */
.hero{background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 62%, var(--white) 100%); padding:56px 0 64px}
.hero__grid{display:grid; grid-template-columns:1fr 480px; gap:56px; align-items:start}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.hero h1{font-size:clamp(38px, 5vw, 60px); font-weight:800; letter-spacing:-.035em; margin-bottom:20px}
.lede{font-size:18px; color:var(--ink-2); max-width:52ch; margin-bottom:26px}

.pricetag{
  display:inline-flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 18px; box-shadow:var(--shadow); margin-bottom:26px;
}
.pricetag__label{font-size:13px; color:var(--muted); font-weight:500}
.pricetag__old{font-family:var(--disp); font-size:22px; font-weight:600; color:var(--muted); text-decoration:line-through; text-decoration-thickness:2px}
.pricetag__arrow{color:var(--muted); align-self:center}
.pricetag__new{font-family:var(--disp); font-size:28px; font-weight:800; color:var(--save); letter-spacing:-.03em}
.pricetag__note{font-size:13px; color:var(--muted)}

.trust{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.trust li{display:flex; align-items:center; gap:10px; font-size:15.5px; color:var(--ink-2); font-weight:500}
.trust svg{color:var(--save); flex:none}

/* ============ OBRAZEC ============ */
.formcard{
  background:var(--white); border:2px solid var(--accent); border-radius:var(--r-lg);
  box-shadow:0 0 0 5px var(--accent-w), var(--shadow-lg); padding:26px; position:sticky; top:86px;
  scroll-margin-top:86px;
}
.formcard__head{margin-bottom:22px}
.progress__bar{height:5px; background:var(--line-2); border-radius:99px; overflow:hidden}
.progress__bar span{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1)}
.progress__txt{font-size:12.5px; color:var(--muted); margin:9px 0 0; font-weight:500; font-variant-numeric:tabular-nums}

.step{display:none; border:0; margin:0; padding:0; min-inline-size:0}
.step.is-active{display:block; animation:slide .28s ease}
@keyframes slide{from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:none}}
.q{font-family:var(--disp); font-size:24px; font-weight:700; letter-spacing:-.025em; padding:0; margin-bottom:8px; line-height:1.2}
.hint{font-size:14px; color:var(--muted); margin-bottom:18px}
.q + .tiles{margin-top:18px}

.tiles{display:grid; gap:10px}
.tiles--2{grid-template-columns:1fr 1fr}
.tiles--3{grid-template-columns:1fr}
.tiles--4{grid-template-columns:repeat(4,1fr)}

.tile{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r);
  padding:15px 16px; cursor:pointer; font-family:var(--body); color:var(--ink);
  transition:border-color .14s ease, background .14s ease, transform .1s ease;
}
.tile:hover{border-color:var(--accent); background:var(--accent-w)}
.tile:active{transform:scale(.99)}
.tile.is-sel{border-color:var(--accent); background:var(--accent-w); box-shadow:inset 0 0 0 1px var(--accent)}
.tiles--3 .tile{flex-direction:row; align-items:center; gap:14px; padding:14px 16px}
.tile__ico{display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:11px; background:var(--paper); color:var(--accent)}
.tiles--3 .tile > span:not(.tile__ico){display:block}
.tile__t{font-size:16px; font-weight:600; letter-spacing:-.01em}
.tile__s{font-size:13.5px; color:var(--muted); font-weight:400}
.tiles--3 .tile__t{margin-bottom:1px}
.tile--flat{align-items:center; justify-content:center; text-align:center; padding:16px 10px}
.tile--flat .tile__t{font-size:15px}
.tile--num{align-items:center; justify-content:center; padding:20px 0}
.tile__n{font-family:var(--disp); font-size:26px; font-weight:700; letter-spacing:-.03em}

.fields{display:grid; gap:14px; margin-bottom:6px}
.f-row{display:grid; grid-template-columns:110px 1fr; gap:12px}
.f{display:block}
.f__l{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.f__opt{font-weight:400; color:var(--muted)}
.f input{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  padding:14px 15px; border:1.5px solid var(--line); border-radius:11px; background:var(--white);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.f input::placeholder{color:var(--muted)}
.f input:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-w)}
.f input.is-bad{border-color:var(--err)}
.f__err{display:none; font-size:13px; color:var(--err); margin-top:5px; font-weight:500}
.f__err.is-on{display:block}

.check{display:grid; grid-template-columns:24px 1fr; gap:11px; align-items:start; margin:18px 0 4px; font-size:13.5px; line-height:1.5; color:var(--muted); cursor:pointer}
.check input{width:24px; height:24px; margin:0; accent-color:var(--accent); cursor:pointer; flex:none}
.check .f__err{grid-column:2}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.microcopy{font-size:12.5px; color:var(--muted); text-align:center; margin:12px 0 0}
.formerror{background:#FEF0EF; color:var(--err); border:1px solid #F6CFCC; border-radius:11px; padding:12px 14px; font-size:14px; margin:14px 0 0; font-weight:500}
.back{background:none; border:0; color:var(--muted); font-family:var(--body); font-size:14px; font-weight:500; padding:14px 0 0; cursor:pointer}
.back:hover{color:var(--ink)}

/* ============ TRAK ============ */
.strip{padding:34px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.strip__t{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:16px}
.strip__list{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px; margin:0; padding:0}
.strip__list li{font-family:var(--disp); font-size:19px; font-weight:600; color:var(--muted); letter-spacing:-.02em}

/* ============ SEKCIJE ============ */
.sec{padding:80px 0}
.h2{font-size:clamp(28px, 3.6vw, 40px); font-weight:800; letter-spacing:-.03em; margin-bottom:36px; max-width:20ch}
.h2--light{color:#fff}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:s}
.steps li{background:var(--paper); border-radius:var(--r-lg); padding:28px 26px}
.steps__n{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--disp); font-weight:700; font-size:17px; margin-bottom:16px}
.steps h3{font-size:19px; margin-bottom:8px}
.steps p{font-size:15px; color:var(--muted)}

.sec--dark{background:var(--ink); color:#C6D2E0}
.why{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.why p{font-size:17px}
.why__stats{display:grid; gap:16px}
.why__stats div{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:20px 22px; display:flex; align-items:baseline; gap:14px}
.why__stats strong{font-family:var(--disp); font-size:30px; font-weight:800; color:#fff; letter-spacing:-.03em; flex:none}
.why__stats span{font-size:14.5px}

.faq details{border-bottom:1px solid var(--line); padding:6px 0}
.faq summary{list-style:none; cursor:pointer; padding:18px 34px 18px 0; font-size:17px; font-weight:600; letter-spacing:-.015em; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--muted); padding:0 40px 18px 0; font-size:15.5px}

.cta{background:var(--paper); padding:76px 0}
.cta__in{text-align:center}
.cta h2{font-size:clamp(28px, 3.6vw, 40px); font-weight:800; letter-spacing:-.03em; margin-bottom:12px}
.cta p{color:var(--muted); font-size:17px; margin-bottom:26px}

/* ============ NOGA ============ */
.foot{background:var(--ink); color:#8FA0B4; padding:56px 0 26px; font-size:14.5px}
.foot__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
.foot h3{color:#fff; font-size:14px; letter-spacing:.02em; margin-bottom:12px; font-family:var(--body); font-weight:600}
.foot a{color:#8FA0B4}
.foot a:hover{color:#fff}
.foot__brand .logo__txt{color:#fff; display:block; margin-bottom:10px}
.foot__brand p{max-width:34ch}
.foot__bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.1); margin-top:42px; padding-top:22px; font-size:13px; color:#8FA0B4}
.foot__bottom p{margin:0}

/* ============ PIŠKOTKI ============ */
/* ---- modalno okno s piškotki ---- */
.cookiebar{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:rgba(8,16,26,.6);
  animation:ckIn .2s ease;
}
.cookiebar[hidden]{display:none}
@keyframes ckIn{from{opacity:0} to{opacity:1}}

.cookiebar__in{
  width:min(460px, 100%);
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  background:var(--white);
  border-radius:18px;
  padding:24px 24px 20px;
  box-shadow:0 20px 60px -16px rgba(8,16,26,.5);
  animation:ckPop .24s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes ckPop{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none}}

.cookiebar h3{font-size:19px; letter-spacing:-.02em; margin-bottom:9px}
.cookiebar p{font-size:13.5px; color:var(--muted); margin:0; line-height:1.5}
.cookiebar p a{color:var(--muted); text-decoration:underline}

.cookiebar__btns{display:grid; gap:8px; margin-top:20px}
.cookiebar__btns .btn[hidden]{display:none}
.cookiebar__btns .btn{width:100%; justify-content:center; padding:14px 16px; font-size:15px; border-radius:10px}
.cookiebar__btns .btn--ghost{background:var(--white); border:1.5px solid var(--accent); color:var(--accent)}
.cookiebar__btns .btn--ghost:hover{background:var(--accent-w)}

.cookiebar__opts{display:grid; gap:11px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2)}
.cookiebar__opts[hidden]{display:none}
.ck-opt{display:grid; grid-template-columns:24px 1fr; gap:11px; align-items:start; font-size:13px; color:var(--muted); cursor:pointer; line-height:1.45}
.ck-opt input{width:24px; height:24px; margin:0; accent-color:var(--accent)}
.ck-opt strong{color:var(--ink); display:block; margin-bottom:1px}

body.ck-lock{overflow:hidden}

@media (max-width:560px){
  .cookiebar{padding:14px}
  .cookiebar__in{padding:22px 20px 18px}
}

/* ============ PRAVNE STRANI ============ */
.doc{padding:56px 0 80px}
.doc h1{font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.03em; margin-bottom:10px}
.doc .updated{color:var(--muted); font-size:14px; margin-bottom:38px}
.doc h2{font-size:22px; margin:38px 0 12px; letter-spacing:-.02em}
.doc h3{font-size:17px; margin:24px 0 8px}
.doc p, .doc li{color:var(--ink-2); font-size:16px}
.doc ul, .doc ol{padding-left:22px; margin:0 0 1em}
.doc li{margin-bottom:7px}
.doc table{width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:14.5px}
.doc th, .doc td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{background:var(--paper); font-weight:600; font-size:13.5px}
.doc .box{background:var(--paper); border-radius:var(--r); padding:20px 22px; margin:0 0 1.4em}

/* ============ HVALA ============ */
.thanks{min-height:62vh; display:flex; align-items:center; padding:70px 0}
.thanks__in{text-align:center; max-width:620px; margin-inline:auto}
.thanks__ico{width:68px; height:68px; border-radius:50%; background:#E5F6EF; color:var(--save); display:flex; align-items:center; justify-content:center; margin:0 auto 24px}
.thanks h1{font-size:clamp(30px,4vw,42px); font-weight:800; letter-spacing:-.03em; margin-bottom:14px}
.thanks p{font-size:17.5px; color:var(--muted); margin-bottom:26px}
.next{list-style:none; margin:34px 0 30px; padding:0; display:grid; gap:12px; text-align:left}
.next li{background:var(--paper); border-radius:var(--r); padding:16px 18px; display:grid; grid-template-columns:30px 1fr; gap:13px; align-items:start; font-size:15px}
.next b{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; font-size:14px; font-family:var(--disp)}

/* ============ MOBILNO ============ */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr; gap:34px}
  .formcard{position:static}
  .why{grid-template-columns:1fr; gap:32px}
  .steps{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap, .wrap--narrow, .cookiebar__in{width:min(100%, 100% - 32px)}
  .topnav a:not(.btn){display:none}
  .hero{padding:34px 0 44px}
  .hero h1{font-size:33px}
  .lede{font-size:16.5px}
  .sec{padding:56px 0}
  .formcard{padding:20px 18px; border-radius:18px; scroll-margin-top:78px}
  .q{font-size:21px}
  .tiles--4{grid-template-columns:repeat(4,1fr); gap:8px}
  .tile--num{padding:17px 0}
  .cookiebar__in{grid-template-columns:1fr; gap:16px}
  .cookiebar__btns .btn{flex:1 1 auto; justify-content:center}
  .foot__in{grid-template-columns:1fr; gap:26px}
  .pricetag{width:100%}
}
@media (max-width:420px){
  .tiles--2{grid-template-columns:1fr}
  .f-row{grid-template-columns:96px 1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   OGLAS.HTML — namenska pristajalna stran za oglase (samo obrazec)
   ===================================================================== */
.adlp-body{background:var(--paper)}

.adlp-head{padding:14px 0; border-bottom:1px solid var(--line-2); background:var(--white)}
.adlp-head__in{width:min(720px, 100% - 32px); margin-inline:auto; display:flex; align-items:center}

.adlp-main{padding:22px 0 28px}
.adlp-wrap{width:min(560px, 100% - 32px); margin-inline:auto; display:flex; flex-direction:column; gap:14px}

.adlp-copy{text-align:center; padding:2px 4px 0}
.adlp-h1{
  font-family:var(--disp); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(22px, 5.5vw, 30px); line-height:1.14; margin:6px 0 12px; color:var(--ink);
}
.adlp-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
  list-style:none; margin:0; padding:0;
}
.adlp-trust li{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:var(--ink-2)}
.adlp-trust svg{color:var(--save); flex:none}

.adlp-wrap .formcard{position:static; box-shadow:var(--shadow-lg)}

.adlp-foot{padding:18px 0 26px; text-align:center}
.adlp-foot p{
  width:min(560px, 100% - 32px); margin-inline:auto;
  font-size:11.5px; color:var(--muted); line-height:1.7;
}
.adlp-foot a{color:var(--muted); text-decoration:underline}
.adlp-foot a:hover{color:var(--muted)}

@media (max-width:480px){
  .adlp-head{padding:10px 0}
  .adlp-main{padding:14px 0 18px}
  .adlp-wrap{gap:10px}
  .adlp-h1{font-size:21px; margin:4px 0 10px}
  .adlp-copy{padding-top:0}
  .adlp-wrap .formcard{padding:18px 16px; border-radius:16px}
}

/* zelo nizki zasloni: se malce stisne, da prvo vprasanje ostane brez skrola */
@media (max-height:700px) and (max-width:480px){
  .adlp-head{padding:8px 0}
  .eyebrow{margin-bottom:4px; font-size:11px}
  .adlp-h1{font-size:19px; margin:2px 0 8px}
  .adlp-trust{display:none}
}