/* ============================================================
   Zeus Agency — dizajn sloj 2.0 (theme.css)

   Učitava se POSLJEDNJI (nakon polish.css), pa smije nadjačati sve
   pravilo iznad sebe. Ako se ovaj fajl obriše, sajt izgleda kao prije
   — ništa ne puca i ništa nije sakriveno.

   Sadrži:
     1.  Paleta i tokeni (boja slova)
     2.  Tipografija: hero, naslovi sekcija, istaknute riječi
     3.  Puni ekran: fluidna širina sadržaja
     4.  Novi element: traka s brojkama
     5.  Novi elementi: vodeni žig sekcije + kinetička traka
     6.  Novi efekti (navigacija, kartice, sjaj, parallax)
     7.  Sitni detalji (selekcija, scrollbar, fokus)
     8.  Responsivno
     9.  reduced-motion / print

   Bez vanjskih ovisnosti. Bez inline stilova (CSP: style-src 'self').
   ============================================================ */

/* ---------- 1. Paleta: topla slonovača + rastaljeno zlato ---------- */
:root{
  /* Širina sadržaja je bila fiksno 1280px — na 1920/2560 ekranu ostajalo
     je prazno s obje strane. Sada sadržaj diše s ekranom (88vw), ali se
     ne rasteže preko mjere čitljivosti (maks. 1720px). */
  --max:clamp(1280px,88vw,1720px);

  /* Boja slova: --text i --muted su bili hladni i blagi (#eceaf3 / #8f8ea6).
     Podignuta je svjetlina i toplina; --muted sada drži ~8:1 kontrasta na
     --bg, pa je i sitni tekst čitljiviji. */
  --text:#f1eef9;
  --muted:#a8a5be;
  --ivory:#f8f2e7;

  /* Zlato u tri tona — koristi se za gradijente slova i rubova. */
  --gold-1:#f9e6ad;
  --gold-2:#e8b93a;
  --gold-3:#c08f1c;
  --line:rgba(232,185,58,.22);
}

/* ---------- 2. Tipografija: boja slova ---------- */

/* 2a. Hero, prva dva reda ("Web dizajn"): topla slonovača s blagim
   vertikalnim gradijentom. Nije "dugin" gradijent — samo dubina, da
   veliko slovo ne izgleda ravno i mliječno. */
