/* ── CHILLAX (variable, wght 200–700) - inline, bez eksternog poziva ──
   Latinica + Latin Extended (č ć š ž đ) potvrđeno. Ćirilice NEMA:
   za RU verziju naslovi idu na zamjensko pismo. ─────────────────── */
@font-face{
  font-family:"Chillax";
  src:url(../fonts/chillax-variable.woff2) format("woff2-variations");
  font-weight:200 700; font-style:normal; font-display:swap;
}


/* ═══════════════════════════════════════════════════════════
   BOKA ACADEMY - naslovna · dizajn sistem „Zaliv"
   Studio Piksel · pravac 01
   ZAMJENA PISMA: kad stigne Chillax, dodaj @font-face ovdje
   i promijeni samo --display. Ništa drugo se ne dira.
   ═══════════════════════════════════════════════════════════ */

:root{
  --pijesak:#F7F3EA; --krecnjak:#FFFCF6; --pijesak-2:#EFE9DA;
  --noc:#17322E; --kamen:#4A6862;
  --duboko:#0E6A5A; --zaliv:#7CBFB2; --zaliv-soft:#E1EFEB;
  --sunce:#E9B44C; --sunce-soft:#FBF0D8; --zlato:#8A5D0B;
  --oleander:#DD9B7C; --oleander-soft:#F8E7DE; --oleander-ink:#8C4A28;
  --linija:#E6E0D3; --rub:#D6CEBB;
  --nav-bg:rgba(255,252,246,.965);
  /* tamni pojas - fiksan u obje teme, inače se „noć" prevrne u krem */
  --brand-plate:#17322E;
  --meal-bg:#FBF6E9;
  --deep-bg:#17322E; --deep-fg:#F4F1E8; --deep-card:#1E403A;
  --deep-line:#2B564C; --deep-muted:#9DC0B8;
  --hero-ink:#17322E; --hero-muted:#42605A;
  --hero-filter:none;

  --display:"Chillax", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-md:16px; --r-lg:26px; --r-xl:38px;
  --shadow-1:0 1px 2px rgba(23,50,46,.05), 0 10px 24px -14px rgba(23,50,46,.20);
  --shadow-2:0 2px 4px rgba(23,50,46,.06), 0 22px 44px -18px rgba(23,50,46,.30);
  --maxw:1120px;
  color-scheme:light;
  --ease:cubic-bezier(.22,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--pijesak); color:var(--noc);
  font-family:var(--body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%}
:focus-visible{outline:3px solid var(--duboko); outline-offset:3px; border-radius:6px}

body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:200;
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; background-size:180px 180px;
  opacity:.05; mix-blend-mode:multiply}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.018em}
h1{font-size:clamp(2.25rem,5.6vw,3.9rem); font-weight:700; line-height:1.04}
h2{font-size:clamp(1.65rem,3.6vw,2.5rem); font-weight:700; line-height:1.12}
h3{font-size:1.14rem; font-weight:700; line-height:1.28}
p{margin:0}
a{color:var(--duboko)}

.eyebrow{font-size:.71rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--kamen)}
.lede{font-size:1.05rem; color:var(--kamen); max-width:60ch; line-height:1.68}
.small{font-size:.86rem; color:var(--kamen); line-height:1.55}

/* ── pojasevi ─────────────────────────────────────────── */
.band{position:relative; background:var(--bg); color:var(--fg)}
.band > .wrap{padding-top:78px; padding-bottom:78px}
.b-sand{--bg:var(--pijesak); --fg:var(--noc)}
.b-foam{--bg:var(--zaliv-soft); --fg:var(--noc)}
.b-sun{--bg:var(--sunce-soft); --fg:var(--noc)}
.b-clay{--bg:var(--oleander-soft); --fg:var(--noc)}
.b-night{--bg:var(--deep-bg); --fg:var(--deep-fg)}
.b-night .eyebrow, .b-night .lede, .b-night .small{color:var(--deep-muted)}
.b-night h2, .b-night h3{color:var(--deep-fg)}

/* ── ŽIVI TALAS: dvoslojni, dvije brzine ──────────────── */
/* Pozadina je --from do pred dno, pa --to. Kutija se često završava na
   necijelom pikselu, pa bi inače tamni --from antialiasingom procurio kao tanka
   linija preko sekcije ispod; ovako se posljednji red stapa sa --to, a talasi
   ionako prekrivaju dno. Negativna margina ne pomaže jer je .wavesep pozicioniran
   pa se crta iznad sekcije koja slijedi ako ona nije i sama pozicionirana. */
.wavesep{display:block; width:100%; height:clamp(62px,7.5vw,116px);
  line-height:0; position:relative; overflow:hidden; margin-top:-1px;
  background:linear-gradient(to bottom,
    var(--from) 0 calc(100% - 3px), var(--to) calc(100% - 3px) 100%)}
.wavesep svg{display:block; width:200%; height:100%}
/* tri sloja iste ciljne boje - donji pojas izranja iz gornjeg umjesto da ga siječe */
.wavesep .w-far path{fill:var(--to); opacity:.26}
.wavesep .w-back path{fill:var(--to); opacity:.55}
.wavesep .w-front path{fill:var(--to)}
.wavesep .w-far{animation:drift 44s linear infinite}
.wavesep .w-back{animation:drift 27s linear infinite reverse}
.wavesep .w-front{animation:drift 18s linear infinite}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(-1440px)}}

/* ── ZAGLAVLJE ────────────────────────────────────────── */
.topbar{position:fixed; top:0; left:0; right:0; z-index:120; padding:14px 0; transition:padding .3s var(--ease)}
.topbar.scrolled{padding:8px 0}
.nav{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  background:var(--nav-bg); backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(23,50,46,.10); border-radius:99px;
  padding:8px 10px 8px 8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             0 1px 2px rgba(6,26,22,.10),
             0 14px 30px -14px rgba(6,26,22,.45),
             0 30px 60px -30px rgba(6,26,22,.35);
  transition:box-shadow .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.topbar.scrolled .nav{background:var(--krecnjak);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),
             0 1px 2px rgba(6,26,22,.12),
             0 10px 22px -12px rgba(6,26,22,.5),
             0 22px 44px -26px rgba(6,26,22,.4)}
/* logo sjedi na tamnoj ploči - na krem pilули je tirkiz loga blijed.
   Ploča prati oblik pilule lijevo, a desno se sječe ravno, 40 px iza logotipa. */
.brand{display:flex; align-items:center; text-decoration:none; color:inherit; flex:none;
  margin:0 14px 0 0; padding:8px 20px;
  background:var(--brand-plate); border-radius:99px;
  box-shadow:0 1px 2px rgba(6,26,22,.25), 0 6px 14px -8px rgba(6,26,22,.55);
  transition:padding .3s var(--ease), box-shadow .3s var(--ease)}
.topbar.scrolled .brand{padding-top:7px; padding-bottom:7px}
.brand-logo{height:43px; width:auto; display:block; flex:none;
  transition:height .3s var(--ease)}
.topbar.scrolled .brand-logo{height:38px}
.brand-foot{background:transparent; box-shadow:none; padding:0; margin:0}
.brand-foot .brand-logo{height:58px}

.navsun{position:absolute; left:0; bottom:-9px; width:17px; height:17px; border-radius:50%;
  background:var(--sunce); box-shadow:0 0 0 5px rgba(233,180,76,.20), 0 3px 10px rgba(154,107,13,.3);
  opacity:0; transform:translateX(0) scale(.3); pointer-events:none;
  transition:transform .6s cubic-bezier(.34,1.55,.5,1), opacity .3s ease}
.navsun.on{opacity:1}
.navlinks{display:flex; gap:2px; list-style:none; margin:0; padding:0}
.navlinks a{
  position:relative; display:block; padding:8px 10px; font-size:.88rem; font-weight:600; white-space:nowrap;
  color:var(--noc); text-decoration:none; border-radius:99px;
}
.navlinks a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:5px;
  background-repeat:repeat-x; background-size:18px 5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='5' viewBox='0 0 18 5'%3E%3Cpath d='M0 3 C2.4 0.4 4 0.4 6.4 3 S11 5.6 13.4 3 S18 0.4 18 3' fill='none' stroke='%230E6A5A' stroke-width='1.5'/%3E%3C/svg%3E");
  opacity:0; transform:translateY(3px); transition:opacity .25s, transform .25s var(--ease);
}
.navlinks a:hover::after, .navlinks a:focus-visible::after{opacity:1; transform:translateY(0); animation:tide 1.1s linear infinite}
@keyframes tide{from{background-position-x:0} to{background-position-x:18px}}

