/* ============================================================
   Oldalreteg - amit az eredeti design inline stilusban tartott.
   Csak az kerul ide, amit az Elementor sajat vezerloi nem tudnak
   kifejezni: gorgetes-allapotok, maszkolt feltarasok, ragados
   oszlopok, a mert eredmenyek tengelye, es a tobboszlopos
   elrendezesek explicit mobil-osszecsukasa.
   ============================================================ */

/* ---------- elo-animacios vedelem ----------
   A from-allapot csak akkor rejt, ha a JS valoban elindult. */
@media (prefers-reduced-motion: no-preference) {
  html.kp-anim [data-reveal] { opacity: 0; }
  html.kp-anim [data-hero-rule],
  html.kp-anim [data-ev-rule],
  html.kp-anim [data-q-rule],
  html.kp-anim [data-res-line],
  html.kp-anim [data-entry-rule] {
    transform: scaleX(0);
    transform-origin: left top;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.kp-anim [data-reveal] { opacity: 1; }
}

/* Az Elementor alap CSS-e minden .elementor-element -re transition: transform var(--e-transform-transition-duration,.4s)
   szabalyt tesz (hover-effektekhez). Ez utkozik a GSAP-al: mig a tween minden kepkockan
   uj inline transform erteket ir, a bongeszo sajat 0.4s-os atmenetet probal futtatni ezekre
   az ertekekre, igy a mozgas mindig lemaradva "kergeti" a GSAP-ot, a tween vegen pedig
   hirtelen behozza a lemaradast - ez adta a "begyorsul a vegen" erzetet. A sajat mozgatott
   elemeinken kikapcsoljuk ezt az atmenetet, a GSAP sajat idozitese/easinge marad az egyetlen. */
[data-hero-rule], [data-hero-title], [data-reveal], [data-rise], [data-word],
[data-ev-rule], [data-ev-div], [data-ev-val], [data-ev-label],
[data-q-rule], [data-q-mark], [data-q-line],
[data-row-index], [data-row-text], [data-cmp-cell], [data-cmp-mid],
[data-res-line], [data-res-dot-end], [data-res-after], [data-res-delta],
[data-entry-rule], [data-tone-wipe], [data-cta-title], [data-step-block] {
  transition: none !important;
}

/* ---------- olvasasjelzo ---------- */
.kp-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
}
.kp-progress__bar {
  height: 100%; background: var(--brand-blue);
  transform: scaleX(0); transform-origin: left center;
}

/* ---------- fejlec ----------
   Fix, atlatszo indulassal; nyolc pixel gorgetes utan felveszi a papirt. */
.kp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.kp-header.is-scrolled {
  background: var(--canvas);
  border-bottom-color: var(--hairline);
}

/* ---------- horgony-cel a fix fejlec alatt ---------- */
[id^="szekcio-"], #kapcsolat { scroll-margin-top: 72px; }

/* ---------- csendes link nyillal ---------- */
.kp-quiet-link { display: inline-flex; align-items: center; gap: var(--space-xs); }
.kp-quiet-link [data-arrow] { transition: transform var(--dur-micro) var(--ease-standard); }
.kp-quiet-link:hover [data-arrow] { transform: translateY(4px); }

/* ---------- 03 sorlista ----------
   A jutalom a hoveren van: az index feljebb lep, a szoveg tintat vesz,
   es egy jelzokek el huzodik be. Szulo-allapot gyerekekre - inline stilus
   ezt nem tudja kifejezni. */
.kp-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline;
  gap: var(--space-lg); padding: var(--space-lg) 0; border-top: 1px solid var(--hairline);
  position: relative; }
.kp-row__index, .kp-row__text, .kp-row__rule {
  transition: color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.kp-row__index { font: var(--type-caption); color: var(--stone); font-variant-numeric: tabular-nums; }
.kp-row__text { font: var(--type-heading-sm); font-family: var(--font-display);
  font-weight: var(--fw-semibold); color: var(--slate); }
.kp-row__rule { position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--brand-blue); transform: scaleX(0); transform-origin: left center; }
.kp-row:hover .kp-row__index { color: var(--brand-blue); transform: translateX(8px); }
.kp-row:hover .kp-row__text { color: var(--ink-strong); }
.kp-row:hover .kp-row__rule { transform: scaleX(1); }

