/* ============================================================================
   cifrca — oblikovni sistem (neo-soft UI, AI-forward)

   PALETA
     porcelan (osnova)     #EEF1F8  |  poglobljeno   #E3E7F3
     površina (kartice)    #F8FAFE  |  površina 2    #F1F4FB
     črnilo                #11131C  |  mehko črnilo  #4E5568  |  tiho #636A83
     MOČNA BARVA           #FF4A1C  (signalni vermilion — skener, pike, črte)
     močna za gumbe        #D6380D  (bela pisava, WCAG AA 4,7:1)
     močna za drobni tekst #C2350D
     pastelni sateliti     meta #D3E9DF · perivinkel #DCE2FA · pesek #F3E8D9
   TIPOGRAFIJA
     display: Bricolage Grotesque · besedilo: Instrument Sans · številke: Azeret Mono
   ANIMACIJA
     Cevovod dokumenta: listina prileti → skenirna črta jo prebere → polja se
     izpisujejo → knjižba se sestavlja → razlika teče na 0,00 € → kljukica.
   ========================================================================= */

/* ============================================================ ŽETONI */
:root{
  --bg:#EEF1F8; --bg-2:#E3E7F3;
  --surf:#F8FAFE; --surf-2:#F1F4FB;
  --ink:#11131C; --ink-2:#4E5568; --ink-3:#636A83;
  --line:rgba(17,19,28,.10);
  --acc:#FF4A1C; --acc-btn:#D6380D; --acc-ink:#C2350D; --acc-soft:#FFE7DF;
  --mint:#D3E9DF; --peri:#DCE2FA; --sand:#F3E8D9;
  --rl:30px; --rm:20px; --rs:13px;

  --sh:16px 20px 44px rgba(24,33,66,.11), -10px -12px 28px rgba(255,255,255,.92);
  --sh-lift:22px 30px 66px rgba(24,33,66,.15), -12px -14px 32px rgba(255,255,255,.96);
  --sh-in:inset 5px 7px 14px rgba(24,33,66,.10), inset -5px -7px 14px rgba(255,255,255,.95);
  --sh-acc:0 14px 32px rgba(255,74,28,.30), 0 3px 8px rgba(255,74,28,.20);

  --f-d:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-b:"Instrument Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --f-m:"Azeret Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --pad:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.2,.9,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-b);font-size:clamp(15.5px,1.05vw,17px);line-height:1.62;
  font-weight:400;letter-spacing:-.006em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--acc);color:#fff}

/* ======================================================== VZDUŠJE */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bloom{position:absolute;border-radius:50%;filter:blur(70px);opacity:.72}
.b1{width:52vw;height:52vw;left:-16vw;top:-14vw;background:radial-gradient(circle,var(--peri) 0%,rgba(220,226,250,0) 70%)}
.b2{width:46vw;height:46vw;right:-14vw;top:16vh;background:radial-gradient(circle,var(--mint) 0%,rgba(211,233,223,0) 70%)}
.b3{width:44vw;height:44vw;left:24vw;bottom:-18vw;background:radial-gradient(circle,var(--sand) 0%,rgba(243,232,217,0) 70%)}
.dots{position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(17,19,28,.07) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 72%)}
.grain{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ======================================================== POSTAVITEV */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
section{position:relative;z-index:1}
.sect{padding:clamp(64px,9vw,132px) 0}
.site-main{position:relative;z-index:1}

/* ============================================================= ATOMI */
.eyebrow{font-family:var(--f-m);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:100px;
  background:var(--surf);box-shadow:var(--sh);font-family:var(--f-m);font-size:11.5px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 0 4px var(--acc-soft)}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0}
h1{font-size:clamp(2.15rem,6vw,4.35rem)}
h2{font-size:clamp(1.85rem,4.2vw,3rem);letter-spacing:-.033em}
h3{font-size:clamp(1.12rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.024em;line-height:1.15}
p{margin:0}
.lede{color:var(--ink-2);font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.6;max-width:62ch}
.num{font-family:var(--f-m);font-variant-numeric:tabular-nums}
.todo{display:inline-block;font-family:var(--f-m);font-size:11px;font-weight:500;letter-spacing:.06em;
  padding:2px 8px;border-radius:6px;background:var(--acc-soft);color:var(--acc-ink);
  border:1px dashed rgba(255,74,28,.4);vertical-align:2px}

.card{background:var(--surf);border-radius:var(--rm);box-shadow:var(--sh);
  border:1px solid rgba(255,255,255,.9)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-b);font-size:.97rem;font-weight:600;letter-spacing:-.01em;
  padding:15px 26px;border-radius:100px;border:0;cursor:pointer;text-decoration:none;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s}
.btn-p{background:var(--acc-btn);color:#fff;box-shadow:var(--sh-acc)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(255,74,28,.36),0 4px 10px rgba(255,74,28,.24)}
.btn-p:active{transform:translateY(1px);box-shadow:0 6px 14px rgba(255,74,28,.28)}
.btn-s{background:var(--surf);color:var(--ink);box-shadow:var(--sh)}
.btn-s:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.btn-s:active{box-shadow:var(--sh-in);transform:translateY(1px)}
.btn svg{flex:none}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--surf);padding:10px 16px;border-radius:10px;
  box-shadow:var(--sh);text-decoration:none;font-weight:600}

