/* ═══════════════════════════════════════════════════════════
   TERMINA — CGP v1.0 »Lok dneva«
   Instrument Serif · Instrument Sans · DM Mono
   mleko/noc povrsine, mrak primarna, svit poudarek. Brez senc.
   ═══════════════════════════════════════════════════════════ */

:root{
  --noc:    #171B2E;
  --mrak:   #4B3E7A;
  --mrak-d: #3A2F60;
  --svit:   #E8A05C;
  --sij:    #F7DFBE;
  --mleko:  #FBFAF8;
  --kamen:  #6E6D79;
  --kamen-d:#5B5966;
  --meja:   #E7E5EC;
  --meja2:  #E7E5EC;
  --noc-telo:var(--telo);

  --display: "Instrument Serif", Georgia, serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --num:     "DM Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--mleko);color:var(--noc);font-family:var(--body);
     font-size:var(--t-base);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
em{font-style:italic}
:focus-visible{outline:2px solid var(--mrak);outline-offset:3px;border-radius:var(--r-drobno)}
.wrap{max-width:1020px;margin:0 auto;padding:0 28px}

/* ══ BUTTONS ══ */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);
     font-size:var(--t-md);font-weight:500;padding:11px 21px;border-radius:var(--r-drobno);
     transition:border-color .2s,background .2s,color .2s,transform .2s;border:1px solid transparent;white-space:nowrap;cursor:pointer}
.btn-p{background:var(--mrak);color:var(--mleko)}
.btn-p:hover{background:var(--mrak-d)}
.btn-s{border-color:var(--meja);color:var(--noc);background:none}
.btn-s:hover{border-color:var(--noc)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
@media(prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}

/* ══ NAV ══ */
nav{position:sticky;top:0;z-index:20;background:var(--nav-bg);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--meja)}
/* Razmik 20 in ne 26: ko je glava dobila vrata v račun, je bilo do
   preloma povezav v drugo vrstico 29 px. Šest razmikov po šest pikslov je
   ravno toliko, da glava ostane ena vrstica — brez tega bi »Skupnost«
   padla pod ostale in bi bilo videti kot napaka. */
nav .wrap{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);height:76px}
nav .sp{flex:1}
.brand img{height:42px;display:block}
.lnk{font-size:var(--t-md);color:var(--kamen);transition:color .2s;white-space:nowrap}
.lnk:hover{color:var(--noc)}
@media(max-width:760px){.lnk{display:none}}
/* Samodejno stiskanje glave (script.js): nemška in francoska besedila so
   predolga za eno vrstico pri kateri koli širini, jezikov pa je 26 in jih
   CSS ne more naštevati. Ko se povezave prelomijo, najprej odpadejo sidra
   na razdelke — vsebina je en drs stran — po potrebi še Skupnost. */
nav.stisnjena .navlinks a[href^="#"]{display:none}
nav.stisnjena2 .navlinks a[href="skupnost.html"]{display:none}

/* ══ MONO LABEL ══ */
.eyebrow,.kick{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.16em;
     text-transform:uppercase;color:var(--kamen)}

/* ══ HERO ══ */
header{padding:72px 0 0;background:var(--noc);color:var(--noc-telo);overflow:hidden}
.hero-c{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-c .eyebrow{color:var(--svit);margin-bottom:22px}
.hero-c h1{color:var(--sij);max-width:17ch;margin-left:auto;margin-right:auto}
.hero-c h1 em{color:inherit;font-style:italic}
.hero-c .lede{color:var(--noc-telo);margin-left:auto;margin-right:auto;margin-bottom:30px}
.hero-c .btn-s{border-color:var(--rob);color:var(--sij)}
.hero-c .btn-s:hover{border-color:var(--sij)}
.hero-c .cta{justify-content:center}

/* ── ORBIT HERO — krogla iz delcev z napisom ── */
/* The orbiting icons have been removed: the hero is now a single quiet
   sphere of particles with the wordmark at its core. Depth is carried by the
   dust in the background and by the particles. */
.orbit-hero{position:relative;height:520px;margin-top:26px;pointer-events:none}
/* No glow around the wordmark. Depth is carried by particles, not by a
   smeared gradient — that was shadow drawn as a gradient, and on paper it
   read as a smear. */
/* Prah v ozadju je odšel z gradienti (lastnica, 30. 8. 2026): globino
   nosijo delci krogle, podlaga je mirna. */
#sphere{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:460px;height:460px}
.oh-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0}
.oh-core img{width:250px;display:block}
@media(max-width:760px){
  .orbit-hero{height:350px}
  #sphere{width:min(300px,84vw);height:min(300px,84vw)}
  .oh-core img{width:min(156px,40vw)}
}

