/* FAZA 2 — Design sistem: tokens + baza. Komponente se dodaju u fazama 5–11. */
:root{
  --bg:#0E0E11; --bg-2:#16161A; --bg-3:#1E1E24;
  --line:rgba(244,242,236,.08);
  --text:#F4F2EC; --muted:#A3A19A;
  --gold:#C9A24B; --gold-2:#E8CC86;
  --error:#E5484D;
  /* Zlatni sjaj (radijalni gradijenti) — alfa varijante istog --gold-a */
  --gold-glow:rgba(201,162,75,.13); --gold-glow-soft:rgba(201,162,75,.08); --gold-glow-faint:rgba(201,162,75,.07);
  /* Tamni veo / overlay pozadine */
  --veil:rgba(0,0,0,.5); --overlay:rgba(8,8,10,.95);
  --veil-strong:rgba(0,0,0,.7); /* hero — tamnija slika (30% transparentnosti) */
  /* Header sa staklom (scroll stanje) — --bg sa alfa .92 */
  --bg-glass:rgba(14,14,17,.92);
  --font-display:'Cinzel',serif;
  --font-body:'Jost','Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --container:min(1600px,92vw);
  --header-h:76px;
  /* Tipografska skala — fluidno skaliranje po rezoluciji (mobile → desktop) */
  --fs-body:clamp(1rem,.75rem + .4vw,1.125rem);   /* 16px → 18px */
  --fs-h3:clamp(1.25rem,1.05rem + .8vw,1.875rem); /* 20px → 30px */
  --fs-h2:clamp(2rem,4vw + .5rem,3.75rem);        /* 32px → 60px */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:.02em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.container{width:var(--container);margin-inline:auto}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold)}

/* Zrno (film grain) — suptilna premium tekstura, ne blokira klikove */
body::after{
  content:""; position:fixed; inset:-50%; z-index:2147483000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}}
@media (prefers-reduced-motion: reduce){ body::after{animation:none} }

