/* ============================================================
   MYO MASSAGE CENTAR — Niš · masaža & inverziona terapija
   v4 "MASLINA I ZLATO" — gracialis-klasa, Myo identitet.
   Topla kost + duboka maslina + antičko zlato; fotografija sveća
   nosi atmosferu; meke kartice, pill dugmad, spora animacija.
   Svetla tema podrazumevana; tamna crna-maslina + zlato na prekidač.
   Rebrend 2026-08-11 (v3 "TOPLINA" = ružino drvo i ćilibar): ista L/alfa,
   rotirana nijansa — sve kontrast-odluke panela 2026-07-28 ostaju validne.
   Bez build koraka.
   ============================================================ */

/* ---- Fontovi (self-host, latin + latin-ext za č ć š ž đ) ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: 'Fraunces';
  src: url('fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
  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: 'Inter';
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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;
}

/* ---- TOKENS ---- */
:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --step-h1: clamp(2.7rem, 1.9rem + 3.4vw, 4.7rem);
  /* hero naslov ima svoju skalu — na 1920 je 100px (h1 skala staje na 75px);
     poster hero nosi prvi utisak i sme da bude krupniji od svih ostalih naslova.
     Donja granica nije fiksnih 3.1rem nego "koliko staje" (2026-09-18): na uskom
     ekranu / uvećanom tekstu 3.1rem ne staje ("Sat vremena" = 5.24em + margine
     2.5rem) i naslov se lomio u 4 reda. 5.5 = 5.24 + ~5% rezerve — ako se tekst
     naslova promeni, izmeriti ponovo. Od 320px sa normalnim tekstom ništa se ne
     menja (izmereno piksel-po-piksel). */
  --step-hero: clamp(min(3.1rem, calc((100vw - 2.5rem) / 5.5)), 1.55rem + 5.4vw, 6.25rem);
  --step-h2: clamp(1.9rem, 1.55rem + 1.5vw, 2.9rem);
  --step-h3: clamp(1.3rem, 1.2rem + 0.4vw, 1.6rem);
  --step-mission: clamp(1.6rem, 1.3rem + 1.3vw, 2.5rem);
  --step-lead: clamp(1.1rem, 1.04rem + 0.3vw, 1.35rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
  --step--1: clamp(0.88rem, 0.86rem + 0.1vw, 0.95rem);
  --micro: clamp(0.74rem, 0.72rem + 0.1vw, 0.8rem);

  --space-2xs: 0.6rem;
  --space-xs: 0.9rem;
  --space-s: 1.25rem;
  --space-m: 1.9rem;
  --space-l: 2.6rem;
  --space-xl: clamp(3.2rem, 2.8rem + 2vw, 4.6rem);
  --space-2xl: clamp(4.5rem, 3.6rem + 4.5vw, 7.5rem);

  --container: 74rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 26px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 300ms;
  --dur-med: 600ms;
  --dur-slow: 850ms;

  --z-nav: 50;
  --z-sticky: 60;

  /* PALETA — "maslina i zlato" (svetla tema = podrazumevana).
     Rebrend 2026-08-11: ista svetlina (L) i alfa kao stara paleta, samo je
     nijansa rotirana (braon/roze 27–78 → maslina 100–135, ćilibar 70 → oker 88).
     Kontrast zavisi od luminanse, pa sve izmerene odluke panela ostaju važeće.
     Paleta v2 2026-08-15 "dublja maslina, punije zlato": maslina L 0.42→0.36
     (uz +C da dubina ne ugasi boju), duboko zlato toplije/dublje (kontrast
     cifara na traci raste 3.29→3.65), svetlo zlato ka metalik zlatu (C 0.09→
     0.125; duboko zlato je već na ~95% sRGB plafona pigmenta, svetlo je imalo
     prostora). Svi kontrasti ponovo izmereni na stvarnim pozadinama.
     Paleta v3 2026-08-15 "dublja maslina, živo zlato" (PALETA-V3-UI-PLAN.md):
     zelena se deli po ulogama — dugme ide na skoro-crnu maslinu (L 0.30),
     hover SVETLIJE (v2 maslina), tekstualni akcenti na L 0.33; duboko zlato
     je na 99% sRGB plafona hrome pa "zlatnije" ide kroz metalik gradijent
     na krupnim glifovima (--metal), a sitno zlato TAMNIJE (L 0.523 — sitne
     kapitele prvi put ≥4.5:1: na kosti 4.93, na traci 4.54). */
  --bg: #f4f3ea;
  --bg: oklch(0.962 0.012 100);
  --surface: #fbfaf5;
  --surface: oklch(0.984 0.007 100);
  --band: #eceadd;
  --band: oklch(0.935 0.018 102);
  --ink: #22291e;
  --ink: oklch(0.27 0.022 135);
  --ink-soft: #535b4c;
  --ink-soft: oklch(0.46 0.025 130);
  --accent: #273d0c;
  --accent: oklch(0.33 0.078 131);
  --accent-hover: #1d3106;
  --accent-hover: oklch(0.285 0.07 131);
  --accent-ink: #f8f7f0;
  --accent-ink: oklch(0.975 0.009 100);
  /* dugmad "kutija za nakit" su ISTA u obe teme (skoro-crna maslina fila +
     šampanjska slova + zlatna nit) — poseban token, jer tamna tema --accent
     pretvara u zlato, a kutija mora ostati maslina. v3: fila L 0.30 (šampanj
     slova 12.38:1), hover ide SVETLIJE na v2 maslinu — ispod L 0.30 nema
     prostora nadole, pa hover radi kao "svetlo padne na kutiju". Na TAMNIM
     scenama fila ostaje v2 (0.36): L 0.30 na --dark meri 1.21:1 i nestaje —
     override niže kod .tamna/footer. */
  --btn-bg: #21350d;
  --btn-bg: oklch(0.302 0.068 132);
  --btn-bg-hover: #2f4513;
  --btn-bg-hover: oklch(0.36 0.08 130);
  /* jačina zlatne niti po rubu dugmadi: na tamnim scenama fila tone u mrak,
     pa nit preuzima ivicu — tamo se diže na 75% (override niže) */
  --nit: 55%;
  /* slova dugmadi: BELA/kost (odluka vlasnika 16.08. — šampanj slova v2/v3 su
     naginjala celu svetlu temu u žuto). FIKSNA vrednost, ne var(--accent-ink):
     u tamnoj temi accent-ink postaje crna (za zlatni --accent), a fila dugmeta
     ostaje maslina u obe teme, pa i slova ostaju ista. Na v3 fili #21350d meri
     12.38:1, na tamnim scenama (#2f4513) 9.87:1. Zlatna nit po rubu OSTAJE. */
  --btn-ink: #f8f7f0;
  --btn-ink: oklch(0.975 0.009 100);
  /* duboko antičko zlato — na svetlom mora L≤0.60 da bi krupne cifre prešle 3:1
     I NA TRACI --band (panel runde 1: 0.64 je na bandu merio 2.8:1); u tamnoj
     temi --gold postaje svetlo zlato (override niže). Svetlo zlato je i --gilt.
     v3: 0.523/0.104/85 — tamnije radi gravure umesto senfa; sitan tekst prvi
     put ≥4.5:1 (kost 4.93, traka 4.54), krupne cifre i dalje ≥3:1. */
  --gold: #856409;
  --gold: oklch(0.523 0.104 85);
  /* metalik gradijent za KRUPNE glifove (cifre, monogram, futer-italik) preko
     background-clip: text — "zlatnije" ne može pigmentom (plafon), može
     prelazom svetla. Svetle scene: tihi "mesing", svi stopovi ≥3.29:1 na
     traci. Tamne scene (override niže): pun nakit-gradijent, najtamniji stop
     3.19:1 na --dark; svetli kraj gore ("svetlo pada odozgo"). Dugmad NIKAD
     ne dobijaju gradijent (v2 presuda: metal na dugmetu = plastika). */
  /* Smer je VERTIKALAN (180deg): dijagonala se preko elemenata različitih
     širina razvlačila u različite uglove, pa je "1000+" imao drugačiji sjaj
     od "2" (panel v3 r1). Tamni recept: uska spekularna traka na ~55% visine
     — "brušen metal"; svi stopovi mere ≥3:1 na svojim pozadinama. */
  /* svetli raspon se širi NADOLE (#6f5502): naviše ne može — svetliji stop od
     #a2790f pada ispod 3:1 na traci; ovako "1000+" i "2" dele vidljiv prelaz */
  --metal: linear-gradient(180deg, #a2790f 0%, #8a6806 55%, #6f5502 100%);
  --metal-dark: linear-gradient(180deg, #8a6a10 0%, #d6b34f 42%, #f0dc9c 55%, #b8922e 100%);
  --border: #d9d8cd;
  --border: oklch(0.88 0.015 105);
  --shadow: 0 10px 30px oklch(0.35 0.03 130 / 0.09);
  --shadow-lift: 0 18px 44px oklch(0.35 0.03 130 / 0.13);
  /* tamna crna-maslina scena unutar svetle strane */
  --dark: #1b2318;
  --dark: oklch(0.245 0.024 135);
  --dark-2: #293122;
  --dark-2: oklch(0.30 0.028 132);
  --dark-ink: #eeede4;
  --dark-ink: oklch(0.945 0.012 100);
  --dark-soft: #b8b9a7;
  --dark-soft: oklch(0.78 0.025 110);
  /* v2: šampanj → metalik zlato (rang #d4af37); na --dark meri 8.05:1 */
  --gilt: #d6b34f;
  --gilt: oklch(0.78 0.125 90);
  /* svetlija varijanta — samo za sitan tekst PREKO fotografije, gde --gilt
     ne skuplja 4.5:1 prema osvetljenom zidu (nasleđe merenja sa --gilt: 2.57:1) */
  --gilt-hi: #edd894;
  --gilt-hi: oklch(0.885 0.09 93);
  /* hero natpisi preko fotografije ("Masažni centar u Nišu" + "Vas.") — 16.08.
     vlasnik: moraju biti ZLATNIJI od šampanja (gilt-hi je bio isti kao v1).
     C 0.09→0.135 (+50% zasićenja), L 0.885→0.84. Izmereno na najgorim pikselima
     fotografije ispod teksta (vinjeta uračunata): "Vas." 4.52:1 mobil / 3.42:1
     desktop (prag za displej 3:1 ✓); eyebrow 3.77:1 na mobilnom najgorem
     pikselu — ivicu po WCAG G18 nosi pojačani tamni rub na slovima. Pun gilt
     #d6b34f je odbijen merenjem: 2.78:1 iza "Vas." na desktopu. */
  --hero-gold: #edc658;
  --hero-gold: oklch(0.84 0.135 90);
  --dark-line: oklch(1 0 0 / 0.14);
  --grain-op: 0.045;
  /* brightness(1), ne none: "none" se ne može komponovati u filter listi
     (.team-card img dodaje topli grade preko ovog tokena) */
  --photo-filter: brightness(1);
  /* SCRIM je u svetloj temi MINIMALAN: fotografija mora da ŽARI zlatno (panel
     2026-07-28: "svetla tema je bila mrak — identična tamnoj; referenca istu
     scenu drži svetlom"). Vertikalni gradijent samo uokviruje (nav gore, prelaz
     dole), sredina je skoro čista — kontrast ispod teksta nosi vinjeta
     (.hero__glow). Tamna tema ima SVOJ, teži scrim (override niže). */
  --scrim: linear-gradient(to top, oklch(0.2 0.02 130 / 0.55), oklch(0.21 0.02 130 / 0.12) 38%, oklch(0.22 0.02 130 / 0.05) 68%, oklch(0.2 0.02 130 / 0.34));
  /* ekspozicija hero fotografija: prave fotografije (2026-09-18) su snimljene
     dnevnim svetlom i već su svetle — svetla tema ih ne dira (stari
     brightness(1.18) je bio za tamnu AI fotografiju i ove je ispirao) */
  --hero-filter: brightness(1);
  color-scheme: light;
}

/* TAMNA TEMA — samo na izričit prekidač (svetla je podrazumevana) */
:root[data-theme="dark"] {
  /* tamna tema = crna-maslina + zlato: akcenat postaje svetlo zlato (klasičan
     luksuzni par), tekst na njemu je pozadinska crna — 9.12:1 */
  --bg: #181e15;
  --bg: oklch(0.225 0.02 135);
  /* 0.29, ne 0.265: FAQ kartice na --band (0.25) su se stapale sa pozadinom
     (panel runde 1) — podignuta površina vraća pouzdanu separaciju.
     v3: 0.30→0.315 — senke na tamnom ne rade, pa separaciju kartica nosi
     razlika fila (art-director v3: gornji rub kartice je "plivao") */
  --surface: #2d3428;
  --surface: oklch(0.315 0.024 133);
  --band: #1e241a;
  --band: oklch(0.25 0.02 134);
  --ink: #edebe3;
  --ink: oklch(0.94 0.012 100);
  /* v3: 0.73→0.78 — sekundarni tekst na karticama je bio na granici (5.64:1);
     ista svetlina kao --dark-soft, sada 6.45:1 na podignutoj površini */
  --ink-soft: #b8b9a8;
  --ink-soft: oklch(0.78 0.024 110);
  --accent: #dcba5c;
  --accent: oklch(0.8 0.12 90);
  --accent-hover: #edce79;
  --accent-hover: oklch(0.86 0.11 90);
  --accent-ink: #181e15;
  --accent-ink: oklch(0.225 0.02 135);
  /* kutija za nakit ne prati zlatni --accent — fila je fiksna maslina v2
     (v3 skoro-crna bi na tamnoj pozadini merila 1.21:1 i nestala), nit na
     75% i šampanj je odvajaju od pozadine */
  --btn-bg: #2f4513;
  --btn-bg: oklch(0.36 0.08 130);
  --btn-bg-hover: #243909;
  --btn-bg-hover: oklch(0.315 0.075 130);
  --nit: 75%;
  --border: #373d31;
  --border: oklch(0.35 0.022 130);
  /* u tamnoj temi duboko zlato ne prolazi — cifre i tinte nose svetlo zlato,
     a metalik gradijent prelazi na pun nakit-recept */
  --gold: #d6b34f;
  --gold: oklch(0.78 0.125 90);
  --metal: var(--metal-dark);
  --shadow: 0 10px 30px oklch(0 0 0 / 0.35);
  --shadow-lift: 0 18px 44px oklch(0 0 0 / 0.45);
  --dark: #272e21;
  --dark: oklch(0.29 0.026 132);
  --dark-2: #333b2c;
  --dark-2: oklch(0.34 0.028 130);
  --grain-op: 0.03;
  --photo-filter: brightness(0.92) saturate(0.96);
  /* tamna tema ima SVOJ hero: teži scrim + prigušena fotografija — "večernja"
     varijanta; svetla mora na prvi pogled biti svetlija (panel 2026-07-28) */
  --scrim: linear-gradient(to top, oklch(0.18 0.02 130 / 0.72), oklch(0.19 0.02 130 / 0.3) 40%, oklch(0.2 0.02 130 / 0.18) 70%, oklch(0.18 0.02 130 / 0.5));
  --hero-filter: brightness(0.84) saturate(0.95);
  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding: anchor skokovi (hero cue → #usluge, #pokloni iz kartice
   vaučera) ne smeju da završe ispod fiksne trake (WCAG 2.2 Focus Not Obscured) */
/* overflow-x: clip mora na <html> I na <body> (izmereno 2026-09-18, Chromium
   mobilni režim). Samo body: vrednost se prenese na prozor, a telefon i dalje
   ŠIRI ceo raspored čim bilo šta prelije — fiksna traka postane šira od
   ekrana, hamburger izleti desno, strana se pomera levo-desno. Samo html:
   isto. Tek sa oba body stvarno seče višak i širina ostaje širina ekrana. */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; overflow-x: clip; }
html.sheet-open { overflow: hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
html.theme-snap *, html.theme-snap *::before, html.theme-snap *::after { transition: none !important; }
/* Fallback glatke promene teme (browser bez View Transitions — app.js tada
   stavi .theme-fade na tren): tranzicije boja na SVIM elementima, pa se i
   elementi bez sopstvene transition deklaracije pretope umesto da preskoče.
   Gradijenti i scrim (background-image) ne mogu da se animiraju — preskoče,
   ali uz pretopljene boje okoline to ne bode oči. VT put ovo ne koristi. */
html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 400ms var(--ease-inout), color 400ms var(--ease-inout),
    border-color 400ms var(--ease-inout), fill 400ms var(--ease-inout),
    stroke 400ms var(--ease-inout), box-shadow 400ms var(--ease-inout),
    filter 400ms var(--ease-inout), opacity 400ms var(--ease-inout),
    transform 400ms var(--ease-inout), translate 400ms var(--ease-inout) !important;
}
img, video { max-width: 100%; height: auto; display: block; }
/* `main img` namerno IZBACEN 20.08.2026: <main> je tada dodat radi pristupacnosti
   i SEO-a, a ovo pravilo bi tek tada prvi put pogodilo hero, gal-polica i
   lokacija.webp — u tamnoj temi --photo-filter je brightness(.92) saturate(.96),
   dakle vidljiva promena. Uslov je bio: nula vizuelnih izmena. Ako se ikad pozeli
   filter i na tim slikama, vratiti `main img,` na pocetak selektora. */
figure img, figure video, .card img, .gallery img { filter: var(--photo-filter); }
a { color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul[role='list'] { list-style: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
/* v2: fokus ide kroz PRAVI outline, ne box-shadow — box-shadow prsten su
   kaskadno gutale kasnije box-shadow deklaracije iste specifičnosti na
   .btn/.dock__cta/.pick__go (nalaz revizije v2), a outline niko ne gazi */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* v2: na tamnim scenama maslina v2 (L 0.36) je ΔL 0.11 od pozadine — fokus i
   selekcija bi se ugasili, pa ih tamo preuzima zlato */
.tamna :focus-visible, footer :focus-visible, .location-card :focus-visible,
.hero :focus-visible, .photo-hero .nav:not(.nav--scrolled) :focus-visible { outline-color: var(--gilt); }
.tamna ::selection, footer ::selection { background: var(--gilt); color: var(--dark); }

/* ---- Tipografija ---- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 520; font-variation-settings: 'opsz' 72; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--step-h1); line-height: 1.06; }
h2 { font-size: var(--step-h2); }
/* opsz 40, ne nasleđenih 72: plakatski rez Fraunces na 1.3–1.6rem (imena
   masera, naslovi koraka) daje tanke poteze — manja optička veličina vraća
   punija slova i prirodniji spacing na malim naslovima */
h3 { font-size: var(--step-h3); font-weight: 540; font-variation-settings: 'opsz' 40; letter-spacing: -0.008em; }
h1 em, h2 em { font-style: italic; font-weight: 480; color: var(--accent); }
/* text-wrap pretty: bez siročića (jedna reč u poslednjem redu) — progresivno */
p { max-width: 64ch; text-wrap: pretty; }
.lead { font-size: var(--step-lead); line-height: 1.55; color: var(--ink-soft); }
.eyebrow {
  font-size: var(--micro); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); font-weight: 600;
}

/* ---- Layout ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
section { padding-block: var(--space-2xl); }
.band { background: var(--band); }
/* gap 2xs + veći razmak pre lead-a: eyebrow pripada naslovu (zakon blizine),
   lead je uvodni pasus — tesno gore, vazduh dole */
.section-head { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: var(--space-xl); display: grid; gap: var(--space-2xs); justify-items: center; }
.section-head .lead { margin-inline: auto; margin-top: 0.45rem; text-wrap: balance; }
.section-head--left { text-align: left; margin-inline: 0; justify-items: start; }

/* ---- Dugmad ---- */
/* v2 "kutija za nakit" (2026-08-15, posle 3 runde proba — metal-gradijenti
   odbijeni kao plastika): JEDNO primarno dugme na celom sajtu, u obe teme —
   maslina fila + zlatna nit po rubu. Registar preuzet sa hero CTA ("caps +
   tracking kao eyebrow", panel 2026-07-28), sada za SVA dugmad.
   16.08: slova BELA (--btn-ink), ne šampanj — odluka vlasnika. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 1.15em 2.1em; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink);
  font-size: 0.8125rem; font-weight: 550; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gilt) var(--nit, 55%), transparent), var(--shadow);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gilt) 90%, transparent), var(--shadow-lift); }
/* pritisnuto = senka se SPUSTI (ne samo pomeraj) + brža tranzicija: mehanički
   "klik" kutije za nakit umesto lebdenja i pod prstom */
.btn:active { transform: translateY(0); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gilt) 90%, transparent), var(--shadow); transition-duration: 80ms; }
/* eksterni CTA (Google Forms, mape): odlazak sa sajta je najavljen strelicom
   u šampanj boji slova — predvidljivost je premium */
.btn[target="_blank"]::after { content: '↗'; font-size: 1.05em; line-height: 1; translate: 0 -0.05em; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn--light { background: var(--accent-ink); color: var(--accent); }
.btn--light:hover { background: #fff; }
.btn--outline-light { background: oklch(1 0 0 / 0.08); color: #fbfaf5; box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / 0.55); backdrop-filter: blur(4px); }
.btn--outline-light:hover { background: oklch(1 0 0 / 0.18); box-shadow: inset 0 0 0 1.5px #fbfaf5; }
/* tiha zlatna podvlaka u mirovanju: pored "kutije za nakit" goli bold tekst
   nije nosio nijedan brend-signal (panel v3 r2) */
.arrow-link {
  /* strelica je APSOLUTNA (van toka): kao flex-item je nasleđivala podvlaku,
     pa se ispod → crtao zalutali segment linije (mikro-sudija v3 r3) */
  position: relative; display: inline-block; padding-right: 1.05em;
  font-size: var(--step--1); font-weight: 600; color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--gold) 45%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.arrow-link:hover { text-decoration-color: var(--gold); }
.arrow-link::after { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
.arrow-link:hover::after { translate: 4px -50%; }
/* hover menja i boju teksta, ne samo strelicu — ista gramatika kao .btn
   (u tamnoj temi --accent-hover je svetlije zlato, radi u oba konteksta) */
.arrow-link:hover { color: var(--accent-hover); }
.arrow-link::after { content: '→'; transition: translate var(--dur-fast) var(--ease-out); }
/* dva sloja: mirna hairline na 30% currentColor (afordansa bez miša — inline
   link mora da se prepozna i pre hovera) + puna akcentna linija na hover */
.link-underline {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent)),
    linear-gradient(color-mix(in oklab, currentColor 30%, transparent), color-mix(in oklab, currentColor 30%, transparent));
  background-size: 0% 1.5px, 100% 1px;
  background-repeat: no-repeat;
  background-position: left bottom, left bottom;
  transition: background-size var(--dur-fast) var(--ease-out);
}
.link-underline:hover { background-size: 100% 1.5px, 100% 1px; }

/* ---- Navigacija ---- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav);
  /* grid 1fr/auto/1fr, ne flex space-between: desna strana trake (dugme+toggle)
     je šira od "Myo", pa je flex gurao linkove levo od stvarnog centra viewporta
     — na 1920 se videlo golim okom (korisnik 2026-07-28). Sa 1fr kolonama sredina
     je uvek na pravom centru, bez obzira na širine strana. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-s);
  padding: 0.9rem var(--gutter);
  transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* grid-column EKSPLICITNO: na telefonu su .nav__links display:none, pa bi
   auto-plasman gurnuo cluster (hamburger) u praznu SREDNJU kolonu — viđeno
   na živom sajtu 2026-07-28. Sa dodeljenim kolonama raspored ne zavisi od
   toga da li je srednja kolona prisutna. */
.nav__brand { grid-column: 1; justify-self: start; }
.nav__links { grid-column: 2; }
.nav__cluster { grid-column: 3; justify-self: end; }
.nav--scrolled {
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
/* U traci je SAMO značka, bez reči "Myo" pored nje: logo (2026-09-18) već
   ispisuje MYO i "massage centar", pa bi reč uz njega "mucala" (MYO + Myo, u
   dva različita pisma) — ista lekcija kao 2026-07-28 (m + Myo). Ime za čitače
   ekrana nosi alt slike. */
.nav__brand { display: inline-flex; align-items: center; text-decoration: none; }
/* visina 3rem, kao stara okrugla značka: traka ostaje ~78px, ispod
   scroll-padding-top od 5rem (80px) — izmereno 2026-09-18; širinu daje slika */
.nav__brand .brand-mark { height: 3rem; width: auto; }
/* Znak brenda (2026-10-08) — dizajnerov konačni logo, PROVIDAN, bez kruga
   (klijentova želja): zlatni MYO (O od dva polumeseca) i "— massage centar —"
   direktno na pozadini (assets/logo-myo-v3-*.webp). Okrugla značka od
   2026-10-07 (logo-myo-v2-*) ostaje samo u favikoni, ikonici za telefon i
   JSON-LD logu. Fajlove pravi logo-exploration/round-09-providni/gen.py.
   Motiv kamenja i dalje ZABRANJEN (koristi ga konkurent u Nišu). Pun kolor,
   ide kao <img> (ne kroz mask): boje su u samoj slici, iste u obe teme. */
.brand-mark {
  flex: none; height: 1.5em; width: auto;
}
.nav__links { display: none; gap: var(--space-m); list-style: none; align-items: center; }
.nav__links a {
  text-decoration: none; color: var(--ink-soft); font-size: var(--step--1); font-weight: 550;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left bottom;
  padding-bottom: 0.25em;
  transition: color var(--dur-fast) var(--ease-out), background-size var(--dur-fast) var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); background-size: 100% 1.5px; }
.nav__cluster { display: flex; align-items: center; gap: var(--space-xs); }
/* v2: nit ostaje i u traci (bez drop-senke — traka je mirna); pre v2 je bilo
   box-shadow:none, ali hover (veća specifičnost) donosi nit 90% + lift, pa bi
   iskakanje iz "ničega" bilo naglo */
.nav .btn { display: none; padding: 0.65em 1.5em; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gilt) 55%, transparent); }
.nav__toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
/* jedina interaktivna dugmad bez hover odgovora — tiha kap currentColor radi
   i preko fotografije (svetla slova) i na kosti (mastilo) */
.nav__toggle:hover, .nav__cluster .theme-toggle:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
@media (min-width: 54em) {
  .nav__links { display: flex; }
  .nav .btn { display: inline-flex; }
  .nav__toggle { display: none; }
}
/* preko tamne hero fotografije (dok nema skrola): svetli tekst + tamni scrim */
/* `no-repeat border-box` je obavezno: bez toga se gradijent (koji se podrazumevano
   meri po padding-box-u) ponavlja u 1px pojasu providnog border-bottom-a i tamo
   nacrta svoj najtamniji stop — tamnu liniju preko hero fotografije pre skrola. */
/* 2026-09-18: 0.55→0.68 + srednji stop — prave dnevne fotografije su pod
   trakom svetlije od stare AI noći (zid, prozor iza Vladana); linkovi su
   mereno padali na 2.9:1 najgori piksel */
.photo-hero .nav:not(.nav--scrolled) {
  background: linear-gradient(to bottom, oklch(0.2 0.02 130 / 0.68), oklch(0.2 0.02 130 / 0.4) 55%, transparent) no-repeat border-box;
}
.photo-hero .nav:not(.nav--scrolled) .nav__brand,
.photo-hero .nav:not(.nav--scrolled) .nav__links a,
.photo-hero .nav:not(.nav--scrolled) .nav__toggle,
.photo-hero .nav:not(.nav--scrolled) .theme-toggle { color: #fbfaf5; }
/* uzak tamni rub (WCAG G18, isti recept kao eyebrow u heroju) */
.photo-hero .nav:not(.nav--scrolled) .nav__links a { text-shadow: 0 1px 2px oklch(0.16 0.015 130 / 0.6), 0 0 8px oklch(0.16 0.015 130 / 0.4); }
/* preko fotografije: blaga senka odiže zlatna slova logoa sa fotografije;
   posle skrola nepotrebna (kost pozadina) */
.photo-hero .nav:not(.nav--scrolled) .brand-mark { filter: drop-shadow(0 1px 3px oklch(0.15 0.02 130 / 0.45)); }
.photo-hero .nav:not(.nav--scrolled) .nav__links a:hover,
.photo-hero .nav:not(.nav--scrolled) .nav__links a[aria-current="page"] { color: #fff; }
/* ghost pilula preko fotografije govori šampanj jezikom brenda, ne čisto
   belim (panel runde 2, prvobitno samo tamna tema) — v2: fotografija je ista
   tamna scena u OBE teme, pa i pilula nosi isti šampanj/nit identitet u obe
   (nalaz dizajn-revizije v2: bela varijanta je bila jedini CTA bez zlata) */
/* v3 r2: staklo je MASLINASTO, ne sivo-belo — neutralni smoke je bio jedini
   fill van palete na svetlom heroju */
.photo-hero .nav:not(.nav--scrolled) .btn { background: oklch(0.24 0.02 130 / 0.5); color: var(--btn-ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--gilt) 55%, transparent); backdrop-filter: blur(4px); }
.photo-hero .nav:not(.nav--scrolled) .btn:hover { background: oklch(0.24 0.02 130 / 0.68); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--gilt) 80%, transparent); }
/* 16.08: ikonična dugmad trake nazad u belo (grupno pravilo iznad ih već
   boji u #fbfaf5) — šampanj varijanta iz r2 povučena sa belim slovima dugmadi */

/* prekidač teme — na telefonu NIJE u traci nego u hamburger meniju (dole,
   "Svetla / tamna tema"). Traka na 390px time ostaje: logo + hamburger, bez
   dva ikonična dugmeta jedno uz drugo. Od 54em se vraća u traku. */
.nav__cluster .theme-toggle { display: none; }
@media (min-width: 54em) { .nav__cluster .theme-toggle { display: grid; } }
.theme-toggle { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.theme-toggle:hover { color: var(--ink); }
/* U TRACI (desktop): jedna ikonica, sunce↔mesec se ukrštaju u istoj ćeliji. */
.nav__cluster .theme-toggle svg { grid-area: 1 / 1; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nav__cluster .theme-toggle .icon-moon { opacity: 0; transform: rotate(-30deg) scale(0.8); }
:root[data-theme="dark"] .nav__cluster .theme-toggle .icon-sun { opacity: 0; transform: rotate(30deg) scale(0.8); }
:root[data-theme="dark"] .nav__cluster .theme-toggle .icon-moon { opacity: 1; transform: none; }

/* U MENIJU (telefon): ovo je jedini prekidač teme, pa nije diskretna ikonica nego
   pravi klizni prekidač — odmah se vidi i da je dugme i koja tema trenutno stoji. */
.sheet-foot .theme-toggle {
  width: 4.7rem; height: 2.5rem; padding: 0.22rem;
  display: grid; grid-template-columns: 1fr 1fr; place-items: center;
  border-radius: 999px; background: var(--band);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sheet-foot .theme-toggle::before {
  content: ''; position: absolute; z-index: 0;
  inset-block: 0.22rem; left: 0.22rem; width: 2.06rem; border-radius: 999px;
  background: var(--surface); box-shadow: 0 2px 8px oklch(0.35 0.03 130 / 0.16);
  transition: translate var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
:root[data-theme="dark"] .sheet-foot .theme-toggle::before { translate: 2.2rem 0; }
.sheet-foot .theme-toggle svg { position: relative; z-index: 1; transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.sheet-foot .theme-toggle .icon-sun { color: var(--accent); }
.sheet-foot .theme-toggle .icon-moon { opacity: 0.45; }
:root[data-theme="dark"] .sheet-foot .theme-toggle .icon-sun { color: inherit; opacity: 0.45; }
:root[data-theme="dark"] .sheet-foot .theme-toggle .icon-moon { color: var(--accent); opacity: 1; }

/* mobilni meni */
.nav__sheet {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  padding: 5.75rem var(--gutter) var(--space-m);
  background: var(--bg);
  display: flex; flex-direction: column; gap: var(--space-2xs);
  /* nizak ekran (traka pretraživača, pejzaž): panel se skroluje umesto da odseče kontakte */
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-102%);
  /* Zatvoren panel se NIKAD ne sme crtati. Sam transform nije dovoljno: dovoljno je da
     motor pomeri fiksni sloj (vizuelni viewport na telefonu, in-app pretraživač, snimak
     view-transition-a) pa da podnožje panela iscuri preko hero-a kao duh teksta.
     visibility+opacity to zatvaraju u svakom motoru; kašnjenje na visibility čuva
     animaciju zatvaranja. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--dur-med) var(--ease-inout),
              opacity 220ms var(--ease-out),
              visibility 0s linear var(--dur-med);
}
.nav__sheet.open {
  transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform var(--dur-med) var(--ease-inout),
              opacity 180ms var(--ease-out),
              visibility 0s;
}
/* odlazak na drugu stranicu: zatvori bez animacije, da cross-document view-transition
   ne uslika otvoren meni i ne prelije ga preko sledeće stranice */
.nav__sheet--instant, .nav__sheet--instant > a, .nav__sheet--instant * { transition: none !important; }
.nav__sheet a { text-decoration: none; }
.nav__sheet > a {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 520;
  border-bottom: 1px solid var(--border); padding-block: var(--space-xs);
  opacity: 0; translate: 0 14px; transition: opacity var(--dur-med) var(--ease-out), translate var(--dur-med) var(--ease-out);
}
.nav__sheet.open > a { opacity: 1; translate: 0 0; }
.nav__sheet.open > a:nth-child(1) { transition-delay: 60ms; }
.nav__sheet.open > a:nth-child(2) { transition-delay: 120ms; }
.nav__sheet.open > a:nth-child(3) { transition-delay: 180ms; }
.nav__sheet.open > a:nth-child(4) { transition-delay: 240ms; }
.nav__sheet.open > a:nth-child(5) { transition-delay: 300ms; }
.nav__sheet > a[aria-current="page"] { color: var(--accent); font-style: italic; }
.sheet-foot { margin-top: auto; display: grid; gap: var(--space-2xs); padding-top: var(--space-m); border-top: 1px solid var(--border); }
.sheet-foot a { font-size: var(--step--1); font-weight: 550; color: var(--ink-soft); padding-block: 0.35em; }
.sheet-foot .theme-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: 0.3rem; }
.sheet-foot .theme-row span { font-size: var(--micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
/* nizak ekran: meni mora da stane ceo — inače telefoni ostanu bez brojeva u podnožju */
@media (max-height: 44em) {
  .nav__sheet { padding-top: 5rem; gap: 0; }
  .nav__sheet > a { font-size: 1.5rem; padding-block: 0.55rem; }
  .sheet-foot { padding-top: var(--space-s); }
}
@media (min-width: 54em) { .nav__sheet { display: none; } }

/* ---- HERO — poster: fotografija + jedan krupan naslov + jedno dugme ----
   Namerno NEMA opisnog pasusa (na izričit zahtev korisnika uklonjen sa početne) ni drugog
   dugmeta ravnopravne težine: hero nosi ~80% prvog utiska i radi kao plakat, ne
   kao blok informacija. Potpis su kinetički naslov (mask-reveal reč-po-reč) i
   spor Ken Burns — fotografija se NE dira nikakvim vidljivim mehanizmom.
   Lekcija 2026-07-28. */
.hero {
  /* 100svh, ne 92: kraća visina je na foldu ostavljala praznu bež prugu koja
     izgleda kao neučitana sekcija (panel 2026-07-28, sve 3 širine) */
  position: relative; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: 7rem var(--gutter) 7.5rem;
  overflow: clip;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
/* Prave fotografije + video (2026-09-18). Slojevi: fotografije (0–2) < video
   (3) < scrim (4). Izbor po OBLIKU ekrana (max-aspect-ratio: 9/10), ne po
   širini: 9:16 video gubi manje od 3:2 fotografije na svakom ekranu užem od
   ~0.92:1 — telefon, ali i uspravan tablet; položen telefon dobija fotografije.
   Isti upit stoji u <head> preload-u i u app.js-u — menjati sva tri zajedno. */
.hero__slide, .hero__video { position: absolute; inset: 0; }
.hero__slide img, .hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__slide img { filter: var(--hero-filter); }
/* najsvetlija fotografija (soba sa tapetom): "Vas." pada na prozor — meren
   najgori piksel 2.65:1 bez ovog prigušenja */
.hero__slide--tapet img { filter: var(--hero-filter) brightness(0.86); }
/* Pretapanje BEZ propadanja u pozadinu: nova fotografija se pali IZNAD stare,
   a stara ostaje puna (is-prev) dok nova ne stigne do kraja — tek tada se gasi
   ispod nje. Istovremeno gašenje obe bi na sredini prelaza pokazalo pozadinu. */
.hero__slide { opacity: 0; transition: opacity 1600ms ease-in-out; }
.hero__slide.is-prev { opacity: 1; z-index: 1; transition: none; }
.hero__slide.is-on { opacity: 1; z-index: 2; }
/* "sporost je luksuz": spor Ken Burns na svakoj fotografiji dok je na ekranu
   (7.6s = 6s smene iz app.js-a + 1.6s pretapanja) — samo položen ekran; na
   uspravnom poster mora da ostane identičan prvom kadru videa */
@keyframes settle { from { transform: scale(1); } to { transform: scale(1.04); } }
@media not all and (max-aspect-ratio: 9/10) {
  .js .hero__slide.is-zoom img { animation: settle 7.6s linear forwards; }
}
.hero__video { display: none; z-index: 3; opacity: 0; transition: opacity 600ms var(--ease-out); }
@media (max-aspect-ratio: 9/10) {
  .hero__slide:first-child { opacity: 1; }
  .hero__slide:not(:first-child) { display: none; }
  .hero__video { display: block; }
  /* prvi kadar videa JE poster, pa je pojava videa nevidljiva */
  .hero__video.is-playing { opacity: 1; }
}
.hero__bg::after { content: ''; position: absolute; inset: 0; z-index: 4; background: var(--scrim); }

/* Meka vinjeta ispod teksta — ČIST gradijent, bez ijednog vidljivog mehanizma.
   Backdrop blur je UKLONJEN (na živom sajtu se video kao masna fleka: sredina
   fotografije mutna, uglovi oštri), a s njim i hairline lukovi (čitali su se
   kao ogrebotina preko fotografije, ne kao dizajn). Fotografija ostaje netaknuta
   i oštra — kontrast nose vinjeta + dvoslojna senka na tekstu. Vinjeta je toliko
   velika i postepena da joj se ivica ne vidi ni na 1920. Lekcija 2026-07-28. */
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 46%; translate: -50% -50%;
  /* 210vw na telefonu: uža vinjeta se gasila pre desne ivice pa je eyebrow
     preko svetle daske prozora merio 2:1 (meren najgori piksel) */
  width: min(210vw, 92rem); aspect-ratio: 1 / 0.78; border-radius: 50%;
  /* 2026-09-18 (prave fotografije + video): +0.06/+0.06/+0.04/+0.02 — dnevne
     fotografije su svetlije od stare AI noći; zlatni natpisi su na najsvetlijim
     kadrovima (lampa u videu, prozor u sobi sa tapetom) merili ispod 2.5:1 */
  background: radial-gradient(closest-side,
      oklch(0.17 0.018 130 / 0.62) 0%, oklch(0.17 0.018 130 / 0.53) 34%,
      oklch(0.17 0.018 130 / 0.30) 58%, oklch(0.17 0.018 130 / 0.12) 78%,
      oklch(0.17 0.018 130 / 0) 100%);
}

.hero__content { position: relative; isolation: isolate; max-width: 46rem; display: grid; gap: var(--space-m); justify-items: center; color: #fbfaf5; }
/* uzak, čvrst rub (WCAG G18: halo se računa kao pozadina slova) — sitan caps
   red prelazi preko svetle daske prozora na 390 i bez ruba pada na 2:1 */
.hero__content .eyebrow { color: var(--hero-gold); text-shadow: 0 1px 3px oklch(0.16 0.015 130 / 0.9), 0 0 10px oklch(0.16 0.015 130 / 0.6); }
/* SEO (2026-09-21): na početnoj nadnaslov stoji UNUTAR h1 kao prvi red. Sve što
   bi inače nasledio od h1 (Fraunces, opsz 72, line-height 0.945, balance) vraća
   se na vrednosti starog <p class="eyebrow">, a gap grid-a postaje margin —
   piksel-identično, provereno snimcima pre/posle (desktop+mobil, obe teme). */
.hero__title .eyebrow {
  display: block; margin-bottom: var(--space-m);
  font-family: var(--font-body); font-variation-settings: normal;
  line-height: 1.65; text-wrap: pretty;
}
/* Senka na naslovu je samo uzak rub od 1-2px — široki "oreol" sloj je pravio
   prljav halo oko belih slova (panel 2026-07-28); kontrast nosi vinjeta. */
/* line-height je namerno 0.945, a ne ~1.06: svaka reč je inline-block sa maskom
   (padding 0.17em), pa inline-block svojim ascentom/descentom sam podiže visinu
   reda. Stvarni razmak između linija je izmeren u browseru (~1.06em), nije
   procenjen — vrednost se ne dira bez ponovnog merenja. */
.hero__content h1 {
  font-size: var(--step-hero); line-height: 0.945; letter-spacing: -0.022em;
  color: #fbfaf5; text-shadow: 0 1px 3px oklch(0.16 0.015 130 / 0.42);
}
/* akcenat MORA biti glasniji od okoline, ne tiši: --gilt je preko fotografije
   tonuo, --gilt-hi nosi; tačka stoji UNUTAR <em> da ne ispadne bela i uspravna */
.hero__content h1 em { color: var(--hero-gold); }

/* POTPIS 3 — naslov izlazi iz maske, reč po reč. Svaka reč je .w (maska) sa
   unutrašnjim <span> koji se podiže; padding + jednak negativan margin daju
   dijakritici i italiku mesta da se ne odseku, a spolja se razmak ne menja. */
.hero__title .w { display: inline-block; overflow: hidden; padding: 0.17em 0.09em; margin: -0.17em -0.09em; }
.hero__title .w > span { display: inline-block; }
.js .hero__title .w > span {
  translate: 0 150%;
  animation: wordrise 1050ms var(--ease-out) forwards;
  animation-delay: calc(160ms + var(--wi, 0) * 105ms);
}
@keyframes wordrise { to { translate: 0 0; } }

.hero__cta { display: flex; gap: var(--space-s); align-items: center; justify-content: center; flex-wrap: wrap; margin-top: var(--space-2xs); }
/* Hero CTA govori jezikom plakata, ne widgeta (panel 2026-07-28: "sans bold
   Title Case pill je uljez u serif kompoziciji"): caps + tracking kao eyebrow —
   v2 je taj registar preselila u osnovni .btn, pa hero drži samo ono što je
   specifično za fotografiju. Kutija za nakit je fiksna u obe teme (raniji
   zlatni override tamne teme je uklonjen — dugme više nigde nije zlatna fila). */
.btn--hero {
  padding: 1.15em 2.3em;
  /* 1.5px na višoj alfi, ne 1px na 0.55 kao ostala dugmad: panel runde 2 —
     prsten se gubio na 1x ekranima, a ispuna i fotografija dele luminansu,
     pa rub mora da nosi ivicu bloka */
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--gilt) 70%, transparent), 0 10px 28px oklch(0 0 0 / 0.3);
}
.btn--hero:hover { box-shadow: inset 0 0 0 1.5px var(--gilt), 0 14px 34px oklch(0 0 0 / 0.36); }
/* uzak ekran / uvećan tekst (2026-09-18): "ZAKAŽITE PREKO VIBERA" sa punim
   bočnim razmakom (254px) ne staje i lomi se u 2 reda — ovde uži razmak i
   gušća slova (214px) drže jedan red. Iznad 18.5em se ništa ne menja. */
@media (max-width: 18.5em) {
  .btn--hero { padding-inline: 1.2em; letter-spacing: 0.08em; }
}

/* Znak za skrol — samo tiha linija sa svetlom koje putuje; tekst je bio
   slog-blizanac eyebrow-a i pravio krug u hijerarhiji (panel 2026-07-28) */
/* v3 r1: nit je šampanj, ne siva — gola siva crta se čitala kao artefakt */
.hero__cue {
  position: absolute; left: 50%; bottom: 2rem; translate: -50% 0;
  display: grid; justify-items: center;
  color: color-mix(in oklab, var(--gilt-hi) 75%, transparent);
  transition: color var(--dur-fast) var(--ease-out);
}
.hero__cue:hover { color: var(--gilt-hi); }
.hero__cue i { display: block; position: relative; overflow: hidden; width: 1.5px; height: 2.6rem; background: color-mix(in oklab, var(--gilt) 38%, transparent); }
.js .hero__cue i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, currentColor);
  animation: cue 2400ms var(--ease-out) infinite;
}
@keyframes cue { 0% { translate: 0 -100%; } 60%, 100% { translate: 0 100%; } }
/* 2026-08-16: nit na dnu heroa sakrivena po zahtevu — pravila iznad ostaju
   netaknuta; obriši ovaj jedan red i znak za skrol se vraća */
.hero__cue { display: none; }
/* traka činjenica ispod hero-a */
/* ---- Traka poverenja — brojke ispod heroa ---- */
.stats { background: var(--band); border-bottom: 1px solid var(--border); }
.stats--card {
  background: var(--band); border: 1px solid color-mix(in oklab, var(--gold) 30%, var(--border)); border-radius: var(--radius-l);
  max-width: 58rem; margin: var(--space-2xl) auto 0;
}
/* v3 r1: UVEK tri kolone — vertikalni stek od ~430px brojeva pre prve usluge
   je na telefonu gutao pola ekrana; u redu ceo blok staje u ~130px */
.stats__row { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: var(--space-m); }
@media (min-width: 46em) {
  .stats__row { padding-block: var(--space-l); }
}
.stat {
  position: relative; display: grid; gap: 0.45rem; justify-items: center;
  padding: var(--space-s) var(--space-xs); text-align: center;
}
/* v3: separator je zlatna nit koja bledi ka krajevima — puni color-mix sa
   svetlim border tokenom se čitao mutno-sivo (panel v3 r2) */
.stat + .stat::before {
  content: ''; position: absolute;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--gold) 55%, transparent) 50%, transparent);
  top: 10%; bottom: 10%; left: 0; width: 1px;
}
@media (max-width: 45.999em) {
  .stat { padding: var(--space-2xs) 0.3rem; gap: 0.3rem; }
  .stat b { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
  .stat > span { font-size: 0.6rem; letter-spacing: 0.09em; }
}
/* v3: cifre statistika prelaze u zlato — bile su jedini brend-numerali koji
   NISU zlatni (koraci, stepeni i monogram jesu); na kosti/traci --gold v3
   meri 4.93/4.54:1, krupno je pa prag 3:1 prelazi sa rezervom */
.stat b {
  display: flex; align-items: baseline;
  font-family: var(--font-display); font-weight: 500; font-variation-settings: 'opsz' 60;
  font-size: clamp(2.6rem, 1.85rem + 2.5vw, 4rem); line-height: 1;
  color: var(--gold); font-variant-numeric: lining-nums tabular-nums;
}
.stat b .num { display: inline-block; text-align: right; }
/* + kao superskript uz cap-visinu — isto pravilo kao ° kod uglova (r3).
   BEZ position/transform: pomeren potomak unutar flex kontejnera sa
   background-clip:text gubi klip i postaje nevidljiv (Chromium) — superskript
   ovde nosi align-self: flex-start unutar baseline flex reda */
.stat b .plus { font-size: 0.5em; line-height: 1; align-self: flex-start; margin-top: 0.06em; margin-left: 0.05em; }
.stat > span {
  max-width: 15ch; text-wrap: balance;
  font-size: var(--micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* USKI ekran ili uvećan tekst (2026-09-18): tri kolone nisu stajale ispod
   ~350px (najširi su "1000+" i "ZADOVOLJNIH"), pa se cela strana širila. em u
   upitu raste sa podešavanjem teksta, pa se ovo uključi i na 360–430px
   telefonima sa 125–150% teksta; običan telefon ostaje kakav jeste. Mere su
   iz bloka ≤45.999em iznad — tamo b i etiketa NE rade (osnovna pravila su
   posle njega u kaskadi), zato stoje ovde, posle njih. */
@media (max-width: 22em) {
  .stat { padding-inline: 0.15rem; }
  .stat b { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
  .stat > span { font-size: 0.6rem; letter-spacing: 0.09em; }
}

/* ---- Metalik zlato — SAMO krupni glifovi (v3) ----
   "Zlatnije" ne može pigmentom (duboko zlato je na 99% sRGB plafona hrome) —
   može prelazom svetla po metalu: background-clip na cifre statistika, stepene,
   redne brojeve koraka i monogram K. Fallback bez podrške je
   postojeća puna boja svakog elementa. Dugmad NIKAD (v2 presuda: metal na
   dugmetu = plastika); cene na cenovniku NE (devet gradijenata = šum). */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .stat b, .angle strong, .ft-num, .step .num, .monogram > span {
    background-image: var(--metal);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  /* polje monograma je uvek tamno, bez obzira na temu i scenu */
  .monogram > span { background-image: var(--metal-dark); }
}

/* ---- Kartice usluga ---- */
.cards { display: grid; gap: var(--space-m); }
@media (min-width: 40em) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: var(--shadow); overflow: hidden; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
.card figure { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out); }
.card:hover figure img { transform: scale(1.04); }
/* značka grupe (samo cifra 1–4) u gornjem LEVOM uglu fotografije: zlatna folija —
   metalik preliv na PODLOZI, cifra puna i tamna (pravilo v3: preliv nikad na sitnim
   glifovima). Reljef: svetla ivica gore, tamna dole. Odsjaj (::after) pređe preko
   pilule u petlji od 6 s, kartice jedna za drugom sleva nadesno. */
.card__badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 1; overflow: hidden;
  min-width: 2.1rem; padding: 0.42rem 0.6rem 0.38rem; border-radius: 999px; text-align: center;
  background: linear-gradient(135deg, #f5e7b3 0%, #d9c078 22%, #b9962f 48%, #dcc57e 72%, #f6e9b8 100%);
  color: #1f2a14;
  font: 650 0.74rem/1 var(--font-body); font-variant-numeric: tabular-nums lining-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(80, 60, 10, 0.35), 0 2px 6px rgba(0, 0, 0, 0.28);
}
.card__badge::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: translateX(-160%) skewX(-16deg); opacity: 0;
  animation: znacka-odsjaj 6s ease-out 0.4s infinite;
}
.cards .card:nth-child(2) .card__badge::after { animation-delay: 0.65s; }
.cards .card:nth-child(3) .card__badge::after { animation-delay: 0.9s; }
.cards .card:nth-child(4) .card__badge::after { animation-delay: 1.15s; }
@keyframes znacka-odsjaj {
  0% { transform: translateX(-160%) skewX(-16deg); opacity: 0; }
  3% { opacity: 1; }
  20%, 100% { transform: translateX(560%) skewX(-16deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .card__badge::after { animation: none; } }
.card__body { display: flex; flex-direction: column; gap: 0.55rem; padding: var(--space-m); flex: 1; }
.card__body h3 { font-weight: 550; }
.card__body p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }
.card__meta {
  margin-top: auto; padding-top: var(--space-s);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
}
.card__meta .price { font-family: var(--font-display); font-weight: 560; font-size: 1.15rem; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
/* valuta je fusnota, cifra je nakit — isti registar kao .amount na cenovniku */
.card__meta .price small { font-family: var(--font-body); font-size: 0.62em; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.1em; }
.card__meta .dur { color: var(--ink-soft); }
/* kartica bez cene (vaučer): jedina meta stavka dobija registar cene — red je
   inače najslabiji element grida i oko na njemu "propadne" (panel v3 r1) */
.card__meta .dur:only-child { font-family: var(--font-display); font-style: italic; font-weight: 480; font-size: 1.02rem; color: var(--ink); }
/* cena koja je REČ, ne cifra ("besplatno"): cifre stoje na opsz 9 jer im masa
   prija, ali ista reč u tom rezu izgleda kao natpis, ne kao vrednost. Fraunces
   italik na opsz 72 vraća visok kontrast poteza — isti "svečani" rez kao
   .amount--text na cenovniku, ali sa punom težinom i bojom cene, ne kao fusnota. */
.card__meta .price--word { font-style: italic; font-variation-settings: 'opsz' 72; font-weight: 480; font-size: 1.3rem; }

/* ---- Tamna espresso sekcija (inverzija) ---- */
/* na tamnim scenama: nit dugmadi na 75% (fila tone u mrak, ivicu nosi nit) i
   pun nakit-gradijent za metalik glifove — u obe teme */
.tamna {
  position: relative; color: var(--dark-ink);
  background: radial-gradient(70rem 40rem at 85% -10%, var(--dark-2), transparent 60%), var(--dark);
  --nit: 75%;
  --metal: var(--metal-dark);
}
.tamna .eyebrow { color: var(--gilt); }
.tamna h2, .tamna h3 { color: var(--dark-ink); }
.tamna h2 em { color: var(--gilt); }
.tamna .lead, .tamna p { color: var(--dark-soft); }
/* v2: dugme u tamnoj sekciji je ISTA kutija za nakit — fila se stapa u mrak,
   nit i šampanjska slova crtaju oblik (kao poklopac kutije na somotu) */
/* bez margin-top: ispod section-head se sabirao sa njegovim margin-bottom u
   ~7.2rem — najveću rupu na sajtu; ritam glava→sadržaj sada svuda isti */
.angles { display: flex; gap: var(--space-l); flex-wrap: wrap; }
.angle { display: grid; gap: 0.5rem; justify-items: start; flex: 1 1 8rem; border-top: 1px solid var(--dark-line); padding-top: var(--space-s); }
.angle svg { width: 5.6rem; height: 5.6rem; display: block; }
/* cifre stepeni nose zlatni potpis kao svi ostali brend-numerali (koraci,
   monogram K, statistike) — panel runde 2: kost cifre su preskakale potpis.
   v3: opsz 60 + umanjeni ° sufiks — ista receptura kao .stat b (opsz 60 +
   .plus 0.58em); plakatski opsz 72 je na 2rem davao tanke poteze */
.angle strong { font-family: var(--font-display); font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.7rem); font-weight: 500; font-variation-settings: 'opsz' 60; letter-spacing: -0.01em; font-variant-numeric: lining-nums; color: var(--gilt); }
/* ° kao pravi superskript: Fraunces lining-cifre su visoke pa glif u punoj
   veličini sedi na ~60% visine i čita se kao tačka ("15." — 4 sudije u dve
   runde). Umanjen + podignut: vrh prstena grli gornju ivicu cifara. */
.angle strong .deg { font-size: 0.45em; line-height: 0; position: relative; top: -0.88em; margin-left: 0.04em; display: inline-block; }
/* posle nule (30°, 60°) okrugla završnica ostavlja veći optički džep nego
   ravna ivica petice — kerning po cifri (panel v3 r3) */
.angle strong .deg--o { margin-left: -0.05em; }
/* prored 1.5, ne telesnih 1.65: kratak dvoredni potpis uz krupnu cifru mora
   da se čita kao jedna jedinica (presedan: .card__body p na 1.6) */
.angle span { color: var(--dark-soft); font-size: var(--step--1); max-width: 17ch; line-height: 1.5; }
.js .angle svg line:nth-of-type(2) {
  transform: rotate(var(--a, 0deg)); transform-box: view-box; transform-origin: 50% 50%;
  transition: transform 1100ms var(--ease-out) 250ms;
}
.js .angle.revealed svg line:nth-of-type(2) { transform: rotate(0deg); }
/* zlatna pivot tačka se pojavi tek kad linija legne — finalni "sjaj" u
   registru "sporost je luksuz"; reduced-motion je gasi u krajnje stanje */
.js .angle svg circle { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 500ms var(--ease-out) 1000ms; }
.js .angle.revealed svg circle { transform: scale(1); }
@media (max-width: 40em) {
  .angles { gap: var(--space-m); }
  .angle { flex: 1 1 100%; grid-template-columns: 5.6rem 1fr; grid-template-rows: auto auto; column-gap: var(--space-m); align-items: center; }
  .angle svg { grid-row: 1 / span 2; }
  .angle span { max-width: none; }
}

/* ---- Koraci (prvi put 01–04, zakazivanje 1–3) ---- */
.firsttime { list-style: none; display: grid; gap: var(--space-l) var(--space-m); counter-reset: nothing; }
@media (min-width: 48em) { .firsttime { grid-template-columns: repeat(4, 1fr); } }
.firsttime li { display: grid; gap: 0.6rem; align-content: start; }
/* v3 r1: 2.1rem → ~2.6rem — ispod ~2.4rem metalik gradijent nema masu i čita
   se kao mrlja umesto mesinga (pravilo praga za sve metalik glifove); usput
   se ordinali više ne gube pored monumentalnih 15°/30°/60° */
.ft-num, .step .num {
  font-family: var(--font-display); font-style: italic; font-weight: 480;
  font-size: clamp(2.4rem, 2rem + 1.2vw, 3rem); color: var(--gold); line-height: 1;
}
.firsttime h3, .step h3 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 650; letter-spacing: 0; }
.firsttime p, .step p { color: var(--ink-soft); font-size: var(--step--1); }
.steps { display: grid; gap: var(--space-l) var(--space-m); }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; gap: var(--space-2xs); align-content: start; }

/* ---- Tim ---- */
.team { display: grid; gap: var(--space-m); max-width: 56rem; margin-inline: auto; }
@media (min-width: 48em) { .team { grid-template-columns: 1fr 1fr; } }
/* flex kolona, ne grid: kontakt red ide na margin-top:auto pa obe kartice
   (različite dužine bio teksta) sidre telefon+dugme na ISTU donju liniju —
   Katarinin red je visio ~40px iznad dna (panel v3 r1) */
.team-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: var(--shadow); padding: var(--space-m);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.team-card .contact-row { margin-top: auto; }
/* bio na telesnoj veličini — step--1 je uz krupne Fraunces naslove delovao
   kao sitni katalog (premium editorijal drži telo krupno) */
.team-card > p { color: var(--ink-soft); font-size: var(--step-0); }
.team-card .team-media, .team-card .monogram { align-self: stretch; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-s); }
/* omotač fotografije: isti uvučeni zlatni ram kao na monogramu — dve kartice
   istog ranga moraju nositi isti jezik rama (panel v3 r1) */
.team-media { position: relative; overflow: hidden; }
.team-media img { width: 100%; height: 100%; object-fit: cover; }
.team-media::after, .monogram::after {
  content: ''; position: absolute; inset: 10px;
  border: 1px solid color-mix(in oklab, var(--gilt) 45%, transparent);
  border-radius: calc(var(--radius-s) - 4px); pointer-events: none;
}
/* 18.09.2026: Vladanov portret je sada prava fotografija sa foto-dana — sepija
   gradacija (bila je za hladan spoljni selfi) je skinuta, važi opšti
   --photo-filter iz `figure img`. Blaga vinjeta ostaje: drži zlatnu nit rama
   čitljivom preko svetlog prozora. */
.team-media::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 4rem oklch(0.2 0.03 120 / 0.28);
}
/* v3: monogram kao PEČAT, ne rupa pored fotografije (art-director) — svetlost
   iza slova centrirana, K krupniji i metalik, tanka zlatna nit po rubu polja */
