/* ============================================================================
   PUT OKO SEBE — Mina Stanić
   Dizajn sistem: topla editorijalna paleta (espresso + puter žuta + glina)
   ========================================================================== */

/* ---------- 1. Tokeni ---------------------------------------------------- */
:root{
  /* ---- Paleta: topli zemljani tonovi ------------------------------------
     Osnova je zadata paleta. Dodata su dva tona koja je nedostajala, jer
     `accent` i `textSecondary` ne prolaze kontrast kao tekst:
       --accent-ink     dublja terakota za linkove i sitan tekst (≥ 4.9:1 svuda)
       --ink-soft-warm  prigušen tekst na puter žutoj (4.57:1)
     `accent` ostaje za ispune i ukrase, nikada za sitan tekst.          */
  --bg:             #FAF7F2;   /* topli lan — pozadina sajta */
  --surface:        #F3EDE2;   /* pesak/oatmeal — kartice i bedževi */
  --surface-subtle: #ECE4D5;   /* blagi hover, naizmenične sekcije */
  --warm:           #EAD3A2;   /* pastelna oker — nežni detalji i tagovi */
  --warm-deep:      #DFC48C;   /* hover na žutoj */
  --sage:           #8C9A86;   /* zagasita maslinasta — samo ukras */

  --ink:            #443B34;   /* JEDAN braon za ceo sajt — naslovi, tekst, dugmad, tamne sekcije */
  --ink-soft:       #6A5E56;   /* podnaslovi, meta podaci, opisi — svetlija nijansa istog braon */
  --ink-soft-warm:  #5E524B;   /* isto, ali na puter žutoj podlozi */

  --accent:         #C87258;   /* terakota — ispune, potezi, ukrasi */
  --accent-hover:   #B35E46;   /* tamnija terakota za hover */
  --accent-ink:     #8A4233;   /* terakota za tekst i linkove */

  --line:           rgba(68,59,52,.08);
  --line-soft:      rgba(68,59,52,.05);
  --line-strong:    rgba(68,59,52,.14);
  --line-light:     rgba(250,247,242,.18);

  /* ---- Nazivi iz ranijih verzija, da se ne lomi ostatak fajla ---------- */
  --white:      var(--surface);
  --cream:      var(--bg);
  --cream-2:    var(--surface);
  --sand:       var(--surface-subtle);
  --butter:     var(--warm);
  --butter-2:   var(--warm-deep);
  --butter-3:   var(--warm-deep);
  --pink:       var(--surface);
  --pink-2:     var(--surface-subtle);
  --pink-3:     var(--sage);
  --espresso:   #443B34;          /* tamne sekcije — isti braon kao tekst */
  --espresso-2: #51463F;
  --cocoa:      #5A4E46;
  --coral:      var(--accent);
  --coral-ink:  var(--accent-ink);
  --coral-lt:   var(--warm);      /* akcent na tamnoj podlozi — žuta, 10.3:1 */
  --clay:       var(--accent);
  --clay-ink:   var(--accent-ink);
  --blush:      var(--surface-subtle);

  --shadow-sm:  0 1px 2px rgba(68,59,52,.05), 0 4px 14px -6px rgba(68,59,52,.12);
  --shadow-md:  0 2px 6px rgba(68,59,52,.05), 0 18px 40px -20px rgba(68,59,52,.24);
  --shadow-lg:  0 4px 10px rgba(68,59,52,.05), 0 40px 80px -36px rgba(68,59,52,.34);

  /* Tipografija */
  --f-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-hand:    "Montserrat", system-ui, sans-serif;

  /* Ritam */
  --container: 1240px;
  --narrow:    760px;
  --gutter:    clamp(1.25rem, 4vw, 3.25rem);
  --sec-y:     clamp(4.5rem, 10vw, 9rem);
  --r-sm: 10px;  --r-md: 18px;  --r-lg: 28px;  --r-xl: 40px;
  --arch: 48% 48% 14px 14px / 34% 34% 5px 5px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}


/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--f-sans);
  font-size:clamp(1rem, .96rem + .25vw, 1.0625rem);
  line-height:1.66;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--clay-ink); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--butter-2); color:var(--ink); }

/* Zrno — topla tekstura preko cele stranice */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
@media (max-width:700px){ body::after{ opacity:.3; } }

/* ---------- 3. Tipografija ----------------------------------------------- */
/* Naslovi su teški, zbijeni i levo poravnati — kao na Instagram objavama.    */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; line-height:1.08; letter-spacing:-.022em; }
h1{ font-size:clamp(2.15rem, 1.15rem + 4.1vw, 4rem); font-weight:700; }
h2{ font-size:clamp(1.8rem, 1.05rem + 2.9vw, 3rem); line-height:1.1; font-weight:700; }
/* Naglašena reč u naslovu ide u najtežu težinu — kao na objavama */
h1 strong,h2 strong,h1 .hi,h2 .hi,
.statement strong,.statement .hi{ font-weight:800; }
h3{ font-size:clamp(1.22rem, .98rem + 1vw, 1.65rem); line-height:1.18; font-weight:800; }
h4{ font-size:clamp(1.02rem, .95rem + .45vw, 1.2rem); line-height:1.25; font-weight:800; letter-spacing:-.012em; }
/* Redosled naslova mora da bude h1 > h2 > h3 (SEO, čitači ekrana); izgled ostaje kao kod h3/h4 preko klasa */
.h3{ font-size:clamp(1.22rem, .98rem + 1vw, 1.65rem); line-height:1.18; font-weight:800; }
.h4{ font-size:clamp(1.02rem, .95rem + .45vw, 1.2rem); line-height:1.25; font-weight:800; letter-spacing:-.012em; }
.step .h4{ margin-bottom:.35rem; }
.post .h3{ font-size:1.12rem; line-height:1.25; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; }

/* Reč u koralnoj — glavni naglasak u njenom vizuelnom jeziku */
.hi{ color:var(--coral-ink); }
.bg-dark .hi,.card--dark .hi{ color:var(--coral-lt); }
.bg-warm .hi{ color:var(--coral-ink); }
h1 .hi,h2 .hi,.statement .hi{ color:var(--accent); }
/* na peščanim i žutim podlogama terakota ne prolazi kontrast — ide dublja */
.bg-warm .hi,.bg-warm-soft .hi,.bg-sand .hi,.bg-surface .hi,
.card--warm .hi,.card--sand .hi{ color:var(--accent-ink); }
.bg-dark h1 .hi,.bg-dark h2 .hi,.bg-dark .statement .hi{ color:var(--coral-lt); }

/* Sitna oznaka iznad naslova */
.eyebrow{
  font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral-ink); line-height:1.3; margin-bottom:.85rem; display:block;
}
.bg-dark .eyebrow{ color:var(--coral-lt); }
/* Nadnaslov u pilulici (zaglavlje sa fotografijom) — bela podloga da ostane čitljiv preko slike */
.pill-eyebrow{
  display:inline-block; margin-bottom:1rem; padding:.45rem .95rem; border-radius:100px;
  background:rgba(255,255,255,.85); color:var(--coral-ink);
  font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; line-height:1.3;
}
.kicker{
  font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); display:block; margin-bottom:1.1rem;
}
.lead{ font-size:clamp(1.04rem,1rem + .4vw,1.2rem); line-height:1.62; color:var(--ink-soft); font-weight:500; }
/* Na oker žutoj prigušeni tekst pada na 4.03:1, pa se na tim površinama
   sama promenljiva redefiniše — nasleđuje je sve unutra (4.57:1). */
.bg-warm, .bg-warm-soft, .card--warm, .price, .cta--light, .badge--tl{
  --ink-soft: var(--ink-soft-warm);
}
.small{ font-size:.88rem; color:var(--ink-soft); }
.tiny{ font-size:.78rem; line-height:1.55; color:var(--ink-soft); }
.hand{ font-weight:800; font-size:1.18em; line-height:1.25; color:var(--coral-ink); letter-spacing:-.015em; }
.bg-dark .hand{ color:var(--coral-lt); }
strong,b{ font-weight:800; }
em{ font-style:italic; }

/* Marker highlight iza reči */
.mark{
  background:linear-gradient(transparent 56%, var(--butter) 56%, var(--butter) 95%, transparent 95%);
  padding:0 .12em; border-radius:2px;
}
.bg-dark .mark{ background:linear-gradient(transparent 56%, rgba(255,250,199,.24) 56%, rgba(255,250,199,.24) 95%, transparent 95%); }

/* Ručno crtano podvlačenje (SVG ubacuje JS) */
.squiggle{ position:relative; display:inline-block; }
.squiggle svg{ position:absolute; left:-2%; bottom:-.26em; width:104%; height:.42em; overflow:visible; }
.squiggle svg path{
  fill:none; stroke:var(--coral); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.1s var(--ease-out) .15s;
}
.is-in .squiggle svg path, .squiggle.is-in svg path{ stroke-dashoffset:0; }
.bg-dark .squiggle svg path{ stroke:var(--coral-lt); }

