/* ============================================================
   OPĆA STOMATOLOŠKA ORDINACIJA VL.SULEJMAN HUSKIĆ — Cazin
   Stil sajta. Učitava se POSLIJE tokens.css → section.css → brend.css
   i nadjačava ih po redoslijedu, sa istom specifičnošću.

   Sekcijski `section.css` fajlovi NISU dirani — u njima je raspored.
   Ovdje su boja, pismo, razmaci i ono što je klijent tražio.
   ============================================================ */

/* ------------------------------------------------------------
   1. PALETA — zlatno i tamno
   ------------------------------------------------------------ */

:root {
  --gold:       #D9B84B;
  --gold-dk:    #C09A2C;
  --gold-lt:    #EBD68F;
  --gold-soft:  rgba(217, 184, 75, 0.12);
  --gold-line:  rgba(217, 184, 75, 0.18);
  --gold-line-2:rgba(217, 184, 75, 0.36);

  --ink:        #0A0C0F;   /* najtamnija podloga */
  --ink-2:      #0E1116;   /* naizmjenična traka */
  --card:       #14181E;   /* podloga kartica */
  --card-2:     #1B2028;   /* podignuta površina */
  --paper:      #F4EFE4;   /* najjači tekst */
  --paper-2:    #DFD8CA;   /* tekst */
  --paper-mu:   #A29A8B;   /* prigušen tekst */

  --wa:         #1F8A63;
  --wa-dk:      #17694B;

  --site-gutter: clamp(24px, 5vw, 56px);
  --site-maxw:   1200px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* zaglavlje je fiksno (tačka 3) — sadržaj počinje ispod njega */
  padding-top: 72px;
}

img, video { max-width: 100%; }

.band { background: var(--ink); }
.band-even { background: var(--ink-2); }

::selection { background: var(--gold); color: var(--ink); }

/* ------------------------------------------------------------
   2. TOKENI SEKCIJA — jedno pismo, jedna paleta, jedan kontejner
   Svaka sekcija nosi tokene svog templata; ovdje se prevezuju.
   ------------------------------------------------------------ */

.sec-aperta-header,
.sec-calm-hero,
.sec-bloom-services,
.sec-housecall-referenzen,
.sec-nordlicht-parallax,
.sec-calm-about,
.sec-haven-results,
.sec-fundament-instagram,
.sec-dental-house-faq,
.sec-klar-cta,
.sec-aperta-footer {
  /* jedno pismo na cijelom sajtu — opšta praksa → Nunito + Inter */
  --ff-display: var(--font-display-rounded);
  --ff-body: var(--font-sans);

  /* brend, prevezan za tamnu podlogu */
  --c-primary:      var(--paper);
  --c-primary-dk:   #FFFFFF;
  --c-primary-lt:   var(--paper-mu);
  --c-primary-05:   rgba(244, 239, 228, 0.05);
  --c-primary-08:   rgba(244, 239, 228, 0.08);
  --c-primary-10:   rgba(244, 239, 228, 0.10);
  --c-primary-14:   rgba(244, 239, 228, 0.14);
  --c-primary-16:   rgba(244, 239, 228, 0.16);
  --c-primary-20:   rgba(244, 239, 228, 0.20);

  --c-accent:       var(--gold);
  --c-accent-dk:    var(--gold-lt);
  --c-accent-lt:    var(--gold-lt);
  --c-accent-soft:  var(--gold-soft);
  --c-accent-tint:  var(--gold-soft);

  /* neutrali */
  --c-bg:           var(--ink);
  --c-bg-alt:       var(--ink-2);
  --c-white:        var(--card);
  --c-surface:      var(--card-2);
  --c-surface-soft: var(--card);
  --c-ink:          var(--paper);
  --c-text:         var(--paper-2);
  --c-text-muted:   var(--paper-mu);
  --c-text-invert:  var(--ink);
  --c-on-dark:      var(--paper);
  --c-on-dark-mu:   rgba(244, 239, 228, 0.74);
  --c-line:         var(--gold-line);
  --c-line-strong:  var(--gold-line-2);
  --c-line-dark:    var(--gold-line);
  --c-border:       var(--gold-line);
  --c-border-strong:var(--gold-line-2);
  --c-star:         var(--gold);

  --c-whatsapp:     var(--wa);
  --c-whatsapp-dk:  var(--wa-dk);
  --c-whatsapp-vivid: #25D366;

  /* nordlicht platno */
  --c-canvas:       var(--ink);
  --c-canvas-lt:    var(--card);
  --c-canvas-dp:    #06080A;
  --c-panel:        var(--ink);
  --c-panel-alt:    var(--ink-2);
  --c-on-canvas:    var(--paper);
  --c-on-canvas-mu: rgba(244, 239, 228, 0.78);
  --c-line-canvas:  var(--gold-line-2);

  /* klar */
  --c-mint:         var(--gold);
  --c-mint-soft:    var(--gold-soft);

  /* sjenke: na tamnom rade dubina i zlatni obrub, ne crna mrlja */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-md: 0 10px 28px rgba(0, 0, 0, 0.5);
  --sh-lg: 0 22px 54px rgba(0, 0, 0, 0.55);
  --sh-xl: 0 36px 80px rgba(0, 0, 0, 0.6);

  /* tačka 2 — svaka sekcija ima ISTI kontejner i ISTI prazan rub */
  --maxw: var(--site-maxw);
  --gutter: var(--site-gutter);
  --header-h: 72px;
}