.navright{display:flex; align-items:center; gap:9px; flex:none}
.lang{display:flex; gap:2px; align-items:center; background:var(--brand-plate); border-radius:99px; padding:3px; font-size:.74rem; font-weight:800}
.lang a, .lang .lang-soon{
  border:0; cursor:pointer; font:inherit; padding:6px 11px; border-radius:99px;
  background:transparent; color:var(--deep-muted); transition:background .25s, color .25s, transform .18s var(--ease);
}
.lang a:hover{transform:translateY(-1px); color:var(--krecnjak)}
.lang a.on{background:var(--krecnjak); color:var(--brand-plate)}
.lang .lang-soon{opacity:.5; cursor:not-allowed}
.burger{display:none; place-items:center; width:40px; height:40px; border-radius:99px;
  border:1px solid var(--linija); background:var(--pijesak-2); color:var(--noc); cursor:pointer; flex:none;
  transition:background .25s, transform .2s var(--ease)}
.burger:active{transform:scale(.94)}
.burger .bl{transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"]{background:var(--noc); color:var(--pijesak)}
.burger[aria-expanded="true"] .b1{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .b2{opacity:0}
.burger[aria-expanded="true"] .b3{transform:translateY(-5px) rotate(-45deg)}

.mobmenu{display:none; margin-top:8px; background:var(--nav-bg); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border:1px solid var(--linija); border-radius:26px;
  padding:10px; box-shadow:var(--shadow-2)}
.mobmenu.open{display:block; animation:rise .3s var(--ease)}
.mobmenu ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.mobmenu a{display:block; padding:13px 16px; border-radius:16px; text-decoration:none;
  color:var(--noc); font-weight:700; font-size:1rem; transition:background .2s}
.mobmenu a:hover, .mobmenu a:active{background:var(--zaliv-soft)}
.mobmenu .btn{width:100%; justify-content:center; margin-top:8px}

/* sidra ne smiju da završe pod ljepljivim zaglavljem */
section[id], header[id]{scroll-margin-top:88px}

/* ── DUGMAD + tap „krug na vodi" ──────────────────────── */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:.96rem;
  padding:15px 26px; border-radius:99px; text-decoration:none; text-align:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--brand-plate); color:var(--pijesak); box-shadow:0 4px 0 var(--sunce)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--sunce)}
.btn-primary:active{box-shadow:0 2px 0 var(--sunce)}
.btn-sun{background:var(--sunce); color:#17322E; box-shadow:0 4px 0 var(--zlato)}
.btn-sun:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--zlato)}
.btn-sun:active{box-shadow:0 2px 0 var(--zlato)}
.btn-sm{padding:11px 17px; font-size:.85rem; white-space:nowrap}
.btn-ghost{
  background:transparent; color:var(--duboko); padding:15px 8px;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;
}
.btn-ghost:hover{text-underline-offset:9px}
.b-night .btn-ghost{color:var(--zaliv)}
.b-night .card-price{color:var(--sunce)}
.b-night .portrait-init{color:var(--zaliv)}
.ripple{
  position:absolute; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 42%, transparent 68%);
  transform:translate(-50%,-50%) scale(0); animation:ring .62s var(--ease) forwards;
}
.btn-sun .ripple{background:radial-gradient(circle, rgba(23,50,46,.3) 0%, rgba(23,50,46,.1) 42%, transparent 68%)}
@keyframes ring{to{transform:translate(-50%,-50%) scale(1); opacity:0}}

.badge{display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:99px; font-size:.8rem; font-weight:700; background:var(--zaliv-soft); color:var(--duboko)}
.badge-sun{background:var(--sunce-soft); color:var(--zlato)}
.badge-clay{background:var(--oleander-soft); color:var(--oleander-ink)}
.b-night .badge{background:var(--deep-card); color:var(--zaliv)}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.8)}}

/* ── HERO ─────────────────────────────────────────────── */
/* Hero je svijetlo ostrvo: fotografija je svijetla, pa se cijeli blok
   renderuje u svijetlim tokenima i u tamnoj temi - bez tamnog overlaya.
   Sve unutra (dugmad, traka dokaza, oznake) nasljeđuje ove vrijednosti. */
.hero{position:relative; isolation:isolate; overflow:hidden; margin:0 0 -1px; padding:0;
  --pijesak:#F7F3EA; --krecnjak:#FFFCF6; --pijesak-2:#EFE9DA;
  --noc:#17322E; --kamen:#4A6862; --duboko:#0E6A5A;
  --zaliv:#7CBFB2;
  --sunce:#E9B44C; --sunce-soft:#FBF0D8; --zlato:#8A5D0B;
  --oleander:#DD9B7C; --oleander-soft:#F8E7DE; --oleander-ink:#8C4A28;
  --linija:#E6E0D3; --rub:#D6CEBB;
  --shadow-1:0 1px 2px rgba(23,50,46,.05), 0 10px 24px -14px rgba(23,50,46,.20);
  --hero-ink:#FFFCF6; --hero-muted:#DDEAE6;
  background:var(--deep-bg); min-height:100svh; display:flex; flex-direction:column}
.hero > .wrap{width:100%; flex:0 0 auto}
.hero > .hero-inner{flex:1 1 auto}
.hero .hero-h1 em{color:#8FD3C3}
.hero .btn-primary{background:var(--sunce); color:#17322E; box-shadow:0 4px 0 rgba(23,50,46,.42)}
.hero .btn-primary:hover{box-shadow:0 6px 0 rgba(23,50,46,.42)}
.hero .btn-ghost{color:#FFFCF6}
.hero .proof{background:rgba(255,252,246,.94)}
.hero .proofbar{border-color:rgba(255,252,246,.5); background:rgba(255,252,246,.5)}
.hero-bg{position:absolute; inset:0; z-index:-2; background:var(--deep-bg)}
.hero-vid{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;
  filter:brightness(.62) saturate(1.06) contrast(1.04)}

.hero-inner{max-width:880px; margin-inline:auto; text-align:center;
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(88px,11vh,150px); padding-bottom:clamp(12px,2vh,30px)}
.hero-h1{margin:0 auto; max-width:24ch; color:var(--hero-ink);
  font-size:clamp(1.7rem,min(3.6vw,4.4vh),2.85rem); line-height:1.1;
  text-shadow:0 1px 2px rgba(4,16,13,.55), 0 3px 18px rgba(4,16,13,.65), 0 0 44px rgba(4,16,13,.5)}
.hero-h1 em{font-style:normal; color:var(--duboko)}
.hero-sub{margin:clamp(12px,2.1vh,22px) auto 0; font-size:1.06rem; line-height:1.66; max-width:48ch; color:var(--hero-muted); text-shadow:0 1px 2px rgba(4,16,13,.6), 0 2px 14px rgba(4,16,13,.7)}
.hero-cta{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:clamp(14px,2.4vh,26px)}
.hero-note{margin:clamp(14px,2.4vh,26px) auto 0; font-size:.85rem; color:var(--hero-muted); max-width:44ch;
  text-shadow:0 1px 2px rgba(4,16,13,.6), 0 2px 14px rgba(4,16,13,.7)}
.hero-proof{padding-bottom:clamp(58px,9.5vh,150px); position:relative; z-index:2}

/* ULAZ: blokovi heroa dolaze odozdo, jedan za drugim.
   IZLAZ: isti pokret unazad, vezan za skrol - ide i naprijed i nazad. */
.js .hero-anim{will-change:transform, opacity, filter}
.js .hero-anim.blk{opacity:0; transform:translateY(30px) scale(.985); filter:blur(5px)}
.js .hero-anim.blk.in{opacity:1; transform:none; filter:none;
  transition:opacity .85s var(--ease) var(--ad,0ms),
             transform .95s cubic-bezier(.22,.85,.25,1) var(--ad,0ms),
             filter .8s var(--ease) var(--ad,0ms)}
.js .hero-anim.free{transition:none}
@media (prefers-reduced-motion: reduce){
  .js .hero-anim, .js .hero-anim.blk{opacity:1 !important; transform:none !important; filter:none !important}
}
.herosep{position:absolute; left:0; right:0; bottom:0; z-index:1; line-height:0;
  height:clamp(62px,9vh,150px); pointer-events:none; --to:var(--zaliv-soft)}
.herosep svg{display:block; width:200%; height:100%}
.herosep .w-far path{fill:var(--to); opacity:.26}
.herosep .w-back path{fill:var(--to); opacity:.55}
.herosep .w-front path{fill:var(--to)}
/* tanka linija po grebenu talasa - da se prelaz vidi kao potez, ne kao šav */
.herosep .w-line{fill:none !important; stroke:var(--zaliv); stroke-width:3; opacity:.7;
  vector-effect:non-scaling-stroke}
.herosep .w-hills path{fill:#0E6A5A; opacity:.34}
.herosep .w-far{animation:drift 44s linear infinite}
.herosep .w-back{animation:drift 27s linear infinite reverse}
.herosep .w-front{animation:drift 18s linear infinite}
.herosep .w-hills{animation:drift 78s linear infinite}
.herosep .w-sail{animation:sailAcross 46s linear infinite}
.herosep .w-bob{animation:sailBob 5.5s ease-in-out infinite; transform-origin:0 80px}
@keyframes sailAcross{from{transform:translateX(-120px)} to{transform:translateX(1560px)}}
@keyframes sailBob{0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-7px) rotate(4deg)}}

@media (max-width:900px){
  .hero-h1 br{display:none}
  .hero-h1 em::before{content:" "}
  .hero-inner{padding-top:120px}
  .hero-proof{padding-bottom:clamp(74px,20vw,120px)}
}
.proofbar{margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:1px;
  background:var(--rub); border:1px solid var(--rub); border-radius:var(--r-lg);
  overflow:hidden; margin-top:clamp(16px,3vh,44px); box-shadow:var(--shadow-1);
}
.proof{background:var(--krecnjak); padding:clamp(13px,2vh,22px) 18px; transition:background .3s}
.proof:hover{background:var(--zaliv-soft)}
.proof-n{font-family:var(--display); font-weight:700; font-size:clamp(1.45rem,2.6vh,2rem); line-height:1; color:var(--duboko); font-variant-numeric:tabular-nums}
.proof-l{font-size:.82rem; color:var(--kamen); margin-top:clamp(4px,.8vh,9px); line-height:1.4}

/* ── kartice / mreže ──────────────────────────────────── */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}

.card{
  background:var(--krecnjak); border:1px solid var(--linija); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  display:flex; flex-direction:column; gap:11px;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--rub)}
