/*
Theme Name:   Kondenz Solar
Theme URI:    https://www.kondenz.com/
Author:       Bitsquad
Author URI:   https://bitsquad.dev/
Description:  Blokktéma a Kondenz Solar Kft. weboldalához. A designterv: Kondenz Főoldal.dc.html.
Version:      0.2.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.3
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kondenz
*/

/* ==========================================================================
   Alap
   Minden érték a designfájlból (../design/Kondenz Főoldal.dc.html) mérve.
   A tokenek a theme.json-ból jönnek: --wp--preset--color--*, --wp--custom--*.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--surface);
}

img,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

/* A fejléc rögzített, a tartalom alá csúszna – ez tolja le.
   A magasság a renderelt fejlécből mérve (nav-pirula asztalon, hamburger alatta).
   A front-page.html hero szekciója ezt felülírja (a videó a fejléc alá fut). */
:root {
  --kz-header-h: 80px;
}

@media (max-width: 1080px) {
  :root {
    --kz-header-h: 75px;
  }
}

.wp-site-blocks > main {
  padding-top: var(--kz-header-h);
}

/* A napelem-főoldalon a hero a fejléc alá fut, ahogy a tervben. */
.wp-site-blocks > main.kz-front {
  padding-top: 0;
}

/* Lekerekítés: 0 mindenhol, a pirulák (999px) kivételével. */
.wp-block-button__link,
.kz-pill {
  border-radius: var(--wp--custom--radius-pill);
}

/* Gomb – a terv fejléc-CTA-ja: emelkedés + árnyék hoverre */
.wp-block-button__link {
  box-shadow: var(--wp--custom--shadow-cta);
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--wp--custom--shadow-cta-hover);
}

.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link {
    transition: none;
  }

  .wp-block-button__link:hover {
    transform: none;
  }
}

/* Címke (eyebrow): 12px, .16em, nagybetű – a tervben ez a láblécfejek és a KPI-címkék stílusa */
.kz-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Tartalomsáv: a terv max-width:1560px + oldalmargó burkolója */
.kz-container {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--wp--custom--gutter);
}

/* Szekciófej: sorszám + h2 alapvonalra igazítva (Rólunk, Szolgáltatások, …) */
.kz-section-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 26px;
}

/* Szekció-sorszám (01, 02 …): Bebas 20px, .12em.
   A terv #ac9376-ja világoson 2,92:1 – feliratra acc-ink (tokenek.md) */
.kz-section-num {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 20px;
  letter-spacing: .12em;
  line-height: 1;
  color: var(--wp--preset--color--acc-ink);
}

/* Dinamikus blokk üres állapota – csak a szerkesztőben jelenik meg */
.kz-block-empty {
  margin: 0;
  padding: 24px;
  border: 1px dashed rgba(20, 20, 20, .3);
  font-size: 15px;
  color: var(--wp--preset--color--ink-soft);
}

/* Csak képernyőolvasónak */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ==========================================================================
   Olvasáscsík (data-progress a tervben) – szélességét az F5 JS állítja
   ========================================================================== */

.kz-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 0%;
  height: 3px;
  background: var(--wp--preset--color--ink-2);
  transition: width .12s linear;
}

/* ==========================================================================
   Fejléc
   ========================================================================== */

.kz-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wp--custom--hairline-dark);
  transition: background .3s ease, box-shadow .3s ease;
}

/* Az F5 JS 40px görgetés után adja hozzá */
.kz-header.is-scrolled {
  box-shadow: var(--wp--custom--shadow-header);
}

.kz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 14px var(--wp--custom--gutter);
}

.kz-logo {
  display: flex;
  align-items: center;
  gap: 11px;
}

.kz-logo img {
  display: block;
  width: auto;
  height: 26px;
}

/* A fehér logó világos fejlécen: feketére szűrve, ahogy a tervben */
.kz-header .kz-logo img {
  filter: brightness(0);
  opacity: .9;
}

/* --- Nav-pirula (asztali) --------------------------------------------- */

.kz-nav.wp-block-navigation {
  font-size: 14.5px;
  font-weight: 600;
}

.kz-nav .wp-block-navigation__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--wp--custom--radius-pill);
  /* A terv #EFEFEF-et használ a pirulán; a tokenek.md ezt nem sorolja külön. */
  background: #EFEFEF;
  border: 1px solid rgba(20, 20, 20, .06);
  box-shadow: var(--wp--custom--shadow-pill);
}

.kz-nav .wp-block-navigation-item {
  display: block;
  margin: 0;
}

.kz-nav .wp-block-navigation-item__content {
  display: block;
  padding: 9px 17px;
  border-radius: var(--wp--custom--radius-pill);
  color: rgba(20, 20, 20, .8);
  line-height: normal; /* a tervben nincs sormagasság a navon; a body 1.7-e nem örökölhet ide */
  text-decoration: none;
  transition: color .25s ease, background .25s ease;
}

.kz-nav .wp-block-navigation-item__content:hover,
.kz-nav .wp-block-navigation-item__content:focus-visible,
.kz-nav .current-menu-item > .wp-block-navigation-item__content {
  background: var(--wp--preset--color--ink-2);
  color: var(--wp--preset--color--surface);
  outline: none;
}

/* --- Jobb oldal: CTA + hamburger ------------------------------------- */

.kz-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kz-header__actions .wp-block-button__link {
  font-size: 14.5px;
  padding: 12px 22px;
}

.kz-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(20, 20, 20, .2);
  border-radius: var(--wp--custom--radius-pill);
  background: var(--wp--preset--color--surface);
  cursor: pointer;
}

.kz-burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--wp--preset--color--ink);
}

/* --- Mobil fiók (drawer) ----------------------------------------------
   Egyetlen navigációs blokk van. Asztalon a fiók display:contents, tehát a
   nav a fejlécsorban ül; 1080px alatt a fiók jobbról becsúszó panel lesz,
   a nav pedig lista. A nyitást az F5 JS adja (.is-open a fiókon és a body-n). */

.kz-drawer {
  display: contents;
}

.kz-drawer__head,
.kz-drawer__foot,
.kz-backdrop {
  display: none;
}

