/* Public Sans 5.3.0 (SIL OFL 1.1, assets/fonts/PUBLIC-SANS-OFL.txt), variable weight, served locally instead of Google Fonts. */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-sans-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-sans-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Frontend Design version (dlg_0a113d86): blue harbour direction from ops/five/shared/owner-blue-harbour-reference.png.
   Sea-blue photo hero, white type, one yellow action colour, then white and cool limestone sections with brand-green headings. */
:root{
  --sea:#062b4f;--sea-2:#0c4a80;--green:#184834;--sun:#ffd21a;--white:#fff;--stone:#eef2f4;
  --ink:#0f2233;--muted:#4b5d6c;--line:#d3dce3;--line-d:rgba(255,255,255,.22);
  --font:'Public Sans',Arial,sans-serif;
  --m:clamp(16px,3.4vw,56px);--max:1280px;
  --step:clamp(17px,1.15vw,18px);--lead:clamp(19px,1.6vw,23px);
  --h2:clamp(36px,4.6vw,66px);--h1:clamp(50px,7.4vw,112px);
  --sec:clamp(72px,9vw,136px);--r:12px;
  --dbk-bg:#fff;--dbk-ink:#0f2233;--dbk-muted:#4b5d6c;--dbk-accent:#ffd21a;--dbk-accent-ink:#062b4f;--dbk-line:#b9c6d0;
  --dbk-radius:12px;--dbk-font:'Public Sans',Arial,sans-serif;--dbk-display:'Public Sans',Arial,sans-serif
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--step)/1.6 var(--font);font-kerning:normal;overflow-x:clip}
img{display:block;max-width:100%;height:auto}picture{display:contents}
h1,h2,h3,p,figure,blockquote,ol,ul,dl,dd{margin:0}ol,ul{padding:0;list-style:none}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.wrap{width:calc(100% - var(--m)*2);max-width:var(--max);margin-inline:auto}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;background:var(--sun);color:var(--sea);font-weight:700;border-radius:8px}.skip:focus{top:12px}

h2{font-weight:800;font-size:var(--h2);line-height:1;letter-spacing:-.032em;color:var(--green);text-wrap:balance}
h3{font-weight:800;font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.01em}
.lead{font-size:var(--lead);line-height:1.45;color:var(--ink);max-width:36ch}
p{max-width:62ch}p+p{margin-top:1em}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:14px 24px;border:2px solid transparent;border-radius:8px;font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;transition:background-color .18s,border-color .18s,color .18s,transform .12s}
.btn span{font-size:1.05em}
.btn:active{transform:translateY(1px)}
.btn-sun{background:var(--sun);color:var(--sea)}.btn-sun:hover{background:#ffe066}
.btn-line{background:transparent;color:var(--white);border-color:rgba(255,255,255,.75)}.btn-line:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.btn-ink{background:var(--sea);color:var(--white)}.btn-ink:hover{background:var(--sea-2)}
.btn-sm{min-height:44px;padding:9px 16px;font-size:15px}
.link{display:inline-flex;gap:10px;align-items:center;padding:6px 0;border:0;border-bottom:2px solid currentColor;background:none;font-weight:700;color:var(--sea);text-decoration:none}
.link:hover{color:var(--sea-2)}.link-light{color:var(--white)}.link-light:hover{color:var(--sun)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{padding:4px 10px;border-radius:6px;background:#fff4bf;color:var(--sea);font-size:14px;font-weight:700;line-height:1.3}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:40;color:var(--white);transition:background-color .25s,box-shadow .25s}
.top.solid{background:var(--sea);box-shadow:0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(3,20,40,.25)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.brand{display:block;flex:none;width:clamp(150px,13vw,190px)}
/* white logo from Astra dlg_ed291130 replaces the former CSS knockout */
#nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);font-size:15px;font-weight:500}
#nav a{text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
#nav a:hover{border-bottom-color:var(--sun)}
.menu{display:none}

/* hero */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:max(720px,min(100svh,940px));padding:120px 0 40px;color:var(--white);background:var(--sea)}
.hero-photo img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 78%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,30,58,.6) 0%,rgba(4,30,58,0) 24%),
    linear-gradient(0deg,rgba(4,30,58,.7) 0%,rgba(4,30,58,0) 34%),
    linear-gradient(90deg,rgba(4,30,58,.94) 0%,rgba(5,36,68,.82) 30%,rgba(6,43,79,.3) 60%,rgba(6,43,79,0) 78%),
    rgba(6,43,79,.14)}