.monogram {
  position: relative; display: grid; place-items: center;
  /* žiža na 46%, ne 30%: K je centriran pa je sedeo ISPOD svog svetla —
     oreol mora da grli slovo (panel v3 r2) */
  background: radial-gradient(120% 85% at 50% 46%, var(--dark-2), transparent 72%), var(--dark);
  color: var(--gilt);
  font-family: var(--font-display); font-size: clamp(4.6rem, 9vw, 7.2rem); font-style: italic; font-weight: 440;
}
/* na telefonu (kartice u steku) monogram ne sme da guta ceo ekran — 4/3 kadar
   umesto punog portretskog odnosa (panel v3 r1) */
@media (max-width: 40em) {
  .team-card .monogram { aspect-ratio: 4 / 3; }
}
/* uloga pripada imenu ispod (zakon blizine), ne bloku iznad — efektivni razmak
   uloga→ime pada na ~0.4rem, ostatak kartice zadržava svoj gap */
.team-card .role { color: var(--accent); font-size: var(--micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; margin-top: var(--space-2xs); margin-bottom: -0.5rem; }
.team-card h3 { font-size: 1.45rem; }
.contact-row { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; margin-top: var(--space-2xs); }
.contact-row .btn { padding: 0.6em 1.4em; }
/* mirna podvlaka telefona je zlatna nit, ne siva — jedini interaktivni
   element koji nije govorio zlatnim jezikom linkova (panel v3 r3) */
.tel-lg { font-family: var(--font-display); font-size: 1.3rem; font-weight: 520; font-variant-numeric: tabular-nums lining-nums; text-decoration: none; }
.tel-lg.link-underline {
  background-image: linear-gradient(var(--accent), var(--accent)),
    linear-gradient(color-mix(in oklab, var(--gold) 45%, transparent), color-mix(in oklab, var(--gold) 45%, transparent));
}

/* ---- Galerija ---- */
/* PRAVILO RAMA: uvučenu zlatnu nit nose SAMOSTALNE fotografije (split,
   side-grid, tim, monogram). Galerija je mozaik — pločice se naslanjaju
   jedna na drugu i ram bi postao rešetka; ovo je svesni izuzetak, ne propust. */
.gallery {
  display: grid; gap: var(--space-xs);
  grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(8rem, 24vw, 11rem);
  grid-template-areas: "a a" "a a" "b c" "d e";
}
@media (min-width: 48em) {
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(10rem, 16vw, 13.5rem); grid-template-areas: "a a b c" "a a d e"; }
}
.gallery > :nth-child(1) { grid-area: a; }
.gallery > :nth-child(2) { grid-area: b; }
.gallery > :nth-child(3) { grid-area: c; }
.gallery > :nth-child(4) { grid-area: d; }
.gallery > :nth-child(5) { grid-area: e; }
.gallery a { display: block; overflow: hidden; border-radius: var(--radius-m); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out); }
.gallery a:hover img { transform: scale(1.035); }