@media (max-width: 1080px) {
  .kz-burger {
    display: flex;
  }

  .kz-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 78;
    background: rgba(10, 10, 10, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }

  .kz-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  .kz-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 79;
    width: min(92vw, 400px);
    background: var(--wp--preset--color--surface);
    box-shadow: -24px 0 70px rgba(10, 10, 10, .3);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .42s var(--wp--custom--ease-out), visibility .42s;
  }

  .kz-drawer.is-open {
    transform: none;
    visibility: visible;
  }

  .kz-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: var(--wp--preset--color--ink-2);
  }

  .kz-drawer__head .kz-logo img {
    height: 22px;
    filter: none;
    opacity: 1;
  }

  .kz-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: var(--wp--custom--radius-pill);
    background: transparent;
    color: var(--wp--preset--color--surface);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
  }

  .kz-drawer__close:hover {
    background: rgba(255, 255, 255, .14);
  }

  /* A nav a fiókban: függőleges lista, sorszámozva (01 …) */
  .kz-nav.wp-block-navigation {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    font-size: 18px;
  }

  .kz-nav .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    counter-reset: kz-menu;
  }

  .kz-nav .wp-block-navigation-item {
    counter-increment: kz-menu;
  }

  .kz-nav .wp-block-navigation-item__content {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 14px;
    padding: 19px 22px;
    border-radius: 0;
    border-bottom: 1px solid rgba(20, 20, 20, .12);
    color: var(--wp--preset--color--ink);
    font-weight: 600;
    line-height: 1.25;
    transition: background .2s ease;
  }

  .kz-nav .wp-block-navigation-item__content::before {
    content: counter(kz-menu, decimal-leading-zero);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .06em;
    /* A terv #ac9376-ja fehéren 2,92:1 – feliratra az acc-ink (tokenek.md) */
    color: var(--wp--preset--color--acc-ink);
  }

  .kz-nav .wp-block-navigation-item__content:hover,
  .kz-nav .wp-block-navigation-item__content:focus-visible,
  .kz-nav .current-menu-item > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--surface-3);
    color: var(--wp--preset--color--ink);
  }

  .kz-drawer__foot {
    display: block;
    flex: 0 0 auto;
    padding: 16px 22px 22px;
    border-top: 1px solid rgba(20, 20, 20, .12);
    background: var(--wp--preset--color--surface);
  }

  .kz-drawer__foot .wp-block-button {
    width: 100%;
  }

  .kz-drawer__foot .wp-block-button__link {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 17px 22px;
    text-align: center;
    box-shadow: none;
  }

  .kz-drawer__address {
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--wp--preset--color--ink-soft);
  }

  .kz-drawer__address a {
    display: inline-block;
    padding: 6px 0;
    color: inherit;
  }
}

@media (max-width: 620px) {
  .kz-header__actions .wp-block-button {
    display: none;
  }

  /* Menü nélkül (dontesek.md 45.) nincs fiók, ezért a CTA mobilon is marad, kisebb */
  .kz-header--nomenu .kz-header__actions .wp-block-button {
    display: block;
  }

  .kz-header--nomenu .kz-header__actions .wp-block-button__link {
    padding: 10px 16px;
    font-size: 13.5px;
  }
}

/* ==========================================================================
   Lábléc
   ========================================================================== */

.kz-footer {
  background: var(--wp--preset--color--ink-2);
  border-top: 1px solid var(--wp--custom--hairline-light);
  color: var(--wp--preset--color--surface);
}

.kz-footer a {
  color: var(--wp--preset--color--surface);
}

.kz-footer a:hover {
  color: rgba(255, 255, 255, .75);
}

.kz-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 40px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 60px var(--wp--custom--gutter) 44px;
}

.kz-footer .kz-logo {
  margin-bottom: 16px;
}

.kz-footer__address {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .75);
}

.kz-footer__address a {
  display: inline-block;
  padding: 6px 0;
  color: inherit;
}

.kz-footer__social {
  display: none;
  gap: 12px;
  margin-top: 22px;
}

.kz-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--wp--custom--radius-pill);
  color: var(--wp--preset--color--surface);
  transition: background .25s ease, color .25s ease;
}

.kz-footer__social a:hover {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink-2);
}

/* Oszlopcím: a terv #ac9376-ja a #3A3A3A-n 3,9:1 – feliratra az acc-dark (tokenek.md) */
.kz-footer .kz-eyebrow {
  margin-bottom: 14px;
  color: var(--wp--preset--color--acc-dark);
}

/* Oszloplista: szöveg, amíg a céloldal nincs meg; link, ha van (dontesek.md 45.) */
.kz-footer__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  list-style: none;
}

.kz-footer__list li {
  margin: 0;
}

.kz-footer__list a {
  display: inline-block;
  color: var(--wp--preset--color--surface);
  text-decoration: none;
}

/* A terv .5-je a #3A3A3A-n 4,19:1 – .62-re emelve (5,3:1), mint a Kapcsolat címkéi */
.kz-footer__copy {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--wp--custom--gutter) 40px;
  font-size: 14px;
  color: rgba(255, 255, 255, .62);
}

@media (max-width: 760px) {
  .kz-footer__cols {
    display: none;
  }

  .kz-footer__social {
    display: flex;
  }
}