.hero-title .line:not(.outline){
  color:var(--ivory);
  background-image:linear-gradient(176deg,#ffffff 0%,#f7f0e7 44%,#ded4ea 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 2b. Hero, treći red ("koji radi") bio je SIVI obrub na 42% — izgledao je
   izblijedio, kao isključen tekst. Sada je zlatan obrub + zlatni gradijent
   kroz slova, s polaganim preljevom (boja "radi"). */
.hero-title .outline{
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px rgba(232,185,58,.72);
  background-image:linear-gradient(100deg,
    rgba(249,230,173,.30) 0%,
    rgba(232,185,58,.09) 32%,
    rgba(255,255,255,.18) 50%,
    rgba(232,185,58,.09) 68%,
    rgba(249,230,173,.30) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  animation:goldSweep 11s linear infinite;
}

/* 2c. Istaknuta riječ u naslovu: rastaljeno zlato u pokretu. */
.hero-title .accent,
.section-head h2 .accent{
  -webkit-text-stroke:0;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(100deg,
    var(--gold-3),var(--gold-2) 22%,#fff3c9 45%,var(--gold-2) 68%,var(--gold-1));
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  animation:goldSweep 7s linear infinite;
}

/* 2d. Istaknuta rečenica u podnaslovu heroja: zlato bez animacije (duga je
   i prelama se u više redova — animirati je bilo bi skupo, a nepotrebno). */
.hero-sub .accent{
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(90deg,var(--gold-1),var(--gold-2));
  -webkit-background-clip:text;
          background-clip:text;
}

/* 2e. Naslovi sekcija: slonovača s toplim podtonom pri dnu. */
.section-head h2{
  color:var(--ivory);
  background-image:linear-gradient(178deg,#ffffff 0%,#f5eff9 52%,#d9ccb2 132%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 2f. Kicker: svjetlije zlato (bio je --accent, sad je gornji ton). */
.kicker{color:var(--gold-1)}

@keyframes goldSweep{
  from{background-position:0% 50%}
  to{background-position:200% 50%}
}

/* ---------- 3. Puni ekran ---------- */
/* Na vrlo širokim ekranima sadržaj smije uzeti još koji piksel više —
   inače na 2560px monitoru trećina ekrana stoji prazna. */
@media (min-width:1900px){
  :root{--max:min(88vw,1880px)}
  .section{padding-left:clamp(2rem,5vw,6rem);padding-right:clamp(2rem,5vw,6rem)}
}

/* ---------- 4. Novi element: traka s brojkama ---------- */
.stats-band{
  padding-top:clamp(2.75rem,6vh,4.5rem);
  padding-bottom:clamp(3.5rem,8vh,6rem);
}
.band-kicker{
  display:flex;align-items:center;gap:.85rem;
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--gold-1);margin-bottom:1.75rem;
}
.band-kicker::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:1px;                      /* 1px razmaka + pozadina = zlatna mreža */
  background:var(--border-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--r);
  overflow:hidden;
}
.stat{
  position:relative;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,2.4vw,2rem);
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008));
  transition:background .5s var(--ease);
}
/* zlatna crta koja "naraste" kad brojka uđe u kadar */
.stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold-2),rgba(232,185,58,0));
  transform:scaleX(.26);transform-origin:0 50%;
  transition:transform .9s var(--ease);
}
.stat.in::before,
.stat:hover::before{transform:scaleX(1)}
.stat:hover{background:linear-gradient(180deg,rgba(232,185,58,.07),rgba(232,185,58,.015));transition-delay:0s}
.stat b{
  display:block;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1;
  font-weight:800;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--ivory);
}
.stat-l{
  display:block;margin-top:.85rem;
  color:var(--muted);font-size:.95rem;line-height:1.5;
}

/* Stupnjevito otkrivanje (samo .reveal tranzicija — hover je resetiran gore) */
.stats .stat:nth-child(2){transition-delay:.1s}
.stats .stat:nth-child(3){transition-delay:.2s}
.stats .stat:nth-child(4){transition-delay:.3s}

/* ---------- 5. Novi elementi: vodeni žig + kinetička traka ---------- */

/* 5a. Vodeni žig sekcije: broj ("01", "02"…) ispisan obrubom iza naslova.
   Aditivno — sekcija bez data-num ostaje čista. */
.section-head{position:relative}
.section-head[data-num]::before{
  content:attr(data-num);
  position:absolute;top:-.16em;right:0;z-index:-1;
  font-size:clamp(5rem,14vw,12rem);line-height:.78;font-weight:850;
  letter-spacing:-.07em;color:transparent;
  -webkit-text-stroke:1px rgba(232,185,58,.15);
  pointer-events:none;user-select:none;
}

/* 5b. Kinetička traka pred podnožjem: dva reda u suprotnim smjerovima. */
.marquee-band{
  position:relative;z-index:2;
  padding:clamp(1.25rem,3.5vw,2.25rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(232,185,58,.05),transparent 70%);
  display:grid;gap:.55rem;overflow:hidden;
}
.band-row{
  overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.band-track{
  display:inline-flex;gap:2.75rem;
  font-size:clamp(1.5rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(232,185,58,.5);
  animation:bandSlide 42s linear infinite;
}
.band-track span{display:inline-flex;align-items:center;gap:2.75rem}
.band-track span::after{
  content:'◆';font-size:.3em;-webkit-text-stroke:0;
  color:var(--gold-2);letter-spacing:0;translate:0 .12em;
}
.band-track.rev{
  animation-direction:reverse;animation-duration:56s;
  color:var(--ivory);-webkit-text-fill-color:var(--ivory);-webkit-text-stroke:0;
}
.band-track.rev span::after{color:rgba(232,185,58,.55)}

@keyframes bandSlide{to{transform:translateX(-50%)}}

/* ---------- 6. Novi efekti ---------- */

/* 6a. Navigacija: zlatna hairline koja se pojavi kad se skroluje. */
.nav::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,185,58,.5),transparent);
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.nav.scrolled::after{opacity:1}
/* stari sivi rub zamijenjen zlatnom crtom */
.nav.scrolled{border-bottom-color:transparent}

