/* ATEST INŽENJERING
   Paleta (boje tvrtke): tamni tonovi #1C1D2E, #222B3B, #30374D i #383A4A su osnova (tekst, gumbi i tamne
   plohe; u tamnom načinu podloga, sekcije i kartice), a naglasci su žuta #D0C014, hrđa #9A4114, spaljena
   narančasta #944B17 i maslinasta #968A3B. Žuta je ploha s tamnim tekstom (brojevi faza, odabrano, oznaka);
   tekst i istaknute linije u naglasku su hrđa na svijetloj i žuta na tamnoj podlozi.
   Kontrast (WCAG): tekst >= 4,5 : 1 na podlozi, sekcijama i karticama, naglašene crte i ikone >= 3 : 1.
   Ostale skripte boje čitaju iz ovih tokena (getComputedStyle). */
:root {
  --primary: #222B3B;          /* gumbi, tamne plohe (bijeli tekst 14 : 1) */
  --primary-hover: #9A4114;    /* hrđa: gumb pod pokazivačem (bijeli tekst 6,7 : 1) */
  --btn: var(--primary);       /* glavni gumb i kontrole obrasca (klizač, kvačica) */
  --on-btn: var(--on-dark);
  --accent: #D0C014;           /* žuta: plohe s tamnim tekstom (--on-accent 8,9 : 1), brojevi faza, odabrano */
  --on-accent: #1C1D2E;
  --accent-ink: #9A4114;       /* hrđa: naglasak u tekstu, fokus, istaknute linije (6,1 : 1 na podlozi) */
  --accent-2: #944B17;         /* spaljena narančasta: iskre i oznake (5,9 : 1) */
  --accent-soft: #F5F0CC;      /* odabrane opcije, hover */
  --rule: #B4B9C6;             /* jači rubovi */

  --paper: #F4F5F7;            /* osnovna pozadina, hladno bijela */
  --tint: #E7E9EE;             /* tonirane sekcije */
  --paper-2: var(--tint);
  --white: #FFFFFF;            /* kartice */
  --ink: #1C1D2E;              /* tekst */
  --steel: #4A5064;            /* sekundarni tekst */
  --line: #D8DBE2;             /* linije */
  --teal: var(--accent-ink);   /* staro ime (fokus, polja obrasca, žice ormara): naglasak u tekstu */
  --menu-line: var(--accent-ink);   /* istaknuta linija u meniju: hrđa u svijetlom, žuta u tamnom načinu */
  --on-dark: #FFFFFF;
  --fault: #C0492F;

  --display: "Bebas Neue", "Bebas Neue uski", "Bebas Neue arial", "Bebas Neue roboto", "Arial Narrow", sans-serif;
  --body: "Figtree", system-ui, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  /* zaobljenja: tri veličine */
  --r-s: 10px;                 /* polja obrasca, poruke, fokus */
  --r-l: 24px;                 /* kartice, obrazac, tonirane sekcije */
  --r-pill: 999px;             /* gumbi, čipovi, krugovi */
  --shadow: 0 1px 2px rgba(28, 29, 46, .05), 0 12px 32px -16px rgba(28, 29, 46, .2);
  /* pokret (struja kao nit vodilja): trajanja i krivulje, isti u static/js/main.js (Struja.T, Struja.E; rust/tests:
     tokeni_pokreta_isti_u_css_i_js). iskra: kratak bljesak; vod: crta se iscrta od izvora; trep: treperenje svjetiljke;
     ulaz: uključenje odsjeka; korak: razmak između elemenata niza */
  --t-iskra: 90ms;
  --t-vod: 360ms;
  --t-trep: 520ms;
  --t-ulaz: 480ms;
  --t-korak: 60ms;
  --e-ulaz: cubic-bezier(.16, 1, .3, 1);
  --e-vod: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

/* Tamni način: boje tvrtke kao plohe, žuta kao naglasak. Tema se postavlja na <html data-theme>
   (base.html: spremljeni izbor ili postavka sustava; gumb u zaglavlju). Kad stranica ima svoj
   tamni izgled, preglednici je ne zatamnjuju na silu (to je skrivalo nacrt u pozadini). */
:root[data-theme="dark"] {
    /* #1C1D2E podloga, #222B3B tonirane sekcije, #383A4A kartice, #30374D gumbi i tamne plohe */
    color-scheme: dark;
    --menu-line: var(--accent);
    --primary: #30374D;
    --primary-hover: #944B17;  /* spaljena narančasta (bijeli tekst 6,4 : 1) */
    --btn: var(--accent);      /* glavni gumb je žut: tamna ploha bi bila slabija od kartica i sporednih gumba */
    --on-btn: var(--on-accent);
    --accent-ink: #D0C014;     /* žuta u tekstu i fokusu (8,9 : 1 na podlozi) */
    --accent-2: #D0C014;       /* narančasta je na tamnoj podlozi preslaba (2,6 : 1) */
    --accent-soft: #46432A;
    --rule: #575C73;
    --paper: #1C1D2E;
    --tint: #222B3B;
    --white: #383A4A;
    --ink: #E9EBF2;
    --steel: #B1B5C6;
    --line: #43475B;
    --shadow: 0 1px 2px rgba(8, 9, 18, .3), 0 12px 32px -16px rgba(8, 9, 18, .6);
}

/* Fontovi su na našem poslužitelju (static/fonts, SIL Open Font License: OFL-BebasNeue.txt, OFL-Figtree.txt), ne na
   Google Fonts: posjetiteljeva adresa ne ide Googleu (GDPR), a CSP pušta fontove samo s ove stranice. Datoteke i
   podskupovi su isti koje Google šalje Chromeu (Bebas Neue v16, Figtree v9, promjenjiva debljina): latin i latin-ext
   (č ć đ š ž); svi su predučitani (templates/base.html), jer ih treba svaka stranica. ?v= je otisak datoteke (kao url_for,
   provjera to provjerava), pa smiju u predmemoriju zauvijek; nova datoteka = novi otisak u ovim redcima. */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/bebas-neue-latin-ext.woff2?v=df5e08843c") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/bebas-neue-latin.woff2?v=cfcb36960f") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/figtree-latin-ext.woff2?v=030fa5b851") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/figtree-latin.woff2?v=8451658029") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* neonski naslovi: rukopis cijevi Neon Pismo (tools/neon_build.py piše blok, ne mijenjati ručno) */
/* neon_build: font */
@font-face { font-family: "Neon Pismo"; font-style: normal; font-weight: 400; font-display: block;
  src: url("/static/fonts/neon-pismo.woff2?v=5354226e50") format("woff2"); }
/* /neon_build */
/* pisma bebas (zadano) i cijev (pričuva u datotekama, stranica ga ne bira; font se ne učitava dok se ne koristi);
   tools/neon_cijevi_build.py piše blokove */
/* neon_cijev: font */
@font-face { font-family: "Neon Cijev"; font-style: normal; font-weight: 400; font-display: block;
  src: url("/static/fonts/neon-cijev.woff2?v=eab0088647") format("woff2"); }
/* /neon_cijev */
/* neon_bebas: font */
@font-face { font-family: "Neon Bebas"; font-style: normal; font-weight: 400; font-display: block;
  src: url("/static/fonts/neon-bebas.woff2?v=5fda56df26") format("woff2"); }
/* /neon_bebas */

/* Zamjena za Bebas Neue dok se ne učita (font-display: swap): lokalni font povećan/smanjen tako da je redak
   jednako širok (izmjereno na naslovima stranice), s istim usponom i silazom, pa se naslovi pri zamjeni
   ne prelamaju drugačije i stranica se ne pomiče (CLS). Figtree je već jednako širok kao system-ui. */
@font-face { font-family: "Bebas Neue uski"; src: local("Arial Narrow"), local("ArialNarrow"); size-adjust: 93.5%; ascent-override: 101.6%; descent-override: 37.4%; line-gap-override: 0%; }
@font-face { font-family: "Bebas Neue arial"; src: local("Arial"), local("ArialMT"); size-adjust: 76.7%; ascent-override: 123.9%; descent-override: 45.6%; line-gap-override: 0%; }
@font-face { font-family: "Bebas Neue roboto"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 77.1%; ascent-override: 123.2%; descent-override: 45.4%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scrollbar-gutter: stable; }   /* traka za skrol ne mijenja širinu (npr. početna -> Usluge usred leta) */
/* Razmak ispod ljepljivog zaglavlja samo za sidra i elemente sadržaja (ne scroll-padding na html: s njim bi
   fokus na gumbu u zaglavlju skrolao stranicu, jer preglednik misli da ga zaglavlje skriva) */
#sadrzaj, main [id], main :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 80px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .92; margin: 0; color: var(--ink); }
/* naslov stranice (h1.page-title) i naslov odsjeka (h2, oko 70 % h1) */
h2, .page-title { letter-spacing: .005em; }
.page-title { font-size: clamp(3rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 4.9vw, 3.9rem); }
/* .h3: naslov druge razine koji izgleda kao h3 (kartice usluga), da se razine naslova ne preskaču */
h3, .h3 { font-family: var(--body); font-size: 1.2rem; font-weight: 650; line-height: 1.25; letter-spacing: normal; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* zamka za botove u obrascima (polje "web"): izvan zaslona, ne zauzima mjesto */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }


/* ---------- Header ---------- */
/* Zaglavlje je uvijek potpuno prozirno (bez podloge, ruba i zamućenja): lebdi iznad stranice, pa se animacije u
   pozadini (dvorana, tlocrt, 404) vide cijele, i ispod njega. Rub od 1 px ostaje proziran (visina kao prije). */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-word { height: 22px; width: auto; overflow: visible; }
/* Logotip iz obrisa slova Bebas Neue (tools/brand_build.py), jedan path po slovu. Pri učitavanju i skrolanju ga
   zamijene elektroni (main.js, platno .brand-elektroni i žica .brand-zica, niže). */
.brand-word path { fill: var(--ink); stroke: var(--ink); stroke-width: 30; stroke-linejoin: round; }  /* 30 jedinica fonta ~ 1 px */
/* Gumb teme. Tamni način: gumb je zidni prekidač (pločica, poluga dolje). Svijetli način: gumba nema, na njegovom
   mjestu visi upaljena svjetiljka (žica sa stropa zaglavlja, sjenilo, žuta žarulja, zrake). Klik (static/js/main.js):
   - paljenje (tt-pali): poluga preskoči gore i iz nje bljesne impuls; prekidač se izbriše, struja se spusti žicom
     sa stropa, iscrta se sjenilo pa žarulja; svjetiljka zatreperi kao cijev i ostane gorjeti (lamp-pali), a
     svijetla stranica se iz nje razlije u krugu;
   - gašenje (tt-gasi): žarulja se ugasi i iz nje se po stranici raširi mrak; svjetiljka se povuče prema stropu,
     a na njezinom mjestu se nacrta prekidač i poluga padne dolje.
   Crte su pathLength="1" (dasharray 1 2: pomak 0 = nacrtano, 1,5 ili -1,5 = izbrisano; 1 bi ostavio točku od okruglog kraja crte nulte duljine). Gumb je u prijelazu teme
   zaseban sloj (view-transition-name), pa se njegova animacija vidi uživo iznad svjetla koje se širi ili skuplja.
   (View Transitions: tema-pali / tema-gasi; krug iz žarulje je animacija pseudoelementa nove slike u main.js, s
   položajem i polumjerom u ključnim kadrovima: svojstvo na <html> bi iznova izračunalo stil cijele stranice.) */