/* ============================================================== NAV */
.nav{position:sticky;top:0;z-index:20;padding:12px 0;transition:padding .3s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;background:rgba(238,241,248,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .35s ease;border-bottom:1px solid transparent}
.nav.stuck::before{opacity:1;border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:18px}
.logo,.custom-logo-link{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.custom-logo{max-height:46px;width:auto;display:block}
.logo-m{width:36px;height:36px;border-radius:11px;background:var(--surf);box-shadow:var(--sh);
  display:grid;place-items:center;flex:none}
.logo-t{font-family:var(--f-d);font-weight:800;font-size:1.42rem;letter-spacing:-.05em}
.logo-t b{color:var(--acc);font-weight:800}

.nav-l{display:flex;align-items:center;gap:4px}
.nav-l ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-l li{position:relative}
.nav-l a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-2);display:inline-block;
  padding:9px 15px;border-radius:100px;transition:color .25s,background .25s,box-shadow .25s}
.nav-l a:hover,.nav-l .current-menu-item>a{color:var(--ink);background:var(--surf);box-shadow:var(--sh)}
.nav .btn{padding:12px 20px;font-size:.9rem}
.burger{display:none;width:42px;height:42px;border-radius:12px;background:var(--surf);
  box-shadow:var(--sh);border:0;cursor:pointer;place-items:center;flex:none}
.burger span{display:block;width:16px;height:1.8px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:4px}
.nav.open .burger span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

.sheet{display:none;flex-direction:column;gap:4px;margin-top:12px;padding:14px;
  background:var(--surf);border-radius:var(--rm);box-shadow:var(--sh)}
.sheet-nav{display:flex;flex-direction:column;gap:4px}
.sheet-nav ul{display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:0}
.sheet a{text-decoration:none;display:block;padding:12px 14px;border-radius:12px;font-weight:500;color:var(--ink-2)}
.sheet a:hover{background:var(--surf-2);color:var(--ink)}
.sheet .sheet-cta{background:var(--acc-btn);color:#fff;text-align:center;margin-top:6px;font-weight:600}
.sheet .sheet-cta:hover{background:var(--acc-ink);color:#fff}
@media(max-width:900px){
  .nav-l,.nav-in>.btn{display:none}
  .burger{display:grid}
  .nav.open .sheet{display:flex}
}
@media(min-width:901px){.sheet{display:none!important}}

/* ====================================================== KLICNI GUMB */
/* Telefon kot ODČITEK: številka v Azeret Mono s tabelarnimi števkami, slušalka
   v signalnem vermilionu (žeton --acc je namenjen GRAFIKI). Telo gumba ostane
   porcelanasto z mehko dvojno senco — drugoten ukaz, ki ne tekmuje z glavnim
   vermilionskim gumbom, a je vseeno ves čas na dosegu. */
.nav-in>.btn-call{padding:11px 16px}
.btn-call{background:var(--surf);color:var(--ink);box-shadow:var(--sh);gap:9px;flex:none}
.btn-call:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.btn-call:active{transform:translateY(1px);box-shadow:var(--sh-in)}
.btn-call-ic{display:grid;place-items:center;color:var(--acc);flex:none}
.btn-call-n{font-family:var(--f-m);font-size:.83rem;font-weight:500;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Ozek namizni pas (901–1079 px) in mobilno: samo slušalka, v natanko istem
   okvirju kot hamburger, da gumba delujeta kot par. */
@media(max-width:1079px){
  .nav-in>.btn-call{width:42px;height:42px;padding:0;border-radius:12px}
  .btn-call-n{display:none}
}
@media(max-width:900px){
  .nav-in>.btn-call{display:inline-flex}
}

/* V predalu je številka tudi BERLJIVA — v glavi je na mobilnem le ikona. */
.sheet .sheet-call{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--surf-2);box-shadow:var(--sh-in);color:var(--ink);
  font-family:var(--f-m);font-size:.95rem;font-weight:500;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;margin-top:6px}
.sheet .sheet-call:hover{background:var(--surf-2);color:var(--ink)}
.sheet-call-ic{display:grid;place-items:center;color:var(--acc);flex:none}

/* ================================= NAMIG NA KLIC (gumb v glavi) */
/* Lebdečega gumba ni več — klicna točka je ena sama, v glavi. Da je ne bi
   spregledal, obroč dvakrat zaniha, ko obiskovalec prebere ~30 % strani.
   Sprožitev je v footer.php; tu je le videz. */
.btn-call{position:relative}
.btn-call::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--acc);opacity:0;pointer-events:none}
.btn-call.je-namig::after{animation:call-obroc 1.7s var(--ease) .1s 2}
@keyframes call-obroc{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.28)}}
/* Sam gumb ob namigu enkrat rahlo poskoci - dovolj, da pritegne pogled, a
   ne toliko, da bi premaknil karkoli okoli sebe (obroc je izven toka). */
.btn-call.je-namig{animation:call-poskok 1.7s var(--ease) .1s 2}
@keyframes call-poskok{0%,100%{transform:none}18%{transform:translateY(-2px)}36%{transform:none}}
@media(prefers-reduced-motion:reduce){
  .btn-call.je-namig,.btn-call.je-namig::after{animation:none}
}

