/* =====================================================================
   Ordine.Studio — slog strani
   ---------------------------------------------------------------------
   Kar se najpogosteje spreminja, je v bloku :root takoj spodaj:

     --uvod-vrh / --uvod-dno   podlaga temnega uvoda (preliv od zgoraj navzdol)
     --uvod-zar                svetel žarek na vrhu uvoda; nižja zadnja
                               številka (npr. .35) = manj svetlobe
     --zlato / --zlato-svetlo  barva znamke, gumbov in poudarkov
     --crtica / --crtica-temno barva milimetrskih črtic na svetlem in temnem
     --antracit, --antracit-2  temni pas sredi strani in okvir za prijavo
     --zelena / --modra / --bordo   tri faze programa — teh ne spreminjaj

   Pisave so v pisave/pisave.css.
   ===================================================================== */

/* ---------- barve ---------- */
:root{
  --paper:#BDBCB9;           /* podlaga strani — 15 % temnejša od prvotne #F7F6F2 */
  --surface:#D8D7D4;         /* kartice in okvirji, svetlejši od podlage */
  --surface-2:#CFCECA;
  --ink:#353535;
  --ink-2:#3D4947;
  --ink-3:#556260;
  --rule:#ABA9A3;
  --rule-strong:#94928B;

  /* prestižna os: antracit in zlato */
  --antracit:#353535;        /* osnovni temni ton strani */
  --antracit-rgb:53,53,53;   /* isti ton v RGB — za mehke prelive */
  --antracit-2:#3E4145;
  --antracit-3:#4A4D51;
  --zlato:#C9A34E;          /* samo na temni podlagi */
  --zlato-svetlo:#E3C57F;   /* samo na temni podlagi */
  --zlato-tekst:#5C4715;    /* zlato za besedilo in črte na svetlem */
  --zlato-soft:#E3D9C2;

  /* milimetrsko ravnilo — barva črtic */
  --crtica:rgba(201,163,78,.72);
  --crtica-temno:rgba(227,197,127,.55);

  /* uvodni preliv: svetlost na vrhu in podlaga */
  --uvod-zar:rgba(150,158,166,.42);
  --uvod-vrh:#3F4348;
  --uvod-vrh-rgb:63,67,72;
  --uvod-dno:#353535;

  /* tri faze programa */
  --zelena:#2F7D57;
  --modra:#2A5FA8;
  --bordo:#8E2F3E;
  --zelena-soft:#B7C7BE;
  --modra-soft:#B8C3D3;
  --bordo-soft:#CEBABF;

  --shadow:0 1px 2px rgba(23,33,31,.05), 0 10px 28px -14px rgba(23,33,31,.20);
  --f-display:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --pad:clamp(1.25rem,4vw,3rem);
  --measure:64ch;

  /* Stran ima svojo, načrtovano paleto: temen uvod in svetel del pod njim.
     Samodejnega temnega načina namenoma NI — sicer telefon v temnem načinu
     vse skupaj potemni v eno samo sivino in zasnova izgine.
     color-scheme:light poskrbi, da so tudi polja obrazca svetla. */
  color-scheme:light;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--zlato);outline-offset:3px;border-radius:2px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--pad);}
.prose{max-width:var(--measure);}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.021em;text-wrap:balance;margin:0;line-height:1.12;}
h1{font-size:clamp(2rem,4.8vw,3.3rem);}
h2{font-size:clamp(1.45rem,3vw,2.05rem);}
h3{font-size:1.02rem;letter-spacing:-.008em;}
p{margin:0;}
strong,b{font-weight:600;}
.eyebrow{font-family:var(--f-ui);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);}
.ui{font-family:var(--f-ui);}
.num{font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-2);font-size:.96rem;}
section{padding-block:clamp(2.75rem,6.5vw,4.75rem);}
.stack{display:flex;flex-direction:column;}
.g-8{gap:.5rem}.g-12{gap:.75rem}.g-16{gap:1rem}.g-24{gap:1.5rem}.g-32{gap:2rem}