/* FAZA 5 — header (sticky, scroll stanje posle 24px) */
.site-header{position:fixed;inset:0 0 auto;z-index:1000;transition:background .4s var(--ease),box-shadow .4s var(--ease);border-bottom:1px solid transparent}
.site-header.scrolled{background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.site-header__in{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;gap:2rem}
.logo{display:inline-flex;align-items:center}
.logo__img{height:56px;width:auto;display:block}
@media (max-width:900px){.logo__img{height:40px}}
.mainnav a{color:var(--text);margin-left:2.2rem;font-size:.95rem;letter-spacing:.06em;position:relative;padding-bottom:6px}
.mainnav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.mainnav a:hover::after,.mainnav a.is-active::after{width:100%}

/* Burger — vidljiv ispod 900px, ostaje iznad mobilenav overlay-a */
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:12px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:2px;width:100%;background:var(--text);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile meni — flyout panel sa desne strane (slide-in + tamni veo), zatvara se na ESC i klik van sadržaja */
.mobilenav{position:fixed;inset:0;z-index:900;visibility:hidden;transition:visibility 0s linear .5s}
.mobilenav.open{visibility:visible;transition-delay:0s}
.mobilenav::before{content:"";position:absolute;inset:0;background:var(--veil);opacity:0;transition:opacity .45s var(--ease)}
.mobilenav.open::before{opacity:1}
.mobilenav__panel{position:absolute;top:0;right:0;height:100%;width:min(360px,85vw);background:var(--bg-2);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(6rem,26vh,9rem) 2.4rem;overflow-y:auto;transform:translateX(100%);transition:transform .5s var(--ease)}
.mobilenav.open .mobilenav__panel{transform:none}
/* Entrance animacija — linkovi klize sa rastućim stagger-om, jezički red posle njih */
.mobilenav__panel nav a{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,5.5vw,2.6rem);margin:.45em 0;color:var(--text);opacity:0;transform:translateX(28px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mobilenav.open .mobilenav__panel nav a{opacity:1;transform:none}
.mobilenav.open .mobilenav__panel nav a:nth-child(1){transition-delay:.08s}
.mobilenav.open .mobilenav__panel nav a:nth-child(2){transition-delay:.14s}
.mobilenav.open .mobilenav__panel nav a:nth-child(3){transition-delay:.2s}
.mobilenav.open .mobilenav__panel nav a:nth-child(4){transition-delay:.26s}
.mobilenav__panel nav a:hover,.mobilenav__panel nav a.is-active{color:var(--gold)}
.mobilenav__langs{display:flex;flex-direction:column;gap:.5rem;margin-top:2.5rem;padding:0;list-style:none}
/* Entrance animacija — svaki jezik klizi sa rastućim stagger-om posle nav linkova */
.mobilenav__langs a{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;color:var(--muted);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mobilenav.open .mobilenav__langs a{opacity:1;transform:none}
.mobilenav.open .mobilenav__langs li:nth-child(1) a{transition-delay:.32s}
.mobilenav.open .mobilenav__langs li:nth-child(2) a{transition-delay:.37s}
.mobilenav.open .mobilenav__langs li:nth-child(3) a{transition-delay:.42s}
.mobilenav.open .mobilenav__langs li:nth-child(4) a{transition-delay:.47s}
.mobilenav.open .mobilenav__langs li:nth-child(5) a{transition-delay:.52s}
.mobilenav.open .mobilenav__langs li:nth-child(6) a{transition-delay:.57s}
.mobilenav.open .mobilenav__langs li:nth-child(7) a{transition-delay:.62s}
.mobilenav.open .mobilenav__langs li:nth-child(8) a{transition-delay:.67s}
.mobilenav__langs a.is-active{color:var(--gold)}
.mobilenav__langs a:hover{color:var(--text)}

/* FAZA 4/5 — language switcher (klik toggle + focus-within; mobilna verzija u mobilenavu) */
.langsw{position:relative;margin-left:2.2rem}
.langsw__btn{background:none;border:none;color:var(--text);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em;padding:.45rem .8rem;cursor:pointer}
/* Entrance/exit animacija — umesto display:none/block; visibility se prekida posle fade-a (exit), trenutno na open-u */
.langsw__list{position:absolute;top:calc(100% + 10px);right:0;min-width:160px;background:var(--bg-3);border:1px solid var(--line);list-style:none;z-index:1001;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.langsw.open .langsw__list,.langsw:focus-within .langsw__list{visibility:visible;opacity:1;transform:none;transition-delay:0s,0s,0s}
.langsw__list a{display:block;padding:.5rem 1rem;color:var(--text);font-size:.85rem;white-space:nowrap}
.langsw__list a.is-active{color:var(--gold)}

/* Page hero banner (galerija/kontakt/o nama) — weave animacija: transparentni canvas sa zagasito zlatnim talasima + tamni veo rgba(0,0,0,.5) */
.page-hero{position:relative;overflow:hidden;padding:8rem 0 4rem;text-align:center}
.page-hero > .container{position:relative;z-index:1}
.page-hero__bg{position:absolute;inset:0;background:radial-gradient(ellipse 90% 65% at 50% 38%,var(--gold-glow),transparent 62%),var(--bg-2)}
.page-hero__bg canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* Page hero entrance — eyebrow mask reveal (unutrašnji span klizi iznad overflow hidden linije) */
.page-hero .eyebrow[data-reveal="mask"]{overflow:hidden}
/* Početno sakrivanje je trenutno (bez tranzicije) — inače se talasi animirano „isključuju" iz opaciteta 1.
   Tranzicija je samo na .in stanju: fade-in 0→1 traje 2.4s. */
.js .page-hero__bg canvas{opacity:0}
.js .page-hero__bg canvas.in{opacity:1;transition:opacity 2.4s var(--ease)}
.page-hero__bg::after{content:"";position:absolute;inset:0;background:var(--veil)}

/* FAZA 5 — footer: 4 kolone (logo+opis / navigacija / kontakt / jezici) + copyright traka */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2)}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1.3fr 1fr;gap:3rem;padding:4.5rem 0 3rem}
.site-footer .logo__img{height:96px}
.site-footer__brand p{color:var(--muted);font-size:.9rem;margin-top:1.1rem;max-width:30ch}
.site-footer h2{font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.site-footer ul{list-style:none}
.site-footer li a{display:inline-block;padding:.28rem 0;color:var(--muted);font-size:.9rem;transition:color .3s var(--ease)}
.site-footer li a:hover,.site-footer li a.is-active{color:var(--text)}
.site-footer__bar{border-top:1px solid var(--line);padding:1.4rem 0;font-size:.8rem;color:var(--muted)}
.site-footer__bar-in{display:flex;justify-content:space-between;gap:1rem}
/* Total Computing — gold gradient swipe na hover-u: gradijent se clip-uje u tekst, pozicija 100%→0% „prebaci" zlatnu traku preko slova */
.site-footer__bar .credit-link{white-space:nowrap;background:linear-gradient(90deg,var(--muted) 42%,var(--gold-2) 48%,var(--gold) 52%,var(--muted) 58%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.site-footer__bar .credit-link:hover{background-position:0% 0;transition:background-position .9s var(--ease)}

/* FAZA 11 — mobile tier ≤767px (matrica: burger meni); tablet ≥768 ima punu navigaciju */
@media (max-width:767px){ .mainnav,.langsw{display:none} .burger{display:flex} }
/* FAZA 11 — matrica: tablet 2 kolone, mobile 1 kolona */
@media (max-width:1023px){ .site-footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem;padding:3rem 0 2rem} }
@media (max-width:767px){ .site-footer__grid{grid-template-columns:1fr} .site-footer__bar-in{flex-direction:column;align-items:flex-start} }

/* FAZA 6 — utility + dugmad */
.section-pad{padding-block:clamp(4rem,10vw,9rem)}
/* Bez `background` u tranziciji — inače hover-out animira background-position nazad (reverse sweep) */
.btn{display:inline-block;padding:.9rem 2.4rem;font-family:var(--font-mono);font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--gold);background:none;color:var(--text);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease)}
/* Gold gradient swipe na hover-u — ista tehnika kao credit-link u footer-u; jednokratni sweep pri ulasku (0.6s), bez exit animacije (reset trenutno); u mirovanju i na kraju čisto var(--gold) */
.btn--gold{background:linear-gradient(105deg,var(--gold) 40%,var(--gold-2) 50%,var(--gold) 60%);background-size:250% 100%;background-position:100% 0;color:var(--bg)}
.btn--gold:hover{background-position:0% 0;border-color:var(--gold-2);transition:background-position .6s cubic-bezier(.45,0,.25,1),border-color .3s var(--ease)}
.btn--ghost{border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--lg{padding:1.3rem 3.4rem;font-size:.95rem}

/* FAZA 6/13 — hero (pozadinska slika greyscale + tamni veo; gradijent kao fallback pre učitavanja) */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--header-h) + 2rem) 0 5rem;overflow:hidden}
.hero__bg{position:absolute;inset:0;background:radial-gradient(ellipse 90% 65% at 50% 38%,var(--gold-glow),transparent 62%),radial-gradient(ellipse 140% 90% at 50% 115%,var(--bg-2) 0%,transparent 70%)}
/* Hero slika stoji statično — bez ken burns-a (keyframes ostaju za .about-visual__art) */
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--veil-strong)}
.hero__in{position:relative;z-index:1}
.hero__title{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,9vw,8.5rem);letter-spacing:.08em;line-height:1;margin:.35em 0 .15em;min-height:1em}
/* Letter reveal — hero naslovi (home + page heroes): fade + rise + blur→sharp, 70ms stagger po slovu.
   data-base-delay → --d varijabla za početno kašnjenje pre prvog slova */