/* traka koje u markupu nema — inače bi instagram sekcija imala
   88 px više prostora slijeva nego sve ostale (tačka 2) */
.sec-fundament-instagram { --rail-w: 0px; }

/* parallax panel ide preko cijele širine; njegov tekst se poravnava
   sa svim ostalim sekcijama kroz --pad */
.sec-nordlicht-parallax {
  --gutter: 0px;
  --pad: var(--site-gutter);
  --panel-gap: 0px;
  --r-panel: 0px;
}

/* ------------------------------------------------------------
   3. TIPOGRAFIJA
   ------------------------------------------------------------ */

.sec :is(h1, h2, h3, h4) {
  font-family: var(--ff-display);
  color: var(--paper);
  letter-spacing: -0.015em;
}
.sec :is(h1, h2) { font-weight: 800; }
.sec h3 { font-weight: 700; }

/* naslov u DVA REDA — tačke 4, 5, 6, 8 */
.sec .ln { display: block; }

.sec p { color: var(--paper-mu); }

/* natpisi iznad naslova su zlatni na cijelom sajtu */
.sec :is(.u-label, .u-eyebrow, .u-kicker) { color: var(--gold); }
.sec :is(.u-label, .u-eyebrow, .u-kicker)::before,
.sec .u-eyebrow--center::after { background: var(--gold); }

/* zlatni luk ispod riječi */
.sec-calm-hero .u-arc,
.sec-calm-about .u-arc { color: var(--paper); }

/* ------------------------------------------------------------
   4. DUGMAD — jedna vrsta na cijelom sajtu
   ------------------------------------------------------------ */

.sec .u-btn {
  font-family: var(--ff-display);
  font-weight: 700;
  --btn-fg: var(--paper);
}
.sec :is(.u-btn--primary, .u-btn--solid, .u-btn--accent) {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  --btn-bd: var(--gold);
  box-shadow: 0 10px 26px rgba(217, 184, 75, 0.18);
}
.sec :is(.u-btn--primary, .u-btn--solid, .u-btn--accent):hover {
  --btn-bg: var(--gold-lt);
  --btn-bd: var(--gold-lt);
  box-shadow: 0 14px 34px rgba(217, 184, 75, 0.26);
}
.sec .u-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: var(--gold-line-2);
}
.sec .u-btn--ghost:hover {
  --btn-bg: var(--gold-soft);
  --btn-bd: var(--gold);
  --btn-fg: var(--gold-lt);
}
.sec .u-btn--wa { --btn-bg: var(--wa); --btn-fg: #fff; --btn-bd: var(--wa); }
.sec .u-btn--wa:hover { --btn-bg: var(--wa-dk); --btn-bd: var(--wa-dk); }

.sec .u-skip-link { background: var(--gold); color: var(--ink); }

/* ------------------------------------------------------------
   5. ZAGLAVLJE — fiksno pri skrolanju (tačka 3)
   ------------------------------------------------------------ */

.sec-aperta-header .site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(10, 12, 15, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
}
.sec-aperta-header .site-head.is-stuck {
  background: rgba(10, 12, 15, 0.94);
  border-bottom-color: var(--gold-line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.sec-aperta-header .brand__mark { color: var(--gold); }
.sec-aperta-header .brand__tick { color: var(--gold-lt); }
.sec-aperta-header .brand__tx strong { color: var(--paper); letter-spacing: 0.01em; }
.sec-aperta-header .brand__tx small { color: var(--paper-mu); }

.sec-aperta-header .site-nav a { color: var(--paper-2); font-weight: 500; }
.sec-aperta-header .site-nav a:hover,
.sec-aperta-header .site-nav a.is-current { color: var(--gold-lt); border-bottom-color: var(--gold); }

.sec-aperta-header .head-wa {
  min-height: 46px;
  padding: 11px 18px;
  font-size: var(--fs-sm);
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: var(--gold-line-2);
}
.sec-aperta-header .head-wa:hover { --btn-bg: var(--gold-soft); --btn-bd: var(--gold); --btn-fg: var(--gold-lt); }
.sec-aperta-header .head-wa svg { width: 19px; height: 19px; }

.sec-aperta-header .head-cta svg { width: 18px; height: 18px; }

.sec-aperta-header .burger { border-color: var(--gold-line-2); color: var(--paper); }
.sec-aperta-header .burger:hover { border-color: var(--gold); color: var(--gold-lt); }

/* meni na telefonu — ne smije preći preko dna ekrana (tačka 14) */
.sec-aperta-header .menu {
  background: rgba(10, 12, 15, 0.98);
  border-top: 1px solid var(--gold-line);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.55);
}
.sec-aperta-header .menu a { color: var(--paper); border-bottom-color: var(--gold-line); }
.sec-aperta-header .menu a:hover { color: var(--gold-lt); }
.sec-aperta-header .menu li:last-child a { color: var(--gold); }

.sec-aperta-header .mobile-bar__i--call { background: var(--gold); color: var(--ink); }
.sec-aperta-header .mobile-bar__i--wa { background: var(--wa); color: #fff; }
.sec-aperta-header .mobile-bar__i { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }

/* ------------------------------------------------------------
   6. HERO — video u pozadini, bez slike (tačka 4)
   ------------------------------------------------------------ */

.sec-calm-hero .hero {
  background: var(--ink);
  padding-top: clamp(64px, 9vw, 132px);
  padding-bottom: clamp(96px, 12vw, 168px);
  min-height: min(88vh, 780px);
  align-content: center;
}
.sec-calm-hero .hero__blob { display: none; }

.sec-calm-hero .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}
.sec-calm-hero .hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
/* zatamnjenje ide onoliko koliko treba da se tekst čita — fotografija
   ostaje fotografija; gustina je u gradijentu ispod samog teksta */
.sec-calm-hero .hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 8, 11, 0.92) 0%, rgba(6, 8, 11, 0.78) 38%, rgba(6, 8, 11, 0.22) 68%, rgba(6, 8, 11, 0.42) 100%),
    linear-gradient(180deg, rgba(6, 8, 11, 0.72) 0%, transparent 26%, rgba(6, 8, 11, 0.66) 100%);
}

