/* ============================================================
   NEŠA KLIMA — svetlo & vazdušno
   Bela osnova · sveže plava (klima) · topli amber (struja)
   ============================================================ */

:root {
  --bg:#ffffff; --bg-soft:#f3f8ff; --bg-warm:#fff6ec;
  --ink:#14213a; --text:#3a4a63; --muted:#7183a0;
  --blue:#1e88ff; --blue-2:#4aa6ff; --blue-deep:#0b64d6;
  --amber:#ff9b3d; --amber-2:#ffb567; --amber-deep:#f5820a;
  --hot:#ff5a3c; --cold:#37b6ff;
  --line:rgba(20,40,80,0.09); --card:#ffffff;
  --shadow-sm:0 2px 10px -4px rgba(20,60,130,0.15);
  --shadow:0 20px 50px -24px rgba(20,70,150,0.28);
  --shadow-blue:0 24px 60px -26px rgba(30,136,255,0.45);
  --font-display:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --header-h:82px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body { background:var(--bg); color:var(--text); font-family:var(--font-sans); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(52rem 34rem at 82% -8%, rgba(30,136,255,0.10), transparent 62%), radial-gradient(46rem 32rem at -5% 6%, rgba(255,155,61,0.07), transparent 58%); }
::selection { background:rgba(30,136,255,0.20); }

.container { width:100%; max-width:1140px; margin:0 auto; padding:0 24px; }
.display { font-family:var(--font-display); letter-spacing:-0.02em; color:var(--ink); }
.h-full { height:100%; }
.text-gradient { background:linear-gradient(105deg, var(--blue-deep), var(--blue-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-amber-gradient { background:linear-gradient(105deg, var(--amber-deep), var(--amber-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin-bottom:1rem; }
.eyebrow-amber { color:var(--amber-deep); }

/* ---------- Dugmad ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--font-display); font-weight:700; font-size:.98rem; border-radius:999px; padding:.8rem 1.5rem; cursor:pointer; text-decoration:none; white-space:nowrap; border:1px solid transparent; transition:transform .2s, box-shadow .3s, background .3s, border-color .3s, color .3s; }
.btn-sm { padding:.55rem 1.05rem; font-size:.9rem; }
.btn-lg { padding:.95rem 1.9rem; font-size:1.02rem; }
.btn-primary { background:linear-gradient(105deg, var(--blue), var(--blue-2)); color:#fff; box-shadow:var(--shadow-blue); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 28px 66px -24px rgba(30,136,255,0.6); }
.btn-ghost { border-color:var(--line); color:var(--ink); background:#fff; box-shadow:var(--shadow-sm); }
.btn-ghost:hover { transform:translateY(-2px); border-color:rgba(30,136,255,0.5); color:var(--blue-deep); }

/* ---------- Header + logo ---------- */
.header { position:fixed; top:0; left:0; right:0; z-index:50; height:var(--header-h); }
.header-bg { position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,0.8); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--line); box-shadow:0 6px 24px -18px rgba(20,60,130,0.4); opacity:0; transition:opacity .35s; }
.header.scrolled .header-bg { opacity:1; }
.header-inner { display:flex; align-items:center; gap:1.5rem; height:100%; }
.logo { display:flex; align-items:center; gap:1rem; text-decoration:none; }
.logo-mark { display:grid; place-items:center; filter:drop-shadow(0 10px 22px rgba(20,100,214,0.3)); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.logo:hover .logo-mark { transform:rotate(-6deg) scale(1.06); }
.logo-lockup { display:flex; flex-direction:column; line-height:1; }
.logo-name { font-family:var(--font-display); font-weight:800; font-size:1.72rem; letter-spacing:.01em; color:var(--ink); }
.logo-tag { display:flex; align-items:center; gap:.5rem; margin-top:.34rem; font-family:var(--font-display); font-weight:700; font-size:.64rem; letter-spacing:.28em; color:var(--blue-deep); }
.logo-tag i { display:block; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--blue), var(--amber)); }
.nav { display:flex; gap:1.7rem; margin-left:auto; }
.nav-link { font-family:var(--font-display); font-weight:600; font-size:.96rem; text-decoration:none; color:var(--text); position:relative; transition:color .2s; }
.nav-link::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:linear-gradient(90deg, var(--blue), var(--amber)); border-radius:2px; transition:right .28s ease; }
.nav-link:hover { color:var(--ink); }
.nav-link:hover::after { right:0; }

/* ---------- Hero ---------- */
.hero { position:relative; min-height:100dvh; display:flex; align-items:center; padding-top:var(--header-h); overflow:hidden; background:radial-gradient(60rem 40rem at 88% 12%, rgba(30,136,255,0.12), transparent 60%), radial-gradient(46rem 34rem at 6% 88%, rgba(255,155,61,0.08), transparent 58%), linear-gradient(180deg, #ffffff 0%, #eef5ff 100%); }
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
.hero-grid { position:relative; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:2.5rem; padding:3.5rem 24px; }
.hero-title { font-size:clamp(2.7rem, 6.5vw, 5.4rem); font-weight:800; line-height:1.02; letter-spacing:-0.03em; }
.hero-lead { margin-top:1.5rem; max-width:34rem; font-size:1.16rem; color:var(--text); line-height:1.65; }
.hero-actions { margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.8rem; }
.hero-badges { margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:1.4rem; }
.badge { display:inline-flex; align-items:center; gap:.55rem; font-size:.92rem; font-weight:500; color:var(--muted); }
.badge-dot { width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(30,136,255,0.14); }
.badge-dot.amber { background:var(--amber); box-shadow:0 0 0 4px rgba(255,155,61,0.16); }

/* ---------- Hero widget: klima + živi termometar ---------- */
.hero-visual { position:relative; display:grid; place-items:center; }
.hero-widget { position:relative; width:100%; max-width:380px; background:rgba(255,255,255,0.72); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:1.5rem; padding:1.5rem 1.6rem 1.7rem; box-shadow:var(--shadow); transition:box-shadow .5s; }
.hw-loc { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted); font-weight:600; }
.hw-loc svg { color:var(--blue); }
.hw-main { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-top:1rem; min-height:180px; }

/* AC unit (kompaktno) */
.ac-scene { position:relative; width:150px; height:180px; flex:0 0 auto; }
.ac-unit { position:absolute; top:0; left:0; width:150px; height:48px; border-radius:11px; background:linear-gradient(175deg,#ffffff,#e9f1fb); border:1px solid rgba(20,60,130,0.12); box-shadow:0 12px 26px -14px rgba(20,70,150,0.5), inset 0 -6px 10px -6px rgba(20,60,130,0.18); }
.ac-led { position:absolute; top:9px; right:11px; width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); animation:acled 2.6s ease-in-out infinite; }
@keyframes acled { 0%,100%{opacity:1} 50%{opacity:.3} }
.ac-display { position:absolute; top:10px; left:12px; font-family:var(--font-display); font-weight:800; font-size:.9rem; color:var(--blue-deep); }
.ac-vent { position:absolute; left:14px; right:14px; bottom:6px; height:6px; border-radius:3px; background:linear-gradient(90deg,#cfe0f5,#aecbf0); }
.ac-air { position:absolute; top:54px; left:50%; transform:translateX(-50%); width:130px; height:120px; }
.ac-air .wave { position:absolute; top:0; left:50%; transform:translateX(-50%); border:2.2px solid rgba(30,136,255,0.5); border-top-color:transparent; border-left-color:transparent; border-right-color:transparent; border-radius:0 0 60% 60%/0 0 100% 100%; opacity:0; }
.ac-air .w1 { width:52px; height:34px; animation:airwave 3s ease-out infinite; }
.ac-air .w2 { width:86px; height:58px; animation:airwave 3s ease-out infinite .9s; }
.ac-air .w3 { width:122px; height:82px; animation:airwave 3s ease-out infinite 1.8s; }
@keyframes airwave { 0%{opacity:0; transform:translateX(-50%) translateY(-10px) scale(.7)} 30%{opacity:.85} 100%{opacity:0; transform:translateX(-50%) translateY(22px) scale(1.1)} }
.flake { position:absolute; top:60px; color:var(--blue); opacity:0; text-shadow:0 0 10px rgba(30,136,255,.4); }
.flake.f1 { left:30%; font-size:.7rem; animation:fall 4.2s linear infinite .2s; }
.flake.f2 { left:50%; font-size:.95rem; animation:fall 5s linear infinite 1.1s; }
.flake.f3 { left:66%; font-size:.8rem; animation:fall 4.6s linear infinite 2s; }
.flake.f4 { left:42%; font-size:.62rem; animation:fall 5.4s linear infinite 3s; }
@keyframes fall { 0%{opacity:0; transform:translateY(0) rotate(0)} 15%{opacity:.9} 85%{opacity:.6} 100%{opacity:0; transform:translateY(120px) rotate(150deg)} }

/* Verodostojan termometar sa podeocima */
.thermo { position:relative; width:96px; height:200px; flex:0 0 auto; }
.thermo-body { position:absolute; left:22px; top:6px; width:16px; height:150px; border-radius:999px 999px 6px 6px; background:#e7eefb; border:1.5px solid var(--line); overflow:hidden; z-index:2; }
.thermo-fill { position:absolute; left:0; right:0; bottom:0; height:20%; border-radius:999px 999px 4px 4px; background:linear-gradient(180deg, var(--blue-2), var(--blue-deep)); transition:height 1.1s cubic-bezier(.4,0,.2,1), background .7s ease; }
.thermo-bulb { position:absolute; left:16px; top:150px; width:32px; height:32px; border-radius:50%; background:linear-gradient(180deg, var(--blue-2), var(--blue-deep)); border:1.5px solid var(--line); box-shadow:inset 0 -4px 8px -4px rgba(0,0,0,.25); transition:background .7s ease; z-index:3; }
.thermo-scale { position:absolute; left:44px; top:0; right:0; height:100%; }
.thermo-scale .tick { position:absolute; left:0; height:1px; }
.thermo-scale .tick i { position:absolute; left:0; top:0; width:7px; height:1.5px; background:var(--muted); opacity:.5; border-radius:2px; }
.thermo-scale .tick.major i { width:12px; height:2px; opacity:.8; }
.thermo-scale .tick.major b { position:absolute; left:16px; top:-8px; font-family:var(--font-display); font-size:.66rem; font-weight:700; color:var(--muted); }
/* stanja */
.hero-widget.hot { box-shadow:0 24px 60px -28px rgba(255,90,60,.5); }
.hero-widget.cold { box-shadow:0 24px 60px -28px rgba(55,182,255,.5); }
.hero-widget.hot .ac-air .wave, .hero-widget.hot .flake { animation-duration:1.8s; }

.hw-foot { margin-top:1.1rem; }
.hw-readout { font-family:var(--font-display); font-weight:800; font-size:3rem; line-height:1; color:var(--ink); }
.hw-deg { font-size:1.4rem; color:var(--muted); font-weight:700; margin-left:2px; }
.hero-widget.hot .hw-readout { color:var(--hot); }
.hero-widget.cold .hw-readout { color:var(--cold); }
.hw-msg { margin-top:.5rem; font-weight:600; color:var(--ink); font-size:1.02rem; line-height:1.4; min-height:2.6em; }
.hw-cta { margin-top:1rem; }

/* ---------- Brendovi (logo traka) ---------- */
.brands { padding:3rem 0 3.2rem; border-block:1px solid var(--line); background:var(--bg-soft); }
.brands-head { text-align:center; margin-bottom:1.8rem; }
.brands-head .eyebrow { display:inline-flex; }
.brands-note { color:var(--muted); font-size:.96rem; max-width:34rem; margin:0 auto; }
.marquee { overflow:hidden; }
.marquee-track { display:flex; align-items:center; width:max-content; animation:marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.brand { height:40px; width:auto; padding:0 2.3rem; opacity:.9; transition:opacity .3s, transform .3s; }
/* kvadratni/kompaktni logoi malo veći da optički legnu uz široke wordmark-ove */
.brand[alt="Daikin"], .brand[alt="Midea"], .brand[alt="Vox"], .brand[alt="LG"] { height:46px; }
.brand:hover { opacity:1; transform:scale(1.08); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Sekcije ---------- */
.section { padding:7rem 24px; }
.section-head { max-width:40rem; margin-bottom:3.2rem; }
.section-title { font-size:clamp(1.9rem, 4vw, 2.9rem); font-weight:800; line-height:1.1; }

/* ---------- Kartice ---------- */
.grid { display:grid; gap:1.3rem; }
.usluge-grid { grid-template-columns:repeat(2,1fr); }
.card { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:1.15rem; padding:1.9rem; box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(30,136,255,0.35); }
.frost::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(120% 90% at 50% -10%, rgba(30,136,255,0.09), transparent 55%); opacity:0; transition:opacity .45s; }
.frost:hover::before { opacity:1; }
.frost::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background-image:radial-gradient(1.6px 1.6px at 22% 26%, rgba(30,136,255,.85), transparent), radial-gradient(1.6px 1.6px at 72% 18%, rgba(74,166,255,.8), transparent), radial-gradient(1.6px 1.6px at 42% 68%, rgba(30,136,255,.7), transparent), radial-gradient(1.6px 1.6px at 86% 58%, rgba(120,190,255,.8), transparent); opacity:0; transition:opacity .5s; animation:twinkle 3s ease-in-out infinite; }
.frost:hover::after { opacity:.85; }
@keyframes twinkle { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.5)} }
.ikona { display:inline-grid; place-items:center; width:3.1rem; height:3.1rem; border-radius:.9rem; margin-bottom:1.3rem; }
.ikona-blue { color:var(--blue-deep); background:rgba(30,136,255,0.10); }
.ikona-amber { color:var(--amber-deep); background:rgba(255,155,61,0.13); }
.card-title { font-size:1.28rem; font-weight:700; }
.card-desc { margin-top:.65rem; color:var(--text); line-height:1.6; }
.lista { margin-top:1.4rem; display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.2rem; list-style:none; }
.lista li { position:relative; padding-left:1.5rem; font-size:.9rem; color:var(--muted); }
.lista li::before { content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:800; }
.lista-amber li::before { color:var(--amber-deep); }

/* ---------- Elektro band ---------- */
.elektro-band { position:relative; overflow:hidden; padding:6.5rem 24px; border-block:1px solid var(--line); background:radial-gradient(50rem 30rem at 80% 50%, rgba(255,155,61,0.12), transparent 66%), linear-gradient(180deg, #fffaf3 0%, #fff6ec 100%); }
.elektro-canvas { position:absolute; inset:0; width:100%; height:100%; }
.elektro-content { position:relative; max-width:44rem; }
.elektro-lead { margin-top:1.4rem; color:var(--text); font-size:1.12rem; line-height:1.65; }

/* ---------- Zašto ---------- */
.zasto-grid { grid-template-columns:1fr 1.05fr; gap:3.2rem; align-items:center; }
.zasto-lead { margin:1.4rem 0 2rem; color:var(--text); line-height:1.65; max-width:32rem; }
.prednosti-grid { grid-template-columns:1fr 1fr; }
.mini { padding:1.5rem; }
.mini-title { font-size:1.04rem; font-weight:700; }
.mini-desc { margin-top:.45rem; font-size:.9rem; color:var(--muted); line-height:1.55; }

/* ---------- Kalkulator ---------- */
.calc-section { background:linear-gradient(180deg,#ffffff,#f3f8ff); border-block:1px solid var(--line); }
.calc-head { text-align:center; margin:0 auto 3rem; }
.calc-head .eyebrow { display:inline-flex; }
.calc-sub { color:var(--muted); max-width:36rem; margin:0 auto; }
.calc-card { display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; background:#fff; border:1px solid var(--line); border-radius:1.4rem; padding:2.2rem; box-shadow:var(--shadow); max-width:60rem; margin:0 auto; }
.calc-inputs { display:flex; flex-direction:column; gap:1.6rem; }
.calc-field { display:flex; flex-direction:column; gap:.6rem; }
.calc-label { font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--ink); }
.calc-range { display:flex; align-items:center; gap:1rem; }
.calc-range input[type=range] { flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:linear-gradient(90deg, var(--blue), var(--blue-2)); outline:none; }
.calc-range input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--blue); box-shadow:0 3px 8px -2px rgba(20,70,150,.5); cursor:pointer; }
.calc-range input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--blue); cursor:pointer; }
.calc-range output { font-family:var(--font-display); font-weight:800; color:var(--blue-deep); min-width:3.6rem; text-align:right; }
.calc-classes { display:flex; gap:.6rem; }
.calc-class { flex:1; font-family:var(--font-display); font-weight:800; font-size:1rem; padding:.7rem; border-radius:.8rem; border:1.5px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; transition:all .2s; }
.calc-class:hover { border-color:var(--blue-2); color:var(--blue-deep); }
.calc-class.is-active { background:linear-gradient(105deg, var(--blue), var(--blue-2)); color:#fff; border-color:transparent; box-shadow:var(--shadow-blue); }
.calc-zone-note { font-size:.78rem; color:var(--muted); font-weight:500; margin-top:.1rem; }
.calc-out { display:flex; flex-direction:column; gap:1rem; justify-content:center; padding-left:2.2rem; border-left:1px solid var(--line); }
.calc-metric { display:flex; flex-direction:column; gap:.1rem; }
.calc-metric-label { font-size:.82rem; color:var(--muted); font-weight:500; }
.calc-metric-val { font-family:var(--font-sans); font-size:1.05rem; color:var(--text); white-space:nowrap; }
.calc-metric-val b { font-family:var(--font-display); font-size:1.7rem; font-weight:800; color:var(--ink); }
.calc-metric-sub { font-size:.8rem; color:var(--muted); font-weight:500; margin-top:.1rem; white-space:nowrap; }
.calc-metric-save .calc-metric-val b { color:#1e9e5a; }
.calc-bar { margin-top:.6rem; display:flex; flex-direction:column; gap:.5rem; }
.calc-bar-old, .calc-bar-new { display:grid; grid-template-columns:3rem 1fr; align-items:center; gap:.8rem; font-size:.8rem; color:var(--muted); font-weight:600; }
.calc-bar i { display:block; height:12px; border-radius:999px; transition:width 1s cubic-bezier(.4,0,.2,1); }
.calc-bar-old i { background:#d4dbe8; }
.calc-bar-new i { background:linear-gradient(90deg, var(--blue), var(--blue-2)); }
.calc-disclaimer { max-width:60rem; margin:1.4rem auto 0; font-size:.8rem; color:var(--muted); line-height:1.5; text-align:center; }

/* ---------- CTA ---------- */
.cta { position:relative; overflow:hidden; border-radius:1.8rem; padding:4rem 2rem; text-align:center; background:radial-gradient(50rem 28rem at 12% -20%, rgba(30,136,255,0.14), transparent 62%), radial-gradient(50rem 30rem at 90% 120%, rgba(255,155,61,0.14), transparent 62%), linear-gradient(180deg,#ffffff,#f3f8ff); border:1px solid var(--line); box-shadow:var(--shadow); }
.cta-title { font-size:clamp(1.8rem, 4vw, 3rem); font-weight:800; max-width:34rem; margin:0 auto; }
.cta-lead { margin:1.2rem auto 2rem; color:var(--text); max-width:32rem; }
.cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--line); padding:3rem 0 2rem; margin-top:1rem; background:var(--bg-soft); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.footer-note { color:var(--muted); font-size:.9rem; margin-top:.55rem; }
.footer-credit-block { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; text-align:right; }
.footer-credit-label { color:var(--muted); font-size:.78rem; font-weight:500; letter-spacing:.02em; }
.footer-credit-link { font-family:var(--font-display); font-weight:800; font-size:1.2rem; text-decoration:none; background:linear-gradient(105deg, var(--blue-deep), var(--blue-2)); -webkit-background-clip:text; background-clip:text; color:transparent; transition:filter .2s; }
.footer-credit-link:hover { filter:drop-shadow(0 2px 8px rgba(30,136,255,.45)); }
.footer-copy { margin-top:2rem; color:var(--muted); font-size:.82rem; opacity:.75; }

/* ---------- Sticky poziv (mobilni) ---------- */
.callbar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:.6rem; padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); border-top:1px solid var(--line); box-shadow:0 -8px 24px -14px rgba(20,60,130,0.4); }
.callbar-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-display); font-weight:700; font-size:1rem; border-radius:999px; padding:.85rem 1rem; text-decoration:none; }
.callbar-call { flex:1; background:linear-gradient(105deg, var(--blue), var(--blue-2)); color:#fff; box-shadow:var(--shadow-blue); }
.callbar-viber { flex:0 0 auto; background:#7360f2; color:#fff; padding-inline:1.1rem; }

/* ---------- Reveal ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms); }
.reveal.is-in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { order:2; margin-top:1rem; }
  .calc-card { grid-template-columns:1fr; gap:1.8rem; }
  .calc-out { padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:1.6rem; }
}
@media (max-width:860px) {
  .nav { display:none; }
  .usluge-grid, .zasto-grid, .prednosti-grid { grid-template-columns:1fr; }
  .hero-lead { font-size:1.05rem; }
}
@media (max-width:600px) {
  /* footer: alterum kredit levo poravnat, ispod brenda */
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-credit-block { align-items:flex-start; text-align:left; }
  /* sticky poziv se pojavljuje na telefonu */
  .callbar { display:flex; }
  body { padding-bottom:4.5rem; }
}
@media (max-width:560px) {
  /* kalkulator: kompaktno, bez preloma reči, sve unutar kartice */
  .calc-card { padding:1.5rem; gap:1.4rem; }
  .calc-inputs, .calc-out { min-width:0; }
  .calc-inputs { gap:1.2rem; }
  .calc-out { gap:.8rem; }
  .calc-metric-val b { font-size:1.4rem; }
  .calc-class { padding:.6rem; font-size:.92rem; }
  .calc-range output { min-width:2.8rem; font-size:.9rem; }
  .calc-zone-note { font-size:.74rem; }
}
@media (max-width:520px) {
  .header-cta { display:none; }
  .logo-name { font-size:1.5rem; }
  .lista { grid-template-columns:1fr; }
  .section { padding:4.5rem 20px; }
  .hero-badges { gap:.9rem 1.2rem; }
  .hero-widget { max-width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .marquee-track, .frost::after, .ac-air .wave, .flake, .ac-led { animation:none; }
  html { scroll-behavior:auto; }
}