/* ---- Cenovnik ---- */
.jump-row { display: flex; gap: var(--space-2xs); flex-wrap: wrap; justify-content: center; margin-top: var(--space-s); }
/* pilule pripadaju brendu (panel runde 1: bile su jedini "generički" element):
   zlatom tonirana ivica kao kod .price-note, maslinast tekst, pun akcenat na hover */
/* v3 r1: providne mikro-verzalne pilule — bela pilula na kosti je štrčala kao
   default komponenta; registar sada isti kao etikete kategorija niže */
.jump-row a {
  display: inline-flex; padding: 0.7em 1.25em; border-radius: 999px;
  background: transparent; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.jump-row a:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
/* fizički odgovor na tap — ista gramatika kao .btn:active */
.jump-row a:active { transform: translateY(1px) scale(0.98); transition-duration: 80ms; }
/* sve tri pilule u JEDAN red na 390px — usamljena "POKLONI" u drugom redu
   je parala ritam uvoda (panel v3 r2) */
@media (max-width: 26em) { .jump-row { gap: 0.5rem; } .jump-row a { padding: 0.6em 0.85em; font-size: 0.66rem; letter-spacing: 0.06em; } }
.pricelist { display: grid; }
/* v3: etikete kategorija su h2 (bile h3 — preskočen nivo posle h1, čitači
   ekrana gube strukturu); vizuelni registar mikro-verzala je nepromenjen.
   Zlatna nit koja bledi udesno ponavlja jezik niti sa dugmadi i vizuelno
   zaključava širinu liste. */
.pricelist h2 {
  /* space-l, ne xl: međusekcijski razmak ~2× ritma redova — veći je uz praznu
     desnu kolonu delovao kao da je strani ponestalo sadržaja (panel v3 r1) */
  margin-top: var(--space-l); margin-bottom: var(--space-xs); scroll-margin-top: 6rem;
  font-family: var(--font-body); font-size: var(--micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent);
  line-height: 1.65; font-variation-settings: normal;
  display: flex; align-items: center; gap: var(--space-s); text-wrap: nowrap;
}
.pricelist h2::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, color-mix(in oklab, var(--gold) 45%, transparent), color-mix(in oklab, var(--gold) 6%, transparent));
}
.pricelist > h2:first-child { margin-top: 0; }
/* tačkasta vodilja naziv…cena (fine-dining meni). GRID, ne flex: .name je
   display:contents pa vodilja kreće ODMAH posle teksta naziva — sa flexom je
   širinu kolone naziva diktirala šira .meta linija ispod, pa je kod kratkih
   naziva zjapilo ~200px praznine pre vodilje (panel v3 r1). .meta se pruža
   ISPOD vodilje (kolone 1–2), pa se više ne lomi u kolonu od 110px. */