.js [data-title-reveal]{white-space:nowrap}
.js [data-title-reveal] .ch{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(12px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--d,0ms) + var(--i,0)*70ms)}
.js [data-title-reveal].in .ch{opacity:1;transform:none;filter:blur(0)}
.hero__tagline{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,3vw,2.4rem);color:var(--gold-2);overflow:hidden}
.hero__sub{color:var(--muted);max-width:44ch;margin:1.2rem auto 0}
.hero__cta{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:3rem}
.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:var(--muted);font-size:1.2rem;z-index:1;animation:bounce 2.2s var(--ease) infinite}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* FAZA 6 — EQ barovi (JS generiše 28 barova sa nasumičnim tempom) */
.eq{display:flex;gap:5px;align-items:flex-end;height:56px;margin:2.5rem auto;width:max-content}
.eq span{width:4px;height:20%;background:linear-gradient(180deg,var(--gold-2),var(--gold));animation:eq 1.1s ease-in-out infinite alternate}
@keyframes eq{from{height:12%}to{height:100%}}

/* FAZA 6 — marquee (8 ponavljanja → polovina trake pokriva i ultrawide; seamless translateX(-50%)) */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:1.1rem 0;background:var(--bg-2)}
.marquee__track{display:flex;gap:4rem;width:max-content;animation:marquee 100s linear infinite}
.marquee__track span{font-family:var(--font-mono);letter-spacing:.3em;color:var(--muted);white-space:nowrap;text-transform:uppercase;font-size:.85rem}
.marquee__track b{color:var(--gold);font-weight:400}
@keyframes marquee{to{transform:translateX(-50%)}}

