/* ==================================================================
   18) BIZNIS stranica (/biznis/, template-business.php + inc/48-business.php) — 2026-09-27
   Ucitava se SAMO na tom sablonu (inc/48). Sve pod #pf, klase pf-* (bez sudara sa temom/Bootstrap-om).
   Tamna petrolej pozadina; akcenat zlatni; u prikazu klijenta akcenat = boja klijenta (--c).
   Naslovi: tanko (300) + debelo zlatno (700) — namjerno NE serif kurziv kao pocetna / Why Choose Us.
   Header pluta preko heroja jer stranica ima fave_main_menu_trans = yes (css/02 sek.6).
   ================================================================== */
body.rs-biz #main-wrap{ padding-bottom:0 !important; }

#pf{--bg:#0d1d24;--bg2:#142c37;--card:#183542;--line:rgba(255,255,255,.09);--mut:rgba(255,255,255,.62);--gold:#f0c96c;--ac:var(--gold);
  background:var(--bg);color:#fff;font-family:inherit;position:relative;overflow:hidden;-webkit-font-smoothing:antialiased}
#pf *,#pf *:before,#pf *:after{box-sizing:border-box}
#pf a{color:inherit;text-decoration:none}
#pf button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#pf h1,#pf h2,#pf h3,#pf p{margin:0;color:inherit;font-family:inherit}
#pf .pf-wrap{width:min(1680px,calc(100% - 120px));margin:0 auto}
#pf .pf-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--ac);display:flex;align-items:center;gap:12px}
#pf .pf-eyebrow:before{content:'';width:28px;height:1px;background:currentColor}
#pf .pf-btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;border-radius:100px;font-weight:700;font-size:15px;transition:transform .25s,background .25s,box-shadow .25s,border-color .25s}
#pf .pf-btn-ac{background:var(--ac);color:#0d1d24;box-shadow:0 10px 30px -10px var(--ac)}
#pf .pf-btn-ac:hover{transform:translateY(-2px)}
#pf .pf-btn-gh{border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#pf .pf-btn-gh:hover{border-color:#fff;background:rgba(255,255,255,.1)}
#pf .pf-tri{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
#pf .pf-tags{display:flex;flex-wrap:wrap;gap:8px}
#pf .pf-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:7px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.88);background:rgba(13,29,36,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#pf .pf-swap{animation:pfIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes pfIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* naslovi: tanko + debelo zlatno */
#pf .pf-h1{font-size:clamp(54px,5.8vw,100px);line-height:.98;letter-spacing:-.045em;font-weight:300}
#pf .pf-h1 b{font-weight:700;display:block;color:var(--gold)}
#pf .pf-h1.pf-h1-client{font-weight:700;letter-spacing:-.04em}
#pf .pf-h2{font-size:clamp(36px,3.4vw,58px);letter-spacing:-.035em;font-weight:300;line-height:1.05}
#pf .pf-h2 b{font-weight:700;color:var(--gold)}
#pf.pf-client .pf-h2 b{color:var(--c)}

#pf .pf-band{padding:130px 0;border-top:1px solid var(--line)}
#pf .pf-band-head{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end;margin-bottom:64px}
#pf .pf-band-head .pf-eyebrow{margin-bottom:22px}

/* ===== HERO (ponuda) ===== */
#pf .pf-hero{position:relative;overflow:hidden;min-height:clamp(720px,100svh,1200px);display:flex;align-items:flex-end}
#pf .pf-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity 1.4s ease,transform 10s linear}
#pf .pf-bg.on{opacity:1;transform:scale(1)}
#pf .pf-hero:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,29,36,.94) 0%,rgba(13,29,36,.78) 38%,rgba(13,29,36,.25) 72%,rgba(13,29,36,.12) 100%),
             linear-gradient(180deg,rgba(13,29,36,.6) 0%,rgba(13,29,36,0) 24%,rgba(13,29,36,0) 62%,rgba(13,29,36,1) 100%)}