/* booking preview card row inside #kako */
.kako-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;margin-bottom:60px}
@media(max-width:900px){.kako-grid{grid-template-columns:1fr;gap:40px}}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:46px}}
.hero .eyebrow{margin-bottom:24px}
h1{font-family:var(--display);font-weight:400;font-size:var(--t-display);
   line-height:1.13;letter-spacing:-.015em;max-width:15ch;margin-bottom:24px}
h1 em{color:inherit}
.lede{font-size:var(--t-lg);color:var(--kamen-d);max-width:45ch;margin-bottom:36px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* ── SIGNATURE CARD: predogled termina ── */
.card{background:var(--sij);padding:34px 32px 36px;border-radius:var(--r-kartica)}
.card .ttl{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.15em;
           text-transform:uppercase;color:var(--kamen);margin-bottom:22px}
.crow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
      padding:9px 0;font-size:var(--t-md)}
.crow span:first-child{color:var(--kamen-d)}
.crow .mono{font-family:var(--num);font-size:var(--t-md)}
.crule{height:1px;background:var(--meja);margin:8px 0}
.times{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.time{font-family:var(--num);font-size:var(--t-sm);color:var(--kamen-d);
      padding:7px 12px;border:1px solid var(--meja);border-radius:var(--r-drobno)}
.time.sel{color:var(--mleko);background:var(--mrak);border-color:var(--mrak)}
.time.gone{color:var(--kamen);text-decoration:line-through;opacity:.6}
.cpick{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
       padding-top:15px;margin-top:12px;border-top:1.5px solid var(--noc)}
.cpick .k{font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;
          font-weight:600;color:var(--noc)}
.cpick .v{font-family:var(--num);font-size:var(--t-xl);font-weight:500;color:var(--mrak)}
.card .cap{font-size:var(--t-sm);line-height:1.65;color:var(--kamen-d);margin-top:22px;
           padding-top:19px;border-top:1px solid var(--meja)}

/* ══ SECTIONS ══ */
section{padding:78px 0}
h2{font-family:var(--display);font-weight:400;font-size:var(--t-2xl);
   line-height:1.25;letter-spacing:-.01em;margin-bottom:15px;max-width:22ch}
h2 em{color:inherit}
.sub{color:var(--kamen-d);max-width:56ch;margin-bottom:44px}

/* arches */
.arches{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:26px}
.arch .cap{width:100%;aspect-ratio:3/3.4;background:var(--sij);
           border-radius:var(--r-oval);margin-bottom:17px;  /* lok »Loka dneva«: postavitev.css ga naredi za krog */
           display:flex;align-items:center;justify-content:center;
           font-family:var(--num);font-size:var(--t-micro);letter-spacing:.15em;
           text-transform:uppercase;color:var(--kamen);transition:background .3s}
.arch:hover .cap{background:var(--meja2)}
.arch .cap svg{width:30px;height:30px;stroke:var(--mrak);fill:none;
               stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.arch h3{font-family:var(--display);font-weight:400;font-size:var(--t-lg);margin-bottom:6px}
.arch p{font-size:var(--t-md);line-height:1.65;color:var(--kamen-d)}

/* plans / za koga */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.plan{border:1px solid var(--meja);border-radius:var(--r-drobno);padding:26px 24px;transition:border-color .25s,background .25s,color .25s,transform .25s}
.plan:hover{border-color:var(--meja2);transform:translateY(-2px)}
.plan.hi{border-color:var(--mrak)}
.plan .who{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.14em;
           text-transform:uppercase;color:var(--kamen);margin-bottom:12px}
.plan h3{font-family:var(--display);font-weight:400;font-size:var(--t-xl);margin-bottom:8px}
.plan .pdesc{font-size:var(--t-md);line-height:1.6;color:var(--kamen-d);
             padding-bottom:14px;border-bottom:1px solid var(--meja);margin-bottom:14px}
.plan ul{list-style:none}
.plan li{font-size:var(--t-md);color:var(--kamen-d);padding:6px 0 6px 18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;
                 background:var(--mrak)}
/* sand panel (limits / vision) */
.panel{background:var(--sij);border-radius:var(--r-drobno);padding:46px 42px}
@media(max-width:720px){.panel{padding:32px 24px}}
.panel h2{margin-bottom:14px}
.limit{padding:19px 0;border-bottom:1px solid var(--meja)}
.limit:last-child{border-bottom:none;padding-bottom:0}
.limit b{display:block;font-family:var(--display);font-weight:500;font-size:var(--t-base);
         margin-bottom:4px}
.limit p{font-size:var(--t-md);line-height:1.65;color:var(--kamen-d)}

/* who-band / skupnost */
.who-band{background:var(--sij);border-radius:var(--r-drobno);padding:44px 42px;
          display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start}
@media(max-width:760px){.who-band{grid-template-columns:1fr;gap:24px;padding:32px 24px}}
/* Podpis razdelka je besedni znak po CGP (.znamka iz podoba.css), ne
   ležeča različica: ležeči zapis brez verzalk in brez krožca nad I je
   bil drugačen vizualni tip znaka, česar CGP ne dovoli. Tu se nastavi
   samo velikost in črta pod njim — vse drugo nosi .znamka. */
.who-band .sig{white-space:nowrap;
               padding-bottom:11px;border-bottom:1.5px solid var(--noc)}
.who-band .sig .znamka{font-size:var(--t-xl)}
.who-band .role{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.14em;
                text-transform:uppercase;color:var(--kamen);margin-top:10px}
.who-band h2{margin-bottom:14px}
.who-band p{font-size:var(--t-md);line-height:1.75;color:var(--kamen-d);max-width:58ch;margin-bottom:14px}
.who-band p:last-child{margin-bottom:0}
.who-band b{color:var(--noc);font-weight:500}

/* Zaključni razdelek. Poravnan je LEVO kot vsi drugi razdelki strani:
   sredinski je bil edini in je bral kot tuja stran, prilepljena na konec.
   Ostane samo zrak pod uvodno povedjo, da dejanji nista prilepljeni nanjo. */
.close .sub{margin-bottom:32px;max-width:58ch}
.form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:440px;margin:0 auto}
.form input{flex:1;min-width:210px;font-family:var(--body);font-size:var(--t-md);
            padding:11px 18px;border:1px solid var(--meja);border-radius:var(--r-drobno);
            background:var(--mleko);color:var(--noc)}
.form input:focus-visible{outline:2px solid var(--mrak);outline-offset:2px}
.note{margin-top:18px;font-size:var(--t-sm);color:var(--kamen)}
.note.ok{color:var(--mrak);font-weight:500}

footer{padding:56px 0 72px;background:var(--noc);color:var(--noc-telo)}

footer .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
footer .brand img{height:96px;margin-bottom:8px}
footer a:hover{color:var(--noc)}

/* reveal
   Skrivanje visi na razredu .js, ki ga postavi pwa.js. Prej je bilo
   opacity:0 brezpogojno: če se script.js iz katerega koli razloga ni
   izvedel — izklopljen JS, napaka v datoteki, blokiran prenos — je
   naslovnica ostala prazna od »Kako deluje« navzdol. Vsebina mora biti
   vidna privzeto in se skriti šele, ko jo ima kdo pokazati nazaj.
   Pot trajanja: 0,9 s je bilo dolgo za prihod, ki spremlja branje. */
.js .reveal{opacity:0;transform:translateY(12px);
        transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ══ INTRO — lively gooey clay dot forms on open (once per session) ══ */
/* podlago in zameglitev nosi pravilo NADSLOJI v podoba.css */
#intro{position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;transition:opacity .6s ease}
#intro.gone{opacity:0;pointer-events:none}
#intro .ilogo{width:min(64vw,380px);display:block}

/* ── Orbit scene — svit sonce na horizontu s krozecimi kategorijami ── */
/* Višina mora požreti POL zunanjega obroča in še ploščico na njem:
   640/2 + ~16 px ploščice + zrak — pri 300 px je vrh obroča z Nego psov
   odrezan (fotografija lastnice, 30. 8. 2026). */
.orbit-scene{position:relative;height:352px;overflow:hidden;margin:0 -28px 60px;pointer-events:none}
.oring{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);
       border:1px solid var(--meja);border-radius:50%;z-index:1}
.oring.o1{width:340px;height:340px;--d:26s}
.oring.o2{width:490px;height:490px;--d:36s}
.oring.o3{width:640px;height:640px;--d:48s}
.oarm{position:absolute;top:0;left:50%;width:0;height:50%;transform-origin:bottom center;
      animation:orb-cw var(--d) linear infinite}
.oring.o2 .oarm{animation-name:orb-ccw}
.ochip{position:absolute;top:0;left:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
       animation:chip-cw var(--d) linear infinite;
       font-family:var(--num);font-size:var(--t-xs);letter-spacing:.04em;white-space:nowrap;
       padding:7px 14px;border:1px solid var(--meja);border-radius:999px;
       background:var(--mleko);color:var(--kamen)}
.oring.o2 .ochip{animation-name:chip-ccw}
.ochip.hl{border-color:var(--mrak);color:var(--mrak)}
/* Sonce je ena ploskev. Rastrske pike po njem so bile videti kot
   vzorec tiska ali kot napaka zaslona, ne kot svetloba — odstranjene
   22. 8. 2026 in se ne vračajo. */
.ocore{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);
       width:230px;height:230px;border-radius:50%;z-index:2;background:var(--svit)}
