/* ═══════════════════════════════════════════════════════════════════════
   BOKA ACADEMY · naslovni hero
   Ilustrovana krem scena: Boka dolje, fotografija u luku desno,
   sunce, zmaj i bilje okolo. Navigacija i copy ostaju isti.
   ═══════════════════════════════════════════════════════════════════════ */

.nhero{--maxw:1120px;
  position:relative; isolation:isolate; overflow:hidden; margin-bottom:-1px;
  background:linear-gradient(176deg, var(--krecnjak) 0%, #FBF6EC 46%, var(--pijesak) 100%);
  min-height:100svh; display:flex; flex-direction:column;
  padding:clamp(100px,11.5vh,138px) 0 0;
  --wave:clamp(76px,8.4vw,132px);
  --mx:0; --my:0; --sy:0}
/* :first-of-type je hvatao .hl-brdo (i on je div), pa je kolona sa sadržajem
   ostajala uža od trake sa brojkama ispod. Sad ima svoju klasu. */
.nhero-main{flex:1 1 auto; display:flex; align-items:center; width:100%}
.nhero > .nhero-proof{flex:0 0 auto}

/* papirna tekstura */
.nhero::before{content:""; position:absolute; inset:0; z-index:0; 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='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}

/* Bina za ukrase: prati kolonu sa sadržajem, sa malo prelivanja u stranu.
   Bez nje bi na širokom ekranu sunce i lišće ostajali prilijepljeni uz
   ivicu prozora, daleko od teksta. */
.hl-stage{position:absolute; top:0; bottom:0; left:0; right:0;
  width:min(100%, calc(var(--maxw) + 2 * clamp(20px, 7vw, 190px)));
  margin-inline:auto; pointer-events:none; z-index:0}

/* ── slojevi ukrasa ──────────────────────────────────────────────────── */
.hl{position:absolute; z-index:0; pointer-events:none; line-height:0;
  transform:translate3d(calc(var(--mx) * var(--px, 0px) + var(--sy) * var(--spx, 0px)),
                        calc(var(--my) * var(--py, 0px) + var(--sy) * var(--sp, 0px)), 0);
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hl > img, .hl > svg{display:block; width:100%; height:auto}
.hl-front{z-index:3}

/* unutrašnji element nosi vlastito kretanje, da ne gazi parallax */
@keyframes hFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(calc(var(--amp,10px) * -1)) rotate(calc(var(--r,0deg) + var(--tw,2deg)))}}
@keyframes hSway{0%,100%{transform:rotate(calc(var(--r,0deg) - 6deg))}
  50%{transform:rotate(calc(var(--r,0deg) + 6deg))}}
@keyframes hTwinkle{0%,100%{transform:scale(1) rotate(var(--r,0deg)); opacity:.85}
  50%{transform:scale(1.18) rotate(calc(var(--r,0deg) + 14deg)); opacity:1}}
@keyframes hDrift{0%{transform:translateX(0)} 100%{transform:translateX(var(--dx,40px))}}
@keyframes hTurn{to{transform:rotate(360deg)}}
@keyframes hBreathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
@keyframes hSail{0%{transform:translateX(0) rotate(-3deg)}
  50%{transform:translateX(var(--dx,240px)) rotate(3deg)}
  100%{transform:translateX(0) rotate(-3deg)}}

.a-float > *{animation:hFloat var(--dur,7s) ease-in-out infinite var(--dl,0s)}
.a-sway > *{transform-origin:50% 6%; animation:hSway var(--dur,5s) ease-in-out infinite var(--dl,0s)}
.a-twinkle > *{animation:hTwinkle var(--dur,3.6s) ease-in-out infinite var(--dl,0s)}
.a-drift > *{animation:hDrift var(--dur,26s) ease-in-out infinite alternate var(--dl,0s)}
.a-turn > *{transform-origin:50% 50%; animation:hTurn var(--dur,60s) linear infinite}
.a-breathe > *{animation:hBreathe var(--dur,5.4s) ease-in-out infinite var(--dl,0s)}
.a-sail > *{animation:hSail var(--dur,34s) ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .hl{transition:none}
  .a-float > *, .a-sway > *, .a-twinkle > *, .a-drift > *,
  .a-turn > *, .a-breathe > *, .a-sail > *{animation:none}
}

/* pojedinačne pozicije */
/* Boka uokviruje hero s obje strane: obala lijevo, zrcaljena obala desno,
   a između njih otvoreno more. Gornja ivica se gubi u papir. */
/* sredina zaliva: pločica otvorene vode iz iste ilustracije, zrcaljena
   pa se ponavlja bez šava. Ista visina i ista razmjera kao obale sa strane. */
/* Zaliv je jedna zrcaljena panorama koja se ponavlja bez šava — prije su
   bile tri slike pa su se na spojevima vidjeli pravougaoni rezovi. */
.hl-zaliv{left:0; right:0; bottom:0; width:100%;
  height:clamp(260px,40vh,480px); z-index:0;
  background:url("../img/hero/h-zaliv.webp") center bottom / auto 100% repeat-x;
  --px:-10px; --sp:-130px;
  /* utapa se i na vrhu (u papir) i na dnu (u pjenu donje sekcije) */
  -webkit-mask-image:linear-gradient(to top, transparent 0, rgba(0,0,0,.55) 7%, #000 17%,
                     #000 62%, rgba(0,0,0,.6) 86%, transparent 100%);
  mask-image:linear-gradient(to top, transparent 0, rgba(0,0,0,.55) 7%, #000 17%,
             #000 62%, rgba(0,0,0,.6) 86%, transparent 100%)}

.hl-brdo{left:0; right:0; bottom:0; width:100%; z-index:0}
.hl-brdo svg{width:100%; height:auto}
.hl-jedro{left:62%; bottom:clamp(40px,4.8vh,64px); z-index:2; width:clamp(30px,3.2vw,50px);
  --px:-26px; --sp:-118px; --dx:180px}
.hl-bilje-l, .hl-bilje-d{
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 13%);
  mask-image:linear-gradient(to top, transparent 0, #000 13%)}
.hl-bilje-l{left:-3%; bottom:-1%; width:clamp(190px,21vw,310px); z-index:4;
  --px:24px; --py:10px; --sp:44px; --spx:-118%}
.hl-bilje-d{right:-3%; bottom:-2%; width:clamp(200px,23vw,340px); z-index:4;
  --px:-24px; --py:10px; --sp:44px; --spx:118%}
.hl-grana-a{left:-7%; top:-3%; width:clamp(135px,15vw,225px); transform-origin:0 0;
  --px:26px; --py:14px; --sp:-30px}
.hl-grana-a img{transform:rotate(148deg)}
.hl-grana-b{right:34%; top:8%; width:clamp(110px,12vw,180px); z-index:3;
  --px:-20px; --py:-12px; --sp:-24px}
.hl-grana-b img{transform:rotate(-24deg)}
.hl-sunce{right:2%; top:clamp(88px,11vh,124px); width:clamp(92px,11vw,158px); z-index:2;
  --px:-34px; --py:-20px; --sp:-70px}
.hl-zmaj{right:22%; top:clamp(82px,10vh,118px); width:clamp(52px,5.4vw,78px); z-index:3;
  --px:-42px; --py:-26px; --sp:-92px; --r:4deg; --dur:4.6s}
.hl-trag{right:24%; top:clamp(120px,14vh,168px); width:clamp(120px,14vw,200px); z-index:2;
  opacity:.55; --px:-38px; --py:-22px; --sp:-84px}
.hl-oblak-a{left:30%; top:clamp(92px,12vh,140px); width:clamp(72px,8vw,118px); opacity:.85;
  --px:-18px; --sp:-44px; --dx:46px; --dur:30s}
.hl-oblak-b{right:38%; top:clamp(170px,22vh,250px); width:clamp(54px,6vw,86px); opacity:.6;
  --px:-12px; --sp:-30px; --dx:-34px; --dur:38s}
.hl-zvj-a{left:24%; top:clamp(112px,14vh,164px); width:clamp(15px,1.7vw,24px);
  --px:-22px; --sp:-56px; --r:-10deg}
.hl-zvj-b{right:14%; top:clamp(190px,24vh,280px); width:clamp(12px,1.3vw,19px);
  --px:-28px; --sp:-64px; --r:12deg; --dur:4.4s; --dl:.7s}
.hl-zraci{left:calc(50% - 90px); top:clamp(150px,19vh,230px); width:clamp(40px,4.4vw,64px);
  z-index:3; opacity:.9; --px:-16px; --sp:-40px}
.hl-srce{left:4%; top:clamp(300px,38vh,420px); width:clamp(22px,2.4vw,34px); color:var(--duboko);
  opacity:.5; --px:18px; --sp:-26px}

/* ── sadržaj ─────────────────────────────────────────────────────────── */
.nhero-in{position:relative; z-index:5; width:100%; flex:1 1 auto; display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(24px,3.6vw,56px); align-items:center}

.nhero-copy{position:relative}
.nh-eyebrow{font-size:.74rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--kamen)}
.nhero .hero-h1{margin:12px 0 0; max-width:17ch; text-align:left; color:var(--noc);
  font-size:clamp(1.95rem,3.55vw,2.95rem); line-height:1.06; letter-spacing:-.02em;
  text-shadow:none}
.nhero .hero-h1 em{display:block; margin-top:12px; font-family:var(--akc, Georgia, serif);
  font-style:italic; font-weight:400; color:var(--duboko);
  font-size:.46em; line-height:1.28; letter-spacing:-.005em; max-width:34ch}
.nhero .hero-sub{margin:clamp(12px,1.5vw,18px) 0 0; max-width:48ch; text-align:left;
  font-size:clamp(.9rem,.97vw,.98rem); line-height:1.62; color:var(--kamen);
  text-shadow:none}
.nhero .hero-cta{justify-content:flex-start; margin-top:clamp(18px,2.4vw,30px)}
.nhero .hero-note{margin:clamp(12px,1.6vw,18px) 0 0; max-width:46ch; text-align:left;
  font-size:.8rem; color:var(--kamen); text-shadow:none}

/* dugmad u svijetlom herou */
.nhero .btn-primary{background:var(--brand-plate); color:var(--pijesak);
  box-shadow:0 4px 0 var(--sunce)}
.nhero .btn-primary:hover{box-shadow:0 6px 0 var(--sunce)}
.nhero .btn-primary:active{box-shadow:0 2px 0 var(--sunce)}
.nhero .btn-ghost{color:var(--noc)}
.nhero .btn-ghost::after{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.6'/%3E%3C/svg%3E")}

/* ── fotografija u luku ──────────────────────────────────────────────── */
@media (min-width:921px){
  .nfig{margin-left:auto; margin-right:0; max-width:none}
}
.nfig{position:relative; width:100%; margin-inline:auto; aspect-ratio:1000/900}
.nfig-blob{position:absolute; z-index:0; pointer-events:none}
.nfig-blob.pe{left:-14%; top:6%; width:62%; opacity:.9}
.nfig-blob.sa{right:-10%; bottom:2%; width:48%; opacity:.55}
.nfig-in{position:absolute; inset:0; z-index:1;
  clip-path:path("M0.01500 1.00000L0.01500 0.72667C-0.00200 0.55778 0.06900 0.40778 0.17600 0.33556C0.26100 0.27333 0.30000 0.16111 0.42800 0.10667C0.53500 0.05556 0.65100 0.01444 0.79200 0.06778C0.91300 0.10111 0.99300 0.18889 0.99000 0.32556L0.99000 1.00000Z");
  clip-path:url(#bokaArc)}
.nfig-in img{width:100%; height:100%; object-fit:cover; object-position:54% 38%; display:block;
  transition:transform 2s cubic-bezier(.16,.7,.2,1)}
.nfig:hover .nfig-in img{transform:scale(1.04)}
.nfig-frame{position:absolute; inset:0; z-index:2; pointer-events:none}
.nfig-frame svg{width:100%; height:100%; display:block}

/* Kolaž u herou: izrez koji nosi svoj okvir.
   Nema luka, bijele linije ni mrlja iza njega - fotografija ih već ima u sebi,
   pa bi se udvostručile. Ostaje ulazak i blagi zum na hover. Pravila iznad
   ostaju netaknuta, za slučaj da se vrati klasična fotografija u luku. */
.nfig-cut{aspect-ratio:1100/815}
.nfig-cut img{position:relative; z-index:1; width:100%; height:auto; display:block;
  filter:drop-shadow(0 24px 30px rgba(4,18,15,.20));
  transition:transform 1.6s cubic-bezier(.16,.7,.2,1)}
.nfig-cut:hover img{transform:scale(1.03)}

/* ulazak fotografije */
.js .nfig{opacity:0; transform:translateY(26px) scale(.97)}
.js .anim-in .nfig, .js .nhero.anim-in .nfig{opacity:1; transform:none;
  transition:opacity .9s var(--ease) .35s, transform 1.1s cubic-bezier(.2,.9,.25,1) .35s}

/* ── traka sa brojkama ───────────────────────────────────────────────── */
.nhero-proof{position:relative; z-index:6;
  padding-top:clamp(18px,2.6vh,36px);
  padding-bottom:calc(var(--wave) + clamp(14px,2vh,26px))}
.nproof{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(4px,1vw,14px); padding:clamp(16px,2vw,24px) clamp(10px,1.6vw,22px);
  /* bez backdrop-filtera: pri skrolu je ostavljao sivu mrlju preko zaliva */
  background:linear-gradient(180deg, rgba(255,252,246,.97), rgba(255,252,246,.9));
  border:1px solid rgba(23,50,46,.08); border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(6,26,22,.06),
             0 22px 44px -26px rgba(6,26,22,.4)}
.npf{display:flex; align-items:center; gap:clamp(9px,1.1vw,15px); padding:0 clamp(6px,1vw,14px);
  min-width:0}
.npf + .npf{border-left:1px solid var(--linija)}
.npf-ico{flex:0 0 auto; width:clamp(42px,4.6vw,62px)}
.npf-ico img{width:100%; height:auto; display:block}
.npf-n{font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(1.5rem,2.4vw,2.05rem); color:var(--noc)}
.npf-l{margin-top:3px; font-size:clamp(.72rem,.82vw,.82rem); line-height:1.36; color:var(--kamen)}

/* ── talas unutar heroja: pjena donje sekcije penje se preko mora ──── */
.nherosep{position:absolute; left:0; right:0; bottom:0; z-index:1; height:var(--wave);
  line-height:0; overflow:hidden; pointer-events:none}
.nherosep svg{display:block; width:200%; height:100%}
.nherosep .w-far path{fill:var(--zaliv-soft); opacity:.45}
.nherosep .w-back path{fill:var(--zaliv-soft); opacity:.75}
.nherosep .w-front path{fill:var(--zaliv-soft)}
.nherosep .w-far{animation:drift 44s linear infinite}
.nherosep .w-back{animation:drift 27s linear infinite reverse}
.nherosep .w-front{animation:drift 18s linear infinite}
@media (prefers-reduced-motion:reduce){ .nherosep g{animation:none} }

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .hl-grana-b, .hl-oblak-b, .hl-zvj-b, .hl-srce{display:none}
  .hl-zmaj{right:16%}
  .hl-trag{right:18%}
}
@media (max-width:900px){
  .nhero{padding-top:clamp(94px,11.5vh,120px)}
  .nhero-in{grid-template-columns:1fr; gap:clamp(18px,3vw,26px)}
  .nhero .hero-h1{max-width:17ch; font-size:clamp(1.9rem,7vw,2.6rem); margin-top:10px}
  .nhero .hero-sub{max-width:52ch}
  .nfig{max-width:460px; margin-inline:auto}
  .hl-zaliv{height:clamp(190px,27vh,270px)}
  .hl-bilje-l{width:min(42vw,220px)}
  .hl-bilje-d{width:min(44vw,230px)}
  .hl-sunce{right:2%; top:clamp(72px,9vh,98px); width:clamp(66px,13vw,92px)}
  .hl-zmaj{right:30%; top:clamp(64px,8vh,86px); width:clamp(40px,7.4vw,54px)}
  .nhero .nh-eyebrow{padding-right:104px}
  .hl-trag, .hl-oblak-a, .hl-zvj-a, .hl-zraci, .hl-grana-a{display:none}
  .nproof{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .npf + .npf{border-left:0}
  .npf:nth-child(3), .npf:nth-child(4){border-top:1px solid var(--linija); padding-top:14px}
  .npf:nth-child(even){border-left:1px solid var(--linija)}
}
@media (max-width:620px){
  .nhero .hero-cta{flex-direction:column; align-items:stretch}
  .nhero .hero-cta .btn{width:100%; justify-content:center}
  .nfig{max-width:none}
  .hl-jedro{left:30%; bottom:16%}
}
@media (max-width:470px){
  .nproof{grid-template-columns:1fr; padding:14px 16px}
  .npf{padding:0}
  .npf + .npf{border-left:0; border-top:1px solid var(--linija); padding-top:13px}
  .npf:nth-child(even){border-left:0}
  .npf:nth-child(3), .npf:nth-child(4){padding-top:13px}
  .hl-bilje-l, .hl-bilje-d{width:150px; opacity:.9}
}

/* ── niži desktop ekrani (MacBook): hero mora da stane u jedan ekran ── */
@media (min-width:901px) and (max-height:900px){
  .hl-jedro{width:34px; left:66%; bottom:clamp(34px,4.2vh,50px)}
  .nhero{padding-top:clamp(96px,12vh,120px); --wave:clamp(42px,4.2vw,64px)}
  .nhero .hero-h1{font-size:clamp(1.8rem,3.05vw,2.5rem)}
  .nhero .hero-h1 em{margin-top:9px}
  .nhero .hero-sub{margin-top:10px; font-size:.9rem; line-height:1.54}
  .nhero .hero-cta{margin-top:15px; gap:10px}
  .nhero .hero-cta .btn-primary{padding-left:20px; padding-right:20px}
  .nhero .hero-cta .btn{font-size:.92rem}
  .nhero .hero-note{margin-top:11px; font-size:.76rem}
  
  .nhero-proof{padding-top:12px; padding-bottom:calc(var(--wave) + 12px)}
  .npf-ico{width:clamp(36px,3.4vw,48px)}
  .npf-n{font-size:clamp(1.35rem,2vw,1.8rem)}
  .npf-l{font-size:.72rem; line-height:1.32}
  .hl-zaliv{height:clamp(235px,34vh,380px)}
}
@media (min-width:901px) and (max-height:760px){
  .nhero{padding-top:clamp(88px,11vh,100px); --wave:clamp(38px,3.8vw,56px)}
  .nhero .hero-h1{font-size:clamp(1.7rem,2.8vw,2.3rem)}
  .nhero-proof{padding-top:10px; padding-bottom:calc(var(--wave) + 10px)}
  .hl-zaliv{height:clamp(205px,30vh,320px)}
  .nhero .hero-sub{margin-top:9px; font-size:.86rem; line-height:1.5}

}


/* ── široki ekrani: kolona se širi da sadržaj ne pliva u praznini ────── */
/* šira kolona samo kad ekran ima i širinu i visinu; na MacBooku
   (1512x790) ostaje 1120, jer se inače sadržaj penje pod navigaciju */
@media (min-width:1500px) and (min-height:900px){
  .nhero .hero-h1{font-size:clamp(2.2rem,2.4vw,3.1rem)}

}
@media (min-width:1800px) and (min-height:940px){

}

/* ── telefon: zbijeniji hero ─────────────────────────────────────────── */
@media (max-width:760px){
  /* Dvije etikete traže ~415 px, a na 390 ih ima 354 — u jednom redu bi
     tipografija pala na 12 px. Zato je sekundarni kompaktan link ispod
     primarnog dugmeta; puni red se uključuje tek kad stvarno stane. */
  .nhero .hero-cta{flex-direction:row; align-items:center; flex-wrap:nowrap;
    gap:12px; margin-top:18px}
  .nhero .hero-cta .btn{width:auto; flex:0 0 auto}
  .nhero .hero-cta .btn-primary{padding:13px 17px; font-size:.91rem}
  .nhero .hero-cta .btn-ghost{padding:13px 0; font-size:.89rem; white-space:nowrap}

  /* podnaslov: slobodan prelom, bez zapečenih redova */
  .nhero .hero-sub{margin-top:14px; font-size:.93rem; line-height:1.55;
    max-width:none; text-wrap:pretty}

  /* nadnaslov ne smije pod zmaja i sunce */
  .nhero .nh-eyebrow{padding-right:84px}
  .hl-sunce{top:clamp(58px,7vh,78px); width:clamp(58px,12vw,82px)}
  .hl-zmaj{top:clamp(50px,6vh,68px); right:32%}

  /* bilje izlazi iz kadra ranije */
  .hl-bilje-l{--spx:-190%}
  .hl-bilje-d{--spx:190%}

  /* zaliv i sljedeća sekcija se preklapaju — nema praznog pojasa između */
  .nhero{margin-bottom:calc(-1 * var(--wave) * .58)}
  .nhero-proof{padding-top:clamp(12px,2vh,20px); padding-bottom:calc(var(--wave) + 4px)}
  .hl-zaliv{height:clamp(178px,25vh,240px)}
}
@media (max-width:400px){
  .nhero .hero-cta{gap:10px}
  .nhero .hero-cta .btn-primary{padding:12px 14px; font-size:.86rem}
  .nhero .hero-cta .btn-ghost{font-size:.84rem}
}

/* Na uskim telefonima (≤379 px) dvije etikete traže više nego što red ima,
   pa sekundarni ide ispod kao kompaktan link. */
@media (max-width:379px){
  .nhero .hero-cta{flex-direction:column; align-items:flex-start; gap:6px}
  .nhero .hero-cta .btn-primary{padding:13px 18px; font-size:.9rem}
  .nhero .hero-cta .btn-ghost{padding:6px 0; font-size:.9rem}
}