.pricerow {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto;
  align-items: baseline; column-gap: var(--space-xs); row-gap: 0.2rem;
  padding-block: 1.1rem; border-bottom: 1px solid var(--border);
}
.pricerow .name { display: contents; font-weight: 550; }
/* vodilja: krupnije, ređe tačke kroz radial-gradient — border dotted 1px je
   na kosti bio na granici vidljivosti (mikro-sudija v3 r1) */
.pricerow::after {
  content: ''; grid-column: 2; grid-row: 1; align-self: baseline; height: 3px;
  background-image: radial-gradient(circle, color-mix(in oklab, var(--ink-soft) 55%, transparent) 1px, transparent 1.4px);
  background-size: 8px 3px; background-repeat: repeat-x; background-position: left bottom;
  /* +1px: tačkice legnu NA osnovnu liniju, ne iznad nje (meni-standard) */
  translate: 0 1px;
}
/* meta u istom redu sa nazivom (grupisane stavke): display:contents utapa
   tekst u anonimni grid-item naziva — nema drugog reda koji bi se sudarao
   sa drugom varijantom desno (panel v3 r2: "celo telo" se uparivao sa
   "90 min · 3.500" kao da su jedan red) */
.pricerow .meta--inline { display: contents; }
/* hover tinta sa unutrašnjim vazduhom i zaobljenjem iz porodice kartica —
   pseudo-sloj umesto pozadine reda, da tinta ne seče tačno na ivici slova */
