/* Nyitóoldal és a hozzá tartozó aloldalak (árak, belépés, jogi oldalak, 404). */

/* A főcím az adverr címbetűjével (ugyanaz, mint a Kampánynyomozó főcíme) */
@font-face {
  font-family: 'Panton Rust Heavy Base';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url('/assets/fonts/panton-rust-heavy-base.woff2') format('woff2');
}

.oldal { overflow-x: clip; }

/* ---------- Lebegő sziget-navigáció ---------- */
.sziget {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 16px;
  transform: translateX(-50%);
  border-radius: 9999px;
  border: 1px solid rgba(207, 201, 186, 0.7);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--arnyek-2);
}
.sziget .logo { margin-right: 16px; font-size: 16px; line-height: 24px; }
.sziget .logo svg { width: 24px; height: 24px; }
.sziget-linkek { display: flex; align-items: center; gap: 4px; }
.sziget-link {
  padding: 8px 12px;
  border-radius: 9999px;
  color: var(--tinta-2);
  font-size: 14px; line-height: 20px; font-weight: 600;
  text-decoration: none;
  transition: background-color var(--ido) var(--gorbe), color var(--ido) var(--gorbe);
}
.sziget-link:hover { background: rgba(23, 22, 15, 0.06); color: var(--tinta); }
.sziget-link[aria-current="page"] { background: var(--tinta); color: var(--felulet); }

.hamburger {
  position: relative;
  display: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 9999px;
  background: var(--tinta);
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--felulet);
  transition: transform var(--ido) var(--gorbe), top var(--ido) var(--gorbe);
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 23px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

.menu-reteg {
  position: fixed; inset: 0;
  z-index: 45;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 96px 24px 48px;
  background: rgba(246, 244, 238, 0.86);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ido) var(--gorbe);
}
.menu-reteg.nyitva { opacity: 1; pointer-events: auto; }
.menu-reteg a {
  display: block;
  overflow: hidden;
  font-size: 36px; line-height: 40px; font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}