/* Ručno crtan krug oko reči */
.circled{ position:relative; display:inline-block; padding:0 .18em; white-space:nowrap; }
.circled svg{ position:absolute; inset:-38% -12%; width:124%; height:176%; overflow:visible; }
.circled svg path{
  fill:none; stroke:var(--coral); stroke-width:4.5; stroke-linecap:round;
  stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900);
  transition:stroke-dashoffset 1.4s var(--ease-out) .2s;
}
.is-in .circled svg path, .circled.is-in svg path{ stroke-dashoffset:0; }
.bg-dark .circled svg path{ stroke:var(--coral-lt); }

@media (prefers-reduced-motion: reduce){
  .squiggle svg path,.circled svg path{ stroke-dashoffset:0 !important; transition:none; }
}

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ width:100%; max-width:var(--narrow); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sec-y); position:relative; }

/* Diskretni nepravilni oblici u pozadini — da strane ne budu monotone.
   Dva oblika po sekciji (::before, ::after); raspored i oblik se smenjuju po
   redosledu sekcije. Leže iznad boje sekcije, a ispod sadržaja (isolation +
   z-index:-1); ne prelaze ivice sekcije (overflow:clip). Boja se menja jednom
   promenljivom --shape / --shape-2. */
.section,.page-head{
  --shape:rgba(234,211,162,.27); --shape-2:rgba(236,228,213,.8);
  isolation:isolate; overflow:clip; position:relative;
}
.bg-warm,.bg-warm-soft{ --shape:rgba(255,255,255,.30); --shape-2:rgba(201,146,47,.10); }
.bg-surface,.bg-sand,.bg-surface-soft{ --shape:rgba(234,211,162,.30); --shape-2:rgba(255,255,255,.55); }
.bg-dark{ --shape:rgba(234,211,162,.07); --shape-2:rgba(255,255,255,.035); }
.section::before,.section::after,.page-head::before,.page-head::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
}
.section::before,.page-head::before{
  width:clamp(240px,34vw,500px); aspect-ratio:1.12; background:var(--shape);
  border-radius:58% 42% 61% 39% / 47% 58% 42% 53%;
  top:4%; right:-8%; transform:rotate(-12deg);
}
.section::after,.page-head::after{
  width:clamp(170px,24vw,340px); aspect-ratio:1; background:var(--shape-2);
  border-radius:41% 59% 47% 53% / 60% 42% 58% 40%;
  bottom:5%; left:-6%; transform:rotate(18deg);
}
main > section:nth-of-type(2n)::before{
  top:auto; bottom:5%; right:auto; left:-9%;
  border-radius:44% 56% 38% 62% / 55% 40% 60% 45%; transform:rotate(9deg);
}
main > section:nth-of-type(2n)::after{
  bottom:auto; top:4%; left:auto; right:-6%;
  border-radius:63% 37% 52% 48% / 42% 61% 39% 58%; transform:rotate(-24deg);
}
main > section:nth-of-type(3n)::before{
  top:22%; right:-13%; width:clamp(200px,26vw,380px);
  border-radius:52% 48% 66% 34% / 38% 55% 45% 62%; transform:rotate(30deg);
}
main > section:nth-of-type(3n)::after{
  bottom:8%; left:-10%; width:clamp(130px,17vw,240px);
  border-radius:47% 53% 35% 65% / 56% 44% 56% 44%; transform:rotate(-8deg);
}
/* Zaglavlje je niže od običnih sekcija — oblici su manji i stoje celi unutar njega,
   da ih ne preseca ravna donja ivica. */
.page-head::before{ width:clamp(200px,24vw,340px); top:-9%; right:-5%; }
.page-head::after{ width:clamp(120px,15vw,210px); bottom:9%; left:-3%; }
@media (max-width:700px){
  .section::before,.page-head::before{ width:230px; }
  .section::after,.page-head::after{ width:150px; }
}
@media print{ .section::before,.section::after,.page-head::before,.page-head::after{ display:none; } }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.bg-sand{ background:var(--cream-2); }
.bg-warm{ background:var(--butter); }
.bg-base{ background:var(--bg); }
.bg-surface{ background:var(--surface); }
.bg-surface-soft{ background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.bg-warm-soft{ background:linear-gradient(180deg, var(--warm) 0%, #F2E2BE 100%); }
.bg-dark{ background:var(--espresso); color:var(--cream); }
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{ color:var(--cream); }
.bg-dark .lead,.bg-dark .small,.bg-dark .tiny{ color:rgba(253,250,239,.85); }
.bg-dark .kicker{ color:rgba(253,250,239,.76); }
.bg-dark .eyebrow,.bg-dark .hand{ color:var(--butter-2); }

.grid{ display:grid; gap:clamp(1.25rem,3vw,2.25rem); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--rev > *:first-child{ order:2; }
@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split--rev > *:first-child{ order:0; }
}

.stack > * + *{ margin-top:1.05rem; }
.stack-lg > * + *{ margin-top:1.8rem; }
.center{ text-align:center; }
.sec-head{ max-width:58ch; margin-bottom:clamp(2rem,4vw,3.25rem); }
.sec-head.center{ margin-inline:auto; }

/* ---------- 5. Dugmad ---------------------------------------------------- */
.btn{
  --bg:var(--espresso); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.6rem; border-radius:100px; border:1.5px solid var(--bg);
  background:var(--bg); color:var(--fg);
  font-weight:700; font-size:.94rem; letter-spacing:.005em; line-height:1.2;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); box-shadow:none; }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); }
.btn--warm{ --bg:var(--butter-2); --fg:var(--ink); border-color:var(--butter-2); }
.btn--warm:hover{ --bg:var(--butter-3); border-color:var(--butter-3); }
.btn--light{ --bg:var(--cream); --fg:var(--ink); border-color:var(--cream); }
.btn--outline-light{ --bg:transparent; --fg:var(--cream); border-color:rgba(253,250,239,.45); box-shadow:none; }
.btn--outline-light:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--sm{ padding:.6rem 1.1rem; font-size:.82rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* Tekstualni link sa strelicom */
.link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; font-size:.92rem; color:var(--clay-ink); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
  transition:gap .3s var(--ease), color .25s;
}
.link:hover{ gap:.8rem; color:var(--ink); }
.bg-dark .link{ color:var(--butter-2); }
.bg-dark .link:hover{ color:var(--cream); }

/* ---------- 6. Header ---------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(253,250,239,.94);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
@media (min-width:1000px){ .header{ backdrop-filter:saturate(140%) blur(10px); } }
.header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 8px 24px -18px rgba(67,59,50,.5); }
.header__in{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  min-height:70px; padding-block:.6rem;
}
.logo{
  display:inline-flex; align-items:baseline; gap:.26em; text-decoration:none; flex:none;
  font-family:var(--f-display); font-weight:800; font-size:1.18rem; letter-spacing:-.035em;
  color:var(--ink); line-height:1; text-transform:lowercase;
}
.logo .ring{ color:var(--coral-ink); position:relative; }
.logo:hover .ring{ color:var(--coral); }

/* Logo: samo natpis, u istom fontu kao ostatak sajta (Montserrat). */
.logo{
  display:inline-flex; align-items:center; text-decoration:none; flex:none;
  color:var(--ink); line-height:1;
}
.logo__word{
  font-family:var(--f-display); font-size:clamp(.9rem,.82rem + .3vw,1.08rem); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.footer .logo{ color:var(--bg); }
.footer .logo__word{ color:var(--warm); }
@media (max-width:560px){ .logo__word{ letter-spacing:.13em; } }

.nav{ display:flex; align-items:center; gap:clamp(.7rem,1.35vw,1.4rem); }
.nav a{
  font-size:.83rem; font-weight:600; text-decoration:none; color:var(--ink);
  position:relative; padding:.3rem 0; white-space:nowrap; opacity:.82; transition:opacity .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--clay);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ opacity:1; font-weight:700; }
/* Padajuća grupa „Načini rada" */
.nav__group{ position:relative; }
.nav__btn{
  font:inherit; font-size:.83rem; font-weight:600; color:var(--ink);
  background:none; border:0; padding:.3rem 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  opacity:.82; transition:opacity .2s; position:relative;
}
.nav__btn::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--coral);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease);
}
.nav__btn:hover{ opacity:1; }
.nav__group.is-open .nav__btn,.nav__btn.is-current{ opacity:1; }
.nav__btn.is-current{ font-weight:700; }
.nav__btn:hover::after,.nav__group.is-open .nav__btn::after,.nav__btn.is-current::after{ transform:scaleX(1); }
.nav__chev{ width:9px; height:6px; flex:none; transition:transform .3s var(--ease); }
.nav__group.is-open .nav__chev{ transform:rotate(180deg); }

.nav__menu{
  position:absolute; top:100%; left:50%; min-width:238px; z-index:30;
  margin-top:.7rem; padding:.45rem;
  background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  display:grid; gap:.08rem;
  opacity:0; visibility:hidden; transform:translate(-50%,-6px);
  transition:opacity .25s var(--ease), transform .3s var(--ease), visibility .25s;
}
/* nevidljivi most da miš može da pređe sa dugmeta na meni */
.nav__menu::before{ content:""; position:absolute; left:0; right:0; top:-.75rem; height:.75rem; }
.nav__group.is-open .nav__menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav__menu a{
  padding:.62rem .8rem; border-radius:11px; font-size:.85rem; font-weight:600;
  opacity:.92; white-space:nowrap; transition:background .2s, opacity .2s;
}
.nav__menu a::after{ display:none; }
.nav__menu a:hover{ background:var(--cream-2); opacity:1; }
.nav__menu a[aria-current="page"]{ background:var(--butter); opacity:1; font-weight:700; }
@media (prefers-reduced-motion: reduce){
  .nav__menu{ transition:none; } .nav__chev{ transition:none; }
}