/* odmik za orodno vrstico WordPressa */
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* ============================================================= HERO */
.hero{padding:clamp(34px,5vw,64px) 0 clamp(52px,7vw,92px)}
.hero-grid{display:grid;gap:clamp(30px,4vw,54px);align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.hero h1{margin:20px 0 0;max-width:14ch}
.hero h1 .hl{color:var(--acc-ink);position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:.13em;
  background:var(--acc);opacity:.22;border-radius:3px;transform:scaleX(0);transform-origin:left;
  animation:ul .9s .75s var(--ease) forwards}
@keyframes ul{to{transform:scaleX(1)}}
.hero .lede{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:.86rem;color:var(--ink-3)}
.hero-note .ln{height:1px;flex:1;max-width:56px;background:var(--line)}

.rise{opacity:0;transform:translateY(20px);animation:rise .8s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.27s}
.d4{animation-delay:.39s}.d5{animation-delay:.5s}.d6{animation-delay:.6s}

/* ========================================================= CEVOVOD */
/* `container-type:inline-size` naredi iz .pipe poizvedbeni vsebnik. Nujno je,
   ker se ŠIRINA cevovoda ne ujema s širino zaslona: pri 999 px je vsebnik širok
   854 px, pri 1000 px pa pade na 417 px, ker hero-grid preide v dva stolpca.
   Prelomne točke znotraj cevovoda morajo zato slediti vsebniku, ne zaslonu. */
.pipe{position:relative;padding:clamp(18px,2.4vw,26px);border-radius:var(--rl);
  container-type:inline-size;container-name:pipe;
  background:linear-gradient(155deg,var(--surf) 0%,var(--surf-2) 100%);
  box-shadow:var(--sh-lift);border:1px solid rgba(255,255,255,.9)}
.pipe-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.pipe-head .eyebrow{margin-right:auto}
.pipe-ctl{display:flex;align-items:center;gap:8px}
.pdots{display:flex;gap:5px}
.pdot{width:22px;height:6px;border-radius:100px;border:0;padding:0;cursor:pointer;position:relative;
  background:rgba(17,19,28,.14);transition:background .3s,width .3s var(--ease)}
/* Pika je visoka 6 px — premalo za prst. Nevidno območje dotika razširimo na
   44 px, ne da bi se videz kakor koli spremenil. */
.pdot::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;
  transform:translateY(-50%)}
.pdot.on{background:var(--acc);width:32px}
.pplay{width:30px;height:30px;border-radius:9px;background:var(--surf);box-shadow:var(--sh);
  border:0;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.pplay:active{box-shadow:var(--sh-in)}

.rail{position:relative;display:flex;justify-content:space-between;gap:4px;margin:0 0 20px;padding:0;list-style:none}
.rail::before{content:"";position:absolute;left:8px;right:8px;top:6px;height:2px;
  background:rgba(17,19,28,.10);border-radius:2px}
.rail li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:0}
.rail .dot{width:13px;height:13px;border-radius:50%;background:var(--bg-2);
  box-shadow:inset 0 0 0 2px rgba(17,19,28,.10);position:relative;z-index:1;
  transition:background .35s,box-shadow .35s,transform .35s var(--ease)}
.rail li.on .dot{background:var(--acc);box-shadow:0 0 0 4px var(--acc-soft),0 4px 10px rgba(255,74,28,.35);transform:scale(1.12)}
.rail li.done .dot{background:var(--acc-ink);box-shadow:0 0 0 3px var(--acc-soft)}
.rail .lb{font-family:var(--f-m);font-size:9.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;transition:color .3s;line-height:1.2}
.rail li.on .lb,.rail li.done .lb{color:var(--ink)}
@media(min-width:420px){.rail .lb{font-size:10.5px}}

.stage{display:grid;gap:14px}
/* Zaslonsko pravilo ostane kot rezerva za brskalnike brez @container. */
@media(min-width:640px){.stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Dva stolpca le, kadar je zanju res prostor. Vrstica knjižbe ima 136 px trdnih
   stolpcev (konto 42 + D/K 16 + znesek ~57 + 3 razmiki), zato naziv pri stolpcu
   pod 264 px ostane brez uporabne širine — pri 1024 px je bil naziv širok 21 px
   in »Denarna sredstva na TRR« se je lomil v 6 vrstic (78,8 px). 2*264+14=542. */
@container pipe (max-width:541.99px){.stage{grid-template-columns:minmax(0,1fr)}}
.stage-col{display:grid;gap:14px;min-width:0}
.doc-slot{position:relative;min-height:236px;border-radius:var(--rm);overflow:hidden;
  background:var(--surf-2);box-shadow:var(--sh-in);display:grid;place-items:center;padding:18px}
.doc-slot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(17,19,28,.06) 1px,transparent 1px);background-size:16px 16px;opacity:.6}
.doc{position:relative;width:min(230px,100%);background:#fff;border-radius:12px;padding:15px 15px 17px;
  box-shadow:0 18px 34px rgba(24,33,66,.16),0 2px 5px rgba(24,33,66,.09);
  transform:translateY(22px) scale(.94) rotate(-2deg);opacity:0;z-index:1}
.doc.in{animation:docin .78s var(--ease) forwards}
@keyframes docin{
  0%{opacity:0;transform:translateX(-34px) translateY(26px) scale(.9) rotate(-6deg)}
  62%{opacity:1}
  100%{opacity:1;transform:translateX(0) translateY(0) scale(1) rotate(-1deg)}}
.doc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding-bottom:9px;border-bottom:1.5px solid rgba(17,19,28,.12)}
.doc-tag{font-family:var(--f-m);font-size:8.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--ink);padding:3px 7px;border-radius:5px;white-space:nowrap}
.doc-no{font-family:var(--f-m);font-size:10px;font-weight:500;color:var(--ink-2);text-align:right}
.doc-meta{font-size:10.5px;color:var(--ink-3);margin-top:8px;line-height:1.35;opacity:.26}
.doc-rows{margin-top:11px;display:grid;gap:7px}
.doc-rows .l{display:flex;justify-content:space-between;gap:10px;font-size:11px;opacity:.24}
.doc.scanning .doc-rows .l{animation:ink .5s ease forwards;animation-delay:calc(var(--i)*.19s + .38s)}
.doc.scanning .doc-meta{animation:ink .5s .3s ease forwards}
@keyframes ink{to{opacity:1}}
.doc.read .doc-rows .l,.doc.read .doc-meta{opacity:1}
.doc-rows .l:last-child{border-top:1.5px solid rgba(17,19,28,.12);padding-top:8px;font-weight:600}
.doc-rows .l span:first-child{color:var(--ink-2)}
.doc-rows .l span:last-child{font-family:var(--f-m);font-variant-numeric:tabular-nums;white-space:nowrap}
.beam{position:absolute;left:-4px;right:-4px;top:0;height:38%;opacity:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(255,74,28,0) 0%,rgba(255,74,28,.10) 55%,rgba(255,74,28,.28) 88%,rgba(255,74,28,0) 100%)}
.beam::after{content:"";position:absolute;left:0;right:0;bottom:12%;height:2px;background:var(--acc);
  box-shadow:0 0 14px 2px rgba(255,74,28,.75)}