@keyframes orb-cw{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a) + 360deg))}}
@keyframes orb-ccw{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a) - 360deg))}}
/* Ploščica odvrti ročico IN nagib ravnine, sicer bi ležala v ekliptiki
   in bi se gledalcu kazala od roba. Nagib ima nadomestek 0°, ker isti
   sličici uporablja tudi .orbit-scene, ki ravnine ne nagiba — brez
   nadomestka bi bil calc() neveljaven in ploščice bi odletele. */
@keyframes chip-cw{
  from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) rotateX(calc(-1 * var(--nagib,0deg)))}
  to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a) - 360deg)) rotateX(calc(-1 * var(--nagib,0deg)))}}
@keyframes chip-ccw{
  from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) rotateX(calc(-1 * var(--nagib,0deg)))}
  to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a) + 360deg)) rotateX(calc(-1 * var(--nagib,0deg)))}}
@media(max-width:640px){
  .orbit-scene{height:272px;margin-bottom:44px}
  .oring.o1{width:250px;height:250px}
  .oring.o2{width:365px;height:365px}
  .oring.o3{width:480px;height:480px}
  .ochip{font-size:var(--t-micro);padding:5px 11px}
  .ocore{width:160px;height:160px}
}
@media(prefers-reduced-motion:reduce){
  .oarm{animation:none;transform:rotate(var(--a))}
  .ochip{animation:none;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
}

/* ── PLANI (mesečni/letni) ── */
#plani .head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.bill-toggle{display:inline-flex;border:1px solid var(--meja);border-radius:var(--r-drobno);overflow:hidden}
.bill-toggle button{font-family:var(--num);font-size:var(--t-sm);letter-spacing:.06em;padding:10px 18px;
  background:none;border:none;cursor:pointer;color:var(--kamen-d);transition:border-color .15s,background .15s,color .15s,transform .15s}
.bill-toggle button.on{background:var(--mrak);color:var(--mleko)}
.bill-note{font-family:var(--num);font-size:var(--t-xs);color:var(--kamen);margin-top:10px}
.plans3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:900px){.plans3{grid-template-columns:1fr}}
.pplan{transition:border-color .2s,transform .2s;border:1px solid var(--meja);border-radius:var(--r-kartica);padding:30px 28px;background:var(--plosca);
  display:flex;flex-direction:column;transition:border-color .2s,transform .25s}
