/* ============================================================
   LARSOON — Landing page styles (layout 3A)
   Implements Larsoon Landing 3A design 1:1 on top of tokens.css
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; font-family:var(--font-text); }
body{
  background:var(--white); color:var(--ink);
  font-family:var(--font-text);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum";
}
img{ max-width:100%; }
a{ color:var(--cyan-800); }
a:hover{ color:var(--cyan-600); }

.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--cyan); color:var(--on-cyan);
  font-family:var(--font-text); font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:0 0 11px 0; text-decoration:none;
}
.skip-link:focus{ left:0; color:var(--on-cyan); }

/* ---------- Design-system components ---------- */

/* Button */
.btn{
  font-family:var(--font-text); font-weight:700; line-height:1;
  border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:9px; text-decoration:none; white-space:nowrap;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--sm{ font-size:14px; padding:10px 18px; }
.btn--md{ font-size:15px; padding:14px 26px; }
.btn--lg{ font-size:17px; padding:17px 32px; }
.btn--primary{ background:var(--cyan); color:var(--on-cyan); box-shadow:var(--shadow-cyan); }
.btn--primary:hover{ background:var(--cyan-bright); color:var(--on-cyan); }
.btn--dark{ background:var(--slate-900); color:#fff; box-shadow:var(--shadow-sm); }
.btn--dark:hover{ background:var(--slate-800); color:#fff; }
.btn--ghost-on-dark{ background:transparent; color:#fff; border-color:var(--slate-700); }
.btn--ghost-on-dark:hover{ border-color:var(--cyan); color:#fff; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn:disabled:hover{ transform:none; }
.btn--dark:disabled:hover{ background:var(--slate-900); }
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.btn .lucide{ width:18px; height:18px; }
.btn--lg .lucide{ width:20px; height:20px; }

/* Eyebrow */
.eyebrow--on-dark{ color:var(--cyan); }

/* IconChip */
.chip{
  width:44px; height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.chip .lucide{ width:22px; height:22px; }
.chip--lg{ width:56px; height:56px; border-radius:16px; }
.chip--lg .lucide{ width:26px; height:26px; }
.chip--cyan{ background:var(--cyan-tint); color:var(--cyan-800); }
.chip--savings{ background:var(--savings-tint); color:var(--savings); }
.chip--solar{ background:var(--solar-tint); color:#B57A00; }
.chip--indigo{ background:var(--indigo-tint); color:var(--indigo); }

/* SectionHeader */
.section-header{ max-width:620px; }
.section-header--center{ text-align:center; margin-inline:auto; }
.section-header h2{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2);
  line-height:var(--lh-tight); letter-spacing:var(--tracking-display);
  color:var(--ink); margin:12px 0 0;
}
h1, .section-header h2, .calc h2, .cta h2{ text-wrap:balance; }
.section-header .lead{
  font-family:var(--font-text); font-weight:500; font-size:var(--fs-lead);
  line-height:1.5; color:var(--text-muted); margin:16px 0 0; text-wrap:pretty;
}
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 1 · Sticky nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,20,28,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--slate-700);
}
.nav__inner{
  max-width:1360px; margin:0 auto; padding:14px clamp(20px,3vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo{
  height:34px; width:auto; display:block;
  /* flex može stisnuti sidro — logo se tada skalira proporcionalno, nikad razvučen */
  object-fit:contain; object-position:left center;
}
.nav__links{ display:flex; gap:clamp(26px,2.4vw,36px); align-items:center; }
.nav__links a{
  font-family:var(--font-text); font-size:14px; font-weight:500;
  color:var(--n-300); text-decoration:none; white-space:nowrap; border-radius:4px;
}
.nav__links a:hover{ color:#fff; }
.nav__links a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.nav__links a.is-active{
  color:#fff;
  text-decoration:underline; text-decoration-color:var(--cyan);
  text-decoration-thickness:2px; text-underline-offset:6px;
}
.nav__actions{ display:flex; align-items:center; gap:10px; }
.nav__menu-btn{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid var(--slate-700); background:transparent; color:#fff;
  border-radius:11px; cursor:pointer;
}
.nav__menu-btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.nav__menu-btn .lucide{ width:20px; height:20px; }
.nav__mobile{
  display:none; border-top:1px solid var(--slate-700);
  background:rgba(11,20,28,.98);
  flex-direction:column; padding:6px var(--gutter) 14px;
}
.nav__mobile.is-open{ display:flex; }
.nav__mobile a{
  font-family:var(--font-text); font-size:15px; font-weight:600; color:var(--n-300);
  text-decoration:none; min-height:48px; display:flex; align-items:center;
  border-bottom:1px solid var(--slate-800);
}
.nav__mobile a:last-child{ border-bottom:none; }
.nav__mobile a:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }

/* ---------- FZOEU banner ---------- */
.banner{ background:var(--slate-800); border-bottom:1px solid var(--slate-700); }
.banner.is-closed{ display:none; }
.banner__inner{
  max-width:var(--maxw); margin:0 auto; padding:6px var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative; min-height:48px;
}
.banner__inner > .lucide{ width:16px; height:16px; color:var(--cyan); flex-shrink:0; }
.banner__text{
  font-family:var(--font-text); font-size:13.5px; font-weight:600; color:#fff;
  text-align:center; padding-right:48px;
}
.banner__text strong{ color:var(--cyan); font-weight:600; }
.banner__close{
  position:absolute; right:clamp(12px,4vw,60px); top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; cursor:pointer; color:var(--n-300);
  border-radius:999px;
}
.banner__close:hover{ background:rgba(255,255,255,.08); color:#fff; }
.banner__close:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }
.banner__close .lucide{ width:18px; height:18px; }

/* ---------- 2 · Hero ---------- */
.hero{ position:relative; background:var(--midnight); overflow:hidden; }
.hero__glow{
  position:absolute; width:820px; height:820px; right:-220px; top:-320px;
  background:radial-gradient(circle, rgba(0,206,241,.18), transparent 62%);
  pointer-events:none;
}
.grad-rule{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--grad); }
.hero__grid{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--gutter);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px);
  align-items:center;
}
.hero h1{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-hero);
  line-height:1.0; letter-spacing:-.02em; color:#fff; margin:18px 0 0; max-width:16ch;
}
.hero__lead{
  font-family:var(--font-text); font-weight:500; font-size:clamp(16px,1.6vw,19px);
  line-height:1.55; color:var(--n-300); margin:24px 0 0; max-width:52ch;
}
.hero__ctas{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.hero__trust{
  display:flex; gap:8px; margin-top:28px; align-items:center; color:var(--n-400);
  font-family:var(--font-text); font-size:13.5px; font-weight:500;
}
.hero__trust .lucide{ width:16px; height:16px; color:var(--cyan); }
.hero__aside{ display:flex; justify-content:flex-end; }
.hero__img{
  position:relative; height:420px; width:100%; max-width:460px;
  border-radius:24px; overflow:hidden; border:1px solid var(--slate-700);
  box-shadow:var(--shadow);
}
.hero__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__img span{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,20,28,0) 55%, rgba(11,20,28,.55) 100%);
}

/* ---------- 3 · Trust strip ---------- */
.trust{ background:var(--n-50); border-block:1px solid var(--n-200); }
.trust__grid{
  max-width:var(--maxw); margin:0 auto; padding:28px var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.trust__item{ display:flex; align-items:center; gap:14px; }
.trust__num{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.trust__label{ font-family:var(--font-text); font-size:13px; color:var(--n-500); font-weight:500; }

/* ---------- 4 · Calculator ---------- */
.calc{ position:relative; background:var(--midnight); overflow:hidden; }
.calc__glow{
  position:absolute; width:700px; height:700px; left:50%; top:-380px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(0,206,241,.16), transparent 62%);
  pointer-events:none;
}
.calc__inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:clamp(56px,7vw,96px) var(--gutter); text-align:center;
}
.calc h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(29px,4.2vw,42px);
  letter-spacing:-.02em; color:#fff; margin:20px 0 0; line-height:1.15;
}
.calc__sub{
  font-family:var(--font-text); font-size:16px; font-weight:500; color:var(--n-300);
  margin:14px auto 0; max-width:52ch; line-height:1.5;
}
.calc__tabs-wrap{ display:flex; justify-content:center; margin-top:28px; }
.calc__tabs{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--slate-700);
}
.calc__tab{
  border:none; cursor:pointer; border-radius:999px; min-height:44px; padding:0 20px;
  font-family:var(--font-text); font-size:13.5px; font-weight:600; white-space:nowrap;
  background:transparent; color:var(--n-300);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.calc__tab:hover{ color:#fff; }
.calc__tab:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.calc__tab[aria-pressed="true"]{ background:var(--cyan); color:#04232C; }
.calc__tab[aria-pressed="true"]:hover{ color:#04232C; }
.calc__lead{
  font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2vw,22px);
  letter-spacing:-.01em; color:var(--n-300); line-height:1.3; margin:22px 0 0;
}
.calc__stage{ display:flex; flex-direction:column; align-items:center; gap:22px; margin-top:20px; }
.calc__value-row{ display:flex; align-items:baseline; gap:8px; }
.calc__value{
  font-family:var(--font-display); font-weight:800; font-size:clamp(54px,7vw,76px);
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.calc__unit{
  font-family:var(--font-display); font-weight:700; font-size:30px;
  color:var(--n-400); white-space:nowrap;
}
.calc__slider-wrap{ width:100%; max-width:460px; text-align:left; }

/* Slider (design-system Slider, on dark) */
.slider{ display:flex; flex-direction:column; gap:14px; }
.slider__head{ display:flex; justify-content:space-between; align-items:baseline; }
.slider__label{ font-family:var(--font-text); font-size:14px; font-weight:600; color:var(--n-400); }
.slider__readout{
  font-family:var(--font-display); font-weight:700; font-size:22px;
  letter-spacing:var(--tracking-display); color:var(--cyan); font-variant-numeric:tabular-nums;
}
.slider__readout small{ font-size:14px; font-weight:600; color:var(--n-400); margin-left:4px; }
.slider__track-zone{ position:relative; height:28px; display:flex; align-items:center; }
.slider__track{
  position:absolute; left:0; right:0; height:8px; border-radius:999px;
  background:rgba(255,255,255,.12);
}
.slider__fill{
  position:absolute; left:0; height:8px; border-radius:999px; background:var(--grad);
}
.slider input[type=range]{
  position:relative; width:100%; margin:0; background:transparent;
  -webkit-appearance:none; appearance:none; height:28px; cursor:pointer;
}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; border-radius:50%;
  background:#fff; border:none;
  box-shadow:0 2px 8px -1px rgba(11,20,28,.28), 0 0 0 5px rgba(0,206,241,.9);
  cursor:pointer; margin-top:0;
}
.slider input[type=range]::-moz-range-thumb{
  width:28px; height:28px; border-radius:50%;
  background:#fff; border:none;
  box-shadow:0 2px 8px -1px rgba(11,20,28,.28), 0 0 0 5px rgba(0,206,241,.9);
  cursor:pointer;
}
.slider input[type=range]::-webkit-slider-runnable-track{ background:transparent; height:28px; }
.slider input[type=range]::-moz-range-track{ background:transparent; height:8px; }
.slider input[type=range]:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; border-radius:8px; }

/* Battery chip */
.calc__batt{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  background:transparent; border:1.5px solid var(--slate-700); color:var(--n-300);
  border-radius:999px; padding:0 20px; cursor:pointer;
  font-family:var(--font-text); font-size:14px; font-weight:600;
}
.calc__batt:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.calc__batt[aria-pressed="true"]{ background:var(--cyan); border-color:var(--cyan); color:#04232C; }
.calc__batt .lucide{ width:17px; height:17px; }
.calc__batt span{ white-space:nowrap; }

/* KPI row */
.calc__kpi{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:44px; padding-top:34px; border-top:1px solid var(--slate-700); text-align:left;
}
.calc__kpi > div{ padding:0 20px; border-left:1px solid var(--slate-700); }
.calc__kpi > div:first-child{ padding-left:0; border-left:none; }
.calc__kpi > div:last-child{ padding-right:0; }
.kpi__label{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--n-400);
}
.kpi__value{
  font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.6vw,32px);
  letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums;
  margin-top:8px; white-space:nowrap;
}
.kpi__value small{ font-size:.5em; color:var(--n-400); font-weight:600; }
.kpi__value--cyan{ color:var(--cyan); }
.kpi__value--savings{ color:var(--savings); }
.calc__roi{ text-align:center; margin-top:18px; }
.calc__roi span{ font-family:var(--font-text); font-size:13px; color:var(--n-400); font-weight:500; }
.calc__roi strong{ color:var(--cyan); font-weight:700; font-variant-numeric:tabular-nums; }
.calc__cta{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:38px; }
.calc__note{
  font-family:var(--font-text); font-size:13px; color:var(--n-300); margin:0;
  max-width:64ch; line-height:1.6; text-wrap:pretty;
}
details.calc__note summary{
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  font-weight:600; color:var(--n-400); list-style:none; min-height:44px;
}
details.calc__note summary::-webkit-details-marker{ display:none; }
details.calc__note summary::after{
  content:""; width:7px; height:7px; margin-top:-4px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform var(--dur) var(--ease);
}
details.calc__note[open] summary::after{ transform:rotate(225deg); margin-top:3px; }
details.calc__note p{ margin:2px 0 0; }
/* Na širokim ekranima napomena je uvijek vidljiva (JS otvara details), toggle se skriva */
@media (min-width:581px){
  details.calc__note summary{ display:none; }
}

/* ---------- Sections (shared) ---------- */
.section{ background:var(--white); }
.section--tint{ background:var(--n-50); border-block:1px solid var(--n-200); }
.section__inner{ max-width:var(--maxw); margin:0 auto; padding:var(--section-pad) var(--gutter); }

/* ---------- 5 · Why Larsoon ---------- */
.stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.stat-card{
  background:var(--white); border:1px solid var(--n-200); border-radius:16px;
  padding:28px; text-align:center; box-shadow:0 2px 4px rgba(11,20,28,.04);
}
.stat-card__num{
  font-family:var(--font-display); font-weight:700; font-size:42px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.stat-card__num small{ font-size:.45em; color:var(--n-400); font-weight:600; }
.stat-card__num--savings{ color:var(--savings); }
.stat-card__label{ font-family:var(--font-text); font-size:14px; color:var(--n-500); font-weight:500; margin-top:6px; }
.photo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px; }
.photo-row__item{
  position:relative; height:200px; border-radius:16px; background:var(--midnight); overflow:hidden;
}
.photo-row__item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.link-more{ text-align:center; margin-top:24px; }
.link-more a{
  font-family:var(--font-text); font-size:14.5px; font-weight:600;
  color:var(--cyan-800); text-decoration:none;
}
.link-more a:hover{ color:var(--cyan-600); }

/* ---------- 6 · How it works — hodogram timeline ---------- */
.tl-legend{
  display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:26px;
}
.tl-legend__item{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-text); font-size:13px; font-weight:600; color:var(--n-500);
}
.tl{ position:relative; max-width:960px; margin:44px auto 0; }
.tl::before{
  content:""; position:absolute; left:23px; top:24px; bottom:24px; width:3px;
  background:linear-gradient(180deg, var(--cyan-bright) 0%, var(--cyan) 55%, var(--azure) 100%);
  border-radius:3px;
}
.tl__step{ position:relative; padding:0 0 22px 76px; }
.tl__step:last-child{ padding-bottom:0; }
/* linija završava na zadnjem krugu, ne uz dno zadnje kartice */
.tl__step:last-child::after{
  content:""; position:absolute; top:48px; bottom:-2px; left:19px; width:11px;
  background:var(--n-50);
}
.tl__num{
  position:absolute; left:0; top:0; z-index:1;
  display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:19px;
  background:var(--white); border:2px solid var(--cyan); color:var(--cyan-800);
  box-shadow:0 0 0 6px var(--n-50), 0 6px 18px -8px rgba(0,206,241,.55);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.tl__step:hover .tl__num{
  background:var(--cyan); color:var(--on-cyan); transform:scale(1.06);
}
.tl__card{
  background:var(--white); border:1px solid var(--n-200); border-radius:16px;
  padding:20px 22px; box-shadow:0 2px 4px rgba(11,20,28,.04);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.tl__step:hover .tl__card{
  transform:translateY(-2px); border-color:var(--cyan-tint-2);
  box-shadow:var(--shadow-sm), 0 18px 40px -24px rgba(11,20,28,.4);
}
/* Ulazna animacija (scroll reveal) — samo uz JS i bez reduced-motion */
@media (prefers-reduced-motion: no-preference){
  html.js .tl__step{ opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
  html.js .tl__step.in-view{ opacity:1; transform:none; }
}
.tl__head{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.tl__card h3{
  font-family:var(--font-display); font-weight:600; font-size:17px;
  margin:0; line-height:1.3; flex:1; min-width:200px;
}
.tl__tags{ display:flex; gap:6px; flex-wrap:wrap; }
.tl__tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.tl__tag .lucide{ width:12px; height:12px; }
.tl__tag--vi{ background:var(--cyan-tint); color:var(--cyan-800); }
.tl__tag--mi{ background:var(--savings-tint); color:var(--savings); }
.tl__tag--pay{ background:var(--solar-tint); color:#B57A00; border:1px solid rgba(246,166,9,.45); }
.tl__card p{ font-family:var(--font-text); font-size:14px; color:var(--n-500); margin:0; line-height:1.6; }
.tl__card p strong{ color:var(--ink); font-weight:700; }
.steps-note{
  text-align:center; font-family:var(--font-text); font-size:15px; font-weight:600;
  color:var(--ink); margin:32px 0 0;
}
/* Desktop: središnja linija, kartice naizmjenično lijevo/desno.
   Parni koraci se podižu negativnom marginom da se stupci preklapaju —
   inače svaki korak zauzima cijeli red i nastaju veliki prazni razmaci. */
@media (min-width:941px){
  .tl::before{ left:50%; transform:translateX(-50%); }
  .tl__step{ width:50%; padding:0 60px 22px 0; }
  .tl__step:nth-child(odd) .tl__num{ left:auto; right:-24px; }
  .tl__step:nth-child(even){ margin-left:50%; margin-top:-96px; padding:0 0 22px 60px; }
  .tl__step:nth-child(even) .tl__num{ left:-24px; }
  .tl__step:first-child + .tl__step{ margin-top:-72px; }
  .tl__step:last-child{ padding-bottom:0; }
  .tl__step:last-child::after{ left:-6px; width:12px; }
}
.paybar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  max-width:840px; margin:30px auto 0;
}
.paybar__item{
  position:relative; overflow:hidden;
  background:var(--solar-tint); border:1px solid rgba(246,166,9,.45); border-radius:16px;
  padding:16px 12px 14px; text-align:center;
  display:flex; flex-direction:column; gap:3px;
}
.paybar__item::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, #F6A609, #B57A00);
}
.paybar__pct{
  font-family:var(--font-display); font-weight:700; font-size:26px;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:#B57A00;
}
.paybar__label{ font-family:var(--font-text); font-size:12.5px; font-weight:600; color:var(--n-600); }
.kako-final{
  position:relative; max-width:840px; margin:32px auto 0; overflow:hidden;
  background:var(--midnight); border-radius:20px; padding:40px 28px 38px;
  text-align:center; color:#fff;
}
.kako-final::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); z-index:1;
}
.kako-final__glow{
  position:absolute; width:520px; height:520px; left:50%; top:-300px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(0,206,241,.22), transparent 62%);
  pointer-events:none;
}
.kako-final > *{ position:relative; }
.kako-final .lucide{ width:34px; height:34px; color:var(--cyan); }
.kako-final h3{
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,28px);
  margin:12px 0 0; color:#fff; letter-spacing:-.02em;
}
.kako-final p{
  font-family:var(--font-text); font-size:15px; color:var(--n-300);
  margin:12px auto 0; max-width:56ch; line-height:1.6;
}
.steps-cta{ text-align:center; margin-top:40px; }
.steps-cta p{ font-family:var(--font-text); font-size:15px; color:var(--n-600); margin:0 0 16px; font-weight:500; }