.menu-reteg a span {
  display: block;
  padding: 8px 0;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity var(--ido) var(--gorbe), transform var(--ido) var(--gorbe);
}
.menu-reteg.nyitva a span { opacity: 1; transform: none; }
.menu-reteg.nyitva a:nth-child(1) span { transition-delay: 100ms; }
.menu-reteg.nyitva a:nth-child(2) span { transition-delay: 150ms; }
.menu-reteg.nyitva a:nth-child(3) span { transition-delay: 200ms; }
.menu-reteg.nyitva a:nth-child(4) span { transition-delay: 250ms; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: 160px 24px 96px;
  text-align: center;
}
.hullamok {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero > *:not(.hullamok) { position: relative; }
.jelveny {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid var(--vonal);
  background: var(--felulet);
  color: var(--tinta-2);
  font-size: 14px; line-height: 20px; font-weight: 500;
  box-shadow: var(--arnyek-1);
}
.jelveny .pont { width: 8px; height: 8px; border-radius: 50%; background: var(--jo); box-shadow: 0 0 0 4px var(--jo-hatter); }
.hero { container-type: inline-size; }
/* A főcím mindig 3 sor (rögzített törésekkel), a betűméret a szélességhez igazodik: a leghosszabb
   sor („akiknek szüksége lehet a termékedre”) a betűméret kb. 19,8-szerese (Panton, mérve 2026-09-29). */
.hero h1 {
  max-width: 1200px;
  font-size: clamp(15px, 4.4vw, 56px);
  font-size: clamp(15px, calc(100cqi / 20.6), 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.hero h1 em { color: var(--rez-sotet); padding-right: 0.04em; }
/* A címbetű: a kiemelt szó is ugyanebben a betűben, csak a színe más (mint a Kampánynyomozó főcímén) */
.hero h1, .hero h1 em {
  font-family: 'Panton Rust Heavy Base', var(--cim);
  font-weight: bold; font-style: normal; text-transform: uppercase;
}
.hero h1 { letter-spacing: -0.03em; }
.hero h1 .tores-mobil { display: none; }
/* Telefonon a 3 sorhoz a cím kisebb lenne az alcímnél, ezért ott 4 sor, olvasható méretben: a leghosszabb
   sor („a cégeket, akiknek szüksége”) a betűméret kb. 15-szöröse. */
@media (max-width: 600px) {
  .hero h1 .tores-asztal { display: none; }
  .hero h1 .tores-mobil { display: inline; }
  .hero h1 { font-size: clamp(18px, calc(100cqi / 15.6), 32px); line-height: 1.06; }
}
.hero .alcim-hero {
  max-width: 680px;
  color: var(--tinta-2);
  font-size: 18px; line-height: 28px;
}

.bevitel-doboz { position: relative; width: 100%; max-width: 560px; margin-top: 8px; }
.bevitel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: 16px;
  border: 1px solid var(--vonal-eros);
  background: var(--felulet);
  box-shadow: var(--arnyek-2);
  transition: border-color var(--ido) var(--gorbe), box-shadow var(--ido) var(--gorbe);
}
.bevitel:hover { border-color: #B9B2A1; }
.bevitel:focus-within { border-color: var(--tinta); box-shadow: var(--arnyek-2), 0 0 0 4px rgba(226, 166, 59, 0.3); }
.bevitel > .ph { color: var(--halvany); font-size: 20px; flex: none; }
.bevitel input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-size: 18px; line-height: 28px;
}
.bevitel input:focus { outline: none; }
.bevitel input::placeholder { color: #8C897D; }
.bevitel .gomb { border-radius: 8px; }
.bevitel-hiba { margin-top: 8px; color: var(--rossz); font-size: 14px; line-height: 20px; text-align: left; }

.javaslatok {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 30;
  margin: 0; padding: 8px;
  list-style: none;
  border-radius: 16px;
  border: 1px solid var(--vonal);
  background: var(--felulet);
  box-shadow: var(--arnyek-3);
  text-align: left;
}
.javaslatok .fej { padding: 4px 8px 8px; color: var(--halvany); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.javaslat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 300ms var(--gorbe);
}
.javaslat[aria-selected="true"], .javaslat:hover { background: var(--felulet-2); }
.javaslat .ikon-doboz { width: 28px; height: 28px; font-size: 12px; }
.javaslat .dom { font-family: var(--mono); font-size: 14px; line-height: 20px; }
.javaslat .nev { color: var(--halvany); font-size: 12px; line-height: 16px; }
.javaslat .jobb { margin-left: auto; color: var(--halvany); font-size: 12px; line-height: 16px; }
.javaslat-vaz { display: flex; align-items: center; gap: 12px; padding: 8px; }

.link-gomb {
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tinta-2);
  font-size: 14px; line-height: 20px; font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--vonal-eros);
  cursor: pointer;
  transition: color var(--ido) var(--gorbe), text-decoration-color var(--ido) var(--gorbe);
}
.link-gomb:hover { color: var(--tinta); text-decoration-color: var(--tinta); }

.hero-cimkek { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero-cimkek span { display: inline-flex; align-items: center; gap: 4px; color: var(--halvany); font-size: 14px; line-height: 20px; }
.hero-cimkek .ph { color: var(--jo); font-size: 16px; }

/* ---------- Szekciók ---------- */
.szekcio { padding: 96px 24px; }
.szekcio-belso { max-width: 1120px; margin: 0 auto; }
.szekcio-fej { max-width: 680px; margin: 0 auto 64px; text-align: center; }
.szekcio-fej .elotag { display: block; margin-bottom: 16px; color: var(--rez-sotet); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.szekcio-fej h2 { font-size: 48px; line-height: 1.02; }
.szekcio-fej h2 em { color: var(--rez-sotet); }
.szekcio-fej p { margin-top: 16px; color: var(--tinta-2); font-size: 18px; line-height: 28px; }

/* Hogyan működik */
.lepesek { display: grid; gap: 80px; }
.lepes-sor {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.lepes-szoveg .szam { display: block; margin-bottom: 12px; color: var(--halvany); font-family: var(--mono); font-size: 14px; line-height: 20px; }
.lepes-szoveg h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
.lepes-szoveg p { margin-top: 16px; color: var(--tinta-2); font-size: 18px; line-height: 28px; }
.demo {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background: var(--felulet-2);
  border: 1px solid var(--vonal);
}
.demo-cimke { position: absolute; top: 16px; right: 16px; }
.demo .kartya { box-shadow: var(--arnyek-2); }
.demo-bongeszo { overflow: hidden; }
.demo-bongeszo .sav {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--vonal);
  background: var(--felulet-2);
  font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--halvany);
}
.demo-bongeszo .sav i { width: 8px; height: 8px; border-radius: 50%; background: var(--vonal-eros); }
.demo-bongeszo .tartalom { padding: 16px; display: grid; gap: 12px; }
.demo-bongeszo .tartalom p { color: var(--tinta-2); font-size: 14px; line-height: 20px; }
.demo-sor { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--vonal); font-size: 14px; line-height: 20px; }
.demo-sor:last-child { border-bottom: 0; }
.demo-sor .avatar { width: 32px; height: 32px; }
.demo-sor .jobb { margin-left: auto; }
.demo-sor small { display: block; color: var(--halvany); font-size: 12px; line-height: 16px; }
.sav-arany { flex: 1; height: 6px; border-radius: 6px; background: var(--vonal); overflow: hidden; }
.sav-arany i { display: block; height: 100%; border-radius: 6px; background: var(--rez); transform-origin: left; transform: scaleX(0); transition: transform 1200ms var(--gorbe); }
.lathato .sav-arany i { transform: scaleX(1); }
.demo-level { padding: 16px; font-size: 14px; line-height: 20px; }
.demo-level .fej { display: grid; gap: 4px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--vonal); color: var(--halvany); }
.demo-level .fej b { color: var(--tinta); font-weight: 600; }
.demo-level p + p { margin-top: 12px; }
.demo-level mark { background: var(--rez-halvany); color: inherit; border-radius: 4px; padding: 0 2px; }
.demo-sugo {
  position: relative;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--tinta);
  color: var(--felulet);
  font-size: 12px; line-height: 16px;
}
.demo-sugo b { display: block; margin-bottom: 4px; color: var(--rez); font-weight: 600; }
.buborekok { display: grid; gap: 8px; }
.buborek { max-width: 80%; padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 20px; }
.buborek.o { justify-self: start; background: var(--felulet); border: 1px solid var(--vonal); }
.buborek.mi { justify-self: end; background: var(--tinta); color: var(--felulet); }
.demo-tabla { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.demo-tabla th { padding: 8px 12px; color: var(--halvany); font-size: 12px; line-height: 16px; font-weight: 600; text-align: left; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--vonal); }
.demo-tabla td { padding: 12px; border-bottom: 1px solid var(--vonal); }
.demo-tabla tr:last-child td { border-bottom: 0; }
.demo-tabla td:last-child, .demo-tabla th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Jelmondat, szavanként kivilágosodik */
.jelmondat { padding: 96px 24px; }
.jelmondat p {
  max-width: 1080px;
  margin: 0 auto;
  font-family: var(--cim);
  font-size: 60px; line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}