.b-night .card{background:var(--deep-card); border-color:var(--deep-line)}
.card-lead{border-color:var(--duboko); border-width:2px}
.card-price{margin-top:auto; padding-top:14px; font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--zlato); font-variant-numeric:tabular-nums}
.card-price small{font-family:var(--body); font-weight:600; font-size:.8rem; color:var(--kamen)}
.card-ico{width:44px; height:44px}

/* ── TIM: portret u arkadi, plima na hover ────────────── */
.person{display:flex; flex-direction:column; gap:2px; position:relative}
/* dječji elementi - iskaču po ivicama portreta, nikad preko lica */
.doodles{position:absolute; left:0; right:0; top:0; aspect-ratio:3/4; pointer-events:none; z-index:4}
.dd{position:absolute; color:var(--c); opacity:0; line-height:0;
  transform:scale(.3) rotate(var(--r0,-24deg));
  transition:opacity .28s ease, transform .42s cubic-bezier(.2,1.55,.4,1)}
.dd svg{display:block; width:100%; height:auto;
  filter:drop-shadow(0 3px 9px rgba(6,20,17,.45))}
.person:hover .dd, .person:focus-within .dd{
  opacity:1; transform:scale(1) rotate(var(--r1,0deg)); transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion: reduce){ .dd{transition:opacity .2s ease} }
.portrait{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  border-radius:150px 150px 20px 20px; border:1px solid var(--rub);
  background:linear-gradient(180deg, var(--zaliv-soft), var(--pijesak-2));
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), border-color .4s;
}
.b-night .portrait{background:linear-gradient(180deg,var(--deep-card),var(--deep-bg)); border-color:var(--deep-line)}
.person:hover .portrait{transform:translateY(-6px); border-color:var(--zaliv)}
.portrait::after{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-64%; height:100%;
  background:var(--zaliv); opacity:.24; border-radius:44% 46% 0 0;
  transform:translateY(0); transition:transform .55s var(--ease);
}
.person:hover .portrait::after{transform:translateY(-26%)}
.portrait .p-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 18%; z-index:0; transform:scale(1);
  /* fotografije su snimane u različitim uslovima - duotone ih izjednači,
     a na hover se vrate u boju */
  filter:grayscale(1) contrast(1.08) brightness(.94);
  transition:transform 1.4s cubic-bezier(.18,.7,.2,1), filter .7s cubic-bezier(.25,.7,.25,1)}
.portrait.has-photo::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--duboko); mix-blend-mode:color; opacity:.62;
  transition:opacity .7s cubic-bezier(.25,.7,.25,1)}
.person:hover .p-img, .person:focus-within .p-img{
  transform:scale(1.05); filter:grayscale(0) contrast(1) brightness(1)}
.person:hover .portrait.has-photo::before, .person:focus-within .portrait.has-photo::before{opacity:0}
.portrait.has-photo{background:var(--deep-card); isolation:isolate}
.portrait.has-photo::after{opacity:.16; z-index:2}
.portrait-init{position:relative; z-index:1; font-family:var(--display); font-weight:700; font-size:2.9rem; color:var(--duboko); letter-spacing:-.04em}
.portrait-slot{
  position:absolute; z-index:2; top:14px; left:50%; transform:translateX(-50%);
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--kamen); background:var(--krecnjak); padding:4px 10px; border-radius:99px;
  border:1px dashed var(--rub); white-space:nowrap;
}
.b-night .portrait-slot{background:var(--deep-card); color:var(--deep-muted); border-color:var(--deep-line)}
.p-name{font-family:var(--display); font-weight:700; font-size:1.06rem; margin-top:15px}
.p-role{font-size:.85rem; color:var(--kamen); line-height:1.45}
.p-proof{font-size:.88rem; margin-top:9px; line-height:1.55}
.b-night .p-proof{color:var(--deep-fg)}
.p-proof b{color:var(--sunce)}

/* ── PROGRAMI: ulaz slova, linija i maskiranih kartica ── */
.js .split-l{display:inline-block; opacity:0;
  transform:translateY(38px) rotate(var(--r,0deg)); will-change:transform, opacity}
.js .anim-in .split-l{opacity:1; transform:none;
  transition:opacity .46s var(--ld,0ms), transform .74s cubic-bezier(.2,1.22,.32,1) var(--ld,0ms)}
.split-w{display:inline-block; white-space:nowrap}

.js .line-mask{display:block; overflow:hidden; padding-bottom:.06em}
.js .line-mask > span{display:block; transform:translateY(110%); opacity:0; will-change:transform}
.js .anim-in .line-mask > span{transform:none; opacity:1;
  transition:transform .8s cubic-bezier(.22,.9,.24,1) var(--ld,0ms), opacity .5s var(--ld,0ms)}

/* kartice ulaze maskiranjem - bez skaliranja */
.js #programi .prog{clip-path:inset(var(--ci) round 26px); will-change:clip-path}
.js #programi.anim-in .prog{clip-path:inset(0 0 0 0 round 26px);
  transition:clip-path 1.15s cubic-bezier(.2,.82,.24,1) var(--cd,0ms)}
.js #programi .prog:nth-of-type(1){--ci:0 100% 0 0; --cd:560ms}
.js #programi .prog:nth-of-type(2){--ci:0 0 0 100%; --cd:840ms}
.js #programi .prog:nth-of-type(3){--ci:100% 0 0 0; --cd:1120ms}
@media (prefers-reduced-motion: reduce){
  .js #programi .split-l, .js .line-mask > span{opacity:1 !important; transform:none !important}
  .js #programi.anim-in-cards .prog{clip-path:none !important}
}

/* ── PROGRAMI: kartice sa fotografijom ── */
#programi .card{position:relative; overflow:hidden; border:0; border-radius:26px;
  color:#F6F2E8; min-height:420px; padding:28px; background:#0B1F1B;
  box-shadow:0 24px 50px -26px rgba(6,20,17,.55)}

/* prsten živi u svom sloju - pojavi se na hover i nestane, bez pomjeranja kartice.
   Zlato je puno na dnu, gdje stoji cijena, i gasi se ka vrhu. */
#programi .card > .ring{position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:26px; padding:3px;
  background:linear-gradient(180deg,
    rgba(233,180,76,.10) 0%, rgba(233,180,76,.34) 44%,
    rgba(233,180,76,.70) 74%, #F0C36A 100%);
  /* maskom ostaje samo pojas širine paddinga - sredina se izuzima */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0; transform:scale(.985);
  transition:opacity .5s cubic-bezier(.25,.7,.25,1), transform .6s cubic-bezier(.25,.9,.25,1)}
#programi .card:hover > .ring, #programi .card:focus-within > .ring{opacity:1; transform:none}
#programi .card::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--img); background-size:cover; background-position:52% 42%;
  filter:brightness(.79) saturate(1.18) contrast(.95);
  transform:scale(1); transform-origin:50% 45%;
  transition:transform 1.6s cubic-bezier(.16,.7,.2,1)}