/* ---------- 04 osszehasonlito tabla ---------- */
.kp-cmp { position: relative; background: var(--primary); }
.kp-cmp__mid { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--border-on-dark); transform: scaleY(0); transform-origin: top center; }
.kp-cmp__row, .kp-cmp__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xxl); }

/* ---------- 05 ragados idezet ---------- */
.kp-quote-col { position: sticky; top: 120px; align-self: start; }

/* ---------- 06 folyamat ----------
   Amelyik lepes a kozepso savban all, az az elo. Csak tonus valtozik,
   igy a gyors gorgetes sem hagyja felig animalva. */
.e-con.kp-proc-col { position: sticky; top: 120px; align-self: start; }
.kp-step { transition: color var(--dur-base) var(--ease-standard); }
.kp-step__num, .kp-step__title, .kp-step__body, .kp-step__edge {
  transition: color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.kp-step__num { color: var(--stone); font-variant-numeric: tabular-nums; }
.kp-step__title { color: var(--slate); }
.kp-step__body { color: var(--text-secondary); }
.kp-step__edge { background: var(--hairline); }
.kp-step.is-active .kp-step__num { color: var(--brand-blue); }
.kp-step.is-active .kp-step__title { color: var(--ink-strong); }
.kp-step.is-active .kp-step__body { color: var(--text-body); }
.kp-step.is-active .kp-step__edge { background: var(--brand-blue); }

.kp-rail { display: flex; flex-direction: column; gap: var(--space-sm); }
.kp-rail__item { display: flex; align-items: center; gap: var(--space-sm); }
.kp-rail__dot { width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--hairline); flex: none;
  transition: background-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard); }
.kp-rail__num { font: var(--type-caption); color: var(--stone);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-standard); }
.kp-rail__item.is-active .kp-rail__dot { background: var(--brand-blue); transform: scale(1.5); }
.kp-rail__item.is-active .kp-rail__num { color: var(--ink-strong); font-size: 15px; font-weight: 500; }

/* ---------- 08 belepesi savok ----------
   A teljes sor a link; a hover tonalis, emelkedes nelkul. */
.kp-entry { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl) var(--space-section); align-items: center;
  padding: var(--space-xxl) var(--space-lg); position: relative;
  text-decoration: none; color: inherit;
  transition: background-color var(--dur-fast) var(--ease-standard); }
.kp-entry:hover { background: var(--brand-blue-200); text-decoration: none; }
.kp-entry__rule { position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: var(--hairline); transform: scaleX(0); transform-origin: left center; }
.kp-entry__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--brand-blue); transform: scaleY(0); transform-origin: top center;
  transition: transform var(--dur-fast) var(--ease-standard); }