.jelmondat em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: -0.01em; }
.jelmondat .szo.aktiv em, .jelmondat em.szo.aktiv { color: var(--rez-sotet); }
.jelmondat .szo { color: rgba(23, 22, 15, 0.28); transition: color var(--ido) var(--gorbe); }
.jelmondat .szo.aktiv { color: var(--tinta); }

/* Előnyök */
.elony-racs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.elony { padding: 32px; display: grid; gap: 12px; align-content: start; }
.elony .ikon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--rez-halvany);
  color: var(--rez-sotet);
  font-size: 24px;
}
.elony h3 { margin-top: 12px; font-size: 20px; line-height: 28px; }
.elony p { color: var(--tinta-2); }

/* Árazás blokk */
.ar-kartya {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 880px;
  margin: 0 auto;
  overflow: hidden;
}
.ar-bal { padding: 40px; border-right: 1px solid var(--vonal); display: grid; align-content: start; gap: 8px; }
.ar-bal .nagy { font-size: 60px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ar-bal .nagy small { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: 0; color: var(--halvany); }
.ar-bal p { color: var(--tinta-2); }
.ar-jobb { padding: 40px; display: grid; align-content: start; gap: 16px; background: var(--felulet-2); }
.pipa-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pipa-lista li { display: flex; gap: 12px; color: var(--tinta-2); }
.pipa-lista .ph { flex: none; margin-top: 3px; color: var(--jo); font-size: 18px; }

/* GYIK */
.gyik { max-width: 760px; margin: 0 auto; display: grid; gap: 8px; }
.gyik details {
  border-radius: 16px;
  border: 1px solid var(--vonal);
  background: var(--felulet);
  transition: border-color var(--ido) var(--gorbe), box-shadow var(--ido) var(--gorbe);
}
.gyik details[open] { border-color: var(--vonal-eros); box-shadow: var(--arnyek-1); }
.gyik summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  font-size: 18px; line-height: 28px; font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary .ph { flex: none; color: var(--halvany); transition: transform var(--ido) var(--gorbe); }
.gyik details[open] summary .ph { transform: rotate(45deg); }
.gyik details p { padding: 0 24px 24px; color: var(--tinta-2); }

/* Záró CTA */
.zaro { text-align: center; }
.zaro h2 { max-width: 680px; margin: 0 auto; font-size: 48px; line-height: 1; letter-spacing: -0.03em; }
.zaro p { max-width: 560px; margin: 16px auto 0; color: var(--tinta-2); font-size: 18px; line-height: 28px; }
.zaro .bevitel-doboz { margin: 32px auto 12px; }

/* Lábléc */
.lablec { padding: 64px 24px 48px; border-top: 1px solid var(--vonal); }
.lablec-belso { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.lablec p { margin-top: 12px; color: var(--halvany); font-size: 14px; line-height: 20px; max-width: 320px; }
.lablec h2 { margin-bottom: 12px; font-size: 14px; line-height: 20px; }
.lablec ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lablec a:not(.logo) { color: var(--tinta-2); font-size: 14px; line-height: 20px; text-decoration: none; }
.lablec a:not(.logo):hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.lablec-also { max-width: 1120px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--vonal); color: var(--halvany); font-size: 12px; line-height: 16px; }

/* Leírás ablak */
.leiras-urlap { display: grid; gap: 16px; padding: 32px; }
.leiras-urlap h2 { font-size: 24px; line-height: 32px; padding-right: 40px; }
.leiras-urlap > p { margin-top: -8px; color: var(--halvany); }

/* Egyszerű belső oldalak (árak, belépés, jogi, 404) */
.belso-oldal { max-width: 880px; margin: 0 auto; padding: 160px 24px 96px; }
.belso-oldal h1 { font-size: 48px; line-height: 1; letter-spacing: -0.03em; }
.belso-oldal .bevezeto { margin-top: 16px; max-width: 680px; color: var(--tinta-2); font-size: 18px; line-height: 28px; }
.kalkulator { margin-top: 48px; padding: 32px; display: grid; gap: 24px; }
.kalkulator-fej { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.kalkulator-fej b { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kreditcsúszka: vastag sáv, a kiválasztott rész arannyal töltődik (--kitoltes, a JS állítja), nagy, fogható pötty */
.csuszka {
  --kitoltes: 0%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer;
}
.csuszka::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right, var(--rez) 0 var(--kitoltes), var(--rez-halvany) var(--kitoltes) 100%);
}
.csuszka::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: var(--tinta); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(23, 22, 15, 0.3);
}
.csuszka::-moz-range-track { height: 8px; border-radius: 999px; background: var(--rez-halvany); }
.csuszka::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--rez); }
.csuszka::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tinta); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(23, 22, 15, 0.3);
}
.csuszka:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; border-radius: 8px; }
.csuszka-hatarok {
  display: flex; justify-content: space-between; margin-top: -16px;
  color: var(--halvany); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums;
}
/* Mobilon még nagyobb: ujjal is könnyű fogni, és első ránézésre látszik, hogy húzható */
@media (max-width: 720px) {
  .csuszka { height: 44px; }
  .csuszka::-webkit-slider-runnable-track { height: 12px; }
  .csuszka::-webkit-slider-thumb { width: 36px; height: 36px; margin-top: -12px; }
  .csuszka::-moz-range-track, .csuszka::-moz-range-progress { height: 12px; }
  .csuszka::-moz-range-thumb { width: 28px; height: 28px; }
  .csuszka-hatarok { font-size: 14px; line-height: 20px; margin-top: -12px; }
}
.kalk-racs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kalk-racs .stat b { font-size: 24px; line-height: 32px; }
.megjegyzes { color: var(--halvany); font-size: 14px; line-height: 20px; }
.kozepre { display: grid; justify-items: center; text-align: center; gap: 16px; }