.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; margin-left: auto;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink); cursor: pointer; transition: color .2s;
  view-transition-name: tema-gumb;
}
@media (hover: hover) { .theme-toggle:hover { color: var(--accent-ink); } }   /* na dodir ne ostaje obojen */
.theme-toggle svg { width: 40px; height: 40px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle :where(.tt-ploca, .tt-okvir, .lamp-zica, .lamp-sjenilo, .lamp-zarulja, .lamp-zrake) { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.theme-toggle .tt-poluga { fill: currentColor; stroke: none; }
.theme-toggle .tt-impuls { stroke: var(--accent); stroke-width: 2; opacity: 0; transform-origin: 20px 15px; transform-box: view-box; }
.theme-toggle .tt-struja { stroke: var(--accent); stroke-width: 3; stroke-dasharray: .2 2; stroke-dashoffset: .2; opacity: 0; }
.theme-toggle .lamp-zarulja { fill: var(--accent); }
/* svijetli način: prekidača nema (poluga je gore, nevidljiva) */
:root:not([data-theme="dark"]) .theme-toggle :where(.tt-ploca, .tt-okvir) { stroke-dashoffset: 1.5; }
:root:not([data-theme="dark"]) .theme-toggle .tt-poluga { opacity: 0; transform: translateY(-9.5px); }
/* tamni način: svjetiljke nema */
:root[data-theme="dark"] .theme-toggle :where(.lamp-zica, .lamp-sjenilo, .lamp-zarulja, .lamp-zrake) { stroke-dashoffset: 1.5; }
:root[data-theme="dark"] .theme-toggle .lamp-zarulja { fill-opacity: 0; }
/* paljenje (još u tamnom načinu): poluga, impuls, prekidač se izbriše, struja niz žicu, svjetiljka se iscrta */
:root[data-theme] .theme-toggle.tt-pali .tt-poluga { fill: var(--accent); transform: translateY(-9.5px); opacity: 0; transition: transform .12s cubic-bezier(.3, 0, .2, 1), fill .08s, opacity .14s .2s; }
:root[data-theme] .theme-toggle.tt-pali .tt-impuls { animation: tt-impuls .34s ease-out both; }
:root[data-theme] .theme-toggle.tt-pali :where(.tt-ploca, .tt-okvir) { stroke-dashoffset: -1.5; transition: stroke-dashoffset .2s .12s cubic-bezier(.5, 0, .7, .4); }
:root[data-theme] .theme-toggle.tt-pali .lamp-zica { stroke-dashoffset: 0; transition: stroke-dashoffset .16s .2s linear; }
:root[data-theme] .theme-toggle.tt-pali .tt-struja { animation: tt-struja .2s .2s linear both; }
:root[data-theme] .theme-toggle.tt-pali .lamp-sjenilo { stroke-dashoffset: 0; transition: stroke-dashoffset .2s .33s cubic-bezier(.3, 0, .2, 1); }
:root[data-theme] .theme-toggle.tt-pali .lamp-zarulja { stroke-dashoffset: 0; transition: stroke-dashoffset .12s .48s ease-out; }
@keyframes tt-impuls { 0% { opacity: 1; transform: scale(.4); stroke-width: 3; } 100% { opacity: 0; transform: scale(2.8); stroke-width: .5; } }
@keyframes tt-struja { 0% { opacity: 1; stroke-dashoffset: .2; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1.5; } }
/* gašenje (još u svijetlom načinu): žarulja se ugasi, svjetiljka se povuče, prekidač se nacrta, poluga padne */
:root[data-theme] .theme-toggle.tt-gasi .lamp-zarulja { fill-opacity: 0; stroke-dashoffset: 1.5; transition: fill-opacity .06s, stroke-dashoffset .14s .06s ease-in; }
:root[data-theme] .theme-toggle.tt-gasi .lamp-zrake { stroke-dashoffset: 1.5; transition: stroke-dashoffset .1s; }
:root[data-theme] .theme-toggle.tt-gasi .lamp-sjenilo { stroke-dashoffset: 1.5; transition: stroke-dashoffset .16s .06s ease-in; }
:root[data-theme] .theme-toggle.tt-gasi .lamp-zica { stroke-dashoffset: 1.5; transition: stroke-dashoffset .14s .16s ease-in; }
:root[data-theme] .theme-toggle.tt-gasi :where(.tt-ploca, .tt-okvir) { stroke-dashoffset: 0; transition: stroke-dashoffset .22s .2s cubic-bezier(.3, 0, .2, 1); }
:root[data-theme] .theme-toggle.tt-gasi .tt-poluga { opacity: 1; transform: none; fill: currentColor; transition: opacity .1s .32s, transform .12s .38s cubic-bezier(.3, 0, .2, 1); }
/* svjetiljka s težinom (klasa lamp-fizika, static/js/main.js): ne iscrtava se i ne briše, nego padne sa stropa
   (sjenilo, žarulja i žica su cijeli, a dok su iza gornjeg ruba ne vide se), odnosno se uže namota gore; struja
   krene niz uže kad ga svjetiljka napne, a žarulja se ugasi prije namatanja */
:root[data-theme] .theme-toggle.lamp-fizika.tt-pali :is(.lamp-zica, .lamp-sjenilo, .lamp-zarulja) { stroke-dashoffset: 0; transition: none; }
:root[data-theme] .theme-toggle.lamp-fizika.tt-pali .tt-struja { animation: tt-struja .16s .4s linear both; }
:root[data-theme] .theme-toggle.lamp-fizika.tt-gasi :is(.lamp-zica, .lamp-sjenilo) { stroke-dashoffset: 0; transition: none; }
:root[data-theme] .theme-toggle.lamp-fizika.tt-gasi .lamp-zarulja { fill-opacity: 0; stroke-dashoffset: 0; transition: fill-opacity .06s; }
/* žica od objesišta do ruba preglednika (inače iznad ruba zaslona, vidi se tek pri elastičnom skrolu na vrhu): ima je
   dok svjetiljka visi ili pada i dok se namata; ne hvata klikove */
.theme-toggle .lamp-strop { pointer-events: none; }
:root[data-theme="dark"] .theme-toggle:not(.tt-pali):not(.tt-gasi) .lamp-strop { visibility: hidden; }
/* gumb je u prijelazu teme svoj sloj: uživo, bez pretapanja stare i nove slike */
::view-transition-group(tema-gumb) { animation: none; }
::view-transition-old(tema-gumb) { display: none; }
::view-transition-new(tema-gumb) { animation: none; }
.theme-toggle.lamp-pali .lamp-zarulja { animation: lamp-zarulja .6s linear both; }
.theme-toggle.lamp-pali .lamp-zrake { animation: lamp-zrake .6s linear both; }
@keyframes lamp-zarulja { 0% { fill-opacity: 0; } 12% { fill-opacity: .85; } 28% { fill-opacity: .12; } 48% { fill-opacity: 1; } 60% { fill-opacity: .45; } 74%, 100% { fill-opacity: 1; } }
@keyframes lamp-zrake { 0% { opacity: 0; } 12% { opacity: .85; } 28% { opacity: .12; } 48% { opacity: 1; } 60% { opacity: .45; } 74%, 100% { opacity: 1; } }
:root.tema-pali::view-transition-old(root), :root.tema-gasi::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
:root.tema-pali::view-transition-new(root), :root.tema-gasi::view-transition-new(root) { mix-blend-mode: normal; animation: none; }
/* u prijelazu teme (main.js) stranica bez CSS prijelaza; gumb teme ima svoj slijed */
:root.tema-tiho :not(.theme-toggle, .theme-toggle *), :root.tema-tiho :not(.theme-toggle, .theme-toggle *)::before,
:root.tema-tiho :not(.theme-toggle, .theme-toggle *)::after { transition: none !important; }

/* Gumb "Izbornik": dvije crte postanu X */
.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; margin-left: 10px; padding: 0 16px 0 18px;
  border: 1px solid var(--rule); border-radius: var(--r-pill); background: transparent; color: var(--ink);
  font: 600 .9rem var(--body); cursor: pointer; transition: background .2s, border-color .2s;
}
/* gumbi zaglavlja: bez plavog kvadrata koji mobilni preglednik bljesne pri dodiru (fokus tipkovnicom ostaje) */
.menu-toggle, .theme-toggle { -webkit-tap-highlight-color: transparent; }
/* Zaglavlje se pri skrolanju makne s puta sadržaju (static/js/main.js postavlja klase i pomake --h*, --zica-*):
   - natpis (na svakoj širini zaslona, .is-zica): raspadne se u elektrone koji se sliju u tanku žicu u lijevom rubu i
     teku njome prema dolje; dok je stranica skrolana žicom mirno teče struja, a na vrhu stranice se elektroni vrate
     uz žicu i ponovno slože u natpis (main.js, elektroni; žica i platno niže);
   - .is-obod (širok zaslon, slobodan rub oko .wrap): u desnom rubu gumb teme, a ispod njega izbornik kao krug s
     vodoravnim natpisom ispod;
   - .is-skriven (uži zaslon): gumbi se pri skrolanju prema dolje dignu iz kadra, pri skrolanju gore vrate.
   Gumbi samo transform (raspored se ne mijenja), s malim odskokom. Prazan dio zaglavlja ne hvata klikove. Dok je
   izbornik otvoren ili je u zaglavlju fokus tipkovnice, sve je na mjestu. */
.site-header { --h-ease: cubic-bezier(.2, 1.12, .3, 1); pointer-events: none; }
.site-header .brand, .site-header .theme-toggle, .site-header .menu-toggle { pointer-events: auto; }
.site-header.is-zica .brand { pointer-events: none; }
.site-header .theme-toggle { transition: transform .62s var(--h-ease) .05s, opacity .28s ease .05s, color .2s; }
.site-header .menu-toggle { position: relative; transition: transform .62s var(--h-ease) .1s, opacity .28s ease .1s, background .2s, border-color .2s; }
/* širok zaslon: gumb teme i izbornik (krug, natpis ispod) u desnom rubu */
.site-header.is-obod .theme-toggle { transform: translate(var(--ht-x, 0), var(--ht-y, 0)); }
.site-header.is-obod .menu-toggle { transform: translate(var(--hm-x, 0), var(--hm-y, 0)); border-color: transparent; background: transparent; }
.site-header .menu-toggle::before {
  content: ""; position: absolute; left: 50%; top: -1px; z-index: -1; box-sizing: border-box; width: 40px; height: 40px; margin-left: -20px;
  border: 1px solid var(--rule); border-radius: var(--r-pill); opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .2s ease, transform .4s var(--h-ease), background .2s;
}
.site-header.is-obod .menu-toggle::before { opacity: 1; transform: none; transition-delay: .22s; }
.site-header .menu-toggle-label, .site-header .menu-toggle-icon { transition: transform .5s var(--h-ease) .12s; }
.site-header.is-obod .menu-toggle-label { transform: translate(var(--hml-x, 0), 34px); }
.site-header.is-obod .menu-toggle-icon { transform: translateX(var(--hmi-x, 0)); }
@media (hover: hover) {
  .site-header.is-obod .menu-toggle:hover { background: transparent; }
  .site-header.is-obod .menu-toggle:hover::before { background: var(--tint); }
}
/* klik hvataju samo vidljivi dijelovi (okvir pilule je širi od onoga što se vidi u rubu i seže u sadržaj): ikona
   izbornika (krug od 40 px oko nje) i natpis; fokus tipkovnicom je obrub kruga */
.site-header.is-obod .menu-toggle { pointer-events: none; }
.site-header.is-obod .menu-toggle-icon, .site-header.is-obod .menu-toggle-label { pointer-events: auto; }
.site-header.is-obod .menu-toggle-icon::after { content: ""; position: absolute; left: -11px; right: -11px; top: -15px; bottom: -15px; }
.site-header.is-obod .menu-toggle:focus-visible { outline: none; }
.site-header.is-obod .menu-toggle:focus-visible::before { outline: 3px solid var(--teal); outline-offset: 3px; }
/* gumbi na mjestu samo dok je u zaglavlju fokus tipkovnice (:focus-visible); dodir ili klik gumba (tema, izbornik)
   ostavi fokus na gumbu, ali skrivanje pri skrolanju i dalje radi */
.site-header.is-skriven .theme-toggle, .site-header.is-skriven .menu-toggle { transform: translateY(-120%); opacity: 0; pointer-events: none; }
.site-header.is-skriven:has(:focus-visible) .theme-toggle, .site-header.is-skriven:has(:focus-visible) .menu-toggle { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .site-header .menu-toggle-label, .site-header .menu-toggle-icon, .site-header .menu-toggle::before { transition: none; }
  .site-header .theme-toggle, .site-header .menu-toggle { transition: opacity .2s, color .2s, background .2s, border-color .2s; }
}
.menu-toggle:hover { background: var(--tint); }
.menu-toggle-icon { position: relative; width: 18px; height: 10px; }
/* Dvije crte postanu X u dva koraka, oko svoje sredine: pri otvaranju se primaknu u jednu, pa zakrenu;
   pri zatvaranju se prvo vrate iz X, pa razmaknu (bez međuoblika nalik strelici) */
.menu-toggle-icon span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: var(--r-pill); background: currentColor; transform-origin: 50% 50%;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), top .14s cubic-bezier(.4, 0, .2, 1) .16s;
}
.menu-toggle-icon span:first-child { top: 0; }
.menu-toggle-icon span:last-child { top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span { transition: top .14s cubic-bezier(.4, 0, .2, 1), transform .18s cubic-bezier(.4, 0, .2, 1) .12s; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { top: 4px; transform: rotate(-45deg); }

/* Gumbi zaglavlja (tema, izbornik) se iscrtaju tek kad moduli s krova slete i pretope se u kartice
   (static/js/main.js: klasa ctl-on na <html>). Dotad ih nema, ni za miš ni za tipkovnicu, pa se uvod, let
   i slijetanje ne mogu prekinuti; pri odlasku iz izbornika (is-leaving, static/js/prozori.js) se ugase.
   Iscrtavanje (ctl-draw): obris gumba slijeva nadesno, zatim potezi ikone i natpis, pa se svjetiljka upali. Pričuva: ako skripta
   ne javi, pokažu se sami nakon 12 s. Bez animacija (klasa js se makne) su tu odmah. */
.js:not(.ctl-on) .theme-toggle, .js:not(.ctl-on) .menu-toggle { visibility: hidden; animation: ctl-pricuva 0s 12s forwards; }
@keyframes ctl-pricuva { to { visibility: visible; } }
.is-leaving .theme-toggle, .is-leaving .menu-toggle { opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .18s; }
.ctl-draw .menu-toggle { animation: ctl-obris .5s .1s cubic-bezier(.45, 0, .2, 1) backwards; }   /* poslije bez clip-patha (natpis u .is-obod je ispod gumba) */
@keyframes ctl-obris { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
/* gumb teme se iscrta: u tamnom načinu prekidač (pločica, pa poluga); u svijetlom struja niz žicu sa stropa, sjenilo,
   žarulja, pa svjetiljka zatreperi i ostane gorjeti */
:root[data-theme="dark"].ctl-draw .theme-toggle :where(.tt-ploca, .tt-okvir) { animation: ctl-crtaj .45s .3s cubic-bezier(.3, 0, .2, 1) both; }
:root[data-theme="dark"].ctl-draw .theme-toggle .tt-poluga { animation: ctl-natpis .25s .66s ease-out both; }
:root:not([data-theme="dark"]).ctl-draw .theme-toggle .lamp-zica { animation: ctl-crtaj .18s .28s linear both; }
:root:not([data-theme="dark"]).ctl-draw .theme-toggle .tt-struja { animation: tt-struja .2s .28s linear both; }
:root:not([data-theme="dark"]).ctl-draw .theme-toggle .lamp-sjenilo { animation: ctl-crtaj .26s .44s cubic-bezier(.3, 0, .2, 1) both; }
:root:not([data-theme="dark"]).ctl-draw .theme-toggle .lamp-zarulja { animation: ctl-crtaj .14s .66s ease-out both, lamp-zarulja .6s .82s linear both; }
:root:not([data-theme="dark"]).ctl-draw .theme-toggle .lamp-zrake { animation: lamp-zrake .6s .82s linear both; }
@keyframes ctl-crtaj { from { stroke-dashoffset: 1.5; } to { stroke-dashoffset: 0; } }
/* svjetiljka s težinom se ne iscrtava: padne sa stropa (main.js, ~0,3 s), struja kad uže napne, pa zatreperi */
:root:not([data-theme="dark"]).ctl-draw .theme-toggle.lamp-fizika :is(.lamp-zica, .lamp-sjenilo) { animation: none; }
:root:not([data-theme="dark"]).ctl-draw .theme-toggle.lamp-fizika .tt-struja { animation: tt-struja .16s .64s linear both; }
:root:not([data-theme="dark"]).ctl-draw .theme-toggle.lamp-fizika .lamp-zarulja { animation: lamp-zarulja .6s .82s linear both; }
.ctl-draw .menu-toggle-label { animation: ctl-natpis .35s .4s ease-out both; }
@keyframes ctl-natpis { from { opacity: 0; } }
/* crte izbornika se iscrtaju slijeva otkrivanjem (clip-path), ne skaliranjem: transform ostaje za X, pa
   gumb dodirnut dok se još iscrtava ne pokaže "<" (okret oko lijevog ruba) */
.ctl-draw .menu-toggle-icon span { animation: ctl-crta .35s .45s cubic-bezier(.2, .7, .2, 1) both; }
.ctl-draw .menu-toggle-icon span:last-child { animation-delay: .55s; }
@keyframes ctl-crta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Preklopni meni: isti kao na početnoj, preko zamućene stranice. Odmotava se odozgo samo transformacijama
   (static/js/main.js: ploha i sadržaj se pomiču u suprotnim smjerovima), bez trake za skrol dok traje. */
.menu-overlay {
  position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; overflow-y: auto; overflow-x: hidden;
  padding: 84px 0 32px;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.menu-overlay[hidden] { display: none; }
.menu-overlay.is-rolling { overflow: hidden; }
.menu-overlay-inner { width: 100%; }
/* mobitel i tablet: bez zamućenja (preračunavalo bi se u svakom kadru preko pozadine koja se okreće),
   ploha je zato gotovo neprozirna. Stranica ispod se ne skriva: dok je izbornik otvoren (is-menu-open)
   njezine animacije stoje, pa se ionako ne iscrtava, a skrivanje i otkrivanje bi pri otvaranju i
   zatvaranju preračunalo i ponovno iscrtalo cijelu stranicu (izmjereno: sporije). */
@media (max-width: 1024px) {
  .menu-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--paper) 96%, transparent); }
}
.menu-item[aria-current="page"] .menu-rule::after { transform: scaleX(1); }

/* Linije menija su žice koje se trzaju mišem (static/js/main.js, menuFx) */
.menu-rule.is-wave { height: 40px; bottom: -20px; background: none; }
.menu-rule.is-wave::after { display: none; }
.menu-rule.is-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.menu-rule.is-wave path { fill: none; stroke: var(--rule); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.menu-item:hover .menu-rule.is-wave path, .menu-item[aria-current="page"] .menu-rule.is-wave path { stroke: var(--menu-line); }
/* trenutna stranica: opis u boji njezine istaknute linije (bez natpisa; aria-current je dovoljan čitaču zaslona) */
.menu-item[aria-current="page"] .menu-desc { color: var(--menu-line); }

/* ---------- Početna: veliki meni preko nacrta ---------- */
.landing { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); display: flex; align-items: center; padding: 16px 0 40px; }   /* zaglavlje 68 px + rub 1 px */
.landing-inner { width: 100%; }
.menu { display: grid; }
.menu-item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 32px;
  padding: clamp(8px, 1.4vw, 16px) 0; color: var(--ink); text-decoration: none;
}
.menu-label {
  display: block; overflow: hidden; padding-top: .06em;
  font: 400 clamp(3rem, 7vw, 6.6rem)/.9 var(--display); letter-spacing: .01em; white-space: nowrap;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.menu-label > span { display: inline-block; }
.menu-desc { color: var(--steel); font-size: .95rem; text-align: right; max-width: 17em; padding-bottom: .5em; }
.menu-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform-origin: left; }
.menu-rule::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--menu-line);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.menu-item:hover .menu-label, .menu-item:focus-visible .menu-label { transform: translateX(16px); }
.menu-item:hover .menu-rule::after, .menu-item:focus-visible .menu-rule::after { transform: scaleX(1); }
.menu-item:focus-visible { outline-offset: 6px; border-radius: var(--r-s); }
.landing-contact { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: clamp(18px, 3vw, 36px) 0 0; color: var(--steel); }
.landing-contact a { color: inherit; text-decoration: none; font-weight: 500; }
.landing-contact a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem/1 var(--body); padding: 15px 26px; border-radius: var(--r-pill);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-dark); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

