/*
 * site.css — JEDINI stilski list marketinških stranica i Mog računa (C13, 2026-09-10).
 *
 * Nastao spajanjem site.css + redesign.css + villa.css, i to TIM redoslijedom, pa
 * kaskada ostaje ista kao prije. Iz spoja su izbačena pravila čiji se selektori ne
 * pojavljuju ni u jednoj stranici (web/pages, web/layout, web/config.php, site.js):
 * stari telefoni `.ekran-*`/`.scr-*`, `.junak*`, `.jelovnik`, `.naruci-*`, `.dno-stupac` …
 * Važeći sustav je Villa Intima — tokeni `--vi-*` u trećem dijelu ove datoteke, opis u DESIGN.md.
 *
 * U spoju su i `telefoni.css` i `registracija.css` (do C13 ubacivani inline samo na
 * nekim stranicama), na istom mjestu u kaskadi: poslije starog site.css, prije
 * redesign/villa. Njihove zasebne datoteke više se ne učitavaju.
 */
/* === izvor: site.css (stari osnovni sloj) === */
/* ============================================================
   POZIV OD SRCA — stilovi
   Paleta: papir / tamnozelena tinta / prašnjava ruža
   Tipografija: Marcellus (naslovi) · Cormorant Garamond (kurziv)
                Pinyon Script (potezi) · Jost (tekst)
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --papir:      #FBF9F3;
  --papir-2:    #F3EEE2;
  --tinta:      #22312A;
  --tinta-meka: #5E6D64;
  --ruza:       #B97F78;
  --ruza-tamna: #9B615B;
  --crta:       #DCD3C2;
  --crta-tamna: rgba(251,249,243,0.18);
  --sampanj:    #BFA070;
  --bijela:     #FFFFFF;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  background: var(--papir);
  color: var(--tinta);
  line-height: 1.7;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--ruza); color: var(--bijela); }

:focus-visible {
  outline: 3px solid var(--papir);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #70403C;
}

.skok {
  position: absolute; left: -999px; top: 0;
  background: var(--tinta); color: var(--papir);
  padding: 0.6rem 1.2rem; z-index: 999;
}
.skok:focus { left: 0; }

/* ---------- tipografske uloge ---------- */

h1, h2, h3 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
h3 { font-size: 1.05rem; letter-spacing: 0.12em; }

.kurziv {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ruza-tamna);
}

.skript {
  font-family: 'Pinyon Script', cursive;
  text-transform: none;
  letter-spacing: 0;
}

.nadnaslov {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--tinta-meka);
  margin-bottom: 1.1rem;
}

.uvodni {
  font-size: 1.02rem;
  color: var(--tinta-meka);
  max-width: 56ch;
}

/* ---------- gumbi ---------- */

.gumb, .gumb-okvir, .gumb-svijetli {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2.1rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  text-align: center;
}

.gumb {
  background: var(--tinta);
  color: var(--papir);
  border: 1px solid var(--tinta);
}
.gumb:hover { background: var(--ruza-tamna); border-color: var(--ruza-tamna); color: var(--bijela); }

.gumb-okvir {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--crta);
}
.gumb-okvir:hover { border-color: var(--tinta); }

.gumb-svijetli {
  background: transparent;
  color: var(--papir);
  border: 1px solid var(--crta-tamna);
}
.gumb-svijetli:hover { background: var(--papir); color: var(--tinta); border-color: var(--papir); }

/* ---------- zaglavlje ---------- */

.vrh {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(251,249,243,0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--crta);
}

.vrh-unutra {
  max-width: 1200px; margin: 0 auto;
  padding: 0.85rem 4vw;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}

.logo {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  line-height: 1.1;
}
.logo-skript {
  font-family: 'Pinyon Script', cursive;
  font-size: 1.7rem;
  color: var(--tinta);
  display: block;
}
.logo-pod {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--tinta-meka);
  margin-top: -2px;
  padding-left: 3px;
}

.meni {
  display: flex; align-items: center; gap: 1.35rem;
  list-style: none;
}
.meni a,
.meni-odjava button {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta-meka);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.meni-odjava { margin: 0; }
.meni-odjava button {
  appearance: none;
  font-family: 'Jost', sans-serif;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.meni a:hover,
.meni-odjava button:hover { color: var(--tinta); }
.meni a.je-aktivna { color: var(--tinta); border-bottom-color: var(--ruza); }

.meni-cta {
  border: 1px solid var(--tinta) !important;
  padding: 0.5rem 1.4rem !important;
  color: var(--tinta) !important;
  transition: background 0.25s, color 0.25s !important;
}
.meni-cta:hover, .meni-cta.je-aktivna {
  background: var(--tinta);
  color: var(--papir) !important;
}

.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; min-width: 44px; min-height: 44px; padding: 8px;
}
.hamburger span {
  width: 26px; height: 1px; background: var(--tinta);
  transition: transform 0.3s;
}
body.meni-otvoren .hamburger span:first-child { transform: translateY(4px) rotate(45deg); }
body.meni-otvoren .hamburger span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- raspored sekcija ---------- */

.sek { padding: 6.5rem 4vw; }
.sek-uska { max-width: 760px; margin: 0 auto; }
.sek-siroka { max-width: 1200px; margin: 0 auto; }

.sek-glava { margin-bottom: 3.5rem; }
.sek-glava.sredina { text-align: center; }
.sek-glava.sredina .uvodni { margin: 1.2rem auto 0; }
.sek-glava .uvodni { margin-top: 1.2rem; }

.papir-2 { background: var(--papir-2); }

/* dvostruka linija — motiv graviranih pozivnica */
.dupla-crta {
  width: 64px; height: 5px;
  border-top: 1px solid var(--ruza);
  border-bottom: 1px solid var(--ruza);
  margin: 1.6rem 0;
}
.sredina .dupla-crta { margin-left: auto; margin-right: auto; }

/* ---------- hero ---------- */

/* ---------- telefon ---------- */

.telefon-pozornica {
  display: flex; justify-content: center;
  position: relative;
}

.telefon {
  width: 264px;
  aspect-ratio: 9 / 18.6;
  background: var(--bijela);
  border: 11px solid #232323;
  border-radius: 42px;
  box-shadow:
    0 2px 4px rgba(34,49,42,0.08),
    0 24px 64px rgba(34,49,42,0.18);
  overflow: hidden;
  position: relative;
}
.telefon::before {
  content: '';
  position: absolute; top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 19px;
  background: #232323;
  border-radius: 12px;
  z-index: 5;
}

/* ekran pozivnice unutar telefona */
.ekran {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 2.4rem 1.3rem 1.8rem;
  gap: 0.55rem;
}

/* Ekran unutar .predlozak — block container za scroll traku */
.predlozak .ekran {
  display: block;
  padding: 0;
  overflow: hidden; /* sprječava bleeding ekran-trake izvan telefona */
}

/* palete po predlošku */

.scr-roseheart { background: #FBF5EE; color: #8E3B38; }

/* ---------- jelovnik-lista (sadržaj pozivnice) ---------- */

/* ---------- mreža telefona (predlošci) ---------- */

.predlosci-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 3.5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.predlozak {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.predlozak .telefon {
  width: 232px;
  /* transform na hoveru kontrolira JS (3D tilt) */
  will-change: transform;
  transform-style: preserve-3d;
}
/* JS tilt: samo box-shadow na CSS hoveru, bez transform */
.predlozak:hover .telefon {
  box-shadow:
    0 4px 8px rgba(34,49,42,0.10),
    0 36px 80px rgba(34,49,42,0.26);
}

/* Sjaj/glare koji prati kursor */

.predlozak-znacka {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ruza-tamna);
  border: 1px solid var(--ruza);
  padding: 0.25rem 0.8rem;
  margin-bottom: 1.1rem;
}
.predlozak-znacka.prazna { visibility: hidden; }

.predlozak-ime {
  font-family: 'Marcellus', serif;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 1.6rem;
}

.predlozak-opis {
  font-size: 0.85rem;
  color: var(--tinta-meka);
  max-width: 30ch;
  margin: 0.5rem 0 1.3rem;
}

.predlozak-oznake {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  min-height: 1.75rem;
  margin: -0.4rem 0 1.1rem;
  padding: 0;
  list-style: none;
}
.predlozak-oznake li {
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--crta);
  border-radius: 999px;
  color: var(--tinta-meka);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predlozak-akcije {
  display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center;
}
.predlozak-akcije .gumb,
.predlozak-akcije .gumb-okvir {
  padding: 0.7rem 1.3rem;
  font-size: 0.66rem;
}

/* ---------- scroll reveal unutar ekrana ---------- */

/* Hover → klizi gore i otkriva donju sekciju */

/* Donja sekcija — blago drugačija atmosfera */

/* ---------- traka s cijenom ---------- */

.cijena-traka {
  border-top: 1px solid var(--crta);
  border-bottom: 1px solid var(--crta);
  padding: 3.2rem 4vw;
  text-align: center;
}
.cijena-traka .iznos {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.2rem, 7vw, 4.6rem);
  font-weight: 400;
  line-height: 1;
}
.cijena-traka .iznos sup {
  font-size: 0.4em;
  vertical-align: 1.1em;
  margin-left: 0.1em;
}
.cijena-traka .pod {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tinta-meka);
  margin-top: 0.6rem;
}

.cijena-napomena {
  max-width: 68ch;
  margin: 1.4rem auto 0;
  color: var(--tinta-meka);
  font-size: 0.86rem;
  line-height: 1.65;
}

.ukljuceno {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 2.2rem;
  margin-top: 1.8rem;
  list-style: none;
  font-size: 0.82rem;
  color: var(--tinta-meka);
}
.ukljuceno li::before {
  content: '·';
  color: var(--ruza);
  margin-right: 0.6rem;
}

/* ---------- program (kako funkcionira) ---------- */

.program {
  max-width: 640px; margin: 0 auto;
  position: relative;
  padding-left: 2.2rem;
}
.program::before {
  content: '';
  position: absolute; left: 5px; top: 12px; bottom: 12px;
  width: 1px;
  background: var(--crta);
}

.korak {
  position: relative;
  padding: 0 0 2.8rem;
}
.korak:last-child { padding-bottom: 0; }

.korak::before {
  content: '';
  position: absolute; left: -2.2rem; top: 9px;
  width: 11px; height: 11px;
  background: var(--papir);
  border: 1px solid var(--ruza-tamna);
  transform: rotate(45deg);
}

.korak-oznaka {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ruza-tamna);
  margin-bottom: 0.4rem;
}

.korak h3 { margin-bottom: 0.5rem; }

.korak p {
  font-size: 0.92rem;
  color: var(--tinta-meka);
  max-width: 52ch;
}

/* program unutar tamne trake */

/* ---------- pitanja (FAQ) ---------- */

.pitanja { max-width: 720px; margin: 0 auto; }

.pitanja details {
  border-bottom: 1px solid var(--crta);
}
.pitanja details:first-child { border-top: 1px solid var(--crta); }

.pitanja summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  font-family: 'Marcellus', serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pitanja summary::-webkit-details-marker { display: none; }
.pitanja summary::after {
  content: '+';
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: var(--ruza-tamna);
  flex-shrink: 0;
  transition: transform 0.25s;
}
.pitanja details[open] summary::after { transform: rotate(45deg); }