/* Grupa u mobilnom meniju */
.drawer__label{
  font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--coral-lt); margin:1.1rem 0 .35rem;
}
.drawer a.drawer__sub{
  font-size:clamp(1.05rem,4.2vw,1.45rem); padding:.18rem 0 .18rem 1rem;
  border-left:2px solid rgba(253,250,239,.22); opacity:.86;
}
.drawer a.drawer__sub[aria-current="page"]{ border-left-color:var(--coral-lt); opacity:1; }

.header__cta{ flex:none; }
.burger{
  display:none; width:46px; height:46px; border:1.5px solid var(--line); border-radius:50%;
  background:transparent; cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.burger span{ display:block; width:18px; height:1.6px; background:var(--ink); position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.6px; background:var(--ink); transition:transform .3s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger{ border-color:rgba(253,250,239,.4); }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before,body.menu-open .burger span::after{ background:var(--cream); }
body.menu-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1000px){
  .nav,.header__cta{ display:none; }
  .burger{ display:flex; }
}
/* Mobilni meni */
.drawer{
  position:fixed; inset:0; z-index:99; background:var(--espresso); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; padding:5.5rem var(--gutter) 3rem;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
}
body.menu-open .drawer{ opacity:1; visibility:visible; transform:none; }
body.menu-open{ overflow:hidden; }
.drawer a{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.3rem,5.2vw,1.9rem); text-decoration:none;
  color:var(--cream); padding:.3rem 0; display:block; opacity:.92;
}
.drawer a[aria-current="page"]{ color:var(--butter-2); }
.drawer__foot{ margin-top:2rem; padding-top:1.3rem; border-top:1px solid var(--line-light); font-size:.9rem; color:rgba(253,250,239,.82); }
.drawer__foot a{ font-family:var(--f-sans); font-size:.92rem; display:inline; color:var(--butter-2); }

.skip{ position:absolute; left:-9999px; top:0; background:var(--espresso); color:var(--cream); padding:.8rem 1.2rem; z-index:200; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

/* ---------- 7. Hero ------------------------------------------------------ */
/* Naslovna po maketi: puter krem podloga, organske mrlje, izrezan portret,
   rukopisna beleška i fotografija dece u mrlji. Boje su izmerene iz makete i
   ograđene na .hero, pa ostatak sajta zadržava zemljanu paletu. */
.hero{
  /* Žute površine ostaju iz makete; sav tekst i linije idu na paletu sajta,
     da naslovna bude ujednačena sa ostalim stranama. */
  --h-bg:     #FEF7DD;   /* puter krem */
  --h-blob:   #FEE9A0;   /* jača žuta mrlja */
  --h-blob-2: #FBEEC8;   /* puter žuta — veliko srce iza portreta */
  --h-ink:    var(--ink);        /* naslov — isti braon kao h2 na ostatku sajta */
  /* tamniji prigušeni tekst: iza njega je fotografija (tamni okvir prozora na 15%
     spušta kontrast obične --ink-soft ispod 4.5:1) */
  --h-body:   #4A3F38;
  --h-btn:    var(--ink);
  --h-line:   var(--ink);
  --h-muted:  #4A3F38;
  --h-script: var(--ink);        /* ikone */

  /* Visina scene prati visinu ekrana: cela naslovna staje u prvi prikaz i na
     laptopu (700px), a ne samo na velikom monitoru. */
  --hero-pt:  clamp(1.5rem,4vh,3rem);
  --hero-pb:  clamp(1.4rem,3.4vh,2.6rem);
  --art-h:    clamp(480px,calc(100svh - 70px - var(--hero-pt) - var(--hero-pb)),700px);
  /* koliko scena sme da izađe desno iz kolone (do ivice prozora, sa rezervom) */
  --bleed:    calc(max(0px,(100vw - 1240px) / 2) + var(--gutter) - 24px);

  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 80% at 76% 38%, rgba(255,251,238,.95) 0%, rgba(255,251,238,0) 70%),
    var(--h-bg);
  color:var(--h-body);
  padding-block:var(--hero-pt) var(--hero-pb);
}
/* meko stapanje sa podlogom ostatka sajta */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:90px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(254,247,221,0) 0%, var(--bg) 100%);
}

/* ---- raspored ---- */
.hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(1.2rem,2.4vw,2.4rem); align-items:center;
  min-height:var(--art-h);
}
.hero__text{ max-width:36rem; }
/* Fotografija je iza teksta (30%): mek svetli oreol drži slova čitljivima, a da se slika ne dira. */
.hero__text h1,.hero__text .hero__lead,.hero__text .hero__welcome,.hero__values li{
  text-shadow:0 0 10px rgba(254,247,221,1),0 0 4px rgba(254,247,221,1),0 0 22px rgba(254,247,221,.85),0 0 40px rgba(254,247,221,.6);
}
.hero__lead{ font-weight:500; }
.hero__welcome{ font-weight:700; }
.hero__values li{ font-weight:600; color:#3F352F; }
.btn-p--line{ background:rgba(254,247,221,.78); }

.hero__welcome{
  display:block; margin-bottom:1.3rem;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--h-muted);
}

.hero h1{
  font-family:var(--f-display);          /* Montserrat, kao ostali naslovi */
  font-weight:700; color:var(--h-ink);
  font-size:min(clamp(1.95rem,1.1rem + 2.7vw,3.15rem),6.3svh);
  line-height:1.1; letter-spacing:-.022em; margin-bottom:1.1rem;
}
/* Terakota sajta (--accent-ink, ista kao „Najvažniji putevi…“) — drugi deo naslova i nadnaslov */
.hero h1 .hero__red{ color:var(--accent-ink); }
.hero .hero__welcome{ color:var(--accent-ink); }
.hero__lead{
  font-size:clamp(.98rem,.95rem + .3vw,1.12rem); line-height:1.62;
  color:var(--h-body); max-width:34rem;
}