/* ---------- Reszponzív ---------- */
@media (max-width: 960px) {
  .lepes-sor { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .elony-racs { grid-template-columns: minmax(0, 1fr); }
  .ar-kartya { grid-template-columns: minmax(0, 1fr); }
  .ar-bal { border-right: 0; border-bottom: 1px solid var(--vonal); }
  .lablec-belso { grid-template-columns: 1fr 1fr; }
  .lablec-belso > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .sziget { top: 16px; padding: 4px 4px 4px 16px; }
  .sziget-linkek { display: none; }
  .hamburger { display: block; }
  .hero { padding: 120px 16px 64px; gap: 16px; }
  .hero .alcim-hero { font-size: 16px; line-height: 24px; }
  .bevitel { padding: 4px 4px 4px 12px; }
  .bevitel input { font-size: 16px; line-height: 24px; }
  .bevitel .gomb-szoveg { display: none; }
  .szekcio { padding: 64px 16px; }
  .szekcio-fej { margin-bottom: 40px; }
  .szekcio-fej h2 { font-size: 30px; line-height: 36px; }
  .lepesek { gap: 64px; }
  .lepes-szoveg h3 { font-size: 24px; line-height: 32px; }
  .lepes-szoveg p { font-size: 16px; line-height: 24px; }
  .demo { padding: 16px; border-radius: 16px; }
  .demo-cimke { top: 8px; right: 8px; }
  .jelmondat { padding: 64px 16px; }
  .jelmondat p { font-size: 30px; line-height: 36px; }
  .elony { padding: 24px; }
  .ar-bal, .ar-jobb { padding: 24px; }
  .zaro h2 { font-size: 36px; line-height: 40px; }
  .lablec { padding: 48px 16px 32px; }
  .lablec-belso { grid-template-columns: 1fr; }
  .leiras-urlap { padding: 24px; }
  .belso-oldal { padding: 120px 16px 64px; }
  .belso-oldal h1 { font-size: 36px; line-height: 40px; }
  .kalkulator { padding: 24px; }
  .kalk-racs { grid-template-columns: minmax(0, 1fr); }
  .kalkulator-fej { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kalkulator-fej b { font-size: 36px; line-height: 40px; }
}

/* Sortörés csak mobilon, ahol a cím három sorba kerül */
br.csak-mobil { display: none; }
@media (max-width: 720px) {
  br.csak-mobil { display: inline; }
}

/* =====================================================================
   MOZGÁS: belépő animációk, élő bemutató, futószalag, számlálók, történet
   ===================================================================== */

/* Görgetési jelzősáv a sziget alján */
.sziget-halad { position: absolute; left: 24px; right: 24px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.sziget-halad i { display: block; height: 100%; background: var(--rez); transform-origin: left; transform: scaleX(var(--halad, 0)); }

/* Hero: lépcsőzetes belépés betöltéskor */
.hero-be {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  animation: hero-be 900ms var(--gorbe) forwards;
  animation-delay: calc(var(--k, 0) * 90ms + 200ms);
}
@keyframes hero-be { to { opacity: 1; transform: none; filter: none; } }

/* Szavanként beúszó címek */
[data-szavankent] .szo-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.03em 0.12em; margin: -0.08em -0.03em -0.12em; }
[data-szavankent] .szo-b {
  display: inline-block;
  transform: translateY(115%) rotate(6deg);
  transform-origin: 0 100%;
  transition: transform 1100ms var(--gorbe);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-szavankent].megjelent .szo-b { transform: none; }

/* Forgó célcsoport a hero alatt */
.forgo-sor { color: var(--tinta-2); font-size: 24px; line-height: 32px; }
.forgo {
  display: inline-block;
  position: relative;
  height: 32px;
  overflow: hidden;
  vertical-align: bottom;
  transition: width 600ms var(--gorbe);
}
.forgo-szo {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  color: var(--rez-sotet);
  white-space: nowrap;
  transition: transform 600ms var(--gorbe), opacity 600ms var(--gorbe), filter 600ms var(--gorbe);
}
.forgo-szo.ki { transform: translateY(-100%); opacity: 0; filter: blur(6px); }
.forgo-szo.elott { transform: translateY(100%); opacity: 0; filter: blur(6px); transition: none; }

/* A mező „kopog”, amikor a hullám indul */
.bevitel.kopp { animation: kopp 280ms var(--gorbe); }
@keyframes kopp {
  35% { transform: scale(1.015); box-shadow: var(--arnyek-2), 0 0 0 8px rgba(226, 166, 59, 0.28); }
}

/* ---------- Élő termékbemutató ---------- */
.hero-demo { position: relative; width: 100%; max-width: 1040px; margin-top: 64px; perspective: 1600px; }
.demo-ablak {
  --dontes: 24deg;
  --meret: 0.88;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--vonal);
  background: var(--felulet);
  box-shadow: 0 48px 120px rgba(23, 22, 15, 0.18), var(--arnyek-2);
  text-align: left;
  transform: rotateX(var(--dontes)) scale(var(--meret));
  transform-origin: 50% 0;
  transition: transform 500ms var(--gorbe);
  will-change: transform;
}
.demo-ablak-sav { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--vonal); background: var(--felulet-2); }
.pottyok { display: flex; gap: 8px; }
.pottyok i { width: 12px; height: 12px; border-radius: 50%; background: var(--vonal-eros); }
.cim-sav { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--vonal); background: var(--felulet); color: var(--halvany); font-size: 12px; line-height: 16px; }
.demo-ablak-test { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 440px; }
.dn-oldal { padding: 16px; border-right: 1px solid var(--vonal); background: var(--felulet-2); font-family: var(--mono); font-size: 12px; line-height: 16px; }
.dn-naplo-fej { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--tinta); font-family: var(--betu); font-weight: 600; }
.dn-naplo { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dn-naplo li { display: flex; gap: 8px; color: var(--halvany); animation: sor-be 400ms var(--gorbe) both; }
.dn-naplo li::before { content: "›"; color: var(--tinta); flex: none; }
.dn-naplo li.kesz::before { content: "✓"; color: var(--jo); }
.dn-naplo li.aktiv { color: var(--tinta); }
.dn-fo { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px; min-width: 0; padding: 20px 24px; }
.dn-lepteto { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.dn-lepteto li { display: flex; align-items: center; flex: 1; }
.dn-lepteto li:last-child { flex: none; }
.dn-lepteto li::after { content: ""; flex: 1; height: 2px; margin: 0 6px; border-radius: 2px; background: var(--vonal); transition: background-color 600ms var(--gorbe); }
.dn-lepteto li:last-child::after { display: none; }
.dn-lepteto li.kesz::after { background: var(--tinta); }
.dn-lepteto span {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--vonal-eros);
  background: var(--felulet);
  color: var(--halvany);
  font-size: 12px; line-height: 16px; font-weight: 700;
  transition: all 600ms var(--gorbe);
}
.dn-lepteto li.kesz span { background: var(--tinta); border-color: var(--tinta); color: var(--felulet); }
.dn-lepteto li.aktiv span { background: var(--rez); border-color: var(--rez); color: var(--tinta); transform: scale(1.15); box-shadow: 0 0 0 6px rgba(226, 166, 59, 0.25); }
.dn-szin { position: relative; min-height: 0; }
.dn-jelenet { position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; animation: jelenet-be 700ms var(--gorbe) both; }
.dn-jelenet.ki { animation: jelenet-ki 450ms var(--gorbe) both; }
@keyframes jelenet-be { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } }
@keyframes jelenet-ki { to { opacity: 0; transform: translateY(-16px); filter: blur(8px); } }
.dn-cim { font-family: var(--cim); font-size: 18px; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; }
.dn-cim em { font-family: var(--serif); text-transform: none; color: var(--rez-sotet); }
.dn-pop { opacity: 0; transform: translateY(10px) scale(0.92); animation: dn-pop 600ms var(--gorbe) forwards; animation-delay: calc(var(--d, 0) * 110ms + 200ms); }
@keyframes dn-pop { to { opacity: 1; transform: none; } }
.dn-kartya { display: grid; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--vonal); background: var(--felulet); box-shadow: var(--arnyek-1); }
.dn-kartya p { color: var(--tinta-2); font-size: 14px; line-height: 20px; }
.dn-ceg-fej { display: flex; align-items: center; gap: 12px; }
.dn-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tinta); color: var(--rez); font-family: var(--cim); font-size: 18px; }
.dn-sor { display: grid; grid-template-columns: 20px minmax(0, 1fr) 96px 40px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--vonal); background: var(--felulet); font-size: 14px; line-height: 20px; }
.dn-sor .ph { color: var(--rez-sotet); }
.dn-sav { height: 6px; border-radius: 6px; background: var(--vonal); overflow: hidden; }
.dn-sav i { display: block; height: 100%; border-radius: 6px; background: var(--rez); transform-origin: left; transform: scaleX(0); animation: dn-sav 1200ms var(--gorbe) forwards; animation-delay: calc(var(--d, 0) * 110ms + 400ms); }
@keyframes dn-sav { to { transform: scaleX(1); } }
.dn-tabla-sor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 88px; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--vonal); font-size: 13px; line-height: 20px; }
.dn-tabla-sor b { font-weight: 600; }
.dn-tabla-sor .mono { color: var(--halvany); font-size: 12px; }
.dn-szemely { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--vonal); background: var(--felulet); font-size: 14px; line-height: 20px; }
.dn-szemely small { display: block; color: var(--halvany); font-size: 12px; line-height: 16px; }
.dn-szemely .jobb { margin-left: auto; display: flex; gap: 4px; }
.dn-forras { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--vonal); background: var(--felulet-2); color: var(--halvany); font-size: 12px; }
.dn-forras .ph { animation: forog 900ms linear infinite; }
.dn-forras.ok { background: var(--jo-hatter); border-color: transparent; color: var(--jo); }
.dn-forras.ok .ph { animation: none; }
.dn-level { padding: 16px; border-radius: 16px; border: 1px solid var(--vonal); background: var(--felulet); font-size: 14px; line-height: 22px; white-space: pre-wrap; min-height: 200px; }
.dn-level mark { background: var(--rez-halvany); color: inherit; border-radius: 4px; padding: 0 2px; }
.dn-kesz { display: grid; justify-items: center; align-content: center; gap: 16px; height: 100%; text-align: center; }
.dn-kesz .dn-cim { font-size: 30px; }
.dn-kesz .gomb { animation: lelegzik 1600ms var(--gorbe) infinite; }
@keyframes lelegzik { 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(226, 166, 59, 0.22); } }