/* FAZA 6 — filozofija (sticky levo, kartice desno) */
.philosophy h2,.specs h2,.dipole h2,.craft h2,.cta h2{font-size:var(--fs-h2)}
.philosophy__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:6rem}
.philosophy__left{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start}
.philosophy__sub{color:var(--muted);margin-top:1rem;max-width:36ch}
.philosophy__card{background:var(--bg-2);border:1px solid var(--line);padding:2.5rem;margin-bottom:2rem}
.philosophy__card h3{color:var(--gold);font-size:var(--fs-h3);margin-bottom:.8rem}
.philosophy__card p{color:var(--muted)}

/* FAZA 6 — sistem u brojkama (animirani brojači) */
.specs{background:var(--bg-2);border-block:1px solid var(--line)}
.specs__head{text-align:center;margin-bottom:4.5rem}
.specs__sub{color:var(--muted);margin-top:.8rem}
.specs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.spec__num{font-family:var(--font-display);font-weight:600;font-size:clamp(2.5rem,5vw,4.5rem);color:var(--gold-2);line-height:1;display:block}
.spec__label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* FAZA 6 — dipol (figure-8 SVG koji se iscrtava na scroll) */
.dipole__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:5rem;align-items:center}
.dipole h2{margin-bottom:1rem}
.dipole p:last-child{color:var(--muted);max-width:46ch}
.dipole-svg{width:min(300px,60vw);height:auto;display:block;margin-inline:auto}