.kp-entry:hover .kp-entry__edge { transform: scaleY(1); }
.kp-entry__quote, .kp-entry__num, .kp-entry__name, .kp-entry__arrow {
  transition: color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.kp-entry:hover .kp-entry__quote { color: var(--primary); }
.kp-entry:hover .kp-entry__num { color: var(--primary); }
/* A keret helyben marad - csak a kitoltes es a felirat valtozik, igy semmi
   nem tunik el atmenet kozben. A gomb sajat hovere azonos ertekekre megy,
   kulonben a DS szabalya visszabillentene a hatart a gomb elenel. */
.kp-entry__btn { transition: background-color var(--dur-fast) var(--ease-standard),
  border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.kp-entry:hover .kp-entry__btn,
.kp-entry .kp-entry__btn:hover { background: var(--primary); border-color: var(--stone); color: var(--on-dark); }
.kp-entry:hover .kp-entry__arrow,
.kp-entry .kp-entry__btn:hover .kp-entry__arrow { transform: translate(4px, -4px); }

/* ---------- 07 mert eredmenyek tengelye ---------- */
.kp-res-track { position: relative; }
.kp-res__line { height: 2px; background: var(--brand-cyan);
  transform: scaleX(0); transform-origin: left center; }
.kp-res__dot { width: 9px; height: 9px; border-radius: var(--radius-full); flex: none; }

/* ---------- 09 tonalis kartyak ----------
   Minden felulet felfele torlodik a lapszinbol - a kartya szine a jutalom. */
.kp-tone-card { position: relative; overflow: hidden; }
.kp-tone-card__wipe { position: absolute; inset: 0; background: var(--canvas);
  transform: scaleY(1); transform-origin: bottom center; pointer-events: none; z-index: 2; }

/* ---------- vilagos gomb sotet feluleten ----------
   A DS-nek nincs vilagos varians; a geometria a .kp-btn-e, a tonus itt all. */
.kp-btn--light { background: var(--canvas); color: var(--ink); border-color: var(--canvas); }
.kp-btn--light:hover { background: var(--surface-card); border-color: var(--surface-card); color: var(--ink); }

/* ---------- ikonok ---------- */
.kp-icon--arrow-up-right { -webkit-mask-image: url("../icons/arrow-up-right.svg"); mask-image: url("../icons/arrow-up-right.svg"); }
.kp-icon--arrow-down { -webkit-mask-image: url("../icons/arrow-down.svg"); mask-image: url("../icons/arrow-down.svg"); }
.kp-icon--arrow-left { -webkit-mask-image: url("../icons/arrow-left.svg"); mask-image: url("../icons/arrow-left.svg"); }
.kp-icon--check { -webkit-mask-image: url("../icons/check.svg"); mask-image: url("../icons/check.svg"); }
.kp-icon--clock { -webkit-mask-image: url("../icons/clock.svg"); mask-image: url("../icons/clock.svg"); }
.kp-icon--calendar { -webkit-mask-image: url("../icons/calendar.svg"); mask-image: url("../icons/calendar.svg"); }
.kp-icon--user { -webkit-mask-image: url("../icons/user-round.svg"); mask-image: url("../icons/user-round.svg"); }
.kp-icon--16 { width: 16px; height: 16px; }
.kp-icon--14 { width: 14px; height: 14px; }

/* ---------- Elementor-illesztes ----------
   A kontener szelessege es a belso margo a tokenekbol jon, hogy a hero es a
   torzs ugyanazon a bal elen alljon. */
.e-con > .e-con-inner { max-width: var(--container-max); }
body:not(.elementor-editor-active) .kp-anim [data-reveal] { will-change: opacity, transform; }

/* ---------- mobil osszecsukas ----------
   Minden tobboszlopos elrendezes explicit szabaly szerint tor egy oszlopra. */
@media (max-width: 1000px) {
  .kp-row { grid-template-columns: 56px minmax(0, 1fr); }
  .kp-cmp__row, .kp-cmp__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .kp-cmp__mid { display: none; }
  .kp-cmp__answer { border-left: 1px solid var(--border-on-dark); padding-left: var(--space-md); }
  .kp-quote-col, .kp-proc-col { position: static; }
  .kp-rail { display: none; }
  .kp-entry { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
@media (max-width: 767px) {
  .kp-marquee__track { font-size: var(--fs-display-lg); }
}

/* ============================================================
   Elementor-illesztes: a DS komponensei nativ widgetekre huzva.
   Igy a felirat, a link es az ikon az Elementorban marad szerkesztheto,
   a megjelenes viszont a tokenekbol jon.
   ============================================================ */

/* ---------- gomb ----------
   A .kp-swap osztaly a DS feliratcserejet es nyilat adja a nativ
   Button widgetnek. A masodik feliratot a kp-motion.js klonozza; JS nelkul
   a gomb egyszeruen felirat marad, nyillal. */
.kp-swap.kp-swap .elementor-button {
  font: var(--type-button);
  border-radius: var(--radius-full);
  padding: 11px 24px;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  transition: background-color var(--dur-state) var(--ease-standard),
              border-color var(--dur-state) var(--ease-standard),
              color var(--dur-state) var(--ease-standard);
  white-space: nowrap;
}
.kp-swap .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: var(--space-xs); }
.kp-swap .elementor-button-content-wrapper::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("../icons/arrow-up-right.svg") center/contain no-repeat;
  mask: url("../icons/arrow-up-right.svg") center/contain no-repeat;
  transition: transform var(--dur-micro) var(--ease-standard);
}
.kp-swap:hover .elementor-button-content-wrapper::after { transform: translate(4px, -4px); }
.kp-swap.kp-swap--sm .elementor-button { padding: 7px 16px; font-size: var(--fs-caption); }
.kp-swap.kp-swap--sm .elementor-button-content-wrapper::after { width: 14px; height: 14px; }
.kp-swap.kp-swap--lg .elementor-button { padding: 14px 32px; font-size: var(--fs-body-md); }
/* Feliratcsere: a masodik sor a gomb sajat magassaga alatt var. */
.kp-swap .kp-btn__swap { display: inline-grid; overflow: hidden; height: 1.4em; }
.kp-swap .kp-btn__swap > span { grid-area: 1/1; transition: transform var(--dur-micro) var(--ease-standard); }
.kp-swap .kp-btn__swap > span:last-child { transform: translateY(100%); }
.kp-swap:hover .kp-btn__swap > span:first-child { transform: translateY(-100%); }
.kp-swap:hover .kp-btn__swap > span:last-child { transform: translateY(0); }
/* A gomb hover-animacioja finomabb, mint az alap --dur-micro (140ms): kifejezetten
   csak ezen a ket elemen (felirat-csusztatas + nyil) nyujtjuk meg 240ms-re. */
.kp-swap .kp-btn__swap > span,
.kp-swap .elementor-button-content-wrapper::after {
  transition-duration: 240ms;
}
/* Vilagos varians sotet feluleten - a lezaro CTA-hoz. */
.kp-swap.kp-swap--light .elementor-button { background: var(--canvas); border-color: var(--canvas); color: var(--primary); }
.kp-swap.kp-swap--light .elementor-button:hover { background: var(--surface-card); border-color: var(--surface-card); color: var(--primary); }
/* Csendes link nyillal lefele - a hero masodlagos linkje. */
.kp-swap.kp-swap--quiet .elementor-button { background: transparent; border: 0; color: var(--brand-blue-deep);
  font: var(--type-body-sm-medium); padding: 8px 0; }
.kp-swap.kp-swap--quiet .elementor-button:hover { color: var(--brand-blue-700); text-decoration: underline; }
.kp-swap.kp-swap--quiet .elementor-button-content-wrapper::after {
  -webkit-mask-image: url("../icons/arrow-down.svg"); mask-image: url("../icons/arrow-down.svg");
}
.kp-swap.kp-swap--quiet:hover .elementor-button-content-wrapper::after { transform: translateY(4px); }

/* ---------- fomenu ----------
   A hover egy kodkek hajszalvonal a felirat alatt, az aktiv oldale jelzokek. */
.kp-nav .elementor-nav-menu > li > a.elementor-item {
  font: var(--type-body-sm); color: var(--charcoal);
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color var(--dur-state) var(--ease-standard),
              border-color var(--dur-state) var(--ease-standard);
}
.kp-nav .elementor-nav-menu > li > a.elementor-item:hover {
  color: var(--ink); border-bottom-color: var(--brand-magenta);
}
.kp-nav .elementor-nav-menu > li > a.elementor-item.elementor-item-active {
  color: var(--ink); font-weight: var(--fw-semibold); border-bottom-color: var(--brand-blue);
}
.kp-nav .elementor-nav-menu--main .elementor-item { padding-inline: 0; }
/* Mobil legordulo - papir, hajszalvonalakkal, nem sotet doboz. */
.kp-nav .elementor-nav-menu--dropdown { background: var(--canvas); border: 1px solid var(--hairline); }
.kp-nav .elementor-nav-menu--dropdown a.elementor-item {
  font: var(--type-body-md); color: var(--charcoal);
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--hairline-soft);
}
.kp-nav .elementor-nav-menu--dropdown a.elementor-item:hover { background: var(--surface-soft); color: var(--ink); }
.kp-nav .elementor-menu-toggle { color: var(--ink); background: transparent; }

/* ---------- lablec linkoszlop ---------- */
.kp-foot-nav .elementor-nav-menu { display: flex; flex-wrap: wrap; gap: var(--space-xxl); }
.kp-foot-nav .elementor-nav-menu > li > a.elementor-item {
  font: var(--type-body-sm); color: var(--brand-cyan); padding: var(--space-xxs) 0;
  transition: color var(--dur-state) var(--ease-standard);
}
.kp-foot-nav .elementor-nav-menu > li > a.elementor-item:hover,
.kp-foot-nav .elementor-nav-menu > li > a.elementor-item.elementor-item-active { color: var(--on-dark); }

/* ---------- lablec zaro sora ---------- */
.kp-foot-rule { border-top: 1px solid var(--border-on-dark); }
/* ============================================================
   Racs-segedosztalyok - CSAK sima div-ekre.

   Az Elementor KONTENEREI nem ezt hasznaljak: ott a nativ grid mod all be
   (container_type: grid), mert az .e-con szabalya a display-t es a gap-et is
   var(--...)-bol olvassa, ugyanolyan specifikussaggal, mint ezek az osztalyok
   - es a frontend.min.css kesobb tolt be, tehat mindig nyerne. Specifikussag-
   emeles helyett a nativ grid a helyes valasz: a szerkesztoben is latszik es
   allithato, a torespont pedig az Elementor sajat rendszerebol jon.

   Ami itt marad, az a HTML-widgetekben elo sima racsokra vonatkozik (pl. a
   09-es szekcio tonalis kartyai), plusz a torespont-viselkedes, ami a
   kontenerekre is ervenyes, mert azok is viselik az osztalyt.
   Az oszlopok 1000px alatt egy savra csuknak - explicit szabaly, nem remeny.
   ============================================================ */
.kp-grid { display: grid; align-items: start; }
.kp-grid > .e-con { width: auto; max-width: none; }

.kp-grid--6-5 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-xxxl) var(--space-section); }
.kp-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-section); }
.kp-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-section); }
.kp-grid--3   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-section-sm); }
.kp-grid--2   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xxl); }
.kp-grid--end { align-items: end; }