/* ---------- Početna: 3D dvorana (static/js/pocetna.js, static/js/dvorana3d.js) ---------- */
.landing { position: relative; }
.landing .landing-inner { position: relative; z-index: 1; }
.v5-scene {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  /* crtež bez boja (static/js/dvorana3d.js ih čita pri stvaranju i promjeni teme): crte, tanke crte, papir */
  --v5-line: rgba(26, 35, 38, .78); --v5-thin: rgba(26, 35, 38, .32); --v5-fill: var(--paper);
}
:root[data-theme="dark"] .v5-scene {
  --v5-line: rgba(255, 255, 255, .82); --v5-thin: rgba(255, 255, 255, .34); --v5-fill: var(--paper);
}
.v5-scene.v5-over { z-index: 40; }              /* nastavak scene preko stranice Usluge */
/* slika dvorane s prethodne stranice (templates/base.html): na istom mjestu kao WebGL platno, dok se scena ne stvori */
img.v5-slika { display: block; }
.v5-scene.v5-let { z-index: 41; }               /* moduli u letu (static/js/prozori.js), iznad dvorane */
/* Bez grafičke kartice (softversko crtanje; templates/base.html glGrij, klasa bez-gpu na <html>) se 3D ne crta: iza
   stranice je mirni crtež dvorane (static/img/dvorana-*.webp, snimka pozadine Usluga kao maska), u boji crta teme i na
   razini dvorane u pozadini (20 %). Ne na stranicama s 2D tlocrtom (O nama), kao ni 3D dvorana. Slika se preuzima
   samo s klasom bez-gpu. */
.bez-gpu body:not(:has(.nacrt-bg))::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ink); opacity: .16;
  -webkit-mask: url("/static/img/dvorana-usko.webp?v=a70b863887") center / contain no-repeat; mask: url("/static/img/dvorana-usko.webp?v=a70b863887") center / contain no-repeat;
}
@media (min-aspect-ratio: 1 / 1) {
  .bez-gpu body:not(:has(.nacrt-bg))::before { -webkit-mask-image: url("/static/img/dvorana-siroko.webp?v=e16cbfcc99"); mask-image: url("/static/img/dvorana-siroko.webp?v=e16cbfcc99"); }
}
/* dvorana u pozadini (prozori.js): bez 2D nacrta; pri prijelazu sadržaj izblijedi dok se moduli dižu s krova
   (dvorana ostaje), a sadržaj odredišta (static/js/prijelaz.js, pričuva ?paneli=1 u templates/base.html) je skriven dok
   moduli ne krenu u ciljeve, pa se pojavi dok lete (prozori.js: posvijetli) */
.has-3d-bg .nacrt-bg { display: none; }
.is-lifting main, .is-lifting .site-footer { opacity: 0; transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .is-lifting main, .is-lifting .site-footer { transition: none; } }
.is-dolazak main, .is-dolazak .site-footer { opacity: 0; }
/* prelazak između stranica: preglednik pretopi staru stranicu u novu (View Transitions) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.landing-inner.v5-wait { opacity: 0; visibility: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 8vw, 120px);
}
/* Tlocrt dvorane Rečica s instalacijama u pozadini cijele stranice (static/js/nacrt.js). Fiksan je, pa
   se vidi iza cijele stranice. 100lvh: mobilna adresna traka ga ne mijenja. Sve pozadinske animacije
   (tlocrt, instalacije, 3D dvorana u static/js/prozori.js) su na 20 % (--bg-razina), da nisu u prvom
   planu; zidovi su i unutar toga tihi (sivi). Instalacije koje se puštaju u pogon (rasvjeta, razvodni
   ormari, ozvučenje) su u jednoj boji: tamnoplava u svijetlom načinu, žuta u tamnom; priključnice i
   sklopke su u boji crteža (sive). .nacrt-prostor je platno instalacija u prostoru, preko tlocrta, dok
   se iz njega slaže 3D dvorana (static/js/nacrt.js). */
.nacrt-bg, .nacrt-prostor {
  --bg-razina: .2;
  position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh;
  /* --nacrt-hide: skrivanje dok se iz tlocrta slaže 3D dvorana i natrag (static/js/nacrt.js, prozori.js) */
  pointer-events: none; opacity: calc(var(--bg-razina) * var(--nacrt-hide, 1));
}
.nacrt-bg {
  transition: opacity .25s;
  --nacrt-arh: rgba(28, 29, 46, .25);
  --nacrt-tanko: rgba(28, 29, 46, .15);
  --nacrt-svjetlo: #30374D;      /* sjaj upaljene svjetiljke */
  --nacrt-sjaj: .8;              /* jačina sjaja (tamna boja na svijetloj podlozi: slabije) */
  --nacrt-svjetiljka: #222B3B;   /* simbol svjetiljke */
  --nacrt-jaka: #222B3B;         /* razvodni ormari */
  --nacrt-slaba: #30374D;        /* ozvučenje: centrala, kabeli, zvučnici, antene, valovi */
  --nacrt-uticnice: rgba(28, 29, 46, .6);    /* priključnice i sklopke: boja crteža */
}
/* mobitel i tablet: platno veličine crteža u sredini zaslona miruje (static/js/nacrt.js). Pozadina je veća od
   zaslona, pa su crte mekane (nacrt.js ih zamuti unutar platna, jednom, ne u svakom kadru) i ne smetaju tekstu. */
:root[data-theme="dark"] .nacrt-bg {
  --nacrt-arh: rgba(255, 255, 255, .45); --nacrt-tanko: rgba(255, 255, 255, .275);
  --nacrt-svjetlo: #D0C014; --nacrt-sjaj: 1; --nacrt-svjetiljka: #D0C014; --nacrt-jaka: #D0C014; --nacrt-slaba: #D0C014;
  --nacrt-uticnice: rgba(255, 255, 255, .6);
}
main, .site-footer { position: relative; z-index: 1; }
.hero-title {
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  letter-spacing: .005em;
  line-height: .88;
  margin-bottom: 1.6rem;
}
.hero-title .line { display: block; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 34em; color: var(--steel); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(20px, 2.5vw, 36px) 0; }
.section-tint { background: var(--paper-2); border-radius: var(--r-l); margin: 0 clamp(8px, 1.5vw, 20px); }
/* uski rub (žica logotipa, main.js .is-zica, u lijevom rubu): ploče od ruba do ruba zaslona, da žica ne ide uz njihov
   lijevi rub i zaobljene kutove (kutovi ostaju); sadržaj ploče je tada poravnat s ostatkom stranice */
@media (max-width: 1299px) { .section-tint { margin-left: 0; margin-right: 0; } }   /* žica >= 40 px od ploče */
.section-head { max-width: 760px; margin-bottom: clamp(20px, 2.5vw, 32px); }
.section-lede { color: var(--steel); margin-top: 1rem; font-size: 1.1rem; }

/* Kartica: jedan izgled za usluge, sustave, faze dokumentacije i područja rada (O nama). Kartice usluga i sustava su
   ciljevi modula s krova (static/js/prozori.js: panel preuzme zaobljenje kartice) */
.kartica { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: 26px; }
.kartica :is(h2, h3) { margin-bottom: 10px; }
.kartica p { color: var(--steel); font-size: .98rem; }
.kartica > :last-child, .kartica p:last-child { margin-bottom: 0; }