.sec-calm-hero .hero__inner { grid-template-columns: minmax(0, 1fr); }
.sec-calm-hero .hero__copy { max-width: 40rem; }
.sec-calm-hero .hero h1 {
  max-width: none;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.06;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.sec-calm-hero .hero__lead {
  max-width: 34ch;
  color: var(--paper-2);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6);
}

.sec-calm-hero .hero__rating {
  background: rgba(20, 24, 30, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--gold-line-2);
  color: var(--paper-2);
}
.sec-calm-hero .hero__rating:hover { border-color: var(--gold); }
.sec-calm-hero .hero__rating-g { background: #fff; }
.sec-calm-hero .hero__stars { color: var(--gold); }
.sec-calm-hero .hero__rating-text strong { color: var(--paper); }

/* dvije kartice sa podacima → jedan red, nikad prelom 2+1 */
.sec-calm-hero .hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-5);
}
.sec-calm-hero .hero__card {
  position: static;
  flex: 1 1 15rem;
  animation: none;
  background: rgba(20, 24, 30, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--gold-line);
}
.sec-calm-hero .hero__card-icon { background: var(--gold-soft); color: var(--gold); }
.sec-calm-hero .hero__card-text strong { color: var(--paper); }
.sec-calm-hero .hero__card-text small { color: var(--paper-mu); }

.sec-calm-hero .hero__wave path { fill: var(--ink-2); }


/* ------------------------------------------------------------
   7. USLUGE (tačka 5)
   ------------------------------------------------------------ */

.sec-bloom-services .svc { background: var(--ink-2); }
.sec-bloom-services .u-section--alt { background: transparent; }
.sec-bloom-services .svc__head { max-width: none; width: 100%; }
.sec-bloom-services .svc__head h2 {
  max-width: none;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
}
.sec-bloom-services .u-head p { max-width: none; color: var(--paper-mu); }
/* naslov usluga je preko pune širine, pa se ne lomi u dva bloka */
.sec-bloom-services #svc-title .ln { display: inline; }

.sec-bloom-services .scard {
  background: linear-gradient(180deg, var(--card) 0%, #10141A 100%);
  border-color: var(--gold-line);
}
.sec-bloom-services .scard:hover { border-color: var(--gold-line-2); }
.sec-bloom-services .scard--wide {
  background: linear-gradient(180deg, #1A1D18 0%, #14171A 100%);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(217, 184, 75, 0.18), var(--sh-md);
}
.sec-bloom-services .scard__ic { background: var(--gold-soft); color: var(--gold); }
.sec-bloom-services .scard--wide .scard__ic { background: var(--gold); color: var(--ink); }
.sec-bloom-services .scard h3 { color: var(--paper); }
.sec-bloom-services .scard__tx { color: var(--paper-mu); }
.sec-bloom-services .scard__list { border-top-color: var(--gold-line); color: var(--paper-2); }
.sec-bloom-services .scard__list li::before {
  background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B84B' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.3'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.sec-bloom-services .scard__ask { color: var(--gold); }
.sec-bloom-services .scard__ask:hover { color: var(--gold-lt); }

/* ------------------------------------------------------------
   8. RECENZIJE — 3 u redu + naprijed/nazad (tačka 6)
   ------------------------------------------------------------ */

.sec-housecall-referenzen .revs { background: var(--ink); }
.sec-housecall-referenzen .revs__head h2 { max-width: none; }
.sec-housecall-referenzen .u-head h2::after { background: var(--gold); }

.sec-housecall-referenzen .revs__score { color: var(--paper-mu); }
.sec-housecall-referenzen .revs__score strong { color: var(--paper); }
.sec-housecall-referenzen .revs__score a { color: var(--gold); border-bottom-color: var(--gold-line-2); }
.sec-housecall-referenzen .revs__score a:hover { color: var(--gold-lt); }
.sec-housecall-referenzen .u-stars { color: var(--gold); }
.sec-housecall-referenzen .u-stars .is-empty { opacity: 0.28; }

.sec-housecall-referenzen .revs__wrap { position: relative; }

.sec-housecall-referenzen .rev {
  background: var(--card);
  border-color: var(--gold-line);
  border-radius: 18px;
  padding: var(--sp-5);
}
.sec-housecall-referenzen .rev__tx { color: var(--paper-2); }
.sec-housecall-referenzen .rev__who { border-top-color: var(--gold-line); color: var(--paper-mu); }
.sec-housecall-referenzen .rev__who strong { color: var(--gold-lt); }
/* pet zlatnih zvjezdica iznad citata */
.sec-housecall-referenzen .rev__tx::before {
  content: "★★★★★";
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--gold);
  letter-spacing: 3px;
  font-size: 0.95rem;
}

/* kad recenzija ima manje od tri, red ostaje sredinom, ne uz lijevu ivicu */
.sec-housecall-referenzen .revs__list[data-count="1"] { grid-template-columns: minmax(0, 34rem); justify-content: center; }
.sec-housecall-referenzen .revs__list[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 26rem)); justify-content: center; }