/* ---------- 7 · Solutions ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.sol-card{
  border:1px solid var(--n-200); border-radius:20px; overflow:hidden; background:var(--white);
  box-shadow:0 2px 4px rgba(11,20,28,.04);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sol-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.sol-card__img{
  position:relative; height:180px; background:var(--midnight);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sol-card__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
a.sol-card{ display:flex; flex-direction:column; text-decoration:none; }
.sol-card__body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.sol-card h3{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0 0 8px; color:var(--ink); }
.sol-card p{ font-family:var(--font-text); font-size:14px; color:var(--n-500); margin:0; line-height:1.55; }
.sol-card__more, .service__more{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:14px;
  font-family:var(--font-text); font-size:13px; font-weight:700; color:var(--cyan-800);
}
.sol-card__more .lucide, .service__more .lucide{
  width:15px; height:15px; transition:transform var(--dur) var(--ease);
}
.sol-card:hover .sol-card__more .lucide,
.service:hover .service__more .lucide{ transform:translateX(3px); }
.sol-note{
  text-align:center; font-family:var(--font-text); font-size:15px; color:var(--n-600); margin:32px 0 0;
}
.sol-note a{ color:var(--cyan-800); font-weight:600; text-decoration:none; }

/* ---------- 8 · Services ---------- */
.services{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px; margin-top:44px;
}
.service{
  background:var(--white); border:1px solid var(--n-200); border-radius:16px;
  padding:22px; display:flex; flex-direction:column; gap:12px;
  text-decoration:none;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.service:hover{
  transform:translateY(-3px); border-color:var(--cyan-tint-2);
  box-shadow:var(--shadow-sm), 0 18px 40px -24px rgba(11,20,28,.4);
}
.service h3{ font-family:var(--font-display); font-weight:600; font-size:16px; margin:0; color:var(--ink); }
.service__more{ margin-top:auto; padding-top:2px; }
.service p{ font-family:var(--font-text); font-size:13px; color:var(--n-500); margin:0; line-height:1.5; }

/* ---------- 9 · Our work ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.gallery__item{
  position:relative; height:220px; border-radius:16px; background:var(--midnight);
  overflow:hidden; transition:transform .3s var(--ease);
}
.gallery__item:hover{ transform:translateY(-4px); }
.gallery__item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery__caption{
  position:absolute; bottom:12px; left:12px;
  font-family:var(--font-mono); font-size:10.5px; color:#fff;
  background:rgba(11,20,28,.72); border:1px solid var(--slate-700);
  padding:6px 11px; border-radius:11px; line-height:1.45; backdrop-filter:blur(4px);
}
.warranty{
  display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:32px;
  font-family:var(--font-text); font-size:14px; font-weight:600; color:var(--n-600);
}
.warranty span{ display:inline-flex; gap:8px; align-items:center; }
.warranty .lucide{ width:17px; height:17px; color:var(--cyan-600); }

/* ---------- FAQ ---------- */
.faq__inner{ max-width:840px; margin:0 auto; padding:var(--section-pad) var(--gutter); }
.faq__list{ display:flex; flex-direction:column; gap:12px; margin-top:40px; }
.faq__item{ background:var(--white); border:1px solid var(--n-200); border-radius:16px; overflow:hidden; }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:56px; padding:16px 22px; background:transparent; border:none;
  cursor:pointer; text-align:left;
}
.faq__q:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }
.faq__q span{ font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); }
.faq__q .lucide{ width:20px; height:20px; color:var(--n-500); flex-shrink:0; transition:transform var(--dur) var(--ease); }
.faq__item.is-open .faq__q .lucide{ transform:rotate(180deg); }
.faq__a{
  display:none; padding:0 22px 20px;
  font-family:var(--font-text); font-size:14.5px; line-height:1.65; color:var(--n-600);
}
.faq__item.is-open .faq__a{ display:block; animation:faqOpen 180ms var(--ease); }
@keyframes faqOpen{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- 10 · Final CTA ---------- */
.cta{ position:relative; background:var(--midnight); overflow:hidden; }
.cta__glow{
  position:absolute; width:700px; height:700px; left:50%; top:-360px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(0,206,241,.16), transparent 60%);
  pointer-events:none;
}
.cta__inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:var(--section-pad) var(--gutter); text-align:center;
}
.cta h2{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2);
  letter-spacing:-.02em; color:#fff; margin:0 0 18px; line-height:1.1;
}
.cta p{
  font-family:var(--font-text); font-size:16px; font-weight:500; color:var(--n-300);
  margin:0 auto 28px; max-width:52ch; line-height:1.55;
}