@media (max-width: 1000px) {
  .kp-grid--6-5, .kp-grid--5-7, .kp-grid--7-5, .kp-grid--3, .kp-grid--2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xxl);
  }
  /* A harmas bizonyiteksav oszlopai kozott fuggoleges vonal all; egy savban
     ez vizszintes valasztova valik. */
  .kp-grid--3 > .e-con + .e-con { border-top: 1px solid var(--hairline); padding-top: var(--space-xxl); }
  .kp-grid--3 .kp-ev-div { display: none; }
}

/* ---------- 02 bizonyiteksav ---------- */
/* A felso hajszalvonal balrol jobbra huzodik be, es csak utana lepnek be az
   oszlopok - ezert kulon elem, nem a szekcio border-top-ja. */
.kp-ev-rule { position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hairline); transform: scaleX(0); transform-origin: left center; }

.kp-ev-col { position: relative; }
.kp-ev-div { position: absolute; left: calc(var(--space-section-sm) / -2); top: 2px; bottom: 2px;
  width: 1px; background: var(--hairline); }
.kp-ev-value { min-height: 62px; display: flex; align-items: flex-end; }
/* Az elvalaszto vonal sajat widget-wrappere ne foglaljon sort a flex
   oszlopban - a vonal az oszlop teljes magassagat kapja meg helyette. */
