/* =============================================================
   business-fixes.css
   Učitava se na SVIM stranicama, kao zadnji stylesheet.
   ============================================================= */

/* --- Čitljivost kartica iznad dekorativnih krugova -----------
   .hero.dark::after i .section.teal::after crtaju veliki koralni
   prsten IZA sadržaja. Kartice su staklene (bijela na 6–7%), pa
   prsten prolazi kroz njih i guta tekst — najgore natpis
   "ZAHTIJEVA PAŽNJU", koji je i sam u toplom tonu.
   Rješenje: kartice dobivaju vlastitu, dovoljno neprozirnu
   podlogu umjesto da se oslanjaju na pozadinu sekcije. */
.hero.dark .pulse,
.section.dark .decision-box,
.section.teal .decision-box {
  background: rgba(9, 13, 17, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .22);
}

.hero.dark .pulse-top,
.hero.dark .pulse-bottom {
  color: rgba(255, 255, 255, .72);
}

/* sadržaj sekcija uvijek iznad dekoracije */
.hero > .shell,
.section > .shell {
  position: relative;
  z-index: 1;
}

.hero.dark::after,
.section.teal::after {
  z-index: 0;
}

/* --- Sekcija "Direktor odlučuje" ----------------------------- */
.decision > .grid-3 { grid-template-columns: 1fr; min-width: 0; }

/* --- Kontakt obrazac — poruka o statusu slanja ---------------- */
.form-notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; font-size: .9rem; line-height: 1.45; }
.form-notice.error { background: #fdecec; border: 1px solid #e4b4b4; color: #7a2020; }
.form-notice.ok { background: #e8f5f3; border: 1px solid #a9d5cf; color: #14544e; }

/* =============================================================
   Video (facade — YouTube se učitava tek na klik)
   ============================================================= */
.vidwrap{margin-top:34px;max-width:1000px}
.vid{position:relative;border-radius:var(--radius,24px);overflow:hidden;background:#0f1419;
  aspect-ratio:16/9;cursor:pointer;border:1px solid rgba(255,255,255,.12)}
.section.white .vid,.section.paper .vid{border-color:var(--line)}
.vid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .3s}
.vid:hover img{transform:scale(1.02);opacity:.88}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer}
.vid-btn span{display:flex;align-items:center;justify-content:center;width:clamp(64px,7vw,92px);
  height:clamp(64px,7vw,92px);border-radius:50%;background:var(--coral,#f75a4d);
  box-shadow:0 12px 40px rgba(0,0,0,.35);transition:transform .25s ease}
.vid:hover .vid-btn span{transform:scale(1.07)}
.vid-btn svg{width:34%;height:34%;fill:#fff;margin-left:12%}
.vid-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:16px;
  padding:26px clamp(20px,3vw,34px);color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.28) 55%,transparent)}
.vid-cap b{font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.25;font-weight:800;letter-spacing:-.01em}
.vid-cap i{margin-left:auto;font-style:normal;font-size:.8rem;font-weight:800;letter-spacing:.06em;
  padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.16);white-space:nowrap}
.vid-note{margin-top:14px;color:var(--muted);font-size:.82rem}
.dark .vid-note,.teal .vid-note{color:rgba(247,243,237,.6)}
/* Na uskim zaslonima traka s naslovom pada preko naslova otisnutog na samoj
   sličici. Naslov je ondje već čitljiv, pa ga u traci skrivamo; trajanje ostaje. */
@media(max-width:600px){
  .vid-cap{padding:14px clamp(12px,4vw,18px);
    background:linear-gradient(to top,rgba(0,0,0,.55),transparent 70%)}
  .vid-cap b{display:none}
}

/* =============================================================
   Snimke zaslona proizvoda
   ============================================================= */
.shots{display:grid;gap:clamp(28px,4vw,52px);margin-top:56px}
.shots.two{grid-template-columns:repeat(2,1fr)}
.shot{margin:0}
.shot picture,.shot img{display:block;width:100%;height:auto}
.shot img{border-radius:16px;border:1px solid var(--line);background:#f5f2ec;
  box-shadow:0 22px 60px rgba(15,20,25,.13)}
.dark .shot img,.teal .shot img{border-color:rgba(255,255,255,.16);box-shadow:0 22px 60px rgba(0,0,0,.3)}
.shot figcaption{margin-top:18px;color:var(--muted);font-size:.95rem;line-height:1.55;max-width:52ch}
.shot figcaption b{display:block;color:var(--ink);font-weight:800;font-size:1.05rem;margin-bottom:5px}
.dark .shot figcaption,.teal .shot figcaption{color:rgba(247,243,237,.7)}
.dark .shot figcaption b,.teal .shot figcaption b{color:var(--ivory)}
@media(max-width:900px){.shots.two{grid-template-columns:1fr}}

/* --- Klik na snimku otvara je u punoj veličini ---------------- */
.shot button.shot-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  position:relative;border-radius:16px}
.shot button.shot-open:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.shot button.shot-open::after{content:"";position:absolute;inset:0;border-radius:16px;
  background:rgba(15,20,25,0);transition:background .25s ease}
.shot button.shot-open:hover::after{background:rgba(15,20,25,.06)}
.shot .zoom{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;background:rgba(15,20,25,.78);color:#fff;
  font-size:.74rem;font-weight:800;letter-spacing:.04em;opacity:0;transform:translateY(5px);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none;backdrop-filter:blur(6px)}
.shot button.shot-open:hover .zoom,.shot button.shot-open:focus-visible .zoom{opacity:1;transform:none}
.shot .zoom svg{width:13px;height:13px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}

.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,54px);background:rgba(9,13,17,.93);backdrop-filter:blur(10px)}
.lb[open],.lb.on{display:flex}
.lb img{max-width:100%;max-height:82vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.6);
  background:#f5f2ec}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:1500px}
.lb figcaption{color:rgba(247,243,237,.82);font-size:.95rem;text-align:center;max-width:62ch;line-height:1.5}
.lb figcaption b{display:block;margin-bottom:7px;color:#fff;font-weight:800;font-size:1.1rem}
.lb .x,.lb .nav{position:absolute;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
  border-radius:999px;cursor:pointer;transition:background .2s ease}
.lb .x:hover,.lb .nav:hover{background:rgba(255,255,255,.2)}
.lb .x{top:clamp(14px,2.5vw,26px);right:clamp(14px,2.5vw,26px);width:46px;height:46px;font-size:1.5rem;line-height:1}
.lb .nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.6rem;line-height:1}
.lb .prev{left:clamp(10px,2vw,24px)}
.lb .next{right:clamp(10px,2vw,24px)}
.lb .cnt{position:absolute;bottom:clamp(14px,2.5vw,26px);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.6);font-size:.78rem;font-weight:700;letter-spacing:.1em}
@media(max-width:700px){.lb .nav{width:42px;height:42px}.lb img{max-height:66vh}}
body.lb-open{overflow:hidden}