#pf .pf-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:end;padding:230px 0 100px}
#pf .pf-hero-copy{max-width:820px}
#pf .pf-hero-copy .pf-eyebrow{margin-bottom:26px}
#pf .pf-lead{margin-top:28px;font-size:20px;line-height:1.65;color:rgba(255,255,255,.86);max-width:600px}
#pf .pf-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
#pf .pf-proof{margin-top:54px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--mut)}
#pf .pf-proof button{color:#fff;font-weight:600;font-size:14px;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;transition:border-color .2s,color .2s}
#pf .pf-proof button:hover{border-color:var(--gold);color:var(--gold)}
#pf .pf-now{border-radius:16px;padding:18px;background:rgba(13,29,36,.5);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;overflow:hidden;display:block;text-align:left;width:100%}
#pf .pf-now small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:700}
#pf .pf-now b{display:block;font-size:20px;font-weight:700;margin-top:10px}
#pf .pf-now span{display:block;font-size:13.5px;color:var(--mut);margin-top:4px}
#pf .pf-now em{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:13px;font-weight:700;margin-top:16px;color:var(--c)}
#pf .pf-now i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--c)}
#pf .pf-now.run i{animation:pfBar var(--dur,8s) linear forwards}
#pf .pf-now:hover{border-color:rgba(255,255,255,.25)}
@keyframes pfBar{to{width:100%}}

/* ===== RADOVI (klijenti) ===== */
#pf .pf-chips{display:flex;flex-wrap:wrap;gap:8px}
#pf .pf-chip{height:40px;padding:0 18px;border-radius:100px;border:1px solid var(--line);font-size:14px;font-weight:600;color:rgba(255,255,255,.75);transition:.2s}
#pf .pf-chip:hover{border-color:rgba(255,255,255,.3);color:#fff}
#pf .pf-chip.on{background:#fff;color:#0d1d24;border-color:#fff}
#pf .pf-chip sup{font-size:10px;margin-left:4px;opacity:.6;top:-.5em}
#pf .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
#pf .pf-card{display:block;position:relative;border-radius:18px;overflow:hidden;background:var(--card);aspect-ratio:4/3;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;isolation:isolate}
#pf .pf-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
#pf .pf-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,29,36,0) 35%,rgba(13,29,36,.92) 100%);z-index:1}
#pf .pf-card:before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);z-index:3;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#pf .pf-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -25px rgba(0,0,0,.7)}
#pf .pf-card:hover img{transform:scale(1.06)}
#pf .pf-card:hover:before{transform:scaleX(1)}
#pf .pf-card-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px}
#pf .pf-card-meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c)}
#pf .pf-card h3{font-size:26px;letter-spacing:-.02em;font-weight:700;margin-top:8px;line-height:1.1}
#pf .pf-card .pf-tags{margin-top:16px}
#pf .pf-card .pf-tag{padding:5px 10px;font-size:10px}
/* „Prikazi jos (N)" — ograniceno 5 tel / 6 tablet / 9 racunar (JS u inc/48) */
#pf .pf-showmore{display:flex;align-items:center;justify-content:center;margin:40px auto 0;height:52px;padding:0 30px;border-radius:100px;border:1px solid rgba(255,255,255,.28) !important;font-size:15px;font-weight:700;color:#fff;transition:border-color .25s,background .25s}
#pf .pf-showmore:hover{border-color:var(--gold) !important;background:rgba(240,201,108,.08)}
#pf .pf-showmore[hidden]{display:none}

/* ===== KAKO RADIMO ===== */
#pf .pf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
#pf .pf-steps > div{padding:40px;border-radius:20px;background:var(--bg2);border:1px solid var(--line)}
#pf .pf-steps span{display:block;font-size:56px;font-weight:700;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(240,201,108,.7);line-height:1}
#pf .pf-steps h3{font-size:24px;font-weight:700;margin-top:30px;letter-spacing:-.02em}
#pf .pf-steps p{font-size:16px;line-height:1.65;color:var(--mut);margin-top:12px}

/* ===== KONTAKT ===== */
#pf .pf-cta{padding:130px 0 150px;border-top:1px solid var(--line);background:radial-gradient(60% 80% at 0% 100%,rgba(240,201,108,.08),transparent 70%)}
#pf .pf-cta-in{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
#pf .pf-cta .pf-eyebrow{margin-bottom:22px}
#pf .pf-cta-copy p{font-size:18px;line-height:1.7;color:var(--mut);margin-top:26px;max-width:520px}
#pf .pf-cta-direct{margin-top:44px;display:grid;gap:14px}
#pf .pf-cta-direct a{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:600;transition:color .2s}
#pf .pf-cta-direct a span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:700}
#pf .pf-cta-direct a:hover{color:var(--gold)}
#pf .pf-form{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;padding:44px;border-radius:24px;background:var(--bg2);border:1px solid var(--line)}
#pf .pf-form label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:700}
#pf .pf-form .full{grid-column:1/-1}
#pf .pf-form input,#pf .pf-form select,#pf .pf-form textarea{display:block;width:100%;margin-top:10px;background:transparent !important;border:0 !important;border-bottom:1px solid rgba(255,255,255,.2) !important;border-radius:0 !important;
  color:#fff !important;font:inherit;font-size:17px;padding:10px 0 !important;height:auto !important;box-shadow:none !important;outline:0;transition:border-color .25s}
