/* ============================================================
   DENT ESTET stomatologija Đurić — Doboj
   Stil sajta. Učitava se POSLIJE tokens.css → section.css (11×) →
   brend.css i nadjačava ih po redoslijedu, sa istom specifičnošću.

   Nijedan `section.css` nije diran — u njima je raspored. Ovdje su
   boja, pismo, razmaci i ono što je klijent tražio.
   ============================================================ */

/* ------------------------------------------------------------
   1. PALETA — narandžasta iz logotipa na tamnoj mornarskoj podlozi
   ------------------------------------------------------------ */

:root {
  --or:        #F9A420;   /* akcent iz logotipa */
  --or-dk:     #D9860B;
  --or-lt:     #FFC059;
  --or-soft:   rgba(249, 164, 32, 0.12);
  --or-line:   rgba(249, 164, 32, 0.20);
  --or-line-2: rgba(249, 164, 32, 0.40);

  --ink:     #1B252F;   /* najtamnija podloga — boja iz brifa */
  --ink-2:   #202C38;   /* naizmjenična traka */
  --ink-3:   #16202A;   /* najdublja, ispod videa */
  --card:    #26333F;   /* podloga kartica */
  --card-2:  #2E3D4B;   /* podignuta površina */

  --paper:    #F4F7FA;  /* najjači tekst */
  --paper-2:  #D8E0E8;  /* tekst */
  --paper-mu: #9BA9B7;  /* prigušen tekst — 5.9:1 na --ink */

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

  --site-maxw:   1200px;
  --site-gutter: clamp(22px, 5vw, 56px);
  --head-h:      74px;
}

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: var(--head-h);
}

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

/* Naizmjenične trake. `band-odd`/`band-even` iz sastavljača ne prate
   ono što sekcije zaista crtaju, pa je boja upisana po traci: podloga
   ispod sekcije mora biti ISTA kao podloga same sekcije, inače se na
   spoju vidi tuđa boja (najviše na zakrivljenoj ivici parallaxa). */
.band { background: var(--ink); }

.band[data-band="4"],   /* recenzije */
.band[data-band="7"],   /* prije i poslije */
.band[data-band="9"] {  /* pitanja */
  background: var(--ink-2);
}

.band[data-band="5"],   /* parallax — video */
.band[data-band="11"] { /* podnožje */
  background: var(--ink-3);
}

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

/* ------------------------------------------------------------
   2. TOKENI SEKCIJA — jedno pismo, jedna paleta, jedan kontejner
   Svaka sekcija nosi tokene svog templata; ovdje se prevezuju.
   Praksa je OPŠTA stomatologija → naslovi Nunito, tijelo Inter.
   ------------------------------------------------------------ */

.sec-aperta-header,
.sec-haven-hero,
.sec-fundament-services,
.sec-meridian-referenzen,
.sec-calm-parallax,
.sec-housecall-about,
.sec-quiet-hours-results,
.sec-fundament-instagram,
.sec-fundament-faq,
.sec-meridian-cta,
.sec-terra-footer {
  --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, 247, 250, 0.05);
  --c-primary-08: rgba(244, 247, 250, 0.08);
  --c-primary-10: rgba(244, 247, 250, 0.10);
  --c-primary-14: rgba(244, 247, 250, 0.14);
  --c-primary-16: rgba(244, 247, 250, 0.16);
  --c-primary-20: rgba(244, 247, 250, 0.20);

  --c-accent:      var(--or);
  --c-accent-dk:   var(--or-lt);
  --c-accent-lt:   var(--or-lt);
  --c-accent-soft: var(--or-soft);
  --c-accent-tint: var(--or-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(--ink);
  --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, 247, 250, 0.76);
  --c-line:         rgba(244, 247, 250, 0.12);
  --c-line-strong:  var(--or-line-2);
  --c-line-dark:    rgba(244, 247, 250, 0.16);
  --c-border:       rgba(244, 247, 250, 0.12);
  --c-border-strong: var(--or-line-2);
  --c-star:         var(--or);
  --c-google-blue:  #4285F4;

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

  /* sjenke: na tamnom radi dubina, ne crna mrlja */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-sm: 0 3px 12px rgba(0, 0, 0, 0.40);
  --sh-md: 0 12px 30px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 24px 56px rgba(0, 0, 0, 0.50);
  --sh-xl: 0 40px 88px rgba(0, 0, 0, 0.55);

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

/* Traka koje u markupu nema. Bez ovoga bi tri „fundament" sekcije
   imale 88 px više prostora slijeva nego sve ostale (tačka 2). */