.doc.scanning .beam{animation:scan 1.85s cubic-bezier(.45,0,.25,1) forwards}
@keyframes scan{0%{transform:translateY(-42%);opacity:0}9%{opacity:1}88%{opacity:1}100%{transform:translateY(272%);opacity:0}}

/* Tudi plošča je poizvedbeni vsebnik: koliko vrstic zavzamejo čipi in knjižba,
   je odvisno od širine PLOŠČE, ta pa je enkrat cela širina cevovoda (en stolpec),
   drugič njena polovica (dva stolpca). Ena sama lestvica prelomov zato drži samo,
   če meri ploščo. Vsebina plošče je clientWidth - 32 (padding 16 levo in desno). */
.panel{border-radius:var(--rm);background:var(--surf);box-shadow:var(--sh);
  container-type:inline-size;container-name:panel;
  border:1px solid rgba(255,255,255,.9);padding:15px 16px;display:flex;flex-direction:column;gap:11px;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--f-m);font-size:9.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-content:flex-start}
.chip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:100px;
  background:var(--surf-2);border:1px solid var(--line);font-size:11px;max-width:100%;
  animation:pop .34s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
.chip b{font-family:var(--f-m);font-size:9px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);flex:none}
.chip u{text-decoration:none;font-weight:500;color:var(--ink);white-space:nowrap;
  font-family:var(--f-m);font-size:10.5px;font-variant-numeric:tabular-nums}

.ledger{display:grid;gap:5px;min-height:24px}
.lrow{display:grid;grid-template-columns:42px minmax(0,1fr) 16px auto;gap:7px;align-items:center;
  font-size:11px;padding:6px 8px;border-radius:9px;background:var(--surf-2);
  animation:slide .38s var(--ease) both}
@keyframes slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.lrow .k{font-family:var(--f-m);font-size:10px;font-weight:500;color:var(--acc-ink)}
.lrow .n{color:var(--ink-2);line-height:1.25;font-size:10.5px;overflow-wrap:anywhere}
.lrow .s{font-family:var(--f-m);font-size:9px;font-weight:500;text-align:center;
  color:var(--ink-3);border:1px solid var(--line);border-radius:4px}