.pitanja .odgovor {
  padding: 0 0 1.4rem;
  font-size: 0.92rem;
  color: var(--tinta-meka);
  max-width: 60ch;
}

/* ---------- kontakt kartica (RSVP stil) ---------- */

.rsvp-kartica {
  max-width: 620px; margin: 0 auto;
  background: var(--bijela);
  border: 1px solid var(--crta);
  outline: 1px solid var(--crta);
  outline-offset: 6px;
  padding: 3.5rem 3rem;
  text-align: center;
}

.rsvp-kartica .skript {
  font-size: 2.6rem;
  color: var(--ruza-tamna);
  display: block;
  margin-bottom: 0.4rem;
}

.kontakt-stavke {
  margin: 2.4rem 0;
  display: flex; flex-direction: column; gap: 0;
}

.kontakt-stavka {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--crta);
  text-decoration: none;
  transition: padding-left 0.25s;
}
.kontakt-stavka:first-child { border-top: 1px solid var(--crta); }
.kontakt-stavka:hover { padding-left: 0.5rem; }

.kontakt-stavka .vrsta {
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tinta-meka);
}
.kontakt-stavka .vrijednost {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
}

.rsvp-biljeska {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--tinta-meka);
}

/* ---------- razno ---------- */

.sredina-akcija { text-align: center; margin-top: 3rem; }

/* ---------- podnožje ---------- */

.dno {
  background: var(--tinta);
  color: rgba(251,249,243,0.6);
}

.dno-unutra {
  max-width: 1200px; margin: 0 auto;
  padding: 4.5rem 4vw 3rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 3rem;
}

.dno-brand .logo-skript { color: var(--papir); font-size: 2rem; }
.dno-brand p { font-size: 0.84rem; margin-top: 0.8rem; line-height: 1.8; }