.kp-ev-col > .elementor-widget-html { position: absolute; inset: 0; pointer-events: none; }

/* ---------- 03 sorlista kerete ---------- */
.kp-rowlist { border-bottom: 1px solid var(--hairline); }

/* ---------- hero ---------- */
/* A hero magassagat az Elementor min_height beallitasa adja (100svh), mert
   az .e-con min-height: var(--min-height) barmely osztalyt felulirna.
   Mobilon a tartalom dontsen, ne a kepernyo. */
@media (max-width: 767px) { .kp-hero-section.kp-hero-section { min-height: 0; } }
/* ---------- 04 osszehasonlito tabla, reszletek ---------- */
.kp-cmp { border-radius: var(--radius-xl); padding: var(--space-xxxl); }
.kp-cmp__mid { top: var(--space-xxxl); bottom: var(--space-xxxl); }
.kp-cmp__head { padding-bottom: var(--space-lg); }
.kp-cmp__head span { font: var(--type-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-magenta); }
.kp-cmp__row { padding: var(--space-lg) 0; border-top: 1px solid var(--border-on-dark); }
.kp-cmp.kp-on-dark .kp-cmp__row p { font: var(--type-body-md); color: var(--on-dark); margin: 0; text-wrap: pretty; }
@media (max-width: 767px) { .kp-cmp { padding: var(--space-xl); } }