#programi .card[data-img="1"]::before{--img:url(../img/card01.webp)}
#programi .card[data-img="2"]::before{--img:url(../img/card02.webp)}
#programi .card[data-img="3"]::before{--img:url(../img/card03.webp)}
/* Veo je znatno lakši nego prije — fotografija se vidi. Čitljivost drže
   blagi gradijent pri dnu, gdje stoji cijena, i sjenka na samom tekstu. */
#programi .card::after{content:""; position:absolute; inset:0; z-index:1; opacity:1;
  transition:opacity .65s cubic-bezier(.25,.7,.25,1);
  background:linear-gradient(180deg, rgba(9,24,20,.44) 0%, rgba(9,24,20,.50) 30%,
             rgba(9,24,20,.36) 62%, rgba(9,24,20,.58) 100%)}
#programi .card > *{position:relative; z-index:2}
#programi .card{--halo:rgba(233,180,76,0);
  transition:box-shadow .6s cubic-bezier(.25,.7,.25,1)}
/* na hover zlato procvjeta oko cijelog prstena, kartica se ne pomjera */

#programi .card:hover, #programi .card:focus-within{
  transform:none;   /* globalno .card:hover diže karticu - ovdje ne */
  box-shadow:0 24px 50px -26px rgba(6,20,17,.55), 0 0 0 8px rgba(233,180,76,.26),
             0 0 34px -4px rgba(233,180,76,.34)}
#programi .card:hover::before, #programi .card:focus-within::before{transform:scale(1.045)}
#programi .card:hover::after, #programi .card:focus-within::after{opacity:.88}
#programi .card:active{box-shadow:0 24px 50px -26px rgba(6,20,17,.55), 0 0 0 5px rgba(233,180,76,.34), 0 0 22px -4px rgba(233,180,76,.4)}
#programi .card.card-lead{outline:0}

#programi .card > *{text-shadow:0 1px 2px rgba(5,16,13,.55), 0 2px 12px rgba(5,16,13,.45)}
#programi .card h3{color:#FFFDF7}
#programi .card .small{color:#D9E6E1}
#programi .card .small b{color:#FFFDF7 !important}
#programi .card-price{color:var(--sunce)}
#programi .card-price small{color:#C3D6D0}
#programi .card .badge-clay{background:#E5A98B; color:#3A1B0C; font-weight:800; box-shadow:0 4px 14px rgba(6,20,17,.45)}
#programi .card-ico{filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}

/* ── DAN: analogni sat + vremenska osa ── */
.day-wrap{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(26px,5vw,62px); align-items:start; margin-top:34px}
.clockcol{position:sticky; top:100px; display:grid; gap:14px; justify-items:center}
.clock{width:100%; max-width:300px; height:auto; display:block; overflow:visible}
.c-face{fill:var(--deep-card)}
.c-rim{fill:none; stroke:var(--deep-line); stroke-width:2}
.c-tick{stroke:var(--deep-muted); stroke-width:2; stroke-linecap:round; opacity:.5}
.c-tick.q{stroke:var(--zaliv); opacity:.9; stroke-width:3}
.c-arc{fill:none; stroke:var(--deep-line); stroke-width:7; stroke-linecap:round}
.c-prog{fill:none; stroke:var(--sunce); stroke-width:7; stroke-linecap:round;
  transition:stroke-dashoffset .55s var(--ease)}
.c-mark{fill:var(--deep-card); stroke:var(--zaliv); stroke-width:2.5; cursor:pointer;
  transition:r .25s var(--ease), fill .25s, stroke .25s}
.c-mark:hover{fill:var(--zaliv)}
.c-mark.on{fill:var(--sunce); stroke:var(--sunce)}
.c-hand{stroke-linecap:round; transform-origin:110px 110px;
  transition:transform .6s cubic-bezier(.34,1.28,.5,1)}
.c-hour{stroke:var(--deep-fg); stroke-width:6.5}
.c-min{stroke:var(--deep-fg); stroke-width:4}
.c-pin{fill:var(--sunce)}
.c-pin-in{fill:var(--deep-card)}

.now{margin:0; padding:2px 4px; text-align:center; background:none; border:0;
  font-size:.92rem; font-weight:600; color:var(--kamen); max-width:100%}
.now b{color:var(--zlato); font-weight:800}
.now-btn{border:0; background:transparent; cursor:pointer; font:inherit; font-size:.8rem;
  font-weight:700; color:var(--zaliv); text-decoration:underline; text-underline-offset:4px; padding:2px 6px}
.now-btn[hidden]{display:none}

.day{list-style:none; margin:0; padding:0; position:relative}
.day::before{content:""; position:absolute; left:90px; top:22px; bottom:22px; width:2px; background:var(--rub)}
.day li{position:relative; scroll-margin-top:120px}
.day-row{width:100%; border:0; background:transparent; cursor:pointer; font:inherit; color:inherit;
  display:block; padding:7px 14px 12px 0; text-align:left}
/* naslov trenutka je nalijepljena pilula - vrijeme, tačka i tekst u istoj liniji.
   Rotira se oko same tačke, pa tačka ostaje na osi ma koliko pilula bila nagnuta. */
.head{display:grid; grid-template-columns:52px 14px 1fr; gap:0 20px; align-items:center;
  padding:11px 26px 11px 12px; border-radius:99px;
  background:var(--pill-bg, var(--krecnjak)); border:1.5px solid var(--pill-line, var(--linija));
  box-shadow:0 6px 16px -12px rgba(23,50,46,.4);
  transform:rotate(var(--tilt,0deg)); transform-origin:91px 50%;
  transition:transform .45s var(--ease), background .35s, border-color .35s, box-shadow .35s}
.day li:nth-child(1) .head{--tilt:-0.9deg}
.day li:nth-child(2) .head{--tilt: 0.7deg}
.day li:nth-child(3) .head{--tilt:-0.6deg}
.day li:nth-child(4) .head{--tilt: 0.8deg}
.day li:nth-child(5) .head{--tilt:-0.7deg}
.day li:nth-child(6) .head{--tilt: 0.9deg}
.day li:nth-child(7) .head{--tilt:-0.8deg}
.day li:nth-child(8) .head{--tilt: 0.6deg}
.day li:nth-child(9) .head{--tilt:-0.9deg}
.day-row:hover .head, .day-row:focus-visible .head{
  --pill-bg:var(--zaliv-soft); --pill-line:rgba(14,106,90,.3); transform:rotate(0deg);
  box-shadow:0 10px 22px -14px rgba(23,50,46,.5)}
.day-row time{font-family:var(--display); font-weight:700; font-size:.94rem; color:var(--duboko);
  font-variant-numeric:tabular-nums; text-align:right; transition:color .25s}
.dot{width:14px; height:14px; border-radius:50%; background:var(--krecnjak);
  border:2.5px solid var(--zaliv); box-sizing:border-box; justify-self:center;
  transition:transform .3s var(--ease), background .3s, border-color .3s}
.day-row .t{display:block; font-family:var(--display); font-weight:700; font-size:1.04rem;
  color:var(--noc); line-height:1.25; transition:font-size .45s var(--ease), color .3s}
.day-row .d{display:block; font-size:.86rem; color:var(--kamen); margin:9px 0 0 118px; transition:opacity .3s}

.day li.open .head{--pill-bg:var(--sunce-soft); --pill-line:rgba(233,180,76,.55); transform:rotate(0deg);
  box-shadow:0 12px 26px -14px rgba(154,107,13,.45)}
.day li.open .day-row .t{font-size:clamp(1.5rem,3.2vw,2.15rem); letter-spacing:-.02em}
.day li.open .day-row .d{opacity:0; height:0; margin-top:0; overflow:hidden}
.day li.open .day-row time{color:var(--zlato)}
.day li.open .dot{background:var(--sunce); border-color:var(--zlato); transform:scale(1.35)}

