:root{
  --bg:#FFFFFF; --bg-soft:#F7F5F1; --surface:#FFFFFF; --border:rgba(28,38,48,.13);
  --warm:#C2703C; --warm-soft:#F6EFE7;
  --mint:#3F7A6A; --violet:#6D6FE0; --rose:#DC5F86;
  --text:#16202B; --muted:#5C6773;
  --brand:#2F82CE;      /* modra iz logotipa */
  --brand-2:#5FB3E4;    /* svetla modra vezij */
  --brand-deep:#1B4C7E; /* temna modra možganov */
  --ink:#152232;        /* temne sekcije */
  --sky:#EDF3FA; --sky-line:rgba(47,130,206,.20);
  --accent:#3F7A6A;
  --radius:12px; --max:1204px; --max-wide:1514px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto}
.wrap-wide{width:min(100% - 2.5rem,var(--max-wide));margin-inline:auto}
@media(min-width:1500px){.wrap-wide{width:min(100% - 5.5rem,var(--max-wide))}}
section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700}
h3{font-size:1.12rem;font-weight:650}
p{margin:.85rem 0}
.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  background:none;border:0;border-left:3px solid var(--brand);padding:.1rem 0 .1rem .7rem;border-radius:0}
.grad{color:var(--brand-deep)}

.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.5rem;border-radius:8px;font-weight:650;font-size:.95rem;
  border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;cursor:pointer}
.btn-primary{background:var(--brand-deep);color:#fff}
.btn-primary:hover{background:#143C66}
.btn-ghost{border-color:var(--border);background:#fff;color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:var(--bg-soft)}
:where(a,button,input,textarea,select,summary,details):focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}

/* Header + logotip */
header{position:fixed;inset:0 0 auto;z-index:60;background:#fff;border-bottom:1px solid var(--border);
  transition:box-shadow .3s}
header.stuck{background:#fff;border-bottom-color:var(--border);box-shadow:0 4px 16px -12px rgba(16,42,72,.5)}
.nav{display:flex;align-items:center;gap:1.6rem;padding:1.05rem 0}
/* povezave priblizno na sredini: enak razmik do logotipa in do orodij */
.nav-links{margin-inline:auto}
.logo{display:flex;align-items:center;gap:.8rem}
.logo .mark{width:68px;height:68px;flex:0 0 68px;object-fit:contain;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.logo:hover .mark{transform:scale(1.07) rotate(-3deg)}
.logo .word{display:flex;flex-direction:column;line-height:1}
.logo .word b,.logo .word small{white-space:nowrap}
.logo .word b{font-size:1.72rem;font-weight:750;letter-spacing:-.02em}
.logo .word b i{font-style:normal;color:var(--brand)}
.logo .word small{font-size:.68rem;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:.3rem}
.nav-links{display:flex;gap:1.7rem;font-size:1rem;color:var(--muted)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--brand);transition:width .25s}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.55rem}
.nav-tools{display:flex;align-items:center;gap:.5rem;padding-right:.55rem;margin-right:.1rem;border-right:1px solid var(--border)}
.lang{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:#fff}
.lang button{background:none;border:0;color:var(--muted);font:inherit;font-size:.8rem;font-weight:700;padding:.42rem .78rem;cursor:pointer;transition:background .2s,color .2s}
.lang button[aria-pressed="true"]{background:var(--brand-deep);color:#fff}
.burger{display:none;background:none;border:1px solid var(--border);border-radius:10px;padding:.45rem .6rem;color:var(--text);cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center}
@media(max-width:940px){
  .nav-links,.nav-right .btn{display:none}
  .burger{display:block}
  .mobile-menu{display:none;flex-direction:column;gap:.2rem;padding:.4rem 0 1.2rem}
  .mobile-menu.open{display:flex}
  .mobile-menu a{padding:.65rem .2rem;border-bottom:1px solid var(--border);color:var(--muted)}
}
@media(max-width:600px){
  .nav{padding:.9rem 0}
  .logo .mark{width:46px;height:46px;flex:0 0 46px}
  .logo .word b{font-size:1.32rem}
}
@media(min-width:941px){.mobile-menu{display:none}}

/* Hero */
.hero{padding-top:clamp(8.5rem,15vw,11rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero p.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--border)}
@media (max-width:760px){.hero-facts{grid-template-columns:1fr 1fr;gap:1.4rem}}
@media (max-width:430px){.hero-facts{grid-template-columns:1fr}}
.fact b{display:block;font-size:clamp(1.15rem,1.55vw,1.5rem);font-weight:750;letter-spacing:-.02em;white-space:nowrap}
.fact span{font-size:.82rem;color:var(--muted)}
.aurora{display:none}

.panel{background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 18px 40px -34px rgba(16,42,72,.5);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:.45rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.dot{width:11px;height:11px;border-radius:50%}
.panel-title{margin-left:.6rem;font-size:.8rem;color:var(--muted)}
.ticket{display:flex;gap:.9rem;align-items:center;padding:1rem 1.15rem;border-bottom:1px solid rgba(16,42,72,.07);
  opacity:0;transform:translateY(10px);animation:rise .6s forwards}
.ticket:nth-child(2){animation-delay:.15s}.ticket:nth-child(3){animation-delay:.35s}.ticket:nth-child(4){animation-delay:.55s}.ticket:nth-child(5){animation-delay:.75s}.ticket:nth-child(6){animation-delay:.95s}
@keyframes rise{to{opacity:1;transform:none}}
.ticket .ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:rgba(47,130,206,.10);border:1px solid rgba(47,130,206,.20);font-size:1rem}
.ticket b{font-size:.94rem;font-weight:650}
.ticket small{color:var(--muted)}
.status{margin-left:auto;font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;white-space:nowrap;
  background:rgba(14,159,110,.10);color:var(--accent);border:1px solid rgba(14,159,110,.24)}
.status.warn{background:rgba(180,83,9,.09);color:#B45309;border-color:rgba(180,83,9,.22)}
.pulse{position:relative}
.pulse::before{content:"";position:absolute;left:-.6rem;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-50%);
  box-shadow:0 0 0 0 rgba(14,159,110,.55);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(14,159,110,0)}100%{box-shadow:0 0 0 0 rgba(14,159,110,0)}}

.strip{border-block:1px solid rgba(47,130,206,.16);background:linear-gradient(180deg,#E9F0F9,#F6FAFD);padding:1.5rem 0}
.strip-inner{display:flex;flex-wrap:wrap;gap:1rem 2.6rem;align-items:center;justify-content:space-between;
  color:#41536B;font-size:.9rem;font-weight:550}
@media(max-width:820px){.strip-inner{justify-content:flex-start}}

.grid{display:grid;gap:1.1rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;position:relative;overflow:hidden;
  transition:border-color .25s,box-shadow .25s}
.card::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--warm);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:hover{border-color:rgba(28,38,48,.28);box-shadow:0 14px 30px -28px rgba(16,42,72,.6)}
.card:hover::after{transform:scaleX(1)}
.card .ic{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-size:1.25rem;margin-bottom:1rem;
  background:var(--bg-soft);border:1px solid var(--border)}
.card p{font-size:.94rem;color:var(--muted);margin:.5rem 0 0}

.steps{counter-reset:s;display:grid;gap:1.1rem;grid-template-columns:repeat(4,1fr)}
.steps-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}
  .steps-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps,.steps-3{grid-template-columns:1fr}}
.step{position:relative;padding:1.7rem;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 1px 2px rgba(16,42,72,.05)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:.85rem;right:1.1rem;font-size:1.9rem;font-weight:800;
  color:rgba(47,130,206,.18)}
.step h3{padding-right:2.4rem}
.step p{font-size:.94rem;color:var(--muted)}

.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;align-items:stretch}
.pricing.pricing-3{grid-template-columns:1fr 1.15fr 1fr}
/* med 941 in 1180 px so stiri kolone pretesne (228 px) - raje 2x2 */
@media(min-width:941px) and (max-width:1180px){.pricing.pricing-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:940px){.pricing,.pricing.pricing-3{grid-template-columns:1fr}}
@media(max-width:620px){.pricing{grid-template-columns:1fr}}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:1.9rem 1.6rem;box-shadow:0 1px 2px rgba(16,42,72,.05);transition:transform .3s,border-color .3s,box-shadow .3s}
.plan:hover{border-color:rgba(28,38,48,.28)}
.plan.featured{border-color:var(--brand-deep);border-width:2px}
.badge{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--warm);color:#fff;
  font-size:.72rem;font-weight:700;padding:.34rem .9rem;border-radius:6px;white-space:nowrap}
.plan h3{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:.35rem;margin:.9rem 0 .2rem}
.price b{font-size:2.5rem;font-weight:800;letter-spacing:-.03em}
.price b.small{font-size:1.5rem}
.price span{color:var(--muted);font-size:.9rem}
.plan .who{color:var(--muted);font-size:.9rem;margin-top:0}
.plan-users{margin:.15rem 0 .5rem;font-size:.82rem;font-weight:600;color:var(--brand-deep)}
.plan ul{list-style:none;margin:1.3rem 0;padding:0;display:grid;gap:.6rem;font-size:.92rem}
.plan li{position:relative;padding-left:1.35rem;color:#3D4F66;line-height:1.55}
.plan li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.plan li.off{opacity:.5}
.plan li.off::before{content:"–";color:var(--muted)}
.plan .btn{margin-top:auto;justify-content:center}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 1px 2px rgba(16,42,72,.05)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.92rem}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid rgba(16,42,72,.08)}
thead th{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft);position:sticky;top:0;z-index:1}
tbody td:first-child{font-weight:600;color:var(--text)}
tbody tr:hover{background:rgba(47,130,206,.05)}
td.y{color:var(--accent);font-weight:700}
td.n{color:rgba(16,42,72,.3)}
th.hl,td.hl{background:rgba(47,130,206,.07)}

