/* ==========================================================================
   Elektroplan Kruševac — globalni stilovi
   Menja se OVDE, ne u index.html. Inline style ostaje samo za vrednosti
   jedinstvene za jedan element (object-position, clamp visine i sl).
   ========================================================================== */

:root {
  /* --- boje ------------------------------------------------------------ */
  --brand: #00B0F0;          /* akcent brenda, dugmad i aktivna stanja */
  --brand-hover: #2CC2FF;
  --brand-deep: #0A6C93;     /* linkovi, eyebrow labele na svetloj podlozi */
  --brand-mid: #0096CE;
  --sky: #6FD7FF;            /* eyebrow na tamnoj podlozi */
  --sky-soft: #BFE9FB;

  --ink: #0B1418;            /* naslovi */
  --ink-2: #1B2C33;          /* tamne sekcije */
  --night: #060D11;          /* footer ćelije */
  --body: #46565E;           /* tekst pasusa */
  --muted: #5E7079;
  --faint: #9FB4BD;

  --paper: #ffffff;
  --line: #E4EAEC;
  --line-2: #E2E8EA;
  --line-3: #C9D4D8;
  --tint: #EDF2F4;
  --tint-2: #F4F7F8;
  --tint-3: #F3F7F8;

  /* --- razmaci --------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
  --wrap: 1360px;
  --wrap-pad: 24px;
  --sec-y: clamp(52px, 9vw, 128px);

  /* --- tipografija ----------------------------------------------------- */
  --font-body: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-head: 'Schibsted Grotesk', 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --fs-eyebrow: 12px;
  --fs-meta: 12px;
  --fs-small: 16px;
  --fs-body: 16px;
  --fs-card-title: 20px;
  --fs-lead: 20px;
  --radius: 4px;
  --radius-sm: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: #ffffff; color: #0B1418; font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
  h1, h2, h3, h4 { font-family: 'Schibsted Grotesk', 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
  a { color: #0A6C93; text-decoration: none; }
  a:hover { color: #00B0F0; }
  h1, h2, h3, h4, p, ul, figure { margin: 0; }
  ul { padding: 0; list-style: none; }
  button, input, textarea, select { font: inherit; color: inherit; }
  summary::-webkit-details-marker { display: none; }
  ::selection { background: #00B0F0; color: #0B1418; }
  .skip { position: fixed; top: -100px; left: 12px; z-index: 999; padding: 12px 20px; border-radius: 4px; background: #0B1418; color: #ffffff; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .04em; box-shadow: 0 8px 28px rgba(11,20,24,.28); transition: top .18s ease; }
  .skip:focus { top: 12px; color: #ffffff; outline: 2px solid #00B0F0; outline-offset: 2px; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes sweep { 0% { transform: translateX(-120%) skewX(-12deg); } 55%, 100% { transform: translateX(320%) skewX(-12deg); } }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  @keyframes cellin { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
  @keyframes growbar { from { transform: scaleY(0); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  @keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  [data-r="svc"] { --svc-cols: repeat(3, minmax(0, 1fr)); }
  [data-track] { --cw: calc((100% - 32px) / 3); }
  [data-if="wide"] { display: contents; }
  [data-if="narrow"] { display: none; }
  @media (max-width: 1119px) { [data-track] { --cw: calc((100% - 16px) / 2); } }
  @media (max-width: 979px) {
    [data-if="wide"] { display: none; }
    [data-if="narrow"] { display: contents; }
    [data-subv-grid], [data-contact-grid], [data-form-grid] { grid-template-columns: minmax(0, 1fr) !important; }
    [data-contact-rows] { max-width: none !important; }
  }
  @media (min-width: 700px) and (max-width: 979px) {
    [data-r="sub"] { flex-direction: row !important; }
    [data-r="sub"] > div { flex: 1 1 0; min-width: 0; }
    [data-stat-wide], [data-pkg-wide] { grid-column: span 2; }
  }
  @media (max-width: 879px) { [data-r="svc"] { --svc-cols: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 719px) {
    [data-calc-card="form"] { order: 1; }
    [data-calc-card="visual"] { order: 2; }
  }
  @media (max-width: 699px) {
    [data-track] { --cw: 100%; }
    [data-r="svc"] { --svc-cols: minmax(0, 1fr); }
  }
  @media (min-width: 980px) {
    /* auto-fit je na 1360px davao 6 kolona, a 12 slotova se tada lomilo u
       raspareni zadnji red; 4 kolone daju tacno tri puna reda */
    footer [data-title-block] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-flow: row !important; }
  }
  @media (min-width: 620px) and (max-width: 979px) {
    footer [data-title-block] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    footer [data-cell] { padding: 28px 28px 32px !important; }
  }
  @media (max-width: 619px) {
    footer [data-title-block] { grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; background: transparent !important; }
    footer [data-cell] { padding: 24px 0 28px !important; }
    footer [data-span] { grid-column: auto !important; }
    [data-rok-grid] { grid-template-columns: minmax(0, 1fr) !important; }
    /* kraca varijanta teksta na telefonu; puna ostaje na desktopu */
    [data-full] { display: none !important; }
    [data-short] { display: inline !important; }
    /* labela iznad vrednosti, da se adresa ne lomi uz rec "Adresa";
       cetvrti red su ikonice mreza, njega ne diramo */
    [data-contact-rows] > div:nth-child(-n+3) { display: grid !important; gap: 8px !important; }
    [data-contact-rows] > div:nth-child(-n+3) > :last-child { text-align: left !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  }
  @media print { header[data-r="nav"], [data-if="cookieOpen"] { display: none !important; } }
  [data-s="1"]:hover{background: rgba(127,127,127,.14)}
  [data-s="2"]:hover{color: var(--nav-fg); background: rgba(127,127,127,.14)}
  [data-s="3"]:hover{color: var(--nav-fg); background: rgba(127,127,127,.14)}
  [data-s="4"]:hover{color: var(--nav-fg); background: rgba(127,127,127,.14)}
  [data-s="5"]:hover{color: var(--nav-fg); background: rgba(127,127,127,.14)}
  [data-s="6"]:hover{color: var(--nav-fg); background: rgba(127,127,127,.14)}
  [data-s="7"]:hover{color: var(--nav-fg); background: rgba(127,127,127,.14)}
  [data-s="8"]:hover{background: #2CC2FF}
  [data-s="9"]:hover{background: #2CC2FF}
  [data-s="10"]:hover{border-color: #00B0F0; background: rgba(0,176,240,.16)}
  [data-s="11"]:hover{border-color: #00B0F0; background: rgba(0,176,240,.16)}
  [data-s="12"]:hover{background: rgba(0,176,240,.10)}
  [data-s="13"]:hover{background: rgba(0,176,240,.10)}
  [data-s="14"]:hover{background: rgba(0,176,240,.10)}
  [data-s="15"]:hover{animation-play-state: paused}
  [data-s="16"]:hover{border-color: #00B0F0; box-shadow: 0 10px 34px rgba(11,20,24,.08); transform: translateY(-3px)}
  [data-s="17"]:hover{border-color: #00B0F0; box-shadow: 0 10px 34px rgba(11,20,24,.08); transform: translateY(-3px)}
  [data-s="18"]:hover{border-color: #00B0F0; box-shadow: 0 10px 34px rgba(11,20,24,.08); transform: translateY(-3px)}
  [data-s="19"]:hover{border-color: #00B0F0; box-shadow: 0 10px 34px rgba(11,20,24,.08); transform: translateY(-3px)}
  [data-s="20"]:hover{border-color: #00B0F0; box-shadow: 0 10px 34px rgba(11,20,24,.08); transform: translateY(-3px)}
  [data-s="21"]:hover{border-color: #00B0F0; box-shadow: 0 10px 34px rgba(11,20,24,.08); transform: translateY(-3px)}
  [data-s="22"]:focus{border-color: #00B0F0; background: rgba(0,176,240,.08)}
  [data-s="23"]:focus{border-color: #00B0F0; background: rgba(0,176,240,.08)}
  [data-s="24"]:hover{background: #2CC2FF}
  [data-s="25"]:hover{border-color: #00B0F0; background: rgba(0,176,240,.14)}
  [data-s="26"]:hover{border-color: #0B1418; background: #F3F7F8}
  [data-s="27"]:hover{border-color: #0B1418; background: #F3F7F8}
  [data-s="28"]:hover{border-color: #BFE9FB}
  [data-s="29"]:hover{border-color: #BFE9FB}
  [data-s="30"]:hover{border-color: #BFE9FB}
  [data-s="31"]:hover{border-color: #BFE9FB}
  [data-s="32"]:hover{border-color: #BFE9FB}
  [data-s="33"]:hover{border-color: #BFE9FB}
  [data-s="34"]:hover{border-color: #0B1418}
  [data-s="35"]:focus{border-bottom-color: #00B0F0}
  [data-s="36"]:focus{border-bottom-color: #00B0F0}
  [data-s="37"]:focus{border-bottom-color: #00B0F0}
  [data-s="38"]:focus{border-bottom-color: #00B0F0}
  [data-s="39"]:focus{border-bottom-color: #00B0F0}
  [data-s="40"]:focus{border-bottom-color: #00B0F0}
  [data-s="41"]:hover{background: #2CC2FF}
  [data-s="42"]:hover{border-color: #ffffff}
  [data-s="43"]:hover{background: #2CC2FF}

/* ==========================================================================
   Ponavljajući obrasci
   ========================================================================== */

/* --- omotači sekcija ---------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-pad); }
.sec-light { background: var(--paper); padding: var(--sec-y) 0; }

/* --- eyebrow labele ----------------------------------------------------- */
.eb-sky { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
.eb-blue { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--brand-deep); }
.eb-grey { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.eb-grey-sm { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.eb-grey-b { display: block; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* --- navigacija --------------------------------------------------------- */
.nav-link { color: var(--nav-dim); padding: 8px 16px; border-radius: var(--radius-sm); }
.nav-mlink { color: var(--nav-fg); padding: 12px 0; border-bottom: 1px solid rgba(127,127,127,.16); }

/* --- logotipi partnera i paketa ----------------------------------------- */
.mark { flex: 0 0 auto; display: block; width: auto; }

/* --- kartice usluga ----------------------------------------------------- */
.svc-card { background: var(--paper); border: 1px solid var(--line-2); border-radius: 3px; padding: var(--sp-8) 32px 36px; display: flex; flex-direction: column; align-items: flex-start; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.svc-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 3px; background: rgba(0,176,240,.10); }
.svc-title { margin-top: 24px; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.02em; }
.svc-text { margin-top: 12px; font-size: var(--fs-small); line-height: 1.55; color: var(--body); }

/* --- galerija projekata ------------------------------------------------- */
.proj-drag { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.proj-drag img { -webkit-user-drag: none; }
.proj-card { flex: 0 0 auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; width: var(--cw); }
.proj-media { position: relative; aspect-ratio: 4 / 3; background: var(--tint); overflow: hidden; }
.proj-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.proj-no { position: absolute; top: var(--sp-3); left: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; color: var(--paper); background: rgba(11,20,24,.72); padding: 4px 8px; border-radius: var(--radius-sm); }
.proj-cap { padding: 20px var(--sp-5) var(--sp-5); }
.proj-title { font-size: var(--fs-card-title); font-weight: 600; letter-spacing: -.018em; color: var(--ink); }
.proj-meta { margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .06em; color: var(--muted); }
.gal-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 48px; height: 48px;
  padding: 0;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* strelice ← → nema u latin subsetu JetBrains Mono-a, pa je svaki glif padao
     na drugi fallback font i izgledao nepravilno — zato sistemski stack */
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; line-height: 1;
  color: var(--ink);
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background .2s ease;
}
.gal-btn > span { display: block; transform: translateY(-.5px); }

.tick { flex: 1 1 0; height: 2px; border: 0; border-radius: var(--radius-sm); padding: 0; cursor: pointer; transition: background .35s ease; background: var(--line); }

/* --- paketi / cene ------------------------------------------------------ */
.pkg-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease; }
.pkg-media { position: relative; height: clamp(138px, 13vw, 170px); background: var(--tint-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.pkg-no { position: absolute; top: 11px; left: 14px; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .16em; color: var(--brand-deep); }
.pkg-logo { display: block; width: 62%; max-width: 168px; height: auto; }
.pkg-body { padding: 24px 28px 28px; }
.pkg-title { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.02em; }
.pkg-text { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.55; color: var(--body); }

/* --- česta pitanja ------------------------------------------------------ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: clamp(40px, 5vw, 68px) minmax(0, 1fr) 26px; gap: clamp(12px, 2vw, 28px); align-items: start; padding: clamp(20px, 2.4vw, 32px) 0; }
.faq-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--brand-deep); padding-top: 8px; }
.faq-q { font-size: clamp(20px, 1.9vw, 24px); font-weight: 500; letter-spacing: -.022em; line-height: 1.28; text-wrap: pretty; }
.faq-plus { justify-self: end; font-family: var(--font-mono); font-size: 20px; line-height: 1; color: var(--brand); padding-top: var(--sp-1); transform-origin: 50% 55%; will-change: transform; }
.faq-body { display: grid; grid-template-columns: clamp(40px, 5vw, 68px) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); padding-bottom: clamp(24px, 2.6vw, 32px); }
.faq-a { font-size: var(--fs-body); line-height: 1.65; color: var(--body); max-width: 76ch; }

/* --- forma -------------------------------------------------------------- */
.field { margin-top: var(--sp-2); width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.28); padding: 12px 0; font-size: 16px; color: var(--paper); outline: none; }

/* --- footer ------------------------------------------------------------- */
.foot-cell { background: var(--night); padding: clamp(24px, 2.2vw, 28px) 24px clamp(24px, 2.4vw, 32px); }
/* osam linkova u cetiri kolone; auto-fit je davao 7 traka i ostavljao Kontakt sam */
footer nav[data-foot-nav] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 479px) {
  footer nav[data-foot-nav] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.dim { color: rgba(255,255,255,.82); }

/* ==========================================================================
   Podstranice — zajednički obrasci (O nama, Usluge, Cene, Projekti,
   Subvencije, Kontakt, Blog). Početna ih ne koristi.
   ========================================================================== */

/* --- mrvice ------------------------------------------------------------- */
.crumb { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
[data-short] { display: none; }
[data-full] { display: inline; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--brand-deep); }
.crumb span { color: var(--line-3); margin: 0 8px; }

/* --- hero podstranice --------------------------------------------------- */
.sub-hero { background: var(--paper); padding: clamp(112px, 12vw, 172px) 0 clamp(44px, 6vw, 84px); }
.sub-head { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(20px, 4vw, 72px); align-items: end; }
.sub-h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.038em; font-weight: 700; color: var(--ink); max-width: 15ch; }
.lead { font-size: clamp(16px, 1.35vw, var(--fs-lead)); line-height: 1.6; color: var(--body); max-width: 62ch; }

/* --- hero varijante podstranica ----------------------------------------
   Isti jezik (mono eyebrow, hairline linije, jedan akcent), razlicit raspored
   po stranici: Usluge = indeks, Projekti = fotografija, Subvencije = kartica. */
.hero-2col { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(28px, 4vw, 72px); align-items: start; }

.hero-idx { display: grid; align-content: start; border-top: 1px solid var(--line); }
.hero-idx a { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 1.1em; align-items: baseline; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -.016em; transition: color .18s ease; }
.hero-idx a:hover { color: var(--brand-deep); }
.hero-idx a > b { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: .14em; color: var(--faint); }
.hero-idx a > i { font-style: normal; justify-self: end; color: var(--line-3); transition: color .18s ease, transform .18s ease; }
.hero-idx a:hover > i { color: var(--brand); transform: translateX(3px); }

.hero-shot { position: relative; background: #091115; overflow: hidden; isolation: isolate; min-height: clamp(360px, 42vw, 560px); display: flex; align-items: flex-end; }
.hero-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-shot > .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,13,17,.90) 0%, rgba(6,13,17,.74) 50%, rgba(6,13,17,.46) 100%); }
.hero-shot > .wrap { position: relative; z-index: 2; width: 100%; padding-top: clamp(124px, 13vw, 188px); padding-bottom: clamp(44px, 6vw, 88px); }

/* Usluge: naslov sam levo, pa direktorijum svih sest usluga preko cele sirine —
   bez kolone teksta uz naslov, da se ne poklapa sa ostalim podstranicama. */
.hero-dir { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line-3); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-dir a { display: block; padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 32px) clamp(20px, 2.2vw, 32px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); transition: background .18s ease; }
.hero-dir a:nth-child(3n) { border-right: 0; }
.hero-dir a:nth-child(3n+1) { padding-left: 0; }
.hero-dir a:nth-last-child(-n+3) { border-bottom: 0; }
.hero-dir a:hover { background: var(--paper); }
.hero-dir b { display: block; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: .16em; color: var(--brand-deep); }
.hero-dir em { display: block; margin-top: 12px; font-style: normal; font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; letter-spacing: -.024em; line-height: 1.24; text-wrap: pretty; }
.hero-dir span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (max-width: 879px) {
  .hero-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-dir a:nth-child(3n) { border-right: 1px solid var(--line); }
  .hero-dir a:nth-child(3n+1) { padding-left: clamp(20px, 2.2vw, 32px); }
  .hero-dir a:nth-child(2n) { border-right: 0; }
  .hero-dir a:nth-child(2n+1) { padding-left: 0; }
  .hero-dir a:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .hero-dir a:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 559px) {
  .hero-dir { grid-template-columns: minmax(0, 1fr); }
  .hero-dir a, .hero-dir a:nth-child(3n+1), .hero-dir a:nth-child(2n+1) { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 0; }
  .hero-dir a:last-child { border-bottom: 0; padding-bottom: 0; }
}

.hero-meta.stack { grid-template-columns: minmax(0, 1fr); border-top-color: var(--line-3); }
.hero-meta.stack > div { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 0; }
.hero-meta.stack > div:last-child { border-bottom: 0; }

/* Procenti kao glavni vizual heroja: tri brojke sa barovima na tamnoj podlozi */
.hero-pct { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255,255,255,.22); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.hero-pct .eb-grey { color: rgba(255,255,255,.62); }
.hero-pct .band-num { margin-top: 12px; color: #ffffff; }
.hero-pct .bar { background: rgba(255,255,255,.18); }
.hero-pct .note { margin-top: 12px; color: rgba(255,255,255,.72); }
@media (max-width: 779px) {
  .hero-pct { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Usluge: tamna podloga kao O nama, ali bez fotografije — nosi je
   direktorijum svih sest usluga. */
.hero-ink { background: var(--ink); padding: clamp(112px, 12vw, 172px) 0 clamp(56px, 7vw, 96px); }
.hero-ink .crumb, .hero-ink .crumb a { color: rgba(255,255,255,.62); }
.hero-ink .crumb a:hover { color: var(--sky); }
.hero-ink .crumb span { color: rgba(255,255,255,.3); }
.hero-ink .sub-h1 { color: #ffffff; }
.hero-ink .lead { color: rgba(255,255,255,.84); }
.hero-ink .hero-dir { border-top-color: rgba(255,255,255,.24); }
.hero-ink .hero-dir a { border-right-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.14); color: #ffffff; }
.hero-ink .hero-dir a:hover { background: rgba(255,255,255,.05); }
.hero-ink .hero-dir b { color: var(--sky); }
.hero-ink .hero-dir span { color: rgba(255,255,255,.66); }
@media (max-width: 879px) {
  .hero-ink .hero-dir a:nth-child(3n) { border-right-color: rgba(255,255,255,.14); }
  .hero-ink .hero-dir a:nth-last-child(-n+3) { border-bottom-color: rgba(255,255,255,.14); }
}

/* Subvencije: svetao hero sa jednim dijagramom — ko koliko placa. Jedini hero
   na sajtu koji vodi grafikom, pa se ne meša sa ostalim podstranicama. */
.hero-split { background: var(--paper); padding: clamp(112px, 12vw, 172px) 0 clamp(56px, 7vw, 96px); }
.hero-split .hero-doc > h1 { max-width: 17ch; }
.hero-split .lead { max-width: 56ch; }

.pay { margin-top: clamp(40px, 5vw, 72px); }
.pay-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.pay-bar { display: grid; grid-template-columns: 65fr 35fr; border: 1px solid var(--line-3); border-radius: var(--radius-sm); overflow: hidden; }
.pay-bar > div { padding: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 24px); min-width: 0; }
.pay-bar > div:first-child { background: var(--ink); border-right: 2px solid var(--brand); }
.pay-bar > div:last-child { background: var(--tint); }
.pay-num { font-family: var(--font-head); font-size: clamp(28px, 3.4vw, 44px); line-height: 1; font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.pay-bar > div:first-child .pay-num { color: #ffffff; }
.pay-bar > div:last-child .pay-num { color: var(--ink); }
.pay-sub { margin-top: 12px; font-size: 12px; line-height: 1.5; }
.pay-bar > div:first-child .pay-sub { color: rgba(255,255,255,.76); }
.pay-bar > div:last-child .pay-sub { color: var(--muted); }

.pay-cases { margin-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pay-cases > div { padding: 20px 24px 0; border-right: 1px solid var(--line); }
.pay-cases > div:first-child { padding-left: 0; }
.pay-cases > div:last-child { border-right: 0; }
.pay-cases .cv { margin-top: 8px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 719px) {
  .pay-bar { grid-template-columns: minmax(0, 1fr); }
  .pay-bar > div:first-child { border-right: 0; border-bottom: 2px solid var(--brand); }
  .pay-head { display: none; }
  .pay-cases { grid-template-columns: minmax(0, 1fr); }
  .pay-cases > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 0; }
  .pay-cases > div:last-child { border-bottom: 0; }
}

/* Subvencije: ravna tamna podloga, bez fotografije — drzavni program,
   citko kao sluzbeni dokument i vizuelno odvojeno od svetlih podstranica. */
.hero-flat { background: var(--ink-2); padding: clamp(112px, 12vw, 172px) 0 clamp(56px, 7vw, 96px); }
.hero-flat .crumb, .hero-flat .crumb a { color: rgba(255,255,255,.62); }
.hero-flat .crumb a:hover { color: var(--sky); }
.hero-flat .crumb span { color: rgba(255,255,255,.3); }
.hero-flat .sub-h1 { color: #ffffff; }
.hero-flat .lead { color: rgba(255,255,255,.86); }
.hero-flat .hero-meta { border-top-color: rgba(255,255,255,.22); }
.hero-flat .hero-meta > div { border-right-color: rgba(255,255,255,.14); }
.hero-flat .hero-meta .eb-grey { color: rgba(255,255,255,.58); }
.hero-flat .hero-meta .fv { color: #ffffff; }
.hero-flat .hero-meta .fv > b { color: var(--sky); }
@media (max-width: 899px) {
  .hero-flat .hero-meta > div { border-bottom-color: rgba(255,255,255,.14); }
}
.hero-doc { margin-top: clamp(28px, 3.4vw, 44px); }
.hero-doc > h1 { max-width: 19ch; }
.hero-doc > .lead { margin-top: clamp(20px, 2.4vw, 32px); }
.hero-meta { margin-top: clamp(36px, 4.6vw, 64px); border-top: 1px solid var(--line-3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-meta > div { padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 32px) clamp(20px, 2vw, 24px); border-right: 1px solid var(--line); }
.hero-meta > div:first-child { padding-left: 0; }
.hero-meta > div:last-child { border-right: 0; }
.hero-meta, .hero-meta dd { margin: 0; }
.hero-meta .fv { margin-top: 8px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.35; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.hero-meta .fv > b { font-weight: 600; color: var(--brand-deep); }
/* 2x2 na tabletu: cetiri kolone ispod ~900px postaju preuske za mono labele */
@media (max-width: 899px) and (min-width: 720px) {
  .hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-meta > div:nth-child(odd) { padding-left: 0; }
  .hero-meta > div:nth-child(even) { border-right: 0; }
  .hero-meta > div:nth-child(1), .hero-meta > div:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 719px) {
  .hero-meta { grid-template-columns: minmax(0, 1fr); }
  .hero-meta > div { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 0; }
  .hero-meta > div:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* --- naslovi i tekst ---------------------------------------------------- */
.h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.032em; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.h4 { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.p { font-size: var(--fs-body); line-height: 1.7; color: var(--body); max-width: 68ch; }
.p + .p { margin-top: 20px; }
.note { font-size: 12px; line-height: 1.6; color: var(--muted); }
.sec { padding: var(--sec-y) 0; }
.sec-tint { background: var(--tint-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: var(--sec-y) 0; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(24px, 4vw, 72px); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --- traka sa brojevima ------------------------------------------------- */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 4px; background: var(--line); border: 1px solid var(--line); }
.band-cell { background: var(--paper); padding: 24px 24px 28px; }
.band-num { margin-top: 16px; font-family: var(--font-head); font-size: clamp(32px, 3.6vw, 48px); line-height: .95; font-weight: 500; letter-spacing: -.04em; color: var(--ink); }

/* --- tamna sekcija ------------------------------------------------------ */
.dark { background: var(--ink); color: #ffffff; padding: var(--sec-y) 0; }
.dark .h2, .dark .h4 { color: #ffffff; }
.dark .p { color: rgba(255,255,255,.80); }
.dark .note { color: rgba(255,255,255,.60); }

/* --- dugmad ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--brand); color: #ffffff; font-weight: 600; font-size: 16px; padding: 16px 28px; border-radius: var(--radius-sm); transition: background .22s ease; }
.btn:hover { background: var(--brand-hover); color: #ffffff; }
.btn-ghost { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line-3); color: var(--ink); font-weight: 500; font-size: 16px; padding: 16px 28px; border-radius: var(--radius-sm); transition: border-color .22s ease, background .22s ease; }
.btn-ghost:hover { border-color: var(--ink); background: var(--tint-3); color: var(--ink); }
.dark .btn-ghost { border-color: rgba(255,255,255,.30); color: #ffffff; }
.dark .btn-ghost:hover { border-color: #ffffff; background: transparent; color: #ffffff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- traka logotipa ----------------------------------------------------- */
.strip-mask { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.strip-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.strip-track:hover { animation-play-state: paused; }
.strip-set { display: flex; align-items: center; gap: clamp(32px, 4vw, 56px); padding-right: clamp(32px, 4vw, 56px); }

/* --- CTA blok pred footerom --------------------------------------------- */
.cta-band { background: var(--ink); color: #ffffff; padding: clamp(48px, 6vw, 92px) 0; }
.cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: end; }

/* --- liste sa crticom --------------------------------------------------- */
.list { display: grid; gap: 12px; margin-top: 20px; }
.list li { position: relative; padding-left: 24px; font-size: var(--fs-small); line-height: 1.6; color: var(--body); }
.list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--brand); }
.dark .list li { color: rgba(255,255,255,.80); }

/* --- usluge: naizmenične sekcije ---------------------------------------- */
.svc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(24px, 4vw, 72px); padding: clamp(36px, 5vw, 68px) 0; border-top: 1px solid var(--line); align-items: start; }
.svc-no { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .16em; color: var(--brand-deep); }
@media (min-width: 820px) { .svc-row.alt .svc-a { order: 2; } }

/* --- česta pitanja, native details -------------------------------------- */
.faq-plus { transition: transform .22s ease; }
details.faq-item[open] .faq-plus { transform: rotate(45deg); }
details.faq-item > summary::marker { content: ""; }

/* --- koraci -------------------------------------------------------------- */
.step { display: grid; grid-template-columns: clamp(44px, 6vw, 86px) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line); }
.step-no { font-family: var(--font-mono); font-size: clamp(16px, 2vw, 24px); font-weight: 300; color: var(--brand); line-height: 1.1; }

/* --- barovi i tabele ----------------------------------------------------- */
.bar { margin-top: 12px; height: 5px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); }
.dark .bar { background: rgba(255,255,255,.16); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 400; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); color: var(--ink); vertical-align: middle; }

/* --- paketi cena --------------------------------------------------------- */
.price { font-family: var(--font-head); font-size: clamp(40px, 4.4vw, 56px); line-height: 1; font-weight: 500; letter-spacing: -.04em; color: var(--ink); }
.plan { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); }
.plan.hi { border-color: var(--brand); }

/* --- dijagram proizvodnje ------------------------------------------------ */
.chart { display: flex; align-items: flex-end; gap: clamp(4px, .8vw, 12px); height: clamp(130px, 16vw, 190px); }
.chart > div { flex: 1 1 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.chart i { display: block; align-self: end; width: 100%; background: var(--brand); border-radius: 1px; transform-origin: 50% 100%; animation: growbar .7s cubic-bezier(.2,.8,.25,1) both; }
.chart span { margin-top: 8px; display: block; text-align: center; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; color: var(--faint); }


/* Usluge, naizmenični redovi */
.svc-stack{margin-top: clamp(20px,2.5vw,32px)}
.svc-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap: clamp(28px,5vw,80px);align-items:center;padding: clamp(36px,5.5vw,80px) 0;border-top:1px solid #DCE4E7}
.svc-item.rev .svc-text{order:2}
.svc-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:4px}
.svc-img-tall{aspect-ratio:3/4;object-position:center}
@media (max-width:860px){
  .svc-item{grid-template-columns:1fr;gap: 24px;padding: 36px 0}
  .svc-item.rev .svc-text{order:0}
  .svc-item .svc-media{order:-1}
  .svc-img{aspect-ratio:16/9}
  .svc-img-tall{aspect-ratio:3/4;width:100%;max-width:100%;max-height:none;margin:0}
}

/* Projekti, naizmenični redovi */
.pj-row{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap: clamp(28px,4vw,64px);align-items:start}
.pj-row.rev .pj-media{order:2}
.pj-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:4px}
.pj-img.tall{aspect-ratio:3/4}
@media (max-width:900px){
  .pj-row{grid-template-columns:1fr;gap: 20px}
  .pj-row.rev .pj-media{order:0}
  .pj-img{aspect-ratio:16/9}
  .pj-img.tall{aspect-ratio:3/4;max-height:70vh;width:auto;margin:0 auto}
}