/* ---------- 11 · Contact ---------- */
.contact{ background:var(--n-50); }
.contact__grid{
  max-width:var(--maxw); margin:0 auto; padding:var(--section-pad) var(--gutter);
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:start;
}
.contact__items{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.contact__item{ display:flex; gap:14px; align-items:center; }
.contact__item a{
  font-family:var(--font-text); font-size:15px; font-weight:600; text-decoration:none;
}
.contact__item a[href^="mailto"]{ color:var(--cyan-800); }
.contact__item a[href^="tel"]{ color:var(--ink); }
.contact__item address{
  font-family:var(--font-text); font-size:15px; font-weight:500; color:var(--n-600); font-style:normal;
}
.form{
  background:var(--white); border:1px solid var(--n-200); border-radius:20px; padding:28px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:18px;
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--font-text); font-size:13px; font-weight:600; color:var(--n-600); }
.field label em{ color:var(--cyan-600); font-style:normal; }
.field input, .field textarea{
  font-family:var(--font-text); font-size:16px; font-weight:500; color:var(--ink);
  border:1.5px solid var(--n-200); border-radius:var(--r-sm); padding:13px 14px;
  outline:none; background:var(--white); width:100%;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea{ resize:vertical; }
.field input:focus, .field textarea:focus{
  border-color:var(--cyan); box-shadow:0 0 0 4px rgba(0,206,241,.16);
}
.gdpr{ display:flex; align-items:flex-start; gap:10px; }
.gdpr input[type=checkbox]{ position:absolute; opacity:0; width:1px; height:1px; }
.gdpr__box{
  width:20px; height:20px; flex:0 0 auto; margin-top:1px; border-radius:6px;
  border:1.5px solid var(--n-300); background:var(--white);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  cursor:pointer;
}
.gdpr__box svg{ display:none; }
.gdpr input:checked ~ .gdpr__box{ background:var(--cyan); border-color:var(--cyan); }
.gdpr input:checked ~ .gdpr__box svg{ display:block; }
.gdpr input:focus-visible ~ .gdpr__box{ outline:2px solid var(--cyan); outline-offset:2px; }
.gdpr__label{
  font-family:var(--font-text); font-size:13px; color:var(--n-600); line-height:1.5; cursor:pointer;
}
.gdpr__label a{ color:var(--cyan-800); font-weight:600; text-decoration:none; }
.form__hint{
  font-family:var(--font-text); font-size:12.5px; color:var(--n-500);
  margin:-8px 0 0; text-align:center;
}
.form__error{
  display:none; font-family:var(--font-text); font-size:12.5px; color:var(--error);
  margin:-8px 0 0; text-align:center;
}
.form__error a{ color:var(--error); font-weight:600; }
.form__success{ display:none; flex-direction:column; align-items:center; gap:12px; padding:28px 0; text-align:center; }
.form__success h3{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0; }
.form__success p{ font-family:var(--font-text); font-size:14px; color:var(--n-500); margin:0; }
.form.is-sent .form__fields{ display:none; }
.form.is-sent .form__success{ display:flex; }
.form__fields{ display:flex; flex-direction:column; gap:18px; }

/* ---------- 12 · Footer ---------- */
.footer{ background:var(--footer); color:var(--n-400); }
.footer__grid{
  max-width:var(--maxw); margin:0 auto; padding:64px var(--gutter) 48px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
}
.footer__logo{ width:100%; max-width:200px; height:auto; margin-bottom:16px; }
.footer__about{ font-family:var(--font-text); font-size:13px; line-height:1.65; margin:0; max-width:34ch; }
.footer__social{ display:flex; gap:10px; margin-top:18px; }
.footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--slate-800); color:var(--n-400);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer__social a:hover{ border-color:var(--cyan); color:var(--cyan); }
.footer__social a:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.footer__social .lucide{ width:19px; height:19px; }
.footer__col-title{
  font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--n-300);
  margin-bottom:14px; letter-spacing:.02em;
}
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer ul a{ font-family:var(--font-text); font-size:13.5px; color:var(--n-400); text-decoration:none; }
.footer ul a:hover{ color:var(--cyan); }
.footer__bottom{ border-top:1px solid var(--slate-800); }
.footer__bottom-inner{
  max-width:var(--maxw); margin:0 auto; padding:20px var(--gutter);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:12px;
}
.footer__legal{ display:inline-flex; gap:14px; flex-wrap:wrap; font-size:12.5px; }
.footer__legal a{
  color:var(--n-300); text-decoration:underline; text-underline-offset:3px; padding:4px 0;
}
.footer__legal a:hover{ color:var(--cyan); }