.sec-fundament-services,
.sec-fundament-instagram,
.sec-fundament-faq { --rail-w: 0px; }

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

/* Poppins je geometrijsko pismo i nosi težinu drugačije od zaobljenih:
   800 na naslovu je pretjerano, 700 je ista jačina bez zbijanja. */
.sec :is(h1, h2, h3, h4) {
  font-family: var(--ff-display);
  color: var(--paper);
  letter-spacing: -0.02em;
}
.sec :is(h1, h2) { font-weight: 700; }
.sec :is(h3, h4) { font-weight: 600; }
.sec p  { color: var(--paper-mu); }
/* Poppins ima niži x-height od Intera — tekst dobija malo više zraka. */
.sec :is(p, li, dd, figcaption) { line-height: 1.66; }

.sec :is(.u-label, .u-eyebrow, .hero__eyebrow, .plx__eyebrow) { color: var(--or); }
.sec :is(.u-label, .u-eyebrow)::before { background: var(--or); }
/* Neki templati boje natpis u `--c-accent-soft`, a to je kod nas
   providna podloga, ne tekst — ovdje se vraća na punu narandžastu. */
.sec .u-dark :is(.u-label, .u-eyebrow) { color: var(--or); }
.sec .u-dark :is(.u-label, .u-eyebrow)::before { background: var(--or); }

.sec .u-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   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, .u-btn--white) {
  --btn-bg: var(--or);
  --btn-fg: var(--ink);
  --btn-bd: var(--or);
  box-shadow: 0 10px 26px rgba(249, 164, 32, 0.20);
}
.sec :is(.u-btn--primary, .u-btn--solid, .u-btn--accent, .u-btn--white):hover {
  --btn-bg: var(--or-lt);
  --btn-bd: var(--or-lt);
  box-shadow: 0 14px 34px rgba(249, 164, 32, 0.28);
}
.sec :is(.u-btn--ghost, .u-btn--line) {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: var(--or-line-2);
  box-shadow: none;
}
.sec :is(.u-btn--ghost, .u-btn--line):hover {
  --btn-bg: var(--or-soft);
  --btn-bd: var(--or);
  --btn-fg: var(--or-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(--or); 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: 80;
  background: rgba(27, 37, 47, 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(27, 37, 47, 0.96);
  border-bottom-color: var(--or-line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}

.sec-aperta-header .brand__mark {
  width: 30px;
  height: 34px;
  color: var(--or);
}
.sec-aperta-header .brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.sec-aperta-header .brand__tx strong {
  color: var(--paper);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.sec-aperta-header .brand__tx small { color: var(--paper-mu); letter-spacing: 0.08em; }

.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(--or-lt); border-bottom-color: var(--or); }

.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(--or-line-2);
  box-shadow: none;
}
.sec-aperta-header .head-wa:hover { --btn-bg: var(--or-soft); --btn-bd: var(--or); --btn-fg: var(--or-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(--or-line-2); color: var(--paper); }
.sec-aperta-header .burger:hover { border-color: var(--or); color: var(--or-lt); }

/* meni na telefonu — nikad preko dna ekrana */
.sec-aperta-header .menu {
  background: rgba(22, 32, 42, 0.985);
  border-top: 1px solid var(--or-line);
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 26px 46px rgba(0, 0, 0, 0.55);
}
.sec-aperta-header .menu a { color: var(--paper); border-bottom-color: rgba(244, 247, 250, 0.10); }
.sec-aperta-header .menu a:hover { color: var(--or-lt); }
.sec-aperta-header .menu li:last-child a { color: var(--or); }

.sec-aperta-header .mobile-bar__i--call { background: var(--or); 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.55); }

/* ------------------------------------------------------------
   6. HERO — prozirna fotografija stomatologa, uklopljena u podlogu
   (tačka 4)
   ------------------------------------------------------------ */

.sec-haven-hero .hero {
  min-height: min(calc(100svh - var(--head-h)), 900px);
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(56px, 8vw, 110px);
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(249, 164, 32, 0.16) 0%, transparent 58%),
    radial-gradient(90% 70% at 12% 90%, rgba(46, 61, 75, 0.85) 0%, transparent 62%),
    linear-gradient(160deg, #22303D 0%, var(--ink) 52%, var(--ink-3) 100%);
}

/* Fotografija je izrezana (bez pozadine) pa NE ide preko cijele
   širine: stoji desno, u punoj visini, a iza nje je topli krug koji
   je spaja sa podlogom. */
.sec-haven-hero .hero__media {
  background:
    radial-gradient(46% 42% at 74% 46%, rgba(249, 164, 32, 0.26) 0%, rgba(249, 164, 32, 0.06) 46%, transparent 72%);
}
.sec-haven-hero .hero__media :is(img, video) {
  object-fit: contain;
  object-position: 88% 100%;
  animation: none;
  transform: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
  max-height: 100%;
}

/* Zatamnjenje ide onoliko koliko treba da se tekst čita — gustina je
   u gradijentu ISPOD samog teksta, ne preko cijele fotografije. */
.sec-haven-hero .hero__scrim {
  background:
    linear-gradient(100deg, rgba(27, 37, 47, 0.95) 0%, rgba(27, 37, 47, 0.88) 34%, rgba(27, 37, 47, 0.28) 60%, transparent 78%),
    linear-gradient(180deg, rgba(27, 37, 47, 0.55) 0%, transparent 22%);
}

.sec-haven-hero .hero__copy { max-width: 34rem; }
.sec-haven-hero .hero__eyebrow {
  color: var(--or);
  gap: 10px;
}
.sec-haven-hero .hero__eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--or);
  border-radius: 2px;
}
.sec-haven-hero .hero h1 {
  color: #fff;
  max-width: 15ch;
  font-size: clamp(2.35rem, 4.6vw + 1rem, 4rem);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.sec-haven-hero .hero__lead {
  color: var(--paper-2);
  max-width: 40ch;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* Srednje širine: fotografija i tekst se dodiruju, pa se figura
   povlači udesno (padding sužava okvir slike, raspored se ne dira),
   a zastor ispod teksta postaje gušći. */
@media (min-width: 641px) and (max-width: 1279px) {
  .sec-haven-hero .hero { min-height: min(calc(100svh - var(--head-h)), 760px); }
  .sec-haven-hero .hero__media { padding-left: 24%; }
  .sec-haven-hero .hero__media :is(img, video) { object-position: 100% 100%; }
  .sec-haven-hero .hero__scrim {
    background:
      linear-gradient(100deg, rgba(27, 37, 47, 0.97) 0%, rgba(27, 37, 47, 0.93) 44%, rgba(27, 37, 47, 0.48) 72%, transparent 92%),
      linear-gradient(180deg, rgba(27, 37, 47, 0.55) 0%, transparent 24%);
  }
  .sec-haven-hero .hero__copy { max-width: 28rem; }
  .sec-haven-hero .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3rem); }
}

