/* GENERIRANO iz style.sp.css (tools/boja.py) – glavna boja #2980B9, ne uređivati ručno */
/* GENERIRANO iz style.css (tools/razmaci.py) – ne uređivati ručno */
/* =====================================================================
   ENERGONOVA v8 — prijenos Figma okvira "Frame 4" (45:2741) 1:1
   Mjere su iz Figme za širinu 1440 px; ispod toga se raspored prilagođava.
   ===================================================================== */
:root {
  --bg: #f1f1ef;
  --white: #ffffff;
  --ink: #0a0a0b;
  --text: #5f6168;
  --muted: #8b909a;
  --blue: #2980b9;
  --blue-soft: #eff6fb;
  --line-08: rgba(10, 10, 11, .08);
  --line-10: rgba(10, 10, 11, .1);
  --line-16: rgba(10, 10, 11, .16);
  --shadow: 0 24px 48px -32px rgba(19, 42, 57, .18);
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }

/* sekcije: unutarnji razmak iz Figme (--px), sadržaj ostaje u 1440 px i na širim ekranima */
.sec { --px: 64px; padding-inline: max(var(--px), calc((100% - 1440px) / 2 + var(--px))); }

/* zajednički tipografski stilovi */
.h72 { font-size: clamp(2.5rem, 5vw, 72px); font-weight: 600; line-height: 1; }
.h72--t396 { letter-spacing: -0.055em; }   /* -3.96px pri 72px */
.h72--t36 { letter-spacing: -0.05em; }     /* -3.6px pri 72px */
.lead17 { font-size: 17px; line-height: 1.5; color: var(--text); }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 21px; color: var(--blue); }
.eyebrow i { width: 8px; height: 8px; background: var(--blue); }