/* 6b. Kartice: topla zlatna podloga na hover (uz postojeći sjaj i crtu). */
.card:hover,
.card:focus-within{
  background:linear-gradient(180deg,rgba(232,185,58,.055),var(--surface));
}

/* 6c. Dugmad: topli sjaj na hover za puno zlato dugme. */
.btn:not(.btn-ghost):hover{
  box-shadow:0 16px 44px -16px rgba(232,185,58,.7);
}

/* 6d. Podnožje: zlatna hairline na vrhu. */
.footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,185,58,.35),transparent);
}

/* 6e. Hero: logo i orbite se lagano pomjeraju sa skrolom (dubina).
   fx.js već računa --py za svaki [data-parallax]; ovdje ga samo koristimo.
   Bez JS-a var(--py) pada na 0px — ništa se ne pomjera. */
.hero-mark{transform:translateY(calc(-46% + var(--py,0px)))}
.hero-ornament{transform:translateY(calc(-50% + var(--py,0px)))}

/* ---------- 7. Sitni detalji ---------- */

::selection{background:var(--gold-1);color:#0a0a0a}
:focus-visible{outline-color:var(--gold-1)}

/* Tanka zlatna traka za skrol — detalj, ne funkcija. */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));
  border-radius:999px;border:3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{background:var(--gold-1)}
@supports (scrollbar-color:red red){
  html{scrollbar-color:rgba(232,185,58,.5) rgba(255,255,255,.04);scrollbar-width:thin}
}

/* ---------- 8. Responsivno ---------- */
@media (max-width:700px){
  /* Vodeni žig na telefonu samo stvara zbrku — sklanjamo ga. */
  .section-head[data-num]::before{display:none}
  /* Prekini preljeve na malim ekranima (baterija > efekat). */
  .hero-title .outline,
  .hero-title .accent,
  .section-head h2 .accent{animation:none}
  .marquee-band{padding:.9rem 0}
  .band-track{font-size:clamp(1.35rem,7vw,2rem)}
}
/* Niski ekrani (telefon u landscapeu, 430px): žig je veći od prostora. */
@media (max-height:560px){
  .section-head[data-num]::before{display:none}
}

/* ---------- 9. reduced-motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  .band-track{animation:none}
  .stat::before{transform:scaleX(1)}
  .hero-title .outline,
  .hero-title .accent,
  .section-head h2 .accent{animation:none}
}
@media print{
  .marquee-band,
  .section-head[data-num]::before{display:none}
}

/* ============================================================
   10. DIZAJN 3.0 — novi elementi i efekti
   ------------------------------------------------------------
   Sve je aditivno i bez inline stilova (CSP: style-src 'self').
   Animacije koje traže skriptu gate-ane su na html:not(.no-js),
   pa sajt bez JS-a ostaje potpuno vidljiv i statičan.
   ============================================================ */

/* ---------- 10.0 Hero se crta ODMAH ----------
   Mjereno 17.10.2026 (Lighthouse 12, mobilni profil): LCP element je bio
   .hero-sub, a 89 % njegovih 4,6 s bio je "render delay" — .reveal ga je
   držao na opacity:0 do ~350 ms + trajanje tranzicije. Zato hero ne koristi
   .reveal nego CSS animaciju bez odgode: prvi kadar je već vidljiv.
   Ostale sekcije i dalje koriste .reveal (ispod prvog ekrana).

   VAŽNO (2. mjerenje, 17.10.2026): prva verzija ovoga animirala je
   opacity 0 -> 1. To NIJE pomoglo: LCP preskače elemente s opacity:0, pa je
   LCP i dalje čekao da animacija "upali" (render delay 2 657 ms).
   Popravak: ključni kadar NIKAD ne dira opacity (ostaje 1) — animira se samo
   transform (blagi podizanje). Pomaknut, ali neproziran element se broji u
   LCP odmah, u prvom kadru. */
