/* Harmonija · LUX v2 (agent A): premium sloj preko site.css. Komponente + efekti (lux.js).
   Pravila: Montserrat, bez script fontova i pilula sa sjajem, bez teksta samo na hover, sadržaj nikad ne ostaje nevidljiv. */

/* ---------- tipografija ---------- */
body { font-size: 1.0625rem; }
@media (min-width: 1100px) { body { font-size: 1.125rem; } }
h1, h2 { font-weight: 300; }
p strong, li strong, .kw { font-weight: 700; }

/* ---------- ritam sekcija: oštre ivice + tanka linija brenda na vrhu ---------- */
main > .sec:not(:first-child), main > section:not(:first-child).sec { border-top: 1px solid var(--linija); }
:is(.sec.photo, .sec.film) { border-top: 1px solid rgba(190, 220, 156, .6) !important; }
.sec.tint { border-top: 1px solid rgba(116, 145, 78, .35); }
.sec.noline { border-top: 0 !important; }
.sec.biser { background: var(--biser); }
:is(.sec.photo, .sec.film) { color: #fff; background: #3C4634; overflow: hidden; isolation: isolate; }
.sec-bg.lx { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
html body .sec-bg.lx .sb-m { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; max-width: none; object-fit: cover; }
.sec-bg.lx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(50, 60, 43, calc(var(--dim, .62) - .05)) 0%, rgba(50, 60, 43, var(--dim, .62)) 45%, rgba(46, 55, 39, calc(var(--dim, .62) + .1)) 100%); }
:is(.sec.photo, .sec.film):has(> .sec-bg.lx)::before { display: none; }
:is(.sec.photo, .sec.film) :is(h1, h2) { text-shadow: 0 2px 28px rgba(30, 36, 26, .3); }
:is(.sec.photo, .sec.film) .sec-head .lead { color: rgba(255, 255, 255, .92); }
.kb { animation: kb 24s ease-in-out infinite alternate; transform-origin: 60% 40%; will-change: transform; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.2%, -1%); } }