details{border:1px solid var(--border);border-radius:14px;background:#fff;padding:0 1.2rem;margin-bottom:.7rem;transition:border-color .25s,box-shadow .25s}
details:hover{border-color:rgba(47,130,206,.35)}
details[open]{border-color:var(--brand);box-shadow:0 14px 30px -24px rgba(16,42,72,.5)}
summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-weight:600;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.35rem;color:var(--brand);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 1.1rem;color:var(--muted);font-size:.95rem}

.cta{background:var(--ink);border:0;color:#fff;
  border-radius:var(--radius);padding:clamp(2.4rem,5vw,3.6rem);text-align:left}
/* dvostolpčna različica samo tam, kjer sta besedilo in gumb ločena */
.cta.split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media(max-width:860px){.cta.split{grid-template-columns:1fr;gap:2rem}}
/* berljivost na temni podlagi */
.cta label,.cta .muted{color:rgba(255,255,255,.72)}
.cta .form{margin-top:2.2rem}

/* ---- Ozadje pri obrazcu, da bok ni prazen ---- */
#obrazec{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#E6EDF6 0%,#D8E4F0 100%);border-block:1px solid #CBD8E8}
#obrazec > .wrap{position:relative;z-index:2}
#obrazec::before,#obrazec::after{content:"";position:absolute;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(47,130,206,.32) 1.6px,transparent 1.6px);background-size:15px 15px}
#obrazec::before{width:190px;height:230px;top:12%;left:calc(50% - 760px);opacity:.75}
#obrazec::after{width:190px;height:230px;bottom:10%;right:calc(50% - 760px);opacity:.75}
@media(max-width:1320px){#obrazec::before,#obrazec::after{display:none}}
.cta-points{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.6rem;font-size:.96rem}
.cta-points li{display:flex;gap:.6rem;align-items:flex-start;color:rgba(255,255,255,.9)}
.cta-points li::before{content:"✓";color:var(--brand-2);font-weight:800;flex:0 0 auto}
.cta-action{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.cta-action .btn{width:100%;justify-content:center;padding:1.05rem 1.6rem;font-size:1rem}
.cta-or{font-size:.86rem;color:rgba(255,255,255,.55);margin-top:.4rem}
.cta-mail{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.35)}
.cta-mail:hover{border-bottom-color:#fff}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.72)}
.cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.cta .btn-primary{background:var(--brand)}
.cta .btn-primary:hover{background:#256BAD}
.form{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
@media(max-width:620px){.form{grid-template-columns:1fr}}
label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.35rem}
input,textarea,select{width:100%;padding:.8rem .95rem;border-radius:12px;background:#fff;border:1px solid var(--border);
  color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#94A3B4}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(47,130,206,.14)}
textarea{min-height:120px;resize:vertical}

footer{border-top:1px solid var(--border);padding:3rem 0 2.5rem;color:var(--muted);font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot-grid.foot-4{grid-template-columns:1.5fr 1fr 1fr 1.1fr}
@media(max-width:980px){.foot-grid.foot-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid.foot-4{grid-template-columns:1fr}}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr}}
.foot-grid a:hover{color:var(--text)}

/* ---- Živo omrežje v uvodu ---- */

/* ---- Interaktivni izračun ---- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;box-shadow:0 1px 2px rgba(16,42,72,.05)}
.ctrl{margin-bottom:1.2rem;padding-inline:2px}
.ctrl-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.ctrl-top label{margin:0;font-size:.95rem;color:var(--text);font-weight:600}
.ctrl-top b{font-size:1.15rem;color:var(--brand-deep);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;padding:0;border:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand) var(--p,30%),rgba(16,42,72,.12) var(--p,30%));cursor:pointer;box-shadow:none}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--brand);
  box-shadow:0 3px 10px -2px rgba(31,91,150,.6);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 3px 10px -2px rgba(31,91,150,.6)}
.toggles{display:grid;gap:.6rem}
.toggle{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border:1px solid var(--border);border-radius:13px;cursor:pointer;
  transition:border-color .2s,background .2s;font-size:.95rem;font-weight:550}
.toggle:hover{border-color:rgba(47,130,206,.45)}
.toggle input{display:none}
.toggle .sw{width:42px;height:24px;flex:0 0 42px;border-radius:99px;background:rgba(16,42,72,.15);position:relative;transition:background .25s}
.toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(16,42,72,.35);transition:transform .25s}
.toggle input:checked + .sw{background:var(--brand)}
.toggle input:checked + .sw::after{transform:translateX(18px)}
.toggle:has(input:checked){border-color:var(--brand);background:rgba(47,130,206,.05)}
.result{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.8rem}
.result .lab{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.result .plan-name{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;color:var(--brand-deep);line-height:1.1;margin:.3rem 0 .1rem}
.result .plan-price{font-size:1.05rem;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.reasons{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.5rem;font-size:.93rem;color:#3D4F66}
.reasons li{display:flex;gap:.55rem;align-items:flex-start;animation:rise .45s backwards}
.reasons li::before{content:"→";color:var(--brand);font-weight:800}
.bars{margin:1.1rem 0 .9rem;display:grid;gap:.8rem}
.bar-row .bar-top{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.35rem;color:var(--muted)}
.bar-row .bar-top b{color:var(--text);font-variant-numeric:tabular-nums}
.track{height:12px;border-radius:99px;background:rgba(16,42,72,.09);overflow:hidden}
.fill{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.fill.own{background:#B4BCC5}
.fill.us{background:var(--brand-deep)}
.saving{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;padding-top:.9rem;border-top:1px solid rgba(47,130,206,.2)}
.saving b{font-size:2rem;font-weight:800;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.saving span{color:var(--muted);font-size:.9rem}
.calc-note{font-size:.78rem;color:var(--muted);margin-top:1rem}

/* vsebina je vidna takoj — brez čakanja ob drsenju */
.reveal,.reveal.in{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  /* brez animacije bi vrstice na plošči ostale nevidne */
  .ticket,.reasons li{opacity:1!important;transform:none!important}}
.section-head{max-width:62ch;margin-bottom:2.6rem}
.section-head p{color:var(--muted)}

/* ---------- Podstrani ---------- */
.page-hero{padding:clamp(8rem,14vw,10.5rem) 0 clamp(3rem,6vw,4.5rem);overflow:hidden}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.page-hero .lead{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--muted);max-width:60ch}
.nav-links a.active{color:var(--brand-deep);font-weight:650}
.nav-links a.active::after{width:100%}

/* Povzetek paketov na domači strani */
.card.teaser{display:flex;flex-direction:column;text-align:left}
.card.teaser h3{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.card.teaser .teaser-price{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;margin:.4rem 0 .2rem;display:flex;align-items:baseline;gap:.35rem}
.card.teaser .teaser-price span{font-size:.85rem;font-weight:500;color:var(--muted)}
.card.teaser.featured{border-color:var(--brand);box-shadow:0 22px 44px -30px rgba(31,91,150,.6)}
.card.teaser .badge{top:-.7rem}

/* Podrobne storitve */
.svc{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;margin-bottom:1.1rem;
  box-shadow:0 1px 2px rgba(16,42,72,.05);transition:border-color .3s,box-shadow .3s}
.svc:hover{border-color:rgba(47,130,206,.35);box-shadow:0 20px 38px -28px rgba(16,42,72,.45)}
.svc-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.4rem}
.svc-head .ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(135deg,rgba(47,130,206,.12),rgba(95,179,228,.16));border:1px solid rgba(47,130,206,.18)}
.svc > p{color:var(--muted);font-size:.96rem;margin:.2rem 0 1.1rem}
.svc-list{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.94rem;color:#3D4F66;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.svc-list{grid-template-columns:1fr}}
.svc-list li{display:flex;gap:.6rem;align-items:flex-start}
.svc-list li::before{content:"✓";color:var(--accent);font-weight:800;flex:0 0 auto}

/* ============ TOPLEJŠI, BOLJ ŽIV VIDEZ ============ */

/* Barvne ikone — enoten miren ton, brez prelivov */
.ic-blue,.ic-mint,.ic-violet,.ic-warm,.ic-rose,.ic-green{
  background:var(--bg-soft)!important;border-color:var(--border)!important}

/* Mirni pasovi čez celo širino, kot pri naravnih straneh */
.band{background:var(--bg-soft);border-radius:0;margin-inline:auto;width:100%;
  border-block:1px solid var(--border);border-inline:0}
.band-warm{background:var(--warm-soft)}

/* Situacije — pogovorni oblački */
.bubbles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media(max-width:820px){.bubbles{grid-template-columns:1fr}}
.bubble{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:1.6rem 1.7rem;transition:border-color .25s}
.bubble:hover{border-color:rgba(28,38,48,.28)}
.bubble .said{font-size:1.02rem;color:var(--text);font-weight:600;line-height:1.5}
.bubble .said::before{content:"„"}
.bubble .said::after{content:"”"}
.bubble .ans{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px dashed rgba(16,42,72,.14);font-size:.94rem;color:var(--muted)}
.bubble .ans b{flex:0 0 auto;color:var(--brand-deep);font-weight:700}

/* Toplejša tipografija */
h2{letter-spacing:-.025em}
.section-head p{font-size:1.02rem}
.lead{color:#4A5C74}

/* Odzivni značko na plošči v uvodu */
.panel-note{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.15rem;background:var(--warm-soft);
  border-top:1px solid rgba(232,131,58,.22);font-size:.86rem;color:#8A4B18;font-weight:600}
.panel-note span:first-child{font-size:1rem}

/* Pozdrav v uvodu — človeški pridih */
.hello{display:flex;width:max-content;max-width:100%;align-items:center;gap:.6rem;font-size:.95rem;color:var(--muted);margin:0 0 .9rem}
.hello .wave{display:inline-block;font-size:1.15rem;transform-origin:70% 70%;animation:wave 2.6s ease-in-out infinite}
@keyframes wave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(14deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(14deg)}}

/* Mirne kartice — tanka črta namesto sence */
.card,.step,.svc,.plan,.calc-box,.table-wrap,details{box-shadow:none}
.step,.svc,.plan,.calc-box,.table-wrap,details{border-radius:var(--radius)}
.svc:hover{border-color:rgba(28,38,48,.28);box-shadow:none}
details:hover,details[open]{border-color:rgba(28,38,48,.28);box-shadow:none}
details[open]{border-left:3px solid var(--brand)}
summary::after{color:var(--muted)}
.step::before{color:rgba(28,38,48,.14)}
.svc-head .ic{background:var(--bg-soft);border-color:var(--border)}
.ticket .ic{background:var(--bg-soft);border-color:var(--border)}
.status{background:rgba(63,122,106,.10);color:var(--accent);border-color:rgba(63,122,106,.28)}
.pulse::before{display:none}
.panel-note{background:var(--warm-soft);border-top-color:rgba(194,112,60,.25);color:#8A4B18}
.toggle:has(input:checked){border-color:var(--brand-deep);background:var(--bg-soft)}
.toggle input:checked + .sw{background:var(--brand-deep)}
input[type=range]::-webkit-slider-thumb{border-color:var(--brand-deep);box-shadow:none}
input[type=range]::-moz-range-thumb{border-color:var(--brand-deep);box-shadow:none}
header.stuck{box-shadow:none}
.lang{border-radius:8px}
.lang button[aria-pressed="true"]{background:var(--ink)}
thead th{background:var(--bg-soft)}
tbody tr:hover{background:var(--bg-soft)}
th.hl,td.hl{background:rgba(27,76,126,.06)}
.result .plan-name{color:var(--text)}
.saving b{color:var(--brand-deep)}

/* ---- Odsek "Se prepoznate?" ---- */
#situacije{position:relative;overflow:hidden;
  background:linear-gradient(160deg,#FBFDFF 0%,#EEF4FB 45%,#F5F9FD 100%)}
#situacije > .wrap{position:relative;z-index:2}
.sit-dots{position:absolute;z-index:1;width:150px;height:130px;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(47,130,206,.35) 1.6px,transparent 1.6px);background-size:14px 14px}
.sit-dots-a{top:14%;right:2%}
.sit-dots-b{bottom:12%;left:1.5%}
/* dva stolpca: levo besedilo + fotografija, desno vrstice s citati */
.sit-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:960px){.sit-grid{grid-template-columns:1fr;gap:2.4rem}}
.sit-lead{color:var(--muted);max-width:34ch;margin-top:1rem}
.sit-btn{margin-top:1.8rem;padding:1.05rem 1.7rem;border-radius:12px;gap:.7rem}
.sit-btn svg.on-dark{stroke:#fff;width:18px;height:18px}
.sit-photo{margin:2.6rem 0 0;position:relative;border-radius:16px;overflow:hidden}
.sit-photo img{display:block;width:100%;height:auto}
.sit-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(240,246,252,.55),rgba(240,246,252,0) 45%)}
@media(max-width:960px){.sit-photo{display:none}}

.sit-rows{display:grid;gap:1.1rem}
.row-card{display:flex;gap:1.3rem;align-items:flex-start;background:#fff;border:1px solid rgba(28,38,48,.07);
  border-radius:16px;padding:1.5rem 1.7rem;box-shadow:0 16px 36px -30px rgba(16,42,72,.6);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.row-card:hover{border-color:rgba(47,130,206,.32);box-shadow:0 22px 44px -30px rgba(16,42,72,.5);transform:translateY(-2px)}
.row-ic{display:grid;place-items:center;width:62px;height:62px;flex:0 0 62px;border-radius:50%;
  background:rgba(47,130,206,.09)}
.row-ic svg.i{width:28px;height:28px;stroke:var(--brand);stroke-width:1.7}
.row-body{min-width:0}
.row-card .said{margin:.2rem 0 0;font-size:1.02rem;font-weight:700;color:var(--text);line-height:1.45}
.row-card .said::before,.row-card .said::after{content:none}
.row-card .ans{display:flex;gap:.9rem;align-items:flex-start;margin-top:.95rem;padding-top:.95rem;
  border-top:1px dashed rgba(28,38,48,.16);font-size:.95rem;color:var(--muted);line-height:1.55}
.row-card .ans b{color:var(--brand);font-weight:700;flex:0 0 auto}
@media(max-width:560px){
  .row-card{flex-direction:column;gap:.9rem;padding:1.3rem 1.3rem}
  .row-ic{width:52px;height:52px;flex:0 0 52px}
}
.section-head .rule{display:block;width:64px;height:4px;border-radius:99px;background:var(--brand);margin:1.4rem 0 1.1rem}
.sit-art svg{width:100%;height:auto;display:block}
.sit-art .knot path{fill:none;stroke:rgba(31,91,150,.55);stroke-width:2.2}
.sit-art .wire{fill:none;stroke:var(--brand-deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sit-art .node{fill:var(--brand-deep)}
.sit-art .node-glow{fill:rgba(47,130,206,.14)}
.sit-art .node-mark{filter:brightness(0) invert(1)}
.sit-art .lines rect{fill:rgba(47,130,206,.30)}
.sit-art .checks circle{fill:none;stroke:var(--brand);stroke-width:2}
.sit-art .checks path{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.bubbles{gap:1.4rem}
#situacije .bubble{background:#fff;border-color:rgba(28,38,48,.08);border-radius:16px;padding:1.7rem 1.8rem 1.6rem;
  box-shadow:0 18px 40px -32px rgba(16,42,72,.55)}
#situacije .bubble:hover{border-color:rgba(47,130,206,.35);box-shadow:0 24px 46px -30px rgba(16,42,72,.5)}
.quote-chip{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:rgba(47,130,206,.10);color:var(--brand-deep);font-size:2rem;font-weight:800;line-height:0;
  padding-top:.85rem;margin-bottom:1rem}
#situacije .said{font-size:1.05rem;font-weight:650;line-height:1.5;margin:0}
#situacije .said::before,#situacije .said::after{content:none}
#situacije .ans{display:flex;gap:.9rem;align-items:flex-start;margin-top:1.2rem;padding:.95rem 1.05rem;
  border:0;border-radius:12px;background:rgba(47,130,206,.07);font-size:.95rem;color:#3D4F66;line-height:1.55}
.ans-ic{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:#fff;
  box-shadow:0 2px 8px -4px rgba(16,42,72,.35)}
.ans-ic svg.i{width:19px;height:19px;stroke:var(--brand-deep)}
#situacije .ans b{color:var(--brand);font-weight:700}

.sit-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:2.6rem}
.sit-cta .btn{padding:1.05rem 1.7rem;border-radius:12px;gap:.7rem}
.sit-cta .btn svg.on-dark{stroke:#fff;width:20px;height:20px}
.sit-cta .btn .arr{width:18px;height:18px}
.sit-note{display:flex;gap:.75rem;align-items:center;color:var(--muted);font-size:.93rem;line-height:1.45}
.sit-note svg.i{width:26px;height:26px;stroke:rgba(47,130,206,.55);flex:0 0 auto}
.sit-note b{color:var(--text);font-weight:600}

/* ---- Loceni odseki na domaci strani ---- */
#storitve{background:linear-gradient(180deg,#EFF5FC,#E3EDF8);border-block:1px solid #D5E1EF}
#storitve .card{background:#fff}
#kako{position:relative}
#kako .step{background:#FBFCFE;border-color:#E3E9F1}
#kako .step::before{color:rgba(47,130,206,.28)}

/* pri paketih razsirimo okvir, da stiri kartice niso stisnjene
   (wrap-wide na sekciji poskrbi za sirino; prej je ta pravilo zaradi vecje
   specificnosti #paketi > .wrap rezalo mrezo nazaj na 1180 px) */
#paketi > .wrap:not(.wrap-wide){width:min(100% - 2.5rem,1180px)}
.plan-hour{background:#F5F9FD;border-color:rgba(47,130,206,.4)}
.plan-hour h3,.plan-hour .price b{color:var(--brand-deep)}

/* ---- Razlaga vključenih ur ---- */
#kaj-so-ure{background:#F8FAFC;border-block:1px solid #E8EDF3}
.hours{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(max-width:900px){.hours{grid-template-columns:1fr}}
.hours-text p{color:#3D4F66;max-width:62ch}
.hours-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem}
.hours-box h3{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep)}
.hours-list{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.55rem;font-size:.94rem;color:#3D4F66}
.hours-list li{display:flex;gap:.6rem;align-items:flex-start}
.hours-list li::before{content:"¹4";color:var(--accent);font-weight:800;flex:0 0 auto}
.hours-list.dim li::before{content:"92";color:var(--brand)}

/* ---- Poudarek: delo po urah brez paketa ---- */
.hero-hourly{margin:1.1rem 0 0;font-size:.98rem;color:rgba(255,255,255,.86);max-width:52ch}
.hero-hourly b{color:#fff;font-weight:650}
.no-plan{margin:2rem 0 0;font-size:.98rem;color:var(--muted);max-width:64ch}
.hourly{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(2rem,4vw,3rem)}
@media(max-width:820px){.hourly{grid-template-columns:1fr}}
.hourly h2{color:#fff}
.hourly p{color:rgba(255,255,255,.75);max-width:56ch}
.hourly .eyebrow{color:rgba(255,255,255,.7);border-left-color:var(--brand-2)}
.hourly-price{text-align:left}
.hourly-price b{display:block;font-size:3rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.hourly-price span{display:block;font-size:.88rem;color:rgba(255,255,255,.6);margin:.3rem 0 1.4rem}
.hourly-price .btn{background:var(--brand)}
.hourly-price .btn:hover{background:#256BAD}

/* ---- Primer iz prakse ---- */
#primer{background:#F8FAFC;border-block:1px solid #E8EDF3}
.case{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media(max-width:900px){.case{grid-template-columns:1fr;gap:2rem}}
.case-text p{color:#3D4F66;max-width:60ch}
.case-note{font-size:.9rem;color:var(--muted);border-left:3px solid var(--brand);padding-left:.9rem;margin-top:1.4rem}
.case-facts{display:grid;gap:1.2rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem}
.case-facts div b{display:block;font-size:1.15rem;font-weight:700;color:var(--brand-deep);letter-spacing:-.01em}
.case-facts div span{font-size:.9rem;color:var(--muted)}

/* ---- Odziv obrazca in past za robote ---- */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.form-msg{margin-top:1.6rem;padding:1rem 1.15rem;border-radius:10px;font-size:.95rem;line-height:1.5}
.form-msg.ok{background:rgba(63,122,106,.18);border:1px solid rgba(63,122,106,.45);color:#DFF3EC}
.form-msg.err{background:rgba(194,112,60,.18);border:1px solid rgba(194,112,60,.5);color:#F8E4D6}

/* ---- Pravne podstrani ---- */
.legal-wrap{max-width:760px}
.legal-wrap h2{font-size:1.25rem;margin:2.6rem 0 .8rem}
.legal-wrap h2:first-of-type{margin-top:0}
.legal-wrap p{color:#3D4F66;line-height:1.75}
.legal-wrap .table-wrap{margin:1.2rem 0}
.legal-wrap table{min-width:0;font-size:.9rem}
.legal-wrap a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.legal-list{padding-left:1.1rem;color:#3D4F66;line-height:1.75;display:grid;gap:.4rem}
.legal-date{font-size:.88rem;color:var(--muted);margin-bottom:2rem}
.legal code{background:var(--bg-soft);padding:.1rem .35rem;border-radius:5px;font-size:.9em}
.foot-legal{display:grid;gap:.4rem}

/* ---- Uvodi podstrani s fotografijo ---- */
.page-hero.photo{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(9rem,15vw,12rem) 0 clamp(4rem,8vw,6rem);border-bottom:0}
.page-hero.photo::before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.page-hero.photo::after{content:"";position:absolute;inset:0;z-index:-1}
.page-hero.photo > .wrap{position:relative;z-index:1}

/* Vse tri fotografske podstrani = enak temni uvod kot domaca stran
   (ista slika hero-dark.webp in isti temni preliv, brez belega prelivanja). */
.page-hero.photo-light::before,
.page-hero.photo-warm::before,
.page-hero.photo-dark::before{background-image:url("assets/hero-dark.webp")}
.page-hero.photo-light::after,
.page-hero.photo-warm::after,
.page-hero.photo-dark::after{background:linear-gradient(95deg,rgba(9,17,28,.90) 0%,rgba(9,17,28,.80) 32%,rgba(9,17,28,.50) 55%,rgba(9,17,28,.20) 78%,rgba(9,17,28,.08) 100%)}
.page-hero.photo h1{color:#fff}
.page-hero.photo .lead{color:rgba(255,255,255,.82)}
.page-hero.photo .eyebrow{color:rgba(255,255,255,.72);border-left-color:var(--brand-2)}
.page-hero.photo .grad{color:var(--brand-2)}
@media(max-width:900px){
  .page-hero.photo::after{background:rgba(9,17,28,.9)}
}

/* ---- Temen uvod podstrani ---- */
.page-hero.dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.page-hero.dark h1{color:#fff}
.page-hero.dark .lead{color:rgba(255,255,255,.78)}
.page-hero.dark .eyebrow{color:rgba(255,255,255,.7);border-left-color:var(--brand-2)}
.page-hero.dark::after{content:"";position:absolute;right:-6%;top:-40%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,130,206,.28),transparent 65%);pointer-events:none}

/* navy pas s trditvijo med sklopi — po vzoru švicarskih IT strani */
.claim{background:#1B2B4B;color:#fff;padding:clamp(3.5rem,7vw,5.5rem) 0}
.claim .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(max-width:820px){.claim .wrap{grid-template-columns:1fr}}
.claim h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.claim p{color:rgba(255,255,255,.72);margin:.8rem 0 0;max-width:52ch}
.claim-facts{display:grid;gap:1.1rem}
.claim-facts div b{display:block;font-size:1.6rem;font-weight:750;color:var(--brand-2);letter-spacing:-.02em}
.claim-facts div span{font-size:.9rem;color:rgba(255,255,255,.6)}

/* hladen sivkast odsek s storitvami (slate-50), tanke ločnice */
#podrobno{border-block:0}
.page-hero{border-bottom:1px solid #EEF1F5}

/* Pravne podstrani (brez fotografije) = enak temni uvod kot domaca stran */
.page-hero:not(.photo){position:relative;isolation:isolate;overflow:hidden;border-bottom:0}
.page-hero:not(.photo)::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("assets/hero-dark.webp") center center/cover no-repeat}
.page-hero:not(.photo)::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(9,17,28,.92) 0%,rgba(9,17,28,.82) 34%,rgba(9,17,28,.55) 60%,rgba(9,17,28,.28) 82%,rgba(9,17,28,.12) 100%)}
.page-hero:not(.photo) > .wrap{position:relative;z-index:1}
.page-hero:not(.photo) h1{color:#fff}
.page-hero:not(.photo) .lead{color:rgba(255,255,255,.82)}
.page-hero:not(.photo) .eyebrow{color:rgba(255,255,255,.72);border-left-color:var(--brand-2)}
.page-hero:not(.photo) .grad{color:var(--brand-2)}
@media(max-width:900px){.page-hero:not(.photo)::after{background:rgba(9,17,28,.9)}}
.claim-facts div b{color:#8FC4EE}

/* ---- Tekoči trak s tehnologijami ---- */
.marquee{background:var(--ink);color:#fff;padding:2.6rem 0;overflow:hidden}
.marquee-head{color:rgba(255,255,255,.55);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 1.5rem}
.marquee-mask{position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:.9rem;animation:marq 38s linear infinite}
.marquee-track span{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  padding:.68rem 1.15rem;border:1px solid rgba(255,255,255,.18);border-radius:99px;
  font-size:.94rem;font-weight:600;color:rgba(255,255,255,.9);background:rgba(255,255,255,.04)}
.marquee-track span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-2);flex:0 0 auto}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto}
  .marquee-mask{-webkit-mask:none;mask:none}
}

/* ---- Črtne ikone namesto emojijev ---- */
.ic svg{width:23px;height:23px;display:block}
.card .ic svg,.svc-head .ic svg{width:24px;height:24px}
svg.i{fill:none;stroke:var(--brand-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ticket .ic svg.i{stroke:var(--brand);width:19px;height:19px}
.strip-inner svg.i{width:18px;height:18px;stroke:var(--brand);flex:0 0 auto}
.strip-inner span{display:inline-flex;align-items:center;gap:.55rem}
.panel-note svg.i{width:18px;height:18px;stroke:#8A4B18;flex:0 0 auto}

/* ---- Nalagalni zaslon: možgani iz logotipa ---- */
.boot{position:fixed;inset:0;z-index:999;background:#0C1522;display:grid;place-content:center;justify-items:center;
  gap:.15rem;transition:opacity .4s ease,visibility .4s}
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot-core{position:relative;width:min(230px,56vw);aspect-ratio:1;display:grid;place-items:center;margin-bottom:1.5rem}
.boot-mark{display:none}
/* obris logotipa: enakomerna barva skozi masko, brez rastrske slike */
.boot-base{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask:url("assets/mark.webp") center/82% auto no-repeat;
          mask:url("assets/mark.webp") center/82% auto no-repeat;
  background:rgba(95,179,228,.16)}
/* signal, ki teče po črticah logotipa — logotip sam je maska */
.boot-scan{position:absolute;inset:0;z-index:3;pointer-events:none;
  -webkit-mask:url("assets/mark.webp") center/82% auto no-repeat;
          mask:url("assets/mark.webp") center/82% auto no-repeat;
  background-image:linear-gradient(105deg,
    transparent 38%,rgba(255,255,255,.98) 47%,rgba(95,179,228,.95) 53%,rgba(47,130,206,.35) 58%,transparent 66%);
  background-size:230% 100%;background-repeat:no-repeat;
  animation:bootScan 2.1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes bootScan{0%{background-position:-70% 0}100%{background-position:170% 0}}
/* drugi, počasnejši utrip v nasprotno smer */
.boot-scan.s2{background-image:linear-gradient(255deg,
    transparent 42%,rgba(95,179,228,.7) 50%,rgba(95,179,228,.15) 56%,transparent 64%);
  animation-duration:3.4s;animation-delay:.7s}
.boot-word{margin:0;font-size:1.5rem;font-weight:750;letter-spacing:-.02em;color:#fff}
.boot-word i{font-style:normal;color:var(--brand-2)}
.boot-sub{margin:.45rem 0 1.5rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.boot-bar{display:block;width:170px;height:2px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.boot-bar i{display:block;height:100%;width:40%;border-radius:99px;background:var(--brand-2);
  animation:bootLoad 1.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes bootLoad{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
@media(prefers-reduced-motion:reduce){
  .boot-core .ring,.boot-sweep i,.boot-mark,.boot-bar i{animation:none}
  .boot-bar i{width:100%}
}

/* ---- Uvod s fotografijo v ozadju ---- */
.hero{position:relative;isolation:isolate;padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("assets/hero-dark.webp") center center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(9,17,28,.90) 0%,rgba(9,17,28,.80) 32%,rgba(9,17,28,.50) 55%,rgba(9,17,28,.20) 78%,rgba(9,17,28,.08) 100%)}
.hero > .wrap{position:relative;z-index:1}
.hero .panel{box-shadow:0 34px 70px -30px rgba(0,0,0,.6)}

/* svetlo besedilo na temni fotografiji */
.hero h1,.hero .fact b{color:#fff}
.hero .grad{color:var(--brand-2)}
.hero p.lead{color:rgba(255,255,255,.82)}
.hero .eyebrow{color:rgba(255,255,255,.72);border-left-color:var(--brand-2)}
.hero .fact span{color:rgba(255,255,255,.68)}
.hero-facts{border-top-color:rgba(255,255,255,.22)}
.hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero .btn-primary{background:var(--brand)}
.hero .btn-primary:hover{background:var(--brand-deep)}

@media(max-width:980px){
  .hero::after{background:linear-gradient(180deg,rgba(9,17,28,.90) 0%,rgba(9,17,28,.85) 55%,rgba(9,17,28,.80) 100%)}
}

/* ---- Odsek s paketi: svetlo moder pas in poravnane kartice ---- */
#paketi-teaser{background:var(--sky);border-block:1px solid var(--sky-line)}
#paketi-teaser .grid{margin-top:2.2rem;align-items:stretch;gap:1.4rem}
/* značka visi čez zgornji rob, zato kartica ne sme rezati vsebine */
#paketi-teaser .card.teaser{overflow:visible}
.card.teaser{height:100%;padding:2.1rem 1.7rem;background:#fff}
.teaser-list{list-style:none;margin:1.2rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--border);
  display:grid;gap:.55rem;font-size:.9rem;color:#3D4F66}
.teaser-list li{display:flex;gap:.55rem;align-items:flex-start;line-height:1.45}
.teaser-list li::before{content:"✓";color:var(--accent);font-weight:800;flex:0 0 auto}
.card.teaser h3{margin-bottom:.2rem}
/* enako visoka vrstica s ceno -> opisi se začnejo v isti višini */
.card.teaser .teaser-price{min-height:3rem;display:flex;align-items:baseline;gap:.35rem;margin:.5rem 0 .1rem;
  font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.card.teaser .teaser-price.custom{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.card.teaser p{margin-top:.6rem}
.teaser-dev{margin:.1rem 0 0!important;font-size:.82rem;font-weight:600;color:var(--brand-deep)}
.card.teaser.featured{border-color:var(--brand-deep);border-width:2px;box-shadow:none;transform:none}
.card.teaser .badge{top:-.75rem}
#paketi-teaser .card.teaser::after{display:none}
@media(max-width:620px){.card.teaser .teaser-price{min-height:0}}

/* Naravnejši ritem: več zraka in tanke ločnice med sekcijami */
section{padding:clamp(4.5rem,8vw,7rem) 0}
.section-head{margin-bottom:3rem}
h1{font-weight:700}
h2{font-weight:700;letter-spacing:-.02em}
body{background:var(--bg)}

/* ---- Temna noga v barvi uvoda ---- */
footer{background:#0C1522;border-top:0;color:rgba(255,255,255,.66);padding-top:3.6rem}
footer h3{color:#fff!important}
footer .logo .word b{color:#fff}
footer .logo .word b i{color:var(--brand-2)}
footer .logo .word small{color:rgba(255,255,255,.5)}
footer a{color:rgba(255,255,255,.66);transition:color .2s}
footer a:hover,footer .foot-grid a:hover{color:#fff}
footer p{color:rgba(255,255,255,.6)}
footer > .wrap[style]{border-top-color:rgba(255,255,255,.14)!important}

/* ---------- Obvestilo o piškotkih ---------- */
.cb{position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,120%);z-index:120;
  width:min(100% - 1.6rem,720px);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.95rem 1.15rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(21,34,50,.18);opacity:0;visibility:hidden;
  transition:transform .35s ease,opacity .35s ease,visibility .35s}
.cb.open{transform:translate(-50%,0);opacity:1;visibility:visible}
.cb p{margin:0;flex:1 1 20rem;font-size:.88rem;line-height:1.5;color:var(--muted)}
.cb a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.cb-btns{display:flex;gap:.55rem;flex-wrap:wrap}
.cb .btn{padding:.6rem 1.1rem;font-size:.86rem;min-height:44px}
@media (max-width:560px){
  .cb{bottom:.7rem;padding:1rem}
  .cb-btns{width:100%}
  .cb .btn{flex:1 1 0;justify-content:center;min-height:44px;padding:.7rem 1rem}
}
@media (prefers-reduced-motion:reduce){
  .cb{transition:opacity .2s ease,visibility .2s}
}

/* ---------- Izračun: dvostolpčna postavitev ---------- */
.calc-sec{position:relative;overflow:hidden;padding:clamp(3rem,6vw,5rem) 0;
  background:linear-gradient(180deg,transparent,var(--sky) 10%,#E4EEF9 90%,transparent)}
.calc-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(47,130,206,.13) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(47,130,206,.13) 1px,transparent 1px);
  background-size:32px 32px;background-position:center;
  -webkit-mask-image:radial-gradient(115% 80% at 50% 48%,#000 30%,rgba(0,0,0,.35) 62%,transparent 85%);
  mask-image:radial-gradient(115% 80% at 50% 48%,#000 30%,rgba(0,0,0,.35) 62%,transparent 85%)}
.calc-sec > .wrap{position:relative;z-index:1}
@supports not ((mask-image:radial-gradient(#000,transparent)) or (-webkit-mask-image:radial-gradient(#000,transparent))){
  .calc-sec::before{opacity:.45}
}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.calc-left{max-width:36rem}
.chip-eyebrow{display:inline-flex;align-items:center;gap:.7rem;padding:.45rem .95rem .45rem .5rem;
  background:#fff;border:1px solid var(--border);border-radius:999px;box-shadow:0 1px 2px rgba(16,42,72,.05);
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chip-ic{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;
  background:var(--sky);border:1px solid var(--sky-line);color:var(--brand-deep)}
.chip-ic .i{width:15px;height:15px}
.calc-h2{margin-top:1.1rem;font-size:clamp(1.75rem,2.8vw,2.5rem)}
.uline{position:relative;color:var(--brand);white-space:nowrap}
.uline::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.09em;border-radius:99px;
  background:var(--brand);opacity:.55}
.calc-lead{margin-top:.8rem;color:var(--muted);max-width:36ch}
.calc-box{margin-top:1.5rem;padding:clamp(1.2rem,2.2vw,1.6rem)}
.ticks{display:flex;justify-content:space-between;margin-top:.55rem;font-size:.76rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.toggle{gap:.85rem}
.t-ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
  background:var(--sky);border:1px solid var(--sky-line);color:var(--brand-deep)}
.t-ic .i{width:18px;height:18px}
.t-txt{flex:1 1 auto;font-size:.95rem;font-weight:600}
.calc-note{display:flex;align-items:flex-start;gap:.55rem;margin-top:1rem;font-size:.8rem;line-height:1.5}
.note-ic{flex:0 0 16px;color:var(--muted);margin-top:.12rem}
.note-ic .i{width:16px;height:16px}

/* rezultat */
.result{background:linear-gradient(180deg,#F4F8FD,#EDF3FA);border-color:var(--sky-line);
  padding:clamp(1.4rem,2.8vw,1.9rem)}
.res-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.result .lab{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--sky-line);
  border-radius:999px;padding:.32rem .8rem;color:var(--brand-deep)}
.result .lab .i{width:14px;height:14px;fill:var(--brand);stroke:none}
.res-badge{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;background:#fff;
  border:1px solid var(--sky-line);color:var(--brand);box-shadow:0 4px 14px rgba(47,130,206,.18)}
.res-badge .i{width:22px;height:22px}
.result .plan-name{margin-top:.9rem}
.reasons{margin:.9rem 0}
.reasons li::before{content:"";flex:0 0 17px;height:17px;margin-top:.15rem;border-radius:50%;
  background:var(--brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/11px no-repeat}
.saving{align-items:center;gap:.75rem}
.save-ic{width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;background:#fff;
  border:1px solid var(--sky-line);color:var(--brand)}
.save-ic .i{width:20px;height:20px}
.saving b{font-size:clamp(1.7rem,3vw,2.1rem);color:var(--brand-deep)}
.calc-cta{margin-top:1.1rem;width:100%;justify-content:center}

@media (max-width:920px){
  .calc-grid{grid-template-columns:1fr;gap:2rem}
  .calc-left{max-width:none}
}

/* naslov strani, ki mora ostati v eni vrstici */
h1.h1-fit,.page-hero h1.h1-fit{font-size:clamp(1.85rem,2.6vw,2.5rem);text-wrap:balance}

/* ---------- Glavca: pomočnik na strani ---------- */
.gl{position:fixed;right:1.15rem;bottom:1.15rem;z-index:130;display:flex;flex-direction:column;align-items:flex-end;gap:.65rem}

.gl-gumb{position:relative;display:inline-flex;align-items:center;gap:.6rem;height:64px;padding:0 1.15rem 0 .7rem;
  border-radius:999px;border:0;background:var(--brand-deep);color:#fff;cursor:pointer;
  box-shadow:0 12px 30px rgba(27,76,126,.38);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.gl-gumb:hover{transform:translateY(-2px);background:#143C66;box-shadow:0 16px 38px rgba(27,76,126,.46)}
.gl-gumb img{width:44px;height:44px;flex:0 0 44px;object-fit:contain;background:#fff;border-radius:50%;padding:5px}
.gl-oznaka{font-weight:650;font-size:.95rem;letter-spacing:-.01em}
.gl-pika{position:absolute;top:6px;right:8px;width:12px;height:12px;border-radius:50%;background:#5FD08A;
  border:2px solid #fff;animation:glUtrip 2.2s ease-in-out infinite}
@keyframes glUtrip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.82)}}
.gl-open .gl-oznaka{display:none}
.gl-open .gl-gumb{padding:0 .7rem}

.gl-vabilo{display:flex;align-items:center;gap:.5rem;max-width:250px;padding:.7rem .8rem;background:#fff;
  border:1px solid var(--border);border-radius:14px 14px 4px 14px;box-shadow:0 10px 26px rgba(21,34,50,.18);
  font-size:.86rem;line-height:1.4;animation:glVstop .35s ease both}
.gl-vabilo[hidden]{display:none}
.gl-vabilo span{cursor:pointer}
.gl-vabilo button{border:0;background:none;color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;padding:0 .1rem}
@keyframes glVstop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.gl-okno{order:-1;width:min(92vw,376px);max-height:min(74vh,580px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:0 22px 58px rgba(21,34,50,.26)}
.gl-okno[hidden]{display:none}
.gl-glava{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;background:var(--ink);color:#fff}
.gl-glava img{width:32px;height:32px;object-fit:contain;background:#fff;border-radius:9px;padding:3px}
.gl-glava div{display:flex;flex-direction:column;line-height:1.25;flex:1}
.gl-glava b{font-size:.98rem;font-weight:650}
.gl-glava span{display:flex;align-items:center;gap:.35rem;font-size:.75rem;opacity:.75}
.gl-zivo{width:7px;height:7px;border-radius:50%;background:#5FD08A;display:inline-block}
.gl-zapri{width:28px;height:28px;border:0;border-radius:7px;background:rgba(255,255,255,.12);color:#fff;font-size:1.15rem;line-height:1;cursor:pointer}
.gl-zapri:hover{background:rgba(255,255,255,.22)}

.gl-seznam{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--bg-soft)}
.gl-msg{display:flex;animation:glVstop .25s ease both}
.gl-bot{justify-content:flex-start}
.gl-jaz{justify-content:flex-end}
.gl-bubble{max-width:86%;padding:.7rem .85rem;border-radius:13px;font-size:.88rem;line-height:1.55;min-height:1.2rem}
.gl-bot .gl-bubble{background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px}
.gl-jaz .gl-bubble{background:var(--brand-deep);color:#fff;border-bottom-right-radius:4px}
.gl-bubble a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px}
.gl-jaz .gl-bubble a{color:#fff}
.gl-link{display:block;margin-top:.55rem;font-weight:650;font-size:.84rem;text-decoration:none!important}
.gl-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.gl-chips button{border:1px solid var(--sky-line);background:#fff;color:var(--brand-deep);border-radius:999px;
  padding:.42rem .75rem;font:inherit;font-size:.8rem;cursor:pointer}
.gl-chips button:hover{background:var(--sky)}
.gl-dots{display:inline-flex;gap:4px;padding:.15rem 0}
.gl-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:glSkok 1s infinite}
.gl-dots i:nth-child(2){animation-delay:.15s}
.gl-dots i:nth-child(3){animation-delay:.3s}
@keyframes glSkok{0%,60%,100%{opacity:.25}30%{opacity:.9}}

.gl-vnos{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--border);background:#fff}
.gl-vnos input{flex:1;min-width:0;padding:.62rem .8rem;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:.88rem}
.gl-vnos input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.gl-vnos button{width:42px;flex:0 0 42px;border:0;border-radius:9px;background:var(--brand-deep);color:#fff;display:grid;place-items:center;cursor:pointer}
.gl-vnos button:hover{background:#143C66}
.gl-noga{margin:0;padding:.5rem .8rem .7rem;background:#fff;font-size:.7rem;color:var(--muted);line-height:1.4}

@media (max-width:560px){
  .gl{right:.75rem;bottom:.75rem;left:.75rem;align-items:flex-end}
  .gl-okno{width:100%;max-height:78vh}
  .gl-vabilo{max-width:none}
  .gl-gumb{height:58px}
  .gl-gumb img{width:40px;height:40px;flex:0 0 40px}
}
@media (prefers-reduced-motion:reduce){
  .gl-pika,.gl-dots i,.gl-msg,.gl-vabilo{animation:none}
  .gl-gumb{transition:none}
}

/* naslov samo za bralnike zaslona in iskalnike */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Ozadja sekcij ---------- */
.sec-tint,.sec-dots,.sec-grid{position:relative;overflow:hidden}
.sec-tint,.sec-dots,.sec-grid{background:linear-gradient(180deg,transparent,var(--sky) 10%,#E7F0F9 90%,transparent)}
.sec-tint > .wrap,.sec-dots > .wrap,.sec-grid > .wrap{position:relative;z-index:1}

/* pikcasta mreza v kotih */
.sec-dots::before,.sec-dots::after{content:"";position:absolute;width:190px;height:170px;pointer-events:none;
  background-image:radial-gradient(rgba(47,130,206,.30) 1.6px,transparent 1.6px);background-size:14px 14px;opacity:.6}
.sec-dots::before{top:8%;right:2.5%}
.sec-dots::after{bottom:8%;left:2%}

/* tehnicna mreza cez celo sekcijo */
.sec-grid::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(47,130,206,.13) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(47,130,206,.13) 1px,transparent 1px);
  background-size:32px 32px;background-position:center;
  -webkit-mask-image:radial-gradient(115% 80% at 50% 48%,#000 30%,rgba(0,0,0,.35) 62%,transparent 85%);
  mask-image:radial-gradient(115% 80% at 50% 48%,#000 30%,rgba(0,0,0,.35) 62%,transparent 85%)}
@supports not ((mask-image:radial-gradient(#000,transparent)) or (-webkit-mask-image:radial-gradient(#000,transparent))){
  .sec-grid::before{opacity:.45}
}
@media (max-width:760px){
  .sec-dots::before,.sec-dots::after{width:120px;height:110px;opacity:.4}
}

/* ---------- Sekcija s fotografijo v ozadju ---------- */
.sec-photo{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.sec-photo::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("assets/hero-dark.webp");background-size:cover;background-position:center 35%}
.sec-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(16,26,40,.95) 0%,rgba(16,26,40,.88) 46%,rgba(16,26,40,.62) 100%)}
.sec-photo > .wrap{position:relative;z-index:1}

/* na tej podlagi je kartica prosojna, ne polna */
.sec-photo .cta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px)}
.sec-photo .eyebrow{color:rgba(255,255,255,.75);border-left-color:var(--brand-2)}
.sec-photo h2{color:#fff}
.sec-photo p{color:rgba(255,255,255,.78)}

/* pas na Storitvah dobi isto fotografijo */
.claim{position:relative;overflow:hidden;isolation:isolate}
.claim::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("assets/hero-dark.webp");background-size:cover;background-position:center 60%}
.claim::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(27,43,75,.95) 0%,rgba(27,43,75,.88) 52%,rgba(27,43,75,.66) 100%)}
.claim > .wrap{position:relative;z-index:1}

@media (max-width:760px){
  .sec-photo::after{background:linear-gradient(180deg,rgba(16,26,40,.94),rgba(16,26,40,.90))}
  .claim::after{background:linear-gradient(180deg,rgba(27,43,75,.94),rgba(27,43,75,.90))}
}

/* ---------- Znak in vezja v ozadju ---------- */
/* velik znak, ki gleda cez rob sekcije */
.sec-mark{position:relative;overflow:hidden}
.sec-mark::before{content:"";position:absolute;top:50%;right:-9%;width:min(46vw,620px);aspect-ratio:1;
  transform:translateY(-50%);pointer-events:none;opacity:.07;
  background-image:url("assets/mark.webp");background-size:contain;background-repeat:no-repeat;background-position:center}
.sec-mark > .wrap{position:relative;z-index:1}
.sec-mark-left::before{right:auto;left:-9%}
@media (max-width:900px){
  .sec-mark::before{right:-22%;width:70vw;opacity:.04}
  .sec-mark-left::before{right:auto;left:-22%}
}

/* vzorec vezij iz logotipa */
.sec-circuit{position:relative;overflow:hidden;
  background:linear-gradient(180deg,transparent,var(--sky) 10%,#E7F0F9 90%,transparent)}
.sec-circuit::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22160%22%20height=%22160%22%20viewBox=%220%200%20160%20160%22%3E%3Cg%20fill=%22none%22%20stroke=%22%232F82CE%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M0%2034h38l14-14h44%22/%3E%3Cpath%20d=%22M96%2020v26h30l14%2014h20%22/%3E%3Cpath%20d=%22M0%2096h26l16%2016v28%22/%3E%3Cpath%20d=%22M42%20112h46l14-14h58%22/%3E%3Cpath%20d=%22M118%2098v44%22/%3E%3Cpath%20d=%22M64%20140v-28l-14-14%22/%3E%3C/g%3E%3Cg%20fill=%22%232F82CE%22%3E%3Ccircle%20cx=%2238%22%20cy=%2234%22%20r=%223%22/%3E%3Ccircle%20cx=%2296%22%20cy=%2220%22%20r=%223%22/%3E%3Ccircle%20cx=%22126%22%20cy=%2246%22%20r=%223%22/%3E%3Ccircle%20cx=%2226%22%20cy=%2296%22%20r=%223%22/%3E%3Ccircle%20cx=%2242%22%20cy=%22112%22%20r=%223%22/%3E%3Ccircle%20cx=%22102%22%20cy=%2298%22%20r=%223%22/%3E%3Ccircle%20cx=%22118%22%20cy=%22142%22%20r=%223%22/%3E%3Ccircle%20cx=%2264%22%20cy=%22140%22%20r=%223%22/%3E%3C/g%3E%3C/svg%3E");background-size:160px 160px}
.sec-circuit > .wrap{position:relative;z-index:1}
@media (max-width:760px){
  .sec-circuit::before{background-size:120px 120px;opacity:.16}
}

/* dokler je odprta pasica o piškotkih, se pomočnik umakne nad njo */
@media (max-width:1100px){
  .cb-open .gl{bottom:7.6rem}
}
@media (max-width:560px){
  .cb-open .gl{bottom:11rem}
  .cb-open .gl-vabilo{display:none}
}

/* vrstica v izračunu, ki pelje na obrazec */
.toggle-link{text-decoration:none;color:inherit}
.toggle-link:hover{border-color:var(--brand);background:rgba(47,130,206,.06)}
.toggle-link .t-go{margin-left:auto;font-weight:700;color:var(--brand-deep);transition:transform .18s ease}
.toggle-link:hover .t-go{transform:translateX(3px)}
.toggle-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Terminal, ki sam tipka ---------- */
.term-sec{padding:clamp(3.5rem,7vw,5.5rem) 0}
.term-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.term-text h2{color:#fff;font-size:clamp(1.7rem,2.8vw,2.4rem)}
.term-text p{color:rgba(255,255,255,.76);max-width:44ch}
.term-text .eyebrow{color:rgba(255,255,255,.7);border-left-color:var(--brand-2)}
.term-tocke{list-style:none;padding:0;margin:1.4rem 0 1.8rem;display:grid;gap:.6rem;font-size:.94rem}
.term-tocke li{display:flex;gap:.6rem;align-items:flex-start;color:rgba(255,255,255,.86)}
.term-tocke li::before{content:"";flex:0 0 7px;height:7px;margin-top:.5rem;border-radius:50%;background:var(--brand-2)}

.term{background:#0B1420;border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.42)}
.term-bar{display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.1)}
.term-pika{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.22)}
.term-pika:first-child{background:#E06C5B}.term-pika:nth-child(2){background:#E0B85B}.term-pika:nth-child(3){background:#5FD08A}
.term-ime{margin-left:.6rem;font-size:.78rem;color:rgba(255,255,255,.5)}
.term-body{margin:0;padding:1.1rem 1.2rem;min-height:340px;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,"Cascadia Mono","Consolas","SF Mono",Menlo,monospace;
  font-size:.86rem;line-height:1.75;color:#C9D6E4}
.term-body .u{color:#5FB3E4;font-weight:400}
.term-body:not(.tipka) > b.u::before{content:"$ ";color:#5FD08A;font-weight:700}
.term-body .znak{color:#5FD08A;font-weight:700}
.term-body .ok{color:#8FE0AE}
.term-body .opoz{color:#F0C267}
.term-body .siv{color:rgba(201,214,228,.55)}
.term-kazalec{display:inline-block;width:8px;height:1.05em;vertical-align:-2px;background:#5FD08A;
  animation:utripKazalca 1.05s steps(1) infinite}
@keyframes utripKazalca{0%,50%{opacity:1}51%,100%{opacity:0}}
.term-note{margin:0;padding:.55rem 1.2rem .8rem;font-size:.72rem;color:rgba(255,255,255,.38);
  border-top:1px solid rgba(255,255,255,.08)}

@media (max-width:960px){
  .term-grid{grid-template-columns:1fr}
  .term-body{min-height:300px;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .term-kazalec{animation:none}
}

/* ---------- Sestanek na lokaciji ---------- */
.sestanek{display:flex;gap:1rem;align-items:flex-start;margin-top:1.6rem;padding:1.15rem 1.3rem;
  background:var(--sky);border:1px solid var(--sky-line);border-radius:var(--radius)}
.sestanek-ic{flex:0 0 40px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--sky-line);color:var(--brand-deep)}
.sestanek-ic .i{width:20px;height:20px}
.sestanek h3{font-size:1.02rem;margin:0 0 .35rem}
.sestanek p{margin:0;font-size:.92rem;color:#3D4F66;max-width:78ch}
@media (max-width:560px){
  .sestanek{flex-direction:column;gap:.7rem}
}

/* ---------- Strnjen rezultat ob drsniku (telefon in tablica) ---------- */
.calc-mini{display:none}
@media (max-width:960px){
  .calc-mini{display:grid;gap:.15rem;margin:0 0 1.2rem;padding:.9rem 1rem;
    background:linear-gradient(180deg,#F4F8FD,#EDF3FA);border:1px solid var(--sky-line);border-radius:12px}
  .calc-mini-vrh{display:flex;align-items:center;gap:.55rem}
  .calc-mini-lab{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .calc-mini-plan{font-size:.95rem;font-weight:800;color:var(--brand-deep);letter-spacing:-.01em}
  .calc-mini-cena{font-size:1.6rem;font-weight:800;color:var(--brand-deep);letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;line-height:1.15}
  .calc-mini-pri{font-size:.82rem;color:var(--accent);font-weight:600}
  /* na telefonu kartica z rezultatom pod njo ni več nujna takoj — ostane za podrobnosti */
  .calc-left{order:1}
  .calc-right{order:2}
}

/* ---------- Telefon in tablica: drsnik in rezultat kot ena kartica ---------- */
@media (max-width:960px){
  .calc-grid{row-gap:0}
  .calc-box{border-radius:12px 12px 0 0;border-bottom:0;margin-bottom:0}
  .result{border-radius:0 0 12px 12px;border-top:1px dashed var(--sky-line);margin-top:0}
  /* ime paketa in cena sta ze v strnjenem izpisu ob drsniku */
  .result .res-top,.result .plan-name,.result .plan-price{display:none}
  .result .reasons{margin-top:0}
  .result .bars{margin-top:.4rem}

  /* vrstni red na telefonu: drsnik, stikala, cena, nato primerjava */
  .calc-box{display:flex;flex-direction:column}
  .ctrl{order:1}
  .toggles{order:2}
  .calc-mini{order:3;margin:1.1rem 0 0}
  .calc-note{order:4;margin-top:.9rem}
  .toggle{padding:.6rem .8rem;gap:.7rem}
  .t-ic{width:30px;height:30px;flex:0 0 30px}
}

/* alineji, ki povesta mejo paketa */
.plan li.minus{color:var(--muted)}
.plan li.minus::before{content:"—";color:var(--muted);font-weight:700}
.plan li.obseg{color:var(--muted);font-size:.88rem}
.plan li.obseg::before{content:"›";color:var(--brand)}

/* zgornji odmik sekcije s paketi (prej inline v paketi.html) */
#paketi{padding-top:clamp(3.5rem,7vw,5rem)}

/* kartice paketov: nizje, da je gumb viden brez drsenja */
@media (min-width:941px){
  .plan{padding:1.5rem 1.35rem}
  .price{margin:.7rem 0 .15rem}
  .price b{font-size:2.15rem}
  .plan .who{font-size:.86rem;line-height:1.5}
  .plan ul{margin:1rem 0;gap:.42rem;font-size:.87rem}
  .plan li{line-height:1.45;padding-left:1.2rem}
  .plan .btn{padding:.75rem 1.2rem;font-size:.92rem}
}

/* nizki prenosniki (npr. 1366x768): se bolj strnjene kartice,
   da je gumb "Izberi Business" viden brez drsenja */
@media (min-width:941px) and (max-height:860px){
  #paketi{padding-top:clamp(1.8rem,3.4vw,2.8rem)}
  .plan{padding:1.05rem 1.15rem}
  .price{margin:.5rem 0 .1rem}
  .price b{font-size:1.95rem}
  .plan-users{margin:.1rem 0 .35rem;font-size:.8rem}
  .plan .who{font-size:.84rem;line-height:1.45;margin-bottom:.55rem}
  .plan ul{margin:.6rem 0;gap:.28rem;font-size:.845rem}
  .plan li{line-height:1.4;padding-left:1.15rem}
  .plan .btn{padding:.65rem 1.1rem;font-size:.9rem}
}

/* zelo nizka okna (npr. 1280x660): se zadnji korak strnjenosti */
@media (min-width:941px) and (max-height:700px){
  #paketi{padding-top:1.2rem}
  .plan ul{margin:.5rem 0;gap:.22rem}
  .plan li{line-height:1.35}
}

/* ---- Kartice paketov: sredinska poravnava glave ---- */
.plan h3,.plan .who,.plan-users{text-align:center}
.plan .price{justify-content:center}
.plan .who{margin-left:auto;margin-right:auto}
.plan ul{border-top:1px solid var(--border);padding-top:.7rem}
@media(min-width:941px){.pricing{align-items:start}}

/* preklop videza: svetlo / temno */
.theme-sw{display:inline-flex;align-items:center;gap:.15rem;padding:.25rem;height:40px;box-sizing:border-box;border:1px solid var(--border);
  border-radius:999px;background:var(--bg-soft)}
.theme-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.theme-btn:hover{color:var(--text)}
.theme-btn svg.i{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn[aria-pressed="true"]{background:#fff;color:var(--brand-deep);box-shadow:0 1px 3px rgba(16,42,72,.2)}
@media(max-width:600px){
  .theme-btn{width:30px;height:30px}
  .theme-btn svg.i{width:15px;height:15px}
}

/* telefonska stevilka v glavi (klik za klic) */
.nav-phone{display:inline-flex;align-items:center;gap:.4rem;height:40px;font-weight:650;font-size:.94rem;
  color:var(--brand-deep);white-space:nowrap;padding:0 .4rem;border-radius:8px;transition:color .2s}
.nav-phone svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.nav-phone:hover{color:var(--brand)}
@media(max-width:1080px){.nav-phone span{display:none}}
@media(max-width:940px){.nav-phone{display:none}}

/* jezikovni spustni meni (Google Translate — prevod le v brskalniku, brez vpliva na SEO) */
.lang-dd{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:.32rem;height:40px;padding:0 .6rem;border:1px solid var(--border);
  border-radius:999px;background:var(--bg-soft);color:var(--muted);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:color .2s,border-color .2s}
.lang-btn:hover{color:var(--text)}
.lang-btn svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.lang-list[hidden]{display:none}
.lang-list{position:absolute;right:0;top:calc(100% + .45rem);min-width:180px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 44px -20px rgba(16,42,72,.45);padding:.35rem;z-index:80;display:grid;gap:.08rem}
.lang-list button{display:flex;align-items:center;width:100%;text-align:left;padding:.52rem .7rem;border:0;border-radius:8px;background:none;
  color:var(--text);font:inherit;font-size:.9rem;cursor:pointer}
.lang-list button:hover{background:var(--bg-soft)}
.lang-list button[aria-current="true"]{color:var(--brand-deep);font-weight:700}
.lang-list .fi{width:1.2em;height:.9em;border-radius:2px;margin-right:.6rem;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.mm-lang button{display:inline-flex;align-items:center;gap:.4rem}
.mm-lang .fi{width:1.15em;height:.86em;border-radius:2px}
@media(max-width:940px){.lang-dd{display:none}}
.mm-lang{display:none;flex-wrap:wrap;gap:.4rem;padding:.6rem .2rem .2rem}
.mobile-menu.open .mm-lang{display:flex}
.mm-lang button{border:1px solid var(--border);background:var(--bg-soft);color:var(--muted);border-radius:8px;
  padding:.4rem .6rem;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;min-width:42px}
.mm-lang button[aria-current="true"]{color:var(--brand-deep);border-color:var(--brand-deep)}
/* skrij Googlovo pasico in odmik telesa */
.goog-te-banner-frame,.skiptranslate{display:none!important}
body{top:0!important}
#google_translate_element{display:none}
.goog-te-gadget{font-size:0!important}

/* ================= MOBILNA OPTIMIZACIJA ================= */
@media(max-width:940px){
  /* meni: cist poln panel pod glavo, ki prekrije vsebino */
  .mobile-menu{
    display:flex!important;flex-direction:column;gap:.05rem;
    position:absolute;top:100%;left:0;right:0;z-index:70;
    background:var(--bg);border-bottom:1px solid var(--border);
    box-shadow:0 26px 44px -26px rgba(0,0,0,.45);
    padding:1rem 1.25rem 1.5rem;margin:0;
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .mobile-menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .mobile-menu a{padding:.95rem .1rem;border-bottom:1px solid var(--border);color:var(--text);font-size:1.06rem;font-weight:600}
  .mobile-menu > a[href^="tel"]{color:var(--brand-deep);font-weight:700}
  .mobile-menu a[data-i18n="nav.ctaMobile"]{border-bottom:0;color:var(--brand)}
  /* jeziki: urejena mreza namesto uhajajoce vrste */
  .mobile-menu.open .mm-lang{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;
    padding:.7rem 0 .95rem;border-bottom:1px solid var(--border);margin-bottom:.35rem}
  .mm-lang button{justify-content:center;padding:.55rem .3rem;font-size:.85rem;min-width:0}
  .mm-lang .fi{width:1.2em;height:.9em}
  /* velik klicni gumb na vrhu menija */
  .mobile-menu .mm-call{display:flex;align-items:center;justify-content:center;gap:.55rem;
    background:var(--brand-deep);color:#fff!important;border:0;border-bottom:0!important;border-radius:12px;
    padding:.95rem 1rem;margin-bottom:.55rem;font-weight:700;font-size:1.04rem}
  .mobile-menu .mm-call svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
}
@media(min-width:941px){.mobile-menu{display:none!important}}

/* hero gumba na mobilnem: polna sirina, zlozena, lepa (kot na webnite) */
@media(max-width:600px){
  .hero-cta{flex-direction:column;gap:.7rem;margin-top:1.6rem;width:100%}
  .hero-cta .btn{width:100%;justify-content:center;padding:1.05rem 1.2rem;font-size:1.02rem;min-height:54px;border-radius:12px}
}

/* mobilna tipografija: manjsi, prilagojeni naslovi da zagotovo sedejo, + prelom dolgih besed */
@media(max-width:600px){
  .hero h1{font-size:clamp(1.95rem,7.6vw,2.5rem);line-height:1.14}
  h1{font-size:clamp(1.9rem,7.4vw,2.45rem)}
  .page-hero h1,h1.h1-fit,.page-hero h1.h1-fit{font-size:clamp(1.7rem,6.6vw,2.2rem)}
  h2{font-size:clamp(1.5rem,6vw,2rem)}
  .hero .lead,.hero p.lead,.page-hero .lead{font-size:1rem;line-height:1.6}
  h1,h2,h3,.hero h1,.page-hero h1,.lead,p,li{overflow-wrap:break-word;word-break:normal;hyphens:auto}
  section{padding-left:0;padding-right:0}
}

/* mobilna navigacija: burger skrajno desno, tema v glavi (kompaktno) */
@media(max-width:940px){
  .nav{justify-content:space-between;gap:.5rem}
  .logo{flex-shrink:0}
  .nav-right{margin-left:0;gap:.35rem;flex:0 0 auto}
  .nav-tools{border:0;padding:0;margin:0}
  .theme-sw{height:34px;padding:.15rem;gap:.1rem}
  .theme-btn{width:26px;height:26px}
  .theme-btn svg.i{width:14px;height:14px}
  /* glava blize robovom, da je burger tik ob desnem robu (cel viden) */
  header .wrap-wide{width:min(100% - 1.8rem,var(--max-wide))}
}
@media(max-width:380px){
  .logo .mark{width:40px;height:40px;flex:0 0 40px}
  .logo .word b{font-size:1.18rem}
}

/* Socialne ikone v nogi (razsirljivo: dodaj <a> za IG/TikTok ...) */
.foot-social{display:flex;gap:.55rem;margin-top:.6rem}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--brand);border:2px solid var(--brand);color:#fff;box-shadow:0 3px 10px rgba(47,130,206,.32);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.foot-social a:hover{background:var(--brand-deep);border-color:var(--brand-deep);transform:translateY(-2px);box-shadow:0 5px 14px rgba(47,130,206,.42)}
.foot-social svg{width:21px;height:21px;fill:currentColor}

/* Google ikona: pravi barvni logotip na beli podlagi (FB ostane moder krog) */
.foot-social a.soc-google{background:#fff;border-color:rgba(60,64,67,.18);box-shadow:0 3px 10px rgba(60,64,67,.20)}
.foot-social a.soc-google:hover{background:#fff;border-color:rgba(60,64,67,.32);box-shadow:0 5px 14px rgba(60,64,67,.30)}
.foot-social a.soc-google svg{width:19px;height:19px}