/* ---------- Wiki: indeks ---------- */
.wiki-tools{ display:flex; flex-direction:column; gap:16px; align-items:center; margin-top:36px; }
.wiki-search{
  position:relative; width:100%; max-width:460px;
  display:flex; align-items:center; gap:10px;
  background:var(--white); border:1.5px solid var(--n-200); border-radius:var(--r-pill);
  padding:0 18px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wiki-search:focus-within{ border-color:var(--cyan); box-shadow:0 0 0 4px rgba(0,206,241,.16); }
.wiki-search .lucide{ width:18px; height:18px; color:var(--n-400); flex-shrink:0; }
.wiki-search input{
  flex:1; border:0; outline:0; background:transparent; min-width:0;
  font-family:var(--font-text); font-size:15px; font-weight:500; color:var(--ink);
  padding:13px 0;
}
.wiki-filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.wiki-filter{
  display:inline-flex; align-items:center; gap:7px; min-height:38px;
  border:1px solid var(--n-200); background:var(--white); color:var(--n-600);
  border-radius:var(--r-pill); padding:0 16px; cursor:pointer;
  font-family:var(--font-text); font-size:13.5px; font-weight:600;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wiki-filter span{ font-family:var(--font-mono); font-size:11px; color:var(--n-400); }
.wiki-filter:hover{ border-color:var(--n-400); }
.wiki-filter:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.wiki-filter.is-active{ background:var(--slate-900); border-color:var(--slate-900); color:#fff; }
.wiki-filter.is-active span{ color:var(--n-400); }
.wiki-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px; margin-top:36px;
}
.wiki-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--white); border:1px solid var(--n-200); border-radius:16px;
  padding:24px; text-decoration:none; box-shadow:0 2px 4px rgba(11,20,28,.04);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wiki-card:hover{
  transform:translateY(-3px); border-color:var(--cyan-tint-2);
  box-shadow:var(--shadow-sm), 0 18px 40px -24px rgba(11,20,28,.4);
}
.wiki-card h3{
  font-family:var(--font-display); font-weight:600; font-size:18px;
  color:var(--ink); margin:0; line-height:1.3; letter-spacing:-.01em;
}
.wiki-card p{
  font-family:var(--font-text); font-size:14px; color:var(--n-500);
  margin:0; line-height:1.6;
}
.wiki-card__more{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:6px;
  font-family:var(--font-text); font-size:13px; font-weight:700; color:var(--cyan-800);
}
.wiki-card__more .lucide{ width:15px; height:15px; transition:transform var(--dur) var(--ease); }
.wiki-card:hover .wiki-card__more .lucide{ transform:translateX(3px); }
.wiki-cat{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.wiki-cat--cyan{ background:var(--cyan-tint); color:var(--cyan-800); }
.wiki-cat--indigo{ background:var(--indigo-tint); color:var(--indigo); }
.wiki-cat--savings{ background:var(--savings-tint); color:var(--savings); }
.wiki-cat--solar{ background:var(--solar-tint); color:#B57A00; }
.wiki-empty{
  text-align:center; font-family:var(--font-text); font-size:15px;
  color:var(--n-500); margin:36px 0 0;
}

/* ---------- Članak ---------- */
.crumbs{
  font-family:var(--font-text); font-size:13px; color:var(--n-500);
  margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap;
}
.crumbs a{ color:var(--n-500); text-decoration:none; }
.crumbs a:hover{ color:var(--cyan-800); }
.crumbs span[aria-current]{ color:var(--n-400); }
.article{ background:var(--white); }
.article__head{
  max-width:820px; margin:0 auto; padding:clamp(32px,5vw,56px) var(--gutter) 0;
}
.article__head h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4vw,44px);
  line-height:1.12; letter-spacing:-.02em; color:var(--ink);
  margin:14px 0 0; text-wrap:balance;
}
.article__excerpt{
  font-family:var(--font-text); font-weight:500; font-size:var(--fs-lead);
  line-height:1.55; color:var(--n-500); margin:16px 0 0; text-wrap:pretty;
}
.article__meta{
  display:flex; gap:20px; flex-wrap:wrap; margin-top:22px; padding-bottom:26px;
  border-bottom:1px solid var(--n-200);
  font-family:var(--font-text); font-size:13px; font-weight:500; color:var(--n-500);
}
.article__meta span{ display:inline-flex; align-items:center; gap:7px; }
.article__meta .lucide{ width:15px; height:15px; color:var(--n-400); }
.article__body{
  max-width:1060px; margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start;
}
.toc{ position:sticky; top:100px; padding-top:36px; }
.toc__title{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--n-400); margin-bottom:12px;
}
.toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--n-200); }
.toc a{
  display:block; padding:7px 0 7px 14px; margin-left:-2px; border-left:2px solid transparent;
  font-family:var(--font-text); font-size:13.5px; font-weight:500; color:var(--n-500);
  text-decoration:none; line-height:1.4;
}
.toc a:hover{ color:var(--ink); }
.toc a.is-active{ color:var(--cyan-800); border-left-color:var(--cyan); font-weight:600; }