/* ---------- dugmad: dupli okvir, svetla varijanta, talas ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background .25s, border-color .25s, color .25s, transform .35s var(--ease), box-shadow .35s; }
.btn.dbl { padding-inline: 30px; box-shadow: 0 14px 30px -18px rgba(63, 84, 39, .75); }
.btn.dbl::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 5px; pointer-events: none; transition: inset .3s var(--ease); }
.btn.dbl:hover::before { inset: 3px; }
.btn.sm.dbl { padding-inline: 22px; }
.btn.light:not(.ghost) { background: var(--krem); border-color: var(--krem); color: var(--maslina); }
.btn.light:not(.ghost):hover { background: #fff; border-color: #fff; color: var(--maslina); }
.btn.light.dbl::before, :is(.sec.photo, .sec.film) .btn.dbl:not(.ghost)::before { border-color: rgba(60, 70, 52, .3); }
.btn.ghost.light { color: #fff; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); }
.btn.ghost.light:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .16); }
.rip { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .5); pointer-events: none; animation: rip .75s ease-out forwards; z-index: -1; }
.btn.ghost .rip, .btn.light .rip { background: rgba(116, 145, 78, .3); }
@keyframes rip { to { transform: scale(26); opacity: 0; } }

/* ---------- kartice ---------- */
.card.pp { background: var(--biser); border: 1px solid rgba(116, 145, 78, .45); border-radius: 4px; box-shadow: 0 24px 50px -32px rgba(60, 70, 52, .45); }
.card.pp::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(116, 145, 78, .2); pointer-events: none; }
.card.pp h3 { font-weight: 600; }
.sec.white .card.pp, .sec.biser .card.pp { background: #fff; }
.card.pp::after { content: ""; position: absolute; left: clamp(24px, 2.6vw, 36px); bottom: -1px; width: 46px; height: 2px; background: var(--zelena); transition: width .5s var(--ease); }
.card.pp:hover::after { width: 96px; }
.card.numd, .numbered > .card { padding-top: clamp(30px, 3vw, 44px); }
.card-n, .numbered > .card::after { position: absolute; top: clamp(16px, 2vw, 26px); right: clamp(18px, 2.2vw, 30px); font-weight: 200; font-size: clamp(2.3rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -.03em; color: var(--zelena-t); }
.numbered { counter-reset: nb; }
.numbered > * { counter-increment: nb; }
.numbered > .card::after { content: counter(nb, decimal-leading-zero); left: auto; bottom: auto; width: auto; height: auto; background: none; color: rgba(78, 102, 48, .55); }
.numbered > .card.pp:hover::after { width: auto; }
.card.numd h3, .numbered > .card h3 { padding-right: 64px; }
.card.glass { background: rgba(251, 248, 241, .16); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); box-shadow: 0 24px 50px -30px rgba(20, 26, 16, .6); color: #fff; }
.card.glass :is(h3, p, li) { color: #fff; }
.step-card { position: relative; }
.step-card .lxi { width: 64px; height: 64px; color: var(--zelena); margin-bottom: 18px; }
.card .lxi { color: var(--zelena); }
:is(.sec.photo, .sec.film) .card:not(.glass) { color: var(--tekst); }
:is(.sec.photo, .sec.film) .card:not(.glass) :is(h3, p, li) { color: var(--tekst); }
:is(.sec.photo, .sec.film) .card:not(.glass) :is(h3, p, li) strong { color: var(--zelena-t); }

/* fotke u passe-partout okviru sa natpisom 01-04 */
.pp-row { counter-reset: ppn; }
.pp-photo { position: relative; margin: 0; background: var(--biser); padding: 12px 12px 0; border: 1px solid rgba(116, 145, 78, .45); box-shadow: 0 28px 56px -30px rgba(60, 70, 52, .5), 10px 10px 0 -1px rgba(157, 182, 124, .18); transition: transform .5s var(--ease), box-shadow .5s; counter-increment: ppn; }
.pp-photo::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(116, 145, 78, .22); pointer-events: none; z-index: 1; }
.pp-photo:hover { transform: translateY(-6px); box-shadow: 0 36px 64px -30px rgba(60, 70, 52, .55), 14px 14px 0 -1px rgba(157, 182, 124, .26); }
.pp-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pp-photo figcaption { display: flex; align-items: baseline; gap: 10px; padding: 15px 4px; font-size: .8125rem; font-weight: 600; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--tekst); }
.pp-row .pp-photo figcaption::before { content: counter(ppn, decimal-leading-zero); font-size: 1.4rem; font-weight: 200; letter-spacing: 0; color: var(--zelena-t); }

/* ---------- brojevi ---------- */
.big-num { display: block; font-weight: 200; font-size: clamp(3.6rem, 7vw, 6.4rem); line-height: .95; letter-spacing: -.04em; color: var(--zelena-t); font-variant-numeric: lining-nums; }
.out-num { display: block; font-weight: 300; font-size: clamp(4rem, 9vw, 8.5rem); line-height: .9; letter-spacing: -.02em; color: var(--zelena-t); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px var(--zelena); }
:is(.sec.photo, .sec.film) :is(.big-num, .out-num) { color: var(--svetlo); -webkit-text-stroke-color: var(--svetlo); }
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-block: 1px solid var(--linija); }
.count { display: grid; gap: 8px; align-content: start; padding: clamp(22px, 3vw, 36px) clamp(16px, 2vw, 28px); border-left: 1px solid var(--linija); }
.count:first-child { border-left: 0; }
.count-n { display: flex; align-items: baseline; gap: 6px; font-weight: 200; font-size: clamp(3rem, 5.4vw, 4.8rem); line-height: 1; letter-spacing: -.03em; color: var(--zelena-t); font-variant-numeric: tabular-nums lining-nums; }
.count-p, .count-s { font-size: .34em; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.count-l { font-size: .9375rem; font-weight: 500; color: var(--tekst-2); line-height: 1.4; max-width: 22ch; }
:is(.sec.photo, .sec.film) .counts, :is(.sec.photo, .sec.film) .count { border-color: rgba(255, 255, 255, .25); }
:is(.sec.photo, .sec.film) .count-n { color: var(--svetlo); }
:is(.sec.photo, .sec.film) .count-l { color: rgba(255, 255, 255, .92); }
@media (max-width: 560px) { .counts { grid-template-columns: 1fr 1fr; } .count { border-left: 0; border-top: 1px solid var(--linija); } .count:nth-child(-n+2) { border-top: 0; } .count:nth-child(even) { border-left: 1px solid var(--linija); } }

/* ---------- linijske ilustracije ---------- */
.lxi { display: block; flex: none; color: var(--zelena); }
:is(.sec.photo, .sec.film) .lxi { color: var(--svetlo); }
.ill { color: var(--zelena); line-height: 0; }
.ill .lxi { width: clamp(72px, 9vw, 120px); height: auto; }
.ill.bg { position: absolute; z-index: 0; opacity: .18; pointer-events: none; }
.ill.bg .lxi { width: clamp(180px, 24vw, 340px); }
.ill.float .lxi { animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(2deg); } }