/* ---- dugmad iz makete: pilule, verzal, razmaknuto ---- */
.hero__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; margin-top:clamp(1.2rem,3vh,1.9rem); }
.btn-p{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:.95rem 1.7rem; border-radius:100px; text-decoration:none;
  font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; line-height:1;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s;
}
.btn-p .arr{ transition:transform .35s var(--ease); font-size:1.15em; }
.btn-p:hover{ transform:translateY(-2px); }
.btn-p:hover .arr{ transform:translateX(5px); }
.btn-p--fill{ background:var(--h-btn); color:var(--bg); box-shadow:0 10px 26px -14px rgba(68,59,52,.55); }
.btn-p--fill:hover{ background:#332C27; box-shadow:0 16px 32px -14px rgba(68,59,52,.6); }
.btn-p--line{ border-color:var(--h-line); color:var(--h-line); }
.btn-p--line:hover{ background:var(--h-line); color:var(--bg); }

/* ---- četiri vrednosti sa razdelnicima ---- */
/* Fotografija u pozadini naslovne: 15% vidljivosti. Iznad pozadinske boje, ispod
   svega ostalog (z-index:-1 u izolovanom kontekstu sekcije). */
.hero{ --hero-photo-op:.15; }
.hero__bgphoto{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* Fotografija je svuda ravnomerno 30% vidljiva (bez gradijenta); čitljivost teksta drži tamniji braon u herou. */
.hero__bgphoto img{ width:100%; height:100%; object-fit:cover; object-position:50% 75%; opacity:var(--hero-photo-op); display:block; }
@media (max-width:999px){
  /* na telefonu je sve u koloni: kadar ostaje sa leve strane, gde je Mina */
  .hero__bgphoto img{ object-position:12% 50%; }
}
/* Minina glava treba da ostane u kadru: što je ekran širi, slika je veća, pa se kadar spušta/podiže */
@media (min-width:1000px) and (max-width:1279px){ .hero__bgphoto img{ object-position:50% 86%; } }
@media (min-width:1700px){ .hero__bgphoto img{ object-position:50% 58%; } }
.hero__values{
  list-style:none; padding:0; margin-top:clamp(1.3rem,3.2vh,2.6rem);
  display:flex; flex-wrap:wrap; gap:.4rem 0;
}
.hero__values li{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding-inline:clamp(.8rem,2vw,1.6rem);
  font-size:.78rem; color:var(--h-body); text-align:center;
}
.hero__values li + li{ border-left:1px solid rgba(68,59,52,.18); }
.hero__ico{ color:var(--h-script); }
.hero__ico svg{ width:26px; height:26px; }

/* ---- desna strana: jedna scena koja se skalira -----------------------------
   Mobilno (osnova): elementi se slažu direktno u koloni (.hero__stage je
   display:contents). Od 940px sve živi u .hero__stage — kutiji stalnog odnosa
   stranica čija veličina prati visinu ekrana, a svaki sloj je u PROCENTIMA te
   kutije. Zato je kompozicija ista na 1000px i na 1900px, samo se skalira.
   Slojevi: srce (0) · deca (1) · Mina (2) · doodle i rukopis (3). */
.hero__art{
  position:relative; align-self:stretch; min-height:clamp(420px,92vw,560px);
  margin-bottom:calc(-1 * var(--hero-pb));   /* portret ide do samog dna sekcije */
}
.hero__stage{ display:contents; }

/* Veliko asimetrično srce — gradijent iz puter žute, da se čita kao oblik */
.hero__heartbg{
  position:absolute; left:-8%; top:8%; width:120%; z-index:0; overflow:visible;
  filter:drop-shadow(0 30px 40px rgba(170,95,65,.18));
}

/* Rukopisna poruka na žutom srcu, sa jednim srcem ispod (isti braon, tanka linija) */
.hero__note{
  position:absolute; right:5%; top:26%; z-index:3; width:min(36%,150px);
  font-family:Kalam, "Segoe Script", cursive; font-weight:400;
  font-size:.82rem; line-height:1.5; color:var(--ink);
  transform:rotate(-9deg); transform-origin:0 100%; text-align:left;
}
.hero__note > span{ display:block; }
.hero__note > span:nth-child(2){ margin-left:-.2em; }
.hero__note > span:nth-child(3){ margin-left:-.35em; }
.hero__note-heart{ display:block; width:1.7em; margin:.45em 0 0 .1em; }
.hero__note-heart path{ stroke-width:1.5; }

/* Mina: izrezana bez pozadine, do pojasa; NEMA belog prelaza ispod nje */
.hero__cut{
  /* lice je na ~57% širine isečka (izmereno na hero-mina-cut2.webp); `translate`
     (odvojeno od `transform` koji koristi intro) ga postavlja u sredinu srca na svakoj širini */
  position:absolute; left:52%; translate:-57% 0; bottom:0; z-index:2;
  height:min(104%,540px); width:auto; max-width:none;
  filter:drop-shadow(0 24px 38px rgba(68,59,52,.16));
}

/* ---- scena (≥1000px) --------------------------------------------------- */
@media (min-width:1000px){
  .hero__art{ min-height:var(--art-h); }
  .hero__stage{
    display:block; position:absolute; right:calc(-1 * var(--bleed)); bottom:0;
    width:min(calc(var(--art-h) * 1.22),
              calc(100% + var(--bleed) + clamp(0px, calc((100vw - 1100px) * .3), 6.5rem)));
    aspect-ratio:1.22; container-type:inline-size;
  }
  /* Mina stoji u sredini srca: lice ispod useka, oba režnja vidljiva sa strane */
  .hero__heartbg{ left:-6%; top:10%; width:112%; }
  .hero__cut{ left:50%; translate:-57% 0; bottom:-7%; height:109%; }
  .hero__note{ left:67%; right:auto; top:26%; width:28%; font-size:2.9cqw; }
}

/* ---- uži ekrani ---- */
@media (max-width:1279px){
  /* četiri vrednosti i dugme moraju da stanu u jedan red */
  .hero__values li{ padding-inline:.6rem; font-size:.72rem; }
  .hero__ico svg{ width:23px; height:23px; }
  .btn-p{ white-space:nowrap; font-size:.68rem; letter-spacing:.09em; padding-inline:1.4rem; }
}
@media (min-width:1000px) and (max-width:1279px){
  /* više mesta sceni, naslov malo manji da ostane u 4 reda */
  .hero__in{ grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); }
  .hero h1{ font-size:min(calc(1rem + 2.35vw),6.3svh); }
}
@media (max-width:999px){
  .hero__in{ grid-template-columns:1fr; min-height:0; gap:clamp(1.6rem,5vw,2.4rem); }
  .hero__text{ max-width:none; }
}
@media (min-width:561px) and (max-width:999px){
  /* na ovoj širini joj kosa/rame dodiruje belešku — pomerena malo ulevo */
  .hero__cut{ left:40%; }
}
@media (max-width:560px){
  .hero__cta{ align-self:stretch; }
  .btn-p{ white-space:normal; line-height:1.3; justify-content:center; width:100%; font-size:.68rem; letter-spacing:.08em;
          padding-inline:1.1rem; text-align:center; }
  .hero__values{ justify-content:space-between; }
  .hero__values li{ padding-inline:.35rem; font-size:.68rem; }
  .hero__values li + li{ border-left:0; }
  .hero__ico svg{ width:22px; height:22px; }
  .hero__art{ min-height:clamp(380px,100vw,470px); }
  .hero__cut{ height:min(104%,470px); }
  /* uz ivicu, desno od Mine — da ne pređe preko kose */
  .hero__note{ right:1%; top:31%; width:27%; font-size:.72rem; }
}

/* --- Zaglavlje sa fotografijom preko cele širine (vidljivost 10%) -----------
   Fotografija je pozadina; tekst ide preko nje. Vidljivost se menja jednom
   promenljivom (--photo-op). Tekst je pun --ink jer prigušena siva na 10%
   fotografije jedva prelazi 4.5:1; nadnaslov je u beloj pilulici. ----------- */
.photo-hero{
  --photo-op:.1;
  position:relative; isolation:isolate; overflow:hidden; background:var(--cream);
  display:flex; align-items:center;
  min-height:clamp(430px,42vw,620px);
  padding-block:clamp(2.6rem,6vw,4.6rem);
}
.photo-hero__bg{ position:absolute; inset:0; z-index:-1; display:block; }
.photo-hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 55%;
  opacity:var(--photo-op);
}
.photo-hero__in{ position:relative; width:100%; }
.photo-hero .crumbs{ color:var(--ink); }
.photo-hero .crumbs a:hover{ color:var(--coral-ink); }
.photo-hero__text{ max-width:min(52%,600px); }
.photo-hero h1{ max-width:16ch; margin-bottom:1.2rem; }
.photo-hero .lead{ color:var(--ink); max-width:46ch; }
@media (max-width:900px){
  .photo-hero__text{ max-width:none; }
  .photo-hero h1{ max-width:14ch; }
}
@media (max-width:700px){
  .photo-hero{ min-height:clamp(600px,164vw,700px); align-items:flex-start; }
  .photo-hero__bg img{ object-position:50% 100%; }
}

/* Traka tema */
.ticker{ border-block:1px solid var(--line-soft); background:var(--white); overflow:hidden; padding-block:.9rem; }
.ticker__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.ticker__group{ display:flex; flex:none; }
.ticker span{
  font-family:var(--f-display); font-weight:700; font-size:clamp(.85rem,.8rem + .3vw,1rem);
  letter-spacing:-.005em;
  color:var(--ink-soft); padding-inline:1.1rem; display:inline-flex; align-items:center; gap:1.1rem; white-space:nowrap;
}
.ticker span::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--pink-3); }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* ---------- 8. Kartice --------------------------------------------------- */
.svc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.2vw,1.6rem); }
@media (max-width:760px){ .svc{ grid-template-columns:1fr; } }
.card{
  position:relative; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.3rem);
  display:flex; flex-direction:column; gap:.85rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; right:-70px; top:-70px; width:190px; height:190px; border-radius:50%;
  background:var(--butter); opacity:0; transform:scale(.6);
  transition:opacity .5s var(--ease), transform .6s var(--ease-out);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(58,50,41,.24); }
.card:hover::before{ opacity:.5; transform:scale(1); }
.card > *{ position:relative; z-index:1; }
.card__num{
  font-family:var(--f-display); font-weight:800; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral-ink);
  display:block;
}
.card__icon{ width:44px; height:44px; color:var(--accent-ink); }
.card p{ color:var(--ink-soft); font-size:.97rem; flex:1; }
.card .link{ margin-top:.4rem; align-self:flex-start; }
.card--dark{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); }
.card--dark h3{ color:var(--cream); } .card--dark p{ color:rgba(253,250,239,.87); }
.card--dark .card__num{ color:var(--coral-lt); }
.card--dark .card__icon{ color:var(--butter-2); }
.card--dark::before{ background:var(--cocoa); }
.card--dark .link{ color:var(--butter-2); }
.card--warm{ background:var(--warm); border-color:rgba(68,59,52,.12); }
.card--warm::before{ background:var(--butter-3); }
.card--sand{ background:var(--surface-subtle); border-color:var(--line); }
.card--sand::before{ background:var(--pink-2); }
.card--sand .card__icon{ color:var(--accent-ink); }
.card--base{ background:var(--bg); }

/* ---------- 9. Liste ----------------------------------------------------- */
.check{ list-style:none; padding:0; display:grid; gap:.7rem; }
/* NB: stavka NE sme biti flex/grid kontejner — inline <strong>/<em> bi postali zasebne stavke. */
.check li{ position:relative; padding-left:1.95rem; line-height:1.5; }
.check li::before{
  content:""; position:absolute; left:0; top:.22em; width:20px; height:20px; border-radius:50%;
  background:var(--butter) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%233A3229' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  border:1.5px solid var(--ink);
}

/* Kvačice se upisuju jedna po jedna kad lista uđe u vidno polje.
   JS samo doda SVG i postavi --i po stavci; kašnjenje radi CSS (transition-delay),
   jer se JS tajmeri u neaktivnom tabu grupišu pa bi sve okinulo odjednom.
   Bez JS-a ostaje statička kvačica iz pravila iznad. */