.pplan:hover{border-color:var(--mrak);transform:translateY(-4px)}
/* izbran paket: kartica se izreče z medeninastim robom, gumb potemni
   (razrede preklaplja script.js) */
.pplan{cursor:pointer}
.pplan.izbran{border-color:var(--mrak)}
.pplan.hi{background:var(--noc);border-color:var(--noc);color:var(--noc-telo)}
.pplan .pk{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--kamen);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.pplan.hi .pk{color:var(--svit)}
.pplan .badge{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.08em;padding:3px 9px;border-radius:var(--r-drobno);background:var(--svit);color:var(--noc)}
.pplan h3{font-family:var(--display);font-weight:400;font-size:var(--t-xl);margin-bottom:6px;color:var(--noc)}
.pplan.hi h3{color:var(--sij)}
.pplan .price{font-family:var(--num);font-size:var(--t-3xl);color:var(--mrak);margin:14px 0 2px}
.pplan.hi .price{color:var(--svit)}
.pplan .price small{font-size:var(--t-md);color:var(--kamen)}
.pplan .pdesc{font-size:var(--t-md);color:var(--kamen-d);margin-bottom:18px;min-height:2.6em}
.pplan.hi .pdesc{color:var(--noc-telo)}
.pplan ul{list-style:none;margin:0 0 24px;flex:1}
.pplan li{padding:8px 0 8px 26px;font-size:var(--t-md);border-top:1px solid var(--meja);position:relative}
.pplan.hi li{border-top-color:var(--rob-2)}
.pplan li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--svit)}
/* Gumb cenika sme v dve vrstici. .btn ima sicer nowrap, a najdaljši
   napis (»Povej mi, ko bo Začetek na voljo«) je pri 320 px širši od
   kartice in je celo stran raztezal za 27 px v vodoravno drsenje.
   Napisi prihajajo iz 24 jezikov — širine ni mogoče obljubiti. */