.ticks{
  height:14px;
  background:
    repeating-linear-gradient(90deg,var(--crtica) 0 1px,transparent 1px 8px) bottom left/100% 5px no-repeat,
    repeating-linear-gradient(90deg,var(--crtica) 0 1px,transparent 1px 80px) bottom left/100% 12px no-repeat;
}
.ticks.na-temnem{--crtica:var(--crtica-temno);}
.ticks.tanko{height:9px;background-size:100% 4px,100% 8px;}

/* mehak prehod med temnim in svetlim delom strani */
.preliv{height:clamp(110px,13vw,190px);background-color:var(--paper);}
/* Razdelek tik za prelivom nima svojega zgornjega odmika — preliv je njegov odmik.
   Brez tega nastane prazen pas, v katerem najsvetlejši del preliva obvisi sam zase. */
.preliv + main > .wrap:first-of-type > section{padding-block-start:1.6rem;}
.preliv + .pas > .wrap > section{padding-block-start:1.2rem;}
.preliv + .wrap > section{padding-block-start:1.6rem;}
.preliv.v-temno{
  /* prosojnost narašča linearno — tako je sprememba svetlosti za oko enakomerna.
     Blažilna krivulja tu ne pomaga: svetli del zadrži predolgo in nato pade prehitro. */
  background-image:linear-gradient(180deg,
    rgba(var(--uvod-vrh-rgb),0) 0%,
    rgba(var(--uvod-vrh-rgb),1) 100%);
}
.preliv.v-svetlo{
  background-image:linear-gradient(180deg,
    rgba(var(--antracit-rgb),1) 0%,
    rgba(var(--antracit-rgb),0) 100%);
}

/* ================= TEMNI UVOD: antracit in zlato ================= */
.top{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--uvod-zar) 0%, transparent 62%),
    linear-gradient(180deg,var(--uvod-vrh) 0%,var(--uvod-dno) 100%);
  color:#F1F2F2;
}

.masthead{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding-block:1.4rem;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;}
.brand svg{width:30px;height:30px;flex:none;}
.brand .name{font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;}
.brand .name span{color:var(--zlato-svetlo);font-weight:500;}
.claim{font-family:var(--f-ui);font-size:.78rem;color:rgba(241,242,242,.68);}
.claim i{font-style:italic;color:rgba(241,242,242,.48);}