.check.js-tick li::before{
  background-image:none;
  transform:scale(.72); opacity:.35;
  transition:transform .5s var(--ease-out), opacity .4s var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--tick-step,220ms));
}
.check.is-ticking li::before{ transform:scale(1); opacity:1; }
.check-tick{
  position:absolute; left:0; top:.22em; width:20px; height:20px;
  pointer-events:none; overflow:visible;
}
.check-tick path{
  fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--tick-len,20); stroke-dashoffset:var(--tick-len,20);
  transition:stroke-dashoffset .42s var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--tick-step,220ms) + 130ms);
}
.check.is-ticking .check-tick path{ stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){
  .check.js-tick li::before{ transform:none; opacity:1; transition:none; }
  .check-tick path{ stroke-dashoffset:0 !important; transition:none; }
}
.check--2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem clamp(1rem,3vw,2.5rem); }
@media (max-width:700px){ .check--2{ grid-template-columns:1fr; } }
.bg-dark .check li::before{ background-color:var(--butter-2); border-color:var(--butter-2); }

.dots{ list-style:none; padding:0; display:grid; gap:.55rem; }
.dots li{ position:relative; padding-left:1.5rem; }
.dots li::before{ content:"✳"; position:absolute; left:0; top:0; color:var(--clay); font-size:.9em; line-height:1.75; }
.bg-dark .dots li::before{ color:var(--butter-2); }

/* ---------- 10. Izjava / citat ------------------------------------------- */
.statement{
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.42rem,1rem + 2.2vw,2.5rem);
  line-height:1.14; letter-spacing:-.025em; text-wrap:balance;
}
.pullquote{
  position:relative; padding:clamp(1.9rem,4vw,3rem) clamp(1.5rem,4vw,3.2rem);
  background:var(--butter); border-radius:var(--r-lg); border:1.5px solid var(--butter-2);
}
.pullquote::before{
  content:"”"; position:absolute; left:clamp(.7rem,2vw,1.4rem); top:-.22em;
  font-family:Georgia,serif; font-size:clamp(4.5rem,11vw,7.5rem); color:var(--coral); opacity:.3; line-height:1;
}

/* ---------- 11. Foto okviri --------------------------------------------- */
.frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); background:var(--sand); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame--arch{ border-radius:var(--arch); }
.frame--tall img{ aspect-ratio:3/4; }
.frame--sq img{ aspect-ratio:1/1; }
.frame--wide img{ aspect-ratio:3/2; }
/* Plakat (story format 9:16) — prikazuje se ceo, bez sečenja; tekst je u samoj slici */
.frame--poster{ max-width:400px; margin-inline:auto; background:transparent; border-radius:var(--r-md); line-height:0; }
.frame--poster img{ display:block; width:100%; height:auto; object-fit:contain; }
.poster-cta{ max-width:400px; margin:1.4rem auto 0; text-align:center; }
.frame--tilt{ transform:rotate(-1.6deg); }
.frame--tilt2{ transform:rotate(1.4deg); }
.photo-note{
  font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-ink);
  position:relative; padding-left:1.25rem; margin-top:.9rem; line-height:1.45;
}
.photo-note::before{ content:"✳"; position:absolute; left:0; top:0; font-size:.85rem; }
.bg-dark .photo-note{ color:var(--coral-lt); }

/* Tri fotografije: dve uspravne jedna pored druge (desna spuštena), široka preko obe ispod */
.photo-trio{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,2vw,1.4rem); align-items:start; }
.photo-trio > :nth-child(2){ margin-top:clamp(1.5rem,5vw,3.5rem); }
.photo-trio > :nth-child(3){ grid-column:1 / -1; width:66%; justify-self:center; }
.photo-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,2vw,1.4rem); align-items:start; }
.photo-duo > :nth-child(2){ margin-top:clamp(1.5rem,5vw,3.5rem); }

/* ---------- 12. Upitnik / putokaz ---------------------------------------- */
.quiz{ position:relative; overflow:hidden; }
.quiz__card{
  background:var(--espresso-2); border:1.5px solid rgba(253,250,239,.14); border-radius:var(--r-xl);
  padding:clamp(1.5rem,4vw,3.2rem); max-width:860px; margin-inline:auto; position:relative;
  box-shadow:var(--shadow-lg);
}
.quiz__progress{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.6rem; }
.quiz__step{ width:26px; height:4px; border-radius:99px; background:rgba(253,250,239,.22); transition:background .35s, transform .35s var(--ease); transform-origin:0 50%; }
.quiz__step.is-done{ background:var(--butter-2); }
.quiz__step.is-now{ background:var(--butter-2); transform:scaleX(1.5); }
.quiz__count{ margin-left:auto; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(253,250,239,.6); }
.quiz__q{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.2rem,1rem + 1.4vw,1.8rem); line-height:1.16; letter-spacing:-.02em; margin-bottom:1.4rem; color:var(--cream); }
.quiz__opts{ display:grid; gap:.7rem; }
.opt{
  display:flex; align-items:flex-start; gap:.9rem; width:100%; text-align:left;
  background:rgba(253,250,239,.05); border:1.5px solid rgba(253,250,239,.18); color:var(--cream);
  border-radius:var(--r-md); padding:1rem 1.15rem; cursor:pointer; line-height:1.45; font-size:.98rem;
  transition:background .25s, border-color .25s, transform .3s var(--ease);
}
.opt:hover{ background:rgba(255,250,199,.14); border-color:var(--butter-2); transform:translateX(4px); }
.opt__k{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,250,199,.18); color:var(--butter-2); font-size:.78rem; font-weight:800; margin-top:.06em;
  transition:background .25s, color .25s;
}
.opt:hover .opt__k{ background:var(--butter-2); color:var(--ink); }
.quiz__nav{ display:flex; align-items:center; gap:1rem; margin-top:1.4rem; }
.quiz__back{
  background:none; border:0; color:rgba(253,250,239,.77); font-size:.85rem; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; padding:.3rem 0;
}
.quiz__back:hover{ color:var(--butter-2); }
.quiz__back[hidden]{ display:none; }

.result__tag{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--butter-2); color:var(--ink);
  font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:.4rem .9rem; border-radius:99px; margin-bottom:1.1rem;
}
.result__title{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,1.05rem + 1.5vw,2rem); line-height:1.14; letter-spacing:-.02em; color:var(--butter); margin-bottom:.9rem; }
.result__body{ color:rgba(253,250,239,.91); }
.result__body p + p{ margin-top:.8rem; }
.result__two{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin:1.4rem 0; }
@media (max-width:640px){ .result__two{ grid-template-columns:1fr; } }
.result__mini{ background:rgba(253,250,239,.06); border:1.5px solid rgba(253,250,239,.16); border-radius:var(--r-md); padding:1.1rem 1.2rem; }
.result__mini h4{ color:var(--butter-2); margin-bottom:.4rem; font-size:1.05rem; }
.result__mini p{ font-size:.9rem; color:rgba(253,250,239,.87); line-height:1.5; }
.result__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.result__foot{ margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid rgba(253,250,239,.16); font-size:.8rem; color:rgba(253,250,239,.6); line-height:1.55; }
.result__foot a{ color:var(--butter-2); }
.fade-swap{ animation:fadeUp .5s var(--ease-out) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .fade-swap{ animation:none; } }

/* ---------- 13. Akordeon ------------------------------------------------- */
.acc{ border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{
  cursor:pointer; list-style:none; padding:1.25rem 3rem 1.25rem 0; position:relative;
  font-weight:700; font-size:1.02rem; line-height:1.4;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:""; position:absolute; right:.4rem; top:1.55rem; width:14px; height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23C03A37' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .35s var(--ease);
}
.acc details[open] summary::after{ transform:rotate(135deg); }
.acc details > div{ padding:0 3rem 1.4rem 0; color:var(--ink-soft); }
.acc details > div > * + *{ margin-top:.7rem; }
.bg-dark .acc,.bg-dark .acc details{ border-color:var(--line-light); }
.bg-dark .acc details > div{ color:rgba(253,250,239,.87); }
.bg-dark .acc summary::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23FF8A84' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- 14. Koraci / moduli ------------------------------------------ */
.steps{ display:grid; gap:clamp(1rem,2.2vw,1.5rem); counter-reset:s; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:start;
  padding:clamp(1.3rem,2.6vw,1.9rem); background:var(--white); border:1.5px solid var(--line-soft); border-radius:var(--r-lg);
}
.bg-base .step{ background:var(--cream-2); }
.step__n{
  counter-increment:s; width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--butter); border:1.5px solid var(--ink);
  font-family:var(--f-display); font-weight:800; font-size:.95rem;
}
.step__n::before{ content:counter(s,decimal-leading-zero); }
.step h4{ margin-bottom:.35rem; }
.step p{ color:var(--ink-soft); font-size:.96rem; }
.step p + p{ margin-top:.6rem; }
.bg-dark .step{ background:rgba(253,250,239,.05); border-color:var(--line-light); }
.bg-dark .step p{ color:rgba(253,250,239,.87); }
.bg-dark .step__n{ background:var(--butter-2); border-color:var(--butter-2); color:var(--ink); }