/* ------------------------------------------------------------
   7. VIDEO U POZADINI — zajednička mehanika (tačke 5, 7, 10)
   `.has-bgvideo` je NAŠA klasa, ne sekcijska: raspored sekcije
   ostaje netaknut, a video dobija okvir u kojem stoji.
   ------------------------------------------------------------ */

.sec .has-bgvideo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sec .bgv {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sec .bgv-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* ------------------------------------------------------------
   8. USLUGE — posljednja kartica ima video u pozadini (tačka 5)
   ------------------------------------------------------------ */

.sec-fundament-services .svcs { background: var(--ink); }
.sec-fundament-services .svcs__intro { color: var(--paper-mu); border-left-color: var(--or); }
@media (max-width: 1000px) {
  .sec-fundament-services .svcs__intro { border-top-color: var(--or); }
}

.sec-fundament-services .svc {
  background: var(--card);
  border-color: rgba(244, 247, 250, 0.10);
}
.sec-fundament-services .svc:hover {
  border-color: var(--or-line-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.sec-fundament-services .svc__ic { border-color: var(--or-line-2); color: var(--or); }
.sec-fundament-services .svc:hover .svc__ic { background: var(--or); border-color: var(--or); color: var(--ink); }
.sec-fundament-services .svc__meta span { color: var(--paper-2); }
.sec-fundament-services .svc__meta span::before { background: var(--or); }
.sec-fundament-services .svc__meta span:last-child { color: var(--or-lt); }

/* Kartica sa videom: podloga je tamna i gušća da tekst ostane čitljiv. */
.sec-fundament-services .svc--accent {
  background: var(--ink-3);
  border-color: var(--or-line-2);
}
.sec-fundament-services .svc--accent .bgv { object-position: 66% 22%; }
/* Zatamnjenje ide onoliko koliko treba da se tekst čita: gušće lijevo,
   gdje tekst stoji, rjeđe desno, gdje se snimak i vidi. */
.sec-fundament-services .svc--accent .bgv-veil {
  background:
    linear-gradient(96deg,
      rgba(14, 21, 28, 0.90) 0%,
      rgba(14, 21, 28, 0.84) 40%,
      rgba(14, 21, 28, 0.58) 72%,
      rgba(14, 21, 28, 0.40) 100%);
}
.sec-fundament-services .svc--accent h3 { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); }
.sec-fundament-services .svc--accent .svc__body > p { color: #E8EEF4; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); }
.sec-fundament-services .svc--accent .svc__ic { border-color: var(--or); color: var(--or); background: rgba(16, 24, 32, 0.55); }
.sec-fundament-services .svc--accent:hover .svc__ic { background: var(--or); border-color: var(--or); color: var(--ink); }
.sec-fundament-services .svc--accent .svc__meta span { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }
.sec-fundament-services .svc--accent .svc__meta span:last-child { color: var(--or-lt); }
.sec-fundament-services .svc--accent:hover { border-color: var(--or); }

/* ------------------------------------------------------------
   9. RECENZIJE — jedna po redu, sa automatskim smjenjivanjem
   (tačka 6). `.rev` ostaje kartica iz sekcije; mijenja se samo
   posuda oko nje, i to našim klasama.
   ------------------------------------------------------------ */

.sec-meridian-referenzen .revs { background: var(--ink-2); }

.sec-meridian-referenzen .revs__display {
  background: var(--card);
  border-color: rgba(244, 247, 250, 0.10);
}
.sec-meridian-referenzen .revs__score strong { color: var(--or); }
.sec-meridian-referenzen .revs__score p { color: var(--paper-mu); }
.sec-meridian-referenzen .u-stars svg { color: var(--or); }

.sec-meridian-referenzen .revs__act .u-btn { width: 100%; min-height: 52px; }
.sec-meridian-referenzen .revs__act-note {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--paper-mu);
  text-align: center;
}

.sec-meridian-referenzen .rvw { margin-top: clamp(20px, 2.4vw, 32px); }
.sec-meridian-referenzen .rvw__vp { overflow: hidden; }
.sec-meridian-referenzen .rvw__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.sec-meridian-referenzen .rvw__slide {
  flex: 0 0 100%;
  max-width: 100%;
  min-height: 100%;
}
.sec-meridian-referenzen .rvw .rev {
  background: var(--card);
  border-color: rgba(244, 247, 250, 0.10);
  padding: clamp(26px, 3.4vw, 46px);
  gap: 18px;
}
.sec-meridian-referenzen .rvw .rev:hover { transform: none; box-shadow: none; }
.sec-meridian-referenzen .rev__av { background: var(--or-soft); color: var(--or); }
.sec-meridian-referenzen .rev__who strong { color: var(--paper); font-size: var(--fs-lg); }
.sec-meridian-referenzen .rev__tx {
  color: var(--paper-2);
  font-size: clamp(1.02rem, 0.7vw + 0.9rem, 1.3rem);
  line-height: 1.7;
}
.sec-meridian-referenzen .rvw .rev__tx::before {
  content: "„";
  display: block;
  color: var(--or);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 0.62;
  margin-bottom: 8px;
}

.sec-meridian-referenzen .rvw__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}
.sec-meridian-referenzen .rvw__nav {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid var(--or-line-2);
  color: var(--paper);
  background: transparent;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.sec-meridian-referenzen .rvw__nav:hover { background: var(--or); border-color: var(--or); color: var(--ink); }
.sec-meridian-referenzen .rvw__nav svg { width: 20px; height: 20px; }

.sec-meridian-referenzen .rvw__dots { display: flex; gap: 9px; }
.sec-meridian-referenzen .rvw__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 247, 250, 0.26);
  cursor: pointer;
  transition: background-color 220ms, width 220ms;
}
.sec-meridian-referenzen .rvw__dot.is-on { background: var(--or); width: 26px; }

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