/* FAZA 6 — zanat / materijali (horizontalni snap-scroll red) */
.craft__head{text-align:center;margin-bottom:3rem}
.craft__sub{color:var(--muted);margin-top:.8rem}
.craft__row{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(4vw,calc((100vw - var(--container)) / 2)) 1.5rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.craft__card{min-width:min(320px,78vw);max-width:320px;background:var(--bg-2);border:1px solid var(--line);padding:2.5rem;scroll-snap-align:start;margin-bottom:.5rem}
.craft__card h3{color:var(--gold);font-size:var(--fs-h3);margin:1.4rem 0 .8rem}
.craft__card p{color:var(--muted)}

/* FAZA 6 — iskustva (zlatni navodnici; kontinualni marquee-stil carousel + drag/swipe) */
.quotes-carousel{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.quotes-carousel.dragging{cursor:grabbing}
/* Bez tranzicije — rAF postavlja transform svaki frame (auto-kretanje + drag) */
.quotes-track{display:flex;gap:2rem;will-change:transform}
.quote{flex:0 0 calc((min(1600px,92vw) - 4rem)/3);background:var(--bg-2);border:1px solid var(--line);padding:2.5rem}
.quote::before{content:'\201C';font-family:var(--font-display);font-size:4.5rem;line-height:.6;color:var(--gold);display:block;margin-bottom:1.2rem}
.quote blockquote{line-height:1.7}
.quote figcaption{margin-top:1.5rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* FAZA 6 — CTA */
.cta{text-align:center;background:radial-gradient(ellipse 70% 90% at 50% 100%,var(--gold-glow-soft),transparent 65%)}
.cta h2{font-size:var(--fs-h2);margin-bottom:1rem}
.cta p{color:var(--muted);max-width:46ch;margin:0 auto 2.5rem}

/* FAZA 11 — tablet tier 768–1023px (matrica: 2 kolone, filozofija bez sticky-ja) */
@media (min-width:768px) and (max-width:1023px){
  .philosophy__left{position:static}
  .specs__grid{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
}

/* FAZA 11 — mobile tier ≤767px (matrica: 1 kolona, stack sekcije) */
@media (max-width:767px){
  .philosophy__grid{grid-template-columns:1fr;gap:2rem}
  .philosophy__left{position:static}
  .specs__grid{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
  .dipole__grid{grid-template-columns:1fr;gap:3rem;text-align:center}
  .dipole p:last-child{margin-inline:auto}
}

/* Iskustva carousel — <1024px: centrirana kartica sa susednim karticama vidljivim levo/desno (peek) */
@media (max-width:1023px){ .quote{flex-basis:min(68vw,400px);padding:2rem} }

/* FAZA 11 — mobile poliranje: EQ manji, touch targeti ≥44px */
@media (max-width:767px){
  .eq{height:40px;gap:4px}
  .gfilter{min-height:44px;display:inline-flex;align-items:center}
  .site-footer li a{padding:.7rem 0}
}

/* FAZA 11 — ekstra male širine (320–400px): hero naslov stane u container */
@media (max-width:400px){
  .hero__title{font-size:min(11vw,3.4rem);letter-spacing:.05em}
}

/* FAZA 6 — reveal sistem (.js klasu dodaje main.js; bez JS-a sadržaj ostaje vidljiv) */
/* FAZA 10 — data-delay (ms) postavlja --d u JS-u → redosled elemenata unutar sekcije */
/* Početno sakrivanje je trenutno (bez tranzicije) — inače se elementi animirano „isključuju" iz vidljivog stanja
   kad main.js doda .js klasu posle prvog rendera. Tranzicija je samo na .in stanju: reveal 0→1. */
.js [data-reveal]{opacity:0;transform:translateY(28px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.js [data-reveal="mask"] > span{display:block;transform:translateY(110%)}
.js [data-reveal="mask"].in > span{transform:none;transition:transform .9s var(--ease) var(--d,0s)}

/* FAZA 6 — reduced motion globalna kočnica */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .mobilenav.open .mobilenav__panel nav a,.mobilenav.open .mobilenav__langs li a{transition-delay:0s !important}
  .langsw__list{transition-delay:0s !important}
  .js [data-reveal="mask"] > span{transform:none !important}
}

/* FAZA 7 — o nama: uvod (page-hero banner sa greyscale slikom; citat i vizuel ispod) */
/* Page hero naslovi (o nama/galerija/kontakt/404) — ista veličina na svim stranicama */
.page-hero h1{font-size:clamp(2.2rem,5vw,3.8rem);margin-top:.7rem}
.about-intro__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;align-items:center;padding-top:clamp(4rem,10vw,9rem);padding-bottom:clamp(4rem,10vw,9rem)}
.about-visual__frame{background:radial-gradient(ellipse 80% 60% at 50% 45%,var(--gold-glow-faint),transparent 70%),var(--bg-2);border:1px solid var(--line);overflow:hidden}
.about-visual__art{width:100%;height:auto;display:block;animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.about-quote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.35;overflow:hidden}
.about-quote::before{content:"";display:block;width:48px;height:2px;background:var(--gold);margin-bottom:1.8rem}

/* FAZA 7 — priča (drop-cap na prvom paragrafu) */
.story__col{max-width:64ch}
.story h2{font-size:var(--fs-h2);margin:.7rem 0 2.5rem}
.story__text p{color:var(--muted);margin-bottom:1.5rem}
.story__text > p:first-child::first-letter{float:left;font-family:var(--font-display);font-weight:700;font-size:3.2em;line-height:.85;color:var(--gold);margin-right:.15em;margin-top:.06em}

/* FAZA 7 — direktno (pozicioniranje + prilika za kolekcionare; poslednji paragraf istaknut) */
.direct__col{max-width:68ch;margin-inline:auto;text-align:center}
.direct h2{font-size:var(--fs-h2);margin:.7rem 0 2.5rem}
.direct__text p{color:var(--muted);line-height:1.8;margin-bottom:1.6rem}
.direct__text > p:last-child{color:var(--text);font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5}

/* FAZA 7 — timeline (zlatna linija „raste" na scroll, .in iz reveal sistema) */
/* Isti h2 kao ostale sekcije na o nama (story) */
.milestones__head{text-align:center}
.milestones__head h2{font-size:var(--fs-h2)}
.timeline{position:relative;padding-left:3rem;list-style:none;max-width:720px;margin:4rem auto 0}
.timeline::before{content:"";position:absolute;left:0;top:.5rem;width:1px;height:calc(100% - 1rem);background:var(--line)}
.timeline::after{content:"";position:absolute;left:0;top:.5rem;width:1px;height:calc(100% - 1rem);background:linear-gradient(180deg,var(--gold-2),var(--gold));transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease)}
.timeline.in::after{transform:scaleY(1)}
.tl-item{position:relative;padding-bottom:3rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-3rem;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);transform:translateX(-50%)}
.tl-item__year{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3em;color:var(--gold-2)}
.tl-item h3{font-size:1.4rem;margin:.6rem 0 .7rem}
.tl-item p{color:var(--muted);max-width:52ch}

/* FAZA 7 — vrednosti (3 stupca sa mono ikonama) */
/* Isti h2 kao ostale sekcije na o nama (story) */
.values__head{text-align:center;margin-bottom:4rem}
.values__head h2{font-size:var(--fs-h2)}
.values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.value{background:var(--bg-2);border:1px solid var(--line);padding:2.5rem;text-align:center}
/* Ikone bez okvira — 60px, boja zlato */
.value__icon{display:inline-grid;place-items:center;color:var(--gold)}
.value__icon svg{width:60px;height:60px}
.value h3{font-size:var(--fs-h3);color:var(--gold);margin:1.5rem 0 .8rem}
.value p{color:var(--muted)}

/* FAZA 11 — matrica: about uvod u 1 kolonu na mobile-u; vrednosti u 1 kolonu do tableta (3 kartice se stežu na 768–1023) */
@media (max-width:767px){ .about-intro__grid{grid-template-columns:1fr;gap:2.5rem} }
@media (max-width:1023px){ .values__grid{grid-template-columns:1fr} }

/* FAZA 8 — galerija: sub, filteri (aria-pressed toggle), masonry grid */
.gallery-sub{color:var(--muted);max-width:52ch;margin:1rem auto 0}
.gallery-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-bottom:3.5rem}
.gfilter{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.65rem 1.4rem;cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.gfilter:hover{border-color:var(--gold);color:var(--text)}
.gfilter.is-active{background:var(--gold);border-color:var(--gold);color:var(--bg)}

.gallery-grid{columns:3 320px;column-gap:1.2rem}
.gitem{break-inside:avoid;margin-bottom:1.2rem;border:1px solid var(--line);background:var(--bg-2)}
.gitem.hide{display:none}
.gitem__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.gitem img{width:100%;height:auto;filter:saturate(.92);transition:transform 1.1s var(--ease)}
.gitem:hover img,.gitem__btn:focus-visible img{transform:scale(1.06)}

/* FAZA 8 — lightbox (overlay, tastatura ←/→/ESC, scroll lock) */
.lightbox{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--overlay);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.lightbox__stage{max-width:min(88vw,1400px);margin:0;text-align:center}
.lightbox__img{max-width:100%;max-height:72vh;width:auto;height:auto;border:1px solid var(--line)}
.lightbox__cap{margin-top:1.2rem;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3em;color:var(--muted)}
.lightbox__close{position:absolute;top:1.6rem;right:1.6rem;width:48px;height:48px;background:none;border:1px solid var(--line);color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease)}
.lightbox__close:hover{border-color:var(--gold);color:var(--gold)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:none;border:1px solid var(--line);color:var(--text);font-size:1.3rem;cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease)}
.lightbox__nav:hover{border-color:var(--gold);color:var(--gold)}
.lightbox__prev{left:1.6rem}
.lightbox__next{right:1.6rem}

/* FAZA 11 — lightbox dugmad ≥44px na mobile-u (touch targeti) */
@media (max-width:767px){
  .lightbox__nav,.lightbox__close{width:44px;height:44px}
  .lightbox__prev{left:.7rem}
  .lightbox__next{right:.7rem}
  .lightbox__close{top:.7rem;right:.7rem}
}

/* FAZA 9 — kontakt: sub + sigurna forma (CSRF, honeypot, rate limit) */
.contact-sub{color:var(--muted);max-width:46ch;margin:1rem auto 0}
.cform{max-width:680px;margin-inline:auto;background:var(--bg-2);border:1px solid var(--line);padding:clamp(1.5rem,4vw,3rem)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-bottom:1.6rem}
.cform label{display:block;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* Crvena zvezdica — obavezno polje (pored naziva) */
.cform .req{color:var(--error);margin-left:.35em}
.cform input::placeholder,.cform textarea::placeholder{color:var(--muted);opacity:.65}
.cform input,.cform textarea{display:block;width:100%;margin-top:.75rem;background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--font-body);font-size:1rem;padding:.8rem 1rem;transition:border-color .3s var(--ease)}
.cform textarea{resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:var(--gold)}
/* Pointer fokus — bez outline-a (dovoljna promena bordere); tastatura (:focus-visible) zadržava globalni zlatni outline */
.cform input:focus:not(:focus-visible),.cform textarea:focus:not(:focus-visible){outline:none}
.cform button{margin-top:1.6rem}
/* reCAPTCHA v2 (checkbox) — dark tema iz config-a, razmak usklađen sa formom */
.cform .g-recaptcha{margin-top:1.6rem}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.cform__status{min-height:1.5em;margin-top:1.2rem;color:var(--gold);font-size:.95rem}

/* FAZA 9 — responsive */
@media (max-width:767px){
  .cform__row{grid-template-columns:1fr}
}