html:not(.no-js) .hero .reveal{
  opacity:1;transform:none;transition:none;
  animation:heroRise .5s var(--ease) both;
}
html:not(.no-js) .hero-title .line:nth-child(2){animation-delay:.06s}
html:not(.no-js) .hero-title .line:nth-child(3){animation-delay:.12s}
html:not(.no-js) .hero-sub{animation-delay:0s;animation-duration:.34s}
@keyframes heroRise{
  from{opacity:1;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- 10.1 Ulazak sekcije: zlatna crta koja se iscrta ----------
   Sekcija dobije .sec-in kad uđe u kadar; ispod naslova se iscrta zlatna
   crta, a vodeni žig (broj sekcije) se podigne. Bez JS-a nema .sec-in,
   pa je i crta i žig u mirnom, vidljivom stanju. */
.section-head::after{
  content:'';position:absolute;left:0;bottom:-1.15rem;
  width:min(340px,44%);height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-2),rgba(232,185,58,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.05s var(--ease);
}
html.no-js .section-head::after{transform:scaleX(1)}
html:not(.no-js) .sec-in .section-head::after{transform:scaleX(1)}

html:not(.no-js) .section-head[data-num]::before{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform 1s var(--ease);
}
html:not(.no-js) .sec-in .section-head[data-num]::before{opacity:1;transform:none}

/* ---------- 10.2 Stupnjevito otkrivanje novih elemenata ----------
   .stagger elementi dobiju .vis (i --i za redom) kad uđu u kadar.
   Animacija, a ne tranzicija, da ne dira hover transformacije. */
html:not(.no-js) .stagger{opacity:0}
.stagger.vis{animation:staggerIn .7s var(--ease) both;animation-delay:calc(var(--i,0) * 65ms)}
@keyframes staggerIn{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* ---------- 10.3 Kinetička traka: tekst koji se "otkucava" ---------- */
.kinetic-band{
  position:relative;z-index:2;
  max-width:var(--max);margin-inline:auto;
  padding:clamp(1rem,2.6vw,1.7rem) var(--pad);
  display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
/* Bez JS-a .typewriter bi ostao prazan (riječi se čitaju iz data-words), pa
   bi traka stajala kao "Gradimo" + praznina. Traka je dekorativna
   (aria-hidden) i ponavlja sadržaj koji već postoji u sekcijama, zato se bez
   JS-a skriva u cijelosti — isto pravilo kao za .showreel dugme. */
html.no-js .kinetic-band{display:none}
.kinetic-pre{
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--gold-1);
}
.typewriter{
  font-size:clamp(1.45rem,4.6vw,3rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;color:var(--ivory);min-height:1.15em;
}
/* Kursor je pseudo-element unutar .typewriter, pa skalira sa slovom. */
.typewriter::after{
  content:'';display:inline-block;width:3px;height:.94em;margin-left:.06em;
  vertical-align:-.06em;background:var(--gold-2);border-radius:1px;
  animation:caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

/* ---------- 10.4 Galerija radova (bento mreža) ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(min(250px,38vw),auto);
  grid-auto-flow:dense;gap:1.1rem;
}
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(250px,38vw);
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border-soft);background:var(--bg-alt);
  color:var(--text);text-decoration:none;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.tile:hover,.tile:focus-visible{border-color:var(--border);transform:translateY(-4px)}
.tile-media{position:absolute;inset:0;z-index:0;margin:0}
.tile-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile:hover .tile-media img,
.tile:focus-visible .tile-media img{transform:scale(1.06)}
.tile-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,11,.06) 0%,
    rgba(5,6,11,.42) 46%,rgba(5,6,11,.9) 100%);
  transition:opacity .45s var(--ease);
}
.tile-body{
  position:relative;z-index:2;
  padding:clamp(1.05rem,2.3vw,1.75rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
}
.tile-body h3{
  font-size:clamp(1.15rem,2.1vw,1.6rem);font-weight:750;
  letter-spacing:-.025em;line-height:1.15;color:var(--ivory);
}
.tile-body p{color:rgba(241,238,249,.84);font-size:.94rem;line-height:1.55;max-width:56ch}
.tile--hero .tile-body h3{font-size:clamp(1.35rem,2.7vw,2.1rem)}
.tile .tag{background:rgba(5,6,11,.5);border:1px solid var(--line);color:var(--gold-1)}
.tile--hero{grid-column:span 3;grid-row:span 2}
.tile--half{grid-column:span 3}
.tile--sm{grid-column:span 2}
.tile--wide{grid-column:span 4}
.tile-go{
  position:absolute;top:1rem;right:1rem;z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(5,6,11,.55);border:1px solid var(--line);
  color:var(--gold-1);font-size:.95rem;font-weight:700;line-height:1;
  opacity:0;translate:0 -4px;
  transition:opacity .35s var(--ease),translate .35s var(--ease);
}
.tile:hover .tile-go,.tile:focus-visible .tile-go{opacity:1;translate:0 0}

/* ---------- 10.5 Bedževi: ono što se može provjeriti ---------- */
.badges{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));
  gap:1px;background:var(--border-soft);
  border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden;
}
.badge{
  display:flex;flex-direction:column;gap:.65rem;
  padding:clamp(1.35rem,2.6vw,2rem);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.007));
  transition:background .45s var(--ease);
}
.badge:hover{background:linear-gradient(180deg,rgba(232,185,58,.06),rgba(232,185,58,.012))}
.badge-ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid var(--line);
}
.badge-ico svg{
  width:21px;height:21px;fill:none;stroke:var(--gold-2);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.badge b{font-size:1.03rem;font-weight:700;letter-spacing:-.01em;color:var(--ivory)}
.badge span{color:var(--muted);font-size:.93rem;line-height:1.55}

/* ---------- 10.6 Video u sekciji (showreel) ---------- */
.showreel{
  position:relative;margin-top:clamp(1.9rem,4.5vw,2.75rem);
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border-soft);background:var(--bg-alt);
  aspect-ratio:16/9;
}
.showreel video{width:100%;height:100%;object-fit:cover;display:block}
.showreel-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:clamp(1rem,2.4vw,1.6rem);
  background:linear-gradient(180deg,rgba(5,6,11,0),rgba(5,6,11,.9) 62%);
}
.showreel-cap b{display:block;font-size:1.02rem;font-weight:700;color:var(--ivory)}
.showreel-cap span{display:block;margin-top:.3rem;color:var(--muted);font-size:.9rem;max-width:62ch}
.showreel-btn{
  display:none;position:absolute;z-index:3;left:50%;top:50%;
  translate:-50% -50%;width:clamp(58px,8vw,84px);aspect-ratio:1;border-radius:50%;
  place-items:center;background:rgba(5,6,11,.5);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid var(--line);
  transition:scale .35s var(--ease),background .35s var(--ease),
    border-color .35s var(--ease),opacity .35s var(--ease);
}
.showreel.is-ready .showreel-btn{display:grid}
.showreel-btn:hover,.showreel-btn:focus-visible{scale:1.07;background:var(--accent-dim);border-color:var(--border)}
.showreel-btn svg{width:25px;height:25px;fill:var(--gold-1)}
.showreel-btn .i-pause{display:none}
.showreel.is-playing .showreel-btn .i-play{display:none}
.showreel.is-playing .showreel-btn .i-pause{display:block}
.showreel.is-playing .showreel-btn{opacity:0}
.showreel.is-playing:hover .showreel-btn,
.showreel.is-playing .showreel-btn:focus-visible{opacity:1}