.sec-calm-parallax .plx { background: var(--ink-3); }
.sec-calm-parallax .plx__bg { background: var(--ink-3); }
.sec-calm-parallax .plx__bg .bgv { object-position: 50% 26%; }
/* Zatamnjenje ide onoliko koliko treba da tekst bude čitljiv:
   sredina ostaje najsvjetlija, gustina je uz ivice i pod tekstom. */
.sec-calm-parallax .plx__veil {
  background:
    radial-gradient(84% 104% at 50% 44%, rgba(14, 21, 28, 0.42) 0%, rgba(14, 21, 28, 0.80) 100%),
    linear-gradient(180deg, rgba(14, 21, 28, 0.70) 0%, rgba(14, 21, 28, 0.26) 40%, rgba(14, 21, 28, 0.74) 100%);
}
/* Zakrivljene ivice se boje u susjednu sekciju, ne u svoju:
   gore su recenzije (ink-2), dolje je „O nama" (ink). */
.sec-calm-parallax .plx__edge--top path    { fill: var(--ink-2); }
.sec-calm-parallax .plx__edge--bottom path { fill: var(--ink); }

.sec-calm-parallax .plx__eyebrow {
  border-color: var(--or-line-2);
  background: rgba(249, 164, 32, 0.10);
  color: var(--or-lt);
}
.sec-calm-parallax .plx__title { color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); }
.sec-calm-parallax .plx__lead  { color: var(--paper-2); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }

.sec-calm-parallax .plx__stats {
  background: rgba(16, 24, 32, 0.62);
  border-color: var(--or-line);
}
.sec-calm-parallax .plx__stats li { border-right-color: rgba(244, 247, 250, 0.14); }
.sec-calm-parallax .plx__num   { color: var(--or); }
.sec-calm-parallax .plx__label { color: var(--paper-2); }

/* ------------------------------------------------------------
   11. O NAMA
   ------------------------------------------------------------ */

.sec-housecall-about .abt { background: var(--ink); }
.sec-housecall-about .abt__copy h2::after { background: var(--or); width: 64px; height: 2px; }
.sec-housecall-about .abt__copy p { color: var(--paper-mu); }
.sec-housecall-about .abt__copy p strong { color: var(--paper); font-weight: 700; }
/* Okvir oko trake nestaje: svaka kartica je sada zasebna, sa svojim
   zaobljenjem i razmakom između (traženo). */
.sec-housecall-about .abt__facts {
  background: transparent;
  border: 0;
  gap: 12px;
}
.sec-housecall-about .abt__facts li {
  background: var(--card);
  border: 1px solid rgba(244, 247, 250, 0.10);
  border-radius: 10px;
  padding: 16px 18px;
  transition: border-color var(--t-base) var(--ease);
}
.sec-housecall-about .abt__facts li:hover { border-color: var(--or-line-2); }
.sec-housecall-about .abt__facts strong { color: var(--or); }
.sec-housecall-about .abt__facts span   { color: var(--paper-mu); }

/* Fotografija je izrezana (bez pozadine): okvir joj daje podlogu u
   boji brenda i topli krug iza figure, a slika stoji cijela u njemu. */
.sec-housecall-about .abt__media--cutout {
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(58% 46% at 52% 40%, rgba(249, 164, 32, 0.22) 0%, rgba(249, 164, 32, 0.05) 46%, transparent 72%),
    linear-gradient(165deg, #26333F 0%, var(--ink) 58%, var(--ink-3) 100%);
}
.sec-housecall-about .abt__media--cutout :is(img, video) {
  aspect-ratio: 1348 / 1700;
  object-fit: contain;
  object-position: 50% 100%;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.45));
}

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

.sec-quiet-hours-results .res { background: var(--ink-2); }

.sec-quiet-hours-results .res__head--wide h2,
.sec-quiet-hours-results .res__head--wide p {
  max-width: none;
  width: 100%;
}
.sec-quiet-hours-results .res__head--wide h2 {
  font-size: clamp(2rem, 3.2vw + 1.1rem, 3.25rem);
}
.sec-quiet-hours-results .res__head--wide p {
  margin-top: 18px;
  font-size: clamp(1.02rem, 0.5vw + 0.92rem, 1.22rem);
  color: var(--paper-mu);
}

.sec-quiet-hours-results .case {
  background: var(--card);
  border-color: rgba(244, 247, 250, 0.10);
}
.sec-quiet-hours-results .case__pair :is(img, video) {
  aspect-ratio: 900 / 491;
  background: var(--card-2);
}
.sec-quiet-hours-results .case__pair figcaption { color: var(--paper-mu); }
.sec-quiet-hours-results .case__tag { background: rgba(244, 247, 250, 0.12); color: var(--paper); }
.sec-quiet-hours-results .case__tag--a { background: var(--or); color: var(--ink); }

/* ------------------------------------------------------------
   13. GALERIJA — slika u modalu, naprijed i nazad (tačka 9)
   ------------------------------------------------------------ */