/* ---------- 15. Cena ----------------------------------------------------- */
.price{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2.5rem;
  padding:clamp(1.3rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem);
  background:var(--butter); border:1.5px solid var(--butter-2); border-radius:var(--r-lg);
}
.price__item{ display:flex; flex-direction:column; gap:.1rem; }
.price__label{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.price__value{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.2rem,1.05rem + .8vw,1.65rem); line-height:1.15; letter-spacing:-.02em; }
.price .btn{ margin-left:auto; }
@media (max-width:640px){ .price .btn{ margin-left:0; width:100%; } }

/* ---------- 16. Forme ---------------------------------------------------- */
.form{ display:grid; gap:1.05rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.82rem; font-weight:700; }
.field .req{ color:var(--clay-ink); }
.field input,.field select,.field textarea{
  width:100%; padding:.82rem 1rem; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--cream); font-size:.98rem; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.55; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--clay-ink); box-shadow:0 0 0 3px rgba(192,58,55,.15);
}
.field .hint{ font-size:.78rem; color:var(--ink-soft); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr; } }
.form__note{ font-size:.8rem; color:var(--ink-soft); line-height:1.55; }
.form__msg{ font-size:.9rem; font-weight:600; padding:.9rem 1.1rem; border-radius:var(--r-sm); background:var(--butter); border:1.5px solid var(--butter-2); }
.form__msg[hidden]{ display:none; }

.news{ display:grid; grid-template-columns:1fr auto; gap:.7rem; max-width:520px; }
.news input{
  padding:.95rem 1.15rem; border-radius:100px; border:1.5px solid rgba(253,250,239,.35);
  background:rgba(253,250,239,.07); color:var(--cream); font-size:.95rem;
}
.news input::placeholder{ color:rgba(253,250,239,.64); }
.news input:focus{ outline:none; border-color:var(--butter-2); background:rgba(253,250,239,.12); }
/* newsletter na svetloj (roze) podlozi */
.news--light input{ background:var(--white); border-color:var(--pink-2); color:var(--ink); }
.news--light input::placeholder{ color:var(--ink-soft); }
.news--light input:focus{ border-color:var(--coral-ink); background:var(--white); box-shadow:0 0 0 3px rgba(192,58,55,.15); }

@media (max-width:560px){ .news{ grid-template-columns:1fr; } }

/* ---------- 17. Kontakt kanali ------------------------------------------ */
.channels{ display:grid; gap:.8rem; }
.channel{
  display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; text-decoration:none;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--cream);
  transition:border-color .25s, transform .3s var(--ease), background .25s;
}
.channel:hover{ border-color:var(--ink); transform:translateX(4px); background:var(--cream-2); }
.channel__ico{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--butter); display:grid; place-items:center; color:var(--ink); }
.channel__ico svg{ width:19px; height:19px; }
.channel b{ display:block; font-size:.95rem; }
.channel span{ font-size:.85rem; color:var(--ink-soft); }

/* ---------- 18. CTA blok ------------------------------------------------- */
.cta{ background:var(--espresso); color:var(--cream); border-radius:var(--r-xl); padding:clamp(2.2rem,5vw,4rem); position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; right:-8%; top:-40%; width:min(52%,420px); aspect-ratio:1;
  background:var(--cocoa); border-radius:50%; opacity:.55;
}
.cta > *{ position:relative; z-index:1; }
.cta h2{ color:var(--cream); max-width:20ch; }
/* svetla varijanta — žuta ploča sa tamnim tekstom */
.cta--light{ background:var(--butter); color:var(--ink); }
.cta--light::before{ background:var(--pink-2); opacity:.6; }
.cta--light h2,.cta--light h3{ color:var(--ink); }
.cta--light .lead,.cta--light p{ color:var(--ink-soft); }
.cta--light .kicker{ color:var(--ink-soft); }
.cta--light .eyebrow{ color:var(--coral-ink); }

/* ---------- 19. Blog ----------------------------------------------------- */
.posts{ display:grid; gap:clamp(1.2rem,3vw,2rem); grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:940px){ .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.posts--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:620px){ .posts,.posts--2{ grid-template-columns:1fr; } }
.post{
  display:flex; flex-direction:column; gap:.75rem; text-decoration:none;
  border:1.5px solid var(--line); border-radius:var(--r-lg); padding:1.5rem;
  background:var(--surface); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.post:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(58,50,41,.24); }
.tag{
  display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral-ink); background:var(--sand); padding:.3rem .65rem; border-radius:99px; align-self:flex-start;
}
.post h3{ font-size:1.12rem; line-height:1.25; }
.post p{ font-size:.93rem; color:var(--ink-soft); flex:1; }
.post__more{ font-size:.8rem; font-weight:800; letter-spacing:.02em; color:var(--coral-ink); display:inline-flex; gap:.4rem; align-items:center; transition:gap .3s var(--ease); }
.post:hover .post__more{ gap:.7rem; }

.article{ max-width:68ch; margin-inline:auto; }
.article > * + *{ margin-top:1.15rem; }
.article h2{ font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem); margin-top:2.6rem; }
.article h3{ font-size:clamp(1.15rem,1rem + .7vw,1.45rem); margin-top:1.9rem; }
.article ul,.article ol{ padding-left:1.25rem; display:grid; gap:.5rem; }
.article li{ line-height:1.6; }
.article blockquote{
  border-left:3px solid var(--coral); padding:.3rem 0 .3rem 1.3rem; margin-block:1.8rem;
  font-family:var(--f-display); font-weight:700; font-size:1.12rem; line-height:1.42; letter-spacing:-.012em;
}

/* ---------- 20. Footer --------------------------------------------------- */
.footer{ background:var(--espresso); color:rgba(253,250,239,.88); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.footer a{ color:rgba(253,250,239,.88); text-decoration:none; }
.footer a:hover{ color:var(--butter-2); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(1.8rem,4vw,3.5rem); }
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }
.footer .logo{ color:var(--cream); font-size:1.3rem; }
.footer .logo .ring{ color:var(--coral-lt); }
.footer h4{ font-family:var(--f-sans); font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:rgba(253,250,239,.72); margin-bottom:1rem; }
.footer ul{ list-style:none; padding:0; display:grid; gap:.55rem; font-size:.92rem; }
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid var(--line-light);
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; font-size:.8rem; color:rgba(253,250,239,.72);
}
.disclaimer{ font-size:.78rem; line-height:1.6; color:rgba(253,250,239,.76); max-width:64ch; margin-top:1.2rem; }

/* ---------- 20b. Uvodna animacija (intro) --------------------------------
   Prikazuje se samo kad je na <html> klasa .intro-on — postavlja je mala
   skripta u <head> pre prvog iscrtavanja. Bez JS-a, pri povratku u istoj
   sesiji i uz „smanji animacije" klase nema, pa se ceo overlay ni ne crta.
   Trajanja postavlja intro.js kao promenljive, da se CSS i JS ne razilaze.
   ------------------------------------------------------------------------ */
.intro{ display:none; }
.intro-on .intro{
  display:block; position:fixed; inset:0; z-index:9999;
  background:#38302A; overflow:hidden;
  --ease-lux:cubic-bezier(.76,0,.24,1);
}
.intro-on body{ overflow:hidden; }

.intro__panels{ position:absolute; inset:0; display:flex; }
.intro__panel{
  position:relative; margin:0; flex:1 1 50%; overflow:hidden;
  clip-path:inset(100% 0 0 0);
  will-change:clip-path, transform;
  transform:translate3d(0,0,0);
}
.intro__panel img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.22) translate3d(0,0,0);
  will-change:transform;
}
.intro__panel--a img{ object-position:50% 30%; }
.intro__panel--b img{ object-position:50% 42%; }

/* Faza 2 — zavese se otvaraju odozdo nagore, slika se istovremeno de-zumira */
.intro.is-open .intro__panel{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--intro-open,1200ms) var(--ease-lux);
}
.intro.is-open .intro__panel--b{ transition-delay:90ms; }
.intro.is-open .intro__panel img{
  transform:scale(1) translate3d(0,0,0);
  transition:transform calc(var(--intro-open,1200ms) + 260ms) var(--ease-lux);
}

/* Faza 3 — levi panel se zatvara nagore (ogledalo otvaranja) i otkriva tekst,
   desni odlazi na svoje mesto u herou i tu se preda pravoj fotografiji. */
.intro.is-settling .intro__panel{
  transition:transform var(--intro-settle,800ms) var(--ease-lux),
             clip-path var(--intro-settle,800ms) var(--ease-lux),
             opacity calc(var(--intro-settle,800ms) * .5) linear calc(var(--intro-settle,800ms) * .5);
}
/* Obe zavese se zatvaraju nagore — ogledalo otvaranja — i otkrivaju
   složen hero ispod. Hero nema par jedan-na-jedan sa panelima, pa FLIP
   ovde ne bi imao smisla. */
.intro.is-settling .intro__panel{ clip-path:inset(0 0 100% 0); opacity:0; }
.intro.is-settling .intro__panel--b{ transition-delay:80ms; }
.intro.is-settling{
  transition:background-color calc(var(--intro-settle,800ms) * .8) linear;
  background:transparent;
}
.intro.is-done{ opacity:0; pointer-events:none; }