/* ---------- 05 idezetoszlop ---------- */
.kp-qmark { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 56px; line-height: .6; color: var(--primary); }
.kp-qrule { width: 40px; height: 2px; background: var(--brand-blue);
  margin-top: var(--space-md); transform: scaleX(0); transform-origin: left center; }
.kp-quote { margin: var(--space-xl) 0 0; padding-left: var(--space-xl);
  border-left: 2px solid var(--brand-blue); }
.kp-quote span { display: block; font: var(--type-heading-lg);
  letter-spacing: var(--ls-heading-lg); color: var(--text-heading); text-wrap: pretty; }
.kp-quote span + span { margin-top: var(--space-md); }
@media (max-width: 1023px) { .kp-quote span { font-size: var(--fs-heading-md); letter-spacing: var(--ls-heading-md); } }

/* ---------- kiemelt zaro bekezdes hajszalvonallal ---------- */
.kp-lead-rule { padding-top: var(--space-xxl); border-top: 1px solid var(--hairline); }
/* ---------- 06 folyamat, reszletek ---------- */
.kp-steps { display: flex; flex-direction: column; gap: var(--space-section); }
.kp-step { position: relative; padding-left: var(--space-xl); }
.kp-step__edge { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; }
.kp-step__head { display: flex; align-items: baseline; gap: var(--space-md); }
.kp-step__num { font: var(--type-heading-sm); letter-spacing: var(--ls-heading-sm); }
.kp-step__title { font: var(--type-heading-sm); margin: 0; }
.kp-step__body { font: var(--type-body-md); margin: var(--space-sm) 0 0;
  max-width: var(--measure-prose); text-wrap: pretty; }
.kp-step__deliver { margin: var(--space-md) 0 0; max-width: var(--measure-prose); }
.kp-step__deliver .kp-overline { color: var(--brand-blue); display: block; }
.kp-step__deliver .kp-step__body { margin-top: var(--space-xxs); }
.kp-proc-col { display: flex; flex-direction: column; gap: var(--space-xxxl); }
/* ---------- 07 mert eredmenyek, reszletek ----------
   A tengely 60%-tol 100%-ig fut; egy ertek helye (v-60)/40 aranyban all.
   A 80%-os kuszob a felezovonalon, szaggatottan. */
.kp-res { position: relative; }
.kp-res__threshold { position: absolute; left: 50%; top: 0; bottom: 34px; width: 0;
  border-left: 1px dashed var(--border-on-dark); }
.kp-res__row { padding: var(--space-xxl) 0; border-top: 1px solid var(--border-on-dark); }
.kp-res__values { position: relative; height: 26px; }
.kp-res__track { position: absolute; inset: 0; }
.kp-res__dot-start { position: absolute; top: 6px; transform: translate(-50%, 0);
  width: 12px; height: 12px; border-radius: var(--radius-full); border: 1.5px solid var(--brand-blue-200); }
.kp-res__dot-end { position: absolute; top: 6px; transform: translate(-50%, 0);
  width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--on-dark); }
.kp-res__line { position: absolute; top: 11px; height: 2px; background: var(--on-dark);
  transform: scaleX(0); transform-origin: left center; }