/* proza članka */
.prose{ padding:36px 0 8px; max-width:70ch; font-variant-ligatures:none; }
.prose h2{
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,27px);
  letter-spacing:-.02em; color:var(--ink); line-height:1.25;
  margin:44px 0 14px; scroll-margin-top:96px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  font-family:var(--font-display); font-weight:600; font-size:19px;
  letter-spacing:-.01em; color:var(--ink); margin:30px 0 10px; scroll-margin-top:96px;
}
.prose p{
  font-family:var(--font-text); font-size:16.5px; line-height:1.75;
  color:var(--n-600); margin:0 0 18px;
}
.prose strong{ color:var(--ink); font-weight:700; }
.prose ul, .prose ol{ margin:0 0 18px; padding-left:22px; }
.prose li{
  font-family:var(--font-text); font-size:16.5px; line-height:1.7;
  color:var(--n-600); margin-bottom:9px;
}
.prose li::marker{ color:var(--cyan-600); }
.prose a{ color:var(--cyan-800); font-weight:600; }
.prose code{
  font-family:var(--font-mono); font-size:.88em; background:var(--n-100);
  padding:2px 6px; border-radius:6px; color:var(--ink);
}
.prose blockquote{
  margin:24px 0; padding:18px 22px;
  background:var(--cyan-tint); border-radius:14px;
  font-family:var(--font-text); font-size:16px; line-height:1.65; color:var(--slate-800);
}
.prose__table{ overflow-x:auto; margin:0 0 22px; }
.prose__table table{
  width:100%; border-collapse:collapse;
  border:1px solid var(--n-200); border-radius:14px; overflow:hidden;
}
.prose__table th{
  background:var(--n-50); text-align:left; padding:12px 14px;
  font-family:var(--font-text); font-size:13px; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--n-200); white-space:nowrap;
}
.prose__table td{
  padding:12px 14px; border-bottom:1px solid var(--n-200);
  font-family:var(--font-text); font-size:14.5px; color:var(--n-600);
  font-variant-numeric:tabular-nums;
}
.prose__table tr:last-child td{ border-bottom:0; }
.prose__cta{
  margin-top:44px; background:var(--midnight); border-radius:20px;
  padding:30px 28px; text-align:center; position:relative; overflow:hidden;
}
.prose__cta::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); }
.prose__cta h3{
  font-family:var(--font-display); font-weight:600; font-size:21px;
  color:#fff; margin:0 0 8px; letter-spacing:-.01em;
}
.prose__cta p{
  font-family:var(--font-text); font-size:14.5px; color:var(--n-300);
  margin:0 auto 20px; max-width:46ch; line-height:1.6;
}
.article-nav{
  max-width:1060px; margin:44px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.article-nav__item{
  display:flex; flex-direction:column; gap:6px;
  background:var(--white); border:1px solid var(--n-200); border-radius:16px;
  padding:18px 22px; text-decoration:none;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.article-nav__item:hover{
  transform:translateY(-2px); border-color:var(--cyan-tint-2);
  box-shadow:var(--shadow-sm), 0 14px 34px -24px rgba(11,20,28,.4);
}
.article-nav__item span{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--n-400);
}
.article-nav__item span .lucide{ width:13px; height:13px; }
.article-nav__item strong{
  font-family:var(--font-display); font-weight:600; font-size:15.5px;
  color:var(--ink); line-height:1.35;
}
.article-nav__item--next{ text-align:right; }
.article-nav__item--next span{ justify-content:flex-end; }
.article-nav__item--empty{ border:none; background:transparent; }
@media (max-width:640px){
  .article-nav{ grid-template-columns:1fr; }
  .article-nav__item--empty{ display:none; }
}

.article__related{
  max-width:1060px; margin:0 auto; padding:52px var(--gutter) var(--section-pad);
  border-top:1px solid var(--n-200); margin-top:56px;
}
.article__related h2{
  font-family:var(--font-display); font-weight:700; font-size:24px;
  letter-spacing:-.01em; color:var(--ink); margin:0;
}
.article__related .wiki-grid{ margin-top:22px; grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .article__related .wiki-grid{ grid-template-columns:1fr; } }

/* ---------- Wiki teaser na landingu ---------- */
.wiki-teaser__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.wiki-teaser__head .section-header{ margin:0; max-width:640px; }
.wiki-teaser__all{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding-bottom:6px;
  font-family:var(--font-text); font-size:14.5px; font-weight:600;
  color:var(--cyan-800); text-decoration:none;
}
.wiki-teaser__all .lucide{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.wiki-teaser__all:hover .lucide{ transform:translateX(3px); }

/* ---------- Detaljne stranice (rješenja / usluge) ---------- */
.detail-hero{ position:relative; background:var(--midnight); overflow:hidden; }
.detail-hero__glow{
  position:absolute; width:760px; height:760px; right:-200px; top:-320px;
  background:radial-gradient(circle, rgba(0,206,241,.18), transparent 62%); pointer-events:none;
}
.detail-hero__grid{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px,6vw,76px) var(--gutter);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center;
}
.detail-hero .crumbs, .detail-hero .crumbs a{ color:var(--n-400); }
.detail-hero .crumbs a:hover{ color:var(--cyan); }
.detail-hero h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4.4vw,50px);
  line-height:1.08; letter-spacing:-.02em; color:#fff; margin:14px 0 0; text-wrap:balance;
}
.detail-hero__lead{
  font-family:var(--font-text); font-weight:500; font-size:clamp(16px,1.5vw,18.5px);
  line-height:1.6; color:var(--n-300); margin:18px 0 0; max-width:52ch;
}
.detail-hero__ctas{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.detail-hero__img{
  position:relative; height:340px; width:100%; border-radius:20px; overflow:hidden;
  border:1px solid var(--slate-700); box-shadow:var(--shadow);
}
.detail-hero__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.detail-specs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px; margin-top:44px;
}
.detail-spec{
  background:var(--white); border:1px solid var(--n-200); border-radius:16px;
  padding:24px; box-shadow:0 2px 4px rgba(11,20,28,.04);
}
.detail-spec__val{
  font-family:var(--font-display); font-weight:700; font-size:30px;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.detail-spec__val small{ font-size:.5em; color:var(--n-400); font-weight:600; }
.detail-spec__label{
  font-family:var(--font-text); font-size:13.5px; color:var(--n-500); font-weight:500; margin-top:6px;
}
.section-header--sub{ max-width:none; margin-top:64px; }
.section-header--sub h2{
  font-size:clamp(23px,2.6vw,30px); line-height:1.2; margin:0;
}
.detail-list{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:16px; margin-top:28px;
}
@media (max-width:760px){ .detail-list{ grid-template-columns:1fr; } }
.detail-list__item{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--white); border:1px solid var(--n-200); border-radius:16px; padding:20px;
}
.detail-list__item .chip{ margin-top:2px; }
.detail-list__item h3{
  font-family:var(--font-display); font-weight:600; font-size:16.5px;
  margin:0 0 5px; color:var(--ink);
}
.detail-list__item p{
  font-family:var(--font-text); font-size:14px; color:var(--n-500);
  margin:0; line-height:1.6;
}
.detail-cross{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; margin-top:32px;
}
.detail-cross a{
  display:flex; flex-direction:column; gap:6px;
  background:var(--white); border:1px solid var(--n-200); border-radius:16px;
  padding:20px 22px; text-decoration:none;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.detail-cross a:hover{
  transform:translateY(-3px); border-color:var(--cyan-tint-2);
  box-shadow:var(--shadow-sm), 0 18px 40px -24px rgba(11,20,28,.4);
}
.detail-cross strong{
  font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--ink);
}
.detail-cross span{ font-family:var(--font-text); font-size:13.5px; color:var(--n-500); line-height:1.55; }