#pf .pf-form select option{background:#142c37;color:#fff}
#pf .pf-form textarea{resize:vertical;min-height:90px}
#pf .pf-form input:focus,#pf .pf-form select:focus,#pf .pf-form textarea:focus{border-bottom-color:var(--gold) !important}
#pf .pf-form input::placeholder,#pf .pf-form textarea::placeholder{color:rgba(255,255,255,.35)}
#pf .pf-form input:focus::placeholder,#pf .pf-form textarea:focus::placeholder{color:transparent}  /* korisnik: objasnjenje nestaje dok je polje izabrano */
/* Chrome automatsko popunjavanje (pregled na hover + izabrano): njegova svijetla pozadina je !important u samom pregledacu,
   pa se prekriva unutrasnjom sjenom boje forme; slova ostaju bijela (-webkit-text-fill-color). color-scheme:dark = tamne sistemske boje. */
#pf .pf-form{color-scheme:dark}
#pf .pf-form input:-webkit-autofill,#pf .pf-form input:-webkit-autofill:hover,#pf .pf-form input:-webkit-autofill:focus,#pf .pf-form input:-webkit-autofill:active,
#pf .pf-form textarea:-webkit-autofill,#pf .pf-form select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #142c37 inset !important;box-shadow:0 0 0 1000px #142c37 inset !important;
  -webkit-text-fill-color:#fff !important;caret-color:#fff;transition:background-color 99999s ease-out 0s}
#pf .pf-form input:autofill,#pf .pf-form textarea:autofill,#pf .pf-form select:autofill{box-shadow:0 0 0 1000px #142c37 inset !important;-webkit-text-fill-color:#fff !important}
#pf .pf-form .pf-btn{justify-self:start}
#pf .pf-form.busy .pf-btn{opacity:.6;pointer-events:none}
#pf .pf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#pf .pf-form-msg{font-size:15px;min-height:1px;margin-top:-10px;color:var(--mut)}
#pf .pf-form-msg.ok{color:#8fd6a6}
#pf .pf-form-msg.err{color:#f19a8a}

/* ===== KLIJENT (#p/<slug>) ===== */
#pf.pf-client{--ac:var(--c)}
#pf .pf-chero{position:relative;overflow:hidden;min-height:clamp(640px,90svh,1040px);display:flex;align-items:flex-end}
#pf .pf-chero .pf-bg{opacity:1;transform:none;transition:none;animation:pfZoom 14s ease-out both}
@keyframes pfZoom{from{transform:scale(1.1)}to{transform:scale(1)}}
#pf .pf-chero:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,29,36,.94) 0%,rgba(13,29,36,.72) 38%,rgba(13,29,36,.1) 75%),
             linear-gradient(180deg,rgba(13,29,36,.6) 0%,rgba(13,29,36,0) 25%,rgba(13,29,36,0) 55%,var(--bg) 100%),
             radial-gradient(80% 60% at 0% 100%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%)}