.kp-res__before, .kp-res__after, .kp-res__delta, .kp-res__arrow {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-heading-sm); line-height: 1; white-space: nowrap;
}
.kp-res__before { position: absolute; top: 2px; transform: translateX(calc(-100% - 14px)); color: var(--brand-blue-200); }
.kp-res__after  { position: absolute; top: 2px; transform: translateX(14px); color: var(--on-dark); }
.kp-res__delta  { position: absolute; bottom: 16px; transform: translateX(-50%); color: var(--brand-cyan); }
.kp-res__arrow  { display: none; color: var(--stone); }
.kp-res__note { max-width: 56ch; margin-top: var(--space-lg); }
.kp-res__tags { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm); margin-bottom: var(--space-xs); }
.kp-res__note p { font: var(--type-body-md); color: var(--brand-blue-200); margin: 0; text-wrap: pretty; }
.kp-res__scale { position: relative; height: 18px; margin-top: var(--space-md); }
.kp-res__scale span { position: absolute; top: 0; font: var(--type-caption); }

/* Egy savban a tengely nem olvashato: a szampar vezet, a mondat koveti. */
@media (max-width: 1000px) {
  .kp-res__track, .kp-res__threshold, .kp-res__scale { display: none; }
  .kp-res__values { position: static; height: auto; display: flex; flex-wrap: wrap;
    align-items: baseline; gap: var(--space-sm); }
  .kp-res__values > span { position: static; transform: none; font-size: var(--fs-heading-lg); }
  .kp-res__arrow { display: inline; }
  .kp-res__delta { margin-left: var(--space-md); }
  .kp-res__note { margin-left: 0 !important; max-width: none; margin-top: var(--space-md); }
}

/* ---------- 08 belepesi savok, reszletek ---------- */
.kp-entry-list { margin-top: var(--space-xxl); }
.kp-entry { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-section-sm);
  align-items: start; margin-inline: calc(var(--space-lg) * -1); }
.kp-entry__quote { font: var(--type-heading-md); letter-spacing: var(--ls-heading-md);
  color: var(--text-heading); margin: 0; max-width: 30ch; text-wrap: pretty; }
.kp-entry__desc { font: var(--type-body-md); color: var(--text-secondary);
  margin: var(--space-md) 0 0; max-width: 58ch; text-wrap: pretty; }
.kp-entry__meta { display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; gap: var(--space-sm); }
.kp-entry__num { font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-heading-md); line-height: .9; color: var(--hairline); }
.kp-entry__arrow { width: 14px; height: 14px; }
@media (max-width: 1000px) {
  .kp-entry__meta { flex-direction: row; align-items: baseline; text-align: left; gap: var(--space-md); }
}

/* ---------- 09 tonalis kartyak, reszletek ---------- */
.kp-tone-card { justify-content: space-between; gap: var(--space-xxl); min-height: 340px; }
.kp-tone-card .kp-tonal__title { font: var(--type-heading-md); letter-spacing: var(--ls-heading-md); text-wrap: pretty; }
@media (max-width: 1000px) { .kp-tone-card { min-height: 0; justify-content: flex-start; gap: var(--space-md); } }