.pplan .btn{justify-content:center;white-space:normal;text-align:center;
  text-wrap:balance}
.pplan.hi .btn-s{border-color:var(--rob);color:var(--sij)}
.plan-foot{font-size:var(--t-sm);color:var(--kamen);margin-top:22px;max-width:64ch}
/* Drobni tisk v alinejah: isti jezik kot alineje v karticah paketov
   (karamelna pika, tanka črta), le drobnejši. Sestavi jih script.js. */
.plan-alineje{list-style:none;margin:18px 0 0;padding:0;max-width:560px}
.plan-alineje li{position:relative;padding:8px 0 8px 24px;font-size:var(--t-sm);
  border-top:1px solid var(--meja);line-height:1.55}
.plan-alineje li:first-child{border-top:none}
.plan-alineje li::before{content:"";position:absolute;left:2px;top:16px;width:7px;height:7px;
  border-radius:50%;background:var(--svit)}
ul.plan-foot{margin-top:14px}

/* ── Sestavi po meri ─────────────────────────────────────────────────────
   Kalkulator pod paketi: polja levo, izid desno. Izid NI četrta kartica
   paketa — je odgovor na vprašanje, zato stoji na tihi ploskvi in kaže
   ime enega od treh obstoječih paketov, nikoli svojega. */
.sestavi{border:1px solid var(--meja);border-radius:var(--r-kartica);
  padding:30px 28px;margin-top:34px;background:var(--plosca)}
.sest-glava h3{font-family:var(--display);font-weight:400;font-size:var(--t-xl);
  color:var(--slonovina);margin-bottom:4px}
.sest-glava .sub{margin-bottom:22px}
.sest-telo{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start}
@media(max-width:760px){.sest-telo{grid-template-columns:1fr}}
.sest-vrsta{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px 0;border-bottom:1px solid var(--meja)}
.sest-vrsta label{font-size:var(--t-md);color:var(--telo)}
.sest-stevec{display:flex;align-items:center;gap:2px}
.sest-stevec button{width:44px;height:44px;border:1px solid var(--meja);
  background:none;border-radius:var(--r-drobno);cursor:pointer;
  font-family:var(--num);font-size:var(--t-lg);color:var(--mrak);line-height:1;
  transition:border-color .15s,background .15s}