/* shematska risba na pol zgrajene hiše — okras v ozadju uvoda */
.top > .wrap, .top > .ticks{position:relative; z-index:1;}
.hisa{
  position:absolute; z-index:0; pointer-events:none;
  top:clamp(6.5rem,12vw,9.5rem); right:clamp(1rem,2.6vw,3rem);
  width:clamp(275px,28vw,420px); height:auto;
}
.hisa path{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.st-tla{stroke:var(--zlato-svetlo); stroke-opacity:.26; stroke-width:1.1;}
.st-zid{stroke:#F1F2F2; stroke-opacity:.34; stroke-width:1.8;}
.st-okvir{stroke:#F1F2F2; stroke-opacity:.18; stroke-width:1.2;}
.st-streha{stroke:var(--zlato-svetlo); stroke-opacity:.42; stroke-width:1.5;}
.st-odprt{stroke:#F1F2F2; stroke-opacity:.26; stroke-width:1.2;}
.st-kota{stroke:var(--zlato-svetlo); stroke-opacity:.55; stroke-width:1;}
.st-oprema{stroke:#8FD8B0; stroke-opacity:.42; stroke-width:1.3;}
@media(max-width:1000px){.hisa{display:none;}}

.hero{padding-block:clamp(2.5rem,6vw,4.25rem) clamp(2.5rem,6vw,4.25rem);}
.hero h1{
  font-family:var(--f-body);
  font-weight:600;
  font-size:clamp(1.55rem,3.1vw,2.5rem);
  letter-spacing:-.006em;
  line-height:1.2;
  color:#FCFBF9;
  max-width:34ch;
}
.hero h1 em{font-style:normal;font-weight:400;color:var(--zlato-svetlo);}
@media(max-width:700px){.prelom{display:none;}}
/* na ozkih zaslonih se nagovor zaključi pri vejici */
@media(max-width:820px){.kicker .rep{display:none;}}
.hero-lede{font-size:clamp(1.05rem,2vw,1.22rem);color:rgba(241,242,242,.86);max-width:56ch;}
.hero-lede b{color:#FCFBF9;font-weight:600;}
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-ui);
  font-size:.71rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--zlato-svetlo);border:1px solid rgba(201,163,78,.45);
  padding:.36rem .8rem;border-radius:999px;width:fit-content;
}
.znacke{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0;}
.znacka{
  font-family:var(--f-ui);font-size:.79rem;font-weight:500;color:rgba(241,242,242,.78);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  border-radius:999px;padding:.36rem .85rem;
}
.znacka b{color:#FCFBF9;font-weight:600;}

.btn{
  font-family:var(--f-display);font-weight:600;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:3px;text-decoration:none;border:1px solid transparent;
  display:inline-block;cursor:pointer;
}
.btn-zlat{background:var(--zlato);color:#23272B;border-color:var(--zlato);}
.btn-zlat:hover{background:var(--zlato-svetlo);border-color:var(--zlato-svetlo);}
.btn-obris{border-color:rgba(255,255,255,.28);color:#F1F2F2;background:transparent;}
.btn-obris:hover{border-color:var(--zlato-svetlo);color:var(--zlato-svetlo);}
.btn-temn{background:var(--antracit);color:var(--zlato-svetlo);border-color:var(--antracit);}
.btn-temn:hover{background:var(--antracit-2);border-color:var(--antracit-2);}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;}
.cta-note{font-family:var(--f-ui);font-size:.78rem;color:rgba(241,242,242,.62);}

/* prikaz programa v temnem okvirju */
.frame{
  background:#353535;border:1px solid rgba(255,255,255,.13);border-radius:5px;
  box-shadow:0 26px 55px -28px rgba(0,0,0,.55);overflow:hidden;margin:0;
}
.frame-bar{
  display:flex;align-items:center;gap:.55rem;padding:.6rem .85rem;
  border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);
  font-family:var(--f-ui);font-size:.74rem;color:rgba(241,242,242,.55);
}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);flex:none;}
.shot{padding:clamp(.85rem,2vw,1.35rem);display:grid;gap:.5rem;}
.row{
  display:grid;grid-template-columns:1.7fr .95fr .6fr .85fr;gap:.7rem;align-items:center;
  padding:.58rem .75rem;border:1px solid rgba(255,255,255,.09);border-left:3px solid rgba(255,255,255,.22);
  border-radius:3px;background:rgba(0,0,0,.13);
  font-family:var(--f-ui);font-size:.78rem;color:rgba(241,242,242,.66);
}
.row.head{background:transparent;border-color:transparent;color:rgba(241,242,242,.44);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding-block:.15rem;}
.row .name{font-family:var(--f-body);font-size:.94rem;color:#EDEEEE;}
.row.f1{border-left-color:#4FA97B;}
.row.f2{border-left-color:#5E93DC;}
.row.f3{border-left-color:#C8697A;}
.pill{font-family:var(--f-ui);font-size:.68rem;font-weight:500;padding:.17rem .5rem;border-radius:2px;white-space:nowrap;width:fit-content;}
.pill.a{background:rgba(79,169,123,.22);color:#8FD8B0;}
.pill.b{background:rgba(94,147,220,.22);color:#9CC2F2;}
.pill.c{background:rgba(200,105,122,.22);color:#EBA0AE;}
.shot-cap{font-family:var(--f-ui);font-size:.72rem;color:rgba(241,242,242,.46);padding:0 .9rem .9rem;line-height:1.55;}
@media(max-width:560px){
  .row{grid-template-columns:1fr auto;gap:.3rem .7rem;}
  .row.head{display:none;}
  .row span:nth-child(2),.row span:nth-child(3){font-size:.72rem;color:rgba(241,242,242,.48);}
}

/* ================= svetli del ================= */
.two{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3rem);}
@media(min-width:820px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;}}
.lead-col{max-width:42ch;}

/* komu je namenjen */
.komu{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden;}
@media(min-width:700px){.komu{grid-template-columns:1fr 1fr;}}
.komu > div{background:var(--surface);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;}
.komu .st{font-family:var(--f-ui);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--zlato-tekst);}
.komu p{font-size:.93rem;color:var(--ink-2);}
.komu .del{
  font-family:var(--f-ui);font-size:.74rem;color:var(--ink-3);
  border-top:1px solid var(--rule);padding-top:.6rem;margin-top:.25rem;
}

/* kaj program ima */
.ima{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden;}
@media(min-width:620px){.ima{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.ima{grid-template-columns:repeat(3,1fr);}}
.ima > div{background:var(--surface);padding:1.25rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;}
.ima h3{font-size:.97rem;}
.ima p{font-size:.88rem;color:var(--ink-2);}
.ima .z{font-family:var(--f-ui);font-size:.75rem;font-weight:700;color:var(--zlato-tekst);letter-spacing:.06em;}

/* tri faze */
.faze{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden;}
@media(min-width:760px){.faze{grid-template-columns:repeat(3,1fr);}}
.faza{background:var(--surface);padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;border-top:3px solid var(--rule-strong);}
.faza:nth-child(1){border-top-color:var(--zelena);}
.faza:nth-child(2){border-top-color:var(--modra);}
.faza:nth-child(3){border-top-color:var(--bordo);}
.faza .st{font-family:var(--f-ui);font-size:.7rem;font-weight:700;letter-spacing:.12em;}
.faza:nth-child(1) .st{color:var(--zelena);}
.faza:nth-child(2) .st{color:var(--modra);}
.faza:nth-child(3) .st{color:var(--bordo);}
.faza p{font-size:.93rem;color:var(--ink-2);}

/* prej / zdaj */
.swap{list-style:none;padding:0;margin:0;display:grid;gap:0;}
.swap li{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--rule);}
.swap li:first-child{border-top:1px solid var(--rule);}
.swap .was{color:var(--ink-3);}
.swap .arrow{font-family:var(--f-ui);color:var(--zlato-tekst);font-size:.85rem;}
.swap .now{font-weight:600;}
@media(max-width:560px){.swap li{grid-template-columns:1fr;gap:.15rem;}.swap .arrow{display:none;}}

/* prednosti */
.args{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:a;}
.args li{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;align-items:start;padding:1.15rem 0;border-bottom:1px solid var(--rule);}
.args li:first-child{border-top:1px solid var(--rule);}
.args li::before{counter-increment:a;content:counter(a,decimal-leading-zero);font-family:var(--f-ui);font-size:.76rem;font-weight:700;color:var(--zlato-tekst);padding-top:.3rem;}
.args h3{margin-bottom:.18rem;}
.args p{color:var(--ink-2);font-size:.94rem;}

/* temna poudarjena vrstica sredi strani */
.pas{background:var(--antracit);color:#F1F2F2;}
.pas section{padding-block:clamp(2rem,5vw,3.5rem);}
.pas h2{color:#FCFBF9;max-width:22ch;}
.pas p{color:rgba(241,242,242,.82);font-size:.98rem;}
.pas .eyebrow{color:var(--zlato-svetlo);}

/* pogosta vprašanja */
.faq{border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 0;
  font-family:var(--f-display);font-weight:600;font-size:1rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--f-ui);color:var(--zlato-tekst);font-weight:500;}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 0 1.15rem;color:var(--ink-2);font-size:.95rem;max-width:var(--measure);}

/* prijava */
.news{
  background:
    radial-gradient(110% 85% at 50% -25%, var(--uvod-zar) 0%, transparent 60%),
    linear-gradient(180deg,var(--uvod-vrh) 0%,var(--antracit) 100%);
  color:#F1F2F2;border-radius:6px;
  border:1px solid rgba(201,163,78,.3);padding:clamp(1.5rem,3.5vw,2.5rem);
}
.news h2{color:#FCFBF9;}
.news .eyebrow{color:var(--zlato-svetlo);}
.news .muted{color:rgba(241,242,242,.80);}
.news form{display:grid;gap:.9rem;max-width:34rem;margin-top:1.2rem;}
.news input[type=email]{
  font-family:var(--f-ui);font-size:.92rem;padding:.78rem .85rem;
  border:1px solid rgba(255,255,255,.2);border-radius:3px;
  background:rgba(255,255,255,.05);color:#FCFBF9;width:100%;
}
.news input[type=email]::placeholder{color:rgba(241,242,242,.46);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.consent{display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem;align-items:start;font-size:.86rem;color:rgba(241,242,242,.80);}
.consent input{margin-top:.3rem;accent-color:var(--zlato);}
.news .fine{font-family:var(--f-ui);font-size:.74rem;color:rgba(241,242,242,.5);line-height:1.6;}
.msg{border-radius:3px;padding:.75rem .85rem;font-size:.9rem;}
.msg.ok{border:1px solid var(--zlato);background:rgba(201,163,78,.12);color:#FCFBF9;}
.msg.err{border:1px solid #C8697A;background:rgba(200,105,122,.14);color:#FCFBF9;}

/* stik in noga */
.cards{display:grid;gap:1rem;}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr;}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1.4rem 1.3rem;display:grid;gap:.5rem;align-content:start;}
.card p{font-size:.93rem;color:var(--ink-2);}
.card a{color:var(--zlato-tekst);font-weight:600;}
footer{border-top:1px solid var(--rule);padding-block:2rem 3rem;font-family:var(--f-ui);font-size:.76rem;color:var(--ink-3);line-height:1.7;}

/* ---------- film (10-sekundna predstavitev) ---------- */
.film{
  position:relative;margin:0;
  border:1px solid var(--rule-strong);border-radius:5px;
  background:var(--antracit);overflow:hidden;
  box-shadow:0 26px 55px -30px rgba(0,0,0,.5);
}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--antracit);}
.film-cap{
  font-family:var(--f-ui);font-size:.72rem;line-height:1.55;
  color:rgba(241,242,242,.5);padding:.7rem .9rem .8rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.film-zvok{
  position:absolute;right:.7rem;top:.7rem;
  font-family:var(--f-ui);font-size:.7rem;font-weight:600;letter-spacing:.02em;
  color:#F1F2F2;background:rgba(53,53,53,.62);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:.33rem .8rem;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s ease,border-color .18s ease;
}
.film-zvok:hover{background:rgba(53,53,53,.8);border-color:var(--zlato);}
.film-zvok[aria-pressed="true"]{border-color:var(--zlato);color:var(--zlato-svetlo);}
@media(max-width:520px){.film-zvok{right:.5rem;top:.5rem;font-size:.66rem;padding:.28rem .66rem;}}

/* Ko brskalnik zavrne zvok, gumb pove, da zvok čaka na klik. */
.film-zvok.vabi{background:var(--zlato);color:#2A2113;border-color:var(--zlato);}
.film-zvok.vabi:hover{background:var(--zlato-svetlo);}

/* ---------- preklopnik jezikov ---------- */
.jeziki{
  display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;
  font-family:var(--f-ui);font-size:.74rem;font-weight:500;
}
.jeziki a,.jeziki span{
  color:rgba(241,242,242,.55);text-decoration:none;
  padding:.2rem .5rem;border-radius:3px;line-height:1.4;
}
.jeziki a:hover{color:var(--zlato-svetlo);background:rgba(255,255,255,.06);}
.jeziki [aria-current="true"]{color:#F1F2F2;background:rgba(255,255,255,.09);cursor:default;}
@media(max-width:560px){.jeziki{font-size:.7rem;}}