/* Usluge */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* Postupak */
.process-wrap { position: relative; }
/* linija spaja kartice faza u visini brojeva (rub 1 px + padding 26 px + pola broja 20 px), vidi se između kartica */
/* linija procesa i vod faza počinju i završavaju iza prve i zadnje kartice (24 px od ruba), pa im krajevi ne vire */
.process-line { position: absolute; left: 24px; top: 45px; width: calc(100% - 48px); height: 4px; overflow: visible; }
.process-line line { stroke: var(--rule); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* faze u jednom redu, koliko ih ima (bez style atributa: CSP style-src bez 'unsafe-inline'); --i: redni broj za treptaj */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; position: relative; }
.process > :nth-child(2) { --i: 1; } .process > :nth-child(3) { --i: 2; } .process > :nth-child(4) { --i: 3; }
.process > :nth-child(5) { --i: 4; } .process > :nth-child(6) { --i: 5; } .process > :nth-child(7) { --i: 6; } .process > :nth-child(8) { --i: 7; }
.step-no {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  background: var(--accent); border-radius: var(--r-pill);
  font: 400 1.25rem/1 var(--display); padding-top: 2px; color: var(--on-accent); margin-bottom: 18px;
}

/* Sustavi A / B / C */
.systems { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: clamp(28px, 4vw, 56px); }
.system { padding-bottom: 18px; }
.system h3 { margin-bottom: 14px; }
.system ul { list-style: none; margin: 0; padding: 0; }
.system-b ul { columns: 2; column-gap: 32px; }
.system-d { grid-column: 1 / -1; }
.system-d ul { columns: 2; column-gap: 32px; }
.v5-gl { pointer-events: none; }
.system li { padding: 8px 0; border-bottom: 1px solid var(--line); break-inside: avoid; color: var(--steel); }

/* Solarni kalkulator */
.solar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.solar-contact .btn { justify-self: start; }
.solar-form { display: grid; gap: 26px; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-weight: 600; margin-bottom: 10px; padding: 0; }
.field small { display: block; color: var(--steel); margin-top: 8px; font-size: .88rem; }
.range-row { display: flex; align-items: center; gap: 16px; }
.range-row input[type=range] { flex: 1; accent-color: var(--btn); min-width: 0; }
.num-unit { display: inline-flex; align-items: center; gap: 6px; font-family: var(--body); font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--steel); white-space: nowrap; }
.num-unit input {
  width: 6.5em; font: 600 1rem var(--body); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 12px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); font-size: .92rem; font-weight: 500; transition: background .15s, color .15s, border-color .15s;
  vertical-align: top;   /* panel (.prozor, overflow) na inline-blocku ne pomiče bazu retka */
}
.chips input:checked + span { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.chips input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.chips label:hover input:not(:checked) + span { border-color: var(--rule); }   /* odabrani zadrži svoj rub */
.check { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--btn); }