/* ---------- Futószalag ---------- */
.futo-sav { padding: 32px 0 16px; overflow: hidden; }
.futo-cim { margin-bottom: 24px; color: var(--rez-sotet); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.22em; text-align: center; text-transform: uppercase; }
.futo {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.futo + .futo { margin-top: 12px; }
.futo-sor { display: flex; gap: 12px; width: max-content; padding: 4px 0; animation: futo 70s linear infinite; }
.futo--vissza .futo-sor { animation-direction: reverse; animation-duration: 84s; }
.futo:hover .futo-sor { animation-play-state: paused; }
@keyframes futo { to { transform: translateX(-50%); } }
.futo-elem {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 1px solid var(--vonal);
  background: var(--felulet);
  box-shadow: var(--arnyek-1);
  font-size: 16px; line-height: 24px; font-weight: 600;
  white-space: nowrap;
  transition: transform 500ms var(--gorbe), border-color 500ms var(--gorbe), background-color 500ms var(--gorbe);
}
.futo-elem .ph { color: var(--rez-sotet); font-size: 20px; }
.futo-elem:hover { transform: translateY(-4px) rotate(-2deg); border-color: var(--tinta); }
.futo-elem.sotet { background: var(--tinta); border-color: var(--tinta); color: var(--felulet); }
.futo-elem.sotet .ph { color: var(--rez); }

/* ---------- Számok ---------- */
.szamok-sav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1120px; margin: 64px auto 0; padding: 0 24px; }
.szam-elem { padding: 24px 0; }
.szam-elem::before { content: ""; display: block; width: 0; height: 4px; margin-bottom: 24px; border-radius: 4px; background: var(--rez); transition: width 1200ms var(--gorbe) 300ms; }
.szam-elem.lathato::before { width: 64px; }
.szam-nagy { display: flex; align-items: baseline; gap: 12px; }
.szam-nagy b { font-family: var(--cim); font-weight: 400; font-size: 96px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.szam-nagy span { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 36px; color: var(--rez-sotet); }
.szam-elem p { max-width: 280px; margin-top: 12px; color: var(--tinta-2); }

/* ---------- Ragadós történet ---------- */
.tortenet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.tortenet-ragad { position: sticky; top: 120px; display: grid; gap: 24px; }
.tortenet-szam { display: flex; align-items: baseline; gap: 12px; }
.szamlap { display: inline-block; font-family: var(--cim); font-size: 96px; line-height: 1; letter-spacing: -0.03em; }
.szamlap.valt { animation: szamlap 700ms var(--gorbe); }
@keyframes szamlap { from { opacity: 0; transform: translateY(40%) rotate(-6deg); filter: blur(8px); } }
.ossz { color: var(--halvany); font-family: var(--mono); font-size: 14px; line-height: 20px; }
.tortenet-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tortenet-lista li {
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  opacity: 0.38;
  transition: opacity var(--ido) var(--gorbe), background-color var(--ido) var(--gorbe), transform var(--ido) var(--gorbe), box-shadow var(--ido) var(--gorbe), border-color var(--ido) var(--gorbe);
}
.tortenet-lista h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 20px; line-height: 1.1; }
.tortenet-lista p { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; color: var(--tinta-2); transition: max-height var(--ido) var(--gorbe), opacity var(--ido) var(--gorbe), margin-top var(--ido) var(--gorbe); }
.tortenet-lista li.aktiv { opacity: 1; border-color: var(--vonal); background: var(--felulet); box-shadow: var(--arnyek-2); transform: translateX(12px); }
.tortenet-lista li.aktiv p { max-height: 120px; margin-top: 8px; opacity: 1; }
.tortenet-halad { height: 4px; border-radius: 4px; background: var(--vonal); overflow: hidden; }
.tortenet-halad i { display: block; height: 100%; border-radius: 4px; background: var(--rez); transform-origin: left; transform: scaleX(0.1667); transition: transform var(--ido) var(--gorbe); }
.tortenet-jobb { display: grid; }
.lepes-blokk { display: grid; align-content: center; min-height: 72vh; padding: 48px 0; }
.lepes-blokk .demo { transition: transform var(--ido) var(--gorbe), opacity var(--ido) var(--gorbe), filter var(--ido) var(--gorbe); transform: scale(0.94); opacity: 0.45; filter: saturate(0.6); }
.lepes-blokk.jatszik .demo { transform: none; opacity: 1; filter: none; }
.mobil-szoveg { display: none; }