/* strelice — vide se tek kad ima više od tri recenzije (JS) */
.sec-housecall-referenzen .revs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.sec-housecall-referenzen .revs__nav[hidden] { display: none; }
.sec-housecall-referenzen .revs__btn {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--gold-line-2);
  background: var(--card);
  color: var(--gold);
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}
.sec-housecall-referenzen .revs__btn:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sec-housecall-referenzen .revs__btn:disabled { opacity: 0.32; cursor: default; }
.sec-housecall-referenzen .revs__btn span {
  width: 11px; height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: -135deg;
  translate: 2px 0;
}
.sec-housecall-referenzen .revs__btn--next span { rotate: 45deg; translate: -2px 0; }
.sec-housecall-referenzen .revs__count {
  min-width: 5rem;
  text-align: center;
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--paper-mu);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   9. PARALLAX — video u pozadini (tačka 7)
   ------------------------------------------------------------ */

.sec-nordlicht-parallax .plx {
  background: #06080A;
  min-height: clamp(520px, 80vh, 780px);
}
.sec-nordlicht-parallax .plx__video { object-position: 50% 40%; }
.sec-nordlicht-parallax .plx__veil {
  background:
    radial-gradient(76% 96% at 50% 50%, rgba(6, 8, 11, 0.52), rgba(6, 8, 11, 0.86)),
    linear-gradient(180deg, rgba(6, 8, 11, 0.78), transparent 30%, rgba(6, 8, 11, 0.82));
}
.sec-nordlicht-parallax .plx__title {
  color: var(--paper);
  max-width: 24ch;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.1;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7);
}
.sec-nordlicht-parallax .plx__lead {
  color: var(--paper-2);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.7);
}
.sec-nordlicht-parallax .u-kicker::before { background: var(--gold); }

/* ------------------------------------------------------------
   10. O NAMA (tačka 8)
   ------------------------------------------------------------ */

.sec-calm-about .abt { background: var(--ink-2); }
.sec-calm-about .abt__blob { display: none; }
.sec-calm-about .abt__copy h2 { max-width: none; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; }
.sec-calm-about .abt__lead { color: var(--paper-2); }

/* okvir se prilagođava fotografiji: 825 × 540, ne 4/5 */
.sec-calm-about .abt__photo {
  aspect-ratio: auto;
  height: 450px;
  border-radius: 24px 24px 24px 72px;
  border: 1px solid var(--gold-line);
  background: var(--card);
}
/* uspravan kadar: doktor i pacijent su desno od sredine kadra,
   pa se težište pomjera tamo da niko ne ispadne iz slike */
.sec-calm-about .abt__photo img {
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.sec-calm-about .abt__portrait {
  border-color: var(--ink-2);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--gold-line-2), var(--sh-lg);
}
.sec-calm-about .abt__portrait img { object-fit: contain; padding: 6px; background: var(--card); }
.sec-calm-about .abt__badge {
  background: rgba(20, 24, 30, 0.9);
  border-color: var(--gold-line-2);
}
.sec-calm-about .abt__badge-icon { background: var(--gold-soft); color: var(--gold); }
.sec-calm-about .abt__badge-text strong { color: var(--paper); }
.sec-calm-about .abt__badge-text small { color: var(--paper-mu); }
.sec-calm-about .abt__dots { background-image: radial-gradient(var(--gold-line-2) 1.6px, transparent 1.7px); }

.sec-calm-about .abt__points li { color: var(--paper-2); }
.sec-calm-about .abt__points strong { color: var(--paper); }
.sec-calm-about .abt__tick { background: var(--gold-soft); border-color: var(--gold); }
.sec-calm-about .abt__sign-name { color: var(--gold-lt); }
.sec-calm-about .abt__sign-role { color: var(--paper-mu); }