@media (max-width: 700px) {
  .kz-footer a {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

/* ==========================================================================
   Animációk (a terv km-* kulcskockái)
   ========================================================================== */

@keyframes km-swap {
  0%, 42% { opacity: 1; transform: translateY(0); }
  50%, 92% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes km-swap2 {
  0%, 42% { opacity: 0; transform: translateY(10px); }
  50%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes km-line {
  from { transform: translateY(-120%); }
  to { transform: translateY(420%); }
}

@keyframes km-rise {
  from { transform: translateY(105%) rotate(2deg); opacity: 0; }
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

@keyframes km-fade {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   1. Hero (#top)
   ========================================================================== */

/* Ügyféligény (dontesek.md 44.): a hero a nézet teljes magassága, nem 16:9.
   A terv aspect-ratio + clamp(360px,58svh,760px) párosa 1600px-en pont 900px-et
   adott, más szélességen viszont többet vagy kevesebbet a nézetnél. */
.kz-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  min-width: 0;
  width: 100%;
  margin: 0;
  background: var(--wp--preset--color--ink);
  overflow: hidden;
}

/* A terv data-parallax="0.25" burkolója; az eltolást az F5 JS adja */
.kz-hero__media {
  position: absolute;
  inset: -8% 0;
}

.kz-hero__video,
.kz-hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.kz-hero__video video {
  display: block;
  object-fit: cover;
  filter: brightness(1.22) saturate(1.04);
}

/* A terv két rétege egyben: felül a gradiens, alatta a sík rgba(10,10,10,.08) */
.kz-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .34) 0%, rgba(20, 20, 20, .06) 40%, rgba(10, 10, 10, .74) 100%),
    linear-gradient(rgba(10, 10, 10, .08), rgba(10, 10, 10, .08));
  pointer-events: none;
}

.kz-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 30px);
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(96px, 17vw, 132px) var(--wp--custom--gutter) clamp(36px, 6vw, 64px);
  text-align: left;
}

.kz-hero__logo {
  display: block;
  width: auto;
  height: clamp(40px, 5vw, 68px);
  animation: km-fade .9s .1s both;
}

.kz-hero__title {
  /* A terv 22ch-ja. A Bebas Neue „0"-ja 0,4em (mérve: 13,6px / 34px), tehát 8,8em.
     Nem ch, mert a Chrome a fallback betűből számolja, és betöltés után nem frissíti. */
  max-width: 8.8em;
  margin: 0;
  color: var(--wp--preset--color--surface);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 12px 44px rgba(0, 0, 0, .35);
  animation: km-rise 1s .2s var(--wp--custom--ease-out) both;
}

.kz-hero__sub {
  position: relative;
  width: 100%;
  max-width: min(100%, calc(100vw - clamp(40px, 14vw, 200px)));
  height: 1.3em;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(20px, 3.4vw, 54px);
  line-height: 1.3;
  letter-spacing: .02em;
  /* A terv #BDBDBD-je; a fátyollal együtt az F2 végén mérjük (tokenek.md: --scrim) */
  color: #BDBDBD;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 12px 44px rgba(0, 0, 0, .35);
  animation: km-fade 1s .6s both;
}

.kz-hero__sub p {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  animation: km-swap 9s ease-in-out infinite;
}

.kz-hero__sub p + p {
  animation-name: km-swap2;
}

/* „Görgessen" jelző – a terv hero-eleme; a szolgáltatás-paneleken is (ügyféligény,
   43. e). Függőlegesen középre (44.): a terv jobb alsó sarkát az EU-sáv takarná. */
.kz-scroll-hint {
  position: absolute;
  right: clamp(14px, 4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: normal;
  color: rgba(245, 245, 245, .5);
  pointer-events: none;
}

.kz-scroll-hint__label {
  writing-mode: vertical-rl;
}

.kz-scroll-hint__line {
  position: relative;
  width: 1px;
  height: 44px;
  background: rgba(245, 245, 245, .2);
  overflow: hidden;
}

.kz-scroll-hint__line span {
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--surface);
  animation: km-line 2.6s ease-in-out infinite;
}

/* A panelen a tartalom oldalmargójához igazítva */
.kz-stack__panel .kz-scroll-hint {
  right: var(--wp--custom--gutter);
}

@media (max-width: 760px) {
  .kz-hero__sub {
    height: 2.6em;
  }
}

@media (max-width: 430px) {
  .kz-hero__sub {
    font-size: 20px;
  }
}

/* ==========================================================================
   2. KPI-sáv
   ========================================================================== */

.kz-kpi {
  position: relative;
  padding-bottom: 40px; /* a terv záró <div style="padding-bottom:40px"> */
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--custom--hairline-dark);
  overflow: hidden;
}

.kz-kpi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(52px, 10vw, 80px) var(--wp--custom--gutter) clamp(24px, 5vw, 30px);
}

.kz-kpi__card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 5vw, 32px);
  border-left: 1px solid rgba(20, 20, 20, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  transition: background .4s ease, color .4s ease;
}

/* A terv data-flip="#3A3A3A" data-flip-fg="#F5F5F5" hovere, CSS-ben. 760px alatt
   nincs hover (a terv isMob-ja): ott a nézet közepéhez legközelebbi kártya fordul,
   az F5 JS .is-flipped osztállyal. */
@media (min-width: 761px) {
  .kz-kpi__card:hover {
    background: var(--wp--preset--color--ink-2);
  }

  .kz-kpi__card:hover .kz-kpi__label,
  .kz-kpi__card:hover .kz-kpi__num,
  .kz-kpi__card:hover .kz-kpi__unit,
  .kz-kpi__card:hover .kz-kpi__desc {
    color: var(--wp--preset--color--surface-2);
  }
}

.kz-kpi__card.is-flipped {
  background: var(--wp--preset--color--ink-2);
}

.kz-kpi__card.is-flipped .kz-kpi__label,
.kz-kpi__card.is-flipped .kz-kpi__num,
.kz-kpi__card.is-flipped .kz-kpi__unit,
.kz-kpi__card.is-flipped .kz-kpi__desc {
  color: var(--wp--preset--color--surface-2);
}

/* A terv rgba(20,20,20,.5)-e 3,45:1 – tokenek.md szerint ink-soft */
.kz-kpi__label {
  margin: 0 0 22px;
  color: var(--wp--preset--color--ink-soft);
  transition: color .4s ease;
}

.kz-kpi__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.kz-kpi__value--tight {
  gap: 6px;
}

.kz-kpi__num {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--kpi);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .01em;
  color: var(--wp--preset--color--ink);
  transition: color .4s ease;
}

/* A terv #ac9376-ja fehéren 2,92:1 – feliratra acc-ink (tokenek.md) */
.kz-kpi__unit {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--unit);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--wp--preset--color--acc-ink);
  transition: color .4s ease;
}

.kz-kpi__desc {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.55;
  /* A terv .68-a; a tokenek.md két fokozata .78 és .62 – lásd jovahagyasra.md */
  color: rgba(20, 20, 20, .68);
  transition: color .4s ease;
}

/* A 2026-09-25-ös terv mobilköre: egy oszlop, szürke kártyák, nagyobb számok */
@media (max-width: 760px) {
  .kz-kpi__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 34px;
    padding-bottom: 10px;
  }

  .kz-kpi__card {
    min-height: 0;
    padding: clamp(20px, 5vw, 30px);
    border-left: 0;
    background: var(--wp--preset--color--surface-3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  }

  .kz-kpi__label {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: .14em;
  }

  .kz-kpi__num {
    font-size: 38px;
  }

  .kz-kpi__unit {
    font-size: 18px;
  }

  .kz-kpi__desc {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kz-kpi__card,
  .kz-kpi__label,
  .kz-kpi__num,
  .kz-kpi__unit,
  .kz-kpi__desc {
    transition: none;
  }
}

/* ==========================================================================
   3. Rólunk (#rolunk) – C változat
   ========================================================================== */

.kz-rolunk {
  position: relative;
  padding: var(--wp--custom--section-y) 0 0;
  background: var(--wp--preset--color--surface-3);
  overflow: hidden;
}

.kz-rolunk__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: clamp(340px, 78vw, 560px);
  background: var(--wp--preset--color--ink);
  overflow: hidden;
}

.kz-rolunk__video,
.kz-rolunk__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.kz-rolunk__video video {
  display: block;
  object-fit: cover;
}

