/* FAB VOICE - landing V7, varianta B3 (= B2 + Ema, zelen Emilio iz igre MOS, liquid glass logo v telefonu, cenik V3,
noga 3 stolpci, pogoji/zasebnost, globlji oder, dih/govor bitij, IO razkritja; 15. 9. 2026)
Crn oder #07070F, ZIVO ozadje: tri zamegljene NEVTRALNE svetlobne lise (#DDE4F2, opacity .07/.045/.025), ki se
z drsenjem po odsekih premikajo (body[data-tone] menja polozaj, ne barve). Barve znamke ostanejo SAMO na izdelku
(avatarja, telefon, gumb, gradient enkrat v heroju).
Motion: JS zapise --p (prihod 0..1) in --q (odhod 0..1) na vsak [data-motion]; CSS iz tega racuna
PREUREDITEV predmetov (translate/rotate/scale/letter-spacing), ne le opacity. V #kaj se izrezi razprejo iz kupa
z animation-timeline:view() (rAF --p je rezerva za brskalnike brez podpore).
Brez JS ali ob prefers-reduced-motion = koncno stanje, lise staticne.
B4: lise dobijo barvo bitij po odsekih (Ema vijolicna, Emilio zelena; --c1..--c3 na body[data-tone]), finejsi sum,
vinjeta s tlemi in stropom, 2x pocasnejsi drift - glej blok "B4 ozadje". */
@font-face{font-family:"Sora";font-style:normal;font-weight:300 800;font-display:swap;
src:url("assets/fonts/sora-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:300 800;font-display:swap;
src:url("assets/fonts/sora-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* 126 popravek 1: poenoten crn oder in nevtralne barve (brez rjave podlage) */
:root{
color-scheme:dark; /* C5-A landing-11: temni drsniki in kontrole (Win/Linux) */
--bg:#07070F;
--bg-warm:#0B0A10;
--bg-stone:#11111B;
--bg-violet:#0C0B16;
--bg-cold:#080C14;
--bg-deep:#04040A;
--s1:#14141C;
--s2:#1B1B25;
--txt:#EAF0FF;
--mut:#B8BED0;
--line:rgba(234,240,255,.1);
--acc:#2E8CFF;
--acc-ink:#06111F;
--vio:#6D5EF8;
--cyn:#22E0E0;
/* Emilio = zelen kristal iz igre MOS (web/src/bitja/emilio.ts: rim #3ECF8E, core #A7F3D0); ena zelena + svetlejsi odtenek */
--emilio:#3ECF8E;
--emilio-2:#A7F3D0;
--bg-mint:#070E0C;
--display:"Sora",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
--body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--pad-x:clamp(1.25rem,5vw,6rem);
--pad-y:clamp(6rem,14vh,12rem);
--r:22px;
--ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
html,body{overflow-x:clip}
body{
margin:0;
font-family:var(--body);
font-size:1.0625rem;
line-height:1.5;
color:var(--txt);
background:var(--bg);
transition:background-color 1100ms var(--ease);
-webkit-font-smoothing:antialiased;
position:relative;isolation:isolate; /* lastni sklad: .bg z z-index:-1 se izrise NAD ozadjem telesa, POD vsebino */
}
body[data-tone="warm"]{background:var(--bg-warm)}
body[data-tone="stone"]{background:var(--bg-stone)}
body[data-tone="violet"]{background:var(--bg-violet)}
body[data-tone="cold"]{background:var(--bg-cold)}
body[data-tone="deep"]{background:var(--bg-deep)}
body[data-tone="mint"]{background:var(--bg-mint)} /* #emilio: oder sledi zelenemu bitju, komaj zaznavno */
body[data-tone="base"]{background:var(--bg)} /* kot hero, a brez lise znamke (#kako, #faq) */
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.035em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.75rem 1rem;background:var(--acc);color:var(--acc-ink);border-radius:12px}
.skip:focus{top:1rem}
/* ---- ZIVO OZADJE: tri lise, polozaj po tonu odseka, pocasen drift ---- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{
position:absolute;width:60vmax;height:60vmax;
transition:transform 1600ms var(--ease),opacity 1600ms var(--ease);
will-change:transform,opacity;
}
.bg i::before{
content:"";position:absolute;inset:0;border-radius:50%;background:var(--c);
filter:blur(90px);animation:drift var(--dur,40s) ease-in-out infinite alternate;
}
.bg i:nth-child(1){--dur:38s;left:-22vmax;top:-24vmax}
.bg i:nth-child(2){--dur:46s;right:-26vmax;top:26vh;animation-delay:-12s}
.bg i:nth-child(3){--dur:54s;left:28vw;bottom:-34vmax}
.bg i:nth-child(2)::before{animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(5vw,-4vh) scale(1.08)}}
/* polozaji po odsekih (premiki ohranjeni iz B; barve in prosojnosti so odstranjene - glej popravek 2 spodaj) */
body[data-tone="warm"] .bg i:nth-child(1){transform:translate(-10vw,-6vh) scale(.8)}
body[data-tone="warm"] .bg i:nth-child(2){transform:translate(14vw,10vh) scale(.9)}
body[data-tone="warm"] .bg i:nth-child(3){transform:translate(30vw,-20vh)}
body[data-tone="stone"] .bg i:nth-child(1){transform:translate(56vw,10vh) scale(1.1)}
body[data-tone="stone"] .bg i:nth-child(2){transform:translate(-20vw,30vh) scale(.9)}
body[data-tone="stone"] .bg i:nth-child(3){transform:translate(-22vw,-46vh) scale(1.15)}
body[data-tone="violet"] .bg i:nth-child(1){transform:translate(78vw,34vh) scale(1.35)}
body[data-tone="violet"] .bg i:nth-child(2){transform:translate(-30vw,-20vh) scale(1)}
body[data-tone="violet"] .bg i:nth-child(3){transform:translate(-10vw,-10vh) scale(.9)}
body[data-tone="cold"] .bg i:nth-child(1){transform:translate(4vw,84vh) scale(.8)}
body[data-tone="cold"] .bg i:nth-child(2){transform:translate(-40vw,-30vh) scale(1.1)}
body[data-tone="cold"] .bg i:nth-child(3){transform:translate(-40vw,-58vh) scale(1.15)}
body[data-tone="deep"] .bg i:nth-child(1){transform:translate(20vw,60vh) scale(.9)}
body[data-tone="deep"] .bg i:nth-child(2){transform:translate(-4vw,6vh) scale(1.1)}
body[data-tone="deep"] .bg i:nth-child(3){transform:translate(-4vw,-14vh) scale(.9)}
body[data-tone="mint"] .bg i:nth-child(1){transform:translate(-30vw,70vh) scale(.9)}
body[data-tone="mint"] .bg i:nth-child(2){transform:translate(-56vw,-10vh) scale(1.25)}
body[data-tone="mint"] .bg i:nth-child(3){transform:translate(30vw,-50vh) scale(1)}
/* 126 popravek 2: barvno auroro zamenja nevtralna premikajoca se svetloba.
Skeptik B2 (pravilo 2, KRSENO): .07/.045/.025 je bilo z ocesom nevidno (najsvetlejsa tocka ozadja 25/255) -
dvig na VIDNO raven, ne v auroro: 70vmax, blur 120px, opacity .18/.12/.07; cilj >= 40/255 na 1440 in 375. */
/* B3: globlji oder - vecje in mehkejse lise (80vmax, blur 140px), nizja prosojnost, vinjeta za globino,
drobcen SVG sum (.035) razbije pasove 8-bitnega gradienta. Brez tretje barve: edina barvna lisa ostane v heroju. */
.bg i{width:80vmax;height:80vmax}
/* k25 (7. 10. 2026) hitrost namizja: filter blur(140px) na treh 80vmax lisah je ob prvem okvirju pomenil ~0,4 s programskega rastra,
med katerim glavna nit caka na commit (dolgo opravilo dokumenta). Isti mehak rob zdaj da radialna maska: skatla je vecja za 280 px
(2 x 140), postanki v px pred koncem zarka (rob diska = 100% - 280px) sledijo zamegljenemu disku; posnetki 1024-2560 px se od
blura razlikujejo povprecno <= 1,0/255 (najvec 5/255). Kriticni CSS v index.html ima isto masko (zdruzeno v osnovno pravilo).
Drift in barvni prehodi ostanejo; mobilni blok (Z-947) obdrzi svojo masko in inset:0. */
.bg i::before{background:#DDE4F2;filter:none;inset:-280px;
--lisa:radial-gradient(closest-side,#000 calc(100% - 560px),#000000d1 calc(100% - 420px),#00000073 calc(100% - 280px),#00000021 calc(100% - 140px),#0000);
-webkit-mask-image:var(--lisa);mask-image:var(--lisa)}
body[data-tone] .bg i:nth-child(1){opacity:.22}
body[data-tone] .bg i:nth-child(2){opacity:.09}
body[data-tone] .bg i:nth-child(3){opacity:.05}
/* B4 ozadje (lastnik: "se mal izboljsi background") - globina + barva po bitjih, brez novih slik, brez rAF.
1) SUM: finejse zrno (baseFrequency 1.1, 3 oktave), .035 -> .05; SVG ostane < 1 KB, en sam 160 px vzorec.
2) VINJETA: rob .55 -> .62, dodana temna "tla" pri dnu in komaj zaznaven svetlobni rob zgoraj = oder ima strop in tla.
3) BARVA: vsaka lisa bere svojo spremenljivko --c1/--c2/--c3, ki jo body[data-tone] nastavi po odseku; barva se med
odseki ZLIJE (transition background-color 1600 ms), ne preskoci. Ema = --vio (#emma, #konec, hero), Emilio = --emilio
(#emilio, hero), #klic in #studio (deep) nosita obe bitji hkrati. Nevtralni odseki ostanejo bela svetloba.
4) KONTRAST: barvne lise so temnejse od bele #DDE4F2, prosojnosti <= B3 (.22/.09/.05 -> najvec .22), zato najsvetlejsa
tocka ozadja ni visja kot v B3 (revizija dostopnosti 100) - besedilo AA nespremenjeno.
5) PREMIK: drift 2x pocasnejsi (76/92/108 s), tretja lisa diha po svoji krivulji; prefers-reduced-motion (pravilo pri
[data-motion] spodaj) ugasne animacije IN prehode lis -> popolnoma staticno. */
.bg::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 160px}
.bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(120% 90% at 50% 40%,transparent 42%,rgba(0,0,0,.62) 100%),
radial-gradient(90% 55% at 50% 108%,rgba(0,0,0,.42) 0%,transparent 62%),
linear-gradient(180deg,rgba(234,240,255,.025) 0,transparent 22vh)}
body{--c1:#DDE4F2;--c2:#DDE4F2;--c3:#DDE4F2}
.bg i::before{transition:background-color 1600ms var(--ease)}
.bg i:nth-child(1)::before{background:var(--c1)}
.bg i:nth-child(2)::before{background:var(--c2)}
.bg i:nth-child(3)::before{background:var(--c3)}
.bg i:nth-child(1){--dur:76s}
.bg i:nth-child(2){--dur:92s}
.bg i:nth-child(3){--dur:108s}
.bg i:nth-child(3)::before{animation-name:drift3}
@keyframes drift3{from{transform:translate(0,0) scale(.96)}to{transform:translate(-4vw,3vh) scale(1.06)}}
body[data-tone] .bg i:nth-child(3){opacity:.07}
/* hero: obe bitji se napovesta - vijolicna zgoraj levo, zelena spodaj */
body[data-tone="hero"]{--c1:var(--vio);--c3:var(--emilio)}
body[data-tone="hero"] .bg i:nth-child(1){opacity:.14}
body[data-tone="hero"] .bg i:nth-child(3){opacity:.06}
/* Ema: #emma, #konec */
body[data-tone="violet"]{--c1:#CFC8FF;--c2:var(--vio);--c3:#8F84FF}
body[data-tone="violet"] .bg i:nth-child(1){opacity:.18}
body[data-tone="violet"] .bg i:nth-child(2){opacity:.14}
body[data-tone="violet"] .bg i:nth-child(3){opacity:.06}
/* Emilio: #emilio */
body[data-tone="mint"]{--c1:#CDEFE0;--c2:var(--emilio);--c3:var(--emilio-2)}
body[data-tone="mint"] .bg i:nth-child(1){opacity:.16}
body[data-tone="mint"] .bg i:nth-child(2){opacity:.12}
body[data-tone="mint"] .bg i:nth-child(3){opacity:.06}
/* #klic, #studio: oba glasova na istem odru, oder ostane najtemnejsi */
body[data-tone="deep"]{--c1:var(--vio);--c2:var(--emilio)}
body[data-tone="deep"] .bg i:nth-child(1){opacity:.10}
body[data-tone="deep"] .bg i:nth-child(2){opacity:.08}
body[data-tone="cold"]{--c2:#D6F0F5}
body[data-tone="warm"]{--c1:#EFE9E4}
/* Z-947 (2. 10. 2026): blur(90px) pod 720 px je nadomestil blok "MOBILNI IZRIS" na koncu datoteke (filter:none + maska, brez drifta) */
/* ---- tipografija ---- */
/* 126 popravek 3: naslovi z jasno velikostjo (64-120 px). Razredi .d-xl/.d-l/.d-name so ostali kot oznake
za motion pravila, velikost pa dolocata spodnji dve pravili (in #emma/#emilio h2 v popravku 6). */
#hero h1{
font-size:clamp(64px,8.3vw,120px);
line-height:.94;
letter-spacing:-.055em;
}
main section h2{
font-size:clamp(64px,6.7vw,96px);
line-height:.98;
letter-spacing:-.045em;
}
/* C5-A landing-05+12 (4. 10. 2026): ena lestvica za vse h2.d-l (kaj/kako/klic/cenik/faq/vodniki) - prej kaj/kako 6.7vw, klic/cenik/faq 4.6vw (31-37 % razlike);
1280 px: 69 px, 1920 px: 76 px, 768 px: 44 px. Pod 520 px velja @media spodaj (isti selektor, da zmaga). Nadomesti landing-pregled L-05. */
main section h2.d-l{font-size:clamp(2.75rem,5.4vw,4.75rem)}
/* 19. 9. mobilno-01/02/03 + dostopnost-15: pod 520 px spodnja meja 64 px ne stane - izmerjeno pri 375 px: h1 v 4 vrsticah (241 px,
CTA pri 375x667 na robu zaslona), h2 v 3-6 vrsticah (#kaj-h 314 px), pri 320 px 'Trije koraki. En popoldan.' odrezan (overflow-x:clip).
Nad 520 px nespremenjeno (1280 px: h1 106 px, h2 85,8 px). #emma/#emilio h2 imata lastno pravilo (popravek 6, id specificnost).
.swap-a ('Nihce ne dvigne.') v eni vrstici, da precrt ::after prekrije celo frazo. break-word = varovalo za dolge besede pri 320 px. */
#hero h1,main section h2{overflow-wrap:break-word}
@media (max-width:520px){
#hero h1{font-size:clamp(44px,13.5vw,64px)}
main section h2{font-size:clamp(40px,10.2vw,64px)} /* C5-A landing-12: 11.5vw -> 10.2vw (393 px: 45 -> 40 px, 3 h2 x 4 vrstice -> 3); literal clamp(40px je pin M2 test_landing_styles_mobilno_19_9 */
main section h2.d-l{font-size:clamp(40px,10.2vw,64px)} /* C5-A: ista vrednost za .d-l, da pod 520 px zmaga nad main section h2.d-l zgoraj */
.swap-a{white-space:nowrap;font-size:.8em}
}
.d-xl,.d-l{text-wrap:balance}
.d-name{letter-spacing:-.05em}
.lead{font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.45;color:var(--mut);max-width:34ch;margin-top:clamp(1.25rem,3vh,2rem)}
.lead-c{margin-left:auto;margin-right:auto;text-align:center}
.kicker{font-family:var(--display);font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:1.25rem}
.fine{font-size:.9rem;color:var(--mut);line-height:1.55}
.fine a{color:var(--txt);border-bottom:1px solid rgba(234,240,255,.45)}
.fine a:hover,.fine a:focus-visible{border-color:var(--acc)}
/* gradient znamke ENKRAT: na naslovu v heroju */
.hl{background:linear-gradient(92deg,var(--vio) 0%,var(--acc) 48%,var(--cyn) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em}
/* ---- gumbi ---- */
.btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
min-height:44px;padding:.85rem 1.5rem;border-radius:999px;
font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;
transition:transform 300ms var(--ease),background-color 300ms var(--ease),box-shadow 300ms var(--ease);
isolation:isolate;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--acc);color:var(--acc-ink);border:1px solid transparent;box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.btn-primary:hover{background:#4A9BFF;box-shadow:0 14px 34px -14px rgba(46,140,255,.55)}
/* 126 popravek 7: steklo je material, ne moder sij (brez zunanjega glowa; berljivo tudi brez backdrop-filter) */
.btn-glass{
min-height:48px;
padding:12px 24px;
color:#EAF0FF;
background:rgba(234,240,255,.09);
border:1px solid rgba(234,240,255,.26);
border-radius:999px;
backdrop-filter:blur(18px) saturate(1.08);
-webkit-backdrop-filter:blur(18px) saturate(1.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-glass:hover{background:rgba(234,240,255,.14);border-color:rgba(234,240,255,.36)}
/* velikostna modifikatorja za primarnim materialom, da se v paru gumbov visina ujema */
.btn-lg{min-height:56px;padding:1.05rem 2rem;font-size:1.0625rem}
.btn-sm{min-height:44px;padding:.55rem 1.1rem;font-size:.9rem}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(1.75rem,4vh,2.75rem)}
.cta-c{justify-content:center}
/* 19. 9. (izmerjeno pri 375 px): .btn-lg 'Ze imate racun? Prijava v nadzorno plosco' je z nowrap 422 px sirok in raztegne .studio .sec-in
cez rob (desnih 67 px odrezanih). Pod 520 px se dolg gumb prelomi v 2 vrstici namesto da bi sekal odsek. */
@media (max-width:520px){.cta-row .btn{max-width:100%;white-space:normal;text-align:center}}
.glass{
background:rgba(234,240,255,.06);
border:1px solid rgba(234,240,255,.14);
-webkit-backdrop-filter:blur(20px) saturate(1.08);backdrop-filter:blur(20px) saturate(1.08); /* Z-947: 24 -> 20 px (kapica) */
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 80px -40px rgba(0,0,0,.9);
border-radius:calc(var(--r) + 8px);
}
/* ---- glava ---- */
.top{
position:fixed;inset:0 0 auto 0;z-index:40;
display:flex;align-items:center;justify-content:space-between;
padding:.9rem var(--pad-x);
background:linear-gradient(180deg,rgba(7,7,15,.6),rgba(7,7,15,0));
pointer-events:none;
}
.top>*{pointer-events:auto}
/* k17 (6. 10. 2026, DODATEK-16 A): ob drsenju (app.js doda .polna) neprosojna podlaga brez prehoda - gumb glave ne lebdi
nad besedilom sekcij; podlaga tudi lovi klike (pod njo je besedilo skrito). */
.top.polna{background:rgba(7,7,15,.94);box-shadow:0 1px 0 rgba(234,240,255,.08);pointer-events:auto}
.top-logo{
display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;letter-spacing:.02em;font-size:.95rem;
padding:.35rem .95rem .35rem .4rem;border-radius:999px;
background:rgba(234,240,255,.09);border:1px solid rgba(234,240,255,.26);
-webkit-backdrop-filter:blur(18px) saturate(1.08);backdrop-filter:blur(18px) saturate(1.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.top-logo{transition:background-color 200ms var(--ease)}
.top-logo:hover{background:rgba(234,240,255,.14)}
.top-logo img{width:32px;height:32px}
.top-right{display:flex;align-items:center;gap:.75rem}
.menu-btn{
position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 1rem 0 .9rem;
border-radius:999px;border:1px solid rgba(234,240,255,.26);color:var(--txt);cursor:pointer;
background:rgba(234,240,255,.09);
-webkit-backdrop-filter:blur(18px) saturate(1.08);backdrop-filter:blur(18px) saturate(1.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
font:600 .9rem var(--display);
}
.menu-btn{transition:background-color 200ms var(--ease)}
.menu-btn:hover{background:rgba(234,240,255,.14)}
.menu-ico{display:grid;gap:5px;width:18px}
.menu-btn .menu-line{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform 300ms var(--ease)}
.menu-btn[aria-expanded="true"] .menu-line:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-line+.menu-line{transform:translateY(-3.5px) rotate(-45deg)}
.menu-btn .menu-txt{margin-left:.2rem}
/* .top-cta pod 520 px NI skrit, le manjsi; tarca ostane >= 44 px (.btn-sm). Zgodovina: 19. 9. konverzija-09 za glavo index.html (5 zaslonov
med heroju in #kako brez CTA); od k17 (6. 10. 2026) je glava index.html brez .top-cta (CTA v portal v heroju, zakljucni sekciji in
meniju), pravilo velja za glavo 17 podstrani, ki nalozijo ta slog (vodniki, zacni, o-nas, navodila, pravne strani, 404). */
@media (max-width:520px){.top-cta{padding:.55rem .8rem;font-size:.875rem}.menu-txt{display:none}.menu-btn{padding:0 .9rem}.top-logo span{display:none}.top-logo{padding:.35rem}}
/* ---- meni cez cel zaslon ---- */
.menu{
position:fixed;inset:0;z-index:30;
display:grid;place-items:start center;
background:rgba(7,7,15,.86);
-webkit-backdrop-filter:blur(20px) saturate(1.08);backdrop-filter:blur(20px) saturate(1.08); /* Z-947: 30 -> 20 px (kapica) */
opacity:0;visibility:hidden;transition:opacity 420ms var(--ease),visibility 0s linear 420ms;
overflow-y:auto;
}
.menu[hidden]{display:grid}
.menu.open{opacity:1;visibility:visible;transition:opacity 420ms var(--ease)}
.menu-in{width:min(100% - 2*var(--pad-x),1100px);min-height:100svh;display:grid;align-content:center;padding:5rem 0 2rem}
.menu-list li{border-top:1px solid var(--line)}
.menu-list li:last-child{border-bottom:1px solid var(--line)}
.menu-list a{
display:flex;align-items:baseline;gap:1.25rem;padding:clamp(.6rem,1.6vh,1rem) 0;
font-family:var(--display);font-weight:600;letter-spacing:-.03em;
font-size:min(clamp(2rem,5.4vh,3.75rem),9.5vw);line-height:1.1; /* C5-A landing-08: 9.5vw = 37 px pri 393 ('05 Glasovni studio' v 1 vrstici) */
transform:translateY(24px);opacity:0;transition:transform 600ms var(--ease),opacity 600ms var(--ease),color 200ms var(--ease);
}
.menu-list a small{font-size:.35em;letter-spacing:.1em;color:var(--mut);font-weight:500;min-width:2.2em}
.menu-list a:hover{color:var(--acc)}
.menu.open .menu-list a{transform:none;opacity:1}
.menu.open .menu-list li:nth-child(1) a{transition-delay:60ms}.menu.open .menu-list li:nth-child(2) a{transition-delay:110ms}
.menu.open .menu-list li:nth-child(3) a{transition-delay:160ms}.menu.open .menu-list li:nth-child(4) a{transition-delay:210ms}
.menu.open .menu-list li:nth-child(5) a{transition-delay:260ms}.menu.open .menu-list li:nth-child(6) a{transition-delay:310ms}
.menu.open .menu-list li:nth-child(7) a{transition-delay:360ms}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.5rem}
.menu-mail{color:var(--mut);font-size:1rem;min-height:44px;display:inline-flex;align-items:center;transition:color 200ms var(--ease)}
.menu-mail:hover{color:var(--txt)}
body.menu-open{overflow:hidden}
/* ---- odseki ---- */
section{position:relative;min-height:100svh;display:grid;align-content:center;padding:var(--pad-y) var(--pad-x)}
.sec-in{width:min(100%,1240px);margin:0 auto}
[data-motion]{--p:1;--q:0;--k:1}
html.js [data-motion]{--p:0;--k:0}
@media (prefers-reduced-motion:no-preference){
/* k17 (6. 10. 2026): prehod samo ob .in (razkritje 600 ms, DODATEK-10 j 500-900 ms); skrivanje pred .in ni prehod -
app.js doda html.js po izracunu slogov, prej se je skrivanje odigralo kot prehod ob nalaganju (sken k16: 'stanje') */
html.js [data-motion]:not(.hero).in>*{transition:opacity 600ms var(--ease),translate 600ms var(--ease)}
html.js [data-motion]:not(.hero):not(.in)>*{opacity:0;translate:0 14px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
[data-motion]{--p:1 !important;--q:0 !important;--k:1 !important}
.bg i,.bg i::before{animation:none !important;transition:none !important}
/* F83 k6 (5. 10. 2026): tudi zamiki 0 (kot stikalo html.reduce) - prej so vstopi heroja cakali 120-560 ms na zacetnem
okvirju in nato skocili, CTA nevidna 380 ms (k6_motion PRED). Kriticni CSS v index.html isto. Pin tests/test_landing_motion_f83.py */
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;animation-delay:0s !important;transition-delay:0s !important}
}
/* 1 hero */
.hero{min-height:100svh;padding-top:6.5rem;padding-bottom:2.5rem;text-align:center}
.hero-in{width:min(100%,1100px);margin:0 auto;display:flex;flex-direction:column;align-items:center}
/* 126 popravek 4: velik pravi znak v heroju (isti vir, brez filtrov ali prebarvanja) */
.hero-mark{
width:clamp(128px,14vw,200px);
height:auto;
margin-block-end:32px;
}
.hero-logo{
animation:logoIn 800ms var(--ease) backwards;
transform:translateY(calc(var(--q) * -14vh)) scale(calc(1 - var(--q) * .35)) rotate(calc(var(--q) * 24deg));opacity:calc(1 - var(--q) * 1.2)}
/* F83 k3 (4. 10. 2026): p.lead je za h1 naslednji najvecji tekstovni blok heroja - pod slow4g + CPU 4x je bil LCP element
(fadeUp iz opacity 0: LCP 1856 ms, FCP 812 ms). riseUp brez prosojnosti (O53). Pin tests/test_landing_hitrost_f83.py, kriticni CSS isto. */
.hero .lead{text-align:center;max-width:38ch;margin-left:auto;margin-right:auto;margin-top:1.1rem;animation:riseUp 700ms 60ms var(--ease) backwards}
/* O53 (29. 9. 2026): h1 je LCP element na telefonu - fadeUp iz opacity 0 je LCP zamaknil do prihoda pisave (slow4g 1664 ms).
F83 k17 (6. 10. 2026): h1 brez vstopne animacije (sken DODATEK-10 j: LCP element z animacijo = HIGH, F-001 k16); okolica
vstopi 60 ms narazen (lead, CTA, cena, dokazi, val; 700 ms, vse vidno do 1000 ms). Kriticni CSS isto (test_landing_hitrost_f83 K6). */
/* F83 k6 (5. 10. 2026): CTA heroja riseUp (ne fadeUp iz opacity 0) - gumb je viden od prvega izrisa, dvig ostane.
Kriticni CSS isto. Pin tests/test_landing_hero_dokaz_f83.py D10 */
.hero .cta-row{justify-content:center;margin-top:1.75rem;animation:riseUp 700ms 120ms var(--ease) backwards}
/* F83 k3 (4. 10. 2026): hero-fine je tekstovni blok prvega zaslona - riseUp (ne fadeUp iz opacity 0) in pravilo je tudi v
kriticnem CSS (skupaj z .fine, .fine a, .lead text-wrap): prej je prisel sele z asinhronim styles.css -> premik + utrip. */
.hero .hero-fine{margin-top:1.1rem;text-align:center;animation:riseUp 700ms 180ms var(--ease) backwards}
/* F83 k5 (5. 10. 2026): trak dokazov pod ceno - enako kriticnemu CSS (tests/test_landing_hero_dokaz_f83.py), hover samo tu */
.hero .dokaz{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none;animation:riseUp 700ms 240ms var(--ease) backwards}
.dokaz a{display:inline-flex;align-items:center;gap:.3rem;min-height:2rem;padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;background:rgba(234,240,255,.04);color:var(--mut);font-size:.85rem;line-height:1.35}
.dokaz b{color:var(--txt)}
.dokaz a:hover,.dokaz a:focus-visible{border-color:var(--acc);color:var(--txt)}
/* k17 (6. 10. 2026): cilj dotika 44 px na dotik (pointer:coarse; DODATEK-10 h, sken k17-2 F-001 .dokaz a 91x32). Vidna
kapsula ostane 32 px (prozoren rob 6 px, crta = notranja senca), li ostane 32 px (negativni rob -6 px), skatle sosednjih
povezav se stikajo (razmik 12 px), zato prvi zaslon (N1, li) in N2 ostaneta; 44 px skatla je 6 px pod pregibom nevidna. Miska
(pointer:fine) ostane 32 px (WCAG 2.2 SC 2.5.8: >= 24 px). Kriticni CSS v index.html isto, hover samo tu */
@media (pointer:coarse){.hero .dokaz{gap:12px 0}.dokaz li{display:flex}.dokaz a{min-height:44px;margin:-6px 0;border:6px solid #0000;background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--line)}.dokaz a:hover,.dokaz a:focus-visible{border-color:#0000;box-shadow:inset 0 0 0 1px var(--acc)}}
.hero h1,.hero .lead,.hero .cta-row{transform:translateY(calc(var(--q) * -10vh));opacity:calc(1 - var(--q) * 1.4)}
.hero .lead{transform:translateY(calc(var(--q) * -8vh))}
.hero .cta-row{transform:translateY(calc(var(--q) * -6vh))}
/* F83 k8 (5. 10. 2026): nizek telefon (do 520 x 740 px) - pri 360x640, 375x667, 390x664 sta bila cena in trak dokazov pod
pregibom (meritve/k8-pred.md: znak 128 + 32 px, CTA v 2 vrsticah 138 px). Manjsi znak, CTA gumba 48 px v eni vrstici, ozji
odmiki; do 660 px visine znak skrit (logotip je v glavi). Kriticni CSS v index.html isto. Pin tests/test_landing_mobilni_f83.py */
@media (max-width:520px) and (max-height:740px){.hero{padding-top:5.5rem}.hero-mark{width:72px;margin-block-end:1rem}.hero .lead,.hero .hero-fine,.hero .dokaz{margin-top:.75rem}.hero .cta-row{gap:.5rem;margin-top:1rem}.hero .btn{min-height:48px;padding:.75rem 1rem;font-size:1rem}}
@media (max-width:520px) and (max-height:660px){.hero-mark{display:none}}
/* F83 k9 (5. 10. 2026): nizko namizno okno (sirsi od 520, do 899 px visine) - pri 1280x720, 1366x657, 1440x790, 1536x730
sta bila CTA in cena pod pregibom (meritve/k9-pred.md: znak do 200 px + 32, h1 106-120 px, lead 4 vrstice). Znak in h1 sledita
visini okna (h1 ostane >= 64 px, "126 popravek 3"; znak >= 96 px), lead 46ch = 3 vrstice, ozji odmiki; gumba CTA ostaneta 56 px.
1440x900 in visja okna nespremenjena. Kriticni CSS v index.html isto. Pin tests/test_landing_mobilni_f83.py
7. 10. 2026: lead 56ch -> 46ch (56ch je dal 82-84 znakov v vrstici, 46ch 68-69, cilj <= 70; se vedno 3 vrstice, CTA, cena in
dokazi ostanejo na istem mestu). Pin tests/test_landing_cpl_f83.py (C3) */
@media (min-width:521px) and (max-height:899px){.hero{padding-top:5.5rem}.hero-mark{width:clamp(96px,min(14vw,40vh - 160px),200px);margin-block-end:1rem}#hero h1{font-size:clamp(64px,min(8.3vw,13vh),120px)}.hero .lead{max-width:46ch}.hero .cta-row{margin-top:1.25rem}.hero .hero-fine,.hero .dokaz{margin-top:.75rem}}
/* F83 k10 (5. 10. 2026): lezeci telefon (sirsi od 520, do 500 px visine) - blok k9 je dal znak 96 + 16 px, h1 64 px v 2
vrsticah in lead v 3 vrsticah pred CTA: CTA na 436-497 px pri oknu 320-430 px (meritve/k10-pred.md). Znak skrit (logotip je v
glavi, kot k8); h1 ostane 64 px ("126 popravek 3") in CTA .btn-lg; lead in val sta vidno za trakom dokazov (order; v DOM, za
bralnike zaslona in tipkovnico, ostane h1, lead, CTA), ozji odmiki. Za blokom k9 (povozi ga). Kriticni CSS v index.html isto.
Pin tests/test_landing_mobilni_f83.py */
@media (min-width:521px) and (max-height:500px){.hero{padding-top:5rem}.hero-mark{display:none}.hero .lead,.hero .wave-stage{order:1}.hero .cta-row{margin-top:.5rem}.hero .hero-fine,.hero .dokaz{margin-top:.5rem}}
.wave-stage{margin:clamp(2rem,5vh,3.5rem) 0 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;
transform:scaleX(calc(1 + var(--q) * .6)) scaleY(calc(1 - var(--q) * .85));opacity:calc(1 - var(--q) * 1.1)}
.wave{height:clamp(80px,14vh,150px);width:auto;max-width:100%;overflow:visible}
.wave .bars rect{fill:var(--acc);transform-box:fill-box;transform-origin:center;animation:bar 1400ms ease-in-out infinite alternate}
.wave .bars rect:nth-child(2n){opacity:.75}
.wave .bars rect:nth-child(3n){animation-duration:1100ms;animation-delay:-300ms;opacity:.9}
.wave .bars rect:nth-child(3n+1){animation-duration:1700ms;animation-delay:-800ms}
.wave .bars rect:nth-child(5n){animation-duration:900ms;animation-delay:-500ms}
.wave .bars rect:nth-child(7n){animation-duration:2000ms;animation-delay:-1200ms}
.wave-cap{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-align:center}
@media (max-width:520px){.wave-cap{font-size:max(.75rem,12px);letter-spacing:.08em}}
@keyframes bar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes logoIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes riseUp{from{transform:translateY(24px)}to{transform:none}}
/* 2 problem: "Nihce ne dvigne." se ob drsenju skrci, precrta in umakne; "Emma dvigne." vstopi od spodaj */
.problem{min-height:150svh;align-content:start;padding-top:0;padding-bottom:0}
.problem .sec-in{position:sticky;top:0;min-height:100svh;display:grid;align-content:center;padding:var(--pad-y) 0}
.swap{--e:clamp(0,calc((var(--p) - .42) * 4),1);position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding-top:calc(var(--e) * .55em)}
.swap>span{grid-area:1/1;display:block;max-width:100%;text-wrap:balance}
.swap-a{
position:relative;color:var(--mut);transform-origin:left top;
justify-self:start; /* k17 B-4 (7. 10. 2026): skatla = sirina fraze, precrt ::after 104 % se konca ob frazi (prej 104 % stolpca: 10-76 % cez frazo) */
transform:translateY(calc(var(--e) * -.95em)) scale(calc(1 - var(--e) * .62));
opacity:calc(1 - var(--e) * .35);
}
.swap-a::after{content:"";position:absolute;left:-.02em;top:.52em;height:.07em;width:104%;transform:scaleX(var(--e));transform-origin:left center;background:var(--acc);border-radius:.04em} /* Z-947: width:calc -> scaleX */
.swap-b{opacity:clamp(0,calc((var(--p) - .5) * 4),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .5) * 4),1)) * .45em)) skewX(calc((1 - clamp(0,calc((var(--p) - .5) * 4),1)) * -6deg))}
.problem .lead{opacity:clamp(0,calc((var(--p) - .15) * 3),1);transform:translateX(calc((1 - clamp(0,calc((var(--p) - .15) * 3),1)) * -24px))}
.hours{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,6vh,4rem)}
.hours li{
--e:clamp(0,calc((var(--p) - .6 - var(--i) * .07) * 4),1);
display:grid;gap:.25rem;padding-left:1rem;border-left:2px solid var(--acc);
opacity:var(--e);transform:translateX(calc((1 - var(--e)) * 60px)) rotate(calc((1 - var(--e)) * 3deg));transform-origin:left center;
}
.hours b{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.03em}
.hours span{color:var(--mut);font-size:.95rem}
/* 3 kaj: izrezi (PNG/WebP s prosojnim ozadjem) se razporedijo iz kupa */
.kaj .d-l{max-width:16ch}
.pile{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2.5rem);margin-top:clamp(3rem,8vh,5rem)}
.pile-it{
--e:clamp(0,calc((var(--p) - .1) * 1.6),1);
padding:clamp(1.25rem,2vw,2rem) 0 0;border-top:1px solid var(--line);
color:var(--txt);
transform:translate(calc((1 - var(--e)) * var(--dx)),calc((1 - var(--e)) * var(--dy))) rotate(calc((1 - var(--e)) * var(--rot)));
opacity:calc(.25 + var(--e) * .75);
}
.pile-it .cut{width:clamp(96px,9vw,132px);height:auto;margin:0 0 1rem -.5rem;
transform:rotate(calc((1 - var(--e)) * var(--rot) * -2)) scale(calc(.7 + var(--e) * .3));transform-origin:center;
filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.pile-it h3{font-size:clamp(1.1rem,1.5vw,1.35rem);letter-spacing:-.02em;margin-bottom:.5rem;line-height:1.2}
.pile-it p{color:var(--mut);font-size:1rem;max-width:30ch}
.pile-it:nth-child(1){--dx:110%;--dy:60%;--rot:-8deg}
.pile-it:nth-child(2){--dx:0%;--dy:60%;--rot:4deg}
.pile-it:nth-child(3){--dx:-110%;--dy:60%;--rot:9deg}
.pile-it:nth-child(4){--dx:110%;--dy:-60%;--rot:6deg}
.pile-it:nth-child(5){--dx:0%;--dy:-60%;--rot:-5deg}
.pile-it:nth-child(6){--dx:-110%;--dy:-60%;--rot:-9deg}
/* 126 popravek 8: ovoj .feature-cutout, razpiranje iz kupa z animation-timeline:view(); --p na .pile-it je rAF rezerva */
.feature-cutout{margin:0;background:none;border:0;box-shadow:none}
.feature-cutout figcaption{display:block}
@keyframes unpack{
from{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.8)}
to{transform:translate(0,0) rotate(0) scale(1)}
}
@supports(animation-timeline:view()){
.feature-cutout{
animation:unpack linear both;
animation-timeline:view();
animation-range:entry 0% cover 40%;
}
/* brskalnik zna sam: rAF rezerva na .pile-it se umakne, da se predmet ne premika dvakrat */
.pile-it{transform:none}
.pile-it .cut{transform:none}
}
@media(prefers-reduced-motion:reduce){
.feature-cutout{animation:none;transform:none}
}
/* Rocno stikalo 'Ustavi gibanje' (#gibanje, app.js fv-reduce): isti ucinek kot prefers-reduced-motion (WCAG 2.2.2). */
html.reduce{scroll-behavior:auto}
html.reduce [data-motion]{--p:1 !important;--q:0 !important;--k:1 !important}
html.reduce .bg i,html.reduce .bg i::before{animation:none !important;transition:none !important}
html.reduce *,html.reduce *::before,html.reduce *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
/* F83 k4 t. 10 (5. 10. 2026): stikalo ustavi tudi zamike (val heroja fadeUp 620 ms, zaporedni vstop kartic) -> koncna slika takoj;
enako pravilo je v kriticnem CSS (index.html), ker app.js doda html.reduce lahko pred asinhronim styles.css (tests/test_landing_motion_f83.py) */
html.reduce *,html.reduce *::before,html.reduce *::after{animation-delay:0s !important;transition-delay:0s !important}
html.reduce .feature-cutout{animation:none;transform:none}
@media (max-width:900px){
.pile{grid-template-columns:repeat(2,1fr)}
.pile-it:nth-child(1){--dx:55%;--dy:120%}.pile-it:nth-child(2){--dx:-55%;--dy:120%}
.pile-it:nth-child(3){--dx:55%;--dy:0%}.pile-it:nth-child(4){--dx:-55%;--dy:0%}
.pile-it:nth-child(5){--dx:55%;--dy:-120%}.pile-it:nth-child(6){--dx:-55%;--dy:-120%}
}
@media (max-width:560px){
.pile{grid-template-columns:1fr;gap:1.5rem}
.pile-it{--dx:0% !important}
.feature-cutout{display:grid;grid-template-columns:84px 1fr;column-gap:1rem;align-items:start}
.feature-cutout picture{grid-row:1/3;grid-column:1}
.feature-cutout figcaption{grid-column:2}
.pile-it .cut{width:84px;margin:0}
.pile-it:nth-child(1){--dy:60%}.pile-it:nth-child(2){--dy:40%}.pile-it:nth-child(3){--dy:20%}
.pile-it:nth-child(4){--dy:-20%}.pile-it:nth-child(5){--dy:-40%}.pile-it:nth-child(6){--dy:-60%}
}
/* 4-5 glasova: pravi bitji Emma in Emilio kot IZDELEK (126 popravka 5 in 6): vsak svoj 100svh oder,
enaka rezija, bitje veliko in sredinsko, obroci samo kot avreola ZA sliko */
.voice{overflow:clip}
.voice .sec-in{position:relative;isolation:isolate}
#emma,#emilio{
min-height:100svh;
display:grid;
align-content:center;
gap:clamp(24px,4vh,56px);
padding-block:clamp(88px,12vh,144px);
}
#emma h2,#emilio h2{font-size:clamp(80px,8vw,116px)}
@media (max-width:480px){#emma h2,#emilio h2{font-size:min(80px,17.5vw)}} /* B5 polish: 375 px -> 65,6 px, ime ostane v stezi */
#emma .sec-in,#emilio .sec-in{display:grid;gap:clamp(24px,4vh,56px);justify-items:start}
.voice-txt{display:grid;gap:clamp(16px,3vh,32px);justify-items:inherit}
.voice .kicker{margin-bottom:0}
.voice .lead{margin-top:0}
/* na sirokem zaslonu besedilo in bitje drug ob drugem, da odsek ostane EN zaslon (100svh); Emilio zrcalno */
@media (min-width:1000px){
#emma .sec-in,#emilio .sec-in{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,4vw,64px)}
#emilio .voice-txt{order:2}
}
.voice .d-name{
letter-spacing:calc(-.05em + (1 - var(--p)) * .25em);
opacity:calc(.15 + var(--p) * .85);
}
.voice .lead{opacity:clamp(0,calc((var(--p) - .35) * 3),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .35) * 3),1)) * 20px))}
.being-wrap{
position:relative;width:fit-content;max-width:100%;justify-self:center;z-index:0;pointer-events:none;
transform:translateX(calc((1 - var(--p)) * 30%)) scale(calc(.6 + var(--p) * .4)) rotate(calc((1 - var(--p)) * -18deg));
opacity:calc(.2 + var(--p) * .8);
}
/* B5: PRAVI bitji iz igre MOS (assets/bitja/bitja.js = emma.ts svila / emilio.ts kristal, dobesedni moduli, isti parametri)
na