/* ------------------------------------------------------------
   11. PRIJE I POSLIJE — naslov i opis preko pune širine (tačka 9)
   ------------------------------------------------------------ */

.sec-haven-results .ba { background: var(--ink); }
.sec-haven-results .ba__head { max-width: none; width: 100%; }
.sec-haven-results .ba__head h2 {
  max-width: none;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
}
.sec-haven-results .ba__head p { max-width: none; font-size: var(--fs-lg); }
.sec-haven-results .u-head h2::after { background: var(--gold); }

.sec-haven-results .bimg {
  background: var(--card);
  border: 1px solid var(--gold-line);
  box-shadow: var(--sh-md);
}
.sec-haven-results .bimg :is(img, video) { aspect-ratio: 900 / 491; }
.sec-haven-results .bimg figcaption {
  background: rgba(10, 12, 15, 0.86);
  border: 1px solid var(--gold-line-2);
  color: var(--gold-lt);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sec-haven-results .bimg.is-after figcaption { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.sec-haven-results .bcase__tx h3 { color: var(--paper); max-width: 22ch; }
.sec-haven-results .bcase__tx p { color: var(--paper-mu); }
.sec-haven-results .bcase__meta li {
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-lt);
}
.sec-haven-results .bcase__toggle { background: var(--card); border: 1px solid var(--gold-line); }
.sec-haven-results .bcase__toggle button { color: var(--paper-mu); }
.sec-haven-results .bcase__toggle button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

/* ------------------------------------------------------------
   12. GALERIJA — slika u modalu, naprijed/nazad (tačka 10)
   ------------------------------------------------------------ */

.sec-fundament-instagram .ig { background: var(--ink-2); }
.sec-fundament-instagram .ig__head .u-head h2 { max-width: 18ch; }

.sec-fundament-instagram .ig__profile { background: var(--card); border-color: var(--gold-line); }
.sec-fundament-instagram .ig__profile:hover { border-color: var(--gold); }
.sec-fundament-instagram .ig__profile-ic { background: #1877F2; color: #fff; }
.sec-fundament-instagram .ig__profile-tx strong { color: var(--paper); }
.sec-fundament-instagram .ig__profile-tx small { color: var(--paper-mu); }

.sec-fundament-instagram .reel__link {
  background: var(--card);
  border: 1px solid var(--gold-line);
  cursor: zoom-in;
}
.sec-fundament-instagram .reel__link:hover { border-color: var(--gold-line-2); }
.sec-fundament-instagram .reel__link::after {
  background: linear-gradient(180deg, transparent, rgba(6, 8, 11, 0.9));
}
.sec-fundament-instagram .reel__meta { color: var(--paper); }
.sec-fundament-instagram .reel__meta strong { color: var(--paper); }
.sec-fundament-instagram .reel__meta small { color: var(--gold-lt); }

/* lupa umjesto play trougla — ovdje su slike, ne video */
.sec-fundament-instagram .reel__zoom {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(10, 12, 15, 0.72);
  border: 1px solid var(--gold-line-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 240ms, transform 240ms;
}
.sec-fundament-instagram .reel__zoom::before {
  content: "";
  width: 17px; height: 17px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: 7px 7px 0 -1px var(--gold);
  translate: -2px -2px;
}
.sec-fundament-instagram .reel__link:hover .reel__zoom { background: var(--gold); transform: scale(1.08); }
.sec-fundament-instagram .reel__link:hover .reel__zoom::before { border-color: var(--ink); box-shadow: 7px 7px 0 -1px var(--ink); }

/* --- modal --- */
.sec-fundament-instagram .galbox { position: fixed; inset: 0; z-index: 90; }
.sec-fundament-instagram .galbox[hidden] { display: none; }
.sec-fundament-instagram .galbox__scrim {
  position: absolute; inset: 0;
  border: 0;
  background: rgba(4, 6, 8, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 260ms;
  cursor: default;
}
.sec-fundament-instagram .galbox.is-open .galbox__scrim { opacity: 1; }

.sec-fundament-instagram .galbox__panel {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 1;
  width: min(940px, 92vw);
  transform: translate(-50%, -46%) scale(0.97);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms;
}
.sec-fundament-instagram .galbox.is-open .galbox__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.sec-fundament-instagram .galbox__img {
  display: block;
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid var(--gold-line-2);
  background: var(--ink);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}
.sec-fundament-instagram .galbox__cap {
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--paper-mu);
}

.sec-fundament-instagram .galbox__close {
  position: absolute;
  top: -20px; right: -12px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--gold-line-2);
  background: var(--card);
  color: var(--gold);
  cursor: pointer;
}
.sec-fundament-instagram .galbox__close:hover { background: var(--gold); color: var(--ink); }
.sec-fundament-instagram .galbox__close span { position: relative; width: 16px; height: 16px; }
.sec-fundament-instagram .galbox__close span::before,
.sec-fundament-instagram .galbox__close span::after {
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
}
.sec-fundament-instagram .galbox__close span::before { transform: rotate(45deg); }
.sec-fundament-instagram .galbox__close span::after { transform: rotate(-45deg); }

.sec-fundament-instagram .galbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--gold-line-2);
  background: rgba(10, 12, 15, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gold);
  cursor: pointer;
  text-decoration: none;
}
.sec-fundament-instagram .galbox__nav[hidden] { display: none; }
.sec-fundament-instagram .galbox__nav:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sec-fundament-instagram .galbox__nav--prev { left: -26px; }
.sec-fundament-instagram .galbox__nav--next { right: -26px; }
.sec-fundament-instagram .galbox__arrow {
  width: 12px; height: 12px;
  flex: none;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  translate: -2px 0;
}
.sec-fundament-instagram .galbox__nav--prev .galbox__arrow { rotate: -135deg; translate: 2px 0; }