/* ---------- lezaro CTA ---------- */
.kp-closing { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kp-closing h2 { font: var(--type-display-lg); letter-spacing: var(--ls-display-lg);
  color: var(--on-dark); max-width: 22ch; text-wrap: balance; }
@media (max-width: 767px) { .kp-closing h2 { font-size: var(--fs-heading-md); } }
/* ============================================================
   Specifikussag-illesztes az Elementor globalis keszletehez.

   A keszlet .elementor-kit-N h2 alakban ir (0,1,1), es a keszlet CSS-e
   szandekosan az enyem UTAN tolt be - igy a temabeallitasok felulirjak a
   sajat retegemet. Ket helyen viszont a DS-nek kell nyernie, mert a keszlet
   egy globalis skalat ad, nem komponens-donteseket:

   1. Sotet feluleten a cimsor sosem lehet tintaszinu.
   2. A komponens sajat tipusmerete (lepescim, tonalis kartya cime) a
      komponensbol kovetkezik, nem a globalis cimsorszintbol.

   Mindket eset duplazott osztallyal all (0,2,1), tehat sosem "!important" -
   a temabeallitasok tovabbra is felulirhatok maradnak minden mas ponton.
   ============================================================ */
.kp-on-dark.kp-on-dark h1,
.kp-on-dark.kp-on-dark h2,
.kp-on-dark.kp-on-dark h3,
.kp-on-dark.kp-on-dark h4,
.kp-on-dark.kp-on-dark .elementor-heading-title { color: var(--on-dark); }
.kp-on-dark.kp-on-dark p { color: inherit; }

.kp-steps .kp-step__title {
  font: var(--type-heading-sm);
  letter-spacing: var(--ls-heading-sm);
}
.kp-tone-card .kp-tonal__title {
  font: var(--type-heading-md);
  letter-spacing: var(--ls-heading-md);
}
.kp-tonal--cream .kp-tonal__title { color: var(--ink-strong); }
.kp-rowlist .kp-row__text {
  font: var(--type-heading-sm);
  letter-spacing: var(--ls-heading-sm);
}
.kp-rowlist .kp-row__index {
  font: var(--type-heading-md);
  letter-spacing: var(--ls-heading-md);
}

/* A statisztika-ertek div-cimsorkent all, hogy a keszlet cimsorskalaja
   ne huzza el a 56px-es display meretrol. */
.kp-stat .kp-stat__value,
.kp-stat .kp-stat__value .elementor-heading-title {
  font: var(--type-display-lg);
  letter-spacing: var(--ls-display-lg);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .kp-stat .kp-stat__value,
  .kp-stat .kp-stat__value .elementor-heading-title { font-size: var(--fs-heading-lg); }
}

/* A hero cimsora a display-skalarol jon, nem a h1 globalis meretebol. */
.kp-hero-section .kp-hero__title .elementor-heading-title {
  font: var(--type-hero);
  letter-spacing: var(--ls-hero);
  max-width: 21ch;
  text-wrap: balance;
}
@media (max-width: 1023px) {
  .kp-hero-section .kp-hero__title .elementor-heading-title {
    font-size: var(--fs-display-lg); letter-spacing: var(--ls-display-lg);
  }
}
@media (max-width: 767px) {
  .kp-hero-section .kp-hero__title .elementor-heading-title {
    font-size: var(--fs-heading-lg); letter-spacing: var(--ls-heading-lg); max-width: none;
  }
}

/* Szekciocimsorok merete: a designban ezek a heading-lg szintjen allnak. */
#szekcio-03 .elementor-heading-title,
#szekcio-04 .elementor-heading-title,
#szekcio-06 .elementor-heading-title,
#szekcio-07 .elementor-heading-title {
  font: var(--type-heading-lg);
  letter-spacing: var(--ls-heading-lg);
  text-wrap: balance;
}
#szekcio-03 h2.elementor-heading-title { max-width: 20ch; }
#szekcio-04 h2.elementor-heading-title { max-width: 24ch; }
#szekcio-07 h2.elementor-heading-title { max-width: 22ch; }
@media (max-width: 767px) {
  #szekcio-03 .elementor-heading-title,
  #szekcio-04 .elementor-heading-title,
  #szekcio-06 .elementor-heading-title,
  #szekcio-07 .elementor-heading-title { font-size: var(--fs-heading-md); letter-spacing: var(--ls-heading-md); }
}

/* Olvasasi merteke a bevezeto bekezdeseknek. */
.kp-hero__lead p { max-width: 54ch; }

/* ==========================================================
   Scroll belepesek stabilizalasa

   A Lenis mar mozgatja az egesz oldalt. Ezeknel az elemeknel
   kikapcsoljuk a plusz fuggoleges GSAP-elmozdulast, hogy az
   animacio vegen ne tunjenek ugy, mintha odatapadnanak.
   Az opacity/fade animacio tovabbra is megmarad.
   ========================================================== */

[data-ev-val],
[data-ev-label],
[data-row-index],
[data-row-text],
[data-cmp-cell],
[data-q-mark],
[data-q-line],
[data-rise] {
  transform: none !important;
}