.pricerow::before {
  content: ''; position: absolute; inset: 4px calc(-1 * var(--space-xs)); z-index: -1;
  border-radius: var(--radius-s); background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pricerow:hover::before { background: color-mix(in oklab, var(--gold) 7%, transparent); }
.pricerow .meta { grid-column: 1 / 3; grid-row: 2; color: var(--ink-soft); font-size: var(--step--1); font-weight: 400; text-wrap: pretty; max-width: 44ch; }
/* cene nose brend maslinu kao i na karticama početne (panel runde 1: na strani
   posvećenoj cenama akcenat je nestajao); u tamnoj temi var(--accent) = zlato.
   v3: na hover reda cifra pređe u zlato — mikro-nagrada tačno tamo gde se
   gleda; NAMERNO bez metalik gradijenta (devet ponavljanja = šum). */
.pricerow .amount { grid-column: 3; grid-row: 1; justify-self: end; font-family: var(--font-display); font-size: 1.5rem; font-weight: 540; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--accent); transition: color var(--dur-fast) var(--ease-out); }
.pricerow:hover .amount { color: var(--gold); }
.pricerow .amount small { font-family: var(--font-body); font-size: 0.5em; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.1em; }
/* grupisane stavke (Relaks 60/90, Terapeutska 45/60): jedan naziv, varijante
   poravnate desno kao JEDAN blok (gap 0.3rem — na 0.55 je drugi red visio
   kao zalutala cena, mikro-sudija v3 r1) */