.sest-stevec button:hover{border-color:var(--mrak)}
.sest-stevec input{width:74px;height:44px;text-align:center;border:none;
  background:none;font-family:var(--num);font-size:var(--t-lg);color:var(--slonovina);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.sest-stevec input::-webkit-outer-spin-button,
.sest-stevec input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Kljukico riše skupno pravilo v podoba.css (terminin kroj povsod) —
   tu ostane samo postavitev vrstice. */
.sest-kljuk{display:flex;align-items:center;gap:11px;padding:12px 0;
  cursor:pointer;font-size:var(--t-md);color:var(--telo);min-height:44px}
.sest-izid{background:var(--tan-mehki);border-radius:var(--r-kartica);
  padding:24px 26px;display:flex;flex-direction:column;gap:4px}
.sest-pk{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--kamen)}
.sest-paket{font-family:var(--display);font-weight:400;font-size:var(--t-xl);color:var(--slonovina)}
.sest-cena{font-family:var(--num);font-size:var(--t-3xl);color:var(--mrak);margin:2px 0 8px}
.sest-cena small{font-size:var(--t-md);color:var(--kamen)}
.sest-razcl{list-style:none;margin:0 0 18px;padding:0;flex:1}
.sest-razcl li{display:flex;justify-content:space-between;gap:14px;
  font-size:var(--t-sm);color:var(--telo);padding:6px 0;border-top:1px solid var(--meja)}
.sest-razcl li .zn{font-family:var(--num);color:var(--slonovina);font-variant-numeric:tabular-nums;white-space:nowrap}
.sest-izid .btn{justify-content:center}
.sest-vec{font-size:var(--t-sm);color:var(--kamen);margin-top:20px}
.sest-vec a{color:var(--medenina);text-decoration:underline;text-underline-offset:3px}
.sest-letno{font-size:var(--t-sm);color:var(--kamen);margin:2px 0 6px}
.card .demo-vrata{margin-top:14px;justify-content:center}

/* interactive booking card */
.card .time{cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s}
.card .time:not(.gone):hover{border-color:var(--mrak);color:var(--mrak)}
/* Izbrana ura nima več polnila (samo obroč), zato svetlo besedilo na
   lebdenju ne sme več nastopiti — barvo drži podoba.css. */
.card .time.gone{cursor:default}
.cpick .v{transition:border-color .2s,background .2s,color .2s,transform .2s}
.cpick .v.flash{color:var(--svit)}

/* staggered reveals
   Zamik je pripadal 0,9-sekundnemu prehodu; ob 0,5 s je zadnji korak
   čakal 0,77 s, preden se je začel risati. Zaporedje naj se prebere kot
   zaporedje, ne kot nalaganje. */
.arches .arch:nth-child(2),.plans .plan:nth-child(2),.plans3 .pplan:nth-child(2){transition-delay:.06s}
.arches .arch:nth-child(3),.plans .plan:nth-child(3),.plans3 .pplan:nth-child(3){transition-delay:.12s}
.arches .arch:nth-child(4){transition-delay:.27s}

/* mobile nav: tighter so logo + CTA + language fit */
@media(max-width:760px){
  nav .wrap{gap:10px;height:64px}
  .brand img{height:32px}
  nav .btn{font-size:var(--t-sm);padding:8px 13px}
  nav .jezik-pilula{font-size:var(--t-micro);padding:0 10px}
}

/* ── zloženi meni na telefonu (zahteva lastnice, 29. 8. 2026) ─────────
   Povezave niso več dve vrstici pod glavo: v vrstici ostanejo znak,
   glavni gumb, jezik in gumb s tremi pikami; povezave (s Prijavo vred)
   se odprejo kot plošča pod glavo. `body nav` zato, ker se postavitev.css
   naloži ZA to datoteko in bi pravila z isto težo sicer povozil. */