/* A bemutatók lejátszása: .jatszik a lépésblokkon */
.lepes-blokk .be { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--gorbe), transform 600ms var(--gorbe); transition-delay: calc(var(--d, 0) * 140ms); }
.lepes-blokk.jatszik .be { opacity: 1; transform: none; }
.lepes-blokk .pop { opacity: 0; transform: scale(0.6); transition: opacity 500ms var(--gorbe), transform 700ms var(--gorbe); transition-delay: calc(var(--d, 0) * 140ms); }
.lepes-blokk.jatszik .pop { opacity: 1; transform: none; }
.lepes-blokk .sav-arany i { width: var(--w); transform: scaleX(0); transition: transform 1200ms var(--gorbe) 400ms; }
.lepes-blokk.jatszik .sav-arany i { transform: scaleX(1); }
.demo-sor .sor-nev { width: 160px; flex: none; }
.allapot-valto { display: inline-grid; }
.allapot-valto > * { grid-area: 1 / 1; justify-self: end; transition: opacity 400ms var(--gorbe), transform 400ms var(--gorbe); }
.demo-tabla .allapot-valto > * { justify-self: start; }
.allapot-valto .kesz { opacity: 0; transform: translateY(8px); }
.allapot-valto .fut .ph { animation: forog 900ms linear infinite; }
.jatszik .allapot-valto .fut { opacity: 0; transform: translateY(-8px); transition-delay: calc(var(--d, 0) * 140ms); }
.jatszik .allapot-valto .kesz { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 140ms); }
.gepel-jel { justify-self: end; display: flex; gap: 4px; max-height: 0; padding: 0 12px; overflow: hidden; border-radius: 16px; background: var(--tinta); opacity: 0; }
.gepel-jel i { width: 6px; height: 6px; border-radius: 50%; background: var(--felulet); animation: pontocska 1200ms var(--gorbe) infinite; }
.gepel-jel i:nth-child(2) { animation-delay: 150ms; }
.gepel-jel i:nth-child(3) { animation-delay: 300ms; }
@keyframes pontocska { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.lepes-blokk.jatszik .gepel-jel { animation: gepel-jel 1100ms var(--gorbe) 380ms forwards; }
@keyframes gepel-jel {
  0% { opacity: 0; max-height: 0; padding: 0 12px; }
  18%, 82% { opacity: 1; max-height: 40px; padding: 12px; }
  100% { opacity: 0; max-height: 0; padding: 0 12px; }
}
.level-gepelt { white-space: pre-wrap; min-height: 132px; }
.level-gepelt mark { background: var(--rez-halvany); color: inherit; border-radius: 4px; padding: 0 2px; transition: background-color 600ms var(--gorbe); }
.lepes-blokk .demo-sugo { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 500ms var(--gorbe), transform 600ms var(--gorbe); }
.lepes-blokk.sugo-lathato .demo-sugo { opacity: 1; transform: none; }
.gepel-kurzor::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--tinta); animation: villog 900ms steps(1) infinite; }