/* ---------- luk + prsten + iskre + staklene kartice ---------- */
.arch-wrap { position: relative; isolation: isolate; }
.arch-wrap .arch { z-index: 1; }
.arch-line { position: absolute; inset: -13px; border: 1px solid rgba(116, 145, 78, .55); border-radius: var(--r-arch); pointer-events: none; z-index: 0; transform: translate(10px, 10px); }
.arch-wrap .ring-seal { position: absolute; left: clamp(-34px, -2.4vw, -14px); bottom: 12%; z-index: 3; }
.arch-wrap .spark { position: absolute; z-index: 3; color: var(--zelena); animation: twinkle 3.6s ease-in-out infinite; }
.arch-wrap .sp-a { right: -6px; top: 18%; width: 26px; height: 26px; }
.arch-wrap .sp-b { left: 14%; top: -18px; width: 16px; height: 16px; animation-delay: -1.8s; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
:is(.sec.photo, .sec.film) .arch-line { border-color: rgba(190, 220, 156, .6); }
:is(.sec.photo, .sec.film) .arch-wrap .spark { color: var(--svetlo); }
.ring-seal { position: relative; display: grid; place-items: center; width: var(--rs, 132px); height: var(--rs, 132px); border-radius: 50%; background: var(--biser); color: var(--zelena-t); box-shadow: 0 16px 34px -18px rgba(60, 70, 52, .55); flex: none; }
.ring-seal .ring-spin { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 38s linear infinite; }
.ring-seal text { font: 600 10.4px var(--font); letter-spacing: .14em; fill: currentColor; }
.ring-seal .ring-lotus { width: 38%; height: 38%; color: var(--zelena); }
@keyframes spin { to { transform: rotate(360deg); } }
.gchip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 10px; background: rgba(251, 248, 241, .9); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 16px 34px -20px rgba(40, 48, 34, .55); color: var(--tekst); font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.gchip .ico { color: var(--zelena-t); }
.gchip strong { color: var(--zelena-t); font-weight: 700; }
.chips-float { position: absolute; right: clamp(-28px, -2vw, -8px); bottom: 8%; z-index: 4; display: grid; gap: 10px; justify-items: end; max-width: 250px; }
.chips-float .gchip:nth-child(2) { margin-right: 26px; }
.chips-float .gchip:nth-child(3) { margin-right: 6px; }
@media (max-width: 760px) {
  .chips-float { position: relative; right: auto; bottom: auto; margin: -36px 0 0 auto; justify-items: end; max-width: 92%; }
  .arch-wrap .ring-seal { --rs: 104px !important; left: -10px; bottom: auto; top: 46%; }
}

/* ---------- traka koja klizi ---------- */
.marquee { position: relative; overflow: hidden; background: var(--biser); border-block: 1px solid var(--linija); padding: 20px 0; }
.mq-track { display: flex; width: max-content; animation: mq var(--spd, 40s) linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.marquee ul { list-style: none; margin: 0; padding: 0; display: flex; flex: none; }
.marquee li { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 300; letter-spacing: .04em; color: var(--tekst); }
.marquee li strong { font-weight: 700; color: var(--zelena-t); }
.mq-sep { color: var(--zalfija); flex: none; }
.marquee.tint { background: var(--tint); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- citat preko fotografije ---------- */
.qphoto { min-height: clamp(420px, 58vh, 600px); display: flex; align-items: center; }
.qphoto figure { margin: 0; }
.qphoto .q-lotus { margin: 0 auto 22px; color: var(--svetlo); }
.qphoto blockquote { margin: 0 0 22px; }
.qphoto blockquote p { font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.3; font-weight: 300; letter-spacing: -.01em; color: #fff; margin: 0; text-wrap: balance; }
.qphoto blockquote strong { color: var(--svetlo); font-weight: 700; }
.qphoto figcaption { font-size: .875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--svetlo); }

/* ---------- efekti (lux.js) ---------- */
.lux-prog { position: fixed; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 0; transform: scaleX(0); background: linear-gradient(90deg, var(--zalfija), var(--zelena-t)); z-index: 60; pointer-events: none; }
.lux-ring { position: fixed; left: -17px; top: -17px; width: 34px; height: 34px; border: 1px solid rgba(116, 145, 78, .75); border-radius: 50%; pointer-events: none; z-index: 90; opacity: 0;
  transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), left .35s var(--ease), top .35s var(--ease), background .35s; }
.lux-ring.on { opacity: 1; }
.lux-ring.big { width: 58px; height: 58px; left: -29px; top: -29px; background: rgba(190, 220, 156, .14); }
/* reči naslova iz maske: skrivene SAMO dok lux.js ne doda .in (dodaje kad je naslov u ekranu; osigurač pri skrolu) */
.wsplit .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.wsplit .w > i { display: inline-block; font-style: inherit; transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.wsplit.in .w > i { transform: none; }
.ani { opacity: 0; translate: 0 26px; transition: opacity .85s var(--ease), translate .85s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.ani.in { opacity: 1; translate: 0 0; }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .5s, opacity .85s var(--ease), translate .85s var(--ease); }
.tilt:hover { box-shadow: var(--senka-2); }
.par { will-change: translate; }

/* ---------- 404 ---------- */
.e404 { position: relative; overflow: hidden; isolation: isolate; min-height: 70vh; display: flex; align-items: center; }
.e404 .out-num { font-size: clamp(6rem, 18vw, 15rem); margin-bottom: 8px; }
.e404-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.e404-links { display: grid; gap: 14px; }
.e404-links a.card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; text-decoration: none; }
.e404-links .lxi { width: 44px; height: 44px; }
.e404-links b { display: block; font-weight: 600; color: var(--tekst); }
.e404-links small { display: block; color: var(--tekst-2); font-size: .9375rem; }
.e404-links .ico-strelica { color: var(--zelena-t); }
@media (max-width: 860px) { .e404-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- smanjeno kretanje / štednja podataka ---------- */
@media (prefers-reduced-motion: reduce) {
  .kb, .ring-seal .ring-spin, .arch-wrap .spark, .ill.float .lxi { animation: none !important; }
  .mq-track { animation: none !important; }
  .marquee { overflow-x: auto; }
  .wsplit .w > i { transform: none !important; }
  .ani { opacity: 1 !important; translate: none !important; }
  .mnav, .mnav-links li { opacity: 1 !important; transform: none !important; }
}
html.lite .kb, html.lite .ring-spin { animation: none; }
@media print { .lux-prog, .lux-ring, .marquee { display: none !important; } .ani, .wsplit .w > i { opacity: 1 !important; translate: none !important; transform: none !important; } }