/* =====================================================================
   Dental Studio Castra — stil sajta.

   Učitava se POSLIJE svih `section.css` i `brend.css`, pa nadjačava
   njihove tokene. Raspored se ne dira: nigdje se ne piše `display`,
   `grid-template-*`, `position`, `flex-direction`, `order`, `inset`,
   `align-*`, `justify-*` ni `text-align` nad klasama sekcija.

   Paleta je iz logotipa firme: ljubičasta #663696 i zelena #92CA6C.
   Ljubičasta nosi svijetle podloge (8,3:1 na bijeloj), zelena tamne
   (8,5:1 na #2A1640) — zato se koriste naizmjenično, po podlozi.
   ===================================================================== */

:root {
  --brand-purple: #663696;
  --brand-purple-dk: #512A77;
  --brand-purple-deep: #2A1640;
  --brand-purple-deeper: #1E0F2E;
  --brand-green: #92CA6C;
  --brand-green-lt: #A8DA85;
  --brand-green-dk: #478124;
  --brand-green-dker: #3A6B1C;

  --ink: #2C2333;
  --ink-mu: #655B70;
  --tint: #F8F5FB;
  --tint-2: #F1EAF8;
  --line: rgba(42, 22, 64, 0.13);
  --line-2: rgba(42, 22, 64, 0.24);
  --on-dark: #F4EFF9;
  --on-dark-mu: rgba(244, 239, 249, 0.76);
  --line-dark: rgba(244, 239, 249, 0.2);
  --gold: #9C6C13;

  /* Visina zaglavlja pod DRUGIM imenom — `--header-h` sekcije se na
     `:root` ne smije prevezati na samu sebe (postane ciklus). */
  --head-h: 76px;
}

@media (max-width: 900px) {
  :root { --head-h: 62px; }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  /* `clip` klipuje bez pravljenja scroll kontejnera — `hidden` bi
     razbio `position: sticky` na zaglavlju. */
  overflow-x: clip;
}