/* okrugli gumb sa strelicom (v6/Kround) */
.kround { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 20px; background: #fff; border: 1px solid var(--line-16); transition: background-color .25s, border-color .25s; }
.kround img { width: 18px; height: 18px; transition: transform .4s var(--ease), filter .25s; }
.kround--36 { width: 36px; height: 36px; border-radius: 16px; }
.kround--36 img { width: 15px; height: 15px; }
a:hover > .kround, button:hover > .kround, .kround:hover { background: var(--blue); border-color: var(--blue); }
a:hover > .kround img, button:hover > .kround img, .kround:hover img { filter: brightness(0) invert(1); transform: rotate(45deg); }

/* =====================================================================
   HERO (45:2742) + linije Instalacija (73:5475)
   ===================================================================== */
.hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 877px; padding-top: 220px; padding-bottom: 128px; }
.hero__pipes { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 23px); pointer-events: none; }   /* u Figmi 1440×900 preko heroja visine 877 */
.hlines canvas { display: block; width: 100%; height: 100%; }
.hero__col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 768px; }
.hero__title { font-size: clamp(2.6rem, 5vw, 72px); font-weight: 500; line-height: 1; color: #000; text-align: center; }
.hero__actions { display: flex; gap: 8px; }
.hbtn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 4px; border: 1px solid; font-size: 16px; line-height: 1.5; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s; }
.hbtn--blue { background: var(--blue); border-color: #fff; color: #fff; }
.hbtn--blue:hover { background: var(--ink); }
.hbtn--line { border-color: rgba(0, 0, 0, .4); color: #000; }
.hbtn--line:hover { border-color: #000; background: rgba(255, 255, 255, .6); }

/* =====================================================================
   STATISTIKA (61:4965)
   ===================================================================== */
.stat { --px: 84px; display: flex; flex-direction: column; align-items: center; padding-top: 80px; padding-bottom: 128px; }
.stat__head { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 48px; text-align: center; }
.stat__head .lead17 { max-width: 560px; }
.kcards { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.kcard { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 24px 0 24px; background: #fff; border: 1px solid var(--line-08); border-radius: 20px; box-shadow: var(--shadow); }
.kcard__head { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.kcard__head strong { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.kcard__sel { position: relative; }
.kpill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line-08); font-size: 13px; font-weight: 500; }
.kpill img { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.kcard__sel.is-open .kpill img { transform: rotate(180deg); }
.kmenu { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); min-width: 170px; padding: 8px; background: #fff; border: 1px solid var(--line-08); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(19, 42, 57, .3); visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s; }
.kcard__sel.is-open .kmenu { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .3s var(--ease); }
.kmenu button { display: block; width: 100%; padding: 8px 12px; border-radius: 8px; text-align: left; font-size: 13px; font-weight: 500; }
.kmenu button:hover { background: var(--bg); }
.kmenu button[aria-selected="true"] { color: var(--blue); }
.kcard__body { display: flex; flex-direction: column; gap: 8px; padding: 32px 24px 0; white-space: nowrap; }
.kcard__label { font-size: 14px; color: var(--text); }
.kcard__num { display: flex; align-items: flex-start; gap: 8px; }
.kcard__val { font-size: clamp(48px, 4.6vw, 66px); font-weight: 600; line-height: 1.02; letter-spacing: -0.06em; }
.kcard__num i { font-style: normal; font-size: 28px; font-weight: 500; color: var(--blue); }
.kcard__graf { height: 202px; padding-top: 12px; }
.kcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 24px 0; }
.kcard__foot p { width: 230px; font-size: 14px; line-height: 1.45; color: var(--text); }
.kdots { display: flex; justify-content: center; gap: 8px; padding-top: 16px; }
.kdots button { width: 22px; height: 3px; border-radius: 2px; background: var(--line-16); transition: background-color .25s; }
.kdots button.is-on { background: var(--ink); }

/* =====================================================================
   PROBLEMI (61:4878) – pomoćnik u tri koraka
   ===================================================================== */
.prob { --px: 84px; display: flex; flex-direction: column; gap: 48px; padding-top: 80px; padding-bottom: 128px; }
.prob__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.prob__left { display: flex; flex-direction: column; gap: 16px; }
.prob__p { width: 470px; max-width: 100%; flex: none; }
.wiz { display: flex; gap: 16px; align-items: stretch; }
.wcard { background: #fff; border: 1px solid var(--line-08); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.wsteps { flex: 0 0 502px; padding: 8px; align-self: flex-start; }
.wsteps__art { height: 230px; border-radius: 16px; background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #f4f5f8 60%, #eceef3 100%); }
.wsteps__list { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 8px 8px; }
.wsteps__list::before { content: ""; position: absolute; left: 31px; top: 34px; width: 2px; height: 132px; background: var(--line-08); }
.wstep { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px; border-radius: 16px; text-align: left; transition: background-color .2s; }
.wstep:not(:disabled):hover { background: var(--bg); }
.wstep:disabled { cursor: default; }
.wstep__n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 16px; background: #fff; border: 1px solid var(--line-16); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.wstep__t { display: flex; flex-direction: column; gap: 1px; font-weight: 500; white-space: nowrap; }
.wstep__t small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
.wstep__t span { font-size: 15px; }
.wstep.is-cur .wstep__n { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 5px var(--blue-soft); }
.wstep.is-wait .wstep__t span { color: var(--muted); }
.wstep.is-done .wstep__n { border-color: var(--blue); color: var(--blue); }
.wpanel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 40px; }
.wpanel__k { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .05em; color: var(--blue); }
.wpanel__h { font-size: clamp(30px, 2.9vw, 41.6px); font-weight: 600; line-height: 1.02; letter-spacing: -0.05em; }
.wpanel__opts { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.wopt { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-08); text-align: left; transition: border-color .2s, box-shadow .3s; }
.wopt:hover { border-color: rgba(41, 128, 185, .35); box-shadow: 0 14px 30px -22px rgba(19, 42, 57, .35); }
.wopt__ic { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 20px; background: var(--blue-soft); font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--blue); }
.wopt__t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.wopt__t strong { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
.wopt__t span { font-size: 13.5px; color: var(--text); }
.wopt__t em { font-style: normal; color: var(--blue); }
.wpanel__p { font-size: 16px; line-height: 1.5; color: var(--text); max-width: 56ch; }
.wpanel__tags { display: flex; gap: 8px; }
.wtag { padding: 4px 12px; border-radius: 6px; background: var(--blue-soft); font-size: 12.5px; font-weight: 500; color: var(--blue); }
.wpanel__btns { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.wpanel__restart { align-self: flex-start; margin-top: 4px; font-size: 13px; color: var(--muted); }
.wpanel__restart:hover { color: var(--blue); }

/* ikone 20×20 (položaj grupa kao u Figmi) */
.ic20 { position: relative; display: block; width: 20px; height: 20px; flex: none; }
.ic20 img, .ic20 i { position: absolute; }

/* =====================================================================
   USLUGE (61:3643) – tabovi
   ===================================================================== */
.usl { display: flex; flex-direction: column; gap: 64px; padding-top: 80px; padding-bottom: 128px; }
.usl__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.usl__p { width: 440px; max-width: 100%; font-size: 18px; line-height: 1.45; color: var(--text); }
.tabs { display: flex; flex-direction: column; gap: 16px; }
.tabs__menu { display: flex; gap: 8px; padding: 8px; background: #fff; border: 1px solid var(--line-10); border-radius: 16px; }
.tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 16px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; transition: background-color .25s, color .25s; }
.tab:hover { background: var(--bg); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab .ic20 i { background: #5f6168; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background-color .25s; }
.tab[aria-selected="true"] .ic20 i { background: #85bee4; }
.tabs__body { display: flex; gap: 16px; align-items: stretch; }
.tabs__art { flex: 0 0 calc((100% - 14px) * 572 / 1298); min-width: 0; min-height: 518px; background: #fff; border: 1px solid var(--line-10); border-radius: 6px; }
.tabs__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 48px; background: #fff; border: 1px solid var(--line-10); border-radius: 6px; }
.tabs__k { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--blue); }
.tabs__h { font-size: clamp(36px, 3.4vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.tabs__msg { font-size: 17.6px; color: var(--text); }
.tabs__cols { display: flex; gap: 24px; width: 100%; padding-top: 24px; border-top: 1px solid var(--line-10); }
.tabs__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tabs__col h4 { margin: 0; padding-bottom: 2px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.stavka { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.stavka::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; background: var(--blue); }
.tabs__btn { padding-top: 8px; }
.bbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 24px 0 24px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; transition: background-color .25s; }
.bbtn:hover { background: var(--ink); }
.bbtn__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .16); }
.bbtn__ic img { width: 18px; height: 18px; }
.bbtn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-16); }
.bbtn--line:hover { background: var(--bg); }
.tabs__text.is-in > * { animation: tabin .5s var(--ease) both; }
.tabs__text.is-in > *:nth-child(2) { animation-delay: .03s; }
.tabs__text.is-in > *:nth-child(3) { animation-delay: .06s; }
.tabs__text.is-in > *:nth-child(4) { animation-delay: .09s; }
.tabs__text.is-in > *:nth-child(5) { animation-delay: .12s; }
@keyframes tabin { from { opacity: 0; transform: translateY(10px); } }

/* =====================================================================
   PARTNERI (45:2997)
   ===================================================================== */
.part { display: flex; flex-direction: column; gap: 32px; padding-bottom: 128px; }
.part__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; white-space: nowrap; }
.part__p { font-size: 18px; line-height: 1.45; color: var(--text); }
.part__note { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }

/* izmišljeni logotipi (DEMO) */
.flogo { --logo-bg: #fff; display: inline-flex; align-items: center; gap: .5em; font-size: 20px; line-height: 1; color: var(--ink); white-space: nowrap; transition: color .3s; }
.flogo__m { flex: none; width: 1.25em; height: 1.25em; }
.flogo__w { display: inline-flex; align-items: baseline; gap: .35em; }
.flogo__w small { font-family: var(--font); font-style: normal; font-weight: 500; font-size: .5em; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.flogo--lg { font-size: 26px; }
.flogo--xl { font-size: 40px; }
.flogo--w { --logo-bg: var(--ink); color: #fff; font-size: 17px; }

/* prekidač verzija */
.plab[hidden] { display: none; }
.plab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; align-self: flex-start; padding: 4px; border-radius: 16px; background: var(--ink); color: #fff; }
.plab__k { padding: 0 12px 0 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.plab button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 8px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .75); transition: background-color .2s, color .2s; }
.plab button b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .12); font-family: var(--mono); font-size: 10.5px; font-weight: 500; }
.plab button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.plab button.is-on { background: var(--blue); color: #fff; }
.plab button.is-on b { background: rgba(255, 255, 255, .22); }
.pview > * { animation: pvin .6s var(--ease) both; }
@keyframes pvin { from { opacity: 0; transform: translateY(12px); } }
.ptag { display: inline-flex; padding: 4px 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line-08); font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.parr { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A · Mreža (raspored iz Figme) */
.pv-a { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pv-a__cell { display: grid; place-items: center; height: 90px; background: #fff; border: 1px solid #e2ebf3; border-radius: 6px; }
.pv-a__cell .flogo { color: rgba(10, 10, 11, .62); }
.pv-a__cell:hover .flogo { color: var(--ink); }
.pv-a__cell:hover .flogo__m { color: var(--blue); }

/* B · Traka (dvije beskonačne trake u suprotnim smjerovima) */
.pv-b { display: grid; gap: 16px; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pv-b__row { overflow: hidden; }
.pv-b__track { display: flex; gap: 16px; width: max-content; animation: pvmarq 38s linear infinite; }
.pv-b__row.is-rev .pv-b__track { animation-direction: reverse; animation-duration: 44s; }
.pv-b:hover .pv-b__track { animation-play-state: paused; }
.pv-b__item { display: grid; place-items: center; height: 120px; padding: 0 40px; background: #fff; border: 1px solid var(--line-08); border-radius: 20px; }
.pv-b__item .flogo { color: rgba(10, 10, 11, .55); }
.pv-b__item:hover .flogo { color: var(--ink); }
.pv-b__item:hover .flogo__m { color: var(--blue); }
@keyframes pvmarq { to { transform: translateX(calc(-50% - 7px)); } }

/* C · Po području (filtar) */
.pv-c { display: grid; gap: 16px; }
.pv-c__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-c__chips button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px; background: #fff; border: 1px solid var(--line-10); font-size: 14px; font-weight: 500; color: var(--text); transition: background-color .2s, color .2s, border-color .2s; }
.pv-c__chips button i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pv-c__chips button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pv-c__chips button.is-on i { color: #94c6e7; }
.pv-c__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pv-c__card { display: flex; flex-direction: column; justify-content: space-between; height: 170px; padding: 24px; background: #fff; border: 1px solid var(--line-08); border-radius: 16px; transition: opacity .35s, transform .45s var(--ease), border-color .25s; }
.pv-c__card.is-out { opacity: .16; transform: scale(.97); }
.pv-c__card:hover { border-color: rgba(41, 128, 185, .4); }
.pv-c__logo { display: grid; place-items: center; flex: 1; }
.pv-c__meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-08); font-size: 12px; }
.pv-c__sec { font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--blue); font-size: 10.5px; }
.pv-c__svc { color: var(--text); text-align: right; }

/* D · Bento (dva istaknuta + mreža) */
.pv-d { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 16px; }
.pv-d__feat { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: 20px; color: #fff; }
.pv-d__feat--blue { grid-column: 1 / 3; grid-row: 1 / 3; background: radial-gradient(120% 120% at 85% 15%, #439bd6 0%, #2980b9 50%, #205a81 100%); --logo-bg: #2980b9; }
.pv-d__feat--ink { grid-column: 3 / 5; grid-row: 1 / 2; background: var(--ink); --logo-bg: var(--ink); }
.pv-d__feat .flogo { color: #fff; }
.pv-d__feat--ink .flogo { font-size: 30px; }
.pv-d__ghost { position: absolute; right: -40px; bottom: -40px; width: 300px; height: 300px; color: rgba(255, 255, 255, .08); }
.pv-d__feat--ink .pv-d__ghost { width: 200px; height: 200px; right: -30px; bottom: -60px; }
.pv-d__top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.pv-d__top .ptag { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }
.pv-d__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.pv-d__svc { position: relative; display: grid; gap: 8px; }
.pv-d__svc > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.pv-d__svc > div { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-d__svc .ptag { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; }
.pv-d__feat--ink .pv-d__svc { display: none; }
.pv-d__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #fff; border: 1px solid var(--line-08); border-radius: 20px; transition: transform .4s var(--ease), box-shadow .4s; }
.pv-d__cell > span:last-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pv-d__cell:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pv-d__cell .flogo { font-size: 19px; }

/* E · Shema (partneri kao stanice na cjevovodu) */
.pv-e { padding: 24px 24px 32px; border-radius: 20px; background: var(--ink); color: #fff; overflow: hidden; }
.pv-e__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pv-e__k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: #94c6e7; }
.pv-e__legend { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: rgba(255, 255, 255, .65); }
.pv-e__legend i { display: inline-block; width: 8px; height: 8px; margin-right: -8px; border-radius: 50%; background: #74b5e1; }
.pv-e__legend i.z { background: #12b5f0; } .pv-e__legend i.m { background: #ffffff; } .pv-e__legend i.e { background: #bcdbf0; }
.pv-e__map { position: relative; height: 380px; margin: 12px 64px 0; }
.pv-e__pipe { position: absolute; left: -98px; right: -98px; top: 50%; height: 14px; margin-top: -8px; border-top: 1px solid rgba(148, 198, 231, .45); border-bottom: 1px solid rgba(148, 198, 231, .45); overflow: hidden; }
.pv-e__pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.4px; margin-top: -.7px; background: repeating-linear-gradient(90deg, rgba(148, 198, 231, .7) 0 2px, transparent 2px 14px); animation: pvflow 4s linear infinite; }
.pv-e__pipe span { position: absolute; top: 3px; left: 0; width: 120px; height: 6px; border-radius: 4px; background: linear-gradient(90deg, transparent, #74b5e1, #fff); box-shadow: 0 0 14px rgba(116, 181, 225, .8); animation: pvpulse 6s linear infinite; }
@keyframes pvflow { to { background-position-x: 140px; } }
@keyframes pvpulse { from { transform: translateX(-140px); } to { transform: translateX(calc(1400px)); } }
.pv-e__st { position: absolute; left: var(--x); top: 50%; width: 0; --c: #74b5e1; }
.pv-e__st[data-sec="zgradarstvo"] { --c: #12b5f0; } .pv-e__st[data-sec="mreze"] { --c: #ffffff; } .pv-e__st[data-sec="energetika"] { --c: #bcdbf0; }
.pv-e__node { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--c); box-shadow: 0 0 0 4px rgba(10, 10, 11, 1); }
.pv-e__stem { position: absolute; left: -.5px; width: 1px; height: 64px; background: linear-gradient(var(--c), rgba(255, 255, 255, .15)); }
.pv-e__st.is-down .pv-e__stem { top: 7px; }
.pv-e__st.is-up .pv-e__stem { bottom: 7px; transform: none; background: linear-gradient(rgba(255, 255, 255, .15), var(--c)); }
.pv-e__chip { position: absolute; left: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; transition: background-color .25s, border-color .25s; }
.pv-e__chip small { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }
.pv-e__st.is-up .pv-e__chip { bottom: 72px; }
.pv-e__st.is-down .pv-e__chip { top: 72px; }
.pv-e__st:hover .pv-e__chip { background: rgba(116, 181, 225, .18); border-color: var(--c); }

/* F · Kartice (vrtuljak) */
.pv-f { display: grid; gap: 16px; }
.pv-f__rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 16px; scrollbar-width: none; }
.pv-f__rail::-webkit-scrollbar { display: none; }
.pv-f__card { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; height: 300px; padding: 24px; background: #fff; border: 1px solid var(--line-08); border-radius: 20px; box-shadow: var(--shadow); transition: transform .45s var(--ease); }
.pv-f__card:hover { transform: translateY(-4px); }
.pv-f__top { display: flex; align-items: center; justify-content: space-between; }
.pv-f__i { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pv-f__logo { display: grid; place-items: center; flex: 1; border-radius: 16px; background: var(--bg); --logo-bg: var(--bg); }
.pv-f__logo .flogo { --logo-bg: var(--bg); }
.pv-f__bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pv-f__bot small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pv-f__bot p { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.pv-f__go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-16); transition: background-color .25s, color .25s, border-color .25s; }
.pv-f__card:hover .pv-f__go { background: var(--blue); border-color: var(--blue); color: #fff; }
.pv-f__nav { display: flex; align-items: center; gap: 16px; }
.pv-f__btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line-16); transition: background-color .25s, color .25s; }
.pv-f__btn:hover { background: var(--ink); color: #fff; }
.pv-f__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-f__bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line-10); overflow: hidden; }
.pv-f__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; border-radius: 3px; background: var(--ink); transition: width .2s; }

/* =====================================================================
   CTA (61:3617)
   ===================================================================== */
.cta { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding-top: 80px; padding-bottom: 80px; background: var(--blue); color: #fff; isolation: isolate; }
.cta__bg { position: absolute; inset: 0; z-index: -1; background: rgba(74, 74, 74, .5); }
.cta__bg img { position: absolute; left: 0; top: -24.8%; width: 100%; height: auto; min-height: 192.59%; object-fit: cover; }
.dither { position: absolute; inset: 0; }
.dither canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.dither.is-ready canvas { opacity: 1; }
.cta__dither { inset: -10% 0; z-index: -1; }
/* dither ne smije ići ispod tekstova: lijevo (opis) i desno dolje (kontakti) podloga ostaje čista plava */
.cta__dither {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 60%), radial-gradient(300px 170px at calc(100% - 190px) 74%, transparent 45%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 60%), radial-gradient(300px 170px at calc(100% - 190px) 74%, transparent 45%, #000 100%);
  mask-composite: intersect;
}
.cta__bg { display: none; }   /* slika iz Figme imala je uzorak i ispod teksta */
@media (max-width: 980px) {
  .cta__dither { opacity: .6; -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 30%); mask-image: linear-gradient(180deg, #000 0, transparent 30%); }
}
.cta__k { font-size: 14px; font-weight: 500; letter-spacing: .04em; opacity: .7; }
.cta__h { width: 967px; max-width: 100%; margin-top: 24px; font-size: clamp(2.6rem, 5vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -0.06em; }
.cta__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; width: 100%; padding-top: 32px; }
.cta__p { width: 420px; max-width: 100%; font-size: 20px; line-height: 1.45; opacity: .85; }
.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta__btnwrap { padding-bottom: 12px; }
.wbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 24px 0 24px; border-radius: 6px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 500; white-space: nowrap; transition: background-color .25s, color .25s; }
.wbtn__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--blue); transition: transform .4s var(--ease); }
.wbtn__ic img { width: 18px; height: 18px; }
.wbtn:hover .wbtn__ic { transform: rotate(-90deg); }
.cta__contact { display: flex; flex-direction: column; gap: 2px; font-weight: 500; white-space: nowrap; }
.cta__contact small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; opacity: .65; }
.cta__contact span { font-size: 18px; letter-spacing: -0.02em; }
.cta__contact:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   FOOTER (45:3212) – Relume predložak (kao u Figmi)
   ===================================================================== */
.foot { display: flex; flex-direction: column; align-items: center; padding-top: 80px; padding-bottom: 80px; font-family: "Roboto", system-ui, sans-serif; color: #000; }
.foot__in { display: flex; flex-direction: column; gap: 80px; width: 100%; max-width: 1280px; }
.foot__links { display: flex; gap: 40px; align-items: flex-start; }
.foot__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.foot__logo { display: block; height: 36px; }
.foot__logo img { width: auto; height: 34px; margin-top: 1px; }
.foot__col--brand { flex: 1.25 1 0; }
.foot__tag { max-width: 24ch; font-size: 14px; line-height: 1.5; color: var(--text); }
.foot__plain li, .foot__note { padding: 8px 0; font-size: 14px; line-height: 1.5; }
.foot__note { color: var(--text); }
.foot__made { font-size: 14px; line-height: 1.5; color: var(--text); }
.foot__t { font-size: 16px; font-weight: 600; line-height: 1.5; }
.foot__col li a { display: block; padding: 8px 0; font-size: 14px; line-height: 1.5; }
.foot__col li a:hover { text-decoration: underline; }
.foot__credits { display: flex; flex-direction: column; gap: 32px; }
.foot__divider { width: 100%; height: 1px; }
.foot__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.foot__legal { display: flex; align-items: center; gap: 24px; font-size: 14px; line-height: 1.5; white-space: nowrap; }
.foot__ll { display: flex; gap: 24px; }
.foot__ll a { text-decoration: underline; }

/* =====================================================================
   MANJI EKRANI (u Figmi postoji samo 1440 px – ovo je razumna prilagodba)
   ===================================================================== */
@media (max-width: 1180px) {
  .wsteps { flex-basis: 420px; }
  .wsteps__art { height: 200px; }
  .tab { gap: 8px; padding: 12px 12px; font-size: 14px; }
}
@media (max-width: 980px) {
  .sec { --px: 24px; }
  .stat, .prob { --px: 24px; }
  .hero { min-height: 0; padding-top: 128px; padding-bottom: 128px; }
  .kcards { flex-direction: column; align-items: stretch; }
  .prob__head, .part__head, .cta__row { flex-direction: column; align-items: flex-start; }
  .prob__p { width: auto; }
  .wiz { flex-direction: column; }
  .wsteps { flex-basis: auto; align-self: stretch; }
  .tabs__menu { overflow-x: auto; }
  .tab { flex: 0 0 auto; }
  .tabs__body { flex-direction: column; }
  .tabs__art { flex-basis: auto; min-height: 220px; }
  .part__head { white-space: normal; }
  .pv-a, .pv-c__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-d__feat--blue, .pv-d__feat--ink { grid-column: 1 / -1; }
  .pv-e__map { margin: 16px 0 0; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .pv-e__pipe, .pv-e__node, .pv-e__stem { display: none; }
  .pv-e__st { position: static; width: auto; }
  .pv-e__chip { position: static; transform: none; }
  .foot__links { flex-wrap: wrap; }
  .foot__col { flex: 1 1 30%; }
  .foot__row, .foot__legal { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .hero__title br, .cta__h br { display: none; }
  .hero__pipes { opacity: .45; }
  .pv-e__map { grid-template-columns: minmax(0, 1fr); }
  .pv-a, .pv-c__grid, .pv-d { grid-template-columns: minmax(0, 1fr); }
  .pv-b__item { height: 96px; padding: 0 24px; }
  .flogo--lg { font-size: 22px; }
  .flogo--xl { font-size: 32px; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .wpanel { padding: 24px; }
  .wstep__t { white-space: normal; }
  .tabs__text { padding: 24px 24px; }
  .tabs__cols { flex-direction: column; }
  .kcard__foot p { width: auto; }
  .foot__col { flex-basis: 45%; }
  .foot__ll { flex-wrap: wrap; gap: 12px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tabs__text.is-in > * { animation: none; }
}

/* =====================================================================
   FOOTER · VERZIJE B–M (footer.js)
   ===================================================================== */
[hidden] { display: none !important; }
.flab { display: flex; justify-content: center; padding-block: 24px; }
.flab .plab { align-self: center; }
.froot > footer { padding-inline: max(64px, calc((100% - 1440px) / 2 + 64px)); }
.fk { margin-bottom: 16px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fa { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.froot [data-fr] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) calc(var(--i, 0) * 60ms), transform .9s var(--ease) calc(var(--i, 0) * 60ms); }
.froot [data-fr].is-in { opacity: 1; transform: none; }
.ulink { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease), color .25s; }
.ulink:hover { background-size: 100% 1px; }

/* ---------- B · NATPIS ---------- */
.fb { padding-top: 96px; overflow: hidden; }
.fb__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 64px; border-bottom: 1px solid var(--line-10); }
.fb__state { font-size: clamp(36px, 4.4vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.fb__state span { color: var(--text); }
.fb__cta { flex: none; display: grid; place-items: center; width: 190px; height: 190px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 20px; font-weight: 500; line-height: 1.15; text-align: center; transition: transform .35s var(--ease), background-color .3s; will-change: transform; }
.fb__cta:hover { background: var(--ink); }
.fb__cta .fa { display: block; width: 24px; height: 24px; margin: 8px auto 0; transition: transform .4s var(--ease); }
.fb__cta:hover .fa { transform: rotate(45deg); }
.fb__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 48px 0 48px; }
.fb__cols li a { display: inline-block; padding: 4px 0; font-size: 15px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease), color .25s; }
.fb__cols li a:hover { background-size: 100% 1px; color: var(--blue); }
.fb__word { display: flex; justify-content: space-between; font-size: clamp(52px, 15.6vw, 226px); font-weight: 700; line-height: .8; letter-spacing: -0.06em; color: var(--ink); user-select: none; }
.froot .fb__word[data-fr] { opacity: 1; transform: none; }
.fb__word span { display: block; overflow: hidden; padding: .04em .01em 0; }
.fb__word b { display: block; font-weight: inherit; transform: translateY(105%); transition: transform 1.1s var(--ease) calc(var(--l) * 55ms), color .3s; }
.fb__word.is-in b { transform: translateY(calc(var(--lift, 0) * -0.16em)); }
.fb__word.is-live b { transition: transform .5s var(--ease), color .3s; }
.fb__word.is-live span:hover b { color: var(--blue); }
.fb__bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 24px; border-top: 1px solid var(--line-10); font-size: 13px; color: var(--text); }
.fb__clock { display: inline-flex; align-items: center; gap: 8px; }
.fb__clock i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(41, 128, 185, .5); animation: fpulse 2s ease-out infinite; }
.fb__clock b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
@keyframes fpulse { 70% { box-shadow: 0 0 0 8px rgba(41, 128, 185, 0); } 100% { box-shadow: 0 0 0 0 rgba(41, 128, 185, 0); } }
.fb__up { position: relative; display: grid; place-items: center; width: 48px; height: 48px; color: var(--ink); transition: color .25s; }
.fb__up > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.fb__up svg circle { stroke: var(--line-16); stroke-width: 1.4; }
.fb__up svg .fb__ring { stroke: var(--blue); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.fb__up:hover { color: var(--blue); }
.fb__up:hover .fa { animation: fup .6s var(--ease); }
@keyframes fup { 50% { transform: translateY(-4px); } }

/* ---------- C · CJEVOVOD ---------- */
.fc { padding-top: 80px; background: var(--ink); color: #fff; overflow: hidden; }
.fc__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fc__logo { display: inline-flex; padding: 12px 16px; border-radius: 8px; background: #fff; }
.fc__mail { display: inline-flex; align-items: center; gap: .3em; font-size: clamp(26px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.045em; transition: color .3s; }
.fc__mail .fa { width: .7em; height: .7em; transition: transform .4s var(--ease); }
.fc__mail:hover { color: #94c6e7; }
.fc__mail:hover .fa { transform: rotate(45deg); }
.fc__net { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 64px; padding-top: 80px; }
.fc__pipe { position: absolute; left: -64px; right: -64px; top: 0; height: 16px; border-top: 1px solid rgba(148, 198, 231, .45); border-bottom: 1px solid rgba(148, 198, 231, .45); overflow: hidden; }
.fc__pipe i:first-child { position: absolute; left: 0; right: 0; top: 50%; height: 1.4px; margin-top: -.7px; background: repeating-linear-gradient(90deg, rgba(148, 198, 231, .7) 0 2px, transparent 2px 14px); animation: pvflow 4s linear infinite; }
.fc__pipe i:last-child { position: absolute; top: 4px; left: 0; width: 140px; height: 6px; border-radius: 4px; background: linear-gradient(90deg, transparent, #74b5e1, #fff); box-shadow: 0 0 16px rgba(116, 181, 225, .9); animation: fcpulse 7s linear infinite; }
@keyframes fcpulse { from { transform: translateX(-160px); } to { transform: translateX(1700px); } }
.fc__st { position: relative; }
.fc__drop { position: absolute; left: 14px; top: -62px; width: 12px; height: 56px; border-left: 1px solid rgba(148, 198, 231, .35); border-right: 1px solid rgba(148, 198, 231, .35); overflow: hidden; }
.fc__drop b { position: absolute; left: 2px; top: 0; width: 6px; height: 18px; border-radius: 3px; background: linear-gradient(transparent, #94c6e7); animation: fcdrop 2.4s linear infinite; animation-delay: calc(var(--i) * 300ms); }
@keyframes fcdrop { from { transform: translateY(-20px); } to { transform: translateY(60px); } }
.fc__node { position: absolute; left: 11px; top: -70px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 2px solid #74b5e1; box-shadow: 0 0 0 4px var(--ink); transition: background-color .3s, box-shadow .3s; }
.fc__st:hover .fc__node { background: #74b5e1; box-shadow: 0 0 0 4px var(--ink), 0 0 18px rgba(116, 181, 225, .9); }
.fc__k { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.fc__k span { font-family: var(--mono); font-size: 11px; font-weight: 500; color: #94c6e7; }
.fc__st li a { display: inline-block; padding: 8px 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .68); transition: color .25s, transform .3s var(--ease); }
.fc__st li a:hover { color: #fff; transform: translateX(4px); }
.fc__ovl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 64px; }
.fc__ovk { margin-right: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #94c6e7; }
.fc__chip { padding: 8px 16px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .16); font-size: 13px; color: rgba(255, 255, 255, .8); }
.fc__legal, .fd__legal, .fe__legal, .ff__legal, .fg__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px 0 24px; font-size: 13px; }
.fc__legal { margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); }
.fc__legal nav, .fd__legal nav, .fe__legal nav, .ff__legal nav, .fg__legal nav { display: flex; gap: 24px; }
.fc__legal a:hover, .fg__legal a:hover { color: #fff; }

/* ---------- D · KARTA ---------- */
.fd { padding-top: 96px; }
.fd__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: stretch; }
.fd__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--blue); }
.fd__eyebrow i { width: 8px; height: 8px; background: var(--blue); }
.fd__h { margin-top: 16px; font-size: clamp(36px, 4.2vw, 60px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.fd__h span { color: var(--text); }
.fd__rows { margin-top: 40px; border-top: 1px solid var(--line-10); }
.fd__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-10); }
.fd__k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fd__v { overflow-wrap: anywhere; font-size: clamp(18px, 1.9vw, 26px); font-weight: 500; letter-spacing: -0.025em; transition: color .25s; }
.fd__row:hover .fd__v { color: var(--blue); }
.fd__acts { display: flex; gap: 8px; }
.fd__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-16); background: #fff; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.fd__btn .fa { width: 16px; height: 16px; }
.fd__btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.fd__btn--go:hover { background: var(--blue); border-color: var(--blue); }
.fd__btn:active { transform: scale(.92); }
.fd__map { position: relative; min-height: 460px; border-radius: 20px; background: #fff; border: 1px solid var(--line-08); box-shadow: var(--shadow); overflow: hidden; }
.fd__map canvas { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
.fd__pin { position: absolute; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 32px; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; transform: translateY(-50%); white-space: nowrap; pointer-events: none; }
.fd__pin i { width: 6px; height: 6px; border-radius: 50%; background: #94c6e7; }
.fd__cap { position: absolute; left: 24px; bottom: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fd__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 48px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-10); }
.fd__links ul { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.fd__links a:hover { color: var(--blue); }
.fd__logo { margin-left: auto; }
.fd__legal { color: var(--text); }
.fd__legal a:hover { color: var(--blue); }
.fd__toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; padding: 12px 16px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.fd__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- E · BENTO ---------- */
.fe { padding-top: 80px; }
.fe__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "brand brand cta cta" "brand brand contact clock" "nav1 nav2 ovl ovl"; gap: 16px; }
.fe__card { position: relative; display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--line-08); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.fe__brand { grid-area: brand; gap: 16px; }
.fe__brand p { max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--text); }
.fe__lines { position: relative; flex: 1; min-height: 220px; margin: 8px -24px -24px; }
.fe__cta { grid-area: cta; min-height: 220px; justify-content: space-between; gap: 16px; background: var(--blue); color: #fff; border-color: transparent; }
.fe__cta .dither { z-index: 0; -webkit-mask-image: linear-gradient(200deg, #000 15%, transparent 68%); mask-image: linear-gradient(200deg, #000 15%, transparent 68%); }
.fe__cta > :not(.dither) { position: relative; z-index: 1; }
.fe__k { align-self: flex-start; padding: 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); font-size: 12.5px; font-weight: 500; backdrop-filter: blur(8px); }
.fe__cta strong { max-width: 22ch; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -0.035em; }
.fe__go { position: absolute !important; right: 20px; bottom: 20px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .4s var(--ease); }
.fe__cta:hover .fe__go { transform: rotate(45deg) scale(1.06); }
.fe__contact { grid-area: contact; gap: 8px; }
.fe__big { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; transition: color .25s; }
.fe__big--s { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.fe__big:hover, .fe__addr:hover { color: var(--blue); }
.fe__addr { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--text); }
.fe__clock { grid-area: clock; justify-content: space-between; background: var(--ink); color: #fff; border-color: transparent; }
.fe__clock .fk { color: rgba(255, 255, 255, .5); }
.fe__clock b { font-size: clamp(44px, 4.6vw, 64px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.fe__clock span { font-size: 13px; color: rgba(255, 255, 255, .6); }
.fe__nav--1 { grid-area: nav1; }
.fe__nav--2 { grid-area: nav2; }
.fe__nav li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line-08); font-size: 14.5px; transition: color .25s, padding-left .35s var(--ease); }
.fe__nav li:last-child a { border-bottom: 0; }
.fe__nav li a i { display: grid; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease); }
.fe__nav li a i .fa { width: 15px; height: 15px; }
.fe__nav li a:hover { color: var(--blue); padding-left: 4px; }
.fe__nav li a:hover i { opacity: 1; transform: none; }
.fe__ovl { grid-area: ovl; }
.fe__ovl div { display: flex; flex-wrap: wrap; gap: 8px; }
.fe__ovl span { padding: 8px 16px; border-radius: 6px; background: var(--blue-soft); font-size: 13px; font-weight: 500; color: var(--blue); }
.fe__legal { margin-top: 16px; color: var(--text); }
.fe__legal a:hover { color: var(--blue); }

/* ---------- F · ZAPISNIK ---------- */
.ff { padding-top: 80px; }
.ff__sheet { position: relative; padding: 32px 40px 32px; border-radius: 8px; background: #fff linear-gradient(rgba(41, 128, 185, .035) 1px, transparent 1px) 0 0 / 100% 28px; border: 1px solid var(--line-10); box-shadow: 0 40px 80px -48px rgba(19, 42, 57, .35); }
.ff__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.ff__no { display: grid; justify-items: end; gap: 4px; font-family: var(--mono); }
.ff__no small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ff__no b { font-size: 20px; font-weight: 500; letter-spacing: .02em; }
.ff__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 24px 0; }
.ff__tbl { margin: 0; }
.ff__tbl div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px dashed rgba(10, 10, 11, .14); }
.ff__tbl dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.ff__tbl dd { margin: 0; font-size: 15px; line-height: 1.45; }
.ff__tbl a { background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease), color .25s; }
.ff__tbl a:hover { color: var(--blue); background-size: 100% 1px; }
.ff__chart { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: #fafbff; border: 1px solid rgba(41, 128, 185, .12); }
.ff__ck { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ff__live { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.ff__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: fpulse 2s ease-out infinite; }
.ff__chart canvas { width: 100%; height: 220px; }
.ff__res { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(41, 128, 185, .12); }
.ff__res span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ff__res b { font-family: var(--mono); font-size: 14px; font-weight: 500; transition: color .3s; }
.ff__res b.is-ok { color: var(--blue); }
.ff__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 24px; border-top: 1px solid var(--line-10); }
.ff__toc { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 8px 24px; }
.ff__toc a { display: inline-flex; gap: 8px; font-size: 14px; transition: color .25s; }
.ff__toc a span { font-family: var(--mono); font-size: 11px; color: var(--blue); padding-top: 2px; }
.ff__toc a:hover { color: var(--blue); }
.ff__stamp { position: relative; flex: none; width: 120px; height: 120px; color: var(--blue); transform: rotate(-8deg); }
.ff__stamp svg { width: 100%; height: 100%; animation: fspin 26s linear infinite; }
.ff__stamp circle { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .55; }
.ff__stamp text { font-family: var(--mono); font-size: 9.6px; letter-spacing: .14em; fill: currentColor; }
.ff__stamp b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 600; }
@keyframes fspin { to { transform: rotate(360deg); } }
.ff__legal { color: var(--text); }
.ff__legal a:hover { color: var(--blue); }

/* ---------- G · JEDAN REDAK ---------- */
.fg { padding-top: 128px; background: var(--ink); color: #fff; overflow: hidden; }
.fg__k { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.fg__mail { display: block; margin-top: 16px; font-size: clamp(28px, 6.4vw, 94px); font-weight: 600; line-height: 1.02; letter-spacing: -0.055em; overflow-wrap: anywhere; }
.fg__t { background: linear-gradient(90deg, #94c6e7 0 50%, #fff 50% 100%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1s var(--ease); }
.fg__mail:hover .fg__t { background-position: 0 0; }
.fg__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 15px; }
.fg__row a { color: rgba(255, 255, 255, .7); transition: color .25s; }
.fg__row a:hover { color: #fff; }
.fg__sp { flex: 1; }
.fg__legal { color: rgba(255, 255, 255, .45); }

/* ---------- H · ZAVJESA ---------- */
.fh { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, #439bd6 0%, #2980b9 45%, #236089 100%); color: #fff; isolation: isolate; }
.fh__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(#000, transparent 70%); opacity: calc((1 - var(--p, 1)) * .55); pointer-events: none; }
.fh__in { padding-top: 64px; will-change: transform; }
.fh__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.fh__logo { display: inline-flex; padding: 12px 16px; border-radius: 8px; background: #fff; }
.fh__nav { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 32px; font-size: 15px; }
.fh__nav a { color: rgba(255, 255, 255, .72); transition: color .25s; }
.fh__nav a:hover { color: #fff; }
.fh__h { display: flex; flex-direction: column; margin: clamp(48px, 8vw, 128px) 0 clamp(40px, 5vw, 64px); font-size: clamp(56px, 11.6vw, 184px); font-weight: 600; line-height: .9; letter-spacing: -0.06em; white-space: nowrap; }
.fh__h span { display: block; will-change: transform; }
.fh__h span:last-child { align-self: flex-end; }
.fh__h em { font-family: "Instrument Serif", serif; font-weight: 400; font-style: italic; letter-spacing: -0.03em; }
.fh__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .25); }
.fh__c { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 48px 24px 0; border-right: 1px solid rgba(255, 255, 255, .18); font-size: clamp(15px, 1.35vw, 19px); font-weight: 500; letter-spacing: -0.015em; overflow: hidden; isolation: isolate; transition: color .35s; }
.fh__c + .fh__c { padding-left: 24px; }
.fh__c:last-child { border-right: 0; }
.fh__c span { overflow-wrap: anywhere; }
.fh__c small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); transition: color .35s; }
.fh__c .fa { position: absolute; right: 16px; top: 22px; transition: transform .45s var(--ease); }
.fh__c::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); }
.fh__c:hover { color: var(--blue); }
.fh__c:hover small { color: var(--muted); }
.fh__c:hover::before { transform: none; }
.fh__c:hover .fa { transform: rotate(45deg); }
.fh__c:first-child:hover { padding-left: 16px; }
.fh__c:first-child { transition: color .35s, padding-left .45s var(--ease); }
.fh__legal, .fi__legal, .fj__legal, .fn__legal, .fl__legal, .fm__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px 0 24px; font-size: 13px; }
.fh__legal nav, .fi__legal nav, .fj__legal nav, .fn__legal nav, .fl__legal nav, .fm__legal nav { display: flex; gap: 24px; }
.fh__legal { border-top: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .65); }
.fh__legal a:hover { color: #fff; }

/* ---------- I · MANOMETAR ---------- */
.fi { padding-top: 80px; }
.fi__grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fi__dial { display: grid; justify-items: center; gap: 16px; }
.fi__gauge { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(0 40px 50px rgba(19, 42, 57, .18)); }
.fi__gauge svg { width: 100%; height: 100%; overflow: visible; }
.fi__bezel { fill: var(--ink); }
.fi__face { fill: #fff; }
.fi__track { fill: none; stroke: var(--line-08); stroke-width: 10; }
.fi__zone { fill: none; stroke: var(--blue); stroke-width: 5; opacity: .22; }
.fi__val { fill: none; stroke: var(--blue); stroke-width: 10; stroke-dasharray: 100; stroke-dashoffset: 100; }
.fi__ticks line { stroke: rgba(10, 10, 11, .35); stroke-width: 1.4; }
.fi__ticks line.mj { stroke: var(--ink); stroke-width: 2.6; }
.fi__ticks text { font-family: var(--mono); font-size: 13px; font-weight: 500; text-anchor: middle; fill: var(--ink); }
.fi__unit { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-anchor: middle; fill: var(--muted); }
.fi__needle path { fill: var(--blue); }
.fi__needle circle { fill: var(--ink); }
.fi__needle .fi__cap { fill: #fff; }
.fi__read { position: absolute; left: 50%; top: 66%; display: flex; align-items: baseline; gap: 2px; transform: translateX(-50%); padding: 8px 16px; border-radius: 8px; background: var(--ink); color: #fff; font-family: var(--mono); }
.fi__read b { min-width: 3ch; font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.fi__read small { font-size: 13px; color: #94c6e7; }
.fi__gauge:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.fi__note { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--muted); text-align: center; }
.fi__note i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: fpulse 2s ease-out infinite; }
.fi__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--blue); }
.fi__eyebrow i { width: 8px; height: 8px; background: var(--blue); }
.fi__h { margin-top: 16px; font-size: clamp(34px, 4vw, 58px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.fi__h span { color: var(--text); }
.fi__rd { margin: 32px 0 0; border-top: 1px solid var(--line-10); }
.fi__rd div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-10); }
.fi__rd dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fi__rd dd { margin: 0; overflow-wrap: anywhere; font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.02em; }
.fi__rd a { transition: color .25s; }
.fi__rd a:hover { color: var(--blue); }
.fi__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.fi__nav li a { display: inline-block; padding: 4px 0; font-size: 15px; transition: color .25s; }
.fi__nav li a:hover { color: var(--blue); }
.fi__legal { margin-top: 64px; border-top: 1px solid var(--line-10); color: var(--text); }
.fi__legal a:hover { color: var(--blue); }

/* ---------- J · TRAKA ---------- */
.fj { padding-top: 64px; overflow: hidden; }
.fj__mq { overflow: hidden; margin-inline: calc(-1 * max(64px, calc((100vw - 1440px) / 2 + 64px))); padding-block: 4px; }
.fj__mq + .fj__mq { border-top: 1px solid var(--line-10); }
.fj__mq--o { padding-bottom: 12px; border-bottom: 1px solid var(--line-10); }
.fj__track { display: flex; width: max-content; will-change: transform; }
.fj__grp { display: flex; align-items: center; flex: none; }
.fj__it { padding: 0 .1em; font-size: clamp(56px, 9vw, 140px); font-weight: 600; line-height: 1.12; letter-spacing: -0.055em; white-space: nowrap; transition: color .3s, opacity .3s; }
.fj__mq:hover .fj__it { opacity: .25; }
.fj__mq .fj__it:hover { opacity: 1; color: var(--blue); }
.fj__mq--o .fj__it { font-size: clamp(40px, 6.4vw, 100px); color: transparent; -webkit-text-stroke: 1.4px var(--ink); }
.fj__mq--o .fj__it:hover { color: var(--blue); -webkit-text-stroke-color: var(--blue); }
.fj__sep { display: grid; place-items: center; flex: none; width: .9em; height: .9em; margin: 0 .35em; border: 2px solid var(--blue); border-radius: 50%; font-size: clamp(22px, 3vw, 44px); }
.fj__sep i { width: .3em; height: .3em; border-radius: 50%; background: var(--blue); }
.fj__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; padding: 48px 0 48px; }
.fj__logo { display: inline-flex; }
.fj__brand p { max-width: 32ch; margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--text); }
.fj__grid li a { display: inline-block; padding: 4px 0; font-size: 15px; transition: color .25s; }
.fj__grid li a:hover { color: var(--blue); }
.fj__legal { border-top: 1px solid var(--line-10); color: var(--text); }
.fj__legal a:hover { color: var(--blue); }

/* ---------- K · NACRT ---------- */
.fn { padding-top: 80px; }
.fn__sheet { position: relative; padding: 32px; border: 1.5px solid var(--ink); background: #fbfcff; background-image: linear-gradient(rgba(41, 128, 185, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 128, 185, .1) 1px, transparent 1px), linear-gradient(rgba(41, 128, 185, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 128, 185, .045) 1px, transparent 1px); background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px; background-position: -1px -1px; }
.fn__edge { position: absolute; display: flex; font-family: var(--mono); font-size: 10px; color: var(--muted); pointer-events: none; }
.fn__edge--t { left: 30px; right: 30px; top: 8px; justify-content: space-around; }
.fn__edge--l { top: 30px; bottom: 30px; left: 10px; flex-direction: column; justify-content: space-around; }
.fn__in { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0; border: 1px solid var(--ink); background: rgba(251, 252, 255, .5); }
.fn__draw { position: relative; padding: 12px; border-right: 1px solid var(--ink); cursor: crosshair; overflow: hidden; }
.fn__draw svg { display: block; width: 100%; height: auto; overflow: visible; }
.fn__draw svg :is(path, rect, circle) { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease), opacity .3s, stroke .3s, stroke-width .3s; }
.fn__draw .fn__pipe { stroke-width: 3; }
.fn__draw .fn__dim, .fn__draw .fn__ld { stroke-width: 1; }
.fn__draw .fn__hatch { stroke: rgba(10, 10, 11, .35); stroke-width: 1; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
.fn__draw .fn__fill { fill: var(--blue); stroke: none; opacity: 0; }
.fn__draw text { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; fill: var(--ink); opacity: 0; transition: opacity .6s .9s; }
.fn__draw .fn__lbl { font-size: 12px; font-weight: 500; letter-spacing: .1em; }
.fn__g--base path { stroke: var(--ink); }
.fn__ball circle { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.fn__ball .fn__ld { stroke: var(--ink); }
.fn__ball text { font-size: 13px; font-weight: 500; text-anchor: middle; }
.fn__sheet.is-in .fn__draw :is(path, rect, circle) { stroke-dashoffset: 0; }
.fn__sheet.is-in .fn__draw text, .fn__sheet.is-in .fn__hatch, .fn__sheet.is-in .fn__fill { opacity: 1; }
.fn__sheet.is-in .fn__draw [data-g="1"] * { transition-delay: .2s; }
.fn__sheet.is-in .fn__draw [data-g="2"] * { transition-delay: .5s; }
.fn__sheet.is-in .fn__draw [data-g="3"] * { transition-delay: .8s; }
.fn__sheet.is-in .fn__draw .fn__ball * { transition-delay: 1.1s; }
.fn__sheet.has-hl .fn__draw :is(.fn__g, .fn__ball):not(.is-hl) { opacity: .22; }
.fn__sheet.has-hl .fn__draw * { transition-delay: 0s !important; }
.fn__draw .fn__g.is-hl :is(path, rect, circle) { stroke: var(--ink); stroke-width: 2.4; }
.fn__draw .fn__g.is-hl .fn__pipe { stroke-width: 4; }
.fn__draw .fn__ball.is-hl circle { fill: var(--blue); stroke: var(--blue); }
.fn__draw .fn__ball.is-hl text { fill: #fff; }
.fn__draw g, .fn__draw a { transition: opacity .3s; }
.fn__cross { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.fn__cross.is-on { opacity: 1; }
.fn__cross i { position: absolute; background: rgba(41, 128, 185, .45); }
.fn__cross i:first-child { left: 0; right: 0; top: var(--y); height: 1px; }
.fn__cross i:last-child { top: 0; bottom: 0; left: var(--x); width: 1px; }
.fn__xy { position: absolute; right: 14px; bottom: 12px; padding: 4px 8px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; }
.fn__side { display: flex; flex-direction: column; justify-content: space-between; }
.fn__leg { margin: 0; padding: 0; list-style: none; }
.fn__leg a { display: flex; align-items: center; gap: 16px; padding: 16px 16px; border-bottom: 1px solid var(--line-16); font-size: 15px; font-weight: 500; transition: background-color .25s, color .25s; }
.fn__leg b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1.4px solid var(--ink); border-radius: 50%; font-family: var(--mono); font-size: 12px; font-weight: 500; transition: background-color .25s, border-color .25s, color .25s; }
.fn__leg .fa { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease); }
.fn__leg a:hover, .fn__leg a.is-hl { background: var(--blue-soft); color: var(--blue); }
.fn__leg a:hover b, .fn__leg a.is-hl b { background: var(--blue); border-color: var(--blue); color: #fff; }
.fn__leg a:hover .fa, .fn__leg a.is-hl .fa { opacity: 1; transform: none; }
.fn__tb { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); background: #fff; font-size: 13px; }
.fn__tb th, .fn__tb td { padding: 8px 12px; border: 1px solid var(--ink); border-width: 0 0 1px 0; text-align: left; vertical-align: top; }
.fn__tb tr:last-child td { border-bottom: 0; }
.fn__tb th { width: 86px; border-right: 1px solid var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 12px; }
.fn__tb td { overflow-wrap: anywhere; }
.fn__tb a { transition: color .25s; }
.fn__tb a:hover { color: var(--blue); }
.fn__tbl { padding: 16px 12px !important; }
.fn__tbs td { width: 33.33%; font-family: var(--mono); font-size: 12px; }
.fn__tbs td + td { border-left: 1px solid var(--ink); }
.fn__tbs small { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fn__legal { color: var(--text); }
.fn__legal a:hover { color: var(--blue); }

/* ---------- L · MONTAŽA ---------- */
.fl { padding-top: 80px; }
.fl__app { border-radius: 16px; background: #101114; color: #e9eaee; box-shadow: 0 50px 90px -50px rgba(19, 42, 57, .55); overflow: hidden; font-size: 13px; }
.fl__bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: #16171b; }
.fl__dots, .fm__dots { display: flex; gap: 8px; }
.fl__dots i, .fm__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.fl__file { font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, .55); }
.fl__tc { margin-left: auto; padding: 4px 12px; border-radius: 6px; background: #000; font-family: var(--mono); font-size: 15px; letter-spacing: .06em; color: #94c6e7; font-variant-numeric: tabular-nums; }
.fl__mon { position: relative; margin: 16px 16px 0; aspect-ratio: 16 / 6.2; min-height: 300px; border-radius: 8px; background: radial-gradient(120% 120% at 85% 10%, #3895d3 0%, #2980b9 45%, #205a81 100%); overflow: hidden; isolation: isolate; color: #fff; }
.fl__dither { z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 70%); mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 70%); }
.fl__safe { position: absolute; inset: 6%; z-index: 1; border: 1px dashed rgba(255, 255, 255, .22); pointer-events: none; }
.fl__safe::before, .fl__safe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1px; background: rgba(255, 255, 255, .35); transform: translate(-50%, -50%); }
.fl__safe::after { width: 1px; height: 22px; }
.fl__bug { position: absolute; right: 7%; top: 9%; z-index: 2; display: inline-flex; padding: 8px 12px; border-radius: 8px; background: #fff; }
.fl__bug img { width: 120px; height: auto; }
.fl__scr { position: absolute; left: 7%; top: 12%; right: 30%; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fl__k { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.fl__title { font-size: clamp(34px, 5vw, 76px); font-weight: 600; line-height: .98; letter-spacing: -0.055em; }
.fl__sub { padding: 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); font-size: 14px; font-weight: 500; backdrop-filter: blur(6px); transition: opacity .3s; }
.fl__sub.is-off, .fl__lt.is-off { opacity: 0; pointer-events: none; }
.fl__lt { position: absolute; left: 7%; bottom: 10%; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 12px 16px; border-left: 4px solid #fff; background: rgba(10, 10, 11, .82); transition: opacity .3s; }
.fl__lt small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #94c6e7; }
.fl__lt b { font-size: clamp(16px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
.fl__lt:hover b, .fl__title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.is-cut { animation: flcut .55s var(--ease) both; }
@keyframes flcut { from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.fl__ctrl { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.fl__play { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #101114; transition: background-color .25s, color .25s; }
.fl__play:hover { background: var(--blue); color: #fff; }
.fl__play .fa { width: 16px; height: 16px; }
.fl__play .fl__pl { display: none; fill: currentColor; }
.fl__play.is-paused .fl__pl { display: block; }
.fl__play.is-paused .fl__pp { display: none; }
.fl__hint { font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.fl__fps { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.fl__tl { padding: 0 16px 16px 0; }
.fl__area { position: relative; margin-left: 128px; cursor: ew-resize; touch-action: none; user-select: none; }
.fl__area.is-drag { cursor: grabbing; }
.fl__ruler { position: relative; height: 26px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .12); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px calc(100% / 48)) 0 100% / 100% 6px no-repeat; }
.fl__ruler span { position: absolute; bottom: 8px; padding-left: 4px; border-left: 1px solid rgba(255, 255, 255, .35); font-family: var(--mono); font-size: 10px; line-height: 1; color: rgba(255, 255, 255, .5); }
.fl__trk { position: relative; height: 46px; margin-bottom: 8px; }
.fl__lbl { position: absolute; right: 100%; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; width: 116px; margin-right: 16px; padding: 0 12px; border-radius: 6px; background: #1a1b20; font-size: 12px; color: rgba(255, 255, 255, .7); }
.fl__lbl b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: #94c6e7; }
.fl__lane { position: absolute; inset: 0; border-radius: 6px; background: rgba(255, 255, 255, .03); }
.fl__clip { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-start; padding: 8px 8px; border-radius: 6px; overflow: hidden; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: filter .25s, box-shadow .25s; }
.fl__clip span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }
.fl__trk--v .fl__clip { background: #3a749b; border: 1px solid #53a3d9; }
.fl__trk--v .fl__clip i { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 26px, rgba(0, 0, 0, .18) 26px 28px); }
.fl__trk--a .fl__clip { background: #20303b; border: 1px solid #374d5d; color: #cbe4f4; }
.fl__trk--a .fl__clip svg { position: absolute; left: 0; right: 0; bottom: 3px; width: 100%; height: 26px; }
.fl__trk--a .fl__clip path { stroke: #85bee4; stroke-width: 1.2; opacity: .8; }
.fl__clip:hover { filter: brightness(1.25); }
.fl__clip.is-act { box-shadow: inset 0 0 0 2px #fff; }
.fl__ph { position: absolute; top: 0; bottom: 0; width: 0; z-index: 3; pointer-events: none; }
.fl__ph::before { content: ""; position: absolute; left: -.75px; top: 0; bottom: 0; width: 1.5px; background: #fff; box-shadow: 0 0 10px rgba(148, 198, 231, .9); }
.fl__ph i { position: absolute; left: -7px; top: 0; width: 14px; height: 18px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.fl__legal { color: var(--text); }
.fl__legal a:hover { color: var(--blue); }

/* ---------- M · BRZI UPIT ---------- */
.fm { padding-top: 80px; }
.fm__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.fm__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--blue); }
.fm__eyebrow i { width: 8px; height: 8px; background: var(--blue); }
.fm__h { margin-top: 16px; font-size: clamp(36px, 4.4vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.fm__h span { color: var(--text); }
.fm__steps { display: flex; gap: 8px; margin: 24px 0 8px; }
.fm__steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--line-10); position: relative; overflow: hidden; }
.fm__steps i::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.fm__steps i.is-on::after { transform: none; }
.fm__q { display: block; padding-top: 24px; }
.fm__lg { display: flex; align-items: baseline; gap: 12px; padding: 0; margin-bottom: 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.fm__lg span { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--blue); }
.fm__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fm__chips button { padding: 12px 16px; border-radius: 6px; background: #fff; border: 1px solid var(--line-16); font-size: 14px; font-weight: 500; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.fm__chips button:hover { border-color: var(--ink); }
.fm__chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fm__chips button:active { transform: scale(.95); }
.fm__q input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line-16); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.fm__q input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.fm__mail { position: sticky; top: 24px; display: flex; flex-direction: column; border-radius: 16px; background: #fff; border: 1px solid var(--line-08); box-shadow: 0 40px 80px -48px rgba(19, 42, 57, .35); overflow: hidden; }
.fm__mh { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--ink); color: rgba(255, 255, 255, .75); font-size: 13px; }
.fm__mr { display: flex; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--line-08); font-size: 14px; }
.fm__mr small { width: 64px; flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.fm__mr span { overflow-wrap: anywhere; }
.fm__body { min-height: 240px; margin: 0; padding: 16px 24px; font-family: var(--font); font-size: 15px; line-height: 1.6; white-space: pre-wrap; color: var(--ink); }
.fm__body::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--blue); animation: fblink 1s steps(1) infinite; }
@keyframes fblink { 50% { opacity: 0; } }
.fm__send { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px; height: 56px; padding: 0 24px 0 24px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 500; transition: background-color .3s; }
.fm__send.is-ready { background: var(--blue); }
.fm__send:hover { background: var(--blue); }
.fm__send .fa { transition: transform .4s var(--ease); }
.fm__send:hover .fa { transform: rotate(45deg); }
.fm__note { padding: 12px 24px 16px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.fm__info { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 48px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-10); }
.fm__info a { display: flex; flex-direction: column; gap: 4px; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; transition: color .25s; }
.fm__info a small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fm__info a:hover { color: var(--blue); }
.fm__logo { margin-left: auto; }
.fm__legal { color: var(--text); }
.fm__legal a:hover { color: var(--blue); }

@media (max-width: 1100px) {
  .fn__in { grid-template-columns: minmax(0, 1fr); }
  .fn__draw { border-right: 0; border-bottom: 1px solid var(--ink); }
  .fh__nav { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 980px) {
  .fh__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fh__c { padding-left: 0 !important; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .fh__top { flex-direction: column; }
  .fi__grid, .fm__grid { grid-template-columns: minmax(0, 1fr); }
  .fi__gauge { max-width: 380px; }
  .fm__mail { position: relative; top: 0; }
  .fj__mq { margin-inline: -24px; }
  .fj__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fj__brand { grid-column: 1 / -1; }
  .fl__mon { aspect-ratio: auto; min-height: 340px; }
  .fl__scr { right: 7%; top: 22%; }
  .fl__area { margin-left: 96px; }
  .fl__lbl { width: 78px; margin-right: 12px; }
  .fl__lbl span { display: none; }
  .fl__lbl { justify-content: center; }
  .fl__hint { display: none; }
}
@media (max-width: 640px) {
  .fh__cols, .fi__nav { grid-template-columns: minmax(0, 1fr); }
  .fh__h { white-space: normal; }
  .fh__h span:last-child { align-self: flex-start; }
  .fi__rd div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fj__grid { grid-template-columns: minmax(0, 1fr); }
  .fn__sheet { padding: 24px 12px 12px 24px; }
  .fn__edge--t { left: 22px; right: 12px; top: 5px; }
  .fn__edge--l { left: 6px; top: 22px; }
  .fn__xy { display: none; }
  .fl__mon { margin: 12px 12px 0; min-height: 320px; }
  .fl__bug img { width: 92px; }
  .fl__area { margin-left: 48px; }
  .fl__lbl { width: 46px; margin-right: 8px; justify-content: center; }
  .fl__fps { display: none; }
  .fl__file { display: none; }
  .fl__ruler span:nth-child(even) { display: none; }
  .fl__clip { font-size: 10.5px; padding: 4px 8px; }
  .fm__logo { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .froot [data-fr] { opacity: 1; transform: none; transition: none; }
  .fb__word b { transform: none; transition: none; }
  .fc__pipe i, .fc__drop b, .ff__stamp svg, .fb__clock i, .ff__live i, .fi__note i, .fm__body::after { animation: none; }
  .fn__draw svg :is(path, rect, circle) { stroke-dashoffset: 0; transition: none; }
  .fn__draw text, .fn__hatch, .fn__fill { opacity: 1 !important; }
  .is-cut { animation: none; }
}
@media (max-width: 980px) {
  .froot > footer { padding-inline: 24px; }
  .fb__top { flex-direction: column; align-items: flex-start; }
  .fb__cta { width: 140px; height: 140px; font-size: 16px; }
  .fb__cols, .fc__net { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc__net { padding-top: 0; margin-top: 48px; row-gap: 40px; }
  .fc__pipe, .fc__drop, .fc__node { display: none; }
  .fd__grid { grid-template-columns: minmax(0, 1fr); }
  .fd__map { min-height: 340px; }
  .fe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "cta cta" "contact clock" "nav1 nav2" "ovl ovl"; }
  .ff__body { grid-template-columns: minmax(0, 1fr); }
  .ff__toc { grid-template-columns: repeat(2, minmax(0, auto)); }
  .fb__bot { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .fb__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fd__row { grid-template-columns: minmax(0, 1fr) auto; }
  .fd__k { grid-column: 1 / -1; }
  .fe__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "cta" "contact" "clock" "nav1" "nav2" "ovl"; }
  .ff__sheet { padding: 24px 24px; }
  .ff__tbl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ff__foot { flex-direction: column; align-items: flex-start; }
  .ff__stamp { width: 96px; height: 96px; }
}