.kz-rolunk__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, .55) 45%, rgba(10, 10, 10, .9) 100%);
  pointer-events: none;
}

.kz-rolunk__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px 56px;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(52px, 10vw, 80px) var(--wp--custom--gutter);
}

.kz-rolunk__quote {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--wp--preset--color--surface-2);
}

.kz-rolunk__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kz-rolunk__text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(245, 245, 245, .88);
}

.kz-rolunk__text p + p {
  color: rgba(245, 245, 245, .72);
}

/* A terv globális szabálya: section p { font-size: 15.5px !important } 760px alatt.
   Ez a tervben az idézetet is 15,5px-re viszi – lásd jovahagyasra.md. */
@media (max-width: 760px) {
  .kz-rolunk__quote,
  .kz-rolunk__text p {
    font-size: 15.5px;
  }
}

/* ==========================================================================
   4. Szolgáltatások (#szolgaltatasok) – A változat, ragadó stack
   ch → em: Manrope „0" = 0,61em, Bebas Neue „0" = 0,4em (mérve)
   ========================================================================== */

.kz-szolg {
  position: relative;
  padding: var(--wp--custom--section-y) 0;
  background: var(--wp--preset--color--surface);
  overflow: clip;
}

.kz-szolg__head {
  margin-bottom: 22px;
}

.kz-szolg__lead {
  margin: 0 0 44px;
  max-width: 35.5em; /* a terv 60ch-ja: a tervben 621px-re oldódik fel 17,5px-en (mérve) */
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(20, 20, 20, .75);
}

/* --- Stack ------------------------------------------------------------ */

.kz-stack {
  position: relative;
  /* Görgetési út panelenként a ragadás magasságán felül (szekciok.md: 140–160%).
     Élőben hangolandó; 35svh a korábbi 70svh-s panel fele volt (~150%), a
     2026-09-25-ös magasabb panellel sem változott. */
  --kz-stack-travel: 35svh;
  /* Ügyféligény (dontesek.md 43.): tér a bevezető és a panelek között */
  margin-top: clamp(24px, 4vw, 56px);
  background: var(--wp--preset--color--ink);
}

.kz-stack__panel {
  position: sticky;
  /* A terv: 63 / 77 / 91px – panelenként +14px, hogy a ragadt panelek lépcsőzzenek */
  --kz-panel-top: calc(63px + var(--kz-panel-i, 0) * 14px);
  top: var(--kz-panel-top);
  z-index: calc(1 + var(--kz-panel-i, 0));
  display: flex;
  /* Ügyféligény (dontesek.md 43.): a ragadt panel a nézet aljáig ér, így a
     panelek közti távtartó sötét sávja soha nem látszik. A terv magassága
     (2026-09-25: 86svh) alsó korlát. */
  min-height: max(clamp(520px, 86svh, 820px), calc(100svh - var(--kz-panel-top)));
}

.kz-stack__panel + .kz-stack__panel {
  margin-top: var(--kz-stack-travel);
}

.kz-stack__inner {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 100%;
  background: var(--wp--preset--color--ink);
  box-shadow: 0 -18px 50px rgba(20, 20, 20, .32);
  transform-origin: center top;
  overflow: hidden;
}

/* +18% magasság: a parallax (F5) mozgástere.
   Ügyféligény (dontesek.md 43.): sötétítő szűrő az olvashatóságért. */
.kz-stack__img {
  position: absolute;
  top: -9%;
  left: 0;
  display: block;
  width: 100%;
  height: 118%;
  object-fit: cover;
  filter: brightness(.82) saturate(.92);
}

/* A terv .52 / .16 / .72-je, a közepe .16-ról .3-ra sűrítve (ügyféligény) */
.kz-stack__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .3) 38%, rgba(10, 10, 10, .75) 100%);
  pointer-events: none;
}

/* Az F5 JS állítja az opacity-t, ahogy a következő panel rácsúszik */
.kz-stack__dim {
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--ink);
  opacity: 0;
  pointer-events: none;
}

/* Ügyféligény (dontesek.md 43.): a panel tartalma a tartalomsávhoz (1560px +
   oldalmargó) igazodik, mint a szekciófej – a terv széltől 44px-re tette. */
.kz-stack__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 28px);
  width: 100%;
  max-width: 1560px;
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(22px, 5vw, 44px) var(--wp--custom--gutter);
}

/* A terv 22ch-ja a burkolón ül, aminek a betűje a 16px-es Manrope (nem a Bebas
   cím), ezért a cím ~215px-re szorul és szavanként törik. Mérve, átvéve –
   valószínűleg véletlen, lásd jovahagyasra.md. */
.kz-stack__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 13.42em;
  font-size: 16px;
}

.kz-stack__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--panel);
  line-height: .96;
  letter-spacing: .01em;
  color: var(--wp--preset--color--surface);
}

.kz-stack__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.kz-stack__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 31.72em; /* a terv 52ch-ja Manrope-ban, 16px-en */
  font-size: 16px;
}

.kz-stack__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
}

.kz-stack__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Keret 4,07:1 – keretre a 3:1 a küszöb, megfelel (tokenek.md) */
.kz-chip {
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: var(--wp--custom--radius-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  color: var(--wp--preset--color--surface);
}

/* A terv itt fehér gombot használ, nem a cta-sárgát – lásd jovahagyasra.md */
.kz-stack__cta {
  align-self: flex-start;
  padding: 13px 22px;
  border-radius: var(--wp--custom--radius-pill);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  transition: transform .25s ease;
}

.kz-stack__cta:hover,
.kz-stack__cta:focus-visible {
  color: var(--wp--preset--color--ink);
  transform: translateY(-2px);
}

.kz-stack__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--surface);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .kz-stack__panel {
    --kz-panel-top: 78px;
  }
}

@media (max-width: 760px) {
  .kz-szolg__lead,
  .kz-stack__lead {
    font-size: 15.5px;
  }
}