/* Dönthető kártyák és mágneses gombok */
.dontheto { transform-style: preserve-3d; will-change: transform; }
.dontheto.lathato { transition: transform 600ms var(--gorbe), box-shadow 600ms var(--gorbe), opacity 800ms var(--gorbe), filter 800ms var(--gorbe); }
.dontheto:hover { box-shadow: var(--arnyek-3); }
.dontheto .ikon { transition: transform 600ms var(--gorbe); }
.dontheto:hover .ikon { transform: translateZ(40px) rotate(-10deg) scale(1.12); }
.magnes { will-change: transform; }

/* Sima GYIK-nyitás, ahol a böngésző támogatja */
.gyik details { interpolate-size: allow-keywords; }
.gyik details::details-content { block-size: 0; overflow-y: clip; transition: block-size 500ms var(--gorbe), content-visibility 500ms allow-discrete; }
.gyik details[open]::details-content { block-size: auto; }

/* Záró szekció saját hullámtérrel */
.zaro { position: relative; overflow: hidden; }
.zaro .szekcio-belso { position: relative; }
.zaro h2 em { color: var(--rez-sotet); }

.ar-bal .nagy { font-family: var(--cim); font-weight: 400; }
.menu-reteg a { font-family: var(--cim); font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; }

@media (max-width: 1180px) {
  .jelmondat p { font-size: 48px; }
}