.pricerow .variants { grid-column: 3; grid-row: 1 / span 2; display: grid; gap: 0.3rem; justify-items: end; align-content: start; }
.pricerow .variant { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.2rem 0.6rem; }
.pricerow .variant .vdur { color: var(--ink-soft); font-size: var(--step--1); text-align: right; }
/* trajanje + cena su NERASKIDIVA celina — na 390px se "45 min" odvajao od
   "2.200 RSD" (panel v3 r3); prelom sme da padne samo posle etikete opsega */
.pricerow .vgo { display: inline-flex; align-items: baseline; gap: 0.6rem; white-space: nowrap; }
/* uski ekrani: vodilja se gasi (4 zalutale tačke između prelomljenih redova
   nisu vodilja) i red postaje čist dvokolonski slog */
@media (max-width: 40em) {
  .pricerow { grid-template-columns: 1fr auto; }
  .pricerow::after { display: none; }
  .pricerow .meta { grid-column: 1 / -1; }
  .pricerow .amount, .pricerow .variants { grid-column: 2; }
  .pricerow .variant .vdur { white-space: nowrap; }
}
/* USKI ekran ili uvećan tekst (2026-09-18): naziv i cene više ne staju jedno
   pored drugog — "RSD" se sekao desno i strana se širila. Cene prelaze u red
   ISPOD naziva, i dalje poravnate desno; trajanje i cena ostaju zajedno (.vgo).
   Običan telefon (360–430px, normalan tekst) ostaje kakav jeste. */
@media (max-width: 20em) {
  .pricerow { grid-template-columns: 1fr; }
  .pricerow .amount, .pricerow .variants { grid-column: 1; grid-row: 2; justify-self: end; }
}
/* v3 r1: pun okvir je ličio na generički alert — beleška premium cenovnika
   govori zlatnom niti sleva, ne kutijom */
.price-note {
  margin-top: var(--space-l); padding: var(--space-2xs) var(--space-m);
  background: color-mix(in oklab, var(--gold) 5%, transparent);
  border: 0; border-left: 2px solid color-mix(in oklab, var(--gold) 75%, transparent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--ink-soft); font-size: var(--step--1); line-height: 1.65; max-width: none;
}
.amount--text { font-family: var(--font-display); font-style: italic; font-weight: 480; font-size: 1.05rem; color: var(--ink); }
.signoff { font-family: var(--font-display); font-style: italic; font-weight: 480; font-size: 1.5rem; line-height: 1.3; margin-top: var(--space-m); margin-inline: auto; }
.signoff em { color: var(--accent); }
/* zaključna rečenica proznog bloka (o-nama) — isti lični registar kao .signoff,
   uz maslinom toniranu levu nit: poenta se izdvaja iz informativnih pasusa */
.prose-close {
  font-family: var(--font-display); font-style: italic; font-weight: 480;
  font-size: 1.25rem; line-height: 1.45; color: var(--ink);
  border-left: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  padding-left: var(--space-s);
}