/* treća slika: „naprijed" vodi na stranicu ordinacije */
.sec-fundament-instagram .galbox__nav--out {
  width: auto;
  padding: 0 20px;
  gap: 10px;
  grid-auto-flow: column;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: 0.875rem;
  font-weight: 700;
}
.sec-fundament-instagram .galbox__nav--out:hover { background: var(--gold-lt); border-color: var(--gold-lt); color: var(--ink); }

/* ------------------------------------------------------------
   13. PITANJA — naslov preko pune širine (tačka 11)
   ------------------------------------------------------------ */

.sec-dental-house-faq .faq { background: var(--ink-2); }
.sec-dental-house-faq .u-section--alt { background: transparent; }
.sec-dental-house-faq .faq__head { max-width: none; width: 100%; }
.sec-dental-house-faq .faq__head h2 {
  max-width: none;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
}
.sec-dental-house-faq .faq__head p { max-width: none; font-size: var(--fs-lg); }
.sec-dental-house-faq .faq__list { max-width: none; }
.sec-dental-house-faq .faq__ask { max-width: none; border-top-color: var(--gold-line); }

.sec-dental-house-faq .qa {
  background: var(--card);
  border-color: var(--gold-line);
  border-radius: 14px;
}
.sec-dental-house-faq .qa:hover { border-color: var(--gold-line-2); }
.sec-dental-house-faq .qa:has(button[aria-expanded="true"]) {
  border-color: var(--gold);
  background: linear-gradient(180deg, #191C16 0%, var(--card) 100%);
}
.sec-dental-house-faq .qa button { color: var(--paper); }
.sec-dental-house-faq .qa button:hover { color: var(--gold-lt); }
.sec-dental-house-faq .qa__pm { background: var(--gold-soft); }
.sec-dental-house-faq .qa__pm::before,
.sec-dental-house-faq .qa__pm::after { background: var(--gold); }
.sec-dental-house-faq .qa button[aria-expanded="true"] .qa__pm { background: var(--gold); }
.sec-dental-house-faq .qa button[aria-expanded="true"] .qa__pm::before,
.sec-dental-house-faq .qa button[aria-expanded="true"] .qa__pm::after { background: var(--ink); }
.sec-dental-house-faq .qa__p p { color: var(--paper-mu); }
.sec-dental-house-faq .qa__p a { color: var(--gold); border-bottom: 1px solid var(--gold-line-2); }
.sec-dental-house-faq .qa__p a:hover { color: var(--gold-lt); }
.sec-dental-house-faq .faq__ask p { color: var(--paper-mu); }
.sec-dental-house-faq .faq__ask strong { color: var(--paper); }

/* ------------------------------------------------------------
   14. POZIV NA AKCIJU — video u pozadini (tačka 12)
   ------------------------------------------------------------ */

.sec-klar-cta .cta {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  overflow: hidden;
}
.sec-klar-cta .cta__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.sec-klar-cta .cta__video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.sec-klar-cta .cta__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(72% 92% at 50% 50%, rgba(6, 8, 11, 0.32), rgba(6, 8, 11, 0.78)),
    linear-gradient(180deg, rgba(6, 8, 11, 0.86), transparent 26%, rgba(6, 8, 11, 0.9));
}