@media (max-width: 700px) {
  .kz-stack__panel {
    min-height: max(clamp(480px, 80svh, 680px), calc(100svh - var(--kz-panel-top)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kz-stack__inner,
  .kz-stack__img {
    transform: none !important;
  }

  .kz-stack__cta {
    transition: none;
  }

  .kz-stack__cta:hover {
    transform: none;
  }
}

/* ==========================================================================
   Vízszintes sín (Referenciák, Blog): natív görgetés + scroll-snap
   ========================================================================== */

.kz-rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.kz-rail::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   5. Referenciák (#referencia)
   ========================================================================== */

.kz-ref {
  position: relative;
  padding: var(--wp--custom--section-y) 0;
  background: var(--wp--preset--color--surface-3);
  overflow: hidden;
}

.kz-ref__top {
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.kz-ref__head {
  margin-bottom: 18px;
}

.kz-ref__lead {
  margin: 0;
  max-width: 26.02em; /* a terv 44ch-ja Manrope-ban, 17,5px-en (10,35px/ch mérve) */
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(20, 20, 20, .75);
}

/* A terv data-fullbleed sávja; #0E1013 az ink tokenhez tartozik */
.kz-ref__band {
  padding: clamp(16px, 2.4vw, 32px);
  background: var(--wp--preset--color--ink);
}

.kz-ref__arrows {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 0 clamp(14px, 1.6vw, 20px);
}

.kz-ref__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--surface);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.kz-ref__arrow:hover,
.kz-ref__arrow:focus-visible {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
}

.kz-ref__arrow:focus-visible {
  outline: 2px solid var(--wp--preset--color--surface);
  outline-offset: 3px;
}

.kz-ref__rail {
  gap: 28px;
  padding-bottom: 6px;
}

.kz-ref__card {
  position: relative;
  display: block;
  flex: 0 0 min(900px, 82vw);
  aspect-ratio: 16 / 10;
  scroll-snap-align: start;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--surface);
  overflow: hidden;
  cursor: zoom-in;
}

.kz-ref__card:hover,
.kz-ref__card:focus-visible {
  color: var(--wp--preset--color--surface);
}

.kz-ref__card:focus-visible {
  outline: 2px solid var(--wp--preset--color--surface);
  outline-offset: -4px;
}

.kz-ref__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.kz-ref__card:hover .kz-ref__img {
  transform: scale(1.05);
}

.kz-ref__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, .06) 0%, rgba(10, 10, 10, .45) 52%, rgba(8, 9, 11, .93) 100%);
  pointer-events: none;
}

.kz-ref__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 38px);
  pointer-events: none;
}

.kz-ref__name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--card);
  line-height: 1.04;
  letter-spacing: .02em;
  color: var(--wp--preset--color--surface);
}

.kz-ref__stats {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.kz-ref__kwp {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1;
  color: var(--wp--preset--color--surface);
}

.kz-ref__inv {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(245, 245, 245, .84);
}

@media (max-width: 760px) {
  .kz-ref__lead {
    font-size: 15.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kz-ref__img,
  .kz-ref__arrow {
    transition: none;
  }

  .kz-ref__card:hover .kz-ref__img {
    transform: none;
  }

  .kz-rail {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   6. Blog (#blog)
   A terv egyetlen lekerekített, nem pirula doboza (18/14/10/6/5px) – mérve,
   átvéve; lásd jovahagyasra.md.
   ========================================================================== */

.kz-blog {
  padding: var(--wp--custom--section-y) var(--wp--custom--gutter);
  background: var(--wp--preset--color--surface);
}

.kz-blog__box {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) 0 clamp(52px, 6vw, 92px);
  border-radius: 18px;
  background: var(--wp--preset--color--ink);
  overflow: hidden;
}

/* Az aktív kártya képe elmosva; az F5 JS előtölti és áttűnve cseréli görgetésre */
.kz-blog__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.14);
  transform-origin: center;
  filter: blur(12px) saturate(1.05) brightness(.66);
  opacity: 1;
  transition: opacity .55s ease;
}

.kz-blog__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 11, .5) 0%, rgba(8, 9, 11, .38) 45%, rgba(8, 9, 11, .58) 100%);
  pointer-events: none;
}

.kz-blog__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1560px;
  margin: 0 auto clamp(20px, 3vw, 34px);
  padding: 0 clamp(20px, 3vw, 44px);
}

.kz-blog__title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--wp--preset--color--surface);
}

.kz-blog__tools {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
}

.kz-blog__count {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(15px, 1.2vw, 19px);
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .72);
}

.kz-blog__all {
  padding: 13px 22px;
  border-radius: var(--wp--custom--radius-pill);
  background: var(--wp--preset--color--cta);
  color: var(--wp--preset--color--ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  transition: transform .25s ease;
}

.kz-blog__all:hover,
.kz-blog__all:focus-visible {
  color: var(--wp--preset--color--ink);
  transform: translateY(-2px);
}

.kz-blog__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: var(--wp--preset--color--surface);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}

.kz-blog__arrow svg {
  width: 20px;
  height: 20px;
}

.kz-blog__arrow:hover,
.kz-blog__arrow:focus-visible {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
}

.kz-blog__all:focus-visible,
.kz-blog__arrow:focus-visible {
  outline: 2px solid var(--wp--preset--color--surface);
  outline-offset: 3px;
}

.kz-blog__rail {
  position: relative;
  gap: clamp(16px, 2vw, 28px);
  padding: 0 clamp(20px, 3vw, 44px) 10px;
  scroll-snap-type: x proximity;
  scroll-padding: 0 clamp(20px, 3vw, 44px);
  cursor: grab;
}

.kz-blog__card {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(16px, 2vw, 30px);
  flex: 0 0 min(1120px, 88%);
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 14px;
  background: #FBFAF8; /* a terv kártyaháttere; nincs a tokenek közt */
  scroll-snap-align: start;
  overflow: hidden;
}

.kz-blog__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--wp--preset--color--ink);
  overflow: hidden;
}

.kz-blog__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kz-blog__body {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(8px, 1.2vw, 18px) clamp(6px, 1vw, 14px) clamp(8px, 1vw, 14px) 0;
}

.kz-blog__card-title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.04;
  letter-spacing: .02em;
  color: var(--wp--preset--color--ink);
}

.kz-blog__lead {
  margin: 0;
  max-width: 31.72em; /* a terv 52ch-ja Manrope-ban */
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.6;
  color: #3F3F3F; /* a terv értéke; ink-2 (#3A3A3A) közeli, de mérve ez */
}

.kz-blog__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  transition: color .25s ease;
}

/* A terv hover-színe #ac9376 (2,92:1 világoson) – feliratra acc-ink */
.kz-blog__more:hover,
.kz-blog__more:focus-visible {
  color: var(--wp--preset--color--acc-ink);
}

.kz-blog__more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background: var(--wp--preset--color--cta);
  color: var(--wp--preset--color--ink);
}

.kz-blog__more-icon svg {
  width: 17px;
  height: 17px;
}