#pf .pf-chero-in{position:relative;z-index:2;padding:220px 0 70px}
#pf .pf-back{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--mut);margin-bottom:42px;transition:color .2s}
#pf .pf-back:hover{color:#fff}
#pf .pf-back:before{content:'';width:18px;height:1px;background:currentColor}
#pf .pf-chero .pf-eyebrow{margin-bottom:22px}
#pf .pf-sub{margin-top:14px;font-size:18px;color:var(--mut)}
#pf .pf-sub b{color:#fff;font-weight:600}
#pf .pf-desc{margin-top:22px;font-size:18px;line-height:1.65;color:rgba(255,255,255,.84);max-width:520px}
#pf .pf-facts{display:flex;gap:0;margin-top:40px;border-top:1px solid var(--line);max-width:760px}
#pf .pf-fact{padding:20px 34px 0 0;margin-right:34px;border-right:1px solid var(--line)}
#pf .pf-fact:last-child{border:0}
#pf .pf-fact span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:700}
#pf .pf-fact b{display:block;margin-top:8px;font-size:17px;font-weight:600}
#pf .pf-tabs{position:sticky;top:0;z-index:20;background:rgba(13,29,36,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
#pf .pf-tabs .pf-wrap{display:flex;gap:6px;height:66px;align-items:stretch}
#pf .pf-tab{position:relative;padding:0 20px;font-size:15px;font-weight:600;color:var(--mut);transition:color .2s}
#pf .pf-tab:hover,#pf .pf-tab.on{color:#fff}
#pf .pf-tab.on:after{content:'';position:absolute;left:20px;right:20px;bottom:-1px;height:2px;background:var(--c)}
#pf .pf-panel{padding:56px 0 40px}
#pf .pf-sec{scroll-margin-top:90px;padding-bottom:70px}
#pf .pf-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px}
#pf .pf-sec-h h2{font-size:30px;letter-spacing:-.02em;font-weight:700}
#pf .pf-sec-h span{font-size:14px;color:var(--mut)}

/* 3D plejer: naslovna + dugme, tura se ucitava tek na klik */
#pf .pf-player{position:relative;border-radius:22px;overflow:hidden;background:#08141a;aspect-ratio:16/9;max-height:82svh;width:100%;box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px var(--line)}
#pf .pf-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .8s}
#pf .pf-player.live iframe{opacity:1}
#pf .pf-cover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;cursor:pointer;transition:opacity .7s,visibility .7s}
#pf .pf-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
#pf .pf-cover:before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(60% 70% at 50% 50%,rgba(13,29,36,.35),rgba(13,29,36,.8))}
#pf .pf-cover > *:not(img){position:relative;z-index:2}
#pf .pf-cover:hover img{transform:scale(1.06)}
#pf .pf-play{width:104px;height:104px;border-radius:50%;background:var(--c);color:#0d1d24;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 12px color-mix(in srgb,var(--c) 22%,transparent),0 20px 50px -10px rgba(0,0,0,.6);transition:transform .35s,box-shadow .35s}
#pf .pf-play .pf-tri{border-left-width:24px;border-top-width:15px;border-bottom-width:15px;margin-left:7px}
#pf .pf-cover:hover .pf-play{transform:scale(1.06);box-shadow:0 0 0 20px color-mix(in srgb,var(--c) 16%,transparent),0 20px 50px -10px rgba(0,0,0,.6)}
#pf .pf-cover h3{font-size:28px;font-weight:700;letter-spacing:-.02em}
#pf .pf-cover p{font-size:15px;color:rgba(255,255,255,.75)}
#pf .pf-player.live .pf-cover{opacity:0;visibility:hidden}
#pf .pf-load{position:absolute;left:0;top:0;height:3px;width:0;background:var(--c);z-index:3}
#pf .pf-player.loading .pf-load{animation:pfLoad 2.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pfLoad{to{width:85%}}
#pf .pf-bar{position:absolute;right:16px;top:16px;z-index:4;display:flex;gap:8px;opacity:0;visibility:hidden;transition:opacity .4s}
#pf .pf-player.live .pf-bar{opacity:1;visibility:visible}
#pf .pf-bar button,#pf .pf-bar a{height:40px;padding:0 16px;border-radius:100px;font-size:13px;font-weight:700;background:rgba(13,29,36,.72);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:inline-flex;align-items:center;color:#fff}
#pf .pf-bar button:hover,#pf .pf-bar a:hover{border-color:#fff}
#pf .pf-player.pf-fs{position:fixed;inset:0;z-index:999999;border-radius:0;max-height:none;aspect-ratio:auto}
#pf .pf-player:fullscreen{border-radius:0;max-height:none}