/* bočna ploča uz sadržaj (cenovnik) */
.side-grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 60em) {
  .side-grid { grid-template-columns: minmax(0, var(--container-narrow)) minmax(0, 1fr); }
  .side-grid > figure { position: sticky; top: 6rem; }
}
.side-grid > figure { margin: 0; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow); }
/* na telefonu fotografija otvara scenu PRE liste (3/2 kadar, ~250px) — kao
   poslednji element je visila kao siroče pre futera (panel v3 r1); pun
   portret bi gurao cene predaleko (raniji nalaz), pa kadar ide plitko */
@media (max-width: 59.999em) {
  .side-grid > figure { order: -1; }
  .side-grid > figure img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }
}
/* v3 r1: dve hladne fotografije (klinički belo svetlo) iskaču iz ćilibarne
   priče — CSS gradacija ih useljava bez dodira samih fajlova */
.card img.img-topli, .gallery img.img-topli { filter: var(--photo-filter) sepia(0.34) saturate(0.82) contrast(1.04) brightness(0.92); }
/* posao: zajednička leva osa — tekst-stubovi dele kontejner sa trakom i
   futerom umesto da lebde na sopstvenoj centriranoj osi (panel v3 r1).
   r2: na desktopu redakcijski dvokolonski slog — etiketa je leva lajsna na
   osi, sadržaj ide ka optičkom centru; desna polovina platna više ne zvrji */
.posao-col { max-width: 40rem; }
@media (min-width: 60em) {
  .posao-col { display: grid; grid-template-columns: 16rem minmax(0, 40rem); column-gap: var(--space-xl); max-width: none; align-items: start; }
  .posao-col > .pricelist { display: contents; }
  .posao-col h2 { grid-column: 1; margin-top: 0.3rem; }
  .posao-col p, .posao-col .hero__cta, .posao-col .price-note, .posao-col .posao-pitanja { grid-column: 2; }
}
/* posao 24.09.: prijava mejlom / WhatsApp / Viber umesto Google ankete */
.page-hero .posao-hint { max-width: 34rem; font-size: var(--step--1); color: var(--ink-soft); text-wrap: balance; }
/* pitanja za prijavu — redni broj je zlatna kurziv cifra, isti jezik kao .step .num */
.posao-pitanja { list-style: none; margin: var(--space-m) 0 0; padding: 0; counter-reset: pit; display: grid; gap: var(--space-s); }
.posao-pitanja li { counter-increment: pit; display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--space-xs); }
.posao-pitanja li::before {
  content: counter(pit); grid-row: span 2;
  font-family: var(--font-display); font-style: italic; font-weight: 480; font-size: 1.5rem; line-height: 1.1; color: var(--gold);
}
.posao-pitanja b { font-weight: 650; color: var(--ink); }
.posao-pitanja span { color: var(--ink-soft); font-size: var(--step--1); }
/* kontakt blok ispod koraka: adresa je krupna jer je ona sama radnja */
.posao-kontakt { max-width: 40rem; margin: var(--space-xl) auto 0; display: grid; gap: var(--space-2xs); justify-items: center; text-align: center; }
.posao-mejl { font-family: var(--font-display); font-weight: 520; font-size: clamp(1.05rem, 0.767rem + 1.417vw, 1.9rem); line-height: 1.3; max-width: none; overflow-wrap: anywhere; }
.posao-mejl a { text-decoration: none; }
.posao-tel { color: var(--ink-soft); }
.posao-tel span, .posao-kontakt .signoff span { white-space: nowrap; }
.posao-tel a { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums lining-nums; }
.posao-kopiraj {
  font: inherit; font-size: var(--micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.55em 1.2em; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.posao-kopiraj:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.posao-kontakt .price-note { margin-top: var(--space-m); text-align: left; }
.posao-kontakt .signoff { font-size: 1.3rem; margin-top: var(--space-s); }

/* ---- Split (o nama, inverzioni, posao-tamna) ---- */
.split { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 60em) { .split { grid-template-columns: 5fr 6fr; } }
.split > figure { margin: 0; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow); }
.split > figure img, .split > figure video { width: 100%; height: 100%; object-fit: cover; }
/* SVAKA samostalna fotografija nosi uvučeni zlatni ram — isti "pečat" jezik
   kao tim/monogram blokovi (panel v3 r2: ram je bio samo na posao traci, a
   cenovnik i inverzioni figure su ostajale gole) */
.split > figure, .side-grid > figure { position: relative; }
.split > figure::after, .side-grid > figure::after {
  content: ''; position: absolute; inset: 10px;
  border: 1px solid color-mix(in oklab, var(--gilt) 35%, transparent);
  border-radius: calc(var(--radius-m) - 6px); pointer-events: none;
}
/* kadar dignut da ivica ne seče glavu klijenta (posao) */
.tamna .split > figure img { object-position: 50% 30%; }

/* ---- FAQ ---- */
.faq { display: grid; gap: var(--space-xs); }
/* v3: otvorena kartica nosi zlatom toniranu ivicu ("nakit" jezik), summary
   odgovara na hover — jedini klikabilni element koji je ćutao */
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: var(--space-s) var(--space-m); box-shadow: var(--shadow); transition: border-color var(--dur-fast) var(--ease-out); }
.faq details[open] { border-color: color-mix(in oklab, var(--gold) 45%, var(--border)); }
.faq summary { font-family: var(--font-display); font-size: 1.15rem; font-weight: 540; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); transition: color var(--dur-fast) var(--ease-out); }
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--accent); line-height: 1; transition: rotate var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out); flex: none; }
/* scale 1.12: rotiran + optički deluje manji od uspravnog (panel v3 r1);
   ikona prati zlatni potpis naslova otvorenog stanja (r2) */
.faq details[open] summary::after { rotate: 45deg; scale: 1.12; color: var(--gold); }
/* otvoreno pitanje nosi zlatan potpis u OBE teme (svetla je govorila samo
   ivicom, tamna i bojom — jedan jezik za isto stanje) */
.faq details[open] summary { color: var(--gold); }
.faq details p { margin-top: var(--space-xs); color: var(--ink-soft); max-width: 58ch; }
/* telefonski brojevi u odgovorima su živi tel: linkovi — premium je odsustvo
   trenja: odgovor o zakazivanju je sam put do poziva */
.faq a[href^="tel:"] { color: var(--accent); font-weight: 550; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  /* visina + pretapanje istog trajanja: sadržaj se ne "izvlači" mehanički
     nego uroni — isti dvoslojni jezik kao [data-reveal] fade+rise */
  .faq details::details-content { height: 0; overflow: clip; opacity: 0; transition: height var(--dur-med) var(--ease-inout), opacity var(--dur-med) var(--ease-inout), content-visibility var(--dur-med) allow-discrete; }
  .faq details[open]::details-content { height: auto; opacity: 1; }
}

/* ---- Kontakt ---- */
.contact-grid { display: grid; gap: var(--space-l); align-items: stretch; }
@media (min-width: 60em) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.addr-lg { font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); font-weight: 530; line-height: 1.25; max-width: none; }
.hours { display: grid; max-width: 26rem; }
.hours div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border); padding-block: 0.6rem; gap: var(--space-m); }
.hours span { font-size: var(--micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.hours strong { font-weight: 550; }
.location-card {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--shadow-lift);
  --nit: 75%;
  display: grid; align-content: end; gap: var(--space-2xs);
  padding: var(--space-l); min-height: 26rem; color: #fbfaf5;
}
.location-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* v3 r1: scrim dignut više (0.25→0.38 na 60%) — adresa je padala preko
   najsvetlijeg dela fotografije (prozor); tekst uz to nosi uzak tamni rub.
   18.09.2026: prava fotografija recepcije je dnevna i svetlija od stare AI
   slike — na telefonu je zlatna etiketa "Kako do nas" pala na beli prozor,
   pa srednja tačka ide 0.38→0.55, a vrh 0.14→0.22 */
.location-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.18 0.02 130 / 0.88), oklch(0.2 0.02 130 / 0.55) 60%, oklch(0.2 0.02 130 / 0.22)); }
.location-card .eyebrow { color: var(--gilt); margin-bottom: var(--space-2xs); }
.location-card .addr { font-family: var(--font-display); font-weight: 540; font-size: clamp(1.6rem, 1.4rem + 1vw, 2.3rem); line-height: 1.15; }
.location-card p, .location-card .addr { text-shadow: 0 1px 2px oklch(0 0 0 / 0.35); }
.location-card p { color: oklch(0.93 0.012 100 / 0.92); }
/* v2: i na foto-kartici važi ista kutija za nakit (raniji kost izuzetak
   sa tvrdo kodiranom starom maslinom u tamnoj temi je uklonjen) */
.location-card .btn { justify-self: start; margin-top: var(--space-s); }
/* ghost pilula na fotografiji: zlatan obod (r3), slova bela (16.08 — slova
   svih dugmadi su bela, zlatna ostaje samo nit) */
.location-card .btn--outline-light { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--gilt) 55%, transparent); }
.location-card .btn--outline-light:hover { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--gilt) 85%, transparent); }
/* v3 r1: pilula mape se na 390px lomila u dva reda (78px visoka, "polomljena")
   — premium dugme se ne prelama: puna širina + zbijeniji slog u jednom redu */
@media (max-width: 30em) {
  .location-card .btn { justify-self: stretch; justify-content: center; white-space: nowrap; font-size: 0.72rem; letter-spacing: 0.08em; padding: 1.1em 0.8em; }
}

/* ---- Mobilni kontakt dok ----
   Lebdi iznad sadržaja umesto da je zalepljen za ivicu: traka preko cele širine sa
   oštrim uglovima izgleda kao sistemski tab-bar aplikacije i tuđa je jeziku sajta
   (zaobljene kartice, meke senke, pill dugmad). Jedan dominantan CTA sa ispisanim
   labelom + dva tiha ikonična kruga — hijerarhija se vidi iz oka, ne iz boje. */
