/* ===========================================================================
   Multidental — stil sajta.
   Ucitava se POSLIJE svih section.css i brend.css i samo ih prevezuje:
   boje, pismo, razmaci, zaobljenja. Raspored (display, grid, position,
   align, text-align) se ovdje ne dira — on ostaje u section.css.

   Paleta je iz logotipa ordinacije: tamnoplava #2F3094 i zelena #3A8373,
   produbljene do AA kontrasta. Cetiri vrijednosti brenda su u
   sekcije/tokens.css; ovdje su neutrali i vezivanje po sekciji.
   =========================================================================== */

:root {
  --head-h: 72px;

  --ink:        #16203A;
  --ink-mu:     #55606F;
  --ink-lo:     #7D8794;

  --paper:      #FFFFFF;
  --paper-alt:  #EEF3F3;
  --tint:       #E4F0ED;
  --tint-2:     #EAEBF6;

  --line:       rgba(22, 32, 58, 0.12);
  --line-2:     rgba(22, 32, 58, 0.24);

  --deep:       #2B2E86;   /* plava iz znaka */
  --deep-dk:    #1E2160;
  --deep-2:     #232766;
  --green:      #2F7263;   /* zelena iz znaka */
  --green-dk:   #22574B;

  --on-dark:    #EEF1FA;
  --on-dark-mu: rgba(238, 241, 250, 0.78);
  --line-dark:  rgba(238, 241, 250, 0.22);

  --wa:         #0E7C6F;
  --wa-dk:      #0B6357;
  --star:       #C98A22;

  --canvas:     #20245F;   /* tamna traka: pitanja i podnozje */
  --canvas-2:   #1A1D52;
  --canvas-up:  #2C3183;

  --sh-1: 0 1px 2px rgba(22, 32, 58, 0.05);
  --sh-2: 0 4px 14px -8px rgba(22, 32, 58, 0.18);
  --sh-3: 0 14px 34px -16px rgba(22, 32, 58, 0.22);
  --sh-4: 0 26px 56px -24px rgba(22, 32, 58, 0.26);
  --sh-5: 0 44px 90px -34px rgba(22, 32, 58, 0.30);
}

/* ---------- osnova ---------- */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* clip, ne hidden: hidden pravi scroll kontejner i lomi sticky zaglavlje */
  overflow-x: clip;
}

[id] { scroll-margin-top: calc(var(--head-h) + 14px); }

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

/* ---------- trake sastavljaca ---------- */

.band { background: var(--paper); }
.band[data-band="6"] { background: var(--paper-alt); }
.band[data-band="9"],
.band[data-band="10"] { background: var(--canvas); }

/* zaglavlje se lijepi kroz cijelu stranicu tek kad je LJEPLJIVA TRAKA,
   a ne sama sekcija — sekcija je visoka koliko i traka, pa sticky
   unutar nje otklizi poslije prvog ekrana */