/* Natpis, brojač i tanka linija napretka */
.intro__mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; gap:.3em; z-index:2;
  font-weight:800; font-size:clamp(1.15rem,3.4vw,1.6rem); letter-spacing:-.03em;
  color:var(--bg); text-transform:lowercase;
  transition:opacity 420ms var(--ease-lux), transform 520ms var(--ease-lux);
}
.intro__mark-hi{ color:var(--coral); }
.intro__count{
  position:absolute; right:clamp(1.25rem,4vw,3.25rem); bottom:clamp(1.4rem,4vw,2.6rem); z-index:2;
  font-size:.78rem; font-weight:800; letter-spacing:.12em; color:rgba(250,247,242,.72);
  font-variant-numeric:tabular-nums;
  transition:opacity 360ms linear;
}
.intro__meter{
  position:absolute; left:clamp(1.25rem,4vw,3.25rem); right:clamp(1.25rem,4vw,3.25rem);
  bottom:clamp(1.4rem,4vw,2.6rem); height:1px; background:rgba(250,247,242,.2); z-index:2;
  transition:opacity 360ms linear;
}
.intro__meter-fill{
  display:block; height:100%; width:100%; background:rgba(250,247,242,.8);
  transform:scaleX(0); transform-origin:0 50%;
}
.intro.is-open .intro__mark,
.intro.is-open .intro__count,
.intro.is-open .intro__meter{ opacity:0; }
.intro.is-open .intro__mark{ transform:translate(-50%,-50%) scale(.97); }

/* ---------- Početno stanje heroja dok intro traje ------------------------ */
.intro-on .hero__cut{ opacity:0; transform:translate3d(0,26px,0); }
.intro-on .hero__heartbg,
.intro-on .hero__note{ opacity:0; }
.intro-on .hero__welcome,
.intro-on .hero__cta,
.intro-on .hero__values{ opacity:0; }
.intro-on .header{ opacity:0; transform:translate3d(0,-20px,0); }

/* Faza 3/4 — hero se sklapa */
.intro-on .hero__cut{
  transition:opacity var(--intro-settle,800ms) var(--ease-lux,cubic-bezier(.76,0,.24,1)),
             transform calc(var(--intro-settle,800ms) + 240ms) var(--ease-lux,cubic-bezier(.76,0,.24,1));
}
.intro-on .hero__heartbg,
.intro-on .hero__note{
  transition:opacity 900ms var(--ease-lux,cubic-bezier(.76,0,.24,1));
}
.intro-on.hero-in .hero__cut{ opacity:1; transform:translate3d(0,0,0); }
.intro-on.hero-in .hero__heartbg{ opacity:1; }
.intro-on.text-in .hero__note{ opacity:1; transition-delay:200ms; }

.intro-on .header{ transition:opacity 520ms var(--ease-lux,cubic-bezier(.76,0,.24,1)),
                              transform 620ms var(--ease-lux,cubic-bezier(.76,0,.24,1)); }
.intro-on.nav-in .header{ opacity:1; transform:translate3d(0,0,0); }

.intro-on .hero__welcome,
.intro-on .hero__cta,
.intro-on .hero__values{
  transform:translate3d(0,14px,0);
  transition:opacity 560ms var(--ease-lux,cubic-bezier(.76,0,.24,1)),
             transform 640ms var(--ease-lux,cubic-bezier(.76,0,.24,1));
}
.intro-on.text-in .hero__welcome,
.intro-on.text-in .hero__cta,
.intro-on.text-in .hero__values{ opacity:1; transform:translate3d(0,0,0); }
.intro-on.text-in .hero__cta{ transition-delay:120ms; }
.intro-on.text-in .hero__values{ transition-delay:200ms; }


/* ---------- Tekst koji izranja red po red -------------------------------- */
/* Reči su u maski; iste reči u istom redu dele kašnjenje, pa se čita kao
   izranjanje reda po red. Padding + negativna margina štite dijakritiku
   (Ć, Č, Ž, Š, Đ idu iznad visine velikih slova) od sečenja maskom. */
.w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:.16em .03em .2em; margin:-.16em -.03em -.2em;
}
.w__i{ display:inline-block; will-change:transform; }
.intro-on .w__i{ transform:translate3d(0,120%,0); }
.intro-on.text-in .w__i{
  transform:translate3d(0,0,0);
  transition:transform 780ms var(--ease-lux,cubic-bezier(.76,0,.24,1));
  transition-delay:calc(var(--l,0) * 90ms + var(--wd,0ms));
}

@media (prefers-reduced-motion: reduce){
  .intro-on .intro{ display:none; }
  .intro-on .hero__cut,.intro-on .w__i,
  .intro-on .header,.intro-on .hero__welcome,.intro-on .hero__cta,
  .intro-on .hero__values,.intro-on .hero__heartbg,.intro-on .hero__note{ opacity:1; transition:none; }
}

/* ---------- 21. Otkrivanje pri skrolu ------------------------------------ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
.reveal[data-d="4"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- 22. Sitnice -------------------------------------------------- */
.hr{ height:1px; background:var(--line); border:0; margin-block:clamp(2.5rem,5vw,4rem); }
.bg-dark .hr{ background:var(--line-light); }
.nowrap{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.note{
  background:var(--sand); border-left:3px solid var(--clay); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1rem 1.2rem; font-size:.9rem; line-height:1.6; color:var(--ink-soft);
}
.bg-dark .note{ background:rgba(253,250,239,.06); border-left-color:var(--butter-2); color:rgba(253,250,239,.87); }
.page-head{ padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem); overflow-x:clip; }
@supports not (overflow-x:clip){ .page-head{ overflow:hidden; } }
.page-head h1{ max-width:24ch; font-size:clamp(2rem, 1.1rem + 3.2vw, 3.3rem); }
/* Zaglavlje stranice: tekst levo, fotografija u luku desno (O meni, DOMINA).
   Sve je ograđeno na .page-head da se ne sudara sa naslovnom (.hero). */
.page-head .hero__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.page-head .hero__media{ position:relative; max-width:400px; width:100%; margin-inline:auto; }
.page-head .hero__blob{
  position:absolute; inset:-7% -9% -5% 9%; z-index:0; border-radius:46% 54% 40% 60% / 52% 44% 56% 48%;
  background:var(--warm); opacity:.7; transform:rotate(-5deg);
}
.page-head .hero__photo{
  position:relative; z-index:1; overflow:hidden; border-radius:var(--arch);
  box-shadow:var(--shadow-md); background:var(--sand);
}
.page-head .hero__photo img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.page-head .badge{
  position:absolute; z-index:2; left:-4%; top:6%;
  padding:.55rem 1rem; border-radius:100px; background:var(--warm); color:var(--ink);
  font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:var(--shadow-sm); line-height:1.2;
}
@media (max-width:900px){
  .page-head .hero__grid{ grid-template-columns:1fr; }
  .page-head .hero__media{ max-width:340px; }
}
.page-head .split{ grid-template-columns:1.18fr .82fr; }
@media (max-width:900px){ .page-head .split{ grid-template-columns:1fr; } }
.crumbs{ font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--clay-ink); }

/* ---------- Leptirići (sekcija sa data-butterflies) ---------------------- */
/* Pastelni leptirići slobodno lete preko sekcije; iznad sadržaja, ali ne hvataju klik.
   Crtež, boje i let su u assets/js/leptiri.js; ovde je samo treperenje krila
   (brzina i faza po leptiru dolaze iz --flap / --flap-delay). */
.fly{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.bf{ position:absolute; left:0; top:0; will-change:transform; filter:drop-shadow(0 2px 3px rgba(68,59,52,.10)); }
.bf__svg{ display:block; width:100%; height:100%; overflow:visible; }
.bf__wings{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:bf-flap var(--flap,.42s) ease-in-out var(--flap-delay,0s) infinite alternate;
}
@keyframes bf-flap{ from{ transform:scale(1,1); } to{ transform:scale(.32,.97); } }
/* „smanji animacije": stoje mirno, bez treperenja */
.fly.is-still .bf__wings{ animation:none; }
@media (prefers-reduced-motion: reduce){ .bf__wings{ animation:none; } }
@media print{ .fly{ display:none; } }

/* ---------- Utisci roditelja (citati) ----------------------------------- */
.quotes{ columns:3 280px; column-gap:clamp(1rem,2.5vw,1.6rem); }
.quote{
  break-inside:avoid; margin:0 0 clamp(1rem,2.5vw,1.6rem); position:relative;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:3.6rem clamp(1.3rem,2.6vw,1.8rem) clamp(1.2rem,2.4vw,1.5rem);
  box-shadow:var(--shadow-sm);
}
.quote::before{
  content:"\201E"; position:absolute; left:1.3rem; top:.2rem;
  font-family:var(--f-display); font-weight:800; font-size:3.4rem; line-height:1; color:var(--accent);
}
.quote blockquote{ margin:0; font-size:1rem; line-height:1.65; color:var(--ink); }
.quote figcaption{
  margin-top:1rem; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.card__count{
  margin-top:auto; padding-top:.9rem; font-size:.78rem !important; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink) !important; flex:none !important;
}
.card--dark .card__count{ color:var(--coral-lt) !important; }

/* Uvodna rečenica iznad upitnika „Putokaz“ */
.quiz__line{
  max-width:22ch; margin:0 auto clamp(2.4rem,5vw,3.6rem); font-size:clamp(1.5rem,1.1rem + 1.8vw,2.3rem); line-height:1.25;
  padding-bottom:clamp(1.6rem,3.5vw,2.4rem); border-bottom:1px solid var(--line-light); max-width:none;
}
.quiz__line::after{ content:none; }

/* široka fotografija ispod dve kolone (O meni — „Mina van seanse“) */
.photo-tv{ width:66%; margin:clamp(.8rem,2vw,1.4rem) auto 0; }

/* Dve male fotografije jedna pored druge (O meni — Priča) */
.photo-small{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,2vw,1.2rem); max-width:360px; margin-top:clamp(1.6rem,3.5vw,2.4rem); }
.photo-small .frame img{ aspect-ratio:4/5; }