/* A 2026-09-25-ös terv mobilköre: egyoszlopos kártya, a gomb külön sorban */
@media (max-width: 760px) {
  .kz-blog__box {
    padding: 22px 0 24px;
    border-radius: 14px;
  }

  .kz-blog__head {
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 16px;
  }

  .kz-blog__title {
    font-size: 27px;
  }

  .kz-blog__tools {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }

  .kz-blog__all {
    order: 3;
    flex: 1 1 100%;
    text-align: center;
  }

  .kz-blog__rail {
    gap: 12px;
    padding: 0 16px 8px;
    scroll-padding: 0 16px;
  }

  .kz-blog__card {
    flex: 0 0 88%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border-radius: 12px;
  }

  .kz-blog__media {
    aspect-ratio: 16 / 10;
    border-radius: 12px 12px 0 0;
  }

  .kz-blog__body {
    gap: 9px;
    padding: 15px 16px 17px;
  }

  .kz-blog__card-title {
    font-size: 25px;
  }

  .kz-blog__lead {
    font-size: 13.5px;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kz-blog__bg,
  .kz-blog__all,
  .kz-blog__arrow,
  .kz-blog__more {
    transition: none;
  }

  .kz-blog__all:hover {
    transform: none;
  }
}

/* ==========================================================================
   7. Vélemények (#velemeny) – A változat
   ========================================================================== */

.kz-vel {
  position: relative;
  padding: var(--wp--custom--section-y) 0;
  background: var(--wp--preset--color--surface-3);
  overflow: hidden;
}

.kz-vel__title {
  margin: 0 0 44px;
}

.kz-vel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.kz-vel__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: clamp(20px, 5vw, 32px);
  border: 1px solid var(--wp--custom--hairline-dark);
  border-radius: 0;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  transition: transform .35s ease;
}

.kz-vel__card:hover {
  transform: translateY(-6px);
}

.kz-vel__card--dark {
  border: 0;
  background: var(--wp--preset--color--ink-2);
  color: var(--wp--preset--color--surface-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.kz-vel__quote {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
}

/* A terv rgba(20,20,20,.6)-a fehéren 5,0:1 – mérve, átvéve */
.kz-vel__meta {
  margin-top: auto;
  font-size: 14px;
  line-height: normal;
  color: rgba(20, 20, 20, .6);
}

.kz-vel__card--dark .kz-vel__meta {
  color: rgba(245, 245, 245, .6);
}

.kz-vel__stars {
  letter-spacing: .04em;
}

@media (max-width: 760px) {
  .kz-vel__quote {
    font-size: 15.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kz-vel__card {
    transition: none;
  }

  .kz-vel__card:hover {
    transform: none;
  }
}

/* ==========================================================================
   8. Felmérés CTA (#felmeres)
   ========================================================================== */

.kz-cta {
  padding: var(--wp--custom--section-y) 0;
  background: var(--wp--preset--color--surface);
}

.kz-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}

.kz-cta__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
}

.kz-cta__lead {
  margin: 0;
  max-width: 31.72em; /* a terv 52ch-ja Manrope-ban */
  font-size: 17px;
  line-height: 1.6;
  color: rgba(20, 20, 20, .72);
}

.kz-cta__buttons.wp-block-buttons {
  gap: 16px;
  justify-content: center;
}

/* Nagy gomb: 17px, 18px 34px, erősebb emelkedés */
.kz-btn--lg .wp-block-button__link {
  padding: 18px 34px;
  font-size: 17px;
}

.kz-btn--lg .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(20, 20, 20, .28);
}

/* Másodlagos gomb (404): a 2026-09-04-es terv lakossági gombjának #E6E6E6-ja */
.kz-btn--secondary .wp-block-button__link {
  background: #E6E6E6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.kz-btn--secondary .wp-block-button__link:hover {
  background: #E6E6E6;
  box-shadow: 0 16px 36px rgba(20, 20, 20, .16);
}

@media (max-width: 760px) {
  .kz-cta__lead {
    font-size: 15.5px;
  }
}

/* ==========================================================================
   9. Kapcsolat (#kapcsolat) – C változat
   ========================================================================== */

.kz-kap {
  position: relative;
  background: var(--wp--preset--color--ink); /* 2026-09-25: a terv #2B2B2B-je helyett #111111 */
  color: var(--wp--preset--color--surface);
  overflow: hidden;
}

.kz-kap__inner {
  padding-top: clamp(46px, 9vw, 70px);
  padding-bottom: 60px;
}

.kz-kap__head {
  margin-bottom: 36px;
}

.kz-kap .kz-section-num {
  color: var(--wp--preset--color--acc-dark);
}

.kz-kap__title {
  font-size: clamp(36px, 5vw, 70px);
  line-height: 1;
  color: var(--wp--preset--color--surface);
}

.kz-kap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.kz-kap__cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 4.5vw, 28px) clamp(20px, 5vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.kz-kap__cell:first-child {
  padding-right: clamp(20px, 5vw, 32px);
  padding-bottom: 28px;
  padding-left: 0;
  border-left: 0;
}

/* A terv .5-je a régi #2B2B2B-n 3,9:1 volt – a tokenek.md Kapcsolat-címke javítása
   (ink-soft, .62) itt a világos párja: rgba(245,245,245,.62) → 5,3:1, az új
   #111111-en ~7,1:1 (számolt) */
.kz-kap__label {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: normal;
  color: rgba(245, 245, 245, .62);
}

.kz-kap__phone {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(28px, 7vw, 38px);
  letter-spacing: .02em;
  line-height: 1;
}

.kz-kap__phone a,
.kz-kap a {
  color: var(--wp--preset--color--surface);
}

.kz-kap a:hover {
  color: rgba(255, 255, 255, .75);
}

.kz-kap__value {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
}

.kz-kap__note {
  margin: 0;
  font-size: 15px;
  line-height: normal;
  color: rgba(245, 245, 245, .6);
}

.kz-kap__data {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* --- Térkép: magától tölt, amikor a szekció közel ér (dontesek.md 55.);
       addig és JS nélkül a Google Térkép linkje látszik ------------------- */

.kz-map {
  position: relative;
  width: 100%;
  height: clamp(240px, 58vw, 420px);
  background: var(--wp--preset--color--ink);
  overflow: hidden;
}

.kz-map__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: var(--wp--custom--gutter);
  text-align: center;
}

.kz-map__link {
  font-size: 13.5px;
  color: rgba(245, 245, 245, .72);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kz-map__link:hover {
  color: var(--wp--preset--color--surface);
}

.kz-map.is-loaded .kz-map__gate {
  display: none;
}

/* ==========================================================================
   F5 – interakciók: állapotok, nagyító, videógomb, EU-sáv, térkép
   ========================================================================== */

/* Nyitott fiók / nagyító: a háttér nem görgethető */
body.kz-menu-open,
body.kz-lb-open {
  overflow: hidden;
}

.kz-blog__rail.is-grabbing {
  cursor: grabbing;
  user-select: none;
}

/* --- Videó szünet gomb (nincs a tervben – WCAG 2.2.2, lásd jovahagyasra.md) --- */

.kz-vid-toggle {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(245, 245, 245, .5);
  border-radius: var(--wp--custom--radius-pill);
  background: rgba(10, 10, 10, .35);
  color: var(--wp--preset--color--surface);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}

.kz-vid-toggle:hover,
.kz-vid-toggle:focus-visible {
  background: rgba(10, 10, 10, .6);
  border-color: var(--wp--preset--color--surface);
}

.kz-vid-toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--surface);
  outline-offset: 3px;
}