.sticky-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  padding: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  transform: translateY(calc(100% + 1rem)); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out),
              visibility 0s linear var(--dur-med);
}
.sticky-bar.visible {
  transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
.dock {
  display: flex; align-items: center; gap: 0.42rem;
  padding: 0.42rem; border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px color-mix(in oklab, var(--ink) 12%, transparent);
}
/* bez backdrop-filter-a providna podloga postane prljava — tada ide puna površina */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dock { background: var(--surface); }
}
.dock a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.dock__cta {
  flex: 1; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 0.5em;
  border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink);
  font-size: 0.8125rem; font-weight: 550; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 6px 16px color-mix(in oklab, var(--btn-bg) 32%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--gilt) 55%, transparent);
  transition: transform var(--dur-fast) var(--ease-out);
}
.dock__cta svg { width: 1.15em; height: 1.15em; flex: none; }
.dock__ico {
  width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 999px;
  color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.dock__ico svg { width: 21px; height: 21px; }
.dock a:active { transform: scale(0.97); }
.dock__ico:active { background: color-mix(in oklab, var(--ink) 12%, transparent); }
/* tamna tema: krugovi su se topili u ravnu tamnu pozadinu (panel runde 2) */
:root[data-theme="dark"] .dock__ico { background: color-mix(in oklab, var(--ink) 11%, transparent); }
:root[data-theme="dark"] .dock__ico:active { background: color-mix(in oklab, var(--ink) 18%, transparent); }
/* v3 tamna tema — jedan recept separacije za sve kartice: senke na tamnom ne
   rade, pa ivicu nosi zlatom tonirana nit na 18% (art-director v3) */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .team-card,
:root[data-theme="dark"] .faq details,
:root[data-theme="dark"] .stats--card { border-color: color-mix(in oklab, var(--gilt) 18%, var(--border)); }
/* zlatna ivica OTVORENE FAQ kartice mora da pobedi tamni 18% override iznad
   (viša specifičnost ga je gutala — panel v3 r1: "otvorena kartica bez okvira") */
:root[data-theme="dark"] .faq details[open] { border-color: color-mix(in oklab, var(--gilt) 65%, var(--border)); }
/* ritam svetlo–tamno u tamnoj temi: trake se stapaju sa pozadinom (ΔL 0.025),
   pa artikulaciju vraća zlatni hairline umesto dizanja svetline */
:root[data-theme="dark"] .band { border-block: 1px solid color-mix(in oklab, var(--gilt) 10%, transparent); }
:root[data-theme="dark"] .tamna { border-block: 1px solid color-mix(in oklab, var(--gilt) 16%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .sticky-bar { transform: none; transition: opacity var(--dur-fast) linear, visibility 0s linear var(--dur-fast); }
  .dock a:active { transform: none; }
}
@media (min-width: 48em) { .sticky-bar { display: none; } }

/* ---- Modal "Kod koga zakazujete?" — izbor masera pre Vibera ----
   Native <dialog>: top layer (iznad grain-a i sticky trake), fokus-zamka i Esc bez JS-a.
   Na telefonu izlazi kao donji sheet, na desktopu je centriran dijalog. */
.pick-modal {
  width: min(28.5rem, calc(100vw - 2rem)); max-width: none;
  max-height: min(88vh, 46rem);
  /* reset gore gasi `margin: 0` na SVEMU, pa i UA `margin: auto` koje centrira
     modalni <dialog> — bez ovoga panel se zalepi u gornji levi ugao */
  margin: auto;
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pick-modal.open { opacity: 1; transform: none; }
.pick-modal::backdrop {
  background: oklch(0.18 0.02 130 / 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.pick-modal.open::backdrop { opacity: 1; }
.pick-modal__in { position: relative; padding: var(--space-m) var(--space-s) var(--space-s); }
.pick-modal h2 { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.8rem); margin-top: 0.2rem; }
.pick-modal .eyebrow { display: block; }
.pick__lead { color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.35rem; max-width: 24rem; }
.pick__close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink-soft);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pick__close:hover { background: var(--band); color: var(--ink); }

.pick { display: grid; gap: var(--space-2xs); margin-top: var(--space-m); }
.pick__card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-xs);
  padding: 0.7rem 0.85rem; border-radius: var(--radius-m);
  background: var(--bg); border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pick__card:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-2px); box-shadow: var(--shadow); }
.pick__ava {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  object-fit: cover; object-position: 50% 20%; filter: var(--photo-filter);
}
.pick__ava--mono {
  display: grid; place-items: center;
  background: radial-gradient(6rem 5rem at 75% 12%, var(--dark-2), transparent 65%), var(--dark);
  color: var(--gilt);
  font-family: var(--font-display); font-size: 1.5rem; font-style: italic; font-weight: 440;
  line-height: 1; filter: none;
}
/* u tamnoj temi je krug skoro iste svetline kao kartica — tanak prsten mu vraća ivicu */
:root[data-theme="dark"] .pick__ava--mono { box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.16); }
.pick__body { display: grid; gap: 0.1rem; min-width: 0; }
.pick__role { font-size: var(--micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.pick__name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 545; line-height: 1.2; }
.pick__num { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.pick__go {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-ink);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gilt) 55%, transparent);
  transition: transform var(--dur-fast) var(--ease-out);
}
.pick__card:hover .pick__go { transform: scale(1.08); }
.pick__note { margin-top: var(--space-s); font-size: var(--micro); line-height: 1.6; color: var(--ink-soft); }
.pick__note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pick__note a:hover { text-decoration: underline; }

@media (max-width: 34em) {
  .pick-modal {
    width: 100%; max-width: 100%; margin: auto auto 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0; border-bottom: 0;
    transform: translateY(100%) scale(1);
  }
  .pick-modal.open { transform: none; }
  .pick-modal__in { padding-bottom: calc(var(--space-m) + env(safe-area-inset-bottom)); }
}

/* ---- Footer ---- */
footer { background: var(--dark); color: var(--dark-soft); padding-block: var(--space-2xl) var(--space-l); font-size: var(--step--1); --nit: 75%; --metal: var(--metal-dark); }
/* Potpis u futeru je sam logo (providan od 2026-10-08): ime je već ispisano
   u njemu, pa bi "Myo massage centar" pored njega bio dupli potpis u dva
   pisma. Visina 104–136px, ista kao stara značka. */
.colophon-mark {
  display: inline-flex; align-items: center; text-decoration: none;
  margin-bottom: var(--space-l);
}
.colophon-mark .brand-mark { height: clamp(6.5rem, 5.5rem + 3vw, 8.5rem); width: auto; }
footer .foot-grid { display: grid; gap: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--dark-line); }
@media (min-width: 48em) { footer .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }
footer .foot-grid p { color: var(--dark-soft); }
footer a { color: var(--dark-ink); }
footer ul { list-style: none; display: grid; gap: 0.5rem; }
footer ul a { font-size: var(--step--1); font-weight: 500; color: var(--dark-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
footer ul a:hover { color: var(--dark-ink); }
/* na telefonu se navigacija i kontakti ređaju kao jedna lista — vlas-linija
   između grupa vraća granicu (panel v3 r2) */
@media (max-width: 47.999em) {
  footer .foot-grid > div:first-child { padding-bottom: var(--space-s); border-bottom: 1px solid var(--dark-line); }
  footer .foot-grid ul[role="list"] + ul[role="list"] { padding-top: var(--space-s); border-top: 1px solid var(--dark-line); }
}
.foot-note { margin-top: var(--space-l); padding-top: var(--space-s); border-top: 1px solid var(--dark-line); }
.foot-note p { font-size: var(--micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-soft); }

/* ---- Podstranice: hero na kremu ---- */
/* razmak ispod naslova daje padding-top sekcije koja sledi — ne dodavati ga i ovde (sabiraju se) */
.page-hero { position: relative; padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: 0; text-align: center; }
.page-hero .container { display: grid; gap: var(--space-s); justify-items: center; }
.page-hero .lead { max-width: 44rem; text-wrap: balance; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* oreol se gasi tek ~17.5rem od vrha — kraći hero (telefon, naslov u jednom redu) bi ga presekao u oštru ivicu */
  min-height: 18rem;
  /* 22%, ne 14%: na 14% se oreol čitao kao senka umesto kao zlatno svetlo (panel runde 1) */
  background: radial-gradient(60rem 30rem at 50% -20%, color-mix(in oklab, var(--gold) 22%, transparent), transparent 70%);
}

/* ---- Pomoćne ---- */
.grain::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain-op); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Motion ---- */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal-stagger] > *:nth-child(1) { --reveal-delay: 0ms; }
[data-reveal-stagger] > *:nth-child(2) { --reveal-delay: 100ms; }
[data-reveal-stagger] > *:nth-child(3) { --reveal-delay: 200ms; }
[data-reveal-stagger] > *:nth-child(4) { --reveal-delay: 300ms; }
[data-reveal-stagger] > *:nth-child(5) { --reveal-delay: 400ms; }
[data-reveal-stagger] > *:nth-child(n+6) { --reveal-delay: 480ms; }

@view-transition { navigation: auto; }
/* 450ms pretapanje važi i za navigaciju (cross-document) i za promenu teme
   (startViewTransition u app.js) — oba prelaza dele isti ritam */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 450ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .hero__slide.is-zoom img { animation: none; }
  /* znak za skrol se GASI eksplicitno: globalno skraćivanje na 0.01ms bi
     infinite animaciju pretvorilo u treperenje, ne u mir */
  .js .hero__cue i::after { animation: none; display: none; }
  .js .hero__title .w > span { animation: none; translate: 0 0; }
  .js .angle svg line:nth-of-type(2) { transform: none; transition: none; }
  .js .angle svg circle { transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-delay: 0ms !important; transition-delay: 0ms !important; }
}

/* ==== ZLATNO-DUGME POČETAK (07.10.2026) ====
   Dugme „Zakažite“ (Lime Booking) = ista zlatna folija kao značke 1–4
   (.card__badge) + odsjaj na svakih 6 s. Odluka vlasnika 07.10.: na sva 4
   mesta — gornja traka, hero na početnoj, dno strana, donja traka telefona.
   Dugmad se biraju PO ADRESI (href sadrži lime-booking.com), HTML se ne dira:
   Viber, Pozovite, Pošaljite CV i ostala dugmad ostaju maslinasta kutija.
   Za OVO dugme se ukida pravilo v2/v3 „dugmad nikad ne dobijaju gradijent“;
   sve ostalo u fajlu važi i dalje.
   Tamna slova #1f2a14 (kao značke): na najtamnijem stopu #b9962f 5.3:1.
   Tanak tamnozlatni rub drži oblik pilule na kosti (#f4f3ea), gde se svetli
   krajevi folije inače stapaju sa pozadinom.
   POVRATAK za tren: ./zlatno-dugme.sh iskljuci  (nazad: ./zlatno-dugme.sh ukljuci) */
.btn[href*="lime-booking.com"],
.dock__cta[href*="lime-booking.com"] {
  --zlato-folija: linear-gradient(135deg, #f5e7b3 0%, #d9c078 22%, #b9962f 48%, #dcc57e 72%, #f6e9b8 100%);
  --zlato-reljef: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(80, 60, 10, 0.35), inset 0 0 0 1px rgba(140, 105, 20, 0.5);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--zlato-folija);
  color: #1f2a14;
  font-weight: 600;
  box-shadow: var(--zlato-reljef), var(--shadow);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
/* traka je mirna — bez drop-senke, kao staro .nav .btn */
.nav .btn[href*="lime-booking.com"] { box-shadow: var(--zlato-reljef); }
/* hero preko videa/fotografije — jača senka, kao staro .btn--hero */
.btn--hero[href*="lime-booking.com"] { box-shadow: var(--zlato-reljef), 0 10px 28px oklch(0 0 0 / 0.3); }
/* donja traka telefona — topla zlatna senka umesto maslinaste */
.dock__cta[href*="lime-booking.com"] { box-shadow: var(--zlato-reljef), 0 6px 16px rgba(110, 80, 10, 0.28); }
.btn[href*="lime-booking.com"]:hover {
  background: var(--zlato-folija);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: var(--zlato-reljef), var(--shadow-lift);
}
.btn--hero[href*="lime-booking.com"]:hover { box-shadow: var(--zlato-reljef), 0 14px 34px oklch(0 0 0 / 0.36); }
.btn[href*="lime-booking.com"]:active { filter: none; box-shadow: var(--zlato-reljef), var(--shadow); }
/* početna pre skrola: staklena pilula u traci preko fotografije → ista folija */
.photo-hero .nav:not(.nav--scrolled) .btn[href*="lime-booking.com"] {
  background: var(--zlato-folija); color: #1f2a14;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--zlato-reljef), 0 4px 14px oklch(0 0 0 / 0.3);
}
.photo-hero .nav:not(.nav--scrolled) .btn[href*="lime-booking.com"]:hover {
  background: var(--zlato-folija);
  box-shadow: var(--zlato-reljef), 0 8px 22px oklch(0 0 0 / 0.36);
}
/* odsjaj — recept značke, ali ISPOD slova (z-index -1 u izolovanom dugmetu),
   pa natpis ostaje čitak dok svetlo prelazi */
.btn[href*="lime-booking.com"]::before,
.dock__cta[href*="lime-booking.com"]::before {
  content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: -40%; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: translateX(-160%) skewX(-16deg); opacity: 0;
  animation: zlato-odsjaj 6s ease-out 2s infinite;
}
@keyframes zlato-odsjaj {
  0% { transform: translateX(-160%) skewX(-16deg); opacity: 0; }
  3% { opacity: 1; }
  20%, 100% { transform: translateX(560%) skewX(-16deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn[href*="lime-booking.com"]::before,
  .dock__cta[href*="lime-booking.com"]::before { animation: none; }
}
/* ==== ZLATNO-DUGME KRAJ ==== */