/* Oznake u kontakt obrascu */
.form-tags { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-tags legend { font-weight: 600; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.form-tags .chips span { padding: 6px 12px; font-size: .85rem; background: var(--paper); }

/* O nama: područja rada (tri kartice) */
.focus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.focus-title { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
#podrucja { padding-top: 0; }


/* Usluge: montaža ormara (templates/_ormar.html, static/js/ormar.js) */
.ormar-section { background: var(--paper); --orm-wire: var(--teal); }
:root[data-theme="dark"] .ormar-section { --orm-wire: var(--accent); }
.ormar-track { height: 260vh; }
/* popis usluga uz ormar: na širokom zaslonu stupac lijevo od ormara, inače iznad njega */
.ormar-text { padding: 0 var(--gutter) 40px; columns: 2 280px; column-gap: 40px; }
.ormar-usluga { break-inside: avoid; padding: 0 0 22px; }
.ormar-usluga h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 650; line-height: 1.3; }
.ormar-usluga ul { list-style: none; margin: 0; padding: 0; color: var(--steel); font-size: .95rem; line-height: 1.45; }
.ormar-usluga li { padding: 1px 0; }
.ormar-usluga li ul { padding: 2px 0 2px 14px; border-left: 1px solid var(--line); margin: 3px 0 2px 2px; }
@media (min-width: 1100px) {
  /* prvi stupac je razmak do lijevog ruba .wrap, pa popis počinje točno ispod uvoda sekcije */
  .ormar-layout {
    display: grid;
    grid-template-columns: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) 320px minmax(0, 1fr);
  }
  .ormar-text { grid-column: 2; columns: auto; padding: 0 0 40px; }
  .ormar-track { grid-column: 3; height: auto; }   /* visok koliko popis; ormar ostaje zalijepljen uz popis */
  .ormar-usluga { padding-bottom: 36px; }
  .ormar-track .ormar-sticky { padding-left: 32px; }
}
/* okvir je visok koliko ormar (omjer 1660 : 1000), pa nema praznine iznad i ispod njega */
.ormar-sticky { position: sticky; top: 76px; display: grid; place-items: center; padding: 8px var(--gutter) 16px; }
/* harmonika usluga (static/js/ormar.js, usluge uz ormar na kraju datoteke): na širokom zaslonu stalno otvorena */
details.ormar-usluga > summary { list-style: none; }
details.ormar-usluga > summary::-webkit-details-marker { display: none; }
.ormar-hint { margin: 0; padding: 4px var(--gutter) 0; color: var(--steel); font-size: .9rem; text-align: center; }
.ormar-show { margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* isticanje opreme vezane uz uslugu ("Pokaži u ormaru") */
.ormar-svg.is-live .orm-part, .ormar-svg.is-live .orm-wires { transition: opacity .3s; }
.ormar-svg.is-focusing .orm-part:not(.is-focus), .ormar-svg.is-focusing .orm-wires { opacity: .18 !important; }
.ormar-svg .orm-part.is-focus > * { stroke: var(--accent); stroke-width: 2; }
@media (min-width: 1100px) {
  .ormar-hint, .ormar-show { display: none; }
  details.ormar-usluga > summary { cursor: default; }
}
/* mobitel i tablet: usluge kao harmonika, ispod nje ormar (nije zalijepljen); kabel uz popis vodi do ormara */
@media (max-width: 1099px) {
  .ormar-section { padding-bottom: 8px; }
  .ormar-layout { display: flex; flex-direction: column; position: relative; }
  .ormar-track { height: auto; }
  .ormar-sticky { position: relative; top: auto; padding: 28px 8px 0; }
  .ormar-text { padding: 0 var(--gutter) 0 calc(var(--gutter) + 18px); columns: auto; display: grid; align-items: start; }
  details.ormar-usluga { padding: 0; border-top: 1px solid var(--line); }
  details.ormar-usluga:last-child { border-bottom: 1px solid var(--line); }
  details.ormar-usluga > summary { position: relative; padding: 13px 34px 13px 0; cursor: pointer; }
  details.ormar-usluga > summary h3 { margin: 0; font-size: 1rem; }
  details.ormar-usluga > summary::after {
    content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border: solid var(--steel); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s, margin .2s;
  }
  details.ormar-usluga[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
  details.ormar-usluga > ul { padding: 0 0 14px; }
  details.ormar-usluga > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ormar-cable { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .ormar-cable path { fill: none; stroke: var(--orm-wire); stroke-width: 1.6; stroke-linecap: round; }
  .ormar-cable circle { fill: var(--orm-wire); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .ormar-text { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  details.ormar-usluga:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
/* Okvir ormara (div, tools/ormar_build.py) reže na svoj pravokutnik; u njemu je kadar .ormar-kamera, točno
   1660 : 1000 i u sredini okvira (kad visinu ograniči max-height, sa strana ostane prazno, kao viewBox). Slojevi
   kadra odozdo: platno montaže (static/js/ormar.js), kućište (svg.orm-plan), komponente (.orm-dio, svaka svoj
   svg i sloj leta), vodiči (svg.orm-vodici) i krila (.orm-krilo). Svaki sloj je svg veličine kadra s istim
   viewBoxom, pa ih preglednik na piksele zaslona poravna jednako, a izmjena u jednom ne iscrtava ponovno ostale.
   Približavanje na kraju montaže je transform kadra, a zakretanje krila transform omota krila (oko šarke, blok
   krila niže): ni jedno ni drugo ne preračunava SVG. Klik prolazi kroz omote (pointer-events), a upravljanje na
   krilima ga prima prema pravilima niže. */
.ormar-svg { display: block; position: relative; width: 100%; max-width: 1400px; height: auto; aspect-ratio: 1660 / 1000; max-height: calc(100svh - 110px); overflow: hidden; container-type: size; }
/* transform kadra je uvijek tu (i kad je jednak nuli), pa početak približavanja ne mijenja građu slojeva */
.ormar-kamera { position: absolute; left: calc(50cqw - min(50cqw, 83cqh)); top: calc(50cqh - min(50cqh, 30.1205cqw)); width: min(100cqw, 166cqh); aspect-ratio: 1660 / 1000; transform: scale(1); transform-origin: 0 0; }
@supports not (width: 1cqw) { .ormar-kamera { left: 0; top: 0; width: 100%; height: 100%; } }
.ormar-kamera > *, .ormar-kamera > div > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ormar-kamera > div, .orm-platno { pointer-events: none; }
/* krila: šarka i početni (otvoreni) položaj; blok piše tools/ormar_build.py (ne mijenjati ručno), ormar.js mijenja transform */
/* ormar_build: krila */
.orm-krilo[data-side="L"] { transform-origin: 19.8795% 14%; transform: matrix(-0.3420,0.0940,0,1,0,0); }
.orm-krilo[data-side="R"] { transform-origin: 80.7229% 14%; transform: matrix(-0.3420,-0.0940,0,1,0,0); }
/* /ormar_build */
.ormar-svg * { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.ormar-svg .orm-frame > * { stroke: var(--steel); }
.ormar-svg .orm-wires > * { stroke: var(--orm-wire); stroke-width: 1.4; }
.ormar-svg .orm-part { transform-box: fill-box; transform-origin: center; }
/* dok ormar čeka montažu, njezini elementi su skriveni od prvog iscrtavanja; static/js/ormar.js ih otkriva
   redom (visibility crte u stilu elementa; komponentu prozirnost omota, koja se ne nasljeđuje, pa se pri
   otkrivanju ne preračunava cijela komponenta). Bez skripte (klasa js na <html>) i bez animacija se ništa ne skriva. */
@media (prefers-reduced-motion: no-preference) {
  .ormar-svg.orm-montaza:where(.js *) :is(.orm-frame, .orm-wires, .door-in) > * { visibility: hidden; }
  .ormar-svg.orm-montaza:where(.js *) .orm-dio { opacity: 0; }
}
.ormar-svg .orm-estop { fill: var(--fault); stroke: var(--fault); }
.ormar-svg .orm-green { fill: #3E9B63; stroke: #3E9B63; }
.ormar-svg .orm-yellow { fill: #F2C94C; }
.ormar-svg .orm-screen { fill: #12343B; stroke: #12343B; }
.ormar-svg .orm-wires > .orm-net { stroke: var(--accent); stroke-dasharray: 4 3; }
.ormar-svg .orm-wires > .orm-cable { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.ormar-svg .orm-term { fill: var(--ink); stroke: none; }
.ormar-svg .orm-door .door-in > * { stroke: var(--steel); }
/* upravljanje na vratima: aktivno tek kad su vrata zatvorena (.is-live) */
.ormar-svg .orm-ctl, .ormar-svg .orm-handle { pointer-events: none; outline: none; }
.ormar-svg.is-live .orm-door.is-shut .orm-ctl { pointer-events: all; cursor: pointer; }
/* ručka otvara krilo; otvoreno krilo se zatvara klikom bilo gdje na njemu */
.ormar-svg.is-live .orm-handle, .ormar-svg.is-live .orm-door:not(.is-shut) .door-in { pointer-events: all; cursor: pointer; }
.ormar-svg .orm-handle-hit { fill: transparent; stroke: none; }
.ormar-svg .orm-handle-grip { fill: var(--steel); stroke: var(--ink); }
.ormar-svg .orm-handle:hover .orm-handle-grip, .ormar-svg .orm-handle:focus-visible .orm-handle-grip { fill: var(--accent); }
.ormar-svg .orm-hinge { fill: var(--steel); stroke: none; }
.ormar-svg .orm-warn { fill: #F2C94C; stroke: var(--ink); stroke-width: 1.6; }
.ormar-svg .orm-bolt { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.ormar-svg .orm-plate { fill: var(--white); stroke: var(--steel); }
.ormar-svg .orm-plate-t { font-size: 13px; font-weight: 700; }
.ormar-svg .orm-plate-s { font-size: 9.5px; fill: var(--steel); }   /* "all": cijela površina gumba, radi u svim preglednicima */
.ormar-svg .orm-door > g > rect:first-child, .ormar-svg .orm-ctl > circle:first-of-type:not(.orm-yellow) { fill: var(--paper); }
/* tijela komponenti prekrivaju DIN šine i kanalice iza sebe */
.ormar-svg :where(.orm-part > rect, .orm-part > circle) { fill: var(--paper); }
/* :hover bez .is-live: prije njega upravljanje i ručke ne primaju pokazivač (pointer-events), a klasa is-live na
   okviru tako ne preračunava sve krugove ormara (static/js/ormar.js, kraj montaže) */
.ormar-svg .orm-ctl:hover > circle:first-of-type { stroke: var(--accent); stroke-width: 2; }
.ormar-svg .orm-ctl:focus-visible > circle:first-of-type { stroke: var(--accent); stroke-width: 3; }
.ormar-svg .orm-knob rect { fill: var(--ink); }
.ormar-svg .orm-lamp { opacity: .28; transition: opacity .12s; }
.ormar-svg .is-on > .orm-lamp { opacity: 1; }
.ormar-svg .orm-ind > circle:first-of-type { fill: var(--paper); }
.ormar-svg .orm-shine { fill: #fff; stroke: none; opacity: .28; }
.ormar-svg .orm-vneedle, .ormar-svg .orm-aneedle { stroke: var(--fault); stroke-width: 1.6; }
.ormar-svg .orm-blue { fill: #3B7FC4; stroke: #3B7FC4; }
.ormar-svg text { stroke: none; fill: var(--ink); font: 600 11px/1 var(--body); }
.ormar-svg .orm-lbl { font-size: 12px; }
.ormar-svg .orm-mark { font-size: 8px; fill: var(--steel); }
.ormar-svg .orm-vphase { font-size: 9px; fill: var(--steel); }
/* HMI crpne stanice: svijetla procesna slika (boje stanja: siva stoji, zelena radi, crvena kvar) */
.ormar-svg .orm-door .orm-screen { fill: #E3E7EA; stroke: #E3E7EA; }
.ormar-svg .orm-hmi-bar { fill: #26353D; stroke: none; }
.ormar-svg .orm-hmi-title { fill: #fff; font-size: 7.5px; letter-spacing: .06em; }
.ormar-svg .orm-hmi-alarm { fill: #FF8A7A; font-size: 7.5px; }
.ormar-svg .orm-hmi-txt { fill: #26353D; font-size: 8px; }
.ormar-svg .orm-hmi-pipe { stroke: #9AA6AD; stroke-width: 3; }
.ormar-svg .orm-hmi-pipe.is-flow { stroke: #3B7FC4; }
.ormar-svg .orm-hmi-pump { fill: #B9C2C7; stroke: #26353D; transition: fill .2s; }
.ormar-svg .orm-hmi-pump.is-run { fill: #3E9B63; }
.ormar-svg .orm-hmi-pump.is-fault { fill: var(--fault); }
.ormar-svg .orm-hmi-arrow { fill: #fff; stroke: none; }
.ormar-svg .orm-hmi-tank { fill: #fff; stroke: #26353D; }
.ormar-svg .orm-hmi-level { fill: #7DB4E0; stroke: none; }
.ormar-svg .orm-hmi-valve { fill: #B9C2C7; stroke: #26353D; transition: fill .2s; }
.ormar-svg .orm-hmi-valve.is-open { fill: #3E9B63; }
/* ventilatore vrti static/js/ormar.js kao termostat (dok radi simulacija i još 4 s, Web Animations); bez skripte stoje */
.ormar-svg .orm-fan { transform-box: fill-box; transform-origin: center; }
.ormar-svg .orm-fan path, .ormar-svg .orm-fan circle { fill: var(--paper); }
.ormar-svg .orm-fan .orm-fan-pad { stroke: none; transition: fill .8s; }
.ormar-svg .orm-grille { stroke-width: .8; }
/* brza vrtnja: krug iza lopatica blago sivi, kao zamućenje od pokreta (samo dok se vrti, .is-vrtnja; i kopija na sloju) */
.ormar-svg.is-vrtnja .orm-fan .orm-fan-pad { fill: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
/* Dok krila miruju, lopatice na zatvorenom krilu se vrte u vlastitom sloju (kompozitor): kopija iznad svg-a
   krila (static/js/ormar.js), a lopatice i rešetka u svg-u krila se skriju. Sloj je odrezan na kvadrat
   ventilatora (overflow), da preglednik zna gdje se vrtnja crta; svg kopije je veličine kadra, kao svg krila. */
.ormar-svg .is-layered { visibility: hidden; }
.ormar-fan { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; }
.ormar-fan-rotor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ormar-fan svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ormar-fan svg * { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.ormar-fan .orm-fan path, .ormar-fan .orm-fan circle { fill: var(--paper); }
.ormar-fan .orm-fan-pad { stroke: none; }
.ormar-fan .orm-grille { stroke-width: .8; }

/* Kontakt */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-info h2 { margin-bottom: 1rem; }
.contact-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.contact-list li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact-list span { font: 500 .9rem/1.7 var(--body); color: var(--steel); }
.contact-list a { font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 36px); display: grid; gap: 18px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.form input, .form textarea {
  font: 400 1rem var(--body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 12px 14px; width: 100%;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.form textarea { resize: vertical; }
.form ::placeholder { color: var(--steel); opacity: 1; }
.form input, .form textarea { scroll-margin-top: 110px; }   /* i natpis polja ostane ispod zaglavlja kad preglednik pokaže neispravno polje */
.form .btn { justify-self: start; }
/* O nama: obrazac je dio okvira "Pošaljite upit" (bez vlastitog okvira u okviru); polja su bijela na podlozi okvira */
.contact .form { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.contact .form input, .contact .form textarea, .contact .chips span { background: var(--white); }
.flash { margin: 0; padding: 12px 14px; border-radius: var(--r-s); font-weight: 600; }
.flash-ok { background: var(--accent-soft); }
.flash-error { background: color-mix(in srgb, var(--fault) 16%, var(--white)); }

/* Footer */
.site-footer { color: var(--steel); padding: 36px 0; font: 400 .9rem var(--body); }
.site-footer .brand-name { color: var(--ink); font: 400 1.35rem/1 var(--display); letter-spacing: .02em; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; }


/* ---------- Početna stanja animacija (samo uz JS) ---------- */
.js .menu-label > span { transform: translateY(110%); }
.js .menu-item { opacity: 0; }
.js .menu-rule { transform: scaleX(0); }
.js .menu-desc, .js .landing-contact { opacity: 0; }
.js [data-reveal], .js [data-reveal-group] > * { opacity: 0; }
/* naslov na vrhu stranice (data-reveal="prvi") se pojavi od prvog iscrtavanja, istim pokretom kao u main.js (pojavi:
   Struja.T.ulaz, E.ulaz), a ne tek kad se skripte pokrenu; main.js ga ne pojavljuje ponovno */
@keyframes ulaz-prvi { from { opacity: .01; } }
.js [data-reveal="prvi"] { opacity: 1; animation: ulaz-prvi 480ms cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal="prvi"] { animation: none; } }
/* "prozori" (static/js/prozori.js): kartica ulazi kao solarni panel, pa se pretopi u karticu */
.js [data-prozori] > * { opacity: 0; }
[data-prozori] { perspective: 1400px; }
.prozor { position: relative; overflow: hidden; transform-origin: 50% 100%; }
.prozor::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  /* panel kao na 3D crtežu: bez boje, mreža ćelija ~22 px i obrub (isto kao modul u letu) */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--v5-cell, rgba(26, 35, 38, .32)) 1px, transparent 1px),
    linear-gradient(90deg, var(--v5-cell, rgba(26, 35, 38, .32)) 1px, transparent 1px);
  background-size: var(--cell-w, 22px) var(--cell-h, 22px);   /* cijeli broj ćelija, isto kao modul u letu (prozori.js) */
  box-shadow: inset 0 0 0 1.4px var(--v5-edge, rgba(26, 35, 38, .78));
  opacity: 0; transition: opacity .52s ease;
}
.prozor.is-panel::before { opacity: 1; transition: none; }   /* preuzme modul u istom kadru, pa se tek onda pretopi */
:root[data-theme="dark"] .prozor { --v5-cell: rgba(255, 255, 255, .34); --v5-edge: rgba(255, 255, 255, .82); }
.is-handoff [data-panel-cilj] { opacity: 0; }
/* ciljevi modula (gumbi Solarne elektrane i O nama): skriveni dok moduli ne slete (prozori.js postavi
   opacity); ako se skripta ne pokrene, nakon 8 s se pokažu sami */
.js [data-panel-cilj] { opacity: 0; animation: cilj-pricuva 0s 8s forwards; }
@keyframes cilj-pricuva { to { opacity: 1; } }
/* tekst kartice se otkrije slijeva nadesno: jedna CSS animacija po bloku, kašnjenje --prozor-d (prozori.js) */
.prozor-tekst :is(h2, h3, p, li, label) { animation: prozor-tekst .24s cubic-bezier(.25, .46, .45, .94) var(--prozor-d, 0ms) both; }
@keyframes prozor-tekst { from { clip-path: inset(0% 100% 0% 0%); } to { clip-path: inset(0% 0% 0% 0%); } }
@media (prefers-reduced-motion: reduce) { .prozor-tekst :is(h2, h3, p, li, label) { animation: none; } }
[data-prozori] > * { position: relative; overflow: hidden; }
/* Logotip i elektroni (static/js/main.js): pri učitavanju elektroni doteku žicom iz lijevog ruba i slože se u natpis;
   pri skrolanju se natpis raspadne u elektrone koji se sliju u žicu i teku njome prema dolje, a na vrhu stranice se
   istim putem vrate. Elektrone crta platno .brand-elektroni (samo za prijelaza, inače je skriveno), a svako slovo
   natpisa (SVG) je skriveno (klasa r) od prvog elektrona koji ga napusti do zadnjeg koji mu se vrati. Do pokretanja
   skripte (klasa upaljen) natpis čeka skriven. Prijelaz iz izbornika (is-handoff) i bez animacija: natpis je odmah tu. Klasa se zadaje logotipu, a slova je naslijede (--logo): pravilo
   "is-handoff ... path" bi pri micanju klase nakon slijetanja preračunalo svaki path stranice (ormar ih ima tisuće). */
.brand-word { --logo: 1; }
.js .brand-word { --logo: 0; }
.js.is-handoff .brand-word, .js .brand-word.upaljen { --logo: 1; }
.brand-word path { opacity: var(--logo); transition: opacity .22s; }   /* slovo se pretapa s točkama (main.js BLIJEDI) */
.brand-word path.r { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .brand-word path { transition: none; } }
.brand-elektroni { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; }
/* Žica u lijevom rubu (main.js: --zica-x, --zica-y, --zica-s): od vrha stranice do dna prozora. Elektroni natpisa lukom
   odu u gornji rub stranice (--zica-y: 0), a žica iz njega izlazi prema dolje; povuče se natrag u rub kad je zadnji
   napusti. Žica je cijev u 3D: dvije okomite izvodnice 7 px jedna od druge, bez krajeva (seže preko rubova prozora). Struju u
   njoj (masa elektrona, u smjeru skrola) crta main.js na platnu elektrona natpisa (.brand-elektroni). */
.brand-zica {
  position: fixed; left: var(--zica-x, 8px); top: 0; bottom: 0; width: 6px; margin-left: -3px;   /* tanka žica, ne cijev */
  overflow: hidden; pointer-events: none; transform: scaleY(var(--zica-s, 0)); transform-origin: 50% var(--zica-y, 34px);
}
/* potpuno iscrtana žica (main.js .pun, scaleY 1) seže pola visine prozora preko gornjeg i donjeg ruba: elastični skrol
   preko ruba stranice ne otkrije njezin kraj. Dok se crta ili povlači, ide od vrha do dna prozora (main.js računa vrh
   žice u prozoru: spojevi, struja, prekidi) */
.brand-zica.pun { top: -50vh; bottom: -50vh; }
.brand-zica::before, .zica-desno {
  content: ""; position: absolute; top: 2.5px; bottom: 2.5px; width: 1px; background: var(--ink); opacity: .45;
}
.brand-zica::before { left: 1px; }
/* desna izvodnica se prekida gdje se na nju spaja vodoravna cijev glave odsjeka, pa je spoj čist T. Dok je žica potpuno
   iscrtana (.pun), desna izvodnica je crta u dokumentu (.zica-desno-doc, main.js: preko cijele visine stranice, ispod
   zaglavlja, iznad sadržaja) s prekidima na stalnim mjestima: skrola se sa sadržajem (i pri elastičnom skrolu preko
   ruba), pa prekid ne može zaostati za cijevi. Dok se žica crta ili povlači, prekide fiksne izvodnice računa main.js
   (--rez, maska) u svakom kadru skrola. */
.zica-desno { right: 1px; -webkit-mask-image: var(--rez, none); mask-image: var(--rez, none); }
/* crta u dokumentu počne visinu prozora iznad vrha stranice (elastični skrol na vrhu; iznad vrha ne produlji stranicu) i
   završi na dnu sadržaja; ispod njega (elastični skrol na dnu) je fiksna izvodnica, vidljiva samo ispod sadržaja (main.js) */
.zica-desno-doc {
  position: absolute; top: 0; width: 1px; z-index: 2; background: var(--ink); opacity: .45; pointer-events: none; visibility: hidden;
  -webkit-mask-image: var(--rez, none); mask-image: var(--rez, none);
}
body:has(.brand-zica.pun) .zica-desno-doc { visibility: visible; }

/* slanje upita (main.js posalji): gumb postane elektron koji usisa žica; gumb čuva mjesto */
.upit-elektron { position: fixed; z-index: 60; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.upit-tocka { width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 18px 6px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.upit-salje { visibility: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .focus { grid-template-columns: minmax(0, 1fr); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .process { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .process-line { display: none; }
  .contact, .solar { grid-template-columns: minmax(0, 1fr); }
  .systems { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .system-b { grid-row: span 2; }
}
@media (max-width: 720px) {
  .system-d ul { columns: 1; }
  .services, .process, .systems { grid-template-columns: minmax(0, 1fr); }
  .menu-item { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle { padding: 0 14px; }
  .menu-label { font-size: clamp(2.6rem, 12.5vw, 4.2rem); white-space: normal; }
  .menu-desc { text-align: left; padding-bottom: 0; font-size: .9rem; }
  .system-b ul { columns: 1; }
  .system-b { grid-row: auto; }
  .contact-list li { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 420px) {
  .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-toggle { width: 40px; padding: 0; justify-content: center; }
}
/* najuži zasloni (320-360 px): logotip malo manji, da gumb izbornika ostane pun krug */
@media (max-width: 360px) {
  .brand-word { height: 19px; }
  .menu-toggle { margin-left: 8px; }
}

/* Bez pokreta: prijelazi i CSS animacije odmah u završnom stanju (skripte to rade same) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0s !important; transition-delay: 0s !important;
    animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  }
}

/* Stranice greške (404, 500, 429...; klase e404-* od prve, 404): dvorana iz pozadine se raspadne i složi u kod
   greške na mreži poda (templates/greska.html, static/js/greska.js).
   Cijela stranica stane u zaslon bez pomicanja: tijelo je stupac visine zaslona (zaglavlje, prizor s tekstom,
   podnožje), prizor ispuni što ostane, a naslov i razmaci se smanjuju na niskim zaslonima (vh). Znamenke
   greska.js smjesti u slobodan prostor (desno od teksta ili iznad njega). Podnožje se pretapa u papir, pa
   mreža poda ne prolazi kroz njegov tekst. */
body:has(.e404) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
/* dok prizor s prethodne stranice nije spreman (templates/greska.html), stranica se ne iscrta: preglednik drži staru */
html.e404-cekaj body { opacity: 0; }
body:has(.e404) > main { flex: 1 0 auto; display: flex; flex-direction: column; }
/* glavni dio nije zaseban sloj: vod (.e404-vod, z-index 2) ide preko podnožja (z-index 1) do dna zaslona; platna
   tlocrta i prizora (z-index 0) ostaju ispod podnožja, a tekst prizora iznad njih (redoslijed u stranici) */
body:has(.e404) > main { z-index: auto; }
body:has(.e404) > .site-footer { padding-block: clamp(10px, 3.2vh, 36px); background: linear-gradient(to bottom, transparent, var(--paper) 60%); }
.e404 { position: relative; flex: 1 0 auto; display: flex; align-items: flex-end; overflow: hidden;
  --e404-line: color-mix(in srgb, var(--ink) 22%, transparent); --e404-hot: var(--accent-2); }
.e404-scene { display: block; }                 /* položaj i boje: .v5-scene (cijeli prozor, kao dvorana u pozadini) */
.e404-copy { position: relative; width: 100%; padding-bottom: clamp(10px, 3vh, 44px); }
.e404-code { margin: 0 0 6px; color: var(--accent-ink); font-weight: 600; letter-spacing: .04em; }
.e404 h1 { font-size: clamp(2.2rem, min(8vw, 10vh), 6.4rem); max-width: 12ch; }
.e404-lede { max-width: 46ch; margin: clamp(6px, 1.6vh, 14px) 0 0; color: var(--steel); font-size: 1.08rem; line-height: 1.55; }
.e404-path { color: var(--ink); overflow-wrap: anywhere; }
.e404 .hero-actions { margin-top: clamp(12px, 3vh, 1.8rem); }
@media (max-width: 719px) {
  .e404 h1 { font-size: clamp(2.1rem, min(13vw, 7vh), 3.6rem); }
  .e404-lede { font-size: 1rem; line-height: 1.45; }
}
@media (max-height: 560px) {                     /* položeni mobitel: niži gumbi */
  .e404 .btn { padding: 11px 20px; }
}

/* ---------- Potpisi struje (2D): struja kao nit vodilja ----------
   Žica logotipa u lijevom rubu (.brand-zica, gore) je glavni uspon stranice, a svaki odsjek je strujni krug spojen na
   nju. Ukrase umeće i pokreće static/js/main.js (Potpisi struje); ovdje su izgled i konačna stanja (klase), pa
   preskočeni odsjek, fokus tipkovnice, povratak iz predmemorije preglednika i rad bez pokreta odmah dobiju konačno
   stanje. Samo tinta i papir (uz postojeću žutu brojeva faza), crte >= 3 : 1 (tinta 52 %: 3,3 : 1 na podlozi, toniranoj
   podlozi i kartici u svijetloj temi), samo transform i opacity. Debljine kao na jednopolnoj shemi: odvojci 1 px,
   vod faza 2 px. Kartice nemaju crtu uz gornji rub.
   Geometrija: --zica-x (zaglavlje), --odvojak (main.js na <main>: od žice do lijevog ruba naslova), --k-y (main.js na
   glavi s karticama: od cijevi naslova do napajanja prve kartice, ispod njezinog zaobljenja). */
:root { --struja-crta: color-mix(in srgb, var(--ink) 52%, transparent); }

/* Glava odsjeka ([data-krug], templates): naslov je širok koliko tekst; u visini prvog retka je vodoravna cijev u 3D
   (kao žica u lijevom rubu: dvije izvodnice 7 px jedna od druge) od žice do teksta naslova (krug-stub), spojena na
   žicu čistim T (žica se na tom mjestu prekida, main.js), kroz koju teku elektroni (neon-tok, platno). Potrošač je sam
   naslov: neonska cijev (.neon, niže) koja se upali kad struja stigne. Spoj (prsten od 7 px na žici) se napuni kad ga vrh žice prvi put prođe (main[data-napon]); odvojak,
   crta i svjetiljka su tu kad se odsjek uključi (krug-on). */
[data-krug] > :is(h1, h2) { position: relative; width: fit-content; }
.krug { position: absolute; left: calc(-1 * var(--odvojak, 32px)); right: 0; top: calc(100% - .07em); height: 0; pointer-events: none; }
.krug i { position: absolute; display: block; }
.krug-spoj { left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); opacity: 0; visibility: hidden; }   /* spoj je T (vrijeme ga ipak broji) */
.krug-spoj > i { inset: 0; border-radius: 50%; background: var(--ink); transform: scale(0); }
main[data-napon] .krug-spoj { opacity: 1; }
main[data-napon] .krug-spoj > i { transform: none; }
:root { --cijev: color-mix(in srgb, var(--ink) 45%, transparent); }   /* izvodnice kao žica u lijevom rubu */
/* --cijev-w: vanjska širina cijevi (main.js na glavi: širina otvora poteza prvog slova, cijev ulazi u njega iste širine) */
.krug-stub {
  top: calc(var(--cijev-w, 8px) / -2); height: var(--cijev-w, 8px); box-sizing: border-box;
  border-top: 1px solid var(--cijev); border-bottom: 1px solid var(--cijev);
  transform: scaleX(0); transform-origin: 0 50%;
}
.krug-stub { left: 2px; width: calc(var(--odvojak, 32px) - 2px); }   /* od vanjske strane žice */
/* cijev ide uz liniju pisma prvog retka (main.js: --neon-dno, mjereno markerom .neon-dno), pa se donja izvodnica spoji s
   dnom prvog slova: s nogom slova P, N, M, s donjim početkom slova S, J, Š */
/* main.js (obrisi): cijev u visini otvora poteza prvog slova (--krug-y) i do početka zavoja (--krug-w) */
.neon > .krug { top: var(--krug-y, calc(var(--neon-dno, .8em) - 4px)); right: auto; width: var(--krug-w, var(--odvojak, 32px)); }
.neon > .krug .krug-stub { width: calc(100% - 2px); border-color: transparent; }   /* stijenke crta SVG (neon-stijenka) */
.neon-dno { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* elektroni u cijevi i u slovima te plin u neupaljenim slovima (main.js: platno preko naslova, u koordinatama naslova;
   položaj i veličinu piše main.js) */
.neon-tok { position: absolute; display: block; pointer-events: none; will-change: transform; }   /* svoj sloj: crtanje platna ne iscrtava ponovno naslov sa sjajem */
/* Neonski naslov (main.js: neon): slova su staklene cijevi. Bez struje se vidi samo staklo, obris slova u boji cijevi
   (i dalje čitljiv: tekst ne čeka ukrase). Kad struja stigne, cijevi se slijeva ispune plinom (neon-plin: prigušeni
   sjaj prelazi preko slova, --neon-t), pa se plin upali: zatreperi krivuljom svjetiljke (neon-pali, lamp-zrake: 0 / 12 /
   28 / 48 / 60 / 74 %) i svijetli u punoj boji sa sjajem (tamna tema: toplo bijela jezgra sa žutim sjajem, svijetla:
   gotovo crna #0C0F0A). Gasi se kratkim pretapanjem natrag u staklo. */
:root { --neon-sjaj: var(--ink); --neon-boja: var(--ink); --neon-staklo: color-mix(in srgb, var(--ink) 24%, transparent); }
/* plin je od početka u boji svojega neona (prigušen), ne u boji teksta */
h1.neon, h2.neon { --neon-plin: color-mix(in srgb, var(--neon-boja) 55%, transparent); }
/* svijetla tema: svi naslovi gotovo crni (#0C0F0A), sjaj iste boje prigušen (na papiru je tek meka sjena) */
:root[data-theme="light"] { --neon-sjaj: color-mix(in srgb, #0C0F0A 45%, transparent); --neon-boja: #0C0F0A; }
/* tamna tema: neon toplo bijeli (jezgra) sa žutim sjajem */
:root[data-theme="dark"] { --neon-sjaj: #FFD84A; --neon-boja: #FFF6D6; }
/* neonski naslovi su pisani rukom, povezanim pismom (tools/neon_build.py, Neon Pismo: Learning Curve Bold): riječ je
   jedna savijena cijev, slova se spajaju sama; upaljeno slovo je ispunjena, užarena cijev. Preglednik po njemu slaže
   retke, a obrisi u SVG-u (main.js) leže točno na slovima (bez ligatura; kontekstne zamjene da: početak riječi ima
   uvodni potez, x^ u slova.json).
   Rukopis ima niska mala slova, pa su naslovi veći nego verzalom, s prostorom za silazne poteze. */
[data-krug] > :is(h1, h2), :is(h1, h2)[data-krug] { font-family: "Neon Pismo", var(--display); letter-spacing: 0; line-height: 1;
  font-feature-settings: "liga" 0; font-variant-ligatures: no-common-ligatures contextual; }
[data-krug] > h2, h2[data-krug] { font-size: clamp(2.6rem, 6.4vw, 5.1rem); }
[data-krug] > h1.page-title, h1.page-title[data-krug] { font-size: clamp(3.2rem, 8vw, 6.4rem); }
[data-krug] > h1.hero-title, h1.hero-title[data-krug] { font-size: clamp(3rem, 6.8vw, 6.2rem); }
/* pismo bebas (zadano; rukopis ?pismo=rukopis): verzal od cijevi u mjerama Bebas Neue */
.pismo-bebas :is([data-krug] > :is(h1, h2), :is(h1, h2)[data-krug]) { font-family: "Neon Bebas", var(--display); line-height: .98; }
.pismo-bebas :is([data-krug] > h2, h2[data-krug]) { font-size: clamp(2.1rem, 4.9vw, 3.9rem); }
.pismo-bebas :is([data-krug] > h1.page-title, h1.page-title[data-krug]) { font-size: clamp(3rem, 7vw, 5.6rem); }
.pismo-bebas :is([data-krug] > h1.hero-title, h1.hero-title[data-krug]) { font-size: clamp(2.6rem, 5.2vw, 4.8rem); }
/* staklo od prvog iscrtavanja (.js: main.js im doda klasu neon tek kad se pokrene, a stranica se iscrta prije njega) */
h1.neon, h2.neon, .js :is([data-krug] > :is(h1, h2), :is(h1, h2)[data-krug]) { color: transparent; -webkit-text-stroke: 1px var(--neon-staklo); transition: color .25s, text-shadow .25s; }
/* gašenje (žica se povlači, svi naslovi odjednom): sjaj nestane odmah, pretapa se samo boja; zamućena sjena se tako ne
   iscrtava u svakom kadru prijelaza */
h1.neon:not(.neon-on), h2.neon:not(.neon-on) { transition: color .25s; }
/* Obrisi slova (main.js: obrisi, iz static/data/slova.json, tools/neon_build.py) složeni točno na slova naslova. Kad
   struja stigne (i slova.json ima ulaz u prvo slovo), cijev zavije u otvor poteza prvog slova (neon-stijenka: četvrtina kruga, stijenke koncentrične, širina
   cijevi ista do kraja), njezine stijenke se nastave u rubove poteza
   oko prvog slova, pa se redom iscrtaju ostala slova (neon-crtano je konačno stanje), a onda se ispune plinom. */
.neon-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; color: transparent; text-shadow: none; will-change: transform; }   /* boja i sjaj naslova (paljenje, tema) se ne nasljeđuju u cijevi: inače se u svakom kadru prijelaza iznova slažu svi obrisi i maska; svoj sloj (kao neon-tok): paljenje i treptanje slova ne iscrtavaju ponovno cijevi s maskama, ni crtanje cijevi slova sa sjajem (SVG se ne skalira, pa je jednako oštar) */
.neon-svg path { fill: none; stroke: var(--cijev); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
:is(.neon-crtano, .neon-on) > .neon-svg path { stroke-dashoffset: 0; }
.neon-on > .neon-svg path:not(.neon-stijenka, .neon-elektroda, .neon-zica, .neon-zica-sjaj, .neon-maska, .neon-rez, .neon-pero, .neon-spoj, .neon-spoj-boja) { stroke: var(--neon-boja); }
/* pisanje (main.js cijevi): u maski bijela crta duž puta pera, otkriva cijev dok se piše (debljinu piše main.js) */
.neon-svg .neon-pero { stroke: #fff; vector-effect: none; stroke-linecap: round; stroke-linejoin: round; }
.pismo-bebas .neon-svg path { stroke-linejoin: miter; stroke-miterlimit: 10; }   /* Bebas: oštri kutovi i u peru i stijenkama */
/* spojne cijevi među riječima (i od žice do retka): isto staklo, obojeno tamno (blockout), ne svijetle; prigušene na 10 % */
.neon-svg .neon-spoj { stroke: var(--cijev); opacity: .1; }
.neon-svg .neon-dovod { opacity: .5; }   /* dovod od okomite žice do prvog slova: 50 %, i dok se piše i kad je upaljen */
/* elektron koji prođe cijev dok se piše (main.js crtaj); izvan animacije skriven */
.neon-svg .neon-impuls { fill: var(--ink); opacity: 0; }
.neon-svg .neon-spoj-boja { fill: color-mix(in srgb, #111318 85%, var(--cijev)); stroke: none; stroke-dasharray: none; opacity: 0; transition: opacity .3s; }
:is(.neon-crtano, .neon-on) > .neon-svg .neon-spoj-boja { opacity: .1; }
/* obris slova: maska (main.js spojiSlova) skriva unutarnju polovicu, pa je vidljiv 1 px kao prije; unutrašnjosti slova u
   maski su crne (bez obruba) */
.neon-svg .neon-slovo { stroke-width: 2px; }
.neon-svg .neon-rez { fill: #000; stroke: none; stroke-dasharray: none; }
/* upaljen naslov s obrisima u SVG-u nema obrub teksta (obrub teksta bi ostavio crtice na spojevima slova); staklo dotad
   crta obrub teksta, a obrisi se iscrtaju preko njega */
h1.neon.neon-obris.neon-on, h2.neon.neon-obris.neon-on { -webkit-text-stroke-color: transparent; }
/* kabeli između elektroda (main.js zice): tamni izolirani plašt s tankim odsjajem, vise pod svojom težinom, iza stakla
   (maska od obrisa cijevi i elektroda); ne svijetle */
.neon-svg .neon-zica { stroke: color-mix(in srgb, var(--ink) 30%, var(--paper)); stroke-width: 1.8px; stroke-opacity: .5; }
.neon-svg .neon-zica-sjaj { stroke: color-mix(in srgb, var(--ink) 62%, transparent); stroke-width: .6px; stroke-opacity: .5; }
.neon-svg .neon-maska { fill: #555; stroke: #555; stroke-width: 3px; stroke-dasharray: none; stroke-dashoffset: 0; }
/* elektrode (metalne čahure na početku i kraju cijevi) se ne prikazuju: cijev slova ide ravno u spoj */
.neon-svg .neon-elektroda { display: none; }
h1.neon.neon-plin, h2.neon.neon-plin {
  background: linear-gradient(90deg, var(--neon-plin) 44%, transparent 50%) 100% 0 / 200% 100% no-repeat;   /* na početku ništa ne viri */
  -webkit-background-clip: text; background-clip: text;
  animation: neon-plin var(--neon-t, 400ms) linear var(--neon-kasni, 0ms) both;
}
@keyframes neon-plin { from { background-position: 100% 0; } to { background-position: 0 0; } }
h1.neon.neon-on, h2.neon.neon-on {
  color: var(--neon-boja);
  text-shadow: 0 0 3px color-mix(in srgb, var(--neon-sjaj) 55%, transparent), 0 0 14px color-mix(in srgb, var(--neon-sjaj) 35%, transparent);
}
/* paljenje slova (main.js pali: svako slovo svoj trenutak i jedna od tri krivulje) i povremeni treptaj stare cijevi */
.ns.ns-pali-a { animation: neon-pali-a 260ms linear both; }
.ns.ns-pali-b { animation: neon-pali-b 300ms linear both; }
.ns.ns-pali-c { animation: neon-pali-c 220ms linear both; }
.ns.ns-trep { animation: neon-trep 650ms linear; }
/* Paljenje fluorescentne cijevi: plin se "hvata" (kratki bljeskovi do pune jakosti, pa se ugasi skoro do stakla), dok ne
   ostane upaljen. --n0: ugašen (malo plina), --n1: pun sjaj */
.ns { --n0: color-mix(in srgb, var(--neon-boja) 12%, transparent); --n1: var(--neon-boja);
  --s1: 0 0 3px color-mix(in srgb, var(--neon-sjaj) 55%, transparent), 0 0 14px color-mix(in srgb, var(--neon-sjaj) 35%, transparent); }
@keyframes neon-pali-a {
  0%, 9%, 20%, 33%, 47% { color: var(--n0); text-shadow: none; }
  6%, 14%, 27%, 40% { color: var(--n1); text-shadow: var(--s1); }
  58%, 100% { color: var(--n1); text-shadow: var(--s1); }
}
@keyframes neon-pali-b {
  0%, 30% { color: var(--n0); text-shadow: none; }
  33% { color: var(--n1); text-shadow: var(--s1); }
  36%, 52% { color: var(--n0); text-shadow: none; }
  55%, 57% { color: color-mix(in srgb, var(--neon-boja) 60%, transparent); text-shadow: none; }
  59%, 66%, 72% { color: var(--n0); text-shadow: none; }
  62%, 69% { color: var(--n1); text-shadow: var(--s1); }
  78%, 100% { color: var(--n1); text-shadow: var(--s1); }
}
@keyframes neon-pali-c {
  0% { color: var(--n0); text-shadow: none; }
  12% { color: var(--n1); text-shadow: var(--s1); }
  22%, 40% { color: var(--n0); text-shadow: none; }
  50%, 100% { color: var(--n1); text-shadow: var(--s1); }
}
@keyframes neon-trep {
  0%, 100% { color: var(--neon-boja); }
  10%, 30% { color: color-mix(in srgb, var(--neon-boja) 35%, transparent); text-shadow: none; }
  18%, 40% { color: var(--neon-boja); }
}
@media (prefers-reduced-motion: reduce) { .ns { animation: none !important; } }
@keyframes neon-pali {
  0%, 28% { color: color-mix(in srgb, var(--neon-boja) 55%, transparent); text-shadow: none; }
  12%, 60% { color: color-mix(in srgb, var(--neon-boja) 85%, transparent); text-shadow: 0 0 3px color-mix(in srgb, var(--neon-sjaj) 40%, transparent); }
  48%, 74%, 100% { color: var(--neon-boja); text-shadow: 0 0 3px color-mix(in srgb, var(--neon-sjaj) 55%, transparent), 0 0 14px color-mix(in srgb, var(--neon-sjaj) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) { h1.neon, h2.neon, h1.neon:not(.neon-on), h2.neon:not(.neon-on) { transition: none; } }
/* Krug postoji samo dok je žica iscrtana: kad se natpis vrati u zaglavlje (vrh stranice, otvoren izbornik, fokus u
   zaglavlju), crta naslova i odvojak se uvuku u žicu, a spoj nestane kad ga vrh žice koja se povlači prođe (main.js);
   tada je glava krug-bez. Kad se žica opet iscrta, krug se ponovno iscrta iz nje. */
.krug.krug-bez :is(.krug-spoj, .krug-stub) { opacity: 0; }
/* Napajanje prve kartice (krug-kartica): spoj na žici ispod zaobljenja prve kartice i odvojak do njezinog lijevog ruba.
   Skupina bez naslova ga ima na svakoj širini (u prvoj kartici), glava s karticama na uskom zaslonu
   (u naslovu, --k-y niže) */
[data-krug] > .kartica { position: relative; }
.kartica > .krug { left: calc(-1 * var(--odvojak, 32px) - 1px); top: var(--r-l); right: auto; width: calc(var(--odvojak, 32px) + 1px); }
.kartica > .krug .krug-stub { width: calc(100% - 4px); }
.krug-on .krug-stub { transform: none; }
/* impuls: 28 x 2 px u tinti, jednom, ubrzava kao elektroni (u glavi je čelo poteza: raste s desnog kraja); u svijetloj
   temi papirni ovoj */
.krug-impuls { left: 0; top: -1px; width: 28px; height: 2px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1px var(--paper); pointer-events: none; }
.krug > .krug-impuls { transform-origin: 100% 50%; }
.section-tint .krug-impuls { box-shadow: 0 0 0 1px var(--tint); }
:root[data-theme="dark"] .krug-impuls { box-shadow: none; }
/* uski zaslon: cijev do naslova kao na širokom (manji zavoj, main.js obrisi: krug-ulaz); kad za nju nema mjesta, glava
   s karticama ima samo napajanje prve kartice, ostale samo spoj */
@media (max-width: 767px) {
  .krug:not(.krug-kartica, .krug-ulaz) .krug-stub { display: none; }
  .krug-kartica:not(.krug-ulaz) .krug-spoj { top: calc(var(--k-y, 0px) - 3.5px); }
  .krug-kartica:not(.krug-ulaz) .krug-stub { top: calc(var(--k-y, 0px) - 4px); width: calc(var(--odvojak, 32px) - 4px); }
}

@keyframes krug-vod { from { transform: scaleX(0); } }

/* Usluge, pet faza (sabirnica faza): vod faza se uključi slijeva po liniji procesa iza kartica, a žuti diskovi trepću
   redom kako ih prolazi (150 + i * 150 ms od --faze-t0; --i u templates/usluge.html). Disk je do uključenja 70 % žut
   (broj ostaje čitljiv u obje teme), a sloj ispod broja (::before) se upali krivuljom svjetiljke; broj ne treperi. */
.js .step-no { position: relative; isolation: isolate; background: color-mix(in srgb, var(--accent) 70%, var(--white)); }
.js .step-no::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent); opacity: 0; }
.faze-on .step-no::before { opacity: 1; }
.faze-pali .step-no::before { animation: lamp-zrake var(--t-trep) linear calc(var(--faze-t0, 0ms) + 150ms + var(--i, 0) * 150ms) backwards; }
.faze-vod { position: absolute; left: 24px; right: 24px; top: 46px; height: 2px; background: var(--struja-crta); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.faze-vod.faze-on { transform: none; }
@media (max-width: 960px) { .faze-vod { display: none; } }   /* kao linija procesa */

/* Kraj stranice (krug se zatvara): zadnji odvojak ulazi u glavni gumb (od žice, u obrascu od tračnice), a pokazivač
   ili fokus tipkovnice daju iskru na spoju: kontakt (točka od 5 px na kraju odvojka, lijevo od gumba) trepne krivuljom
   svjetiljke i gori dok je pokazivač ili fokus na gumbu; 2 čvora u gumbu (main.js) */
.krug-kraj, .krug-iskra { position: absolute; display: block; pointer-events: none; }
.btn-primary:has(> .krug-kraj) { position: relative; }
.krug-kraj { right: 100%; top: 50%; width: var(--kraj, var(--odvojak, 32px)); height: 0; margin-right: 1px; }
.krug-kraj::after { content: ""; position: absolute; left: 0; right: 0; top: -.5px; height: 1px; background: var(--struja-crta); transform: scaleX(0); transform-origin: 0 50%; }
.krug-zatvoren .krug-kraj::after { transform: none; }
.krug-zatvara .krug-kraj::after { animation: krug-vod var(--t-vod) var(--e-vod) backwards; }
.hero-actions .krug-kraj::before { content: ""; position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0; }
.hero-actions .krug-kraj { transition: opacity .2s .25s; }   /* odvojak sa žice: bez žice nema izvora (kao spoj glave) */
body:has(> .site-header:not(.is-zica)) .hero-actions .krug-kraj { opacity: 0; transition: opacity .2s 1.25s; }
.krug-zatvoren .krug-kraj::before { opacity: 1; }
@keyframes krug-spoj { from { opacity: 0; transform: scale(.4); } }
.krug-zatvara .krug-kraj::before { animation: krug-spoj var(--t-iskra) var(--e-ulaz) backwards; }
.krug-iskra { right: 100%; top: 50%; width: 5px; height: 5px; margin: -2.5px 1px 0 0; border-radius: 50%; background: var(--ink); opacity: 0; }
@media (hover: hover) { .krug-zatvoren:hover .krug-iskra { animation: lamp-zrake var(--t-trep) linear both; } }
.krug-zatvoren:focus-visible .krug-iskra { animation: lamp-zrake var(--t-trep) linear both; }

/* Obrasci (zatvaranje kruga, samo CSS): tračnica uz lijevi rub obrasca od vrha do gumba; svako obavezno polje ima svoj
   segment koji se uključi kad je polje valjano (:valid), a kad su sva valjana, LED uz gumb (kućište ::before, svjetlo
   ::after) jednom trepne kad struja zadnjim segmentom stigne do njega (nakon --t-vod) i ostane upaljen. Gumb uvijek
   izgleda aktivno. O nama: tračnica 14 px lijevo od obrasca, a kad je obrazac na lijevom rubu
   sadržaja (uži zaslon), na žici; Solarna elektrana: u sredini lijevog ruba kartice. Bez :has() tračnica ostaje mirna. */
.contact .form { --p: 0px; --tracnica: 14px; position: relative; }
.solar-contact { --p: clamp(22px, 4vw, 36px); --tracnica: calc(var(--p) / 2); position: relative; }
@media (max-width: 960px) { .contact .form { --tracnica: var(--odvojak, 14px); } }
.contact .form, .solar-contact { --kraj: var(--tracnica); }
:is(.contact .form, .solar-contact)::before {
  content: ""; position: absolute; left: calc(var(--p) - var(--tracnica) - .5px); top: var(--p); bottom: calc(var(--p) + 24px);
  width: 1px; background: var(--struja-crta); pointer-events: none;
}
:is(.contact .form, .solar-contact) label:has(> :required) { position: relative; }
:is(.contact .form, .solar-contact) label:has(> :required)::before {
  content: ""; position: absolute; left: calc(-1 * var(--tracnica) - 1px); top: 0; bottom: 0; width: 2px; background: var(--ink);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--t-vod) var(--e-vod); pointer-events: none;
}
:is(.contact .form, .solar-contact) label:has(> :required:valid)::before { transform: none; }
:is(.contact .form, .solar-contact) .btn-primary { position: relative; }
:is(.contact .form, .solar-contact) .btn-primary::before, :is(.contact .form, .solar-contact) .btn-primary::after {
  content: ""; position: absolute; left: calc(100% + 14px); top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; pointer-events: none;
}
:is(.contact .form, .solar-contact) .btn-primary::before { box-shadow: inset 0 0 0 1.5px var(--struja-crta); }
:is(.contact .form, .solar-contact) .btn-primary::after { background: var(--ink); opacity: 0; }
/* O nama (#kontakt): bez tračnice uz lijevi rub obrasca i njezinih segmenata; LED uz gumb ostaje */
#kontakt .form::before, #kontakt .form label:has(> :required)::before { content: none; }
:is(.contact form.form, form.solar):not(:has(:required:invalid)) .btn-primary::after {
  opacity: 1; animation: lamp-zrake var(--t-trep) linear var(--t-vod) backwards;
}

/* Solarna elektrana: odabrani čip trepne (main.js, trep, najviše jednom u 600 ms): za trajanja je čip neodabran, a
   odabir je sloj ispod teksta (::after) koji se upali krivuljom svjetiljke; tekst ne treperi. Odabrani čip nema
   prijelaz boja: inače bi se na početku (promjena potrošnje) i nakon treptaja, kad sloj nestane, 150 ms pretapao iz
   neodabranog (drugi, neželjeni treptaj). */
form.solar .chips input:checked + span { transition: none; }
.chips input:checked + span.trep { position: relative; z-index: 0; background: var(--white); border-color: var(--line); }
.chips input:checked + span.trep::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); animation: lamp-zrake var(--t-trep) linear both;
}

/* O nama je slaba struja: žicom ide signal (crtice, main.js), a impulsi su paketi crtica */
main[data-tok="signal"] .krug-impuls { background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 8px); box-shadow: none; }

/* ---------- Prekid voda (stranice greške, ne stranica u izradi) ----------
   Zaseban vod u lijevom rubu (templates/greska.html .e404-vod, slijed: static/js/greska.js) na mjestu žice logotipa: x i
   vrh su --zica-x i --zica-y zaglavlja (vrh stranice; greska.js ih prepiše u --vod-x i --vod-y; bez skripte isti račun od
   ruba sadržaja), a dno je dno prozora: kao .brand-zica ide od vrha do dna zaslona, preko podnožja (z-index). Vod je
   3D cijev kao žica stranice (dvije stijenke 7 px jedna od druge; elektroni na platnu .vod-tok iz skripte): odozgo cijev
   (vod-a), patron
   osigurač 22 x 50 px (metalne kape, stakleno tijelo, nit; --vod-f: vrh osigurača, greska.js: sredina 20 px iznad koda
   greške; bez skripte oko četvrtine visine prozora) i cijev do dna (vod-c). Slijed: čeka (vod-on još nije), teče,
   grije (nit se usije, greska.js), prasak (bljesak, staklo i krhotine se razlete, kape odskoče) i gotov (pregorjeli
   osigurač: kape bez stakla i niti; bez skripte i bez pokreta odmah). Crte tintom 52 % (kao Potpisi struje), nit i
   bljesak naglaskom --accent-2. Samo transform i opacity; otvoren izbornik i skrivena kartica zaustave slijed
   (vod-stoji). Dok je natpis u žici (skrol na niskom zaslonu), vod se skloni: žica logotipa je na istom mjestu. */
.e404-vod {
  --vod-cl: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  --vod-f: calc(clamp(112px, 24vh, 240px) + 22px);
  position: fixed; left: var(--vod-x, max(4px, calc(var(--vod-cl) - min(var(--vod-cl) / 2, 32px))));
  top: var(--vod-y, 0px); bottom: 0; width: 0; z-index: 2; pointer-events: none; transition: opacity .2s .25s;
  color: var(--ink);                                           /* boja elektrona (greska.js čita color) */
}
body:has(> .site-header.is-zica) .e404-vod { opacity: 0; transition: opacity .2s; }
.e404-vod i, .e404-vod svg, .e404-vod canvas { position: absolute; display: block; }
.vod-a, .vod-c { left: -4px; width: 8px; box-sizing: border-box; border-left: 1px solid var(--struja-crta); border-right: 1px solid var(--struja-crta); transform-origin: 50% 0; }
.vod-a { top: 0; height: calc(var(--vod-f) + 7px); }
.vod-c { top: calc(var(--vod-f) + 43px); bottom: 0; }
/* obje cijevi su u stranici prije osigurača: ploha kape ih prekrije, pa donja izlazi iz dna donje kape (kao gornja
   ulazi u gornju), a ne ide preko njezine baze */
/* elastični skrol (kao .brand-zica.pun): cijev se nastavlja pola zaslona iznad vrha i ispod dna, pa joj se kraj ne vidi;
   donji nastavak tek kad je cijev do dna iscrtana (dok se crta, išao bi ispred čela poteza) */
.vod-a::before, :is(html:not(.js) .e404-vod, .vod-grije, .vod-prasak, .vod-gotov) .vod-c::after {
  content: ""; position: absolute; left: -1px; right: -1px; height: 50vh; border: inherit; border-block: 0;
}
.vod-a::before { bottom: 100%; }
.vod-c::after { top: 100%; }
.vod-tok { left: -180px; top: 0; pointer-events: none; }   /* 360 px: iskre praska izblijede unutar platna */
.vod-osigurac { left: -11px; top: var(--vod-f); width: 22px; height: 50px; overflow: visible; fill: none; stroke: var(--struja-crta); stroke-width: 1; stroke-linecap: round; }
.vod-osigurac * { vector-effect: non-scaling-stroke; }   /* crtež 16 x 36 povećan, crte i dalje 1 px */
.vod-osigurac g, .vod-osigurac path { transform-box: fill-box; transform-origin: 50% 50%; }
.vod-osigurac .os-pl { fill: var(--paper); stroke: none; }
.vod-osigurac .os-kapa { stroke: var(--ink); stroke-opacity: .7; }
.vod-osigurac .os-sjaj { stroke-opacity: .6; }
.vod-osigurac .os-nit { stroke: var(--ink); stroke-opacity: .8; }
.vod-osigurac .os-krh { opacity: 0; }
.vod-blic {
  left: -32px; top: calc(var(--vod-f) - 7px); width: 64px; height: 64px; border-radius: 50%; opacity: 0; color: var(--accent-2);   /* boja iskri */
  background: radial-gradient(circle, var(--accent-2) 0, color-mix(in srgb, var(--accent-2) 40%, transparent) 30%, transparent 70%);
}
.vod-most { left: -1px; top: calc(var(--vod-f) + 10px); width: 2px; height: 30px; border-radius: 1px; background: var(--ink); opacity: 0; }
/* impuls: 2 x 28 px, kao u glavama odsjeka (čelo poteza, raste od vrha voda); u svijetloj temi papirni ovoj */
.vod-impuls { left: -1px; top: 0; width: 2px; height: 28px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1px var(--paper); transform-origin: 50% 100%; opacity: 0; }
:root[data-theme="dark"] .vod-impuls { box-shadow: none; }
@keyframes vod-ceka { 0%, 100% { opacity: 0; } }
.js .e404-vod:not(.vod-on) > * { animation: vod-ceka 8s; }
/* ako slijed ne krene u 8 s (skrivena kartica, otvoren izbornik), vod se pokaže s pregorjelim osiguračem; cijeli je samo u slijedu */
.js .e404-vod:not(.vod-on) :is(.os-staklo, .os-nit, .os-krh) { opacity: 0; }
/* grije: nit se usije (boja naglaska, sjaj; treperenje vodi greska.js) */
.vod-grije .os-nit { stroke: var(--accent-2); stroke-opacity: 1; filter: drop-shadow(0 0 1.5px var(--accent-2)); }
/* prasak: bljesak, stakleno tijelo se razleti na dvije strane, krhotine odlete, kape odskoče i ostanu */
@keyframes vod-blic { 0% { opacity: 1; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes os-l { to { transform: translate(-15px, -7px) rotate(-55deg); opacity: 0; } }
@keyframes os-d { to { transform: translate(15px, 5px) rotate(48deg); opacity: 0; } }
@keyframes os-k { 0% { opacity: 1; } to { transform: translate(var(--kx), var(--ky)) rotate(var(--kr)); opacity: 0; } }
@keyframes os-gore { 0% { transform: none; } 30% { transform: translateY(-3px); } to { transform: translateY(-1px); } }
@keyframes os-dolje { 0% { transform: none; } 30% { transform: translateY(3px); } to { transform: translateY(1px); } }
.os-k1 { --kx: -18px; --ky: -12px; --kr: -90deg; } .os-k2 { --kx: 20px; --ky: -8px; --kr: 120deg; }
.os-k3 { --kx: -16px; --ky: 10px; --kr: 70deg; } .os-k4 { --kx: 17px; --ky: 13px; --kr: -110deg; }
.vod-prasak .vod-blic { animation: vod-blic 420ms cubic-bezier(.2, .7, .3, 1) forwards; }
.vod-prasak .os-nit { opacity: 0; }
.vod-prasak .os-l { animation: os-l 560ms cubic-bezier(.15, .7, .3, 1) forwards; }
.vod-prasak .os-d { animation: os-d 560ms cubic-bezier(.15, .7, .3, 1) forwards; }
.vod-prasak .os-krh { animation: os-k 640ms cubic-bezier(.15, .7, .3, 1) forwards; }
.vod-prasak .os-gore { animation: os-gore 360ms cubic-bezier(.2, .8, .3, 1) forwards; }
.vod-prasak .os-dolje { animation: os-dolje 360ms cubic-bezier(.2, .8, .3, 1) forwards; }
.vod-stoji, .vod-stoji * { animation-play-state: paused; }
/* gotov (bez skripte, bez pokreta i nakon slijeda): pregorjeli osigurač, kape malo razmaknute, bez stakla i niti */
:is(html:not(.js) .e404-vod, .vod-gotov) :is(.os-staklo, .os-nit, .os-krh) { opacity: 0; animation: none; }
:is(html:not(.js) .e404-vod, .vod-gotov) .os-gore { transform: translateY(-1px); animation: none; }
:is(html:not(.js) .e404-vod, .vod-gotov) .os-dolje { transform: translateY(1px); animation: none; }
/* nakon slijeda (is-kvar-gotov; bez skripte i bez pokreta odmah): "Na početnu" pod pokazivačem ili fokusom tipkovnice
   premosti kape pregorjelog osigurača (premosnik se upali krivuljom svjetiljke) */
@media (hover: hover) {
  :is(html:not(.js) .e404, .e404.is-kvar-gotov):has([data-most]:hover) .vod-most { opacity: 1; animation: lamp-zrake var(--t-trep) linear both; }
}
:is(html:not(.js) .e404, .e404.is-kvar-gotov):has([data-most]:focus-visible) .vod-most { opacity: 1; animation: lamp-zrake var(--t-trep) linear both; }