.kz-vid-toggle svg {
  width: 18px;
  height: 18px;
}

.kz-vid-toggle .kz-vid-toggle__play,
.kz-vid-toggle.is-paused .kz-vid-toggle__pause {
  display: none;
}

.kz-vid-toggle.is-paused .kz-vid-toggle__play {
  display: block;
}

.kz-hero__toggle {
  left: var(--wp--custom--gutter);
  bottom: 56px;
}

.kz-rolunk__toggle {
  right: var(--wp--custom--gutter);
  top: 20px;
}

/* --- Nagyító ---------------------------------------------------------- */

.kz-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(10, 10, 10, .93);
  cursor: zoom-out;
}

.kz-lb[hidden] {
  display: none;
}

.kz-lb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
}

.kz-lb__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--wp--custom--radius-pill);
  background: transparent;
  color: var(--wp--preset--color--surface);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.kz-lb__close:hover,
.kz-lb__close:focus-visible {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
}

.kz-lb__close:focus-visible {
  outline: 2px solid var(--wp--preset--color--surface);
  outline-offset: 3px;
}

/* --- EU/GINOP-sáv (a terv data-eu-badge-e) -------------------------------- */

.kz-eu {
  position: fixed;
  right: 0;
  bottom: clamp(72px, 10vw, 96px);
  z-index: 70;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .22));
}

.kz-eu[hidden] {
  display: none;
}

.kz-eu__link {
  display: block;
  padding: 6px 4px 6px 8px;
  background: var(--wp--preset--color--surface);
}

/* 2026-09-25: 100px magas minden nézeten (pályázatíró kérése); 500×150 → ~333px széles */
.kz-eu__link img {
  display: block;
  width: auto;
  max-width: none;
  height: 100px;
}

/* A terv 22px-e helyett 26px: WCAG 2.5.8 célméret (min. 24px) */
.kz-eu__close {
  position: absolute;
  top: -13px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(20, 20, 20, .25);
  border-radius: var(--wp--custom--radius-pill);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.kz-eu__close:hover,
.kz-eu__close:focus-visible {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--surface);
}

/* --- Térkép betöltve ------------------------------------------------------ */

.kz-map__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(1) contrast(1.05); /* a terv C változatának szürke térképe */
}

@media (prefers-reduced-motion: reduce) {
  .kz-vid-toggle,
  .kz-lb__close {
    transition: none;
  }
}

/* ==========================================================================
   404
   ========================================================================== */

.kz-404__label {
  color: var(--wp--preset--color--acc-ink);
}

.kz-404__title {
  max-width: 8.8em; /* 22 Bebas-karakter, mint a hero címe */
}

.kz-404__text {
  max-width: 35.5em;
  color: var(--wp--preset--color--ink-muted);
}

/* A globális blockGap 0, a két gomb összeérne; a Felmérés-CTA gombköze */
.kz-404 .wp-block-buttons {
  gap: 16px;
}

/* ==========================================================================
   Pályázat (templates/palyazat.html, dontesek.md 51.) – a Palyazat.dc.html
   értékei. A terv .55-ös szürke címkéi ink-soft (.62), az #AC9376 feliratok
   acc-ink – a 17. és 41. döntés kontrasztszabálya szerint.
   ========================================================================== */

/* A terv felső térköze a saját rögzített fejlécét is tartalmazza; a main már
   le van tolva a fejléc magasságával, ezért itt az különbözet kell. */
.kz-pal-head {
  padding-top: calc(clamp(112px, 22vw, 170px) - var(--kz-header-h));
}

.kz-pal-head__badge {
  max-width: 900px;
  animation: km-fade .8s both;
}

.kz-pal-head__badge img {
  display: block;
  width: 100%;
  height: auto;
}

.kz-pal-head__label {
  margin-top: clamp(30px, 6vw, 48px);
  color: var(--wp--preset--color--acc-ink);
}

.kz-pal-head__title {
  max-width: 8.8em; /* a terv 22ch-ja Bebasban */
  margin-top: 14px;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.06;
  animation: km-fade .9s .1s both;
}

.kz-pal-facts {
  padding-top: clamp(34px, 7vw, 56px);
  padding-bottom: clamp(48px, 9vw, 80px);
}

.kz-pal-facts__list {
  border-top: 1px solid rgba(20, 22, 26, .12);
}

.kz-pal-facts__row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 8px clamp(24px, 4vw, 60px);
  padding: 18px 0;
  border-bottom: 1px solid rgba(20, 22, 26, .12);
}

.kz-pal-facts__label {
  padding-top: 4px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--wp--preset--color--ink-soft);
}

.kz-pal-facts__value {
  font-size: 17.5px;
  line-height: 1.5;
  font-weight: 500;
}

.kz-pal-facts__value--id {
  overflow-wrap: anywhere;
}

.kz-pal-facts__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.kz-pal-facts__num,
.kz-pal-facts__unit {
  font-family: var(--wp--preset--font-family--heading);
  line-height: 1;
}

.kz-pal-facts__num {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: .01em;
}

.kz-pal-facts__unit {
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: .03em;
  color: var(--wp--preset--color--acc-ink);
}

.kz-pal-desc {
  padding: clamp(40px, 7vw, 72px) 0;
  background: var(--wp--preset--color--surface-3);
  border-top: 1px solid rgba(20, 20, 20, .08);
  border-bottom: 1px solid rgba(20, 20, 20, .08);
}

.kz-pal-desc__title {
  margin-bottom: clamp(22px, 4vw, 34px);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
}

/* 78ch Manrope-ban (a Felmérés-lead 52ch = 31.72em arányával) */
.kz-pal-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 47.58em;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(20, 20, 20, .82);
}

.kz-pal-text--press {
  gap: 16px;
  font-size: 16.5px;
}