/* ---------- 10.7 Kalkulator paketa ---------- */
.calc{
  margin-top:clamp(2.5rem,6vw,3.5rem);
  padding:clamp(1.5rem,3.6vw,2.6rem);border-radius:var(--r);
  border:1px solid var(--border-soft);
  background:linear-gradient(180deg,rgba(232,185,58,.05),var(--surface) 55%);
}
.calc-head{display:flex;align-items:baseline;gap:.5rem 1.25rem;flex-wrap:wrap;margin-bottom:1.75rem}
.calc-head h3{font-size:clamp(1.25rem,2.5vw,1.8rem);font-weight:750;letter-spacing:-.025em;color:var(--ivory)}
.calc-head p{color:var(--muted);font-size:.94rem;flex:1 1 24ch}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:1.5rem}
.calc-q{border:0;padding:0;margin:0;min-width:0}
.calc-q legend{
  padding:0;margin-bottom:.85rem;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--gold-1);
}
.calc-opts{display:flex;flex-direction:column;gap:.5rem}
.calc-opt{
  display:flex;align-items:center;gap:.75rem;cursor:pointer;
  padding:.72rem .95rem;border-radius:12px;
  border:1px solid var(--border-soft);background:rgba(255,255,255,.02);
  font-size:.94rem;line-height:1.4;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.calc-opt:hover{border-color:var(--border)}
.calc-opt input{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;
  width:19px;height:19px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3);background:transparent;
  transition:border-color .2s,box-shadow .2s;
}
.calc-opt input:checked{border-color:var(--gold-2);box-shadow:inset 0 0 0 5px var(--gold-2)}
.calc-opt:has(input:checked){border-color:var(--accent);background:var(--accent-dim)}
.calc-opt input:focus-visible{outline:2px solid var(--accent-lt);outline-offset:2px}
.calc-out{
  margin-top:1.85rem;padding-top:1.6rem;border-top:1px solid var(--border-soft);
  display:flex;align-items:center;gap:1rem 1.75rem;flex-wrap:wrap;min-height:4.5rem;
}
.calc-res{flex:1 1 20ch;min-width:0}
.calc-res .lbl{
  display:block;margin-bottom:.35rem;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.calc-name{font-size:clamp(1.2rem,2.5vw,1.65rem);font-weight:800;letter-spacing:-.03em;color:var(--ivory)}
.calc-why{display:block;margin-top:.4rem;color:var(--muted);font-size:.9rem;max-width:58ch}
.calc-price{
  font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:850;letter-spacing:-.04em;
  color:transparent;
  background-image:linear-gradient(100deg,var(--gold-3),var(--gold-2) 30%,#fff3c9 55%,var(--gold-1));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.calc-price .per{
  margin-left:.12em;font-size:.48em;font-weight:600;
  color:var(--muted);-webkit-text-fill-color:var(--muted);
}
.calc-foot{margin-top:1.1rem;color:var(--muted);font-size:.88rem;max-width:70ch}

/* ---------- 10.8 3D nagib naslova ---------- */
@media (hover:hover) and (pointer:fine) and (min-width:900px) and (prefers-reduced-motion:no-preference){
  [data-tilt]{
    transform:perspective(1100px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
    transition:transform .28s ease-out;
  }
}

/* ---------- 10.9 Responsivno ---------- */
@media (max-width:1100px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .tile,.tile--hero,.tile--half,.tile--sm,.tile--wide{
    grid-column:span 1;grid-row:span 1;
  }
  .tile--hero,.tile--wide{grid-column:span 2}
  .tile--hero .tile-body h3{font-size:clamp(1.3rem,4vw,1.85rem)}
}
@media (max-width:620px){
  .gallery{grid-template-columns:1fr}
  .tile,.tile--hero,.tile--half,.tile--sm,.tile--wide{
    grid-column:span 1;grid-row:span 1;
    min-height:min(300px,66vw);
  }
  .kinetic-band{padding-block:.9rem}
  .typewriter{font-size:clamp(1.35rem,7vw,2rem)}
  .showreel-btn{width:58px}
}

/* ---------- 10.10 reduced-motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  html:not(.no-js) .hero .reveal{animation:none;opacity:1;transform:none}
  .section-head::after{transform:scaleX(1)}
  html:not(.no-js) .section-head[data-num]::before{opacity:1;transform:none}
  html:not(.no-js) .stagger{opacity:1}
  .stagger.vis{animation:none}
  .typewriter::after{animation:none}
  .tile:hover,.tile:focus-visible{transform:none}
  .tile:hover .tile-media img,.tile:focus-visible .tile-media img{transform:none}
  .showreel-btn:hover,.showreel-btn:focus-visible{scale:1}
}
@media print{
  .kinetic-band,
  .showreel,
  .tile-go{display:none}
  .gallery{grid-template-columns:1fr 1fr}
  .tile,.tile--hero,.tile--half,.tile--sm,.tile--wide{grid-column:span 1;grid-row:span 1}
}