.sec-klar-cta .cta__card {
  background: linear-gradient(150deg, rgba(18, 22, 17, 0.52) 0%, rgba(10, 13, 16, 0.58) 60%, rgba(14, 18, 24, 0.52) 100%);
  border: 1px solid var(--gold-line-2);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  color: var(--paper-2);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.sec-klar-cta .cta__label { color: var(--gold); }
.sec-klar-cta .cta__label::before { background: var(--gold); }
.sec-klar-cta .cta__copy h2 {
  color: var(--paper);
  max-width: none;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.14;
}
.sec-klar-cta .cta__copy > p { color: var(--paper-mu); max-width: 44ch; }
.sec-klar-cta .u-hl { background: var(--gold); color: var(--ink); }
.sec-klar-cta .u-sticker { background: var(--gold); color: var(--ink); }
.sec-klar-cta .cta__st--b { background: var(--card); color: var(--gold-lt); box-shadow: 0 0 0 1px var(--gold-line-2); }

.sec-klar-cta .crow { background: var(--card); color: var(--paper); border: 1px solid var(--gold-line); }
.sec-klar-cta .crow:hover { border-color: var(--gold-line-2); }
.sec-klar-cta .crow__tx strong { color: var(--paper); }
.sec-klar-cta .crow__tx small { color: var(--paper-mu); }
.sec-klar-cta .crow--wa .crow__ic { background: rgba(31, 138, 99, 0.16); color: #3BC38C; }
.sec-klar-cta .crow--wa:hover .crow__ic { background: var(--wa); color: #fff; }
.sec-klar-cta .crow--tel .crow__ic { background: var(--gold-soft); color: var(--gold); }
.sec-klar-cta .crow--tel:hover .crow__ic { background: var(--gold); color: var(--ink); }
.sec-klar-cta .crow__go { color: var(--gold); }

/* ------------------------------------------------------------
   15. PODNOŽJE — tamno (tačka 13)
   ------------------------------------------------------------ */

.sec-aperta-footer .ftr {
  background: #06080A;
  border-top: 1px solid var(--gold-line);
}
.sec-aperta-footer .u-arcline::before,
.sec-aperta-footer .u-arcline::after { background: var(--gold-line); }
.sec-aperta-footer .u-arc--teal { --arc-c: var(--gold); }

.sec-aperta-footer .ftr__mark { color: var(--gold); }
.sec-aperta-footer .ftr__logo-tx strong { color: var(--paper); }
.sec-aperta-footer .ftr__logo-tx small { color: var(--paper-mu); }
.sec-aperta-footer .ftr__blurb { color: var(--paper-mu); }
.sec-aperta-footer .ftr__col h3 { color: var(--gold); }

.sec-aperta-footer .ftr__map { display: inline-block; }
.sec-aperta-footer .ftr__map address { margin-top: 0; color: var(--paper-2); }
.sec-aperta-footer .ftr__map-tx {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold);
}
.sec-aperta-footer .ftr__map:hover .ftr__map-tx { color: var(--gold-lt); }
.sec-aperta-footer .ftr__map:hover address { color: var(--paper); }

.sec-aperta-footer .ftr__links a { color: var(--paper-mu); }
.sec-aperta-footer .ftr__links a:hover { color: var(--gold-lt); }
.sec-aperta-footer .ftr__bar { border-top-color: var(--gold-line); color: var(--paper-mu); }
.sec-aperta-footer .ftr__bar p { font-size: 0.8125rem; }
.sec-aperta-footer .ftr__top-btn { color: var(--gold); border-bottom-color: var(--gold-line-2); }
.sec-aperta-footer .ftr__top-btn:hover { color: var(--gold-lt); }

/* ------------------------------------------------------------
   16. TELEFON — kontejner 80 %, bez bočnog paddinga (tačka 14)
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  body { padding-top: 64px; }

  .sec-aperta-header,
  .sec-calm-hero,
  .sec-bloom-services,
  .sec-housecall-referenzen,
  .sec-nordlicht-parallax,
  .sec-calm-about,
  .sec-haven-results,
  .sec-fundament-instagram,
  .sec-dental-house-faq,
  .sec-klar-cta,
  .sec-aperta-footer {
    --header-h: 64px;
    --gutter: 0px;
    /* tačka 5 — isti vertikalni razmak u svakoj sekciji na telefonu */
    --section-y: 45px;
    --panel-y: 45px;
  }

  /* sekcije koje ne računaju razmak kroz --section-y */
  .sec-nordlicht-parallax .plx { padding-block: 45px; }
  .sec-klar-cta .cta { padding-block: 45px; }
  .sec-aperta-footer .ftr { padding-block: 45px calc(45px + 80px); }

  .sec .u-container,
  .sec-nordlicht-parallax .u-inner {
    width: 80%;
    max-width: 80%;
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* zaglavlje: u 80 % moraju stati znak, telefon i meni */
  .sec-aperta-header .site-head__inner { gap: 10px; }
  .sec-aperta-header .head-wa { display: none; }
  .sec-aperta-header .head-cta { padding: 11px 13px; }
  .sec-aperta-header .site-head__act { gap: 8px; }
  .sec-aperta-header .brand { min-width: 0; }
  .sec-aperta-header .brand__tx strong { font-size: 1.15rem; }
  .sec-aperta-header .burger { width: 44px; height: 44px; }
  .sec-aperta-header .menu ul { width: 80%; max-width: 80%; }

  /* hero: video se MORA vidjeti i na telefonu */
  .sec-calm-hero .hero {
    min-height: auto;
    padding-top: clamp(28px, 8vw, 48px);
    padding-bottom: 45px;
  }
  .sec-calm-hero .hero__inner { display: block; }
  .sec-calm-hero .hero__copy { max-width: none; }
  .sec-calm-hero .hero__video { object-position: 62% 26%; }
  /* zatamnjenje se skuplja pod sam tekst — slika ostaje slika */
  .sec-calm-hero .hero__scrim {
    background: linear-gradient(180deg,
      rgba(6, 8, 11, 0.62) 0%,
      rgba(6, 8, 11, 0.18) 22%,
      rgba(6, 8, 11, 0.30) 40%,
      rgba(6, 8, 11, 0.86) 62%,
      rgba(6, 8, 11, 0.96) 100%);
  }
  /* naslov i JEDNO dugme iznad pregiba: slika diše na vrhu,
     tekst kreće ispod nje na punoj podlozi */
  .sec-calm-hero .hero__copy { padding-top: min(38vw, 190px); }
  .sec-calm-hero .hero h1 { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  .sec-calm-hero .hero__lead { max-width: none; font-size: 1rem; }
  .sec-calm-hero .hero__actions { flex-direction: column; }
  .sec-calm-hero .hero__actions .u-btn { width: 100%; }
  .sec-calm-hero .hero__actions .u-btn--ghost { min-height: 50px; font-size: 1rem; }
  .sec-calm-hero .hero__facts { flex-direction: column; gap: 10px; }
  /* na telefonu slika ide cijela, u svom omjeru — ništa se ne siječe */
  .sec-calm-about .abt__photo { height: auto; }
  .sec-calm-about .abt__photo img { height: auto; }
  .sec-calm-hero .hero__card { flex: 1 1 auto; }

  .sec-nordlicht-parallax .plx { min-height: 78vh; }

  .sec-fundament-instagram .ig__grid { max-width: none; }
  .sec-fundament-instagram .galbox__panel { width: 88vw; }
  .sec-fundament-instagram .galbox__nav--prev { left: 0; }
  .sec-fundament-instagram .galbox__nav--next { right: 0; }
  .sec-fundament-instagram .galbox__nav {
    top: auto;
    bottom: -68px;
    translate: 0;
  }
  .sec-fundament-instagram .galbox__nav--out { padding: 0 16px; font-size: 0.8125rem; }
  .sec-fundament-instagram .galbox__cap { padding: 0 60px; }

  .sec-housecall-referenzen .revs__list[data-count="1"],
  .sec-housecall-referenzen .revs__list[data-count="2"] { grid-template-columns: 1fr; }

  .sec-klar-cta .cta__st--a { left: 16px; }
  .sec-klar-cta .cta__st--b { right: 16px; }
}

/* najuži ekrani: naslov u dva reda ne smije lomiti riječi */
@media (max-width: 380px) {
  .sec-calm-hero .hero h1 { font-size: 2rem; }
  .sec-aperta-header .brand__tx strong { font-size: 1.05rem; }
}

/* ------------------------------------------------------------
   17. Fokus i smanjeni pokret
   ------------------------------------------------------------ */

.sec :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .sec-calm-hero .hero__card { animation: none; }
  .sec-calm-hero .hero__frame { animation: none; }
}

/* ------------------------------------------------------------
   18. Dorada na telefonu — piše se poslije bloka 16, pa pobjeđuje
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  /* naslovi u dva reda: da drugi red ne prelije u treći */
  .sec-calm-about .abt__copy h2 { font-size: 1.7rem; }
  .sec-klar-cta .cta__copy h2 { font-size: 1.75rem; }
  .sec-nordlicht-parallax .plx__title { font-size: 1.9rem; }
  .sec-haven-results .ba__head h2,
  .sec-dental-house-faq .faq__head h2 { font-size: 1.85rem; }

  /* nalijepnice u CTA sekciji ne smiju izaći iz kartice */
  .sec-klar-cta .cta__st { font-size: 0.6875rem; padding: 7px 13px; }

  /* modal: dugme za zatvaranje iznad slike, ne preko nje */
  .sec-fundament-instagram .galbox__close { top: -56px; right: 0; }
  .sec-fundament-instagram .galbox__img { max-height: 62vh; }
}