.detail{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.day li.open .detail{grid-template-rows:1fr}
.detail-in{overflow:hidden}
.detail-sub{padding:8px 14px 0 118px; font-size:1rem; line-height:1.62; color:var(--kamen); max-width:56ch;
  opacity:0; transform:translateY(8px); transition:opacity .45s .12s var(--ease), transform .45s .12s var(--ease)}
.day li.open .detail-sub{opacity:1; transform:none}
.sc{display:block; width:calc(100% - 118px); max-width:400px; height:auto; margin:16px 0 22px 118px;
  opacity:0; transform:translateY(14px) scale(.96);
  transition:opacity .5s .18s var(--ease), transform .55s .18s var(--ease)}
.day li.open .sc{opacity:1; transform:none}

/* animacije scena - kreću tek kad je trenutak otvoren */
.day li.open .sc-van{animation:vanIn .9s var(--ease) both}
.day li.open .road-dash{animation:roadRun 1.1s linear infinite}
@keyframes vanIn{from{transform:translateX(-60px)} to{transform:none}}
@keyframes roadRun{from{transform:translateX(0)} to{transform:translateX(-80px)}}
.day li.open .st1{animation:steam 2.6s ease-in-out infinite}
.day li.open .st2{animation:steam 2.6s .35s ease-in-out infinite}
.day li.open .st3{animation:steam 2.6s .7s ease-in-out infinite}
@keyframes steam{0%,100%{opacity:.25; transform:translateY(4px)} 50%{opacity:.85; transform:translateY(-6px)}}
.day li.open .sc-spoon{animation:stir 3s ease-in-out infinite; transform-origin:252px 140px}
@keyframes stir{0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)}}
.day li.open .b1{animation:pop .5s .05s var(--ease) both}
.day li.open .b2{animation:pop .5s .22s var(--ease) both}
.day li.open .b3{animation:pop .5s .39s var(--ease) both}
@keyframes pop{from{opacity:0; transform:translateY(16px) scale(.8)} to{opacity:1; transform:none}}
.day li.open .k1{animation:drop .5s .05s var(--ease) both}
.day li.open .k2{animation:drop .5s .18s var(--ease) both}
.day li.open .k3{animation:drop .5s .31s var(--ease) both}
.day li.open .k4{animation:drop .55s .48s var(--ease) both}
@keyframes drop{from{opacity:0; transform:translateY(-34px)} to{opacity:1; transform:none}}
.day li.open .sc-sun{animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.day li.open .sc-ball{animation:bounce 1.5s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(-42px)}}
.day li.open .z1{animation:zup 2.6s ease-in-out infinite}
.day li.open .z2{animation:zup 2.6s .4s ease-in-out infinite}
.day li.open .z3{animation:zup 2.6s .8s ease-in-out infinite}
@keyframes zup{0%{opacity:0; transform:translateY(10px)} 30%{opacity:1} 100%{opacity:0; transform:translateY(-18px)}}
.day li.open .sc-apple{animation:appleIn .6s var(--ease) both}
@keyframes appleIn{from{opacity:0; transform:scale(.7) rotate(-10deg)} to{opacity:1; transform:none}}
.day li.open .leaf{animation:leafWiggle 3s ease-in-out infinite}
@keyframes leafWiggle{0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(10deg)}}
.day li.open .sc-book .pg{animation:pageTurn 1s .15s var(--ease) both}
@keyframes pageTurn{from{transform:rotateY(-72deg)} to{transform:none}}
.day li.open .e1{animation:earPing 2.4s ease-in-out infinite}
.day li.open .e2{animation:earPing 2.4s .45s ease-in-out infinite}
@keyframes earPing{0%,100%{opacity:.25; transform:translateX(-4px)} 50%{opacity:1; transform:none}}
.day li.open .sc-pal{animation:appleIn .6s var(--ease) both}
.day li.open .sc-brush{animation:paint 2.6s ease-in-out infinite}
@keyframes paint{0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(10deg)}}
.day li.open .n1{animation:noteFloat 2.8s ease-in-out infinite}
@keyframes noteFloat{0%,100%{opacity:.4; transform:translateY(6px)} 50%{opacity:1; transform:translateY(-10px)}}
.day li.open .sc-door{animation:doorOpen 1.1s .2s var(--ease) both}
@keyframes doorOpen{from{transform:perspective(500px) rotateY(0)} to{transform:perspective(500px) rotateY(-42deg)}}
.day li.open .sc-wave{animation:handWave 1.4s .5s ease-in-out infinite}
@keyframes handWave{0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(14deg)}}
/* trenutak koji sat trenutno pokazuje (hover), bez otvaranja */
.day li.on:not(.open) .dot{border-color:var(--zlato); transform:scale(1.2)}
.day li.on:not(.open) .day-row time{color:var(--zlato)}

@media (max-width:900px){
  .day-wrap{grid-template-columns:1fr; gap:28px}
  .clockcol{position:static; max-width:250px; margin-inline:auto}
}
@media (max-width:520px){
  .day::before{left:78px}
  .head{grid-template-columns:44px 12px 1fr; gap:0 14px; padding:10px 18px 10px 10px;
    transform-origin:79px 50%}
  .day-row .d{margin-left:98px}
  .detail-sub{padding-left:98px}
  .sc{width:calc(100% - 98px); margin-left:98px}
}

.tag-ph{display:inline-flex; align-items:center; gap:9px; font-size:.72rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--oleander-ink);
  background:#FDECE4; border:1.5px solid var(--oleander); padding:10px 20px 10px 16px;
  border-radius:99px; line-height:1}
.tag-ph svg{width:19px; height:19px; flex:none}
/* ista značka, ali mirna: za sadržaj koji ostaje, a nije nedovršen */
.tag-info{color:var(--duboko); background:var(--zaliv-soft); border-color:var(--zaliv)}
.meal-intro .tag-ph, .meal-intro .tag-info{margin-top:24px}

/* ── KUHINJA U KUĆI ──────────────────────────────────── */
.b-meal{--bg:#FBF6E9; --fg:var(--noc); position:relative; overflow:hidden; isolation:isolate}
.b-meal > .wrap{position:relative; z-index:2}
.meal-bg{position:absolute; z-index:0; top:0; right:0; width:min(66%,900px); aspect-ratio:3/2;
  background:url("../img/meal-bg.webp") center/cover no-repeat;
  -webkit-mask-image:radial-gradient(125% 118% at 100% 0%, #000 30%, rgba(0,0,0,.62) 58%, transparent 86%);
          mask-image:radial-gradient(125% 118% at 100% 0%, #000 30%, rgba(0,0,0,.62) 58%, transparent 86%);
  opacity:.92; pointer-events:none}

/* tanjir se dokotrlja zdesna i stane iza posljednje kolone tabele */
.menu-zone{position:relative; margin-top:clamp(26px,4vw,54px)}
.meal-plate{position:absolute; z-index:0; width:clamp(190px,24vw,330px); height:auto;
  right:clamp(-44px,-2.4vw,-4px); top:clamp(-238px,-21vw,-150px);
  filter:drop-shadow(0 26px 40px rgba(90,70,30,.3)); pointer-events:none}
@media (max-width:760px){ .meal-plate{width:150px; top:-104px; right:-16px} }
.js .meal-plate{opacity:0; transform:translateX(46vw) rotate(210deg)}
.js #hrana.anim-in .meal-plate{opacity:1; transform:translateX(0) rotate(0deg);
  transition:transform 1.5s cubic-bezier(.2,.72,.16,1) .15s, opacity .5s ease .15s}
@media (prefers-reduced-motion: reduce){
  .js .meal-plate{opacity:1 !important; transform:none !important}
}

.meal-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:28px; align-items:start}
.meal-intro{max-width:60ch}
.b-meal h2{font-size:clamp(1.75rem,3.6vw,2.6rem)}
.meal-notes{position:relative; min-height:190px; z-index:3}
.hand{position:absolute; font-family:"Caveat", var(--display); font-weight:600;
  color:var(--duboko); line-height:1.15; white-space:nowrap}
.hand-1{font-size:clamp(1.35rem,2.4vw,1.85rem); top:6px; left:-6%; transform:rotate(-7deg)}
.hand-heart{position:absolute; top:96px; left:16%; width:30px; color:var(--duboko); opacity:.8;
  transform:rotate(-8deg)}
@media (max-width:900px){ .meal-top{grid-template-columns:1fr} .meal-notes{display:none} }

/* kartica sa jelovnikom */
.menu-card{position:relative; z-index:1; background:var(--krecnjak);
  border:1px solid var(--linija); border-radius:32px; padding:clamp(18px,2.2vw,28px);
  box-shadow:0 30px 60px -34px rgba(90,70,30,.35)}
.menu-head{display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-bottom:18px}
.menu-title{font-size:clamp(1.15rem,2vw,1.45rem)}
.menu-note{display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:var(--kamen)}
.mn-ico{width:20px; height:20px; color:var(--duboko); flex:none}
.mn-ico svg{width:100%; height:100%}

/* 3.5 kartice u kadru, ostalo strelicama */
.dwrap{position:relative}
.menu-card{overflow:visible}
.dtrack{--cols:3.5; --gap:16px;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 2px 10px; scrollbar-width:none}
.dtrack::-webkit-scrollbar{display:none}
.dtrack:focus-visible{outline:3px solid var(--duboko); outline-offset:4px; border-radius:22px}
.dcard{scroll-snap-align:start; background:var(--pijesak); border:1.5px solid var(--linija);
  border-radius:22px; padding:18px 18px 20px; min-width:0;
  transition:background .35s, border-color .35s, transform .35s var(--ease)}
.dcard:hover{transform:translateY(-3px)}
.dcard.today{background:#EAF4EC; border-color:rgba(14,106,90,.32)}
.dcard header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.dcard h3{font-size:1.06rem}
.dico{width:26px; height:26px; flex:none}
.dico svg{width:100%; height:100%}
.dcard ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.dcard li{display:grid; grid-template-columns:56px 1fr; gap:13px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--linija)}
.dcard li:last-child{border-bottom:0; padding-bottom:0}
.mth{width:56px; height:56px; object-fit:contain; flex:none;
  filter:drop-shadow(0 6px 10px rgba(90,70,30,.22))}
.mtx{font-size:.86rem; color:var(--kamen); line-height:1.42; min-width:0}
.mtx b{display:block; font-family:var(--display); font-weight:700; font-size:.94rem;
  color:var(--noc); margin-bottom:2px}

.darrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--krecnjak); border:1.5px solid var(--rub); color:var(--noc);
  cursor:pointer; box-shadow:0 10px 24px -12px rgba(90,70,30,.5);
  transition:transform .25s var(--ease), opacity .25s, background .25s}