/* planovi / dron / video / foto */
#pf .pf-photos{columns:3;column-gap:16px}
#pf .pf-photos button{display:block;width:100%;margin-bottom:16px;border-radius:14px;overflow:hidden;break-inside:avoid}
#pf .pf-photos img{display:block;width:100%;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
#pf .pf-photos button:hover img{transform:scale(1.04)}
#pf .pf-drone{display:grid;grid-template-columns:2fr 1fr;gap:16px}
#pf .pf-drone button{border-radius:18px;overflow:hidden;aspect-ratio:16/10;display:block}
#pf .pf-drone button:first-child{grid-row:span 2;aspect-ratio:auto}
#pf .pf-drone button:only-child{grid-column:1/-1;aspect-ratio:16/9}
#pf .pf-drone img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
#pf .pf-drone button:hover img{transform:scale(1.04)}
#pf .pf-video{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#08141a;box-shadow:0 0 0 1px var(--line)}
#pf .pf-video iframe,#pf .pf-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
#pf .pf-lb{position:fixed;inset:0;z-index:999999;background:rgba(6,14,18,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s}
#pf .pf-lb.on{opacity:1;visibility:visible}
#pf .pf-lb img{max-width:92vw;max-height:88vh;border-radius:10px}
#pf .pf-lb button{position:absolute;top:24px;right:28px;height:44px;padding:0 20px;border-radius:100px;border:1px solid rgba(255,255,255,.25);font-weight:700;font-size:14px}

/* ostali klijenti + poziv */
#pf .pf-more{padding:100px 0 130px;border-top:1px solid var(--line)}
#pf .pf-more .pf-h2{margin-bottom:40px}
#pf .pf-more-cta{margin-top:70px;padding:50px;border-radius:24px;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
#pf .pf-more-cta h3{font-size:30px;font-weight:700;letter-spacing:-.02em}
#pf .pf-more-cta p{color:var(--mut);margin-top:8px;font-size:16px}
#pf .pf-more-cta .pf-btn-ac{--ac:var(--gold)}

@media (max-width:1100px){
  #pf .pf-hero-in{grid-template-columns:1fr;gap:40px}
  #pf .pf-now{max-width:420px}
  #pf .pf-grid{grid-template-columns:repeat(2,1fr)}
  #pf .pf-band-head,#pf .pf-cta-in{grid-template-columns:1fr;gap:30px}
  #pf .pf-steps{grid-template-columns:1fr}
}
@media (max-width:767px){
  #pf .pf-wrap{width:calc(100% - 32px)}
  #pf .pf-hero{min-height:auto}
  #pf .pf-hero-in{padding:150px 0 50px}
  #pf .pf-h1{font-size:clamp(40px,11vw,54px)}
  #pf .pf-lead,#pf .pf-desc{font-size:16px}
  #pf .pf-proof{margin-top:34px}
  #pf .pf-band{padding:80px 0}
  #pf .pf-band-head{margin-bottom:40px}
  #pf .pf-grid{grid-template-columns:1fr;gap:18px}
  #pf .pf-steps > div{padding:28px}
  #pf .pf-cta{padding:80px 0 100px}
  #pf .pf-form{grid-template-columns:1fr;padding:28px}
  #pf .pf-chero-in{padding:150px 0 50px}
  #pf .pf-facts{flex-wrap:wrap}
  #pf .pf-fact{padding-right:20px;margin-right:20px}
  #pf .pf-player{aspect-ratio:4/5}
  #pf .pf-photos{columns:2;column-gap:10px}
  #pf .pf-drone{grid-template-columns:1fr}
  #pf .pf-tabs .pf-wrap{overflow-x:auto;scrollbar-width:none}
  #pf .pf-more-cta{padding:30px}
}

/* 2026-09-28: hero manji na racunaru/tabletu (korisnik: „na biznis stranici je takodje ovo preveliko") — ~20% sve: naslov, tekst, dugmad, razmaci */
@media (min-width:768px){
  #pf .pf-hero .pf-h1{font-size:clamp(44px,4.4vw,76px)}
  #pf .pf-hero-in{padding:200px 0 80px}
  #pf .pf-hero-copy .pf-eyebrow{margin-bottom:20px}
  #pf .pf-hero .pf-lead{margin-top:22px;font-size:17px;max-width:540px}
  #pf .pf-hero .pf-actions{margin-top:32px;gap:12px}
  #pf .pf-hero .pf-btn{height:46px;padding:0 22px;font-size:14px}
  #pf .pf-hero .pf-proof{margin-top:40px;font-size:13px}
  #pf .pf-hero .pf-proof button{font-size:13px}
}