/* ------------------------------------------------------------
   19. LOGOTIP ORDINACIJE

   Pravi logotip je zlatna kruna i zub na tamnoj podlozi — ista
   paleta kao sajt, pa se podloga slike stapa sa stranicom i
   ostaje samo znak. Kadar je pomjeren na krunu i zub, jer je
   natpis u znaku je sitan na ovoj veličini, pa ime ordinacije
   stoji pored njega kao tekst.
   ------------------------------------------------------------ */

.sec-aperta-header .brand__mark,
.sec-aperta-footer .ftr__mark {
  overflow: hidden;
  border-radius: 10px;
}
.sec-aperta-header .brand__mark img,
.sec-aperta-footer .ftr__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sec-aperta-header .brand__mark { width: 46px; height: 46px; }
.sec-aperta-footer .ftr__mark { width: 44px; height: 44px; }

/* O nama: logotip u krugu — veći, bez okvira, da se zlato vidi */
.sec-calm-about .abt__portrait {
  width: clamp(108px, 14vw, 152px);
  border-width: 0;
  background: #0C0E12;
  box-shadow: 0 0 0 1px var(--gold-line-2), var(--sh-lg);
}
.sec-calm-about .abt__portrait img {
  object-fit: cover;
  object-position: 50% 42%;
  scale: 1.28;
  padding: 0;
  background: transparent;
}