.darrow svg{width:20px; height:20px}
.darrow:hover:not(:disabled){background:var(--sunce); border-color:var(--sunce); transform:translateY(-50%) scale(1.07)}
.darrow:disabled{opacity:.28; cursor:default}
.da-prev{left:-40px}
.da-next{right:-40px}
@media (max-width:1080px){ .dtrack{--cols:2.4} }
@media (max-width:760px){ .dtrack{--cols:1.15; --gap:12px}
  .da-prev{left:-14px} .da-next{right:-14px} }

/* tri činjenice */
.meal-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px; margin-top:26px}
/* piktogram u 1/4 kolone, tekst u 3/4 */
.fact{background:var(--krecnjak); border:1px solid var(--linija); border-radius:26px;
  padding:24px; box-shadow:0 18px 40px -30px rgba(90,70,30,.4);
  display:grid; grid-template-columns:auto 1fr; column-gap:18px; row-gap:5px; align-items:start;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.fact:hover{transform:translateY(-4px); box-shadow:0 26px 52px -30px rgba(90,70,30,.5)}
.fact-ico{grid-column:1; grid-row:1 / span 2; align-self:start; margin:0;
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%}
.fact h3{grid-column:2; align-self:center}
.fact-ico svg{width:26px; height:26px}
.f-green{background:var(--zaliv-soft); color:var(--duboko)}
.f-clay{background:var(--oleander-soft); color:var(--oleander-ink)}
.f-sun{background:var(--sunce-soft); color:var(--zlato)}
.fact h3{font-size:1.05rem}
.fact p{grid-column:2; margin-top:2px; font-size:.9rem; color:var(--kamen); line-height:1.6}

.meal-strip{margin-top:clamp(30px,4vw,52px); text-align:center;
  font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--kamen)}
.meal-strip i{color:var(--zaliv); font-style:normal; margin:0 10px}