.band[data-band="1"] {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ===========================================================================
   1. Zajednicki tokeni za sve svijetle sekcije
   =========================================================================== */

.sec-aperta-header,
.sec-haven-hero,
.sec-fundament-services,
.sec-bloom-referenzen,
.sec-sightline-about,
.sec-meridian-results,
.sec-haven-gallery {
  --ff-display: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --c-bg:          var(--paper);
  --c-bg-alt:      var(--paper-alt);
  --c-white:       #FFFFFF;
  --c-surface:     var(--tint);
  --c-ink:         var(--ink);
  --c-text:        var(--ink);
  --c-text-muted:  var(--ink-mu);
  --c-on-dark:     var(--on-dark);
  --c-on-dark-mu:  var(--on-dark-mu);
  --c-line:        var(--line);
  --c-line-strong: var(--line-2);
  --c-line-dark:   var(--line-dark);
  --c-whatsapp:    var(--wa);
  --c-whatsapp-dk: var(--wa-dk);
  --c-star:        var(--star);

  --sh-xs: var(--sh-1);
  --sh-sm: var(--sh-2);
  --sh-md: var(--sh-3);
  --sh-lg: var(--sh-4);
  --sh-xl: var(--sh-5);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-card: 16px;
  --r-card-lg: 22px;
  --r-gallery: 16px;
  --r-pill: 999px;

  --section-y: clamp(56px, 7.5vw, 104px);
  --gutter:    clamp(20px, 5vw, 40px);
  --maxw:      1180px;
  --header-h:  var(--head-h);

  --lh-tight: 1.12;
  --lh-snug:  1.24;
  --lh-body:  1.62;
  --ls-tight: -0.015em;
  --ls-label:  0.13em;

  --fs-h1: clamp(2.15rem, 3.2vw + 1.3rem, 3.6rem);
  --fs-h2: clamp(1.75rem, 2.1vw + 1.25rem, 2.75rem);
  --fs-h3: clamp(1.3rem, 0.9vw + 1.1rem, 1.7rem);
  --fs-h4: clamp(1.15rem, 0.5vw + 1.05rem, 1.35rem);
}

/* Nunito nosi tezinu 700–800 na naslovima; sa 900 postaje tvrda. */
.sec h1, .sec h2, .sec h3, .sec h4 { font-weight: 800; }
.sec .u-label,
.sec .u-kicker { font-weight: 800; }

/* ===========================================================================
   2. Zaglavlje
   =========================================================================== */

.sec-aperta-header .site-head {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
}
.sec-aperta-header .site-head.is-stuck { border-bottom-color: var(--line); }

.sec-aperta-header .brand__mark {
  width: 42px; height: 42px;
  display: block;
}
.sec-aperta-header .brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.sec-aperta-header .brand__tx strong { font-size: 1.32rem; color: var(--deep); letter-spacing: -0.01em; }
.sec-aperta-header .brand__tx small { color: var(--ink-mu); letter-spacing: 0.08em; }

.sec-aperta-header .site-head__inner { gap: 14px; }
.sec-aperta-header .site-nav ul { gap: 0; }
.sec-aperta-header .site-nav a {
  font-size: 0.95rem; font-weight: 500; color: var(--ink);
  padding: 10px 11px;
  white-space: nowrap;
}
.sec-aperta-header .site-head__act { gap: 8px; }
.sec-aperta-header .head-cta,
.sec-aperta-header .head-wa { white-space: nowrap; }
@media (max-width: 1120px) and (min-width: 981px) {
  .sec-aperta-header .site-nav a { padding: 10px 8px; font-size: 0.9rem; }
}
.sec-aperta-header .site-nav a:hover,
.sec-aperta-header .site-nav a.is-current { color: var(--deep); border-bottom-color: var(--green); }

.sec-aperta-header .head-cta {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 700;
}
.sec-aperta-header .head-cta:hover { background: var(--deep-dk); border-color: var(--deep-dk); }

.sec-aperta-header .head-wa {
  display: inline-flex; gap: 8px;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #fff;
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 700;
  border: 1px solid var(--wa);
}
.sec-aperta-header .head-wa:hover { background: var(--wa-dk); border-color: var(--wa-dk); }
.sec-aperta-header .head-wa svg { width: 18px; height: 18px; flex: none; }

.sec-aperta-header .burger { border-color: var(--line-2); color: var(--deep); border-radius: var(--r-sm); }

.sec-aperta-header .menu { background: var(--paper); border-top-color: var(--line); }
.sec-aperta-header .menu a { color: var(--ink); font-weight: 700; border-bottom-color: var(--line); }
.sec-aperta-header .menu li:last-child a { color: var(--deep); }

/* Ljepljiva traka na dnu telefona — jedino mjesto gdje je fixed u redu. */
.sec-aperta-header .mobile-bar__i { border-radius: var(--r-pill); box-shadow: var(--sh-3); font-weight: 700; }
.sec-aperta-header .mobile-bar__i--call { background: var(--deep); }
.sec-aperta-header .mobile-bar__i--wa { background: var(--wa); }

@media (max-width: 900px) {
  .sec-aperta-header .head-wa { display: none; }
}
@media (max-width: 560px) {
  .sec-aperta-header .brand__mark { width: 36px; height: 36px; }
  .sec-aperta-header .brand__tx strong { font-size: 1.15rem; }
}

/* ===========================================================================
   3. Hero
   =========================================================================== */

.sec-haven-hero .hero { padding-top: clamp(40px, 6vw, 76px); }
.sec-haven-hero .hero__media { background: var(--deep-dk); }
.sec-haven-hero .hero__media img { object-position: 62% 34%; }

.sec-haven-hero .hero__scrim {
  background:
    linear-gradient(to top,
      rgba(20, 23, 62, 0.92) 0%,
      rgba(20, 23, 62, 0.76) 30%,
      rgba(20, 23, 62, 0.34) 62%,
      rgba(20, 23, 62, 0.10) 100%),
    linear-gradient(105deg, rgba(20, 23, 62, 0.84) 0%, rgba(20, 23, 62, 0.30) 52%, rgba(20, 23, 62, 0.06) 82%);
}

.sec-haven-hero .hero__eyebrow { color: #A9DCCF; letter-spacing: 0.14em; }
.sec-haven-hero .hero h1 { max-width: 16ch; letter-spacing: -0.02em; }
.sec-haven-hero .hero__lead { color: rgba(255, 255, 255, 0.92); max-width: 46ch; }

.sec-haven-hero .u-btn { border-radius: var(--r-pill); font-weight: 700; }
.sec-haven-hero .u-btn svg { width: 19px; height: 19px; flex: none; }
.sec-haven-hero .u-btn--white { background: #fff; color: var(--deep); border-color: #fff; }
.sec-haven-hero .u-btn--white:hover { background: var(--tint); border-color: var(--tint); color: var(--deep-dk); }
.sec-haven-hero .u-btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.sec-haven-hero .u-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* --- telefon: slika je vlastiti blok, tekst silazi ISPOD nje --- */
@media (max-width: 640px) {
  .sec-haven-hero .hero {
    min-height: 0;
    /* prostor za sliku iznad + zrak */
    padding-top: calc(62vw + 20px);
    padding-bottom: 30px;
    background: var(--deep);
  }
  /* zadata visina nadjacava `bottom` iz inset:0 (over-constrained),
     pa slika dobija stvaran okvir umjesto da se rastegne preko heroja */
  .sec-haven-hero .hero__media { height: 62vw; }
  .sec-haven-hero .hero__media img {
    animation: none;
    transform: none;
    object-position: 62% 32%;
  }
  /* tekst vise nije preko slike — zatamnjenja nema */
  .sec-haven-hero .hero__scrim { background: none; }

  .sec-haven-hero .hero__copy > * + * { margin-top: 14px; }
  .sec-haven-hero .hero h1 { font-size: 1.95rem; max-width: none; }
  .sec-haven-hero .hero__lead { font-size: 1rem; line-height: 1.5; }
  .sec-haven-hero .hero__act { gap: 10px; padding-top: 4px; }
  .sec-haven-hero .hero__tel {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
  }
  .only-wide { display: none; }
}

/* ===========================================================================
   4. Usluge
   =========================================================================== */

.sec-fundament-services .svcs { background: transparent; }
.band[data-band="3"] { background: var(--paper-alt); }

/* sekcija racuna na ljepljivu bocnu traku koje u ovom rasporedu nema */
@media (min-width: 1140px) {
  .sec-fundament-services .u-container { padding-left: var(--gutter); }
}

.sec-fundament-services .svcs__intro { border-left-color: var(--green); color: var(--ink-mu); }
.sec-fundament-services .svc { border-radius: var(--r-lg); border-color: var(--line); background: #fff; }
.sec-fundament-services .svc:hover { box-shadow: var(--sh-3); border-color: rgba(43, 46, 134, 0.30); }
.sec-fundament-services .svc__ic { border-color: var(--green); color: var(--deep); }
.sec-fundament-services .svc:hover .svc__ic { background: var(--deep); border-color: var(--deep); }
.sec-fundament-services .svc h3 { color: var(--ink); }

.sec-fundament-services .svc--accent { background: var(--deep); border-color: var(--deep); }
.sec-fundament-services .svc--accent h3 { color: #fff; }
.sec-fundament-services .svc--accent .svc__body > p { color: rgba(238, 241, 250, 0.82); }
.sec-fundament-services .svc--accent .svc__ic { border-color: rgba(238, 241, 250, 0.34); color: #A9DCCF; }
.sec-fundament-services .svc--accent:hover .svc__ic { background: #A9DCCF; border-color: #A9DCCF; color: var(--deep); }
.sec-fundament-services .svc--accent:hover { box-shadow: var(--sh-4); border-color: var(--deep); }
.sec-fundament-services .svc__cta { margin-top: 14px; }
.sec-fundament-services .svc__cta a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #fff;
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none;
}
.sec-fundament-services .svc__cta a:hover { background: var(--wa-dk); }

@media (max-width: 760px) {
  .sec-fundament-services .svc__ic { width: 52px; height: 52px; }
  .sec-fundament-services .svc__ic svg { width: 24px; height: 24px; }
}

/* ===========================================================================
   5. Ocjene
   =========================================================================== */

.sec-bloom-referenzen .revs { background: transparent; }
.sec-bloom-referenzen .revs__head h2 { max-width: 18ch; }
.sec-bloom-referenzen .u-label { color: var(--green); }

.sec-bloom-referenzen .gsum {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}
.sec-bloom-referenzen .gsum__score strong { color: var(--deep); }
.sec-bloom-referenzen .u-stars { color: var(--star); }
.sec-bloom-referenzen .gsum__bar { background: var(--line); border-radius: 999px; }
.sec-bloom-referenzen .gsum__bar i { background: var(--star); border-radius: 999px; }
.sec-bloom-referenzen .gsum__link { color: var(--green); font-weight: 700; }
.sec-bloom-referenzen .gsum__link:hover { color: var(--green-dk); }

/* ===========================================================================
   6. Traka sa pozivom (parallax)
   =========================================================================== */

.sec-nordlicht-parallax {
  --ff-display: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --c-canvas:      var(--deep-2);
  --c-canvas-lt:   var(--canvas-up);
  --c-canvas-dp:   var(--canvas-2);
  --c-panel:       var(--paper);
  --c-panel-alt:   var(--paper-alt);
  --c-white:       #FFFFFF;
  --c-surface:     var(--tint);
  --c-text:        var(--ink);
  --c-text-muted:  var(--ink-mu);
  --c-on-canvas:   var(--on-dark);
  --c-on-canvas-mu: var(--on-dark-mu);
  --c-line:        var(--line);
  --c-line-strong: var(--line-2);
  --c-line-canvas: var(--line-dark);
  --c-whatsapp:    var(--wa);
  --c-star:        var(--star);

  --sh-xs: var(--sh-1); --sh-sm: var(--sh-2); --sh-md: var(--sh-3);
  --sh-lg: var(--sh-4); --sh-xl: var(--sh-5);

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --r-panel: 0px;
  --gutter: 0px;
  --maxw: 1180px;
  --header-h: var(--head-h);
  --lh-tight: 1.12; --lh-snug: 1.24; --lh-body: 1.62;
  --ls-tight: -0.015em; --ls-label: 0.13em;
  --fs-h2: clamp(1.75rem, 2.1vw + 1.25rem, 2.75rem);
}

.sec-nordlicht-parallax .plx { min-height: clamp(400px, 62vh, 620px); }
.sec-nordlicht-parallax .plx__video { object-position: 50% 38%; }

/* fotografija mora ostati fotografija: zatamnjenje ide onoliko koliko
   treba da tekst bude citljiv, a najgusce je iza samog teksta */
.sec-nordlicht-parallax .plx__veil {
  background:
    radial-gradient(52% 58% at 50% 52%, rgba(20, 23, 66, 0.88) 0%, rgba(20, 23, 66, 0.72) 60%, rgba(20, 23, 66, 0.40) 100%),
    linear-gradient(180deg, rgba(20, 23, 66, 0.46), rgba(20, 23, 66, 0.22) 45%, rgba(20, 23, 66, 0.52));
}

.sec-nordlicht-parallax .u-kicker { color: #A9DCCF; letter-spacing: 0.14em; }
.sec-nordlicht-parallax .plx__title { color: #fff; }
.sec-nordlicht-parallax .plx__lead { color: rgba(255, 255, 255, 0.9); }
.sec-nordlicht-parallax .u-btn { border-radius: var(--r-pill, 999px); font-weight: 700; }
.sec-nordlicht-parallax .u-btn--accent { background: var(--wa); border-color: var(--wa); color: #fff; }
.sec-nordlicht-parallax .u-btn--accent:hover { background: var(--wa-dk); border-color: var(--wa-dk); }
.sec-nordlicht-parallax .u-btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.sec-nordlicht-parallax .u-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

@media (max-width: 640px) {
  .sec-nordlicht-parallax .plx { min-height: 0; padding-block: 56px; }
  .sec-nordlicht-parallax .plx__title { font-size: 1.75rem; }
}

/* ===========================================================================
   7. O nama
   =========================================================================== */

.sec-sightline-about .about { background: transparent; }
.sec-sightline-about .u-label { color: var(--green); }
.sec-sightline-about .about__copy h2 { color: var(--ink); }
.sec-sightline-about .about__lead { color: var(--ink-mu); }
.sec-sightline-about .about__points svg { color: var(--green); }
.sec-sightline-about .about__points strong { color: var(--deep); }
.sec-sightline-about .u-card { border-radius: var(--r-card); }
.sec-sightline-about .u-card--lg { border-radius: var(--r-card-lg); }
.sec-sightline-about .about__media img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%; }

.sec-sightline-about .about__sign-in {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.sec-sightline-about .about__sign-in img {
  width: 64px; height: 64px;
  border-radius: 50%;
  padding: 8px;
  background: var(--tint-2);
  object-fit: contain;
}
.sec-sightline-about .about__sign-in strong { color: var(--deep); }

@media (max-width: 640px) {
  .sec-sightline-about .about__media img { aspect-ratio: 4 / 3; object-position: center 20%; }
}

/* ===========================================================================
   8. Prije i poslije
   =========================================================================== */

.band[data-band="7"] { background: var(--paper); }
.sec-meridian-results .res { background: transparent; }
.sec-meridian-results .u-label { color: var(--green); }
.sec-meridian-results .cmp { border-radius: var(--r-lg); background: var(--tint); }
.sec-meridian-results .cmp__tag--b { background: rgba(255, 255, 255, 0.94); color: var(--deep); }
.sec-meridian-results .cmp__tag--a { background: var(--green); color: #fff; }
.sec-meridian-results .cmp__grip { background: #fff; color: var(--deep); }
.sec-meridian-results .case__body h3 { color: var(--ink); }
.sec-meridian-results .case__body > p { color: var(--ink-mu); }

/* ===========================================================================
   9. Galerija
   =========================================================================== */

.band[data-band="8"] { background: var(--paper-alt); }
.sec-haven-gallery .u-section--alt { background: transparent; }
.sec-haven-gallery .u-label { color: var(--green); }
.sec-haven-gallery .gslide__btn { border-radius: var(--r-gallery); }
.sec-haven-gallery .gslide img { border-radius: var(--r-gallery); }
.sec-haven-gallery .gslide__cap { color: var(--ink-mu); }
.sec-haven-gallery .gnav { border-color: var(--line-2); color: var(--deep); }
.sec-haven-gallery .gnav:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.sec-haven-gallery .gal__count { color: var(--ink-mu); }
.sec-haven-gallery .lbox__scrim { background: rgba(16, 19, 54, 0.82); }

/* ===========================================================================
   10. Pitanja — tamna traka
   =========================================================================== */

.sec-radix-faq {
  --ff-display: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --c-canvas:       var(--canvas);
  --c-canvas-2:     var(--canvas-2);
  --c-surface:      var(--canvas-up);
  --c-surface-2:    #363BA0;
  --c-white:        #FFFFFF;
  --c-sand:         #A9DCCF;
  --c-light:        var(--paper-alt);
  --c-ink:          var(--ink);
  --c-ink-mu:       var(--ink-mu);
  --c-on-canvas:    var(--on-dark);
  --c-on-canvas-mu: rgba(238, 241, 250, 0.78);
  --c-on-canvas-lo: rgba(238, 241, 250, 0.55);
  --c-line:         rgba(238, 241, 250, 0.18);
  --c-line-strong:  rgba(238, 241, 250, 0.32);
  --c-line-dark:    rgba(22, 32, 58, 0.14);
  --c-whatsapp:     var(--wa);
  --c-star:         var(--star);

  --sh-xs: 0 1px 2px rgba(8, 10, 34, 0.4);
  --sh-sm: 0 6px 18px -8px rgba(8, 10, 34, 0.6);
  --sh-md: 0 18px 40px -18px rgba(8, 10, 34, 0.7);
  --sh-lg: 0 30px 64px -24px rgba(8, 10, 34, 0.75);
  --sh-xl: 0 48px 96px -32px rgba(8, 10, 34, 0.8);

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 34px;
  --section-y: clamp(56px, 7.5vw, 104px);
  --gutter: clamp(20px, 5vw, 40px);
  --maxw: 1180px;
  --header-h: var(--head-h);
  --lh-tight: 1.12; --lh-snug: 1.24; --lh-body: 1.62;
  --ls-tight: -0.015em; --ls-label: 0.13em;
  --fs-h2: clamp(1.75rem, 2.1vw + 1.25rem, 2.75rem);
}

.sec-radix-faq .u-section--alt { background: transparent; }
.sec-radix-faq .u-label { color: #A9DCCF; }
.sec-radix-faq .faq__head h2 { color: #fff; }
.sec-radix-faq .qa { border-color: rgba(238, 241, 250, 0.18); }
.sec-radix-faq .qa__t { color: #fff; }
.sec-radix-faq .faq__more { color: rgba(238, 241, 250, 0.82); }
.sec-radix-faq .faq__more a,
.sec-radix-faq .qa__in a { color: #A9DCCF; text-underline-offset: 3px; }
.sec-radix-faq .faq__more a:hover,
.sec-radix-faq .qa__in a:hover { color: #fff; }

/* ===========================================================================
   11. Podnozje
   =========================================================================== */

.sec-calm-footer {
  --ff-display: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --c-bg:            var(--canvas);
  --c-bg-alt:        var(--canvas);
  --c-surface:       var(--tint);
  --c-surface-soft:  var(--paper-alt);
  --c-white:         #FFFFFF;
  --c-text:          var(--ink);
  --c-text-muted:    var(--ink-mu);
  --c-text-invert:   #FFFFFF;
  --c-border:        rgba(238, 241, 250, 0.16);
  --c-border-strong: rgba(238, 241, 250, 0.3);
  --c-whatsapp:      var(--wa);
  --c-whatsapp-vivid:#25D366;
  --c-star:          var(--star);

  --sh-xs: var(--sh-1); --sh-sm: var(--sh-2); --sh-md: var(--sh-3);
  --sh-lg: var(--sh-4); --sh-xl: var(--sh-5);
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 34px;
  --section-y: clamp(56px, 7.5vw, 104px);
  --gutter: clamp(20px, 5vw, 40px);
  --maxw: 1180px;
  --header-h: var(--head-h);
  --lh-tight: 1.12; --lh-snug: 1.28; --lh-body: 1.62;
  --ls-tight: -0.015em; --ls-label: 0.12em;
}

.sec-calm-footer .ftr {
  padding-top: clamp(64px, 8vw, 104px);
  background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-2) 100%);
  color: rgba(238, 241, 250, 0.8);
}
/* traka iznad podnozja je takodje tamna — luk se ne smije vidjeti */
.sec-calm-footer .ftr__edge { display: none; }

.sec-calm-footer .ftr__logo-mark {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
}
.sec-calm-footer .ftr__logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.sec-calm-footer .ftr__logo-text strong { color: #fff; }
.sec-calm-footer .ftr__logo-text small { color: rgba(238, 241, 250, 0.7); }
.sec-calm-footer .ftr__blurb { color: rgba(238, 241, 250, 0.78); }

.sec-calm-footer .ftr__h { color: #fff; }
.sec-calm-footer .ftr__col a { color: rgba(238, 241, 250, 0.8); }
.sec-calm-footer .ftr__col a:hover { color: #fff; }
.sec-calm-footer .ftr__link--strong { color: #fff; font-weight: 700; }
.sec-calm-footer .ftr__wa { color: #A9DCCF; font-weight: 600; }
.sec-calm-footer .ftr__wa svg,
.sec-calm-footer .ftr__map svg { width: 18px; height: 18px; flex: none; }
.sec-calm-footer .ftr__hours { width: 100%; }
.sec-calm-footer .ftr__hours th,
.sec-calm-footer .ftr__hours td {
  color: rgba(238, 241, 250, 0.86);
  white-space: nowrap;
  font-size: var(--fs-sm);
  padding-block: 4px;
}
.sec-calm-footer .ftr__hours td { padding-left: 12px; }
.sec-calm-footer .ftr__social a { border-color: rgba(238, 241, 250, 0.24); color: rgba(238, 241, 250, 0.86); }
.sec-calm-footer .ftr__social a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sec-calm-footer .ftr__bar { border-top: 1px solid rgba(238, 241, 250, 0.14); }
.sec-calm-footer .ftr__top { background: var(--green); color: #fff; box-shadow: var(--sh-3); }
.sec-calm-footer .ftr__top:hover { background: var(--green-dk); }

/* ===========================================================================
   12. Fokus, otkrivanje, sitnice
   =========================================================================== */

.sec a:focus-visible,
.sec button:focus-visible,
.sec [tabindex]:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
.sec-radix-faq a:focus-visible,
.sec-radix-faq button:focus-visible,
.sec-calm-footer a:focus-visible,
.sec-calm-footer button:focus-visible,
.sec-haven-hero a:focus-visible {
  outline-color: #A9DCCF;
}

/* Sve sto se otkriva mora biti vidljivo i bez skripte. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sec [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Ljepljiva traka (poziv + WhatsApp) lebdi nad dnom stranice — podnozje
   dobija prostor da ga ne pokrije. */
@media (max-width: 900px) {
  .band[data-band="10"] { padding-bottom: 84px; }
  .sec-calm-footer .ftr__top { display: none; }
}

/* ===========================================================================
   13. Dodirne mete — nista ispod 44 px, ni u podnozju ni u odgovorima
   =========================================================================== */

.sec-calm-footer .ftr__col ul a { padding-block: 10px; }
.sec-calm-footer .ftr__link { padding-block: 8px; }
.sec-calm-footer .ftr__logo { padding-block: 2px; }

.sec-bloom-referenzen .gsum__link { min-height: 44px; padding-block: 10px; }

/* Veze unutar recenice se ne mogu razvuci na 44 px a da red ostane red;
   dobijaju onoliko koliko stane (WCAG 2.5.8, 24 px). */
.sec-radix-faq .qa__in a,
.sec-radix-faq .faq__more a { padding-block: 4px; }