.kz-pal-text a {
  color: inherit;
  text-decoration: underline;
}

.kz-pal-press {
  padding-top: clamp(40px, 7vw, 72px);
  padding-bottom: clamp(40px, 7vw, 72px);
}

.kz-pal-press__label {
  margin-bottom: clamp(22px, 4vw, 34px);
  color: var(--wp--preset--color--acc-ink);
}

.kz-pal-press__card {
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid rgba(20, 20, 20, .12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.kz-pal-press__date {
  font-size: 13.5px;
  letter-spacing: .08em;
  color: var(--wp--preset--color--ink-soft);
}

.kz-pal-press__title {
  margin: 12px 0 20px;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.08;
}

.kz-pal-press__actions {
  margin-top: 26px;
}

/* Körvonalas pirula (a terv PDF-gombja) */
.kz-btn--outline .wp-block-button__link {
  padding: 13px 22px;
  border: 1px solid rgba(20, 20, 20, .3);
  background: transparent;
  box-shadow: none;
  font-size: 14.5px;
  transition: background .25s ease, color .25s ease;
}

.kz-btn--outline .wp-block-button__link:hover,
.kz-btn--outline .wp-block-button__link:focus {
  background: var(--wp--preset--color--ink);
  color: #FFFFFF;
}

@media (max-width: 880px) {
  .kz-pal-facts__row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kz-pal-head__badge,
  .kz-pal-head__title {
    animation: none;
  }
}

/* ==========================================================================
   Cikktörzs (single.html) – a Tudastar.dc.html kinyitott cikkének értékei:
   bekezdés 0 0 14px, 16.5px/1.75, .84; címsor Bebas 26px, 26px 0 10px.
   A globális blockGap 0, ezért a térközt itt kell megadni.
   ========================================================================== */

.kz-article > * {
  margin-top: 0;
  margin-bottom: 14px;
}

.kz-article p,
.kz-article li,
.kz-article td,
.kz-article th {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(20, 20, 20, .84);
}

.kz-article h2 {
  margin: 26px 0 10px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .02em;
}

/* A h3 (pl. Blog_03 fázisai) a tervben nincs; a h2 alá rendelve, kisebb felső térközzel. */
.kz-article h3 {
  margin: 20px 0 8px;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: .02em;
}

.kz-article > :first-child {
  margin-top: 0;
}

.kz-article ul {
  padding-left: 1.2em;
}

.kz-article li + li {
  margin-top: 4px;
}

.kz-article strong {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

.kz-article a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kz-article .wp-block-quote {
  margin: 20px 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--wp--preset--color--acc-line);
}

.kz-article .wp-block-quote p {
  margin: 0;
  font-size: 15px;
}

.kz-article .wp-block-table {
  margin: 20px 0;
  overflow-x: auto;
}

.kz-article .wp-block-table table {
  min-width: 480px;
  border-collapse: collapse;
}

.kz-article .wp-block-table thead {
  border-bottom: 1px solid var(--wp--preset--color--ink);
}

.kz-article .wp-block-table th,
.kz-article .wp-block-table td {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid rgba(20, 20, 20, .14);
  text-align: left;
}

/* Megtérülési diagram (kondenz/megterules, dontesek.md 50.) */
.kz-chart {
  margin: 26px 0;
  padding: clamp(16px, 3vw, 28px);
  background: var(--wp--preset--color--surface-3);
}

.kz-chart__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

/* A Tudastar.dc.html körvonalas gombja, kisebb méretben */
.kz-chart__tab {
  padding: 9px 16px;
  border: 1px solid rgba(20, 20, 20, .28);
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  font: 600 14px/1.2 var(--wp--preset--font-family--body);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.kz-chart__tab:hover,
.kz-chart__tab[aria-selected="true"] {
  border-color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--ink);
  color: #FFFFFF;
}

.kz-chart__tab:focus-visible,
.kz-chart__scroll:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 3px;
}

.kz-chart__view {
  margin: 0;
}

.kz-chart__view + .kz-chart__view {
  margin-top: 26px;
}

.kz-chart.is-tabbed .kz-chart__view + .kz-chart__view {
  margin-top: 0;
}

.kz-chart__title {
  margin-bottom: 8px;
  font: 700 15px/1.4 var(--wp--preset--font-family--body);
}

.kz-chart.is-tabbed .kz-chart__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 640px alatt vízszintesen görgethető, hogy a feliratok ne zsugorodjanak olvashatatlanra */
.kz-chart__scroll {
  overflow-x: auto;
}

.kz-chart svg {
  display: block;
  width: 100%;
  min-width: 640px;
  max-width: 960px; /* szélesebben nézetmagas lenne */
  height: auto;
}

.kz-chart__grid {
  stroke: rgba(20, 20, 20, .1);
  stroke-width: 1;
}

.kz-chart__axis {
  fill: rgba(20, 20, 20, .62);
  font-size: 12px;
}

.kz-chart__value {
  fill: var(--wp--preset--color--ink);
  font-size: 12.5px;
  font-weight: 700;
}

.kz-chart__before { fill: #A3A3A3; }
.kz-chart__mvm { fill: #3B82F6; }
.kz-chart__loan { fill: var(--wp--preset--color--cta); }
.kz-chart__interest { fill: #B7791F; }

.kz-chart__limit {
  stroke: #EF4444;
  stroke-width: 2;
  stroke-dasharray: 7 5;
}

.kz-article .kz-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.kz-article .kz-chart__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.kz-chart__key {
  flex: none;
  width: 14px;
  height: 14px;
}

.kz-chart__key--before { background: #A3A3A3; }
.kz-chart__key--mvm { background: #3B82F6; }
.kz-chart__key--loan { background: var(--wp--preset--color--cta); }
.kz-chart__key--interest { background: #B7791F; }

.kz-chart__key--limit {
  height: 0;
  border-top: 2px dashed #EF4444;
}

.kz-article .wp-block-separator {
  margin: 26px 0;
  border: 0;
  border-top: 1px solid rgba(20, 20, 20, .14); /* a terv cikkláblécének vonala */
}

/* Csökkentett mozgásnál: a belépő animációk kimaradnak, a két alcím közül az első
   áll; a videót az F5 szünet gombja kezeli (WCAG 2.2.2). */
@media (prefers-reduced-motion: reduce) {
  .kz-hero__logo,
  .kz-hero__title,
  .kz-hero__sub,
  .kz-hero__sub p,
  .kz-scroll-hint__line span {
    animation: none;
  }

  .kz-hero__sub p + p {
    opacity: 0;
  }
}