/* ---------- Legal pages (H1 + prose) ---------- */
.legal-main{ max-width:760px; margin:0 auto; padding:clamp(48px,6vw,80px) var(--gutter); }
.legal-main h1{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2);
  letter-spacing:var(--tracking-display); line-height:var(--lh-tight);
  color:var(--ink); margin:0 0 10px;
}
.legal-main h2{
  font-family:var(--font-display); font-weight:600; font-size:20px;
  letter-spacing:-.01em; color:var(--ink); margin:36px 0 10px;
}
.legal-main p, .legal-main li{
  font-family:var(--font-text); font-size:15.5px; line-height:1.7;
  color:var(--n-600); margin:0 0 14px;
  font-variant-ligatures:none; /* Manrope pretvara "(c)" u © — u pravnom tekstu to mijenja značenje */
}
.legal-main ul{ padding-left:22px; margin:0 0 14px; }
.legal-updated{ font-size:13.5px; color:var(--n-500); font-style:italic; margin-bottom:28px; }
.legal-main mark{
  background:var(--solar-tint); color:#B57A00; font-weight:600;
  padding:1px 6px; border-radius:6px;
}
.legal-main a{ color:var(--cyan-800); font-weight:600; text-decoration:none; }
.legal-main a:hover{ color:var(--cyan-600); }
.legal-back{
  font-family:var(--font-text); font-size:14px; font-weight:600;
  color:var(--n-300); text-decoration:none; white-space:nowrap;
}
.legal-back:hover{ color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width:940px){
  .hero__grid, .contact__grid, .detail-hero__grid{ grid-template-columns:1fr; }
  .article__body{ grid-template-columns:1fr; gap:0; }
  .toc{
    position:static; padding:28px 0 0;
    border-bottom:1px solid var(--n-200); padding-bottom:20px;
  }
  .toc ul{ border-left:0; flex-direction:row; flex-wrap:wrap; gap:8px; }
  .toc a{
    padding:7px 13px; margin:0; border:1px solid var(--n-200);
    border-radius:var(--r-pill); font-size:13px;
  }
  .toc a.is-active{ border-color:var(--cyan); }
  .prose{ padding-top:26px; }
  .trust__grid, .cards, .gallery, .footer__grid, .photo-row{ grid-template-columns:1fr 1fr; }
  .footer__grid > div:first-child{ grid-column:1 / -1; }
  .nav__links{ display:none; }
  .nav__menu-btn{ display:flex; }
  .hero__aside{ justify-content:flex-start; }
}
@media (max-width:700px){
  .calc__kpi{ grid-template-columns:1fr 1fr; row-gap:20px; }
  .calc__kpi > div{ border-left:none; padding:0; }
}
@media (max-width:580px){
  .trust__grid, .cards, .gallery, .photo-row, .services, .stats-row, .footer__grid{
    grid-template-columns:1fr;
  }
  .hero__img{ height:280px; }
  .tl::before{ left:19px; }
  .tl__step{ padding-left:58px; }
  .tl__num{ width:40px; height:40px; font-size:16px; }
  .tl__step:last-child::after{ left:15px; top:40px; }
  .paybar{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   Mobile compact (≤580px) — manje teksta i okvira, više ekrana.
   Desktop ostaje netaknut; sadržaj se ne briše nego sklapa.
   ============================================================ */
@media (max-width:580px){
  /* Tekst koji na malom ekranu ne donosi novu informaciju */
  .u-m-hide{ display:none !important; }

  /* Dupli sadržaj: brojke i fotke iz "Zašto" postoje u trust stripu i galeriji */
  .stats-row, .photo-row, .tl-legend, .kako-final{ display:none; }

  /* Trust strip: kompaktna 2×2 mreža umjesto 4 reda */
  .trust__grid{ grid-template-columns:1fr 1fr; gap:16px 12px; padding-block:22px; }
  .trust__item{ gap:10px; }
  .trust__item .chip{ width:38px; height:38px; border-radius:10px; }
  .trust__item .chip .lucide{ width:19px; height:19px; }
  .trust__num{ font-size:16px; }
  .trust__label{ font-size:12px; }

  /* Hodogram: kartice bez okvira, opisi na dodir (accordion kao FAQ) */
  .tl__card{ border:0; background:transparent; box-shadow:none; padding:2px 0 0; border-radius:0; }
  .tl__step{ padding-bottom:24px; }
  .tl__step:hover .tl__card{ transform:none; box-shadow:none; border-color:transparent; }
  /* Glava koraka: naslov preko cijele širine, oznake u redu ispod njega */
  .tl__head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .tl__card h3{ font-size:16px; min-width:0; flex:none; width:100%; }
  html.js .tl__card > p{ display:none; }
  html.js .tl__step.is-open .tl__card > p{ display:block; margin-top:8px; animation:faqOpen 180ms var(--ease); }
  html.js .tl__head{ cursor:pointer; position:relative; padding-right:28px; margin-bottom:0; }
  html.js .tl__head::after{
    content:""; position:absolute; right:6px; top:7px; width:8px; height:8px;
    border-right:2px solid var(--n-400); border-bottom:2px solid var(--n-400);
    transform:rotate(45deg); transition:transform var(--dur) var(--ease);
  }
  html.js .tl__step.is-open .tl__head::after{ transform:rotate(225deg); top:11px; }

  /* Dinamika plaćanja: jedan kompaktan red umjesto 2×2 kutije */
  .paybar{ grid-template-columns:repeat(4,1fr); gap:6px; }
  .paybar__item{ padding:10px 4px 9px; border-radius:12px; gap:2px; }
  .paybar__pct{ font-size:17px; }
  .paybar__label{ font-size:10px; line-height:1.3; }

  /* Rješenja: kompaktne horizontalne kartice (slika lijevo, tekst desno) */
  .cards{ gap:12px; margin-top:28px; }
  a.sol-card{ flex-direction:row; border-radius:16px; }
  .sol-card__img{ width:108px; flex:0 0 108px; height:auto; }
  .sol-card__body{ padding:14px 16px; }
  .sol-card h3{ font-size:16px; margin-bottom:4px; }
  .sol-card p{
    font-size:13px; display:-webkit-box; -webkit-line-clamp:3;
    -webkit-box-orient:vertical; overflow:hidden;
  }
  .sol-card__more{ padding-top:8px; }

  /* Wiki teaser: horizontalni swipe umjesto stupca kartica */
  .wiki-teaser .wiki-grid{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
    padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .wiki-teaser .wiki-grid::-webkit-scrollbar{ display:none; }
  .wiki-teaser .wiki-card{ flex:0 0 82%; scroll-snap-align:center; }

  /* Usluge: redovi s razdjelnicima umjesto 5 kutija */
  .services{ gap:0; margin-top:28px; }
  .service{
    border:0; border-radius:0; border-bottom:1px solid var(--n-200);
    padding:16px 0; display:grid; grid-template-columns:auto 1fr;
    column-gap:14px; row-gap:2px;
  }
  .service:last-child{ border-bottom:0; }
  .service .chip{ grid-row:1 / span 3; width:40px; height:40px; border-radius:10px; }
  a.service:hover{ transform:none; box-shadow:none; border-color:var(--n-200); }
  .service h3{ font-size:15.5px; }
  .service__more{ padding-top:4px; }

  /* Galerija: horizontalni swipe umjesto 6 fotki u stupcu */
  .gallery{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
    padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .gallery::-webkit-scrollbar{ display:none; }
  .gallery__item{ flex:0 0 80%; height:200px; scroll-snap-align:center; }

  /* Detaljne stranice: brojke i stavke bez kutija */
  .detail-specs{ grid-template-columns:1fr 1fr; gap:4px 12px; margin-top:32px; }
  .detail-spec{ border:0; box-shadow:none; background:transparent; padding:12px 0; }
  .detail-spec__val{ font-size:24px; }
  .detail-list{ gap:0; margin-top:20px; }
  .detail-list__item{ border:0; border-radius:0; border-bottom:1px solid var(--n-200); padding:16px 0; }
  .detail-list__item:last-child{ border-bottom:0; }

  /* Footer: stupci linkova samo ponavljaju navigaciju — ostaju podaci i legal */
  .footer__grid > div:not(:first-child){ display:none; }
  .footer__grid{ padding-block:44px 32px; }
}

/* ============================================================
   Mobile compact — runda 2 (≤580px): gušći vertikalni ritam,
   manji hero, kompaktniji kalkulator, FAQ i kontakt forma.
   ============================================================ */
@media (max-width:580px){
  /* Vertikalni ritam: 64px sekcijskog paddinga → 44px */
  .section__inner, .faq__inner{ padding-block:44px; }
  .contact__grid{ padding-block:44px; }
  .cta__inner{ padding-block:44px; }
  .section-header h2{ margin-top:10px; }
  .section-header .lead{ margin-top:12px; }
  .cards, .services, .gallery{ margin-top:20px; }
  .wiki-teaser .wiki-grid{ margin-top:20px; }
  .tl{ margin-top:28px; }
  .steps-note{ margin-top:20px; }
  .paybar{ margin-top:16px; }
  .steps-cta{ margin-top:24px; }
  .link-more{ margin-top:16px; }
  .sol-note{ margin-top:20px; }
  .warranty{ margin-top:22px; gap:14px 24px; }

  /* Hero: kraći naslov, niža fotografija, gušći razmaci */
  .hero__grid{ padding-block:40px; }
  .hero h1{ font-size:34px; line-height:1.05; margin-top:14px; }
  .hero__lead{ margin-top:16px; }
  .hero__ctas{ margin-top:22px; }
  .hero__trust{ margin-top:18px; }
  .hero__img{ height:210px; }

  /* Kalkulator: bez podnaslova (sučelje je samoobjašnjivo), manja brojka */
  .calc__inner{ padding-block:40px 44px; }
  .calc__sub{ display:none; }
  .calc__tabs-wrap{ margin-top:20px; }
  .calc__lead{ margin-top:18px; }
  .calc__value{ font-size:46px; }
  .calc__stage{ gap:16px; margin-top:16px; }
  .calc__kpi{ margin-top:28px; padding-top:24px; }
  .calc__roi{ margin-top:14px; }
  .calc__cta{ margin-top:26px; }

  /* FAQ: kompaktnija pitanja */
  .faq__list{ margin-top:24px; gap:10px; }
  .faq__q{ padding:12px 16px; min-height:48px; gap:10px; }
  .faq__q span{ font-size:15px; }
  .faq__a{ padding:0 16px 16px; font-size:14px; }

  /* FAQ: prikaži prva 4 pitanja, ostala na zahtjev (samo uz JS) */
  html.js .faq__list:not(.is-expanded) .faq__item:nth-child(n+5){ display:none; }
  html.js .faq__more{ display:flex; }

  /* Kontakt: forma bez okvira — polja preko cijele širine */
  .form{ border:0; border-radius:0; padding:0; box-shadow:none; background:transparent; }
  .contact__items{ margin-top:20px; }

  /* Runda 3: tekst koji postoji samo na mobitelu (npr. skraćeni kontakt uvod) */
  .u-d-hide{ display:inline; }

  /* Sekcija "Zašto Larsoon" je skrivena na mobitelu — sakrij i link u izborniku */
  .nav__mobile a[href="#zasto"]{ display:none; }

  /* Nav: manji logo i CTA da sve stane bez gnječenja logotipa */
  .nav__inner{ gap:12px; }
  .nav__logo{ height:22px; }
  .nav__actions{ gap:8px; }
  .nav__actions .btn--sm{ font-size:13px; padding:9px 12px; }
}

/* Tekst vidljiv samo na malim ekranima (mobilna zamjena za dulji tekst) */
@media (min-width:581px){
  .u-d-hide{ display:none; }
}

/* FAQ "Prikaži sva pitanja" — vidljiv samo na mobitelu uz JS */
.faq__more{
  display:none; align-items:center; justify-content:center; gap:7px;
  margin:18px auto 0; min-height:44px; padding:0 22px;
  background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-pill);
  font-family:var(--font-text); font-size:14px; font-weight:600; color:var(--n-600);
  cursor:pointer;
}
.faq__more:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.faq__more .lucide{ width:16px; height:16px; color:var(--n-400); }
@media (pointer:coarse){
  .btn--sm{ min-height:44px; }
  .footer ul a, .footer__legal a{ display:inline-block; padding-block:10px; }
  .link-more a, .sol-note a{ display:inline-block; padding-block:10px; }
  .contact__item a{ display:inline-flex; align-items:center; min-height:44px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}