.lrow .a{font-family:var(--f-m);font-size:10.5px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.diff{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;
  padding:9px 12px;border-radius:12px;background:var(--surf-2);box-shadow:var(--sh-in);
  font-family:var(--f-m);font-size:10.5px;letter-spacing:.03em;transition:background .4s,color .4s}
.diff .v{font-weight:500;font-variant-numeric:tabular-nums;transition:color .3s}
.diff.live .v{color:var(--acc-ink)}
.diff.ok{background:var(--mint);box-shadow:none}
.diff.ok .v{color:#1B5D45}
.stamp{display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.stamp.on{opacity:1;transform:none}
.check{width:26px;height:26px;flex:none}
/* Obseg kroga je 2πr; znak teme ima r=19 (≈119,4), ne r=20 iz predloge (≈126).
   Ob starem 126 se je poteza izrisala do konca ~5 % pred koncem animacije. */
.check circle{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-dasharray:120;stroke-dashoffset:120}
.check path{fill:none;stroke:var(--acc);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:34}
.check.draw circle{animation:dash .6s var(--ease) forwards}
.check.draw path{animation:dash .38s .42s var(--ease) forwards}
@keyframes dash{to{stroke-dashoffset:0}}
/* V predlogi je kljukica ob zahvali 46 px (tam prek inline style). V temi je
   velikost podana z atributoma width/height, ki ju .check s 26 px prevpije —
   zato jo tu vrnemo na velikost iz predloge. */
.thx .check{width:46px;height:46px}
.stamp-t{font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.stamp-t i{display:block;font-style:normal;font-family:var(--f-m);font-size:9.5px;font-weight:400;color:var(--ink-3);letter-spacing:.05em}

.say{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;
  background:var(--surf-2);box-shadow:var(--sh-in);min-height:44px}
.say-b{width:20px;height:20px;border-radius:6px;background:var(--acc);flex:none;display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(255,74,28,.32);margin-top:1px}
.say-t{font-family:var(--f-m);font-size:11.5px;line-height:1.5;color:var(--ink-2);letter-spacing:-.01em}
.say-t.caret::after{content:"";display:inline-block;width:6px;height:12px;background:var(--acc);
  margin-left:2px;vertical-align:-1px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ============================ REZERVACIJA VIŠINE (brez premikanja postavitve)

   Animacija med tekom DODAJA vsebino: čipe v .chips, vrstice v .ledger, besedilo
   v .say, in med dokumenti zamenja listino v .doc-slot. Ker so bile te škatle
   omejene z min-height NAJMANJŠEGA stanja (26 / 24 / 44 px), je vsak dodan
   element raztegnil cevovod in potisnil vso vsebino pod njim navzdol.
   Izmerjeno PRED popravkom (min -> max višine #pipe, 1453 stanj na širino):
     360 px   745,8 ->  993,8  (+248,0)   768 px  565,6 ->  657,1  ( +91,5)
     1024 px  625,6 -> 1151,4  (+525,8)   1440 px 580,8 ->  685,4  (+104,6)
   PO popravku je razlika pri vseh štirih 0,00 px.

   Popravek: vsaka škatla dobi od začetka višino svojega NAJVIŠJEGA stanja.
   Vrednosti niso ugibane — izmerjene so s pregledom vseh stanj animacije pri
   širinah od 170 do 900 px, in sicer pri spletnih pisavah (Azeret Mono /
   Instrument Sans) IN pri nadomestnih (Consolas / Segoe UI). Spletne pisave so
   širše, zato so njihove mere povsod najvišje in pokrijejo oba primera.
   Višina je padajoča funkcija širine, zato je rezervacija na spodnjem robu
   vsakega pasu varna za ves pas.

   min-height (ne height): če se razmere spremenijo (druga pisava, večja privzeta
   velikost pisave), škatla raje zraste, kot da bi odrezala vsebino.

   @supports: brskalniki brez @container dobijo natanko dosedanji CSS — nič
   slabše od sedanjega stanja, brez nenamerne praznine.                        */
@supports (container-type:inline-size){

  /* .chips — 5 čipov; pas meri VSEBINO plošče (clientWidth - 32 px paddinga).
     Prelomi so izmerjeni na 1/16 px natančno, zato ulomki. Prag je postavljen
     točno na izmerjeni prelom: pri širini nad pragom vsebina zanesljivo ni višja
     od rezervacije, pod pragom pa velja večja rezervacija iz prejšnjega pasu. */
  .chips{min-height:169px}                                                  /* 5 vrstic */
  @container panel (min-width:281.4375px){.chips{min-height:134px}}         /* 4 vrstice */
  @container panel (min-width:335.0625px){.chips{min-height:99px}}          /* 3 vrstice */
  @container panel (min-width:455.8125px){.chips{min-height:64px}}          /* 2 vrstici  */

  /* .ledger — do 3 vrstice knjižbe; pri ozkem nazivu se vsaka lomi v več vrstic */
  .ledger{min-height:177.25px}
  @container panel (min-width:212px){.ledger{min-height:164.13px}}
  @container panel (min-width:220px){.ledger{min-height:141.75px}}
  @container panel (min-width:230.25px){.ledger{min-height:128.63px}}
  @container panel (min-width:241.25px){.ledger{min-height:124.75px}}
  @container panel (min-width:251px){.ledger{min-height:115.5px}}
  @container panel (min-width:292.625px){.ledger{min-height:97px}}          /* 3 enovrstične */

  /* .say — najdaljše besedilo se pri ozkem cevovodu prelomi v 2 ali 3 vrstice.
     Pas meri cevovod (.say je čez vso njegovo širino): vsebina .say = cw - 28. */
  .say{min-height:93px}
  @container pipe (min-width:205.1875px){.say{min-height:75.75px}}
  @container pipe (min-width:256.875px){.say{min-height:58.5px}}
  @container pipe (min-width:462.9375px){.say{min-height:45px}}

  /* .doc-slot — listine niso enako visoke; pri ozkem stolpcu se besedilo v njih
     prelomi in najvišja listina preseže dosedanjih 236 px. Zgodi se le pri enem
     stolpcu, ko je cevovod ožji od 246,25 px (zaslon pod ~320 px). */
  @container pipe (max-width:246.24px){.doc-slot{min-height:252px}}
  @container pipe (max-width:228.49px){.doc-slot{min-height:269px}}
  @container pipe (max-width:227.93px){.doc-slot{min-height:286px}}
}

/* ========================================================= STORITVE */
.head{max-width:66ch;margin-bottom:clamp(30px,4vw,50px)}
.head h2{margin-top:14px}
.head p{margin-top:16px}
.svc{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
.s-card{grid-column:span 12;position:relative;padding:24px 22px;border-radius:var(--rm);
  background:var(--surf);box-shadow:var(--sh);border:1px solid rgba(255,255,255,.9);
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.s-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.s-i{font-family:var(--f-m);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--ink-3);
  transition:color .3s}
.s-card:hover .s-i{color:var(--acc-ink)}
.s-card p{color:var(--ink-2);font-size:.94rem;line-height:1.58}
.s-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.s-card:hover::before{transform:scaleY(1)}
.s-hero{grid-column:span 12;padding:clamp(24px,3vw,34px);border-radius:var(--rl);
  background:linear-gradient(158deg,var(--surf) 0%,var(--surf-2) 100%)}
.s-hero h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.035em}
.s-hero p{font-size:clamp(.98rem,1.2vw,1.06rem);max-width:44ch}
.s-hero .badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:6px 13px;border-radius:100px;background:var(--acc-btn);color:#fff;
  font-family:var(--f-m);font-size:10px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:var(--sh-acc)}
.s-art{margin-top:auto;padding-top:18px}
.s-art svg{display:block;width:100%;height:auto;max-width:330px}
@media(min-width:700px){
  .s-card{grid-column:span 6}
  .s-hero.s-card{grid-column:span 12}
}
@media(min-width:1040px){
  .s-card{grid-column:span 3}
  .s-hero.s-card{grid-column:span 6;grid-row:span 2}
  .s-wide.s-card{grid-column:span 6}
}

/* ============================================================ KORAKI */
.steps{display:grid;gap:16px;counter-reset:s}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:26px 22px 24px;border-radius:var(--rm);background:var(--surf);
  box-shadow:var(--sh);border:1px solid rgba(255,255,255,.9);display:flex;flex-direction:column;gap:11px}
.step .n{font-family:var(--f-d);font-size:2.6rem;font-weight:800;letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px rgba(17,19,28,.24);transition:color .4s,-webkit-text-stroke-color .4s}
.step:hover .n{color:var(--acc);-webkit-text-stroke-color:transparent}
.step p{color:var(--ink-2);font-size:.94rem}
.step .cn{display:none}
@media(min-width:820px){
  .step .cn{display:block;position:absolute;right:-11px;top:44px;width:22px;height:2px;
    background:repeating-linear-gradient(90deg,var(--ink-3) 0 4px,transparent 4px 8px);opacity:.6;z-index:2}
  .step:last-child .cn{display:none}
}

/* ============================================================= ZAKAJ */
.why{display:grid;gap:14px}
@media(min-width:660px){.why{grid-template-columns:repeat(2,1fr)}}
.w-card{display:flex;gap:16px;padding:24px 22px;border-radius:var(--rm);background:var(--surf);
  box-shadow:var(--sh);border:1px solid rgba(255,255,255,.9);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.w-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.w-ic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--surf-2);box-shadow:var(--sh-in);color:var(--acc)}
.w-card p{color:var(--ink-2);font-size:.93rem;margin-top:7px}

/* =========================================================== KONTAKT */
.ct{display:grid;gap:clamp(20px,3vw,34px)}
@media(min-width:940px){.ct{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.ct-info{display:flex;flex-direction:column;gap:14px}
.ct-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;
  background:var(--surf);box-shadow:var(--sh);border:1px solid rgba(255,255,255,.9)}
.ct-row .k{font-family:var(--f-m);font-size:9.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:3px}
.ct-row .v{font-weight:500;font-size:.98rem;letter-spacing:-.012em;word-break:break-word}
.ct-row a{text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--acc);padding-bottom:1px}
.ct-row a:hover{color:var(--acc-ink)}
.ct-ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--surf-2);box-shadow:var(--sh-in);color:var(--acc)}

.cf{padding:clamp(22px,3vw,32px);border-radius:var(--rl);background:var(--surf);
  box-shadow:var(--sh-lift);border:1px solid rgba(255,255,255,.9);position:relative;overflow:hidden}
.fg{display:grid;gap:16px}
.f2{display:grid;gap:16px}
@media(min-width:600px){.f2{grid-template-columns:1fr 1fr}}
.fi{display:flex;flex-direction:column;gap:7px}
.fi label{font-family:var(--f-m);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.fi input,.fi textarea{font-family:var(--f-b);font-size:.97rem;color:var(--ink);
  padding:14px 16px;border-radius:14px;border:1px solid transparent;background:var(--surf-2);
  box-shadow:var(--sh-in);transition:box-shadow .3s,border-color .3s;width:100%}
.fi textarea{resize:vertical;min-height:118px;line-height:1.55}
.fi input::placeholder,.fi textarea::placeholder{color:var(--ink-3);opacity:.75}
.fi input:focus,.fi textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:var(--sh-in),0 0 0 4px var(--acc-soft)}
.cf .btn{margin-top:4px;width:100%}
@media(min-width:600px){.cf .btn{width:auto}}
.f-note{margin-top:14px;font-size:.8rem;color:var(--ink-3);line-height:1.5}
/* Past za bote: polje mora ostati v dokumentu, a nedosegljivo človeku —
   display:none nekateri boti preskočijo, odmik izven zaslona pa ne. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.f-err{margin:2px 0 0;font-size:.86rem;line-height:1.5;color:var(--acc-ink);
  background:var(--acc-soft);border-radius:12px;padding:10px 14px}
.f-err[hidden]{display:none}
.cf .btn[aria-busy="true"],#form .btn[aria-busy="true"]{opacity:.65;cursor:progress}
#form .btn[disabled]{opacity:.65;cursor:not-allowed;transform:none;box-shadow:var(--sh-acc)}
.thx{position:absolute;inset:0;background:var(--surf);display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;padding:34px;z-index:3}
.thx.on{display:flex;animation:pop .45s var(--ease) both}
.thx h3{font-size:1.4rem}
.thx p{color:var(--ink-2);font-size:.95rem;max-width:34ch}
.thx .btn{width:auto}

/* ============================================================= NOGA */
.site-footer{padding:clamp(40px,5vw,62px) 0 34px;border-top:1px solid var(--line);
  margin-top:clamp(30px,5vw,60px);position:relative;z-index:1}
.f-in{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.f-l{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.f-l ul{display:flex;flex-wrap:wrap;gap:6px;align-items:center;list-style:none;margin:0;padding:0}
.f-l a{text-decoration:none;color:var(--ink-2);font-size:.9rem;font-weight:500;padding:8px 14px;
  display:inline-block;border-radius:100px;transition:background .25s,color .25s,box-shadow .25s}
.f-l a:hover{color:var(--ink);background:var(--surf);box-shadow:var(--sh)}
.f-c{font-size:.82rem;color:var(--ink-3);margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  line-height:1.6}
.f-c a{color:var(--ink-2)}

/* =========================================================== RAZKRIVANJE */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv-s>*{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv-s.on>*{opacity:1;transform:none}
.rv-s.on>*:nth-child(1){transition-delay:.02s}
.rv-s.on>*:nth-child(2){transition-delay:.08s}
.rv-s.on>*:nth-child(3){transition-delay:.14s}
.rv-s.on>*:nth-child(4){transition-delay:.2s}
.rv-s.on>*:nth-child(5){transition-delay:.26s}
.rv-s.on>*:nth-child(6){transition-delay:.32s}
.rv-s.on>*:nth-child(7){transition-delay:.38s}

/* ================================================== VSEBINSKE STRANI */
.shell{padding:clamp(40px,6vw,88px) 0 clamp(30px,4vw,50px)}
.shell-in{max-width:820px;margin:0 auto}
.shell-wide{max-width:1080px;margin:0 auto}
.entry{padding:clamp(24px,3.4vw,40px);border-radius:var(--rl);background:var(--surf);
  box-shadow:var(--sh);border:1px solid rgba(255,255,255,.9)}
.entry+.entry{margin-top:18px}
.entry-title{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.033em}
.entry-title a{text-decoration:none}
.entry-title a:hover{color:var(--acc-ink)}
.entry-meta{font-family:var(--f-m);font-size:10.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:12px}
.entry-thumb{margin:0 0 20px;border-radius:var(--rm);overflow:hidden;box-shadow:var(--sh)}
.entry-thumb img{display:block;width:100%}
.entry-content{margin-top:18px;color:var(--ink-2);font-size:1rem;line-height:1.72}
.entry-content>*+*{margin-top:1.1em}
.entry-content h2{font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--ink);margin-top:1.6em}
.entry-content h3{font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--ink);margin-top:1.4em}
.entry-content h4{font-size:1.05rem;color:var(--ink);margin-top:1.3em}
.entry-content a{color:var(--acc-ink);text-decoration:none;border-bottom:1.5px solid rgba(255,74,28,.35)}
.entry-content a:hover{border-bottom-color:var(--acc)}
.entry-content ul,.entry-content ol{padding-left:1.3em;margin-top:1em}
.entry-content li+li{margin-top:.4em}
.entry-content blockquote{margin:1.4em 0;padding:16px 20px;border-left:3px solid var(--acc);
  background:var(--surf-2);border-radius:0 14px 14px 0;font-size:1.02rem;color:var(--ink)}
.entry-content blockquote p+p{margin-top:.8em}
.entry-content code,.entry-content kbd{font-family:var(--f-m);font-size:.86em;background:var(--surf-2);
  padding:2px 6px;border-radius:6px;color:var(--ink)}
.entry-content pre{background:var(--ink);color:#EEF1F8;padding:18px 20px;border-radius:var(--rs);
  overflow-x:auto;font-family:var(--f-m);font-size:.84rem;line-height:1.6}
.entry-content pre code{background:none;color:inherit;padding:0}
.entry-content table{width:100%;border-collapse:collapse;font-size:.92rem}
.entry-content th,.entry-content td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.entry-content th{font-family:var(--f-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.entry-content img{border-radius:var(--rs)}
.entry-content figure{margin:1.4em 0}

.post-list{display:grid;gap:16px}
@media(min-width:820px){.post-list{grid-template-columns:repeat(2,1fr)}}
.post-card{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border-radius:var(--rm);
  background:var(--surf);box-shadow:var(--sh);border:1px solid rgba(255,255,255,.9);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.post-card h2{font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.028em}
.post-card h2 a{text-decoration:none}
.post-card p{color:var(--ink-2);font-size:.94rem}
.post-card .more{margin-top:auto;padding-top:10px;font-family:var(--f-m);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc-ink);text-decoration:none}

.pager{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 12px;border-radius:100px;background:var(--surf);box-shadow:var(--sh);text-decoration:none;
  font-family:var(--f-m);font-size:.86rem;color:var(--ink-2)}
.pager .page-numbers.current{background:var(--acc-btn);color:#fff;box-shadow:var(--sh-acc)}

/* ============================================================ ISKANJE */
.searchform{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.searchform .field{flex:1;min-width:200px;display:flex;flex-direction:column;gap:7px}
.searchform input[type="search"]{font-family:var(--f-b);font-size:.97rem;color:var(--ink);width:100%;
  padding:14px 16px;border-radius:14px;border:1px solid transparent;background:var(--surf-2);
  box-shadow:var(--sh-in);transition:box-shadow .3s,border-color .3s}
.searchform input[type="search"]:focus{outline:none;border-color:var(--acc);
  box-shadow:var(--sh-in),0 0 0 4px var(--acc-soft)}
.searchform .btn{padding:14px 22px}

.e404{text-align:center;max-width:56ch;margin:0 auto}
.e404 .num-big{font-family:var(--f-d);font-size:clamp(4rem,14vw,9rem);font-weight:800;letter-spacing:-.06em;
  line-height:1;color:transparent;-webkit-text-stroke:2px rgba(17,19,28,.2)}
.e404 h1{margin-top:10px}
.e404 p{margin-top:18px;color:var(--ink-2)}
.e404 .searchform{margin-top:26px;justify-content:center}
.e404 .btn{margin-top:20px}

/* ================================================== ZMANJŠANO GIBANJE */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.rv,.rv-s>*{opacity:1!important;transform:none!important}
  .hero h1 .hl::after{transform:scaleX(1)}
  .doc{opacity:1;transform:none}
  .doc-rows .l,.doc-meta{opacity:1}
  .beam{display:none}
  .stamp{opacity:1;transform:none}
  .check circle,.check path{stroke-dashoffset:0}
  .say-t.caret::after{display:none}
  .pplay{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPORABNOST NA DOTIK — tablice in telefoni                    (26. 8. 2026)
   Vsaka vrednost spodaj izhaja iz meritve na živi strani (getBoundingClientRect
   / getComputedStyle), ne iz ocene. Estetika ostaja nespremenjena — popravljena
   je le dosegljivost s palcem in prelom pri vmesnih širinah.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. 🔴 Klicni gumb je bil NEDOSEGLJIV, dokler je bila odprta pasica o piškotkih.
   Izmerjeno: lebdeci gumb z-index 18, #cifrca-cc z-index 2147483647 cez njega;
   elementFromPoint sredi slusalke je vrnil gumb "Zavrnem". Odpravljeno drugace:
   lebdecega gumba ni vec, klicna tocka je v glavi, ki je pasica ne pokriva. */

/* 2. 🔴 Telefon in e-pošta v Kontaktu sta bila tapljiva le v 23 px pasu
   (WCAG 2.5.8 zahteva >=24, Apple HIG 44). To je glavni konverzijski element.
   Podčrtaj se preseli iz border-bottom v gradient, da ostane vizualno enak,
   medtem ko se tapljiva višina poveča na 43 px. */
.ct-row a{
  display:inline-block;padding-block:10px;padding-bottom:11px;border-bottom:0;
  /* .ct-row .v deduje word-break:break-word; brez max-content bi inline-block
     stisnil "info@cifrca.si" v tri vrstice (izmerjeno 86,7 px sirine). */
  width:max-content;max-width:100%;
  background-image:linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;background-size:100% 1.5px;
  background-position:0 calc(100% - 10px);
}

/* 3. ⚠️ Koraki so ostali v enem stolpcu do 819 px, čeprav sta sosednja odseka
   (.why od 660, .svc od 700) že dvostolpčna — na tablici pokončno je ta odsek
   izstopal in požrl ~2 zaslona višine. */
@media(min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}

/* ==================================================== EXIT-INTENT POJAVNO OKNO */
.exit-ov{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--pad);
  background:rgba(238,241,248,.82);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility 0s linear .32s}
.exit-ov.on{opacity:1;visibility:visible;transition:opacity .32s var(--ease)}
.exit-card{position:relative;max-width:480px;width:100%;background:var(--surf);border-radius:var(--rl);
  box-shadow:var(--sh-lift);padding:clamp(28px,4vw,44px);text-align:center;
  transform:translateY(14px) scale(.97);transition:transform .38s var(--ease)}
.exit-ov.on .exit-card{transform:translateY(0) scale(1)}
.exit-ic{width:56px;height:56px;margin:0 auto 18px}
.exit-ic-ring{stroke:var(--acc-soft)}
.exit-ic-check{stroke:var(--acc-btn);stroke-dasharray:40;stroke-dashoffset:40}
.exit-ov.on .exit-ic-check{animation:exit-draw .5s .35s var(--ease) forwards}
.exit-ov.on .exit-ic-ring{animation:exit-pop .5s var(--ease) both}
@keyframes exit-draw{to{stroke-dashoffset:0}}
@keyframes exit-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.exit-card h3{font-family:var(--f-d);font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.2;
  color:var(--ink);margin:0 0 12px;text-align:center}
.exit-card p{font-family:var(--f-b);color:var(--ink-2);line-height:1.55;margin:0 0 22px;text-align:center}
.exit-card .btn{width:100%}
.exit-cta{animation:exit-cta-pulse 1.8s ease-in-out .9s 2}
@keyframes exit-cta-pulse{0%,100%{box-shadow:var(--sh-acc)}50%{box-shadow:0 0 0 8px rgba(255,74,28,.18),var(--sh-acc)}}
@media(prefers-reduced-motion:reduce){
  .exit-ov.on .exit-ic-check,.exit-ov.on .exit-ic-ring,.exit-cta{animation:none;stroke-dashoffset:0}
}
.exit-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
  border:0;background:var(--surf-2);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  font-size:1.1rem;line-height:1;transition:background .2s,color .2s}
.exit-x:hover{background:var(--acc-soft);color:var(--acc-ink)}
@media(prefers-reduced-motion:reduce){
  .exit-ov,.exit-card{transition:none}
}
/* Na dotik ni kazalca, ki bi "odsel" proti robu okna, zato exit-intent tam ne
   sprozi nicesar (namerno - glej main.js) - pod 760 px torej modal ni potreben
   v CSS-ju, a ga vseeno skrijemo za primer rocnega sprozenja iz konzole/testa. */
@media(max-width:760px){.exit-ov{align-items:flex-end;padding:16px}
  .exit-card{max-width:100%}}

/* 4. ⚠️ Naslov je uhajal 33 px iz svojega stolpca med 1000-1099 px: pri 6vw je
   "Računovodski" širok 442 px, stolpec pa 398 px. Pod 1100 px zmanjšamo korak,
   overflow-wrap pa je varovalka za daljše besede v drugih jezikih. */
.hero h1{overflow-wrap:break-word}
@media(min-width:1000px) and (max-width:1099px){
  .hero h1{font-size:clamp(2.15rem,5vw,4.35rem)}
}

/* 5. ⚠️ Polja obrazca so bila 15,52 px — iOS Safari samodejno približa stran pri
   vsem pod 16 px in ostane približan skozi cel obrazec. */
@media(max-width:900px){
  .fi input,.fi textarea,.searchform input[type="search"]{font-size:16px}
}

/* 6. ⚠️ Oznake korakov so bile 9,5 px do 420 px — pod pragom sta ostala iPhone
   12-16 (390 px) in iPhone 11/XR (414 px), torej večina naprav v uporabi. */
@media(min-width:390px){.rail .lb{font-size:10.5px}}

/* 7. ⚠️ Oznake polj obrazca so bile 10 px. */
@media(max-width:600px){.fi label{font-size:11.5px;letter-spacing:.08em}}

/* 8. 💡 Tap tarče pod 44 px (Apple HIG). WCAG 2.5.8 AA je bil sicer izpolnjen. */
@media(max-width:900px){
  .burger,.nav-in>.btn-call{width:44px;height:44px}
}
@media(pointer:coarse){
  .nav-l a{padding:12px 15px}      /* 41,8 px pri 1024x768 — tablica ležeče, kjer je burger že skrit */
}
.f-l a{padding:11px 14px}          /* bilo 39,3 px pri vodoravnem razmiku 6 px */

/* 9. 💡 Območja pik nad cevovodom so se prekrivala (razmik 5 px, efektivna
   širina 27-37 px) — tap je včasih izbral sosednji dokument. */
.pdots{gap:8px}
.pdot::after{left:-9px;right:-9px}