/* ── DNEVNIK GRADNJE ──────────────────────────────────── */
.diary{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:30px}
.entry{
  border:1px dashed var(--rub); border-radius:var(--r-lg); padding:22px; background:var(--krecnjak);
  display:flex; flex-direction:column; gap:9px; transition:border-color .3s, transform .3s var(--ease);
}
.entry:hover{border-color:var(--zaliv); transform:translateY(-4px)}
.entry-date{font-family:var(--display); font-weight:700; font-size:.86rem; color:var(--duboko)}
.entry-ph{
  aspect-ratio:4/3; border-radius:14px; background:
    repeating-linear-gradient(45deg, var(--pijesak-2) 0 12px, var(--krecnjak) 12px 24px);
  border:1px solid var(--linija); display:flex; align-items:center; justify-content:center;
  font-size:.74rem; color:var(--kamen); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* ── CIJENE ───────────────────────────────────────────── */
.incl{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px}
.incl li{display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:start; font-size:.94rem}
.incl svg{width:18px; height:18px; margin-top:4px; flex:none}

/* ── CIJENE: tri kartice sa svojim licem ─────────────── */
.pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:34px}
.pcard{position:relative; overflow:hidden; border-radius:28px; padding:28px 26px 26px;
  display:flex; flex-direction:column; gap:14px; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.pcard:hover{transform:translateY(-5px)}
.p-cream{background:#FDFAF2; color:var(--noc); box-shadow:0 24px 50px -30px rgba(6,20,17,.8);
  --acc:var(--sunce); --acc-ink:#4A3208; --doodle:rgba(233,180,76,.42)}
.p-mint{background:#E4F1E7; color:var(--noc); box-shadow:0 24px 50px -30px rgba(6,20,17,.8);
  --acc:#2F7D5C; --acc-ink:#FFFCF6; --doodle:rgba(47,125,92,.34)}
.p-dark{background:#102A25; color:var(--deep-fg); border:1px solid #23473F;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
  --acc:var(--oleander); --acc-ink:#3A1B0C; --doodle:rgba(157,192,184,.3)}

.pcard header{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pico{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--acc); color:var(--acc-ink)}
.pico svg{width:28px; height:28px}
.pcard h3{font-size:1.22rem; color:inherit}
.p-dark h3{color:var(--deep-fg)}
.ppill{font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--duboko); color:#EAF6F2; padding:6px 13px; border-radius:99px}
.pprice{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,2.6vw,1.9rem);
  color:var(--zlato); font-variant-numeric:tabular-nums; margin-top:4px}
.p-dark .pprice{color:var(--sunce)}
.pprice small{font-family:var(--body); font-weight:600; font-size:.85rem; color:var(--kamen)}
.p-dark .pprice small{color:var(--deep-muted)}

.plist{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.plist li{display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start;
  font-size:.95rem; line-height:1.45}
.pchk{width:26px; height:26px; border-radius:50%; background:var(--acc); color:var(--acc-ink);
  display:grid; place-items:center; flex:none}
.pchk svg{width:15px; height:15px}
.pnote{font-size:.93rem; line-height:1.6; color:var(--kamen)}
.p-dark .pnote{color:var(--deep-muted)}

/* crtice u pozadini - samo nagovještaj */
.pd{position:absolute; z-index:-1; color:var(--doodle); pointer-events:none; line-height:0}
.pd svg{width:100%; height:auto}
.pd-a{width:120px; top:18px; right:18px}
.pd-b{width:74px; bottom:24px; right:26px}
.pd-c{width:64px; top:34px; right:26px}
.pd-d{width:56px; bottom:-8px; right:18px}
.pd-e{width:60px; top:22px; left:16px; transform:rotate(180deg)}
.pd-f{width:70px; bottom:20px; right:20px}

/* CTA iskoči na hover, na dodirnim ekranima stoji stalno */
.pcta{margin-top:auto; align-self:flex-start; border:0; cursor:pointer; font:inherit;
  font-weight:700; font-size:.9rem; padding:13px 22px; border-radius:99px;
  background:var(--brand-plate); color:var(--pijesak); box-shadow:0 4px 0 var(--sunce);
  opacity:0; transform:translateY(12px) scale(.96); pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s cubic-bezier(.22,1.4,.36,1), box-shadow .2s}
.p-dark .pcta{background:var(--sunce); color:#17322E; box-shadow:0 4px 0 rgba(0,0,0,.35)}
.pcard:hover .pcta, .pcard:focus-within .pcta{opacity:1; transform:none; pointer-events:auto}
.pcta:hover{box-shadow:0 6px 0 var(--sunce)}
.p-dark .pcta:hover{box-shadow:0 6px 0 rgba(0,0,0,.35)}
.pcta:active{transform:translateY(2px)}
@media (hover:none){ .pcta{opacity:1; transform:none; pointer-events:auto} }

/* Tekstualni okidač za isti prozor koji otvaraju dugmad na karticama.
   Namjerno NE nosi .pcta: to dugme na kartici stoji nevidljivo do hovera,
   pa bi se i ovaj link gubio u tekstu. */
.upis-link{border:0; padding:0; background:none; font:inherit; font-weight:700;
  color:inherit; cursor:pointer; text-align:left;
  text-decoration:underline; text-decoration-color:var(--sunce);
  text-decoration-thickness:2px; text-underline-offset:3px;
  transition:color .25s var(--ease), text-decoration-color .25s var(--ease)}
.upis-link:hover{color:var(--duboko); text-decoration-color:var(--duboko)}
.upis-link:focus-visible{outline:2px solid var(--sunce); outline-offset:3px; border-radius:3px}

/* ── prozor za prijavu interesovanja ─────────────────── */
/* dialog dobija boju iz browserovog CanvasText - u tamnom režimu OS-a ispadne
   bijela na krem. Zato sve boje ovdje idu eksplicitno. */
.modal{border:0; padding:0; background:transparent; max-width:min(560px,92vw); width:100%;
  color:var(--noc); color-scheme:light}
.modal h3, .modal label, .modal .consent span{color:var(--noc)}
.modal .lede, .modal .small{color:var(--kamen)}
.modal::backdrop{background:rgba(8,22,19,.62); backdrop-filter:blur(4px)}
.modal-in{background:var(--krecnjak); color:var(--noc); border-radius:30px; padding:clamp(24px,3.4vw,38px);
  box-shadow:0 40px 90px -30px rgba(6,20,17,.6); position:relative}
.modal-x{position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--linija); background:var(--pijesak); color:var(--noc);
  display:grid; place-items:center; cursor:pointer; font-size:1.1rem; line-height:1}
.modal-x:hover{background:var(--sunce)}
.modal h3{font-size:clamp(1.25rem,2.4vw,1.6rem); max-width:22ch}
.modal .lede{margin-top:10px; font-size:.95rem}
.mprog{display:block; margin-bottom:8px; font-size:.72rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--zlato)}
.mgrid{display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-top:20px}
.mgrid .field:nth-child(1){grid-column:1 / -1}
@media (max-width:520px){ .mgrid{grid-template-columns:1fr} }
.modal .thanks{margin-top:18px}

/* ── FAQ: stog nagnutih pilula, poravnaju se kad se otvore ── */
#pitanja .wrap{text-align:center}
#pitanja h2{margin-inline:auto}
.faq{margin:34px auto 0; display:grid; gap:14px; max-width:760px; text-align:left}
.qa-q{
  width:100%; border:0; cursor:pointer; font:inherit; text-align:left;
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:17px 20px 17px 22px; border-radius:99px;
  font-family:var(--display); font-weight:700; font-size:1.02rem; line-height:1.3;
  color:var(--noc); background:var(--pill-bg, var(--krecnjak));
  border:1.5px solid var(--pill-line, var(--linija));
  box-shadow:0 8px 20px -14px rgba(23,50,46,.4);
  transform:rotate(var(--tilt,0deg));
  transition:transform .45s var(--ease), background .35s, border-color .35s, box-shadow .35s}
.qa:nth-child(1) .qa-q{--tilt:-0.8deg}
.qa:nth-child(2) .qa-q{--tilt: 0.7deg}
.qa:nth-child(3) .qa-q{--tilt:-0.9deg}
.qa:nth-child(4) .qa-q{--tilt: 0.6deg}
.qa:nth-child(5) .qa-q{--tilt:-0.7deg}
.qa:nth-child(6) .qa-q{--tilt: 0.9deg}
.qa:nth-child(7) .qa-q{--tilt:-0.6deg}
.qa-q:hover, .qa-q:focus-visible{--pill-bg:var(--zaliv-soft); --pill-line:rgba(14,106,90,.3);
  transform:rotate(0deg); box-shadow:0 12px 26px -16px rgba(23,50,46,.5)}
.qa.open .qa-q{--pill-bg:var(--sunce-soft); --pill-line:rgba(233,180,76,.55);
  transform:rotate(0deg); box-shadow:0 14px 30px -16px rgba(154,107,13,.45)}

.qa-dot{width:11px; height:11px; border-radius:50%; background:var(--qc, var(--zaliv)); flex:none;
  transition:transform .35s var(--ease)}
.qa.open .qa-dot{transform:scale(1.35)}
.qa:nth-child(3n+1) .qa-q{--qc:var(--sunce)}
.qa:nth-child(3n+2) .qa-q{--qc:var(--zaliv)}
.qa:nth-child(3n+3) .qa-q{--qc:var(--oleander)}

.qa-ico{flex:none; width:28px; height:28px; border-radius:50%; background:var(--zaliv-soft); color:var(--duboko);
  display:grid; place-items:center;
  transition:transform .4s var(--ease), background .3s, color .3s}
.qa.open .qa-ico{transform:rotate(45deg); background:var(--sunce); color:#17322E}

.qa-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-a > div{overflow:hidden}
.qa-a p{padding:16px 28px 6px 60px; font-size:.97rem; line-height:1.68; color:var(--kamen); max-width:70ch;
  opacity:0; transform:translateY(6px); transition:opacity .4s .1s var(--ease), transform .4s .1s var(--ease)}
.qa.open .qa-a p{opacity:1; transform:none}
@media (max-width:520px){
  .qa-q{padding:15px 16px 15px 18px; font-size:.96rem; gap:12px}
  .qa-a p{padding-left:34px; padding-right:8px}
}

/* ── FORMA ────────────────────────────────────────────── */
.formcard{background:var(--krecnjak); border:1px solid var(--rub); border-radius:var(--r-xl); padding:clamp(24px,4vw,42px); box-shadow:var(--shadow-2)}
.fgrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); margin-top:24px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:.82rem; font-weight:700; color:var(--kamen)}
.field input, .field select{
  font:inherit; font-size:.96rem; padding:13px 15px; border-radius:14px;
  border:1.5px solid var(--linija); background:var(--pijesak); color:var(--noc);
  transition:border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.field input:hover, .field select:hover{border-color:var(--rub)}
.field input:focus, .field select:focus{
  outline:0; border-color:var(--duboko); box-shadow:0 0 0 4px var(--zaliv-soft); transform:translateY(-1px);
}
.consent{display:flex; gap:11px; align-items:flex-start; margin-top:20px; font-size:.85rem; color:var(--kamen)}
.consent input{margin-top:3px; width:17px; height:17px; accent-color:var(--duboko); flex:none}
.formfoot{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:24px}
.thanks{
  display:none; margin-top:20px; padding:18px 20px; border-radius:18px;
  background:var(--zaliv-soft); border:1px solid var(--zaliv); font-size:.94rem;
}
.thanks.show{display:block; animation:rise .5s var(--ease)}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ── PODNOŽJE ─────────────────────────────────────────── */
.foot{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot h4{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--deep-muted); font-family:var(--body); font-weight:700; margin-bottom:12px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.9rem}
.foot a{color:var(--deep-fg); text-decoration:none; transition:color .25s, transform .25s var(--ease); display:inline-block}
.foot a:hover{color:var(--sunce); transform:translateX(3px)}
.legal{margin-top:38px; padding-top:22px; border-top:1px solid var(--deep-line); font-size:.8rem; color:var(--deep-muted); display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between}

/* ── ULAZ U KADAR ─────────────────────────────────────── */
.js .reveal{opacity:0; transform:translateY(18px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d,0ms)}

@media (max-width:860px){
  .navlinks{display:none}
  .burger{display:grid}
  .band > .wrap{padding-top:56px; padding-bottom:56px}
    .nav{gap:10px; padding-right:8px}
  .navright{gap:7px}
}
@media (max-width:560px){
  .brand-logo{height:34px}
  .nav > .navright > .btn-sm{display:none}
  .lang a, .lang .lang-soon{padding:6px 9px}
}
@media (max-width:520px){
  .hero-cta .btn{width:100%; justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .js .reveal{opacity:1; transform:none}
}

/* prekidač jezika su linkovi u statičkom paketu */
.lang a, .lang .lang-soon{display:inline-block; text-decoration:none; line-height:1;
  border:0; cursor:pointer; font:inherit; padding:6px 11px; border-radius:99px}
.lang .lang-soon{cursor:not-allowed}

/* ── hero na niskim ekranima (MacBook): sve u 100svh ──────────────── */
@media (min-width:901px) and (max-height:860px){
  .hero-sub{font-size:1rem; line-height:1.55; max-width:52ch}
  .hero-note{font-size:.8rem}
  .hero-h1{max-width:26ch}
}
@media (min-width:901px) and (max-height:760px){
  .hero-inner{padding-top:clamp(80px,10vh,110px)}
  .hero-sub{font-size:.95rem}
  .hero .btn{padding:11px 20px; font-size:.9rem}
}

/* ═══════════════════════════════════════════════════════════════════
   STRANICE - komponente uvedene sa prelaskom na pojedinačne stranice
   ═══════════════════════════════════════════════════════════════════ */

/* ── hero pojedinačne stranice ───────────────────────────────────── */
/* Hero unutrašnjih stranica nosi istu svijetlu podlogu kao naslovna. Ranije je
   bio tamnozelen, pa je prelaz sa naslovne bio nagao - klijent je to tražio da
   se ujednači. Tamno zeleno ostaje za završnu traku svake stranice, gdje radi
   kao interpunkcija, a ne kao polovina površine. */
.phero{position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(176deg, var(--krecnjak) 0%, #FBF6EC 46%, var(--pijesak) 100%);
  color:var(--noc);
  padding:clamp(128px,15vh,186px) 0 clamp(78px,11vh,132px); margin-bottom:-1px}
.phero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(760px 340px at 82% -8%, rgba(124,191,178,.30), transparent 62%),
    radial-gradient(620px 300px at 6% 104%, rgba(233,180,76,.26), transparent 60%)}
.phero .wrap{position:relative; z-index:1}
.phero-in{max-width:none; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,56px); align-items:center}
.phero h1{max-width:17ch; margin-top:10px; font-size:clamp(2rem,4.4vw,3.35rem); line-height:1.05}
.phero .lede{margin-top:18px; max-width:52ch; color:var(--kamen)}
.phero .eyebrow{color:var(--duboko)}
.phero .btn-ghost{color:var(--noc)}
.crumbs{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--kamen); margin-bottom:6px}
.crumbs a{color:var(--duboko); font-weight:600}
.crumbs a:hover{color:var(--sunce)}
.crumbs span{opacity:.55}
.phero-art{position:relative; min-height:200px}
.phero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
@media (max-width:860px){
  .phero-in{grid-template-columns:1fr}
  .phero-art{display:none}
}

/* plovni ukras u heroju stranice - mala scena po temi */
.pha{width:100%; height:auto; max-width:360px; margin-inline:auto; display:block; overflow:visible}
.pha .bob{animation:phaBob 6s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.pha .bob2{animation:phaBob 7.4s .6s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes phaBob{0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)}}

/* ── mjesto za fotografiju ───────────────────────────────────────── */
.imgslot{position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center;
  border-radius:var(--r-lg); border:2px dashed var(--rub); color:var(--kamen);
  background:
    repeating-linear-gradient(135deg, rgba(214,206,187,.24) 0 10px, transparent 10px 22px),
    var(--pijesak-2);
  padding:22px; min-height:220px; overflow:hidden}
.imgslot.tall{min-height:340px}
.imgslot.wide{min-height:280px}
.imgslot-ico{width:40px; height:40px; color:var(--zaliv); flex:0 0 auto}
.imgslot-t{font-family:var(--display); font-weight:700; font-size:1rem; color:var(--noc); max-width:30ch; line-height:1.3}
.imgslot-d{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--kamen); opacity:.85}
.b-night .imgslot{border-color:var(--deep-line); color:var(--deep-muted);
  background:repeating-linear-gradient(135deg, rgba(43,86,76,.35) 0 10px, transparent 10px 22px), var(--deep-card)}
.b-night .imgslot-t{color:var(--deep-fg)}
.b-night .imgslot-d{color:var(--deep-muted)}

/* ── dvokolona: tekst + vizual ───────────────────────────────────── */
.split2{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:clamp(22px,3.4vw,46px); align-items:center}
.split2.rev > :first-child{order:2}
@media (max-width:760px){ .split2.rev > :first-child{order:0} }

/* ── koraci ──────────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:30px; counter-reset:st}
.step{position:relative; background:var(--krecnjak); border:1px solid var(--linija);
  border-radius:var(--r-lg); padding:26px 22px 22px; box-shadow:var(--shadow-1);
  transition:transform .4s var(--ease), border-color .4s var(--ease)}
.step:hover{transform:translateY(-4px); border-color:var(--zaliv)}
.step::before{counter-increment:st; content:counter(st);
  position:absolute; top:-15px; left:22px; width:34px; height:34px; border-radius:50%;
  background:var(--sunce); color:var(--noc); font-family:var(--display); font-weight:700;
  display:grid; place-items:center; box-shadow:0 3px 0 rgba(23,50,46,.3)}
.step h3{font-size:1.02rem; margin-bottom:7px}
.step p{font-size:.9rem; color:var(--kamen); line-height:1.6}
.b-night .step{background:var(--deep-card); border-color:var(--deep-line)}
.b-night .step p{color:var(--deep-muted)}

/* ── tabela uključeno / nije uključeno ───────────────────────────── */
.incl{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; margin-top:28px}
.incl-col{background:var(--krecnjak); border:1px solid var(--linija); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--shadow-1)}
.incl-col h3{font-size:1.05rem; display:flex; align-items:center; gap:10px}
.incl-col ul{list-style:none; margin-top:14px; padding:0; display:grid; gap:11px}
.incl-col li{display:flex; gap:11px; align-items:flex-start; font-size:.94rem; line-height:1.55; color:var(--kamen)}
.incl-col li b{color:var(--noc); font-weight:600}
.ic{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px}
.ic-yes{background:var(--duboko); color:var(--krecnjak)}
.ic-no{background:var(--oleander-soft); color:var(--oleander-ink)}
.ic svg{width:13px; height:13px}