.hero-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:clamp(32px,5vh,64px)}
.hero-org{font-size:15px;font-weight:500;color:rgba(255,255,255,.82);margin-bottom:18px}
h1{font-weight:900;font-size:var(--h1);line-height:.94;letter-spacing:-.045em}
h1 span{display:block}
.hero-claim{margin-top:26px;font-size:clamp(21px,2vw,28px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.hero-sub{margin-top:10px;max-width:46ch;font-size:clamp(16px,1.2vw,18px);color:rgba(255,255,255,.86)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:32px}
.status-wrap{position:relative}
.status{display:grid;grid-template-columns:auto auto 1fr;background:var(--white);color:var(--ink);border-radius:var(--r);box-shadow:0 24px 60px rgba(3,20,40,.32)}
.cell{display:flex;align-items:center;gap:16px;padding:20px clamp(18px,2.4vw,34px)}
.cell+.cell{border-left:1px solid var(--line)}
.ico{width:30px;height:30px;flex:none;fill:none;stroke:var(--sea);stroke-width:1.7;stroke-linecap:round}
.croc{width:52px;height:auto;flex:none}
.cell-l{display:block;font-size:14px;color:var(--muted);line-height:1.3}
.cell-n{display:block;font-size:clamp(28px,2.6vw,36px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--sea);font-variant-numeric:tabular-nums}
.cell-src .cell-l{color:var(--ink);font-weight:700;font-size:15px}
.cell-s{font-size:14px;color:var(--muted);line-height:1.4;margin-top:3px;max-width:none}
.dot{flex:none;width:10px;height:10px;border-radius:50%;background:#8a99a6;align-self:flex-start;margin-top:6px}
[data-dbk-live][data-state=live] .dot{background:#1f9d55;box-shadow:0 0 0 0 rgba(31,157,85,.5);animation:ping 2.4s ease-out infinite}
[data-dbk-live][data-state=stale] .dot{background:#d99a00}

/* udruga + range */
.udruga{padding:var(--sec) 0}
.udruga-in{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(40px,6vw,96px);align-items:center}
.udruga-copy h2{font-size:clamp(42px,4.8vw,72px);margin-bottom:28px}
.udruga-copy .lead{margin-bottom:18px}
.mission{margin:26px 0 30px;padding-left:18px;border-left:4px solid var(--sun);font-weight:700;font-size:var(--lead);line-height:1.35;color:var(--sea)}
.range{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:end}
.pack-img{overflow:hidden;border-radius:var(--r);background:var(--stone);aspect-ratio:1122/1402}
.pack-img img{width:100%;height:100%;object-fit:cover}
.pack figcaption{display:flex;flex-direction:column;gap:8px;padding-top:14px}
.pack figcaption strong{font-size:clamp(17px,1.4vw,21px);font-weight:800;color:var(--green);letter-spacing:-.01em}
.pack-mega .pack-img{box-shadow:0 30px 60px rgba(6,43,79,.18)}

/* split heading rows */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px);align-items:start}
.zasto{padding:0 0 var(--sec)}
.zasto .split{padding-top:var(--sec);border-top:1px solid var(--line)}
.pull{margin-top:28px;font-weight:800;font-size:var(--lead);line-height:1.35;color:var(--green)}

/* results ledger */
.rezultati{padding:var(--sec) 0;background:var(--stone)}
.ledger{margin-top:clamp(40px,5vw,72px);border-top:2px solid var(--sea)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px);align-items:baseline;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid #c3ced7}
.row dt{display:flex;flex-direction:column;gap:10px}
.fig{font-size:clamp(48px,5.4vw,80px);font-weight:900;line-height:.9;letter-spacing:-.04em;color:var(--sea);font-variant-numeric:tabular-nums}
.row dt span{font-weight:800;font-size:clamp(18px,1.4vw,21px);color:var(--ink);line-height:1.25}
.row dd{color:var(--muted);max-width:52ch}
.ledger-end{margin-top:28px;font-weight:700;color:var(--sea)}

/* field log */
.teren{padding:var(--sec) 0}
.log{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.log li{display:flex;flex-direction:column;gap:12px;padding:24px 22px;border:1px solid var(--line);border-top:4px solid var(--sea);border-radius:4px var(--r) var(--r) var(--r)}
.log h3{color:var(--sea)}
.log p{color:var(--muted);font-size:16px;flex:1}
.state{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--green)}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:#1f9d55}

/* product sheets */
.sprej{padding:var(--sec) 0;background:var(--stone)}
.sheets{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.sheet{display:grid;grid-template-columns:clamp(150px,14vw,210px) minmax(0,1fr);gap:clamp(18px,2vw,28px);padding:clamp(16px,1.8vw,24px);border-radius:var(--r);background:var(--white)}
.sheet>picture{display:block}
.sheet img{width:100%;aspect-ratio:1122/1402;object-fit:cover;border-radius:8px}
.sheet-body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 4px 4px 0}
.sheet h3{font-size:clamp(24px,2.1vw,32px);letter-spacing:-.025em;color:var(--green)}
.sheet p{font-size:16px}
.sheet-mega{background:var(--sea);color:var(--white)}
.sheet-mega h3{color:var(--white)}
.sheet-mega .btn-ink{background:var(--sun);color:var(--sea)}.sheet-mega .btn-ink:hover{background:#ffe066}
.pull-s{font-weight:800;color:var(--sea)}
.ticks{display:grid;gap:8px;font-size:15px}
.ticks li{position:relative;padding-left:24px}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
.note{font-size:14px!important;color:var(--muted)}

/* voices */
.glas{padding:var(--sec) 0}
.quotes{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.quotes blockquote p{font-size:clamp(24px,2.5vw,36px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--sea);max-width:22ch}
.quotes figcaption{margin-top:16px;color:var(--muted);font-size:15px;max-width:40ch}
.statements{margin-top:clamp(48px,6vw,88px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.statements section{padding:clamp(24px,2.6vw,36px);background:var(--stone);border-radius:var(--r)}
.statements h3{color:var(--green);margin-bottom:14px}
.statements blockquote p{font-size:var(--lead);line-height:1.45}
.support{margin-top:18px;font-weight:700;color:var(--sea)}

/* report */
.hitno{padding:var(--sec) 0;background:var(--sea);color:var(--white)}
.hitno-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.poster img{border-radius:var(--r);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.poster figcaption{margin-top:16px;font-weight:800;font-size:clamp(20px,1.8vw,26px);color:var(--sun)}
.hitno h2{color:var(--white)}
.hitno-say{margin-top:14px;font-size:var(--lead);font-weight:700;color:var(--sun)}
.hitno-copy>p:not(.hitno-say){margin-top:20px;color:rgba(255,255,255,.86)}
.hitno-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}

/* faq */
.faq{padding:var(--sec) 0}
.faq-list{border-top:2px solid var(--sea)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:22px 52px 22px 0;font-weight:700;font-size:clamp(17px,1.35vw,20px);line-height:1.35;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-9px;border-right:2.5px solid var(--sea);border-bottom:2.5px solid var(--sea);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq summary:hover{color:var(--sea-2)}
.faq details p{padding:0 52px 24px 0;color:var(--muted)}

/* closing */
.nula{padding:clamp(56px,7vw,104px) 0;background:var(--sun);color:var(--sea)}
.nula-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 64px}
.nula h2{color:var(--sea);font-size:clamp(40px,5.6vw,84px)}
.nula p{margin-top:16px;max-width:46ch;font-size:var(--lead);line-height:1.45}
.nula-cta p{font-size:16px;margin-top:12px;font-weight:700}
.nula :focus-visible{outline-color:var(--sea)}

/* footer */
.foot{background:var(--sea);color:rgba(255,255,255,.86);padding:clamp(56px,6vw,88px) 0 32px;font-size:16px}
.foot-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-d)}
.foot-brand img{width:200px}
.foot-brand p{margin-top:16px}
.foot-motto{color:var(--white);font-weight:700}
.foot-links{display:grid;gap:10px;align-content:start}
.foot-links a,.foot-links button{padding:4px 0;border:0;background:none;color:inherit;text-decoration:none;font-size:16px;text-align:left}
.foot-links a:hover,.foot-links button:hover{color:var(--sun)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding-top:24px;font-size:14px;color:rgba(255,255,255,.7)}

/* single load moment: headline and status bar arrive once */
@media (prefers-reduced-motion:no-preference){
  h1 span,.hero-claim,.hero-sub,.hero-cta{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  h1 span:nth-child(2){animation-delay:.08s}
  .hero-claim{animation-delay:.18s}.hero-sub{animation-delay:.24s}.hero-cta{animation-delay:.3s}
  .status{animation:rise .9s cubic-bezier(.2,.7,.2,1) .45s both}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,157,85,.5)}70%,100%{box-shadow:0 0 0 9px rgba(31,157,85,0)}}

/* tablet */
@media (max-width:1080px){
  .log{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheets{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .menu{display:inline-flex;flex-direction:column;justify-content:center;gap:7px;width:48px;height:48px;padding:0 11px;border:1px solid rgba(255,255,255,.4);border-radius:8px;background:rgba(6,43,79,.35)}
  .menu span{display:block;height:2px;background:var(--white);border-radius:2px;transition:transform .2s}
  .menu[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
  .menu[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
  #nav{position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--m) 24px;background:var(--sea);box-shadow:0 20px 40px rgba(3,20,40,.35);font-size:18px;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  #nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
  #nav a{padding:14px 0;border-bottom:1px solid var(--line-d)}
  #nav .btn{margin-top:18px;min-height:52px}
  .top-in{height:76px}
  .udruga-in,.split,.hitno-in{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr);gap:10px}
  .foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-brand{grid-column:1/-1}
}
/* phone */
@media (max-width:640px){
  .hero{min-height:0;padding-top:112px;padding-bottom:20px}
  .hero-photo img{object-position:66% 100%}
  .hero::before{background:
    linear-gradient(180deg,rgba(4,30,58,.95) 0%,rgba(5,36,68,.86) 46%,rgba(6,43,79,.25) 70%,rgba(6,43,79,0) 82%),
    linear-gradient(0deg,rgba(4,30,58,.55) 0%,rgba(4,30,58,0) 22%)}
  .hero-in{padding-bottom:clamp(170px,44vw,240px)}
  .hero-cta{flex-direction:column;align-items:stretch}
  .status{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cell{padding:16px;gap:12px;align-items:flex-start}
  .cell-src{grid-column:1/-1;border-left:0!important;border-top:1px solid var(--line)}
  .ico{width:26px;height:26px}.croc{width:42px;margin-top:4px}
  .range{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:12px}
  .pack figcaption strong{font-size:16px}
  .chips span{font-size:13px;padding:3px 8px}
  .log,.quotes,.statements{grid-template-columns:minmax(0,1fr)}
  .sheet{grid-template-columns:minmax(0,1fr)}
  .sheet picture img{max-width:260px}
  .faq summary{padding-right:40px}.faq details p{padding-right:0}
  .nula-cta,.nula-cta .btn{width:100%}
  .foot-in{grid-template-columns:minmax(0,1fr)}
}

/* dlg_0d444df8 item 20: a still from the real game next to the play button. */
.game-peek{display:block;width:min(380px,100%);margin-top:22px;border:3px solid #fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px #00000055;transform:rotate(-1.2deg);transition:transform .2s}
.game-peek img{display:block;width:100%;height:auto}
@media(hover:hover){.game-peek:hover{transform:rotate(0) scale(1.02)}}
@media(prefers-reduced-motion:reduce){.game-peek,.game-peek:hover{transform:none;transition:none}}
/* dlg_12944bbb: small entry to the game news, under the game still. align-self keeps the pill
   its own width inside the .hero-in flex column (review dlg_510387e2 finding 1). */
.game-news{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;text-decoration:none;min-height:44px;margin-top:14px;padding:0 16px;border:2px solid #fff;border-radius:99px;background:#0f3526b3;color:#fff;font-weight:700;font-size:15px}
.game-news:hover{text-decoration:none;background:#0f3526e6}