/* ===================================================== v4 · úvod: fotografie, které se samy pomalu prolínají */
.hero4 { position: relative; height: 100vh; height: 100svh; min-height: 620px; max-height: 1180px; color: #fff; overflow: hidden; background: #08100e; isolation: isolate; }
.hero4-slides { position: absolute; inset: 0; z-index: 0; }
.hero4-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2.6s cubic-bezier(.45, 0, .25, 1); }
.hero4-slide.is-on { opacity: 1; }
.hero4-slide picture, .hero4-slide img { display: block; width: 100%; height: 100%; }
.hero4-slide img { object-fit: cover; object-position: var(--pos, 50% 50%); filter: brightness(var(--bri, 1)); transform: scale(1.075); transition: transform 11s linear; will-change: transform; }
.hero4-slide.is-on img { transform: scale(1); }
.hero4-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 12 10 / .84) 0%, rgb(5 12 10 / .62) 28%, rgb(5 12 10 / .2) 58%, rgb(5 12 10 / 0) 76%),
    linear-gradient(0deg, rgb(5 12 10 / .8) 0%, rgb(5 12 10 / 0) 36%),
    linear-gradient(180deg, rgb(5 12 10 / .55) 0%, rgb(5 12 10 / 0) 17%); }
.hero4-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--hdr, 66px) + 28px); padding-bottom: clamp(18px, 3.2vh, 38px); }
.hero4-txt { max-width: 47rem; padding-bottom: clamp(26px, 5.6vh, 68px); }
.hero4-copy { display: grid; }
.hero4-copy > [data-copy] { grid-area: 1 / 1; align-self: end; transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.hero4-copy > [data-copy]:not(.is-on) { opacity: 0; transform: translateY(18px); pointer-events: none; visibility: hidden; transition: opacity .6s ease, transform .6s ease, visibility 0s .6s; }
.hero4 .badge { margin-bottom: 1.1rem; }
.hero4 .h-hero { color: #fff; margin: 0 0 1.1rem; font-size: min(clamp(2.7rem, .9rem + 6.1vw, 6.9rem), 11.6vh); text-wrap: balance; text-shadow: 0 6px 40px rgb(0 0 0 / .25); }
.hero4-kick { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .82); }
.hero4-kick::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.hero4-lead { font-size: clamp(1rem, .95rem + .28vw, 1.15rem); line-height: 1.6; max-width: 35rem; color: rgb(255 255 255 / .86); margin: 0 0 1.7rem; text-wrap: pretty; }
.hero4-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero4-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid rgb(255 255 255 / .2); padding-top: 15px; }
.hero4-dots { display: flex; gap: clamp(14px, 2.2vw, 30px); flex-wrap: wrap; }
.hero4-dot { appearance: none; background: none; border: 0; padding: 4px 0; margin: 0; cursor: pointer; display: grid; gap: 10px; min-width: 112px; text-align: left; font: inherit; font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: rgb(255 255 255 / .55); transition: color .35s; }
.hero4-dot:hover, .hero4-dot:focus-visible { color: rgb(255 255 255 / .9); }
.hero4-dot i { display: block; height: 2px; background: rgb(255 255 255 / .22); position: relative; overflow: hidden; border-radius: 2px; }
.hero4-dot i::after { content: ""; position: absolute; inset: 0; background: var(--hero4-accent, #3fd0b6); transform: scaleX(0); transform-origin: left; }
.hero4-dot.is-on { color: #fff; }
.hero4-dot.is-on i::after { animation: hero4Prog var(--dur, 7s) linear forwards; }
.hero4.is-paused .hero4-dot.is-on i::after { animation-play-state: paused; }
@keyframes hero4Prog { to { transform: scaleX(1); } }
.hero4-side { display: flex; align-items: flex-end; gap: 26px; text-align: right; }
.hero4-cap { margin: 0; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .55); white-space: nowrap; }
.hero4-phone { display: none; color: #fff; text-decoration: none; line-height: 1.25; }
.hero4-phone small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.hero4-phone b { font-size: 1.32rem; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 1000px) { .hero4-phone { display: block; } }
/* jemný nástup textu po načtení */
.hero4-txt > *, .hero4-bar { animation: hero4In 1.15s cubic-bezier(.2, .7, .2, 1) both; }
.hero4-txt > :nth-child(2) { animation-delay: .08s; }
.hero4-txt > :nth-child(3) { animation-delay: .16s; }
.hero4-txt > :nth-child(4) { animation-delay: .24s; }
.hero4-bar { animation-delay: .38s; }
@keyframes hero4In { from { opacity: 0; transform: translateY(26px); } }
@media (max-height: 760px) and (min-width: 761px) { .hero4 .h-hero { margin-bottom: .8rem; } .hero4-lead { margin-bottom: 1.2rem; } .hero4-txt { padding-bottom: 22px; } }
@media (max-width: 760px) {
  .hero4 { min-height: 600px; }
  .hero4-shade { background: linear-gradient(0deg, rgb(5 12 10 / .95) 0%, rgb(5 12 10 / .78) 40%, rgb(5 12 10 / .22) 70%, rgb(5 12 10 / .55) 100%); }
  .hero4 .h-hero { font-size: clamp(2.35rem, 10.4vw, 3.4rem); }
  .hero4-lead { font-size: .97rem; line-height: 1.55; margin-bottom: 1.25rem; }
  .hero4-actions .btn { flex: 1 1 auto; }
  .hero4-txt { padding-bottom: 22px; }
  .hero4-dots { width: 100%; gap: 8px; flex-wrap: nowrap; }
  .hero4-dot { min-width: 0; flex: 1; font-size: 0; gap: 0; padding: 10px 0; }
  .hero4-side { display: none; }
  .hero4-bar { padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero4-slide img { transition: none; transform: none; }
  .hero4-txt > *, .hero4-bar { animation: none; }
}
/* tmavé pozadí: světlé varianty prvků */
.hero4 .badge { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .22); color: rgb(255 255 255 / .86); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hero4 .badge b { color: #fff; }
.hero4 .badge-dot { background: rgb(255 255 255 / .14); color: #f2c25e; }
.hero4 .btn--ghost { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .4); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero4 .btn--ghost::before { background: #fff; }
.hero4 .btn--ghost:hover { color: #0b1512; border-color: #fff; }
.hero4 .h-hero em { background: linear-gradient(100deg, #3fd0b6, #8fe3cf 45%, #f2c25e); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) {
  .hero4 .badge { font-size: .72rem; padding: .3rem .8rem .3rem .35rem; }
  .hero4 .badge .hide-m { display: none; }
  .hero4-actions { gap: .6rem; }
  .hero4-actions .btn { --bh: 48px; }
}

/* ===================================================== v4 · jednodušší a přehlednější stránka */
.hero4 { --hero4-accent: #3fd0b6; }
.rail { display: none !important; }

/* logo – vždy skutečné logo BALUS energie */
.ftr-logo img { height: 46px; width: auto; display: block; }
.tblock-logo { height: 30px; width: auto; display: block; }
.receipt-logo img { height: 24px; width: auto; display: block; }

/* ----------------------------------------------------- řešení: přehledná mřížka */
.svc4 { background: var(--bg); }
.svc4 .split-head { margin-bottom: clamp(36px, 4.4vw, 64px); }
.svc4-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.svc4-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 1px 0 rgb(16 32 29 / .03); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.svc4-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgb(16 32 29 / .38); border-color: var(--line-strong); }
.svc4-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ice); }
.svc4-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.svc4-card:hover .svc4-media img { transform: scale(1.05); }
.svc4-tag { position: absolute; left: 14px; top: 14px; padding: .32rem .7rem; border-radius: 999px; background: rgb(255 255 255 / .94); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.svc4-body { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.35rem 1.4rem 1.4rem; flex: 1; }
.svc4-no { position: absolute; right: 1.3rem; top: 1.25rem; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.svc4-body h3 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.16rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); padding-right: 2rem; }
.svc4-body h3 svg { width: 22px; height: 22px; flex: none; color: var(--blue); }
.svc4-body p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--body); flex: 1; }
.svc4-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem; font-size: .88rem; font-weight: 500; color: var(--blue); }
.svc4-link svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.svc4-card:hover .svc4-link svg { transform: translateX(4px); }
@media (max-width: 1040px) { .svc4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .svc4-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc4-card { flex-direction: row; border-radius: 18px; }
  .svc4-media { aspect-ratio: auto; width: 36%; flex: none; }
  .svc4-tag { display: none; }
  .svc4-body { padding: 1rem 1rem 1.05rem; gap: .4rem; }
  .svc4-body h3 { font-size: 1rem; padding-right: 0; }
  .svc4-body h3 svg { display: none; }
  .svc4-no { display: none; }
  .svc4-body p { font-size: .86rem; line-height: 1.5; }
  .svc4-link { margin-top: .1rem; font-size: .82rem; }
}

/* ----------------------------------------------------- reference: zobrazit další */
.ref-more { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 36px); }
.ref-more .btn svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.ref-more .btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.ref-x[hidden] { display: none !important; }
.refs .ref-bar { justify-content: flex-start; }

/* ----------------------------------------------------- NZÚ: jednoduše */
.nzu4 { padding-block: clamp(70px, 9vw, 130px); }
.nzu4-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(26px, 4vw, 64px); align-items: center; padding: clamp(26px, 4vw, 56px); border-radius: 28px; background: linear-gradient(135deg, #0b1a17, #10302a 60%, #0d3a32); color: #fff; overflow: hidden; position: relative; }
.nzu4-card::after { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgb(63 208 182 / .22), rgb(63 208 182 / 0) 68%); pointer-events: none; }
.nzu4-copy .kicker { color: #8fe3cf; }
.nzu4-copy .h2 { color: #fff; margin-bottom: 1rem; }
.nzu4-copy .lead { color: rgb(255 255 255 / .8); margin-bottom: 1.6rem; max-width: 34rem; }
.nzu4-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: relative; z-index: 1; }
.nzu4-facts li { padding: 1.15rem 1.15rem 1.2rem; border-radius: 18px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); }
.nzu4-facts b { display: block; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; color: #fff; margin-bottom: .35rem; }
.nzu4-facts li:first-child b { color: #f2c25e; }
.nzu4-facts span { display: block; font-size: .88rem; line-height: 1.45; color: rgb(255 255 255 / .72); }
.nzu4-note { margin: 1rem 0 0; font-size: .78rem; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .nzu4-card { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .nzu4-facts { grid-template-columns: 1fr; } }

/* čísla na mobilu přehledně 2 × 2 */
@media (max-width: 640px) {
  .inst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .inst { padding: 18px 16px 20px; }
  .inst + .inst { border-top: 0; border-left: 0; }
  .inst:nth-child(even) { border-left: 1px solid var(--line); }
  .inst:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .gauge { max-width: 120px; margin-bottom: .6rem; }
  .inst-num b { font-size: 2.1rem; }
  .inst-num > span { font-size: .8rem; }
  .inst p { font-size: .78rem; line-height: 1.45; margin: 0; }
  .inst-k { display: none; }
}

/* ===================================================== v4 · ENOVA – barvy a interaktivní kroky */
.hero4 { --hero4-accent: #8cc63f; }
.hero4 .h-hero em { background: linear-gradient(100deg, #b7e07a, #f6d36b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nzu4-card { background: linear-gradient(135deg, #0a1d16, #11302a 58%, #17432b); }
.nzu4-card::after { background: radial-gradient(circle, rgb(140 198 63 / .22), rgb(140 198 63 / 0) 68%); }
.nzu4-copy .kicker { color: #b7e07a; }
.nzu4-copy .lead b { color: #fff; font-weight: 500; }
.nzu4-facts li:first-child b { color: #f6d36b; }

/* posudky – široká karta pod mřížkou služeb */
.svc4-wide { display: flex; align-items: center; gap: 1.1rem; margin-top: clamp(14px, 1.6vw, 22px); padding: 1.15rem 1.4rem; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .3s, box-shadow .4s var(--ease), transform .4s var(--ease); }
.svc4-wide:hover { border-color: var(--line-strong); box-shadow: 0 22px 44px -30px rgb(14 42 32 / .35); transform: translateY(-2px); }
.svc4-wide-ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--glow); color: var(--blue); }
.svc4-wide-ico svg { width: 22px; height: 22px; }
.svc4-wide-txt { flex: 1; min-width: 0; }
.svc4-wide-txt b { display: block; font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.svc4-wide-txt span { display: block; font-size: .9rem; color: var(--body); margin-top: .15rem; }
.svc4-wide .svc4-link { margin: 0; white-space: nowrap; }
@media (max-width: 640px) { .svc4-wide { flex-wrap: wrap; } .svc4-wide .svc4-link { width: 100%; padding-left: calc(46px + 1.1rem); } }

/* ----------------------------------------------------- povolení: interaktivní kroky s fotkou */
.perm4 { background: var(--bg); }
.perm4 .split-head { margin-bottom: clamp(30px, 4vw, 56px); }
.perm4-box { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: clamp(16px, 2.2vw, 30px); align-items: stretch; }
.perm4-tabs { display: flex; flex-direction: column; gap: 10px; }
.perm4-tab { position: relative; appearance: none; display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; padding: 1.05rem 1.15rem; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; overflow: hidden; transition: background-color .35s, border-color .35s, box-shadow .4s var(--ease), transform .35s var(--ease); flex: 1; }
.perm4-tab:hover { border-color: var(--line-strong); transform: translateX(3px); }
.perm4-tab i { font-style: normal; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--muted); transition: background-color .35s, color .35s, border-color .35s; }
.perm4-tab span { display: grid; gap: .2rem; min-width: 0; }
.perm4-tab b { font-weight: 500; font-size: 1.04rem; line-height: 1.25; }
.perm4-tab small { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.perm4-tab.is-on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 24px 46px -28px rgb(10 29 22 / .6); transform: none; }
.perm4-tab.is-on i { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.perm4-tab.is-on small { color: rgb(255 255 255 / .6); }
.perm4-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.perm4-bar::after { content: ""; position: absolute; inset: 0; background: var(--sky); transform: scaleX(0); transform-origin: left; }
.perm4-tab.is-run .perm4-bar::after { animation: hero4Prog var(--dur4, 6.5s) linear forwards; }
.perm4-stage { position: relative; border-radius: 26px; overflow: hidden; background: var(--navy); min-height: 420px; aspect-ratio: 16 / 10; box-shadow: 0 40px 80px -50px rgb(10 29 22 / .6); }
.perm4-pane { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.perm4-pane.is-on { opacity: 1; }
.perm4-pane img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 7s linear; }
.perm4-pane.is-on img { transform: scale(1); }
.perm4-pane figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.4vw, 30px); padding-top: 80px; color: #fff; background: linear-gradient(0deg, rgb(6 16 12 / .88), rgb(6 16 12 / .55) 55%, rgb(6 16 12 / 0)); display: grid; gap: .45rem; }
.perm4-pane figcaption b { font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); font-weight: 500; letter-spacing: -.015em; }
.perm4-pane figcaption p { margin: 0; max-width: 36rem; color: rgb(255 255 255 / .84); font-size: .98rem; line-height: 1.55; }
.perm4-step { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; padding: .3rem .7rem .3rem .45rem; border-radius: 999px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.perm4-step svg { width: 16px; height: 16px; color: var(--sky); }
.perm4-pane:not(.is-on) figcaption > * { transform: translateY(12px); opacity: 0; }
.perm4-pane figcaption > * { transition: transform .8s cubic-bezier(.2, .7, .2, 1) .15s, opacity .8s ease .15s; }
@media (max-width: 900px) {
  .perm4-box { grid-template-columns: 1fr; }
  .perm4-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); order: 2; }
  .perm4-tab { padding: .8rem .85rem; gap: .7rem; }
  .perm4-tab i { width: 30px; height: 30px; font-size: .66rem; }
  .perm4-tab b { font-size: .9rem; }
  .perm4-tab small { display: none; }
  .perm4-stage { min-height: 0; aspect-ratio: 4 / 3.3; border-radius: 20px; }
  .perm4-pane figcaption p { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .perm4-pane img { transition: none; transform: none; } }