img, svg, video { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =====================================================================
   1. ZAJEDNIČKI TOKENI — pismo i neutrali na svih 11 sekcija
   ===================================================================== */

.sec-terra-header,
.sec-atelier-hero,
.sec-fundament-services,
.sec-nordlicht-referenzen,
.sec-nordlicht-parallax,
.sec-dental-house-about,
.sec-meridian-results,
.sec-housecall-gallery,
.sec-radix-faq,
.sec-fundament-cta,
.sec-housecall-footer {
  /* Jedan par pisama na cijelom sajtu (UPUTA.md §„Pismo je JEDNO"). */
  --ff-display: var(--font-display-rounded);
  --ff-body: var(--font-sans);

  /* Neutrali — isti na svakoj sekciji. */
  --c-bg: #ffffff;
  --c-bg-alt: var(--tint);
  --c-white: #ffffff;
  --c-surface: var(--tint-2);
  --c-surface-warm: var(--tint);
  --c-ink: var(--brand-purple-deep);
  --c-ink-soft: var(--ink);
  --c-ink-70: rgba(44, 35, 51, 0.7);
  --c-ink-12: rgba(42, 22, 64, 0.12);
  --c-ink-06: rgba(42, 22, 64, 0.06);
  --c-text: var(--ink);
  --c-text-muted: var(--ink-mu);
  --c-text-invert: var(--on-dark);
  --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-line-invert: var(--line-dark);
  --c-star: var(--gold);
  --c-sand: var(--tint-2);

  /* WhatsApp — zelena iz logotipa, potamnjena do AA na bijelom tekstu. */
  --c-whatsapp: var(--brand-green-dk);
  --c-whatsapp-dk: var(--brand-green-dker);

  /* Zaobljeno pismo traži zaobljenu geometriju. */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-img: 18px;
  --r-pill: 999px;

  /* Sjenke u tonu brenda, ne sive. */
  --sh-xs: 0 1px 2px rgba(42, 22, 64, 0.06);
  --sh-sm: 0 4px 16px -6px rgba(42, 22, 64, 0.13);
  --sh-md: 0 14px 34px -14px rgba(42, 22, 64, 0.2);
  --sh-lg: 0 26px 62px -22px rgba(42, 22, 64, 0.26);
  --sh-xl: 0 40px 92px -30px rgba(42, 22, 64, 0.32);

  --maxw: 1180px;
  --header-h: var(--head-h);
}

/* Naslovi: Nunito je zaobljen i „gušći" od serifa — ide malo tješnje. */
.sec-terra-header :is(h1, h2, h3, h4),
.sec-atelier-hero :is(h1, h2, h3, h4),
.sec-fundament-services :is(h1, h2, h3, h4),
.sec-nordlicht-referenzen :is(h1, h2, h3, h4),
.sec-nordlicht-parallax :is(h1, h2, h3, h4),
.sec-dental-house-about :is(h1, h2, h3, h4),
.sec-meridian-results :is(h1, h2, h3, h4),
.sec-housecall-gallery :is(h1, h2, h3, h4),
.sec-radix-faq :is(h1, h2, h3, h4),
.sec-fundament-cta :is(h1, h2, h3, h4),
.sec-housecall-footer :is(h1, h2, h3, h4) {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Natpisi iznad naslova — jedan oblik na cijelom sajtu. */
.sec-fundament-services .u-label,
.sec-dental-house-about .u-label,
.sec-meridian-results .u-label,
.sec-housecall-gallery .u-label,
.sec-radix-faq .u-label,
.sec-fundament-cta .u-label,
.sec-nordlicht-referenzen .u-kicker,
.sec-nordlicht-parallax .u-kicker {
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =====================================================================
   2. BOJE BRENDA PO SEKCIJI
   ===================================================================== */

/* Akcent-dugme: bijeli tekst na ljubičastoj (u templatima je tamni). */
.sec-nordlicht-referenzen .u-btn--accent,
.sec-nordlicht-parallax .u-btn--accent {
  --btn-bg: var(--brand-purple);
  --btn-fg: #fff;
}
.sec-nordlicht-referenzen .u-btn--accent:hover,
.sec-nordlicht-parallax .u-btn--accent:hover {
  --btn-bg: var(--brand-purple-dk);
}

/* --- 1. Zaglavlje --------------------------------------------------- */

/* Sticky se drži roditeljevog okvira. Roditelj `.site-head`-a je sama
   sekcija (visoka koliko i traka), pa zaglavlje otklizi poslije ~70 px.
   Ljepljivost zato ide na traku sastavljača, koja traje cijelu stranicu. */
.band[data-band="1"] {
  position: sticky;
  top: 0;
  z-index: 100;
}

.sec-terra-header {
  --c-bg: #ffffff;
  /* Meni je preko cijelog ekrana i NEMA vlastito dugme za zatvaranje —
     zatvara ga isti „burger" u traci zaglavlja. Zato traka mora ostati
     IZNAD menija; kad je meni bio na 300, sonda je na dugmetu vraćala
     `.fmenu__inner` i meni se nije dao zatvoriti dodirom. Meni ionako
     ostavlja prostor za traku (`padding-block: header-h + …`). */
  --z-menu: 95;
  --z-header: 100;
  --z-mobilebar: 90;
}

/* Dok je meni otvoren, traka se stapa sa njegovom tamnom plohom —
   inače bi bijela pruga stajala preko ljubičastog menija. */
body:has(#terra-header-menu-full:not([hidden])) .sec-terra-header .site-head,
body:has(#terra-header-menu-full:not([hidden])) .sec-terra-header .site-head.is-past {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body:has(#terra-header-menu-full:not([hidden])) .sec-terra-header .burger { color: #fff; }
body:has(#terra-header-menu-full:not([hidden])) .sec-terra-header .brand__tx strong { color: #fff; }
body:has(#terra-header-menu-full:not([hidden])) .sec-terra-header .brand__tx small { color: var(--on-dark-mu); }
body:has(#terra-header-menu-full:not([hidden])) .sec-terra-header .brand__img { filter: brightness(1.25); }

.sec-terra-header .site-head {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease),
    box-shadow 240ms var(--ease);
}
.sec-terra-header .site-head.is-past {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(42, 22, 64, 0.55);
}

.sec-terra-header .brand__img {
  width: auto;
  height: 38px;
  transition: height 240ms var(--ease);
}
.sec-terra-header .brand__tx strong {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--brand-purple-deep);
}
.sec-terra-header .brand__tx small {
  color: var(--ink-mu);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

/* Pet stavki, telefon i dugme staju u jedan red tek kad prestanu da se
   prelamaju — otud `nowrap` i tješnji razmak. */
.sec-terra-header .site-nav a {
  color: var(--ink);
  font-weight: 500;
  padding: 10px 11px;
  white-space: nowrap;
}
.sec-terra-header .head-tel { white-space: nowrap; }
.sec-terra-header .site-head__inner { gap: 16px; }
@media (max-width: 1240px) {
  .sec-terra-header .site-nav a { padding: 10px 8px; font-size: 0.9rem; }
  .sec-terra-header .head-tel { font-size: 0.9rem; }
}
.sec-terra-header .site-nav a:hover,
.sec-terra-header .site-nav a.is-current { color: var(--brand-purple); }

.sec-terra-header .head-tel {
  color: var(--brand-purple);
  font-weight: 700;
}
.sec-terra-header .head-cta {
  --btn-bg: var(--brand-purple);
  --btn-fg: #fff;
  min-height: 46px;
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: var(--sh-sm);
}
.sec-terra-header .head-cta:hover { --btn-bg: var(--brand-purple-dk); }
.sec-terra-header .site-head.is-past .head-cta { --btn-bg: var(--brand-purple); }
.sec-terra-header .site-head.is-past .head-cta:hover { --btn-bg: var(--brand-purple-dk); }
.sec-terra-header .burger { color: var(--brand-purple-deep); }

/* Meni preko cijelog ekrana — tamna ljubičasta ploha. */
.sec-terra-header .fmenu {
  background: var(--brand-purple-deep);
  color: var(--on-dark);
}
.sec-terra-header .fmenu__list a {
  color: var(--on-dark);
  font-family: var(--ff-display);
  font-weight: 700;
  border-bottom-color: var(--line-dark);
}
.sec-terra-header .fmenu__list a:hover { color: var(--brand-green); }
.sec-terra-header .fmenu__note { color: var(--on-dark-mu); }
.sec-terra-header .fmenu .u-btn--white { --btn-bg: #fff; --btn-fg: var(--brand-purple-deep); }
.sec-terra-header .fmenu .u-btn--ghost {
  --btn-bg: rgba(244, 239, 249, 0.1);
  --btn-fg: var(--on-dark);
  --btn-bd: var(--line-dark);
}

/* Ljepljiva traka na dnu, na telefonu. */
.sec-terra-header .mobile-bar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -24px rgba(42, 22, 64, 0.6);
}
.sec-terra-header .mobile-bar__i { color: var(--brand-purple-deep); font-weight: 600; }
.sec-terra-header .mobile-bar__i--wa { color: var(--brand-green-dker); }
.sec-terra-header .mobile-bar__i--cta {
  background: var(--brand-purple);
  color: #fff;
  font-weight: 700;
}

/* --- 2. Hero -------------------------------------------------------- */

.sec-atelier-hero {
  --c-gold: var(--brand-green);
  --c-gold-dk: var(--brand-green-dk);
  --c-gold-soft: var(--tint-2);
}

/* Zaglavlje je ljepljivo i U TOKU (traka `data-band="1"`), pa hero ne
   mora čuvati mjesto za njega. */
.sec-atelier-hero .hero {
  padding-block: clamp(28px, 4vw, 56px) clamp(24px, 2.6vw, 36px);
  background: var(--brand-purple-deep);
}
.sec-atelier-hero .hero__media :is(img, video) { object-position: 68% 42%; }

.sec-atelier-hero .hero__scrim {
  background:
    linear-gradient(180deg, rgba(24, 12, 36, 0.42) 0%, rgba(24, 12, 36, 0.18) 26%, rgba(24, 12, 36, 0.74) 72%, rgba(24, 12, 36, 0.93) 100%),
    linear-gradient(96deg, rgba(30, 15, 46, 0.82) 0%, rgba(30, 15, 46, 0.36) 48%, transparent 74%);
}

.sec-atelier-hero .hero__label {
  color: var(--brand-green);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sec-atelier-hero .hero h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.35rem, 5vw + 1rem, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.sec-atelier-hero .hero h1 .u-em {
  color: var(--brand-green);
  font-style: normal;
}
.sec-atelier-hero .hero__lead {
  font-size: clamp(1.02rem, 0.5vw + 0.95rem, 1.25rem);
  line-height: 1.6;
  color: rgba(244, 239, 249, 0.88);
}
.sec-atelier-hero .hero__lead-short { display: none; }

/* Dugmad u heroju: bez verzala, zaobljena, WhatsApp je glavno. */
.sec-atelier-hero .u-btn {
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.sec-atelier-hero .u-btn--ivory {
  --btn-bg: var(--brand-green);
  --btn-fg: #17300B;
  box-shadow: 0 12px 30px -14px rgba(146, 202, 108, 0.8);
}
.sec-atelier-hero .u-btn--ivory:hover { --btn-bg: var(--brand-green-lt); }
.sec-atelier-hero .u-btn .btn__wa { width: 20px; height: 20px; }
.sec-atelier-hero .hero__ghost {
  --btn-bg: rgba(244, 239, 249, 0.08);
  --btn-fg: var(--on-dark);
  --btn-bd: rgba(244, 239, 249, 0.44);
}

.sec-atelier-hero .hero__meta { border-top-color: rgba(244, 239, 249, 0.24); }
.sec-atelier-hero .hero__meta li { border-right-color: rgba(244, 239, 249, 0.2); }
.sec-atelier-hero .hero__meta span {
  color: var(--brand-green);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
}
.sec-atelier-hero .hero__meta strong {
  font-family: var(--ff-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  white-space: normal;
}

/* --- 3. Usluge ------------------------------------------------------ */

.sec-fundament-services {
  --c-bg: #ffffff;
  --c-accent: var(--brand-purple);
  --c-accent-dk: var(--brand-purple-dk);
  --c-accent-soft: var(--tint-2);
}

/* Kontejner čuva mjesto za ljepljivu bočnu traku koje u ovom rasporedu
   nema, pa sekcija ispadne pomjerena udesno. */
.sec-fundament-services .u-container { padding-left: var(--gutter); }

.sec-fundament-services .u-label { color: var(--brand-purple); }
.sec-fundament-services .svcs__intro { color: var(--ink-mu); }

.sec-fundament-services .svc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow: var(--sh-xs);
  transition: box-shadow 260ms var(--ease), border-color 260ms var(--ease),
    transform 260ms var(--ease);
}
.sec-fundament-services .svc:hover {
  border-color: color-mix(in srgb, var(--brand-purple) 34%, transparent);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}
.sec-fundament-services .svc__ic {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--tint-2);
  color: var(--brand-purple);
}
.sec-fundament-services .svc__ic svg { width: 26px; height: 26px; }
.sec-fundament-services .svc__body h3 {
  font-size: 1.16rem;
  color: var(--brand-purple-deep);
}
.sec-fundament-services .svc__body p { color: var(--ink-mu); font-size: 0.97rem; }

/* Posljednja kartica je poziv, ne usluga — zato je puna boje. */
.sec-fundament-services .svc--accent {
  background: linear-gradient(150deg, var(--brand-purple) 0%, var(--brand-purple-deep) 100%);
  border-color: transparent;
  color: var(--on-dark);
}
.sec-fundament-services .svc--accent .svc__ic {
  background: rgba(244, 239, 249, 0.14);
  color: var(--brand-green);
}
.sec-fundament-services .svc--accent .svc__body h3 { color: #fff; }
.sec-fundament-services .svc--accent .svc__body p { color: var(--on-dark-mu); }
.sec-fundament-services .svc__cta { margin-top: 14px; }
.sec-fundament-services .svc__cta a {
  color: var(--brand-green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.sec-fundament-services .svc__cta a:hover { color: var(--brand-green-lt); }

/* --- 4. Ocjene ------------------------------------------------------ */

.sec-nordlicht-referenzen {
  --c-canvas: var(--brand-purple-deep);
  --c-canvas-lt: #3B2158;
  --c-canvas-dp: var(--brand-purple-deeper);
  --c-panel: #ffffff;
  --c-panel-alt: var(--tint);
  --c-on-canvas: var(--on-dark);
  --c-on-canvas-mu: var(--on-dark-mu);
  --c-line-canvas: var(--line-dark);
  --c-accent: var(--brand-purple);
  --c-accent-dk: var(--brand-purple-dk);
  --c-accent-soft: var(--tint-2);
}

.sec-nordlicht-referenzen .u-kicker { color: var(--brand-purple); }
.sec-nordlicht-referenzen .revs__top h2 { color: var(--brand-purple-deep); }

.sec-nordlicht-referenzen .revs__summary {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(18px, 2vw, 26px);
}
.sec-nordlicht-referenzen .revs__score strong {
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--brand-purple-deep);
}
.sec-nordlicht-referenzen .revs__stars { color: var(--gold); letter-spacing: 0.08em; }
.sec-nordlicht-referenzen .revs__score small { color: var(--ink-mu); }
.sec-nordlicht-referenzen .revs__link {
  --btn-bg: transparent;
  --btn-fg: var(--brand-purple);
  --btn-bd: var(--line-2);
  font-family: var(--ff-body);
  font-weight: 700;
}
.sec-nordlicht-referenzen .revs__link:hover {
  --btn-bg: var(--brand-purple);
  --btn-fg: #fff;
  --btn-bd: var(--brand-purple);
}

.sec-nordlicht-referenzen .rphoto {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--tint);
  border: 1px solid var(--line);
}
.sec-nordlicht-referenzen .rphoto img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 34%;
}
.sec-nordlicht-referenzen .rphoto p {
  padding: 14px 18px 16px;
  margin: 0;
  color: var(--ink-mu);
  font-size: 0.92rem;
}
/* Kartica sa znakom: znak se ne kadrira kao fotografija. */
.sec-nordlicht-referenzen .rphoto--brand { background: var(--tint-2); }
.sec-nordlicht-referenzen .rphoto--brand img {
  object-fit: contain;
  padding: 34px;
  aspect-ratio: 16 / 10;
}
.sec-nordlicht-referenzen .rphoto--brand p {
  color: var(--brand-purple-deep);
  font-weight: 600;
}

/* Treća pločica: linkovi na mreže, bez fotografije. */
.sec-nordlicht-referenzen .rphoto--links {
  background: var(--brand-purple-deep);
  border-color: transparent;
  padding: clamp(20px, 2.2vw, 28px);
}
.sec-nordlicht-referenzen .rphoto--links h3 {
  margin: 0 0 14px;
  color: var(--brand-green);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sec-nordlicht-referenzen .rphoto--links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sec-nordlicht-referenzen .rphoto--links li + li { margin-top: 12px; }
.sec-nordlicht-referenzen .rphoto--links a {
  color: #fff;
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 249, 0.24);
  padding-bottom: 10px;
  width: 100%;
}
.sec-nordlicht-referenzen .rphoto--links li:last-child a { border-bottom: 0; }
.sec-nordlicht-referenzen .rphoto--links a:hover { color: var(--brand-green); }
.sec-nordlicht-referenzen .rphoto--links a span {
  color: var(--on-dark-mu);
  font-family: var(--ff-body);
  font-size: 0.85rem;
  font-weight: 400;
}

.sec-nordlicht-referenzen .revs__note {
  max-width: 62ch;
  margin: clamp(22px, 3vw, 32px) auto 0;
  color: var(--ink-mu);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* --- 5. Traka sa slikom --------------------------------------------- */

.sec-nordlicht-parallax {
  --c-canvas: var(--brand-purple-deep);
  --c-canvas-lt: #3B2158;
  --c-canvas-dp: var(--brand-purple-deeper);
  --c-on-canvas: var(--on-dark);
  --c-on-canvas-mu: var(--on-dark-mu);
  --c-line-canvas: var(--line-dark);
  --c-accent: var(--brand-purple);
  --c-accent-dk: var(--brand-purple-dk);
}

/* Zatamnjenje ide taman toliko da tekst bude čitljiv — fotografija
   mora ostati fotografija (UPUTA.md). Gustina je ispod samog teksta,
   ne preko cijele slike. */
.sec-nordlicht-parallax .plx__veil {
  background:
    linear-gradient(180deg, rgba(30, 15, 46, 0.24) 0%, rgba(30, 15, 46, 0.62) 42%, rgba(30, 15, 46, 0.78) 100%),
    linear-gradient(100deg, rgba(42, 22, 64, 0.62) 0%, rgba(42, 22, 64, 0.2) 58%, transparent 88%);
}
/* Slika je kvadratna (2000×2000) u širokoj traci — bez pomjeranja
   kadra ostane samo isječak oko očiju. */
.sec-nordlicht-parallax .plx__media :is(img, video) { object-position: 58% 52%; }
.sec-nordlicht-parallax .u-kicker { color: var(--brand-green); }
.sec-nordlicht-parallax .plx__title { color: #fff; letter-spacing: -0.025em; }
.sec-nordlicht-parallax .plx__lead { color: rgba(244, 239, 249, 0.86); }
.sec-nordlicht-parallax .u-btn--ghost {
  --btn-bg: rgba(244, 239, 249, 0.08);
  --btn-fg: var(--on-dark);
  --btn-bd: rgba(244, 239, 249, 0.44);
}
.sec-nordlicht-parallax .u-btn--ghost:hover { --btn-bg: rgba(244, 239, 249, 0.18); }

/* --- 6. O nama ------------------------------------------------------ */

.sec-dental-house-about {
  --c-bg: var(--tint);
  --c-accent: var(--brand-purple);
  --c-accent-dk: var(--brand-purple-dk);
  --c-accent-soft: var(--tint-2);
  --c-accent-tint: var(--tint-2);
}

.sec-dental-house-about .u-label { color: var(--brand-purple); }
.sec-dental-house-about .about__copy h2 { color: var(--brand-purple-deep); }
/* Okvir sekcije ima fiksnu visinu (`clamp(320px,42vw,520px)`), a
   fotografija je položena 1079×720 — u tom okviru se odsijeca sa
   strane i peti član tima ispadne iz kadra. Okvir se prilagođava
   slici, ne slika okviru. */
.sec-dental-house-about .about__media img {
  border-radius: var(--r-xl);
  height: auto;
  aspect-ratio: 1079 / 720;
  object-fit: cover;
  object-position: 50% 45%;
}
.sec-dental-house-about .about__lead {
  color: var(--ink);
  font-size: clamp(1.05rem, 0.5vw + 0.98rem, 1.22rem);
}
.sec-dental-house-about .about__points li svg {
  color: var(--brand-green-dk);
}
.sec-dental-house-about .about__points strong { color: var(--brand-purple-deep); }
.sec-dental-house-about .about__points span { color: var(--ink-mu); }
.sec-dental-house-about .about__note {
  border-left: 3px solid var(--brand-green);
  padding-left: 16px;
  color: var(--ink-mu);
}

/* --- 7. Prije i poslije --------------------------------------------- */

.sec-meridian-results {
  --c-bg: #ffffff;
  --c-accent: var(--brand-purple);
  --c-accent-dk: var(--brand-purple-dk);
  --c-accent-soft: var(--tint-2);
  --c-accent-tint: var(--tint-2);
}

.sec-meridian-results .u-label { color: var(--brand-purple); }
.sec-meridian-results .res__head h2 { color: var(--brand-purple-deep); }
.sec-meridian-results .res__head p { color: var(--ink-mu); }
.sec-meridian-results .cmp { background: var(--tint-2); border-radius: var(--r-xl); }
.sec-meridian-results .cmp__tag--b {
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-purple-deep);
  font-weight: 700;
}
.sec-meridian-results .cmp__tag--a {
  background: var(--brand-purple);
  color: #fff;
  font-weight: 700;
}
.sec-meridian-results .cmp__grip { color: var(--brand-purple); }
.sec-meridian-results .case__body h3 { color: var(--brand-purple-deep); }
.sec-meridian-results .case__body > p { color: var(--ink-mu); }

/* --- 8. Galerija ---------------------------------------------------- */

.sec-housecall-gallery {
  --c-bg: var(--tint);
  --c-bg-alt: var(--tint);
  --c-accent: var(--brand-purple);
  --c-accent-dk: var(--brand-purple-dk);
  --c-accent-soft: var(--tint-2);
}

.sec-housecall-gallery .u-label { color: var(--brand-purple); }
.sec-housecall-gallery .gal__head h2 { color: var(--brand-purple-deep); }
.sec-housecall-gallery .gal__head p { color: var(--ink-mu); }
.sec-housecall-gallery .gal__i :is(img, video) {
  border-radius: var(--r-xl);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 38%;
}
.sec-housecall-gallery .gal__i--wide :is(img, video) {
  aspect-ratio: 16 / 9;
  object-position: 50% 32%;
}
.sec-housecall-gallery .gal__i figcaption {
  color: var(--ink-mu);
  font-size: 0.9rem;
  padding-top: 10px;
}

/* --- 9. Pitanja — svijetla ploha (u templatu je tamna) --------------- */

.sec-radix-faq {
  --c-canvas: #ffffff;
  --c-canvas-2: #ffffff;
  --c-surface: var(--tint);
  --c-surface-2: var(--tint-2);
  --c-sand: var(--tint-2);
  --c-on-canvas: var(--ink);
  --c-on-canvas-mu: var(--ink-mu);
  --c-on-canvas-lo: #736A80;
  --c-light: #ffffff;
  --c-ink: var(--brand-purple-deep);
  --c-ink-mu: var(--ink-mu);
  --c-line: var(--line);
  --c-line-strong: var(--line-2);
  --c-line-dark: var(--line);
  --c-accent: var(--brand-purple);
  --c-accent-lt: var(--brand-purple-dk);
  --c-accent-dk: var(--brand-purple-dk);
  --c-accent-08: color-mix(in srgb, var(--brand-purple) 8%, transparent);
  --c-accent-20: color-mix(in srgb, var(--brand-purple) 20%, transparent);
}

.sec-radix-faq .u-label { color: var(--brand-purple); }
.sec-radix-faq .faq__head h2 { color: var(--brand-purple-deep); }
.sec-radix-faq .faq__head p { color: var(--ink-mu); }
.sec-radix-faq .qa__t { color: var(--brand-purple-deep); font-weight: 700; }
.sec-radix-faq .qa__in p { color: var(--ink-mu); }
.sec-radix-faq .qa__in a {
  color: var(--brand-purple);
  font-weight: 600;
  text-underline-offset: 3px;
}
.sec-radix-faq .qa__note { color: #736A80; }
/* Sklopljen odgovor se skriva i za čitač ekrana, ne samo očima. */
.sec-radix-faq .qa:not(.is-open) .qa__in { visibility: hidden; }
.sec-radix-faq .qa.is-open .qa__in { visibility: visible; }
.sec-radix-faq .faq__more { color: var(--ink-mu); }
.sec-radix-faq .faq__more a {
  color: var(--brand-purple);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* --- 10. Kontakt ---------------------------------------------------- */

.sec-fundament-cta {
  --c-primary: var(--brand-purple);
  --c-primary-dk: var(--brand-purple-deep);
  --c-primary-lt: #8C63B6;
  --c-accent: var(--brand-green);
  --c-accent-dk: var(--brand-green-lt);
  --c-accent-soft: var(--tint-2);
}

.sec-fundament-cta .cta {
  background:
    radial-gradient(120% 90% at 88% 12%, rgba(146, 202, 108, 0.16) 0%, transparent 58%),
    linear-gradient(158deg, #3B2158 0%, var(--brand-purple-deep) 56%, var(--brand-purple-deeper) 100%);
}
.sec-fundament-cta .cta__label { color: var(--brand-green); }
.sec-fundament-cta .cta__copy h2 { color: #fff; letter-spacing: -0.025em; }
.sec-fundament-cta .cta__copy > p { color: var(--on-dark-mu); }

.sec-fundament-cta .cta__status { color: var(--on-dark); font-weight: 600; }
.sec-fundament-cta .cta__dot { background: var(--brand-green); }
.sec-fundament-cta .cta__status.is-closed .cta__dot { background: #D8A23B; }

.sec-fundament-cta .crow {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(244, 239, 249, 0.18);
  border-radius: var(--r-lg);
  color: var(--on-dark);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease),
    transform 220ms var(--ease);
}
.sec-fundament-cta .crow:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(244, 239, 249, 0.34);
  transform: translateY(-2px);
}
.sec-fundament-cta .crow--wa {
  background: var(--brand-green-dk);
  border-color: transparent;
}
.sec-fundament-cta .crow--wa:hover { background: var(--brand-green-dker); }
.sec-fundament-cta .crow--wa .crow__ic { color: #fff; }
.sec-fundament-cta .crow__ic { color: var(--brand-green); }
.sec-fundament-cta .crow__tx strong { color: #fff; font-family: var(--ff-display); font-weight: 700; }
.sec-fundament-cta .crow__tx small { color: var(--on-dark-mu); }

.sec-fundament-cta .cta__facts { border-top: 1px solid rgba(244, 239, 249, 0.18); }
.sec-fundament-cta .cta__facts span { color: var(--brand-green); }
.sec-fundament-cta .cta__facts strong { color: #fff; font-weight: 600; }
.sec-fundament-cta .cta__facts a { color: inherit; word-break: break-word; }
.sec-fundament-cta .cta__facts a:hover { color: var(--brand-green); }

/* --- 11. Podnožje --------------------------------------------------- */

/* Sekcija se sama farba u `--c-bg`; za tamno podnožje token ide na
   boju platna, inače ispod ostane bijela ploha. */
.sec-housecall-footer {
  --c-bg: var(--brand-purple-deeper);
  --c-bg-alt: var(--brand-purple-deep);
  --c-ink: var(--on-dark);
  --c-text: var(--on-dark);
  --c-text-muted: var(--on-dark-mu);
  --c-line: rgba(244, 239, 249, 0.16);
  --c-line-strong: rgba(244, 239, 249, 0.28);
  --c-accent: var(--brand-green);
  --c-accent-dk: var(--brand-green-lt);
}

.sec-housecall-footer .ftr {
  background: var(--brand-purple-deeper);
  color: var(--on-dark);
  border-top: 0;
}
.sec-housecall-footer .ftr__mark img { width: auto; height: 46px; }
.sec-housecall-footer .ftr__logo-tx strong {
  color: #fff;
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 800;
}
.sec-housecall-footer .ftr__logo-tx small { color: var(--on-dark-mu); }
.sec-housecall-footer .ftr__blurb { color: var(--on-dark-mu); }
.sec-housecall-footer .ftr__col h3 {
  color: var(--brand-green);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sec-housecall-footer address { font-style: normal; }
.sec-housecall-footer .ftr__map {
  color: var(--on-dark);
  text-decoration: none;
  line-height: 1.7;
}
.sec-housecall-footer .ftr__map:hover { color: var(--brand-green); }
.sec-housecall-footer .ftr__map-go {
  display: block;
  margin-top: 8px;
  color: var(--brand-green);
  font-size: 0.85rem;
  font-weight: 600;
}
.sec-housecall-footer .ftr__social a {
  color: var(--on-dark-mu);
  text-decoration: none;
}
.sec-housecall-footer .ftr__social a:hover { color: var(--brand-green); }
.sec-housecall-footer .ftr__bar {
  border-top: 1px solid rgba(244, 239, 249, 0.16);
  color: var(--on-dark-mu);
}
.sec-housecall-footer .ftr__top-btn {
  color: var(--on-dark);
  border: 1px solid rgba(244, 239, 249, 0.28);
  border-radius: 999px;
  padding: 9px 18px;
  background: transparent;
  cursor: pointer;
}
.sec-housecall-footer .ftr__top-btn:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

/* =====================================================================
   3. LEBDEĆE WHATSAPP DUGME (nije sekcija — UPUTA.md)
   ===================================================================== */

.wa-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px 13px 15px;
  border-radius: 999px;
  background: var(--brand-green-dk);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 32px -12px rgba(30, 15, 46, 0.6);
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
.wa-fab svg { width: 22px; height: 22px; flex: none; }
.wa-fab:hover { background: var(--brand-green-dker); transform: translateY(-2px); }
.wa-fab:focus-visible { outline: 3px solid var(--brand-green); outline-offset: 3px; }

/* Kad se pojavi ljepljiva traka sekcije (koja i sama nosi WhatsApp),
   dugme se sklanja da se dvije stvari ne preklapaju. */
@media (max-width: 900px) {
  body:has(.mobile-bar.is-visible) .wa-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
}

/* =====================================================================
   4. TELEFON — sve odluke se donose ovdje (UPUTA.md §„Telefon je mjera")
   ===================================================================== */

@media (max-width: 900px) {
  .sec-terra-header .brand__img { height: 32px; }
  .sec-terra-header .brand__tx strong { font-size: 0.95rem; }
  .sec-terra-header .brand__tx small { display: none; }
}

/* --- Hero na telefonu: slika je vlastiti blok, tekst ispod nje ------ */
@media (max-width: 760px) {
  /* Zadata visina čini -8 % predvidivim brojem (8 % od 820 = 65,6 px). */
  .sec-atelier-hero .hero {
    min-height: 820px;
    padding-block: 0 30px;
    background: var(--brand-purple-deep);
  }

  /* `margin-top` na apsolutno pozicioniranom elementu se DODAJE na
     `top`, pa poništava onih -8 %; zadata visina isključi `bottom`.
     `transform` piše parallax skripta inline, otud `!important`. */
  .sec-atelier-hero .hero__media {
    height: 300px;
    margin-top: 66px;
    transform: none !important;
    border-radius: 0 0 26px 26px;
    overflow: hidden;
  }
  .sec-atelier-hero .hero__media :is(img, video) { object-position: 50% 30%; }

  /* Tekst više nije preko slike — zatamnjenja nema. */
  .sec-atelier-hero .hero__scrim { background: none; }

  .sec-atelier-hero .hero__inner { padding-block-start: 326px; }
  .sec-atelier-hero .hero h1 { font-size: 2.3rem; line-height: 1.08; }
  .sec-atelier-hero .hero__lead { font-size: 1.02rem; }
  .sec-atelier-hero .hero__lead-full { display: none; }
  .sec-atelier-hero .hero__lead-short { display: inline; }

  /* Jedno dugme je glavno, drugo lakše. */
  .sec-atelier-hero .hero__cta { gap: 10px; }
  .sec-atelier-hero .hero__ghost {
    --btn-bg: transparent;
    --btn-bd: transparent;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  .sec-atelier-hero .hero__meta { padding-top: 20px; }
  .sec-atelier-hero .hero__meta strong { font-size: 0.98rem; }
}

@media (max-width: 620px) {
  .sec-atelier-hero .hero { min-height: 800px; }
  .sec-atelier-hero .hero__media { margin-top: 64px; }
  .sec-atelier-hero .hero__inner { padding-block-start: 322px; }
}

/* --- Ostatak sajta na telefonu -------------------------------------- */
@media (max-width: 760px) {
  .sec-nordlicht-referenzen .revs__summary { text-align: left; }
  .sec-nordlicht-referenzen .rphoto img,
  .sec-nordlicht-referenzen .rphoto--brand img { aspect-ratio: 3 / 2; }
  .sec-nordlicht-referenzen .rphoto--brand img { padding: 26px; }

  .sec-meridian-results .cmp { border-radius: var(--r-lg); }
  .sec-housecall-gallery .gal__i :is(img, video) { border-radius: var(--r-lg); }
  .sec-dental-house-about .about__media img { border-radius: var(--r-lg); }

  .sec-fundament-cta .cta__facts strong { font-size: 0.95rem; }
}

/* Donji prostor u podnožju ostaje i na širokom ekranu: tamo ga ne
   traži ljepljiva traka nego lebdeće WhatsApp dugme, koje bi inače
   stajalo preko dugmeta „Na vrh". */
@media (min-width: 901px) {
  .sec-housecall-footer .ftr { padding-bottom: 104px; }
}

/* =====================================================================
   5. OTKRIVANJE SEKCIJA — sigurnosna mreža
   Ako posmatrač ne okine (snimak cijele stranice, vraćen položaj
   skrola), `.is-in` postavi vlastita skripta na `scroll`/`load`.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sec [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