/* ── traka poziva na kraju stranice ──────────────────────────────── */
.cband{background:var(--oleander-soft); border-radius:var(--r-xl); padding:clamp(28px,4vw,46px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center;
  border:1px solid rgba(140,74,40,.14)}
.cband h2{font-size:clamp(1.4rem,2.6vw,2rem); max-width:22ch; color:var(--oleander-ink)}
.cband p{margin-top:9px; color:var(--kamen); font-size:.96rem; max-width:48ch}
@media (max-width:760px){ .cband{grid-template-columns:1fr} }

/* ── "vidi više" link ────────────────────────────────────────────── */
.more{display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-family:var(--display); font-weight:700; font-size:.98rem; color:var(--duboko);
  border-bottom:2px solid transparent; padding-bottom:2px; transition:gap .3s var(--ease), border-color .3s}
.more:hover{gap:14px; border-color:var(--sunce)}
.more svg{width:17px; height:17px}
.b-night .more{color:var(--sunce)}
.b-night .more:hover{border-color:var(--sunce)}

/* ── kartice koje vode na stranicu (naslovna) ────────────────────── */
.navcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:32px}
.navcard{position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--krecnjak); border:1px solid var(--linija); border-radius:var(--r-lg);
  padding:26px 24px 24px; box-shadow:var(--shadow-1); overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease)}
.navcard:hover{transform:translateY(-5px); border-color:var(--zaliv);
  box-shadow:0 2px 3px rgba(23,50,46,.05), 0 20px 40px -22px rgba(23,50,46,.4)}
.navcard-ico{width:42px; height:42px}
.navcard h3{font-size:1.12rem}
.navcard p{font-size:.9rem; color:var(--kamen); line-height:1.6; flex:1 1 auto}
.navcard .more{margin-top:6px; font-size:.9rem}
.navcard::after{content:""; position:absolute; right:-40px; bottom:-40px; width:130px; height:130px;
  border-radius:50%; background:var(--zaliv-soft); opacity:0; transition:opacity .45s var(--ease); z-index:-1}
.navcard:hover::after{opacity:.75}

/* ── mreža sitnih činjenica ──────────────────────────────────────── */
.mini{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-top:26px}
.mini-i{background:var(--krecnjak); border:1px solid var(--linija); border-radius:var(--r-md);
  padding:18px 18px 16px}
.mini-i b{display:block; font-family:var(--display); font-size:1.5rem; color:var(--duboko); line-height:1}
.mini-i span{display:block; margin-top:7px; font-size:.84rem; color:var(--kamen); line-height:1.45}
.b-night .mini-i{background:var(--deep-card); border-color:var(--deep-line)}
.b-night .mini-i b{color:var(--sunce)}
.b-night .mini-i span{color:var(--deep-muted)}

/* ── citat ───────────────────────────────────────────────────────── */
.quote{position:relative; margin-top:34px; padding:30px 30px 30px 62px;
  background:var(--sunce-soft); border-radius:var(--r-lg); border:1px solid rgba(138,93,11,.16)}
.quote::before{content:"„"; position:absolute; left:20px; top:8px; font-family:var(--display);
  font-size:4.4rem; line-height:1; color:var(--sunce)}
.quote p{font-size:1.06rem; line-height:1.62; color:var(--noc); max-width:60ch}
.quote cite{display:block; margin-top:12px; font-style:normal; font-size:.86rem; color:var(--zlato); font-weight:600}

/* ── aktivna stavka u navigaciji ─────────────────────────────────── */
.navlinks a[aria-current="page"]{color:var(--duboko)}
.navlinks a[aria-current="page"]::after{opacity:1; transform:none}
.mobmenu a[aria-current="page"]{color:var(--duboko)}
.phero-flush{padding-bottom:clamp(30px,4vh,52px)}
a.navcard, a.navcard:hover{text-decoration:none}
a.navcard *{text-decoration:none}
.navcard h3{color:var(--noc)}
.navcard p{color:var(--kamen)}
.navcard .more{color:var(--duboko)}
a.navcard:hover .more{gap:14px; border-color:var(--sunce)}
.card-price small{white-space:nowrap}