.meni-pika{display:none}
@media(max-width:760px){
  body nav .wrap{flex-wrap:nowrap;height:64px;padding-top:0;padding-bottom:0;row-gap:0}
  .meni-pika{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;border-radius:50%;border:1px solid var(--rob-k);
    background:none;cursor:pointer;color:var(--telo);padding:0}
  .meni-pika .pike{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;
    box-shadow:-7px 0 0 currentColor,7px 0 0 currentColor}
  body nav .navlinks{display:none}
  nav.meni-odprt .navlinks{position:absolute;top:100%;left:0;right:0;z-index:40;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:6px 16px 10px;order:0;width:auto;
    background:var(--noc);border-top:1px solid var(--meja);
    border-bottom:1px solid var(--meja)}
  nav.meni-odprt .navlinks a{justify-content:flex-start;min-height:44px;font-size:var(--t-md)}
  /* jezikovna pilula živi na telefonu v meniju (preseli jo script.js) */
  nav.meni-odprt .navlinks [data-lang-slot]{margin:10px 0 2px}
}

/* ══ COUNTRY MODAL — prvi obisk, temna scena z delci ══ */
#country-modal[hidden]{display:none}
/* podlago in zameglitev nosi pravilo NADSLOJI v podoba.css */
#country-modal{position:fixed;inset:0;z-index:60;overflow:auto;
  animation:cm-in .5s ease both}
@keyframes cm-in{from{opacity:0}to{opacity:1}}
.cm-scene{position:relative;min-height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:54px 22px 40px;overflow:hidden}
.cm-inner{position:relative;z-index:1;width:100%;max-width:760px;display:flex;flex-direction:column;
  align-items:center;text-align:center}
.cm-sig{width:52px;height:52px;border-radius:50%;background:var(--tan-mehki);
  border:1px solid var(--rob-2);display:grid;place-items:center;margin-bottom:14px}
.cm-sig .znak-slika{width:30px;height:30px;display:block}
.cm-kick{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--svit);margin-bottom:8px}
#country-modal h3{font-family:var(--display);font-weight:400;font-size:var(--t-2xl);
  letter-spacing:-.015em;color:var(--sij);margin-bottom:6px}
.cm-sub{font-size:var(--t-md);color:var(--telo);max-width:52ch}
.cm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px;width:100%}
.cm-c{display:flex;gap:10px;align-items:baseline;padding:12px 14px;position:relative;
  border:1px solid var(--rob-2);border-radius:var(--r-drobno);background:var(--papir-2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;
  font-family:var(--body);font-size:var(--t-md);color:var(--mleko);text-align:left;
  transition:border-color .18s,background .18s;
  opacity:0;transform:translateY(14px);
  animation:cm-chip .5s cubic-bezier(.2,.6,.3,1) forwards;animation-delay:calc(var(--i)*26ms)}
@keyframes cm-chip{to{opacity:1;transform:none}}
.cm-c:hover{border-color:var(--sij);background:var(--papir-2)}
.cm-c .cc{font-family:var(--num);font-size:var(--t-micro);color:var(--svit);letter-spacing:.06em;flex:none}
/* Predlagano državo pove rob in topla podlaga — brez značke čez vogal:
   krožec na -10px je na telefonu, kjer kartica seže do roba, odrezal
   zaslon in izgledal pokvarjen (fotografija lastnice, 29. 8.). */
.cm-c.hint{border-color:var(--svit);background:var(--tan-mehki)}
.cm-skip{display:block;margin-top:26px;background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:var(--t-sm);color:var(--telo-2)}
.cm-skip:hover{color:var(--sij)}
@media(max-width:640px){.cm-grid{grid-template-columns:repeat(2,1fr)}.cm-scene{padding:40px 16px 32px}}
@media(prefers-reduced-motion:reduce){
  #country-modal{animation:none}
  .cm-c{animation:none;opacity:1;transform:none}
}

/* mikrointerakcije planov (a11y pass) */
.pplan:hover{border-color:var(--mrak);transform:translateY(-3px)}
.pplan.hi:hover{border-color:var(--svit)}
@media(prefers-reduced-motion:reduce){.pplan:hover{transform:none}}
/* preskocna povezava za tipkovnico */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--noc);color:var(--sij);
  padding:10px 18px;border-radius:0 0 var(--r-drobno) 0;font-size:var(--t-md)}
.skip:focus{left:0}