.sec-fundament-instagram .ig { background: var(--ink); }
.sec-fundament-instagram .ig__profile { background: var(--card); border-color: rgba(244, 247, 250, 0.10); }
.sec-fundament-instagram .ig__profile:hover { border-color: var(--or-line-2); }
.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); aspect-ratio: 4 / 5; }
.sec-fundament-instagram .reel__link::after {
  background: linear-gradient(180deg, transparent, rgba(16, 24, 32, 0.92));
}
.sec-fundament-instagram .reel__play {
  background: rgba(27, 37, 47, 0.86);
  border: 1px solid var(--or-line-2);
}
.sec-fundament-instagram .reel__play::before {
  /* strelica „uvećaj" umjesto trougla — u galeriji stoje slike, ne video */
  content: "";
  width: 16px; height: 16px;
  margin: 0;
  border: 0;
  border-top: 2px solid var(--or);
  border-right: 2px solid var(--or);
  transform: rotate(-45deg);
}
.sec-fundament-instagram .reel__link:hover .reel__play { background: var(--or); }
.sec-fundament-instagram .reel__link:hover .reel__play::before { border-color: var(--ink); }
.sec-fundament-instagram .reel__meta strong { color: #fff; }
.sec-fundament-instagram .reel__meta small  { color: var(--or-lt); }

.sec-fundament-instagram .gbox { position: fixed; inset: 0; z-index: 200; }
.sec-fundament-instagram .gbox[hidden] { display: none; }
.sec-fundament-instagram .gbox__scrim {
  position: absolute; inset: 0;
  border: 0; padding: 0;
  background: rgba(8, 12, 17, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 260ms var(--ease);
  cursor: default;
}
.sec-fundament-instagram .gbox.is-open .gbox__scrim { opacity: 1; }

.sec-fundament-instagram .gbox__panel {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 1;
  width: min(880px, 92vw);
  transform: translate(-50%, -46%) scale(0.97);
  opacity: 0;
  transition: transform 320ms var(--ease-out), opacity 240ms var(--ease);
}
.sec-fundament-instagram .gbox.is-open .gbox__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.sec-fundament-instagram .gbox__fig { margin: 0; }
.sec-fundament-instagram .gbox__fig img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 74vh;
  margin-inline: auto;
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.sec-fundament-instagram .gbox__fig figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 14px;
  color: var(--paper-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.sec-fundament-instagram .gbox__fig figcaption small { color: var(--or); font-weight: 700; }

.sec-fundament-instagram .gbox__close {
  position: absolute;
  top: -20px; right: -8px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--or);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.sec-fundament-instagram .gbox__close span { position: relative; width: 16px; height: 16px; }
.sec-fundament-instagram .gbox__close span::before,
.sec-fundament-instagram .gbox__close span::after {
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
}
.sec-fundament-instagram .gbox__close span::before { transform: rotate(45deg); }
.sec-fundament-instagram .gbox__close span::after  { transform: rotate(-45deg); }

.sec-fundament-instagram .gbox__nav {
  position: absolute;
  top: calc(50% - 30px);
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--or-line-2);
  border-radius: 999px;
  background: rgba(27, 37, 47, 0.86);
  color: var(--paper);
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.sec-fundament-instagram .gbox__nav:hover { background: var(--or); border-color: var(--or); color: var(--ink); }
.sec-fundament-instagram .gbox__nav svg { width: 22px; height: 22px; }
.sec-fundament-instagram .gbox__nav--prev { left: -26px; }
.sec-fundament-instagram .gbox__nav--next { right: -26px; }
/* na posljednjoj slici „naprijed" vodi na Instagram — i to se vidi */
.sec-fundament-instagram .gbox__nav--next.is-social {
  background: var(--or);
  border-color: var(--or);
  color: var(--ink);
}
.sec-fundament-instagram .gbox__hint {
  position: absolute;
  right: 0; bottom: -34px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--or);
}
.sec-fundament-instagram .gbox__hint[hidden] { display: none; }

@media (max-width: 820px) {
  .sec-fundament-instagram .gbox__nav--prev { left: 6px; }
  .sec-fundament-instagram .gbox__nav--next { right: 6px; }
  .sec-fundament-instagram .gbox__close { top: -22px; right: 0; }
  .sec-fundament-instagram .gbox__hint { position: static; margin-top: 10px; }
}

/* ------------------------------------------------------------
   14. PITANJA
   ------------------------------------------------------------ */

.sec-fundament-faq .faq { background: var(--ink-2); }
.sec-fundament-faq .faq__note { color: var(--paper-mu); }
.sec-fundament-faq .faq__list { border-top-color: rgba(244, 247, 250, 0.12); }
.sec-fundament-faq .qa { border-bottom-color: rgba(244, 247, 250, 0.12); }
.sec-fundament-faq .qa__seal { border-color: var(--or-line-2); color: var(--paper-mu); }
.sec-fundament-faq .qa__q button[aria-expanded="true"] .qa__seal {
  background: var(--or); border-color: var(--or); color: var(--ink);
}
.sec-fundament-faq .qa__t { color: var(--paper); }
.sec-fundament-faq .qa__q button:hover .qa__t { color: var(--or-lt); }
.sec-fundament-faq .qa__in p { color: var(--paper-mu); }

/* ------------------------------------------------------------
   15. KONTAKT — desna polovina ima video u pozadini (tačka 10)
   ------------------------------------------------------------ */

.sec-meridian-cta .cta { background: var(--ink); }
.sec-meridian-cta .cta__panel { border: 1px solid var(--or-line); }

/* Video stoji u LIJEVOJ polovini (traženo), a zastor je gušći tamo
   gdje tekst stoji — snimak se vidi, tekst se čita. */
.sec-meridian-cta .cta__ink { background: var(--ink-3); }
.sec-meridian-cta .cta__ink .bgv { object-position: 40% 50%; }
.sec-meridian-cta .cta__ink .bgv-veil {
  background:
    linear-gradient(160deg, rgba(20, 29, 38, 0.62) 0%, rgba(16, 24, 32, 0.86) 62%, rgba(16, 24, 32, 0.92) 100%),
    radial-gradient(72% 70% at 24% 16%, rgba(249, 164, 32, 0.16), transparent 70%);
}
.sec-meridian-cta .cta__ink h2 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); }
.sec-meridian-cta .cta__ink > p { color: var(--paper-2); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
.sec-meridian-cta .cta__facts li { color: var(--paper-2); }
.sec-meridian-cta .cta__facts svg { color: var(--or); }
.sec-meridian-cta .cta__facts { border-top-color: rgba(244, 247, 250, 0.16); }
.sec-meridian-cta .cta__status { color: var(--or-lt); }
.sec-meridian-cta .cta__dot { background: var(--or); box-shadow: 0 0 0 4px rgba(249, 164, 32, 0.24); }
.sec-meridian-cta .cta__status.is-closed { color: var(--paper-mu); }
.sec-meridian-cta .cta__status.is-closed .cta__dot {
  background: var(--paper-mu);
  box-shadow: 0 0 0 4px rgba(244, 247, 250, 0.12);
}

/* desna polovina: mirna podloga, na njoj dva reda za kontakt */
.sec-meridian-cta .cta__paper { background: var(--ink-2); }

.sec-meridian-cta .crow {
  background: rgba(16, 24, 32, 0.72);
  border-color: var(--or-line);
}
.sec-meridian-cta .crow:hover { border-color: var(--or); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); }
.sec-meridian-cta .crow--tel .crow__ic { background: var(--or); color: var(--ink); }
.sec-meridian-cta .crow--wa  .crow__ic { background: var(--wa); color: #fff; }
.sec-meridian-cta .crow__tx small  { color: var(--or-lt); }
.sec-meridian-cta .crow__tx strong { color: #fff; }
.sec-meridian-cta .crow__tx span   { color: var(--paper-mu); }
.sec-meridian-cta .crow__go { background: rgba(244, 247, 250, 0.10); color: var(--paper); }
.sec-meridian-cta .cta__fine { color: var(--paper-mu); font-size: var(--fs-xs); }

/* ------------------------------------------------------------
   16. PODNOŽJE — jednostavno: ko si, gdje si, kako do tebe
   ------------------------------------------------------------ */

.sec-terra-footer .ftr { background: var(--ink-3); }
.sec-terra-footer .ftr__word { border-bottom-color: rgba(244, 247, 250, 0.12); }
.sec-terra-footer .ftr__logo { width: clamp(230px, 32vw, 330px); height: auto; display: block; }
.sec-terra-footer .ftr__word small { color: var(--or); margin-top: 14px; }

.sec-terra-footer .ftr__col h3 { color: var(--or); letter-spacing: 0.14em; }
.sec-terra-footer .ftr__contact address { color: var(--paper-2); }
.sec-terra-footer .ftr__dir { color: var(--or); }
.sec-terra-footer .ftr__dir:hover { color: var(--or-lt); }
.sec-terra-footer .ftr__hours { color: var(--paper-2); }
.sec-terra-footer .ftr__links a { color: var(--paper-2); }
.sec-terra-footer .ftr__links a:hover { color: var(--or); }

/* Spisak veza ide po DVIJE u redu na svakoj širini — inače se rep
   spiska spusti u dugačak stubac, a desna polovina ostane prazna. */
.sec-terra-footer .ftr__links--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}
.sec-terra-footer .ftr__bar { border-top-color: rgba(244, 247, 250, 0.12); }
.sec-terra-footer .ftr__bar p { color: var(--paper-mu); }
.sec-terra-footer .ftr__social a { color: var(--paper-2); border-color: rgba(244, 247, 250, 0.16); }
.sec-terra-footer .ftr__social a:hover { color: var(--or); border-color: var(--or); }
.sec-terra-footer .ftr__top-btn { color: var(--paper-2); border-color: var(--or-line-2); }
.sec-terra-footer .ftr__top-btn:hover { color: var(--or); border-color: var(--or); }

/* ------------------------------------------------------------
   17. TELEFON — mjera, ne ispravka (tačka 11)
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  :root { --head-h: 64px; }
}

@media (max-width: 640px) {
  /* razmak sekcija 45 px, kontejner 80 % širine bez bočnog paddinga */
  .sec-aperta-header,
  .sec-haven-hero,
  .sec-fundament-services,
  .sec-meridian-referenzen,
  .sec-calm-parallax,
  .sec-housecall-about,
  .sec-quiet-hours-results,
  .sec-fundament-instagram,
  .sec-fundament-faq,
  .sec-meridian-cta,
  .sec-terra-footer {
    --section-y: 45px;
    --gutter: 0px;
    --sec-y: 45px;
  }
  .sec .u-container {
    width: 80%;
    max-width: 80%;
    padding-left: 0;
    padding-right: 0;
    margin-inline: auto;
  }

  /* ---- zaglavlje: mora ostati upotrebljivo (tačka 11) ---- */
  .sec-aperta-header .site-head__inner { gap: 10px; }
  .sec-aperta-header .brand__tx { display: none; }
  .sec-aperta-header .head-wa__tx { display: none; }
  .sec-aperta-header .head-wa { padding: 11px 13px; }
  .sec-aperta-header .head-cta { padding: 11px 14px; }
  .sec-aperta-header .brand__mark { width: 32px; height: 37px; }
  .sec-aperta-header .menu ul { width: 80%; max-width: 80%; }
  /* traka na dnu ne smije pokriti tekst ni dugme */
  .sec-aperta-header .mobile-bar { left: 14px; right: 14px; }

  /* ---- hero: fotografija gore, tekst ispod nje, bez zatamnjenja
     preko fotografije (UPUTA, „Na telefonu tekst silazi ISPOD slike") ---- */
  .sec-haven-hero .hero {
    min-height: 0;
    padding-top: calc(40vh + 20px);
    padding-bottom: 45px;
    background:
      radial-gradient(80% 30% at 60% 12%, rgba(249, 164, 32, 0.20) 0%, transparent 62%),
      linear-gradient(180deg, #22303D 0%, var(--ink) 42%, var(--ink) 100%);
  }
  /* Fotografija dobija vlastiti blok u vrhu, u punom kadru. */
  .sec-haven-hero .hero__media { height: 42vh; background: none; }
  .sec-haven-hero .hero__media :is(img, video) {
    object-fit: contain;
    object-position: 50% 100%;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.4));
  }
  /* Slika ostaje slika: zastora preko nje nema, pun je tek ISPOD nje,
     tamo gdje počinje tekst. */
  .sec-haven-hero .hero__scrim {
    background: linear-gradient(180deg,
      transparent 0,
      transparent 36vh,
      rgba(27, 37, 47, 0.70) 40vh,
      var(--ink) 44vh,
      var(--ink) 100%);
  }
  .sec-haven-hero .hero__copy { max-width: none; }
  .sec-haven-hero .hero h1 { max-width: none; font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  .sec-haven-hero .hero__lead { font-size: 1rem; }
  /* iznad pregiba stoje naslov i JEDNO glavno dugme */
  .sec-haven-hero .hero__act { gap: 10px; }
  .sec-haven-hero .hero__act .u-btn { flex: 1 1 100%; min-height: 54px; padding: 15px 22px; font-size: 1rem; }
  .sec-haven-hero .hero__act .u-btn--ghost { min-height: 48px; font-weight: 600; }

  /* ---- ostalo ---- */
  .sec-meridian-referenzen .rvw .rev { padding: 22px 20px; }
  .sec-meridian-referenzen .revs__score strong { font-size: 3.4rem; }
  .sec-fundament-instagram .reel__link { aspect-ratio: 1 / 1; }
  .sec-terra-footer .ftr { padding-bottom: calc(45px + 78px); }
}

/* Na najužim ekranima par „prije/poslije" ide jedan ispod drugog,
   ali ostaje par — ne razdvaja se u dvije kartice. */
@media (max-width: 420px) {
  .sec-quiet-hours-results .case__pair { gap: 10px; }
}

/* Ništa se ne pomjera onome ko je tražio manje pokreta. Video se tada
   ne pokreće (site.js) i ostaje na svom posteru — ne nestaje. */
@media (prefers-reduced-motion: reduce) {
  .sec-meridian-referenzen .rvw__track { transition: none; }
  .sec-fundament-instagram .gbox__panel,
  .sec-fundament-instagram .gbox__scrim { transition: none; }
}