@media (max-width: 960px) {
  .demo-ablak-test { grid-template-columns: minmax(0, 1fr); height: 400px; }
  .dn-oldal { display: none; }
  .szamok-sav { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tortenet { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tortenet-bal { display: none; }
  .mobil-szoveg { display: block; margin-bottom: 24px; }
  .mobil-szoveg .szam { display: block; margin-bottom: 8px; color: var(--halvany); font-family: var(--mono); font-size: 14px; line-height: 20px; }
  .mobil-szoveg h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 24px; line-height: 1.05; }
  .mobil-szoveg p { margin-top: 12px; color: var(--tinta-2); }
  .lepes-blokk { min-height: 0; padding: 32px 0; }
  .lepes-blokk .demo { transform: none; opacity: 1; filter: none; }
}

@media (max-width: 720px) {
  .forgo-sor { font-size: 18px; line-height: 28px; }
  .forgo { height: 28px; }
  .hero-demo { margin-top: 40px; }
  .demo-ablak { --dontes: 12deg; border-radius: 16px; }
  .demo-ablak-test { height: 380px; }
  .dn-fo { padding: 16px; }
  .dn-sor { grid-template-columns: 20px minmax(0, 1fr) 56px 36px; gap: 8px; }
  .dn-tabla-sor { grid-template-columns: minmax(0, 1fr) 72px; }
  .dn-tabla-sor .mono { display: none; }
  .szekcio-fej h2 { font-size: 30px; line-height: 1.05; }
  .szam-nagy b { font-size: 72px; }
  .jelmondat p { font-size: 30px; line-height: 1.05; }
  .futo-elem { padding: 8px 16px; font-size: 14px; line-height: 20px; }
  .demo-sor .sor-nev { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-be, [data-szavankent] .szo-b, .dn-pop, .lepes-blokk .be, .lepes-blokk .pop { opacity: 1 !important; transform: none !important; filter: none !important; }
  .futo-sor { animation: none; }
  .demo-ablak { transform: none; }
}

/* Amíg a szkript szavakra nem bontja, a mozgó címek nem villannak fel bontatlanul */
.js [data-szavankent]:not(.bontva) { visibility: hidden; }

/* Keskeny képernyőn a hero oszlopa soha nem nőhet a képernyőnél szélesebbre */
.hero { grid-template-columns: minmax(0, 1fr); }
.cim-sav { flex: 1 1 0; width: 0; }
.dn-ceg-fej { flex-wrap: wrap; }
.dn-ceg-fej > div { flex: 1 1 0; min-width: 0; }
.dn-ceg-fej > div > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Célországok választása */
.orszag-ablak { max-width: 720px; display: grid; }
.orszag-urlap { display: grid; grid-template-rows: auto 1fr auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.orszag-fej { display: grid; gap: 12px; padding: 32px 32px 16px; }
.orszag-fej h2 { margin: 0; padding-right: 32px; }
.orszag-fej p { margin: 0; color: var(--tinta-2); }
.orszag-gyors { display: flex; flex-wrap: wrap; gap: 8px; }
.orszag-racs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px;
  margin: 0; padding: 0 32px 16px; border: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.orszag-elem {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--vonal); border-radius: 12px; cursor: pointer; font-size: 14px; line-height: 20px;
  transition: background-color 300ms var(--gorbe), border-color 300ms var(--gorbe);
}
.orszag-elem:hover { border-color: var(--vonal-eros); }
.orszag-elem:has(input:checked) { background: var(--felulet-2); border-color: var(--tinta); font-weight: 600; }
.orszag-elem input { accent-color: var(--tinta); flex: none; margin: 0; }
.orszag-elem span { flex: none; }
.orszag-lab { display: grid; gap: 8px; padding: 16px 32px 32px; border-top: 1px solid var(--vonal); background: var(--felulet); }
.orszag-db { margin: 0; font-size: 14px; color: var(--tinta-2); }
.rejtett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) {
  .orszag-fej { padding: 24px 16px 12px; }
  .orszag-racs { padding: 0 16px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .orszag-elem { padding: 8px; gap: 6px; font-size: 13px; line-height: 18px; min-width: 0; }
  .orszag-elem:has(input:checked) { font-weight: 700; }
  .orszag-lab { padding: 12px 16px 16px; }
}
/* Alacsony képernyőn az egész ablak görög, csak az indítógomb marad lent */
@media (max-height: 720px) {
  .orszag-urlap { display: block; max-height: none; }
  .orszag-racs { overflow: visible; }
  .orszag-lab { position: sticky; bottom: 0; z-index: 1; }
}

/* Kreditvásárlás */
.kredit-uzenet { margin: 16px 0 24px; }
.kredit-uzenet + .kredit-uzenet { margin-top: -8px; }
.kredit-egyenleg { display: grid; gap: 8px; padding: 24px; margin-bottom: 24px; }
.kredit-egyenleg b { display: block; margin-top: 4px; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kredit-egyenleg p { margin: 0; }
.kredit-belepes { display: grid; gap: 12px; justify-items: start; padding: 24px; margin-bottom: 24px; }
.kredit-belepes p { margin: 0; }
/* Fizetés előtti készlet: hány cím vár rá az elemzéseiben */
.kredit-keszlet { display: grid; gap: 16px; padding: 24px; margin-bottom: 24px; }
.kredit-keszlet h2, .kredit-keszlet p { margin: 0; }
.keszlet-szamok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.keszlet-szamok .stat b { font-size: 24px; line-height: 32px; font-variant-numeric: tabular-nums; }
.kalk-keszlet { margin: 0; }
@media (max-width: 480px) { .keszlet-szamok { grid-template-columns: minmax(0, 1fr); } }
.kredit-belepes a:not(.gomb) { color: var(--tinta); font-weight: 600; }
#kredit-vasarlas .gomb--teljes { margin-top: 24px; }
.kredit-info { display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--felulet); border: 1px solid var(--vonal); color: var(--tinta-2); font-size: 14px; line-height: 20px; }
.kredit-info .ph { margin-top: 2px; color: var(--rez-sotet); }

/* Fióktörlés a belépési oldalon */
.fiok-torles { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--vonal); }
.fiok-torles summary { cursor: pointer; color: var(--tinta-2); font-size: 14px; line-height: 20px; font-weight: 600; }
.fiok-torles p { margin: 12px 0; color: var(--tinta-2); font-size: 14px; line-height: 20px; }
.fiok-torles form { display: grid; gap: 8px; }
.gomb--veszely { background: var(--rossz); color: #fff; justify-self: start; margin-top: 8px; }

/* Jogi oldalak (felhasználási feltételek, adatkezelési tájékoztató) */
.jogi-oldal { max-width: 760px; }
.jogi-oldal .meta { margin: 8px 0 24px; color: var(--halvany); font-size: 14px; line-height: 20px; }
.jogi-oldal h2 { margin: 40px 0 12px; font-size: 20px; line-height: 28px; }
.jogi-oldal h3 { margin: 24px 0 8px; font-size: 16px; line-height: 24px; }
.jogi-oldal p, .jogi-oldal li { color: var(--tinta-2); font-size: 16px; line-height: 26px; }
.jogi-oldal p { margin: 0 0 12px; }
.jogi-oldal ul { margin: 0 0 16px; padding-left: 24px; display: grid; gap: 8px; }
.jogi-oldal a { color: var(--tinta); font-weight: 600; }