/* Logo u zaglavlju: slika (krug sa leptirima). Nadjačava natpis; u podnožju ostaje natpis. */
.logo--img img{ display:block; width:66px; height:66px; }
@media (max-width:560px){ .logo--img img{ width:56px; height:56px; } }

/* Putokaz iznad upitnika: stub blago klati, a table se njišu levo-desno svaka svojim ritmom */
.signpost{ display:block; width:clamp(104px,14vw,140px); height:auto; margin:0 auto clamp(.9rem,2vw,1.3rem); overflow:visible; }
.signpost__sway{ transform-box:view-box; transform-origin:100px 186px; animation:sp-sway 5.5s ease-in-out infinite alternate; }
.signpost__board{ transform-box:view-box; animation:sp-swing 3.2s ease-in-out infinite alternate; }
.signpost__board--a{ transform-origin:100px 55px;  animation-duration:3.1s; }
.signpost__board--b{ transform-origin:100px 101px; animation-duration:3.9s; animation-delay:-1.4s; }
.signpost__board--c{ transform-origin:100px 140px; animation-duration:3.5s; animation-delay:-2.3s; }
@keyframes sp-swing{ from{ transform:rotate(-6deg); } to{ transform:rotate(6deg); } }
@keyframes sp-sway{ from{ transform:rotate(-1.6deg); } to{ transform:rotate(1.6deg); } }
@media (prefers-reduced-motion: reduce){ .signpost__sway,.signpost__board{ animation:none; } }

/* ---------- Domine u pozadini (svuda gde se pominje DOMINA) --------------- */
/* Sloj stoji iza sadržaja (z-index:-1 u izolovanom kontekstu elementa). Ploče su providne da tekst ostane čitljiv. */
[data-dominoes]{ position:relative; isolation:isolate; overflow:hidden; }
.doms{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; opacity:.6; }
.doms--dark{ opacity:.26; }
.dom{ position:absolute; left:0; top:0; will-change:transform; filter:drop-shadow(0 2px 3px rgba(68,59,52,.22)); }
.dom__svg{ display:block; width:100%; height:100%; }
@media (max-width:700px){ .doms{ opacity:.5; } .doms--dark{ opacity:.22; } }
@media print{ .doms{ display:none; } }

/* Veliki upitnik u pozadini sekcije „Kako da znaš da je ovo baš za tvoje dete“: visi sa gornje ivice i njiše se levo-desno */
.qmark{
  position:absolute; z-index:-1; pointer-events:none; top:-2.5rem; right:clamp(2%,9vw,14%);
  width:clamp(170px,26vw,340px); color:var(--warm); opacity:.12;
  transform-origin:50% -2rem; animation:qmark-sway 7s ease-in-out infinite alternate;
}
.qmark svg{ display:block; width:100%; height:auto; }
@keyframes qmark-sway{ from{ transform:rotate(-7deg); } to{ transform:rotate(7deg); } }
@media (prefers-reduced-motion: reduce){ .qmark{ animation:none; } }

/* ---------- Dete koje raste i pridružuje se grupi (naslovna, „Moja ideja odrastanja“) ---------- */
.grow{ max-width:720px; margin:clamp(1.6rem,4vw,2.6rem) auto 0; color:var(--ink); }
.grow__svg{ display:block; width:100%; height:auto; overflow:visible; }

/* ---------- Put u pozadini („Nastala je kao put.“, domina.html) ---------- */
/* Sloj je iza sadržaja u izolovanom kontekstu sekcije; put je providan da tekst ostane čitljiv. */
[data-path]{ position:relative; isolation:isolate; }
.trail{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.trail__svg{ display:block; }
@media print{ .trail{ display:none; } }

/* Jedna velika domina u pozadini sekcije „Cena i tehničke informacije“ — miruje. Leži iza sadržaja i ne prelazi ivice sekcije. */
.bigdom{
  position:absolute; z-index:-1; pointer-events:none; width:clamp(110px,13vw,172px); aspect-ratio:50/96;
  right:clamp(3%,11vw,14%); top:-2.4rem; transform:rotate(-82deg); opacity:.55;
  filter:drop-shadow(0 6px 10px rgba(68,59,52,.16));
}
.bigdom svg{ display:block; width:100%; height:100%; }
@media (max-width:700px){ .bigdom{ opacity:.4; right:-14%; top:-1rem; } }
/* Upitnik na svetloj podlozi (FAQ): tamnija boja jer je --warm skoro nevidljiv na krem pozadini */
.qmark--light{ color:var(--warm-deep); opacity:.42; }

/* „Mina van seanse“: pet fotografija u dva reda — tri uspravne gore, dole uspravna + široka preko dve kolone */
.photo-mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.5rem,1.2vw,.8rem); align-items:stretch; }
.photo-mosaic .frame{ border-radius:var(--r-md); }
.photo-mosaic .frame img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.photo-mosaic .frame--span2{ grid-column:span 2; }
.photo-mosaic .frame--span2 img{ aspect-ratio:auto; }

/* Velika domina u tamnoj sekciji „Ko stoji iza programa“: providnija i veća, ostaje iza fotografije */
.bigdom--mina{ width:clamp(150px,16vw,230px); right:2%; left:auto; top:-2.6rem; bottom:auto; transform:rotate(28deg); opacity:.34; }
@media (max-width:700px){ .bigdom--mina{ left:auto; right:-8%; bottom:auto; top:-1rem; opacity:.22; } }

/* Veći mirni leptiri u pozadini podnožja: iza sadržaja, bez kretanja, providni da tekst ostane čitljiv */
.footer{ position:relative; isolation:isolate; overflow:hidden; }
.footer__bfs{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.footer__bf{ position:absolute; height:auto; opacity:.32; filter:drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
@media (max-width:700px){
  /* telefon: tekst zauzima celu širinu, pa leptiri idu samo u prazan desni deo */
  .footer__bf{ opacity:.28; }
  .footer__bf:nth-child(1),.footer__bf:nth-child(2),.footer__bf:nth-child(5){ display:none; }
  .footer__bf:nth-child(3){ left:auto !important; right:4% !important; top:1.2rem !important; width:88px !important; }
  .footer__bf:nth-child(4){ left:auto !important; right:7% !important; top:46% !important; bottom:auto !important; width:92px !important; }
}

/* ---------- Dodir: veće mete za prste (tablet i telefon) ---------- */
@media (max-width:1100px){
  .nav a,.nav__btn{ padding-block:.55rem; }          /* meni: visina mete ≥ 40px */
  .header__cta.btn--sm{ min-height:42px; display:inline-flex; align-items:center; }
  .tag{ padding:.35rem .8rem; }
}
@media (max-width:1100px){
  button.tag,[data-filter]{ min-height:40px; padding-inline:1rem; }   /* filteri na blogu */
}

/* ---------- Tablet: fotografije koje su se složile u jednu kolonu ne smeju da budu preko cele širine ---------- */
@media (max-width:900px){
  .split > * > .frame--arch,.split > * > .frame--sq{ max-width:440px; margin-inline:auto; }
}
/* ---------- Tablet: leptiri u podnožju idu u prazan desni deo, van teksta ---------- */
@media (min-width:701px) and (max-width:1100px){
  .footer__bf:nth-child(1),.footer__bf:nth-child(2){ display:none; }
  .footer__bf:nth-child(3){ left:auto !important; right:7% !important; top:38% !important; bottom:auto !important; width:84px !important; }
  .footer__bf:nth-child(4){ left:auto !important; right:3% !important; top:auto !important; bottom:32% !important; width:100px !important; }
  .footer__bf:nth-child(5){ right:4% !important; top:5% !important; }
}

/* Galerije od tri fotografije (kartice): na tabletu ostaju u tri kolone, da ne ostane jedna slika sama u redu */
@media (min-width:621px) and (max-width:900px){
  .g-3:has(> .frame){ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Forme (Netlify): stanje greške i taster u toku slanja */
.form__msg.is-error{ background:#F7E1DA; border-color:#E2B1A2; color:var(--accent-ink); }
.form__msg a{ color:inherit; text-decoration:underline; }
form button[type="submit"][disabled]{ opacity:.65; cursor:progress; }