/* 2026-09-28: Nasi radovi + naslovi sekcija manji, da se uklope uz manji hero (korisnik: „i ovo izgleda ogromno") */
@media (min-width:768px){
  #pf .pf-h2{font-size:clamp(32px,2.7vw,46px)}
  #pf .pf-band{padding:100px 0}
  #pf .pf-grid{gap:20px}
  #pf .pf-card{aspect-ratio:3/2;border-radius:16px}
  #pf .pf-card-in{padding:20px 22px}
  #pf .pf-card-meta{font-size:11px}
  #pf .pf-card h3{font-size:21px;margin-top:6px}
  #pf .pf-card .pf-tags{margin-top:12px}
}

/* 2026-09-28 HERO smjena na telefonu/tabletu kocila na prvom prelazu (korisnik): slika ide kroz --bg / --bg-sm
   (template-business.php); do 1024px manja slika (1200px umjesto 2048), sloj unaprijed spreman (will-change). */
#pf .pf-hero .pf-bg{background-image:var(--bg);will-change:opacity,transform}
@media (max-width:1024px){ #pf .pf-hero .pf-bg{background-image:var(--bg-sm,var(--bg))} }

/* 2026-09-28 KAKO RADIMO — zivlje, bez slika (korisnik: „dosadno… modernije, animacija"; slike odbijene, brojevi ni prazni ni veliki).
   Koraci se pale redom (JS initSteps u inc/48): aktivna kartica se digne, po ivici kruzi tanka zlatna svjetlost, blag zlatni sjaj,
   broj (26px, pun) se odozdo napuni zlatom, linija na dnu mjeri vrijeme do sljedeceg. Kartice ulaze jedna za drugom. */
@property --pfa{syntax:'<angle>';inherits:false;initial-value:0deg}
#pf .pf-steps > div{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;transition:transform .7s cubic-bezier(.2,.8,.2,1),border-color .7s,opacity .8s}
#pf .pf-steps > div::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--pfa),transparent 0 55%,rgba(240,201,108,.9) 78%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .7s;pointer-events:none}
#pf .pf-steps > div::after{content:'';position:absolute;z-index:-1;left:-20%;top:-40%;width:90%;height:110%;background:radial-gradient(closest-side,rgba(240,201,108,.13),transparent);opacity:0;transition:opacity .9s;pointer-events:none}
#pf .pf-steps > div.on{transform:translateY(-6px);border-color:transparent}
#pf .pf-steps > div.on::before{opacity:1;animation:pfSpin 3.2s linear infinite}
#pf .pf-steps > div.on::after{opacity:1}
@keyframes pfSpin{to{--pfa:360deg}}
#pf .pf-steps span{font-size:26px;font-weight:500;letter-spacing:-.01em;-webkit-text-stroke:0;color:transparent;background:linear-gradient(0deg,#f0c96c 50%,rgba(255,255,255,.28) 50%);background-size:100% 200%;background-position:0 0;-webkit-background-clip:text;background-clip:text}
#pf .pf-steps > div.on span{animation:pfFill 1.3s cubic-bezier(.6,0,.2,1) forwards}
@keyframes pfFill{from{background-position:0 0}to{background-position:0 100%}}
#pf .pf-steps h3{margin-top:20px}
#pf .pf-steps p{transition:color .6s}
#pf .pf-steps > div.on p{color:rgba(255,255,255,.82)}
#pf .pf-steps i.pf-sb{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#d9aa4f,#f0c96c);box-shadow:0 0 12px rgba(240,201,108,.6)}
#pf .pf-steps > div.on i.pf-sb{animation:pfSb var(--sd,4800ms) linear forwards}
@keyframes pfSb{to{width:100%}}
#pf .pf-steps.pre > div{opacity:0;transform:translateY(26px)}

#pf .pf-steps.in > div:nth-child(2){transition-delay:.12s}#pf .pf-steps.in > div:nth-child(3){transition-delay:.24s}

/* 2026-09-28 zlatna dugmad bez zlatnog sjaja (korisnik: „ovaj sjaj je tezak za oci") — samo blaga tamna sjena */
#pf .pf-btn-ac{box-shadow:0 8px 18px -10px rgba(0,0,0,.55)}

/* 2026-09-28 TAMNA TEMA — pravilo za sajt: pozadina ista tamna plava kao ostatak sajta, sekcije odvojene zlatnom linijom */
html.rs-dark #pf{--bg:#07111c}
html.rs-dark #pf .pf-band,
html.rs-dark #pf .pf-cta{border-top:1px solid transparent;border-image:linear-gradient(90deg,rgba(217,170,79,0),rgba(217,170,79,.55) 50%,rgba(217,170,79,0)) 1}