.dno-crta {
  border-top: 1px solid var(--crta-tamna);
  max-width: 1200px; margin: 0 auto;
  padding: 1.4rem 4vw;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* ---------- otkrivanje pri pomicanju ---------- */

.otkrij {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.otkrij.vidljivo { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .otkrij { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- mobilno ---------- */

@media (max-width: 980px) {
  .hamburger { display: flex; }

  .meni {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--vrh-visina);
    background: var(--papir);
    flex-direction: column;
    justify-content: center;
    gap: 1.65rem;
    z-index: 99;
  }
  body.meni-otvoren .meni { display: flex; }
  body.meni-otvoren { overflow: hidden; }
  .meni a,
  .meni-odjava button {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.92rem;
  }
}

@media (max-width: 900px) {
  .telefon-pozornica { order: 2; }

  .dno-unutra { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .sek { padding: 4.5rem 6vw; }

  .rsvp-kartica { padding: 2.5rem 1.6rem; }
  .kontakt-stavka { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/* === izvor: telefoni.css (prije inline na početnoj i predlošcima) === */
/* telefoni.css — iframe preview, zoom umjesto scale (fixed pozadina radi) */

.budi-telefon {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.budi-telefon.budan { opacity: 1; transform: translateY(0); }
.budi-telefon:nth-child(2) { transition-delay: 0.14s; }
.budi-telefon:nth-child(3) { transition-delay: 0.28s; }
.budi-telefon:nth-child(4) { transition-delay: 0.42s; }
.budi-telefon:nth-child(5) { transition-delay: 0.56s; }

/* ---- TELEFON OKVIR ---- */
.predlozak .telefon {
  width: 186px !important;
  height: 384px !important;
  box-sizing: border-box !important;
  border: 10px solid #232323 !important;
  border-radius: 40px !important;
  background: #232323 !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}
.predlozak .telefon::before { display: none !important; }

/* Iframe previews use zoom rather than transform so fixed demo backgrounds
   remain fixed while the real invitation scrolls. */
.telefon--demo {
  --preview-zoom: 0.783;
  width: 312px !important;
  height: 660px !important;
  box-sizing: border-box !important;
  border: 10px solid #232323 !important;
  border-radius: 46px !important;
  background: #232323 !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}
.telefon--demo::before { display: none !important; }

/* ---- WRAPPER ---- */
.ekran-iframe-wrap {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: 30px;
  z-index: 1;
  background: #fdf8f6;
}

/* ---- IFRAME ----
   KLJUČNO: koristimo `zoom` umjesto `transform: scale()`.
   transform:scale LOMI position:fixed unutar iframea (Chrome bug),
   pa fiksna pozadina počne pratiti scroll. zoom to ne radi.

   inner širina telefona = 186 - 20 = 166px
   zoom = 166 / 373 = 0.445
   iframe je visine pravog mobilnog ekrana, scroll je UNUTRA  */
.ekran-iframe {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 373px !important;
  height: 818px !important;
  border: 0 !important;
  zoom: var(--preview-zoom, 0.445) !important;
  pointer-events: none !important;
  background: #fdf8f6;
  /* fallback za preglednike bez zoom (Firefox stariji): */
  -moz-transform: scale(var(--preview-zoom, 0.445));
  -moz-transform-origin: 0 0;
}

/* ---- Mreža ---- */
@media (max-width: 680px) {
  /* inner = 130px; 130/373 = 0.3485 */
}

@media (max-width: 560px) {
  .telefon--demo {
    --preview-zoom: 0.65;
    width: 263px !important;
    height: 552px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .budi-telefon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === izvor: registracija.css (prije inline na stranicama računa) === */
.registracija-page {
  min-height: calc(100vh - 80px);
  padding-top: 10rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(185, 127, 120, 0.14), transparent 27rem),
    linear-gradient(135deg, var(--papir) 0%, #f7f1e8 100%);
}

.registracija-wrap {
  width: min(1040px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
}

.registracija-intro h1 {
  max-width: 12ch;
}

.registracija-intro .uvodni {
  margin-top: 1.4rem;
}

.registracija-benefits {
  list-style: none;
  margin-top: 3rem;
  border-top: 1px solid var(--crta);
}

.registracija-benefits li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--crta);
  color: var(--tinta-meka);
  font-size: 0.9rem;
}

.registracija-benefits span {
  color: var(--ruza-tamna);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
}

.registracija-card {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--crta);
  outline: 1px solid rgba(185, 127, 120, 0.32);
  outline-offset: 7px;
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 24px 70px rgba(34, 49, 42, 0.08);
}

.registracija-card-head {
  margin-bottom: 2.25rem;
}

.registracija-card-head h2,
.registracija-success h2 {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.registracija-card-head p,
.registracija-success p,
.registracija-continuation p {
  margin-top: 0.75rem;
  color: var(--tinta-meka);
  font-size: 0.9rem;
}

.registracija-alert {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--ruza-tamna);
  background: rgba(185, 127, 120, 0.1);
  color: #7f403b;
  font-size: 0.86rem;
}

.registracija-alert a {
  color: inherit;
  text-decoration: underline;
}

/* D13: čekanje potvrde plaćanja — mirna boja, ne crvena kao greška. */
.registracija-alert.racun-ceka {
  border-left-color: #8a7a4a;
  background: rgba(138, 122, 74, 0.1);
  color: #5f5330;
}

.racun-odbijeno {
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #8b3f39;
  background: rgba(139, 63, 57, 0.08);
  color: #7f403b;
  font-size: 0.86rem;
}

.registracija-form {
  display: grid;
  gap: 1.35rem;
}

.racun-payment-form {
  display: inline-flex;
  margin: 0;
}

.racun-payment-form .gumb,
.racun-payment-form .gumb-okvir {
  cursor: pointer;
  font: inherit;
}

.registracija-field label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--tinta);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.registracija-field input {
  width: 100%;
  border: 1px solid var(--crta);
  border-radius: 0;
  background: var(--papir);
  color: var(--tinta);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.9rem 1rem;
  transition: border-color 0.2s, background 0.2s;
}

.registracija-field input:focus {
  border-color: var(--ruza-tamna);
  background: var(--bijela);
  outline: none;
  box-shadow: 0 0 0 3px rgba(185, 127, 120, 0.13);
}

.registracija-field small {
  display: block;
  margin-top: 0.4rem;
  color: var(--tinta-meka);
  font-size: 0.72rem;
  line-height: 1.5;
}

.registracija-field.has-error input {
  border-color: var(--ruza-tamna);
}

.registracija-field .registracija-error {
  color: #8b3f39;
}

.registracija-submit {
  width: 100%;
  margin-top: 0.25rem;
  cursor: pointer;
}

.registracija-note {
  text-align: center;
  color: var(--tinta-meka);
  font-size: 0.72rem;
}

.registracija-note a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* A5: rečenica o pristanku — linkovi u tekstu, bez 44px „kutija" koje bi
   razvukle redak (dodirna ploha je cijela rečenica, ne treba je povećavati). */
.registracija-note.registracija-pristanak { line-height: 1.6; margin-top: 0.9rem; }
.registracija-pristanak a { display: inline; min-height: 0; }

.registracija-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.registracija-success {
  text-align: center;
  padding: 1rem 0;
}

.registracija-success-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.6rem;
  border: 1px solid var(--ruza);
  border-radius: 50%;
  color: var(--ruza-tamna);
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
}

.registracija-success .nadnaslov {
  margin-bottom: 0.75rem;
}

.registracija-success .gumb {
  margin-top: 2rem;
}

.registracija-continuation {
  text-align: center;
  padding: 1rem 0;
}

.registracija-continuation .nadnaslov {
  margin-bottom: 0.75rem;
}

.registracija-choice-actions {
  display: grid;
  gap: 0.85rem;
  margin-top: 2rem;
}

.registracija-choice-actions .gumb,
.registracija-choice-actions .gumb-okvir {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.registracija-mail-note {
  margin-top: 1.2rem !important;
  color: var(--tinta) !important;
}

.registracija-mail-link {
  display: inline-block;
  margin-top: 0.45rem;
  color: var(--ruza-tamna);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.racun-page {
  min-height: calc(100vh - 80px);
  padding-top: 10rem;
  background: linear-gradient(135deg, var(--papir) 0%, #f7f1e8 100%);
}

.racun-wrap {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.racun-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.racun-head-akcije {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  flex: none;
}

/* „Postavke računa" je okvirni gumb kao „Uredi" na karticama, iste širine
   kao „Izradi novu pozivnicu" iznad njega. */
.racun-head-akcije .gumb,
.racun-head-akcije .gumb-okvir {
  justify-content: center;
  text-align: center;
}

.racun-head-akcije {
  align-items: stretch;
}

.racun-head .uvodni {
  margin-top: 1rem;
  overflow-wrap: anywhere;
}

.racun-empty {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--crta);
  padding: clamp(2.5rem, 7vw, 5rem);
  text-align: center;
}

.racun-empty h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.racun-empty p {
  max-width: 54ch;
  margin: 1rem auto 2rem;
  color: var(--tinta-meka);
}

.racun-invitations {
  display: grid;
  gap: 1rem;
}

.racun-invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--crta);
  background: rgba(255, 255, 255, 0.92);
}

.racun-invitation h2 {
  margin-top: 0.6rem;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.racun-invitation p {
  margin-top: 0.45rem;
  color: var(--tinta-meka);
  font-size: 0.85rem;
}

.racun-status {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--crta);
  color: var(--tinta-meka);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.racun-status-trial { color: var(--ruza-tamna); }
.racun-status-active { color: #356545; }
.racun-status-archived { color: #8b3f39; }

/*
 * Red radnji uz pozivnicu (D14): do sada nije imao vlastito pravilo, pa su se
 * gumbi slagali kao tekst — s četvrtim gumbom („Skini s mreže") zadnji je
 * ispadao u novi red i visio odvojen od ostalih. Flex s prelamanjem drži ih
 * u jednom nizu dok ima mjesta, a kad nema, lome se uredno i poravnati.
 */
.racun-invitation-actions {
  --racun-gumb: 10rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.racun-invitation-actions > * {
  margin: 0;
}

/* Svi gumbi iste širine I visine, tekst u jednom retku. Prije je villa.css
   davao 2.2rem bočnog paddinga, pa se „Aktiviraj za 55 €" lomio u dva retka
   i gumb bio viši od susjeda; `font: inherit` na <button> u formi k tome je
   vraćao veći font tijela. Ovdje se sve izjednačava. */
.racun-invitation-actions .gumb,
.racun-invitation-actions .gumb-okvir,
.racun-invitation-actions .racun-payment-form {
  width: var(--racun-gumb);
  min-width: 0;
  height: 46px;
  min-height: 46px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.racun-invitation-actions .gumb,
.racun-invitation-actions .gumb-okvir {
  display: inline-flex;
  padding: 0 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.racun-invitation-actions .racun-payment-form .gumb,
.racun-invitation-actions .racun-payment-form .gumb-okvir {
  width: 100%;
}

/* Desktop: gumbi u JEDNOM redu. Kartica daje prostor gumbima, a tekst lijevo
   se sužava (i lomi) umjesto da gura gumbe u drugi red. */
@media (min-width: 1025px) {
  .racun-invitation-info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .racun-invitation-actions {
    flex: none;
  }
}

/* Napomena o javnom linku: vlastiti redak ispod gumba (`flex-basis: 100%`),
   ne još jedna pločica u nizu — nije radnja nego stanje. */
.racun-unavailable {
  flex-basis: 100%;
  /* Bez vlastite intrinzične širine: inače bi širina napomene ulazila u
     širinu reda gumba i razvlačila ga. */
  contain: inline-size;
  margin: 0.15rem 0 0;
  color: var(--tinta-meka);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

.racun-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--crta);
  color: var(--tinta-meka);
  font-size: 0.8rem;
}

.racun-meta strong {
  color: var(--tinta);
  font-weight: 400;
}

@media (max-width: 820px) {
  .registracija-page {
    padding-top: 8.5rem;
  }

  .registracija-wrap {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .registracija-intro h1 {
    max-width: 15ch;
  }

  .racun-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .racun-invitation {
    align-items: flex-start;
    flex-direction: column;
  }

  .racun-postavka {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Na uskom ekranu fiksna širina bi izlazila iz kartice. */
  .racun-invitation-actions {
    --racun-gumb: 100%;
    justify-content: stretch;
    width: 100%;
  }

  .racun-unavailable {
    text-align: left;
  }

  .racun-postavka .gumb-okvir {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .registracija-page {
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .registracija-card {
    padding: 2rem 1.35rem;
    outline-offset: 4px;
  }
}

/* ============================================================
   ODGOVORI GOSTIJU (D2)

   Tablica je na telefonu preuska za pet stupaca, pa se ispod 700 px svaki
   redak pretvara u karticu, a zaglavlje stupca dolazi iz `data-oznaka`.
   Vodoravni skrol je zadržan kao zaštita: `overflow-x` na okviru drži tablicu
   u svojoj kutiji čak i kad je poruka gosta jedna duga riječ.
   ============================================================ */

.odgovori-alat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.odgovori-nota {
  color: var(--muted);
  font-size: 0.82rem;
}

.odgovori-tablica-okvir {
  overflow-x: auto;
  border: 1px solid var(--crta);
  background: var(--bijela);
}

.odgovori-tablica {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.odgovori-tablica th,
.odgovori-tablica td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--crta);
  text-align: left;
  vertical-align: top;
}

.odgovori-tablica thead th {
  background: var(--papir-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.odgovori-tablica tbody tr:last-child td { border-bottom: 0; }

.odgovori-tablica td small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.odgovori-znak {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border: 1px solid var(--crta);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.odgovori-znak.je-dolazi { border-color: rgba(53, 101, 69, 0.4); color: #356545; }
.odgovori-znak.je-ne-dolazi { color: var(--muted); }

.odgovori-prazno { color: var(--muted); }

@media (max-width: 700px) {
  .odgovori-tablica-okvir { border: 0; background: transparent; overflow-x: visible; }
  .odgovori-tablica, .odgovori-tablica tbody, .odgovori-tablica tr, .odgovori-tablica td { display: block; width: 100%; }
  .odgovori-tablica thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .odgovori-tablica tr {
    margin-bottom: 0.9rem;
    border: 1px solid var(--crta);
    background: var(--bijela);
  }

  .odgovori-tablica td {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
  }

  .odgovori-tablica td::before {
    content: attr(data-oznaka);
    flex: none;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .odgovori-alat .gumb { width: 100%; text-align: center; }
}

/* D14: postavke računa i opasne radnje ------------------------------------ */
/* Stranica „Postavke računa": iste kartice kao popis pozivnica, da se ne
   doima kao neki drugi dio aplikacije. */
.racun-postavke-popis {
  display: grid;
  gap: 1.25rem;
}

.racun-postavka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--crta);
  background: rgba(255, 255, 255, 0.92);
}

.racun-postavka h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.racun-postavka p {
  margin: 0.3rem 0 0;
  color: var(--tinta-meka);
  font-size: 0.9rem;
  line-height: 1.55;
}

.racun-postavka .gumb-okvir {
  flex: none;
  width: 14rem;
  justify-content: center;
  text-align: center;
}

.racun-postavka-sitno {
  font-size: 0.82rem !important;
}

.racun-postavka--opasno {
  border-color: rgba(139, 63, 57, 0.35);
}

.racun-postavke-opasno,
.gumb-opasno {
  color: #8b3f39;
}

.gumb.gumb-opasno {
  background: #8b3f39;
  border-color: #8b3f39;
  color: #fff;
}

.gumb.gumb-opasno[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * Sporedna radnja („Obriši", „Skini s mreže"): tiša od ostalih, ali NE prozirna
 * — prozirnost je izgledala kao onemogućen gumb, pa se činilo da ne radi.
 */
.racun-tiho {
  border-color: rgba(44, 36, 24, 0.22);
  color: var(--tinta-meka);
}

.racun-tiho:hover {
  border-color: var(--tinta);
  color: var(--tinta);
}

.registracija-checkbox {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.45;
}

.registracija-checkbox input {
  margin-top: 0.25rem;
  flex: none;
}

.racun-brisanje-popis {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.racun-brisanje-placena {
  display: block;
  color: #8b3f39;
  font-size: 0.85rem;
}


/* A5: obavijest o raskidu uz „Aktiviraj" — dijeli smještaj s .racun-unavailable
   (vlastiti redak ispod gumba), ali je rečenica, ne oznaka: bez verzala. */
.racun-pristanak {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.8rem;
  line-height: 1.55;
}
.racun-pristanak a { color: inherit; text-underline-offset: 3px; }

/* === izvor: redesign.css === */
/*
 * Editorial Intimacy — shared visual layer
 * Keeps the legacy markup and business flow intact while unifying the public
 * site, catalogue, account and authentication screens.
 */

:root {
  color-scheme: light;

  /* Brand */
  --color-canvas: #f4f0e8;
  --color-canvas-soft: #ebe4d8;
  --color-surface: #fffdf8;
  --color-surface-muted: #f9f5ee;
  --color-ink: #17251f;
  --color-ink-soft: #5c6962;
  --color-forest: #1d4034;
  --color-forest-deep: #102b23;
  --color-rose: #a96762;
  --color-rose-deep: #854e4a;
  --color-copper: #b9885d;
  --color-line: rgba(23, 37, 31, 0.15);
  --color-line-inverse: rgba(255, 253, 248, 0.2);

  /* Typography */
  --font-display: 'Newsreader', 'Iowan Old Style', 'Baskerville', Georgia, serif;
  --font-ui: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --text-xs: 0.72rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lead: clamp(1.05rem, 1.4vw, 1.2rem);
  --display-xl: clamp(3.25rem, 7.4vw, 7.2rem);
  --display-lg: clamp(2.55rem, 5vw, 5rem);
  --display-md: clamp(2rem, 3.4vw, 3.4rem);

  /* Layout */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  --space-9: 9rem;
  --content-wide: 1240px;
  --content-copy: 720px;
  --radius-sm: 3px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 70px rgba(21, 42, 33, 0.09);
  --shadow-lift: 0 30px 90px rgba(21, 42, 33, 0.16);

  /* Motion */
  --motion-fast: 180ms;
  --motion-ui: 240ms;
  --motion-reveal: 620ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* Legacy aliases */
  --papir: var(--color-canvas);
  --papir-2: var(--color-canvas-soft);
  --tinta: var(--color-ink);
  --tinta-meka: var(--color-ink-soft);
  --ruza: var(--color-rose);
  --ruza-tamna: var(--color-rose-deep);
  --crta: var(--color-line);
  --crta-tamna: var(--color-line-inverse);
  --sampanj: var(--color-copper);
  --bijela: var(--color-surface);
  --muted: var(--color-ink-soft);
  --font-naslov: var(--font-display);
}

html {
  background: var(--color-canvas);
  scroll-padding-top: 86px;
}

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 8% 2%, rgba(185, 136, 93, 0.11), transparent 26rem),
    var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main { overflow: clip; }

a,
button,
input,
textarea,
select,
summary { -webkit-tap-highlight-color: transparent; }

::selection {
  background: var(--color-forest);
  color: var(--color-surface);
}

:focus-visible {
  outline: 2px solid var(--color-rose-deep);
  outline-offset: 4px;
  box-shadow: none;
}

.skok {
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--color-forest-deep);
  color: var(--color-surface);
}

/* Typography */
h1,
h2,
h3,
.predlozak-ime {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  text-transform: none;
}

h1 {
  max-width: 14ch;
  font-size: var(--display-lg);
  line-height: 0.98;
}

h2 {
  max-width: 16ch;
  font-size: var(--display-md);
  line-height: 1.02;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.08;
}

.sredina h1,
.sredina h2 { margin-inline: auto; }

.kurziv {
  color: var(--color-rose-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.skript {
  color: var(--color-rose-deep) !important;
  font-family: var(--font-display);
  font-style: italic;
}

.nadnaslov {
  margin-bottom: var(--space-4);
  color: var(--color-rose-deep);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.4;
}

.uvodni {
  max-width: 58ch;
  color: var(--color-ink-soft);
  font-size: var(--text-lead);
  line-height: 1.72;
}

.dupla-crta {
  width: 84px;
  height: 1px;
  margin-block: var(--space-5);
  border: 0;
  background: linear-gradient(90deg, var(--color-rose), var(--color-copper), transparent);
}

.sredina .dupla-crta,
.sek-uska[style*="center"] .dupla-crta {
  background: linear-gradient(90deg, transparent, var(--color-rose), var(--color-copper), transparent);
}

/* Buttons */
.gumb,
.gumb-okvir,
.gumb-svijetli {
  position: relative;
  min-height: 50px;
  gap: 0.7rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease;
}

.gumb {
  border-color: var(--color-forest-deep);
  background: var(--color-forest-deep);
  color: var(--color-surface);
  box-shadow: 0 10px 24px rgba(16, 43, 35, 0.12);
}

.gumb:hover {
  border-color: var(--color-rose-deep);
  background: var(--color-rose-deep);
  color: var(--color-surface);
  box-shadow: 0 14px 34px rgba(133, 78, 74, 0.2);
  transform: translateY(-2px);
}

.gumb:active,
.gumb-okvir:active,
.gumb-svijetli:active { transform: translateY(0); }

.gumb-okvir {
  border-color: var(--color-line);
  background: rgba(255, 253, 248, 0.42);
  color: var(--color-ink);
}

.gumb-okvir:hover {
  border-color: var(--color-forest);
  background: var(--color-surface);
  color: var(--color-forest-deep);
  transform: translateY(-2px);
}

.gumb-svijetli {
  border-color: rgba(255, 253, 248, 0.42);
  color: var(--color-surface);
}

.gumb-svijetli:hover {
  border-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-forest-deep);
  transform: translateY(-2px);
}

/* Header */
.vrh {
  border-bottom: 1px solid rgba(23, 37, 31, 0.11);
  background: rgba(244, 240, 232, 0.88);
  box-shadow: 0 8px 30px rgba(21, 42, 33, 0.03);
  backdrop-filter: blur(18px) saturate(125%);
}

.vrh-unutra {
  width: min(100%, calc(var(--content-wide) + 8vw));
  min-height: 76px;
  padding: 0.72rem 4vw;
}

.logo { min-width: max-content; }

.logo-skript {
  color: var(--color-forest-deep);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.logo-pod {
  margin-top: 0.3rem;
  padding-left: 0;
  color: var(--color-ink-soft);
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.27em;
}

.meni { gap: clamp(0.85rem, 1.35vw, 1.45rem); }

.meni a,
.meni-odjava button {
  color: var(--color-ink-soft);
  font-family: var(--font-ui);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.meni a.je-aktivna {
  border-bottom-color: var(--color-rose);
  color: var(--color-ink);
}

.meni-cta {
  min-height: 44px;
  align-items: center;
  border-color: var(--color-forest-deep) !important;
  background: var(--color-forest-deep);
  color: var(--color-surface) !important;
}

.meni-cta:hover,
.meni-cta.je-aktivna {
  border-color: var(--color-rose-deep) !important;
  background: var(--color-rose-deep);
}

/* Layout */
.sek {
  position: relative;
  padding: var(--space-9) 4vw;
}

.sek-siroka { max-width: var(--content-wide); }

.sek-uska { max-width: var(--content-copy); }

.sek-glava { margin-bottom: var(--space-7); }

.papir-2 {
  background:
    linear-gradient(115deg, rgba(255, 253, 248, 0.58), transparent 42%),
    var(--color-canvas-soft);
}

/* Hero */

.telefon-pozornica {
  isolation: isolate;
  min-height: 596px;
  align-items: center;
  perspective: 1600px;
  perspective-origin: 56% 46%;
}

.telefon-pozornica::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(36vw, 470px);
  aspect-ratio: 1;
  border: 1px solid rgba(133, 78, 74, 0.18);
  border-radius: 50%;
}

.telefon {
  width: 292px;
  border-width: 9px;
  border-color: #121915;
  border-radius: 46px;
  background: #121915;
  box-shadow: 0 35px 90px rgba(16, 43, 35, 0.24);
}

.telefon::before {
  width: 82px;
  height: 18px;
  background: #121915;
}

.scr-roseheart-v3 {
  background:
    radial-gradient(ellipse at 50% 26%, rgba(169, 103, 98, 0.24), transparent 42%),
    #fbf3ed;
  color: #854e4a;
}

/* Value rail */

/* Feature list */

/* Template collection */
.predlosci-mreza {
  max-width: var(--content-wide);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
}

.predlozak {
  position: relative;
  min-width: 0;
  justify-content: flex-start;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(249, 245, 238, 0.8));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition:
    transform var(--motion-ui) var(--ease-standard),
    border-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease;
}

.predlozak::before {
  content: '';
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(23, 37, 31, 0.055);
  border-radius: calc(var(--radius-md) - 5px);
  pointer-events: none;
}

.predlozak-redni {
  position: absolute;
  top: 1.35rem;
  left: 1.5rem;
  color: rgba(23, 37, 31, 0.34);
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
}

.predlozak:hover {
  z-index: 2;
  border-color: rgba(133, 78, 74, 0.34);
  box-shadow: var(--shadow-soft);
  transform: translateY(-6px);
}

.predlozak .telefon { margin-top: 0.25rem; }

.predlozak-znacka {
  position: relative;
  z-index: 2;
  border: 0;
  border-bottom: 1px solid rgba(133, 78, 74, 0.32);
  color: var(--color-rose-deep);
  font-size: 0.59rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.predlozak-ime {
  margin-top: var(--space-5);
  color: var(--color-ink);
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
  letter-spacing: -0.025em;
  line-height: 1;
}

.predlozak-opis {
  min-height: 5.2em;
  max-width: 34ch;
  margin: 0.85rem 0 1rem;
  color: var(--color-ink-soft);
  font-size: 0.82rem;
  line-height: 1.7;
}

.predlozak-oznake {
  min-height: auto;
  margin: 0 0 1.2rem;
  gap: 0.35rem;
}

.predlozak-oznake li {
  border-color: rgba(23, 37, 31, 0.12);
  background: rgba(244, 240, 232, 0.7);
  color: var(--color-ink-soft);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.predlozak-cijena {
  margin: 0 0 1.25rem;
  color: var(--color-rose-deep);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.predlozak-akcije {
  width: 100%;
  margin-top: auto;
  gap: 0.55rem;
}

.predlozak-akcije form { display: contents; }

.predlozak-akcije .gumb,
.predlozak-akcije .gumb-okvir {
  flex: 1 1 145px;
  padding: 0.8rem 1rem;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
}

/* Razmak od zaglavlja sada nosi --razmak-vrh u villa.css (main > .sek:first-child). */

.predlosci-page .predlosci-mreza {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2.5vw, 2rem) !important;
  align-items: stretch;
}

.predlosci-page .predlozak { width: 100%; }

/* Process */
.program { padding-left: 3.5rem; }

.program::before { left: 13px; }

.korak { padding-bottom: 3.25rem; }

.korak::before {
  left: -3.5rem;
  top: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-rose);
  border-radius: 50%;
  background: var(--color-canvas);
  transform: none;
}

.korak-oznaka {
  margin-bottom: 0.6rem;
  color: var(--color-rose-deep);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.korak h3 { margin-bottom: 0.7rem; }
.korak p { color: var(--color-ink-soft); font-size: 0.9rem; line-height: 1.65; }

/* Price */
.cijena-traka {
  position: relative;
  overflow: hidden;
  padding: clamp(5.5rem, 9vw, 8.5rem) 4vw;
  border: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(169, 103, 98, 0.14), transparent 22rem),
    radial-gradient(circle at 85% 70%, rgba(185, 136, 93, 0.14), transparent 22rem),
    var(--color-surface-muted);
}

.cijena-traka::before,
.cijena-traka::after {
  content: '';
  position: absolute;
  top: 50%;
  width: min(22vw, 280px);
  height: 1px;
  background: var(--color-line);
}

.cijena-traka::before { left: 4vw; }
.cijena-traka::after { right: 4vw; }

.cijena-traka .iznos {
  color: var(--color-forest-deep);
  font-family: var(--font-display);
  font-size: clamp(5rem, 11vw, 9rem);
  letter-spacing: -0.07em;
}

.cijena-traka .pod {
  color: var(--color-rose-deep);
  font-weight: 600;
  letter-spacing: 0.16em;
}

.ukljuceno {
  max-width: 900px;
  margin: 2.2rem auto 0;
  color: var(--color-ink-soft);
  font-size: 0.8rem;
}

.cijena-napomena {
  max-width: 72ch;
  margin-top: 2rem;
  color: var(--color-ink-soft);
}

/* FAQ, contact and supporting pages */
.pitanja { max-width: 820px; }

.pitanja details {
  border-color: var(--color-line);
  background: rgba(255, 253, 248, 0.3);
}

.pitanja summary {
  min-height: 68px;
  align-items: center;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.pitanja details[open] {
  margin-inline: -1rem;
  padding-inline: 1rem;
  background: rgba(255, 253, 248, 0.7);
}

.kontakt-stavka { min-height: 74px; border-color: var(--color-line); }
.kontakt-stavka .vrsta { color: var(--color-rose-deep); font-weight: 600; }
.kontakt-stavka .vrijednost { font-family: var(--font-display); font-size: 1.1rem; }

.rsvp-kartica {
  border-color: var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.88);
  box-shadow: var(--shadow-soft);
}

/* Authentication and account */
.registracija-page,
.racun-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(169, 103, 98, 0.14), transparent 28rem),
    radial-gradient(circle at 88% 82%, rgba(185, 136, 93, 0.12), transparent 24rem),
    var(--color-canvas);
}

.registracija-wrap { max-width: 1120px; }

.registracija-card,
.racun-empty,
.racun-invitation {
  border-color: var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: var(--shadow-soft);
}

.registracija-card {
  outline: 0;
  padding: clamp(2rem, 5vw, 4rem);
}

.registracija-benefits li { border-color: var(--color-line); }
.registracija-benefits span { color: var(--color-rose-deep); font-family: var(--font-display); }

.registracija-field label {
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.registracija-field input {
  min-height: 50px;
  border-color: var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-ink);
}

.registracija-field input:focus {
  border-color: var(--color-rose-deep);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px rgba(169, 103, 98, 0.12);
}

.registracija-alert {
  border-left-color: var(--color-rose-deep);
  border-radius: var(--radius-sm);
  background: rgba(169, 103, 98, 0.1);
}

.racun-head { align-items: center; }

.racun-invitation {
  padding: clamp(1.5rem, 4vw, 2.6rem);
  transition: transform var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui) ease;
}

.racun-invitation:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.racun-status {
  border-radius: 999px;
  background: var(--color-surface-muted);
  font-weight: 600;
}

.racun-invitation-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }

/* Footer */
.dno {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 8vw, 7.5rem) 4vw 2rem;
  background:
    radial-gradient(circle at 85% 10%, rgba(185, 136, 93, 0.16), transparent 22rem),
    var(--color-forest-deep);
  color: rgba(255, 253, 248, 0.65);
}

.dno::before {
  content: 'P';
  position: absolute;
  right: -0.05em;
  bottom: -0.3em;
  color: rgba(255, 253, 248, 0.035);
  font-family: var(--font-display);
  font-size: clamp(18rem, 38vw, 34rem);
  font-style: italic;
  line-height: 1;
  pointer-events: none;
}

.dno-unutra,
.dno-crta { position: relative; z-index: 1; max-width: var(--content-wide); }

.dno-brand .logo-skript {
  color: var(--color-surface);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.dno-crta { border-color: var(--color-line-inverse); }

/* Progressive motion: content is visible unless JS has successfully opted in. */
.otkrij,
.budi-telefon {
  opacity: 1;
  transform: none;
}

.reveal-ready .otkrij:not(.vidljivo) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-reveal) var(--ease-standard), transform var(--motion-reveal) var(--ease-standard);
}

.phones-ready .budi-telefon:not(.budan) {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--motion-reveal) var(--ease-standard), transform var(--motion-reveal) var(--ease-standard);
}

.otkrij.vidljivo,
.budi-telefon.budan { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1100px) {
  .predlosci-page .predlosci-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 1101px) {
  .predlosci-page .predlozak:last-child:nth-child(3n + 1) { grid-column: 2; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .predlosci-page .predlozak:last-child:nth-child(odd) {
    width: calc(50% - 0.5rem);
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 980px) {
  .meni {
    top: var(--vrh-visina);
    padding: 2.5rem 7vw;
    background:
      radial-gradient(circle at 80% 15%, rgba(169, 103, 98, 0.13), transparent 20rem),
      var(--color-canvas);
  }

  .meni a,
  .meni-odjava button {
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
  }

  .meni-cta { padding-inline: 2rem !important; font-family: var(--font-ui) !important; font-size: 0.78rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }
}

@media (max-width: 900px) {
  .sek { padding-block: var(--space-8); }
  .telefon-pozornica { min-height: 596px; }
  .dno-unutra { gap: 3rem; }
}

@media (max-width: 760px) {
  .sek { padding: var(--space-8) 6vw; }

  .predlosci-mreza,
  .predlosci-page .predlosci-mreza { grid-template-columns: 1fr !important; }

  .predlozak { width: min(100%, 480px) !important; margin-inline: auto; padding: 1.6rem; }
  .predlozak-opis { min-height: 0; }

  .cijena-traka::before,
  .cijena-traka::after { display: none; }

  .ukljuceno { display: grid; gap: 0.65rem; }

  .racun-invitation-actions { width: 100%; justify-content: flex-start; }
  .racun-invitation-actions .gumb,
  .racun-invitation-actions .gumb-okvir,
  .racun-payment-form { width: 100%; }
  .racun-payment-form .gumb { width: 100%; }
}

@media (max-width: 560px) {
  .vrh-unutra { padding-inline: 5vw; }
  .logo-skript { font-size: 1.35rem; }
  .logo-pod { font-size: 0.44rem; }

  .telefon-pozornica { min-height: 574px; }
  .telefon { width: 250px; }
  .telefon-pozornica::before { width: 92vw; }

  .pitanja details[open] { margin-inline: 0; padding-inline: 0; }

  .dno-crta { align-items: flex-start; flex-direction: column; gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready .otkrij,
  .phones-ready .budi-telefon { opacity: 1; transform: none; transition: none; }
}

/* === izvor: villa.css (Villa Intima — važeći sustav) === */
/*
 * villa.css — Villa Intima vizualni sloj
 *
 * Učitava se POSLIJE site.css i redesign.css i premapira tokene te restilira
 * javne površine u odobreni smjer: ivory papir, olive traka, burgundy footer,
 * antique gold akcenti, Cormorant Garamond + Jost.
 *
 * Legacy markup, poslovna logika i mehanizam skrolanja pozivnica u telefonima
 * ostaju netaknuti — ovdje se mijenja samo prezentacija.
 */

/* ============================================================
   1. TOKENI
   ============================================================ */

:root {
  /* C13: visina zaglavlja — iz nje i mobilni izbornik uzima `top`, da se ne razmimoiđu. */
  --vrh-visina: 82px;
  /* Villa Intima paleta */
  --vi-ivory:        #F7F1E4;
  --vi-ivory-svijetli: #FBF6EC;
  --vi-ivory-meki:   #F2EADA;
  --vi-olive:        #4D5738;
  --vi-olive-svijetli: #5B6742;
  --vi-burgundy:     #2A1216;
  --vi-burgundy-meki: #3A1A20;
  --vi-zlato:        #D8B96C;
  --vi-zlato-duboko: #B08D3F;   /* dekorativno: crte, rubovi, ikone */
  --vi-zlato-tekst:  #6E5218;   /* tekst na ivory podlozi — 6.47:1 (ivory), 6.09:1 (ivory-meki),
                                   5.92:1 na zlatnoj plohi značke. Prijašnji #856520 padao je unutar
                                   značke na 4.40:1, ispod praga za sitan tekst. */
  --vi-fokus:        var(--vi-zlato-tekst);  /* obris fokusa; u tamnim pojasima prelazi na zlato */
  --vi-zlato-meko:   #C9A55C;
  --vi-zelena:       #2B3A31;
  --vi-zelena-meka:  #4C5A4E;
  --vi-pijesak:      #6F6146;   /* 5.05:1 na ivory */
  --vi-krem:         #E2D3BC;
  --vi-sjena:        rgba(26, 30, 16, 0.14);

  /* Premapiranje postojećih tokena */
  --color-canvas:        var(--vi-ivory);
  --color-canvas-soft:   var(--vi-ivory-meki);
  --color-surface:       var(--vi-ivory-svijetli);
  --color-surface-muted: var(--vi-ivory-meki);
  --color-ink:           var(--vi-zelena);
  --color-ink-soft:      var(--vi-zelena-meka);
  --color-forest:        var(--vi-olive);
  --color-forest-deep:   var(--vi-burgundy);
  --color-rose:          var(--vi-zlato-tekst);
  --color-rose-deep:     var(--vi-zlato-tekst);
  --color-copper:        var(--vi-zlato);
  --color-line:          rgba(43, 58, 49, 0.16);
  --color-line-inverse:  rgba(226, 211, 188, 0.24);

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Baskerville, Georgia, serif;
  --font-ui: 'Jost', 'Segoe UI', system-ui, Arial, sans-serif;

  /* Legacy aliasi */
  --papir:      var(--vi-ivory);
  --papir-2:    var(--vi-ivory-meki);
  --tinta:      var(--vi-zelena);
  --tinta-meka: var(--vi-zelena-meka);
  --ruza:       var(--vi-zlato-tekst);
  --ruza-tamna: var(--vi-zlato-tekst);
  --crta:       rgba(43, 58, 49, 0.16);
  --crta-tamna: rgba(226, 211, 188, 0.24);
  --sampanj:    var(--vi-zlato);
  --bijela:     var(--vi-ivory-svijetli);
  --muted:      var(--vi-zelena-meka);
  --font-naslov: var(--font-display);

  /*
   * Razmak od zaglavlja do prvog sadržaja. Zaglavlje je fiksno i visoko 82 px,
   * pa svaka prva sekcija mora imati toliko + zraka. Dosad je svaka stranica
   * imala svoju vrijednost (inline 8/9,5/11rem, plus `!important` u redesign.css),
   * pa je „VAŠ RAČUN" bio zalijepljen uz zaglavlje, a „KONTAKT" nije.
   */
  --razmak-vrh: 11rem;

  --vi-slika-ivory:    url('../images/landing/bg-ivory.webp');
  --vi-slika-olive:    url('../images/landing/bg-olive.webp');
  --vi-slika-burgundy: url('../images/landing/bg-burgundy.webp');
  --vi-slika-hero:     url('../images/landing/bg-hero.webp');
}

html {
  background: var(--vi-ivory);
  scroll-padding-top: 92px;
}

body {
  background: var(--vi-ivory);
  color: var(--vi-zelena);
  font-family: var(--font-ui);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--vi-zlato); color: var(--vi-burgundy); }

/*
 * Obris fokusa mora imati 3:1 prema podlozi. Dekorativno zlato (#B08D3F) na
 * ivory daje samo 2,77:1, a tamnije zlato (#6E5218) na burgundy 2,41:1 — nijedna
 * boja ne pokriva obje podloge. Zato token: tamno zlato na svijetlom, svijetlo
 * zlato u tamnim pojasima (zaglavlje, tinta-band, olive traka, podnožje).
 */
:focus-visible {
  outline: 2px solid var(--vi-fokus);
  outline-offset: 3px;
  box-shadow: none;
}

.vrh,
.vi-traka--olive,
.dno { --vi-fokus: var(--vi-zlato); }   /* 9,26:1 na burgundy · 4,05:1 na olive */

.skok {
  background: var(--vi-burgundy);
  color: var(--vi-zlato);
}

/* ============================================================
   2. TIPOGRAFIJA
   ============================================================ */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.16;
  text-transform: none;
  color: var(--vi-zelena);
}

h1 { max-width: 18ch; font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { max-width: 24ch; font-size: clamp(2rem, 3.9vw, 2.9rem); }
h3 { max-width: none; font-size: 1.35rem; letter-spacing: 0; }

.sredina h1, .sredina h2,
.sek-glava.sredina h1, .sek-glava.sredina h2 { margin-inline: auto; }

/* Slike s width/height atributima moraju zadržati omjer. */
img[width][height] { height: auto; }

.kurziv {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.skript {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--vi-zlato-tekst);
  letter-spacing: 0.01em;
}

.nadnaslov {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
  color: var(--vi-pijesak);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.nadnaslov::before,
.nadnaslov::after {
  content: '';
  display: block;
  width: clamp(30px, 5vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.sek-glava:not(.sredina) .nadnaslov::before { display: none; }

.uvodni {
  color: var(--vi-zelena-meka);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.75;
  max-width: 58ch;
}

.dupla-crta {
  width: 96px;
  height: 1px;
  margin: 1.5rem 0;
  border: 0;
  background: linear-gradient(90deg, var(--vi-zlato-duboko), rgba(176, 141, 63, 0));
}

.sredina .dupla-crta,
.sek-glava.sredina .dupla-crta {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, rgba(176, 141, 63, 0), var(--vi-zlato-duboko), rgba(176, 141, 63, 0));
}

/* ============================================================
   3. GUMBI
   ============================================================ */

.gumb, .gumb-okvir, .gumb-svijetli, .meni-cta {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  border-radius: 0;
  min-height: 46px;
  padding: 0.95rem 2.2rem;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background-color .3s ease,
              color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.gumb {
  background: var(--vi-olive);
  border: 1px solid rgba(216, 185, 108, 0.55);
  color: var(--vi-ivory-svijetli);
}

.gumb:hover {
  background: var(--vi-olive-svijetli);
  border-color: var(--vi-zlato);
  color: var(--vi-ivory-svijetli);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(26, 30, 16, 0.28);
}

.gumb:active { transform: translateY(1px); }

.gumb-okvir {
  background: transparent;
  border: 1px solid var(--vi-zlato-duboko);
  color: var(--vi-zelena);
}

.gumb-okvir:hover {
  background: rgba(216, 185, 108, 0.16);
  border-color: var(--vi-zlato);
  color: var(--vi-zelena);
  transform: translateY(-2px);
}

.gumb-svijetli {
  background: transparent;
  border: 1px solid rgba(216, 185, 108, 0.7);
  color: var(--vi-ivory-svijetli);
}

.gumb-svijetli:hover {
  background: rgba(216, 185, 108, 0.18);
  border-color: var(--vi-zlato);
  color: var(--vi-ivory-svijetli);
  transform: translateY(-2px);
}

/* ============================================================
   4. ZAGLAVLJE
   ============================================================ */

.vrh {
  position: fixed;
  z-index: 100;
  background: rgba(42, 18, 22, 0.94);
  border-bottom: 1px solid rgba(216, 185, 108, 0.18);
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(120%);
  transition: background-color .35s ease, border-color .35s ease;
}

/* Prozirno zaglavlje preko heroa na naslovnici */
.vrh--preko {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.vrh--preko.je-spustena {
  background: rgba(42, 18, 22, 0.94);
  border-bottom-color: rgba(216, 185, 108, 0.18);
  backdrop-filter: blur(14px) saturate(120%);
}

.vrh-unutra {
  width: min(100%, 1320px);
  min-height: var(--vrh-visina);
  padding: 0.9rem 4vw;
}

.logo-skript {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 1.95rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--vi-zlato);
}

.logo-pod {
  margin-top: 0.28rem;
  padding-left: 1px;
  color: rgba(226, 211, 188, 0.75);   /* 7,18:1 na zaglavlju */
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.26em;
}

.meni { gap: clamp(0.9rem, 1.6vw, 1.8rem); }

.meni a,
.meni-odjava button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #F1E8DA;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.meni a:hover,
.meni-odjava button:hover { color: var(--vi-zlato); }

.meni a.je-aktivna {
  color: var(--vi-zlato);
  border-bottom-color: rgba(216, 185, 108, 0.6);
}

.meni-cta {
  min-height: 42px;
  padding: 0.55rem 1.4rem !important;
  border: 1px solid rgba(216, 185, 108, 0.6) !important;
  background: transparent;
  color: var(--vi-zlato) !important;
}

.meni-cta:hover,
.meni-cta.je-aktivna {
  border-color: var(--vi-zlato) !important;
  background: rgba(216, 185, 108, 0.16);
  color: var(--vi-zlato) !important;
}

.hamburger span { background: var(--vi-zlato); }

@media (max-width: 980px) {
  .meni {
    top: var(--vrh-visina);
    background: var(--vi-burgundy);
    background-image: var(--vi-slika-burgundy);
    background-size: cover;
    background-position: center;
    gap: 1.5rem;
  }
  .meni a,
  .meni-odjava button { font-size: 1.05rem; }
  .vrh--preko:not(.je-spustena) { background: rgba(42, 18, 22, 0.55); backdrop-filter: blur(8px); }
  body.meni-otvoren .vrh--preko { background: var(--vi-burgundy); }

  /* Zaglavlje nosi backdrop-filter, a element s tim svojstvom postaje containing
     block za sve position:fixed potomke. Zbog toga se mobilni izbornik (.meni,
     fixed, top:82px, bottom:0) rastezao unutar 82px visokog zaglavlja umjesto
     preko ekrana: otvorio bi se kao traka od 80px, a stavke bi zavrsile na
     negativnim koordinatama, iznad vidljivog podrucja. Dok je izbornik otvoren
     filter se gasi, pa se .meni ponovno vezuje uz viewport. */
  body.meni-otvoren .vrh {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--vi-burgundy);
  }
}

/* ============================================================
   5. SEKCIJE I TRAKE
   ============================================================ */

.sek {
  position: relative;
  overflow: hidden;
  padding: clamp(4.6rem, 7vw, 6.6rem) 4vw;
  background-color: var(--vi-ivory);
  background-image: var(--vi-slika-ivory);
  background-size: cover;
  background-position: center;
}

/*
 * Prva svijetla sekcija na stranici uvijek kreće ispod fiksnog zaglavlja — jedan
 * token, bez inline stilova po stranici. Ne dira `.junak` (tamni hero na
 * vjencanja/proslave): on ide pod prozirno zaglavlje i ima svoj razmak u
 * `redesign.css`. Naslovnica ne upada jer su joj sekcije unutar `.vi-landing`.
 */
main > .sek:first-child {
  padding-top: var(--razmak-vrh);
}

.papir-2 {
  background-color: var(--vi-ivory-meki);
  background-image: var(--vi-slika-ivory);
}

/*
 * Zlatna crta preko cijele širine ekrana.
 *
 * Služi da dvije cjeline žive u JEDNOJ `.sek` sekciji. `.sek` teksturu crta s
 * `background-size: cover`, pa je svaka sekcija skalira prema svojoj visini —
 * dvije sekcije jedna ispod druge zato ostavljaju vidljiv šav. Umjesto da se
 * sadržaj razdvaja novom sekcijom, razdvaja ga ova crta.
 *
 * Puna širina: crta je izravno dijete `.sek`, a negativan razmak `-4vw` točno
 * poništava vodoravni `padding: … 4vw` te sekcije — bez `100vw`, koji bi zbog
 * trake za pomicanje bio koji piksel preširok.
 */
.vi-crta-preko {
  margin-inline: -4vw;
  margin-block: clamp(2.8rem, 5vw, 4.2rem);
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    rgba(176, 141, 63, 0) 0%,
    rgba(176, 141, 63, 0.45) 16%,
    var(--vi-zlato-duboko) 50%,
    rgba(176, 141, 63, 0.45) 84%,
    rgba(176, 141, 63, 0) 100%);
}

/* Nekadašnja tamna traka postaje olive traka */

/* Dekorativne grančice */
.vi-grana {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.sek > * { position: relative; z-index: 1; }

/* ============================================================
   6. HERO (vjencanja, proslave — legacy .junak)
   ============================================================ */

.telefon-pozornica::before { border-color: rgba(216, 185, 108, 0.22); }

/* ============================================================
   7. TELEFONI — okvir novi, mehanizam skrolanja netaknut
   ============================================================ */

.telefon {
  border-color: #16161a;
  background: linear-gradient(160deg, #3a3a3c, #16161a 60%);
  box-shadow: 0 26px 46px rgba(18, 20, 12, 0.45),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.telefon::before { background: #141416; }

/* ============================================================
   8. VRIJEDNOSNA TRAKA
   ============================================================ */

/* ============================================================
   9. JELOVNIK / PROGRAM / PITANJA
   ============================================================ */

/*
 * Koraci su bili optički pomaknuti ulijevo: `.program` je 640 px u 720 px
 * širokom `.sek-uska`, ali je `.korak p` lomio redak već na 52ch, pa je desno
 * ostajala prazna traka od stotinjak piksela. Stupac se sužava na širinu koju
 * tekst doista koristi i centrira se — sad je blok (vodilica + tekst) u sredini.
 */
.program {
  max-width: 580px;
  margin-inline: auto;
  /* padding-left ostaje 3.5rem (redesign.css) — točka `.korak::before` stoji na
     `left: -3.5rem`, pa bi svaka druga vrijednost razmaknula točku i vodilicu. */
}
.program::before { background: rgba(176, 141, 63, 0.3); }
.korak p { max-width: none; }

/*
 * Zlatna vlas ispod koraka — u širini stupca s koracima, tek nešto šira,
 * za razliku od `.vi-crta-preko` koja ide preko cijelog ekrana.
 */
/* Tihi poziv na kraju FAQ-a — samo obrubljeni gumb, da stranica ne završi u prazno. */
.vi-tihi-poziv {
  margin: clamp(2.6rem, 4vw, 3.4rem) 0 0;
  text-align: center;
}

.vi-crta-koraci {
  width: min(100%, 620px);
  margin: clamp(3rem, 5vw, 4.2rem) auto 0;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    rgba(176, 141, 63, 0) 0%,
    var(--vi-zlato-duboko) 50%,
    rgba(176, 141, 63, 0) 100%);
}

.korak::before {
  background: var(--vi-zlato-duboko);
  border-color: var(--vi-ivory);
}

.korak-oznaka {
  color: var(--vi-zlato-tekst);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Zlato na olive daje 4,05:1 — premalo za sitan tekst; krem daje 5,22:1. */

.korak h3 { font-size: 1.4rem; }
.korak p { color: var(--vi-zelena-meka); font-weight: 300; }

/*
 * ČESTA PITANJA
 *
 * `redesign.css` je iza svakog pitanja stavio poluprozirnu bijelu plohu
 * (`rgba(255,253,248,.3)`), a otvoreno pitanje još i pomicao ulijevo. Preko
 * papirnate teksture to je izgledalo kao svijetli pravokutnik s oštrim rubom i
 * kao da red poskoči pri otvaranju. Ovdje se ploha miče: ostaju samo zlatne
 * vlasi između redaka, a podloga je ista kao na ostatku stranice.
 */
.pitanja {
  max-width: 780px;
  margin-inline: auto;
}

.pitanja details {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(176, 141, 63, 0.26);
}
.pitanja details:first-child { border-top: 1px solid rgba(176, 141, 63, 0.26); }

/* Poništava pomak i plohu iz redesign.css. */
.pitanja details[open] {
  margin-inline: 0;
  padding-inline: 0;
  background: none;
}

.pitanja summary {
  position: relative;
  display: block;
  min-height: 0;
  cursor: pointer;
  list-style: none;
  padding: 1.6rem 3.2rem 1.6rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vi-zelena);
  transition: color 0.28s ease;
}

.pitanja summary::-webkit-details-marker { display: none; }
.pitanja summary:hover { color: var(--vi-zlato-tekst); }
.pitanja summary:focus-visible {
  outline: 1px solid var(--vi-zlato-duboko);
  outline-offset: 4px;
}

/*
 * Znak plus/minus crta se dvjema vlasima umjesto slovom „+": znak ostaje
 * jednake debljine kao crte oko njega i točno se poklapa s desnim rubom.
 * Pri otvaranju okomita vlas rotira u vodoravnu, pa plus postane minus.
 */
.pitanja summary::before,
.pitanja summary::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 15px;
  height: 1px;
  background: var(--vi-zlato-duboko);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease;
}
.pitanja summary::before { transform: translateY(-50%); }
.pitanja summary::after  { transform: translateY(-50%) rotate(90deg); }
.pitanja details[open] summary::after { transform: translateY(-50%) rotate(0deg); }

.pitanja .odgovor {
  margin: 0;
  padding: 0 3.2rem 1.8rem 0;
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--vi-zelena-meka);
  font-weight: 300;
  animation: vi-odgovor 0.34s ease both;
}

@keyframes vi-odgovor {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pitanja summary::before,
  .pitanja summary::after { transition: none; }
  .pitanja .odgovor { animation: none; }
}

/* ============================================================
   10. PREDLOŠCI
   ============================================================ */

.predlozak {
  background: rgba(251, 246, 236, 0.72);
  border: 1px solid rgba(43, 58, 49, 0.12);
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(26, 30, 16, 0.07);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}

.predlozak::before { display: none; }

.predlozak:hover {
  transform: translateY(-6px);
  border-color: rgba(176, 141, 63, 0.45);
  box-shadow: 0 30px 60px rgba(26, 30, 16, 0.13);
}

.predlozak-redni {
  color: rgba(133, 101, 32, 0.55);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
}

.predlozak-znacka {
  background: rgba(216, 185, 108, 0.18);
  border: 1px solid rgba(176, 141, 63, 0.4);
  border-radius: 999px;
  color: var(--vi-zlato-tekst);       /* 5,92:1 na vlastitoj zlatnoj plohi */
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.predlozak-znacka.prazna { opacity: 0; }

.predlozak-ime {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vi-zelena);
}

.predlozak-opis { color: var(--vi-zelena-meka); font-weight: 300; }

.predlozak-oznake li {
  border-color: rgba(43, 58, 49, 0.18);
  color: var(--vi-pijesak);           /* 5,37:1 na ivory */
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.predlozak-cijena {
  color: var(--vi-zlato-tekst);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Dva gumba stoje jedan uz drugi — uži padding da tekst ne lomi. */
.predlozak-akcije .gumb,
.predlozak-akcije .gumb-okvir {
  padding-inline: 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   11. CIJENA
   ============================================================ */

.cijena-traka {
  background-color: var(--vi-burgundy);
  background-image: var(--vi-slika-burgundy);
  background-size: cover;
  background-position: center;
  color: var(--vi-krem);
}

.cijena-traka::before,
.cijena-traka::after { display: none; }

.cijena-traka .nadnaslov { color: var(--vi-zlato); }
.cijena-traka .nadnaslov::before,
.cijena-traka .nadnaslov::after { background: var(--vi-zlato); opacity: 0.5; }

.cijena-traka .iznos {
  color: var(--vi-zlato);
  font-family: var(--font-display);
  font-weight: 400;
}

.cijena-traka .pod { color: var(--vi-krem); font-weight: 300; }
.ukljuceno li { color: var(--vi-krem); font-weight: 300; }
.cijena-napomena { color: rgba(226, 211, 188, 0.72); font-weight: 300; }
.cijena-traka .gumb {
  background: rgba(216, 185, 108, 0.92);
  border-color: var(--vi-zlato);
  color: var(--vi-burgundy);
}
.cijena-traka .gumb:hover { background: var(--vi-zlato); color: var(--vi-burgundy); }

/* ============================================================
   12. KARTICE, FORME, RAČUN
   ============================================================ */

.rsvp-kartica,
.registracija-card,
.racun-invitation {
  background: rgba(251, 246, 236, 0.86);
  border: 1px solid rgba(43, 58, 49, 0.13);
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(26, 30, 16, 0.07);
}

.registracija-field label {
  color: var(--vi-zelena-meka);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.registracija-field input,
.registracija-field select {
  border-radius: 2px;
  border: 1px solid rgba(43, 58, 49, 0.22);
  background: var(--vi-ivory-svijetli);
  color: var(--vi-zelena);
  font-family: var(--font-ui);
  font-weight: 300;
}

.registracija-field input:focus,
.registracija-field select:focus {
  border-color: var(--vi-zlato-duboko);
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 185, 108, 0.22);
}

.registracija-alert {
  border-radius: 2px;
  border-color: rgba(176, 141, 63, 0.4);
  background: rgba(216, 185, 108, 0.12);
  color: var(--vi-zelena);
}

.racun-status {
  border-radius: 999px;
  background: rgba(216, 185, 108, 0.18);
  border: 1px solid rgba(176, 141, 63, 0.35);
  color: var(--vi-zlato-tekst);
}

.kontakt-stavka {
  border-color: rgba(43, 58, 49, 0.14);
  transition: border-color .25s ease, background-color .25s ease;
}
.kontakt-stavka:hover {
  border-color: rgba(176, 141, 63, 0.45);
  background: rgba(216, 185, 108, 0.08);
}
.kontakt-stavka .vrsta { color: var(--vi-pijesak); letter-spacing: 0.2em; }
.kontakt-stavka .vrijednost {
  color: var(--vi-zelena);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

/* ============================================================
   13. PODNOŽJE
   ============================================================ */

.dno {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 5.6rem) 4vw 2rem;
  background-color: var(--vi-burgundy);
  background-image: var(--vi-slika-burgundy);
  background-size: cover;
  background-position: center;
  color: rgba(226, 211, 188, 0.78);
}

.dno::before { display: none; }

.dno-grana {
  position: absolute;
  height: auto;
  bottom: -14px;
  width: clamp(96px, 13vw, 178px);
  opacity: 0.82;
  pointer-events: none;
  z-index: 0;
}

.dno-grana--lijevo { left: 0; }
.dno-grana--desno { right: 0; }

/* Tekst uvijek iznad grančica. */
.dno-crta {
  padding-inline: clamp(0px, 14vw, 200px);
}

.dno-unutra {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 4vw 2.4rem;
  text-align: center;
}

.dno-crta { position: relative; z-index: 1; }

.dno-veze {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.9rem;
  font-size: 0.88rem;
}

.dno-veze span { color: rgba(226, 211, 188, 0.4); }

.dno-veze a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgba(226, 211, 188, 0.8);
  font-weight: 300;
  transition: color .25s ease;
}

.dno-veze a:hover { color: var(--vi-zlato); }

.dno-veze--kontakt { font-size: 0.82rem; }
.dno-veze--kontakt a { color: rgba(226, 211, 188, 0.62); }

.dno-znak {
  display: block;
  width: 38px;
  height: auto;
  margin: 0 auto 0.6rem;
  opacity: 0.95;
}

.dno-brand { text-align: center; }
.dno-brand .logo-skript {
  display: block;
  text-decoration: none;
  color: var(--vi-zlato);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-style: normal;
  font-weight: 500;
}

.dno-brand p { color: var(--vi-krem); font-weight: 300; }

.dno-crta {
  border-color: rgba(226, 211, 188, 0.18);
  color: rgba(226, 211, 188, 0.62);
  font-weight: 300;
}

@media (max-width: 860px) {
  .dno-grana { width: 96px; opacity: 0.5; }
  .dno-crta { padding-inline: 0; }
}

/* ============================================================
   14. NASLOVNICA — Villa Intima landing
   ============================================================ */

.vi-landing { width: 100%; overflow-x: hidden; }

/* --- 14.1 Hero --- */

.vi-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(940px, 100svh);
  overflow: hidden;
  background-color: #241a12;
}

.vi-hero-slika {
  position: absolute;
  inset: -3%;
  background-image: var(--vi-slika-hero);
  background-size: cover;
  background-position: center 30%;
  animation: vi-pan 28s ease-in-out infinite alternate;
  will-change: transform;
}

.vi-hero-veo,
.vi-hero-vrh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vi-hero-veo {
  background: linear-gradient(100deg,
    rgba(24, 18, 13, 0.88) 0%,
    rgba(28, 21, 15, 0.56) 38%,
    rgba(30, 22, 16, 0.12) 62%,
    rgba(30, 22, 16, 0.36) 100%);
}

.vi-hero-vrh {
  background: linear-gradient(180deg, rgba(20, 15, 11, 0.58) 0%, rgba(20, 15, 11, 0) 24%);
}

@keyframes vi-pan {
  from { transform: scale(1.01); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

.vi-hero-unutra {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(260px, 420px);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(7rem, 11vw, 9.5rem) 4vw clamp(4.5rem, 7vw, 6.5rem);
  box-sizing: border-box;
}

.vi-hero-tekst { max-width: 620px; }

.vi-hero h1 {
  margin: 0;
  max-width: 20ch;
  color: #FBF6EC;
  font-size: clamp(2.4rem, 4.9vw, 4rem);
  line-height: 1.16;
  font-weight: 400;
  text-wrap: pretty;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35);
}

.vi-hero-akcije {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
}

.vi-hero .gumb {
  background: rgba(77, 87, 56, 0.92);
  border-color: rgba(216, 185, 108, 0.55);
  color: #F7F1E4;
  font-size: 0.95rem;
  padding: 1.05rem 2.5rem;
}

.vi-hero .gumb:hover { background: var(--vi-olive-svijetli); }

.vi-hero-biljeska {
  margin: 0;
  color: #E4D8C4;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.vi-hero-telefon {
  display: flex;
  justify-content: center;
  perspective: 1600px;
  perspective-origin: 50% 46%;
}

/* Nagib ide SAMO na vanjski okvir. Iframe ostaje netransformiran —
   transform: scale lomi position: fixed unutar iframea (Chrome), a zoom ne. */
.vi-hero-telefon .telefon--demo {
  --preview-zoom: 0.665;
  width: 268px !important;
  height: 560px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 11px solid #16161a !important;
  border-radius: 50px !important;
  background: linear-gradient(160deg, #3a3a3c, #16161a 60%) !important;
  overflow: visible !important;
  position: relative !important;
  transform: rotateX(0.4deg) rotateY(-4.5deg) rotateZ(7.5deg);
  transform-origin: 50% 54%;
  transform-style: preserve-3d;
  animation: vi-lebdi 7s ease-in-out infinite;
  will-change: transform;
  box-shadow:
    5px 1px 0 #514e49,
    9px 2px 0 #232321,
    22px 34px 56px rgba(18, 12, 8, 0.45),
    40px 52px 96px rgba(18, 12, 8, 0.3),
    inset -2px 0 0 rgba(255, 255, 255, 0.18);
}

@keyframes vi-lebdi {
  0%, 100% { transform: rotateX(0.4deg) rotateY(-4.5deg) rotateZ(7.5deg) translateY(0); }
  50%      { transform: rotateX(0.4deg) rotateY(-4.5deg) rotateZ(7.5deg) translateY(-14px); }
}

.vi-hero-telefon .telefon--demo::before {
  display: block !important;
  content: '';
  position: absolute;
  z-index: 5;
  top: 9px;
  left: 50%;
  width: 72px;
  height: 18px;
  border-radius: 999px;
  background: #0a0b0b;
  transform: translateX(-50%);
  pointer-events: none;
}

.vi-hero-telefon .ekran-iframe-wrap { border-radius: 38px; }

.vi-hero-telefon .telefon-rail {
  position: absolute;
  z-index: 0;
  top: 42px;
  right: -12px;
  bottom: 44px;
  width: 13px;
  border: 1px solid rgba(18, 20, 19, 0.72);
  border-left-color: rgba(255, 255, 255, 0.4);
  border-radius: 0 13px 13px 0;
  background: linear-gradient(90deg, #3a3b39 0%, #8f8a82 38%, #4a4b48 72%, #202220 100%);
  transform: translateZ(-2px);
  pointer-events: none;
}

.vi-hero-telefon .telefon-tipka {
  position: absolute;
  z-index: 6;
  right: -15px;
  width: 4px;
  border: 1px solid rgba(22, 23, 22, 0.72);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #7d7870, #2a2c2a);
  pointer-events: none;
}

.vi-hero-telefon .telefon-tipka--gornja { top: 112px; height: 42px; }
.vi-hero-telefon .telefon-tipka--donja  { top: 177px; height: 68px; }

/* --- 14.2 Trake --- */

.vi-traka {
  position: relative;
  overflow: hidden;
  padding: clamp(3.8rem, 6vw, 5.4rem) 4vw;
  background-size: cover;
  background-position: center;
}

.vi-traka--ivory {
  background-color: var(--vi-ivory);
  background-image: var(--vi-slika-ivory);
}

.vi-traka--olive {
  background-color: var(--vi-olive);
  background-image: var(--vi-slika-olive);
  color: #F6F1E3;
}

.vi-traka-unutra {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.vi-traka--olive .vi-traka-unutra { max-width: 1140px; }

.vi-oznaka {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--vi-pijesak);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.vi-oznaka::before,
.vi-oznaka::after {
  content: '';
  display: block;
  width: clamp(30px, 5vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.vi-traka--olive .vi-oznaka { color: #DED3B8; }

.vi-traka h2 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 400;
  text-wrap: pretty;
}

.vi-traka--olive h2 { color: #F6F1E3; }

.vi-traka p {
  margin: 0;
  max-width: 60ch;
  color: var(--vi-zelena-meka);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.75;
  text-wrap: pretty;
}

.vi-traka--olive p { color: rgba(246, 241, 227, 0.86); }

/* --- 14.3 Podaci s ikonama --- */

.vi-podaci {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.vi-podatak {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem clamp(1.2rem, 3vw, 2.2rem);
  border-right: 1px solid rgba(43, 58, 49, 0.16);
}

.vi-podatak:last-child { border-right: 0; }

.vi-podatak svg { flex: none; }

.vi-podatak span {
  color: var(--vi-zelena);
  font-size: 1rem;
  font-weight: 300;
  white-space: nowrap;
}

/* --- 14.4 Tri telefona --- */

.vi-telefoni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.vi-telefon { margin: 0; }

/* Zadržava .predlozak kuku na koju je vezan mehanizam auto-skrolanja,
   ali bez kartice — u ovoj sekciji telefon stoji sam na olive podlozi. */
.vi-telefon.predlozak {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}

.vi-telefon.predlozak:hover {
  transform: translateY(-10px);
  box-shadow: none;
}

.vi-telefon.predlozak .telefon {
  width: 226px !important;
  height: 470px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 9px solid #16161a !important;
  border-radius: 38px !important;
  background: linear-gradient(160deg, #3a3a3c, #16161a 60%) !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 26px 46px rgba(18, 20, 12, 0.45),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow .45s ease;
}

.vi-telefon.predlozak:hover .telefon {
  box-shadow: 0 38px 60px rgba(18, 20, 12, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.vi-telefon.predlozak .telefon::before {
  display: block !important;
  content: '';
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 50%;
  width: 56px;
  height: 15px;
  border-radius: 9px;
  background: #141416;
  transform: translateX(-50%);
  pointer-events: none;
}

.vi-telefon.predlozak .ekran-iframe-wrap { border-radius: 30px; }

/* inner = 226 - 18 = 208px; 208 / 373 = 0.5576 */
.vi-telefon.predlozak .ekran-iframe {
  zoom: 0.5576 !important;
  -moz-transform: scale(0.5576);
}

/* Prelaskom preko telefona na dnu ekrana izranjaju dvije akcije. Overlay je
   unutar .telefon pa prati zaobljenje okvira; iznad iframea, ispod ureza. */
.vi-telefon.predlozak .telefon { isolation: isolate; }

.vi-telefon-akcije {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}

.vi-telefon.predlozak:hover .vi-telefon-akcije,
.vi-telefon.predlozak:focus-within .vi-telefon-akcije {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.vi-telefon-akcije form { display: contents; }

.vi-telefon-gumb {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.62rem 0.5rem;
  border: 1px solid var(--vi-zlato);
  border-radius: 0;
  background: var(--vi-burgundy);
  color: var(--vi-ivory-svijetli);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(18, 20, 12, 0.35);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.vi-telefon-gumb:hover { background: var(--vi-burgundy-meki); border-color: var(--vi-zlato); }

.vi-telefon-gumb--tih {
  background: rgba(247, 241, 228, 0.94);
  border-color: rgba(176, 141, 63, 0.8);
  color: var(--vi-burgundy);
}

.vi-telefon-gumb--tih:hover { background: #fff; }

.vi-telefon-gumb:focus-visible { outline: 2px solid var(--vi-zlato); outline-offset: 2px; }

/* Bez pokazivača (dodir) nema hovera — akcije stoje stalno vidljive. */
@media (hover: none) {
  .vi-telefon-akcije { opacity: 1; transform: none; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vi-telefon-akcije { transition: none; }
}

/* Vrtuljak: svi predlošci su u popisu, vidljivo ih je `data-po` (3). Strelice
   vrte popis u krug po tri; skriveni telefon ne troši ni učitavanje pozivnice. */
.vi-vrtuljak { transition: opacity .26s ease, transform .26s ease; }
.vi-vrtuljak--mijenja { opacity: 0; transform: translateY(10px); }
.vi-telefon.predlozak.vi-telefon--skriven { display: none !important; }

.vi-vrtuljak-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.2rem 0 0;
}

.vi-vrtuljak-gumb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(216, 185, 108, 0.7);
  background: transparent;
  color: var(--vi-ivory-svijetli);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
  padding: 0 0 0.2rem;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}

.vi-vrtuljak-gumb:hover {
  background: rgba(216, 185, 108, 0.18);
  border-color: var(--vi-zlato);
  transform: translateY(-2px);
}

.vi-vrtuljak-gumb:active { transform: translateY(1px); }

.vi-vrtuljak-gumb:focus-visible {
  outline: 2px solid var(--vi-zlato);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .vi-vrtuljak { transition: none; }
  .vi-vrtuljak--mijenja { opacity: 1; transform: none; }
}

/* --- 14.5 Kako radi --- */

.vi-koraci {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 1.8rem);
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.vi-korak {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

/* Spona između koraka — dekoracija, ne stavka liste. */
.vi-korak:not(:last-child)::after {
  content: '';
  display: block;
  align-self: center;
  width: 38px;
  height: 1px;
  margin-left: clamp(1rem, 2.6vw, 1.8rem);
  background: rgba(176, 141, 63, 0.55);
}

.vi-korak b {
  color: var(--vi-zlato-tekst);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
}

.vi-korak span {
  color: var(--vi-zelena);
  font-size: 1rem;
  font-weight: 300;
}

.vi-akcija { margin-top: 1.2rem; }

/* --- 14.6 Grančice na naslovnici --- */

.vi-traka .vi-grana { z-index: 0; }

.vi-grana--info-lijevo  { left: -30px; top: 30px; width: clamp(130px, 17vw, 250px); opacity: 0.85; }
.vi-grana--info-desno   { right: -10px; top: 52px; width: clamp(95px, 12vw, 170px); opacity: 0.8; }
.vi-grana--kako-lijevo  { left: 20px; bottom: 60px; width: clamp(80px, 9vw, 130px); opacity: 0.85; }
.vi-grana--kako-desno   { right: -40px; bottom: 16px; width: clamp(160px, 22vw, 300px); opacity: 0.8; transform: scaleX(-1); }

/* ============================================================
   15. RESPONZIVNO
   ============================================================ */

@media (max-width: 1000px) {
  .vi-hero-unutra {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 3rem;
  }
  .vi-hero-tekst { max-width: 640px; }
  .vi-hero-akcije { align-items: center; }
  .vi-hero h1 { margin-inline: auto; }
}

@media (max-width: 760px) {
  :root { --razmak-vrh: 9rem; }

  .vi-hero { min-height: auto; }
  .vi-hero-unutra { padding-inline: 6vw; }
  .vi-hero h1 { font-size: clamp(2.1rem, 8.4vw, 2.9rem); }
  .vi-hero .gumb { width: 100%; max-width: 340px; }

  .vi-traka { padding-inline: 6vw; }

  .vi-podaci { flex-direction: column; align-items: stretch; gap: 0; width: min(100%, 340px); }
  .vi-podatak {
    justify-content: flex-start;
    padding: 0.85rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(43, 58, 49, 0.14);
  }
  .vi-podatak:last-child { border-bottom: 0; }

  .vi-korak:not(:last-child)::after { display: none; }
  .vi-koraci { flex-direction: column; align-items: center; gap: 1rem; }

  .vi-oznaka { font-size: 0.72rem; letter-spacing: 0.22em; gap: 0.7rem; }
  .vi-oznaka::before, .vi-oznaka::after { width: 22px; }
  .nadnaslov { font-size: 0.72rem; letter-spacing: 0.22em; gap: 0.7rem; }
  .nadnaslov::before, .nadnaslov::after { width: 22px; }

  .vi-grana--info-lijevo { width: 120px; left: -34px; opacity: 0.5; }
  .vi-grana--info-desno  { width: 86px; right: -22px; opacity: 0.45; }
  .vi-grana--kako-lijevo { width: 74px; left: -18px; opacity: 0.45; }
  .vi-grana--kako-desno  { width: 150px; right: -46px; opacity: 0.45; }
}

@media (max-width: 560px) {
  .vi-hero-telefon .telefon--demo {
    --preview-zoom: 0.66;
    width: 262px !important;
    height: 548px !important;
    transform: rotateX(0.2deg) rotateY(-3deg) rotateZ(6deg);
  }
  @keyframes vi-lebdi {
    0%, 100% { transform: rotateX(0.2deg) rotateY(-3deg) rotateZ(6deg) translateY(0); }
    50%      { transform: rotateX(0.2deg) rotateY(-3deg) rotateZ(6deg) translateY(-10px); }
  }
  .vi-telefon.predlozak .telefon { width: 200px !important; height: 416px !important; }
  /* inner = 200 - 18 = 182px; 182 / 373 = 0.488 */
  .vi-telefon.predlozak .ekran-iframe { zoom: 0.488 !important; -moz-transform: scale(0.488); }
}

@media (max-width: 400px) {
  .vi-telefoni { gap: 1.6rem; }
  .vi-telefon.predlozak .telefon { width: 226px !important; height: 470px !important; }
  .vi-telefon.predlozak .ekran-iframe { zoom: 0.5576 !important; -moz-transform: scale(0.5576); }
}

@media (prefers-reduced-motion: reduce) {
  .vi-hero-slika,
  .vi-hero-telefon .telefon--demo { animation: none !important; }
  .vi-telefon.predlozak:hover { transform: none; }
  .gumb, .gumb-okvir, .gumb-svijetli, .predlozak { transition: none; }
}

/* ── Pravne stranice (A1–A3, 2026-09-10): Impressum, Uvjeti, Privatnost ───────
   Dug tekst za čitanje: lijevo poravnat, uzak stupac, mirni podnaslovi. */
.pravno { max-width: 44rem; }
.pravno h2 {
  max-width: none;
  margin: 2.6rem 0 0.8rem;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}
.pravno h3 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vi-zlato-tekst);
}
.pravno p, .pravno li { color: var(--vi-zelena-meka); font-weight: 300; line-height: 1.75; }
.pravno p { margin: 0 0 1rem; }
.pravno ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.pravno li { margin-bottom: 0.45rem; }
.pravno a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pravno strong { font-weight: 500; }
.pravno-datum { text-align: center; font-size: 0.85rem; margin-top: 0.6rem; }
.pravno-napomena {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(176, 141, 63, 0.45);
  background: rgba(216, 185, 108, 0.1);
  font-size: 0.92rem;
}
.pravno-podaci {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.7rem 1.6rem;
  margin: 0 0 2.2rem;
}
.pravno-podaci dt { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vi-zlato-tekst); padding-top: 0.2rem; }
.pravno-podaci dd { margin: 0; color: var(--vi-zelena-meka); }
@media (max-width: 560px) {
  .pravno-podaci { grid-template-columns: 1fr; gap: 0.15rem; }
  .pravno-podaci dd { margin-bottom: 0.8rem; }
}
.dno-veze--pravno { font-size: 0.8rem; }
.dno-veze--pravno a { color: rgba(226, 211, 188, 0.62); }