*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0B1220;
  background: #F0F1F3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.site {
  background: #F0F1F3;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font-family: inherit;
}
button:hover {
  filter: brightness(0.96);
}
a {
  cursor: pointer;
  color: inherit;
}
ul {
  list-style: none;
}
details summary {
  cursor: pointer;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary .accordion__sign {
  transition: transform 0.2s;
  display: inline-block;
}
details[open] summary .accordion__sign {
  transform: rotate(45deg);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
/* Egysoros UI-atomok: a designban ezekre sehol nincs sorköz állítva, tehát a
   betűtípus saját `normal`-ja él. A törzsszöveg 1.6-os sorköze viszont
   leöröklődött rájuk, és elemenként 4-6px néma csúszást adott — ami szekciónként
   és oldalanként összeadódott. Csak olyan elem van a listán, ami egy sor:
   tördelhető szöveget nem szabad `normal`-ra állítani. */
.rating-badge,
.result-card__tag,
.section-link,
.result-card__link,
.chip,
.link-pill,
.topic-link,
.stat__value {
  line-height: normal;
}

.eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: inline-block;
  /* A designban a felirat sormagassága `normal` (14px). A téma 1.6-os
     alapja 17,6px-re nyitotta, és mivel felirat MINDEN szekció fejlécében
     van, ez szekciónként 4px néma csúszást adott. */
  line-height: normal;
}
.eyebrow--brand {
  color: #1F6589;
}
.eyebrow--on-dark {
  color: rgba(255, 255, 255, 0.5);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #E8F2F8;
  border-radius: 999px;
  /* Egysoros UI-elem: a designban a betűtípus saját sorköze él (29px, nem 33). */
  line-height: normal;
}
.tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #25759c;
}
.tag__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
}
.tag__label--plain {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #1F6589;
}
.chip {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  background: #25759c;
  color: #fff;
  border-radius: 3px;
}
.gradient-text {
  background: linear-gradient(135deg, #25759c 0%, #1F6589 60%, #08214E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-link {
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
}
.text-link:hover {
  text-decoration: underline;
}
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.container--wide {
  max-width: 1320px;
  padding-left: 48px;
  padding-right: 48px;
}
.page {
  max-width: 1440px;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0 30px 80px -30px rgba(11, 18, 32, 0.25);
}
.section {
  padding: 96px 0;
  background: #FFFFFF;
}
.section--tight {
  padding: 40px 0;
}
.section--tight-y {
  padding: 28px 0;
}
.section--bordered-top {
  border-top: 1px solid #E5E9EE;
}
/* A függőleges skála a designból: 80 / 88 / 96 (alap) / 104 / 120. A kisebb
   két fok eddig hiányzott, ezért minden 80-as és 88-as szekció 96-ra nyílt. */
.section--sm {
  padding: 80px 0;
}
.section--md {
  padding: 88px 0;
}
.section--lg {
  padding: 104px 0;
}
.section--xl {
  padding: 120px 0;
}
.section--white {
  background: #FFFFFF;
}
.section--soft {
  background: #F7F9FB;
}
.section--tint {
  background: #F4F9FC;
}
.section--warm {
  background: #FAFAF7;
}
.section--warm-2 {
  background: #FBFBFA;
}
.section--brandish {
  background: #F4F9FC;
}
.section--dark {
  background: #0B1220;
  color: #fff;
}
.section--navy {
  background: #051538;
  color: #fff;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* A design fejlécében nincs sorköz-beállítás, tehát a betűtípus saját
     `normal` sorköze érvényes. A törzsszöveg 1.6-os sorköze ide beszivárogva
     minden sort magasabbra tolt: ettől lett a fejléc 144 helyett 154 pixel. */
  line-height: normal;
}
.site-header__bar {
  border-bottom: 1px solid #E5E9EE;
  background: #FFFFFF;
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.primary-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.primary-nav__link {
  font-size: 14.5px;
  color: #2A3340;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-decoration: none;
}
.primary-nav__link:hover {
  color: #25759c;
}
.site-header__utility {
  display: flex;
  gap: 16px;
  align-items: center;
}
.phone-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #0B1220;
  font-weight: 600;
  text-decoration: none;
}
.phone-link:hover {
  color: #25759c;
}
.site-header__mega {
  border-bottom: 1px solid #E5E9EE;
  background: #FAFAF7;
}
.mega-nav {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  display: flex;
  justify-content: center;
  padding-top: 14px;
  padding-bottom: 14px;
}
.mega-nav__list {
  display: flex;
  gap: 36px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.mega-nav__item {
  position: relative;
}
.mega-nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14.5px;
  letter-spacing: -0.1px;
  color: #2A3340;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  /* Az aláhúzás horgonya. */
  position: relative;
}
/* A design mind az öt oldalon sötétebbre és félkövérre veszi azt a menüpontot,
   amelyik jelvényt visel — ez a kiemelés jelzi a promózott szolgáltatást. */
.mega-nav__link:has(.chip) {
  color: #0B1220;
  font-weight: 600;
}
/* A sáv aljához igazított 2px-es aláhúzás. A -15px = a sor 14px-es alsó belső
   margója + az 1px-es vonal: a jelölés PONTOSAN a fejléc alsó vonalán ül, nem
   a menüpont alatt lebeg. Pszeudo-elem, mert a designban is csak a nyitott
   ponton látszik — egy mindig kirajzolt, rejtett span hat üres csomópontot
   tenne minden oldal fejlécébe. */
.mega-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  height: 2px;
  background: #25759c;
  opacity: 0;
  transition: opacity 0.16s ease;
}
/* Nyitott pillér. Egérrel a hover NYIT is, tehát a kiemelés és a lenyíló
   ugyanabban a pillanatban jelenik meg — a három kapu (hover, fókusz,
   `aria-expanded`) ugyanaz, mint a panelé.

   A félkövérre váltás a designé. A sor középre van rendezve, tehát a nyitott
   pont a szomszédait hajszálnyit odébb tolja; ezt a design vállalja, cserébe
   az aktív pont súlya tényleg látszik. */
.mega-nav__item:hover > .mega-nav__link,
.mega-nav__item:focus-within > .mega-nav__link,
.mega-nav__item[aria-expanded='true'] > .mega-nav__link {
  color: #0B1220;
  font-weight: 600;
}
.mega-nav__item:hover > .mega-nav__link::after,
.mega-nav__item:focus-within > .mega-nav__link::after,
.mega-nav__item[aria-expanded='true'] > .mega-nav__link::after {
  opacity: 1;
}
.mega-nav__caret {
  transition: transform 0.2s ease;
}
/* Csak a SAJÁT nyílhegy fordul meg: a `>` nélkül a lenyílóban álló gyűjtők
   oldalra mutató nyila is átfordult, amíg a mutató a menüponton volt. */
.mega-nav__item[aria-expanded='true'] > .mega-nav__link .mega-nav__caret,
.mega-nav__item:hover > .mega-nav__link .mega-nav__caret {
  transform: rotate(180deg);
}

/* ---- A lenyíló panel (M360-122) ----
   540 pixel széles, két oszlopos: balra a pillér bemutatása, jobbra az
   al-szolgáltatások. Nem középre igazodik, hanem a menüponthoz: az első három
   pillérnél balra, az utolsó háromnál jobbra — így a szélső pilléreknél sem
   lóg le a képernyőről. A -24px a design belógatása, a 23px-es felső belső
   margó pedig a HÍD a sáv és a panel között: enélkül az egérnek egy résen
   kellene átvinnie a mutatót, és a panel becsukódna útközben. */
.mega-nav__panel {
  position: absolute;
  top: 100%;
  left: -24px;
  padding-top: 23px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 80;
}
.mega-nav__item:nth-last-child(-n + 3) .mega-nav__panel {
  left: auto;
  right: -24px;
}
.mega-nav__item:hover .mega-nav__panel,
.mega-nav__item:focus-within .mega-nav__panel,
.mega-nav__item[aria-expanded='true'] .mega-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* A panel LAPJA. Külön a rácstól, mert a harmadik szint kirepülő al-panelje
   ugyanezt a lapot használja, csak nem két oszlopos. */
.mega-nav__panel-inner {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 12px;
  box-shadow: 0 24px 50px -20px rgba(11, 18, 32, 0.14);
}
.mega-nav__panel-grid {
  width: 540px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.mega-nav__lead {
  font-size: 13.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 10px 0 14px;
}
.mega-nav__overview {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #25759c;
  text-decoration: none;
}
/* Bevezető nélküli pillér: a bevezető felső térköze ilyenkor a linké, tehát a
   rács nem esik össze a felirat alatt. */
.eyebrow + .mega-nav__overview {
  margin-top: 10px;
}
.mega-nav__overview:hover {
  color: #1F6589;
}
.mega-nav__sublist {
  margin: 12px 0 0;
  padding: 0;
}
/* A sorok közét a listaelem belső margója adja, nem az elemek közti külső — így
   az első és az utolsó sor is kap levegőt. Ugyanaz az elv, mint a láblécben. */
.mega-nav__sublist > li {
  padding: 5px 0;
}
.mega-nav__sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #2A3340;
  text-decoration: none;
}
.mega-nav__sublink:hover {
  color: #25759c;
}
/* A sor eleji pötty. Valódi elem, nem pszeudo: a design is annak rajzolja, és
   a kirepülő al-panel ugyanezt az atomot használja. */
.mega-nav__dot {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #25759c;
}

/* ---- Harmadik szint: kirepülő al-panel (M360-121) ----
   A gyűjtő ugyanúgy viselkedik, mint a felső szintű lenyíló: egérrel hoverre,
   billentyűvel `:focus-within`-re, érintéssel a header.js `aria-expanded`-jére
   nyílik. */
.mega-nav__subitem {
  position: relative;
}
.mega-nav__sublink--parent .mega-nav__caret,
.mega-nav__sublink--parent svg {
  flex: none;
  /* A gyűjtő nyila oldalra mutat, nem lefelé: az al-panel is oldalra nyílik. */
  transform: rotate(-90deg);
  transition: transform 0.16s ease;
  /* A nyíl a sor VÉGÉN áll, a pötty és a felirat után. */
  margin-left: auto;
}
.mega-nav__subitem:hover > .mega-nav__sublink--parent,
.mega-nav__subitem[aria-expanded='true'] > .mega-nav__sublink--parent {
  color: #25759c;
}
.mega-nav__flyout {
  position: absolute;
  /* A lap 14px-es felső margója és a sor 5px-es belső margója közötti
     különbség: így az al-panel első sora a gyűjtő sorával egy vonalban áll. */
  top: -9px;
  left: 100%;
  /* A 40px = a panel 32px-es belső margója + 8px látható rés. A wrapper
     paddingja a HÍD: enélkül az egérnek egy résen kellene átvinnie a mutatót. */
  padding-left: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease;
  z-index: 90;
}
/* A szélesség a LAPRA vonatkozik, nem a hídra: a wrapper paddingja változik
   attól, hogy merre nyílik, és nem szabad, hogy ettől a panel is szűkebb legyen. */
.mega-nav__flyout .mega-nav__sublist {
  margin: 0;
  padding: 14px 18px;
  min-width: 224px;
}
.mega-nav__subitem:hover .mega-nav__flyout,
.mega-nav__subitem:focus-within .mega-nav__flyout,
.mega-nav__subitem[aria-expanded='true'] .mega-nav__flyout {
  opacity: 1;
  visibility: visible;
}
/* Az utolsó három pillér panelje jobbra igazodik, tehát a jobb széléhez már
   nem fér el mellette az al-panel. Ott BEFELÉ nyílik, a bevezető oszlopa fölé:
   így a képernyőről soha nem lóg le, és a híd 8px marad — átfordítva a mutató
   a fél panelt keresztezné, és a lenyíló becsukódna útközben. */
.mega-nav__item:nth-last-child(-n + 3) .mega-nav__flyout {
  left: auto;
  right: 100%;
  padding-left: 0;
  padding-right: 8px;
}
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid #E5E9EE;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: #0B1220;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars::before {
  transform: translateY(-6px);
}
.nav-toggle__bars::after {
  transform: translateY(4px);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
  background: transparent;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
  transform: translateY(0) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
  transform: translateY(-2px) rotate(-45deg);
}
.mobile-nav {
  display: none;
  border-bottom: 1px solid #E5E9EE;
  background: #FFFFFF;
  padding: 8px 24px 20px;
}
.mobile-nav[data-open='true'] {
  display: block;
}
.mobile-nav__group + .mobile-nav__group {
  margin-top: 6px;
  border-top: 1px solid #E5E9EE;
  padding-top: 6px;
}
.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  font-size: 16px;
  font-weight: 500;
  color: #0B1220;
  text-decoration: none;
}
.mobile-nav__cta {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

/* ---- Harmadik szint a fiókban (M360-121) ----
   Kilapítva, pici behúzással, accordionként. A gyűjtő gomb (nem link), mert
   itt kapcsolóként viselkedik — a cél oldalát a lenyíló első pontja adja. */
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #0B1220;
  text-align: left;
  cursor: pointer;
}
.mobile-nav__toggle svg {
  flex: none;
  transition: transform 0.16s ease;
}
.mobile-nav__toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.mobile-nav__sub {
  display: none;
  /* A behúzás szándékosan pici: a fiókban a mélység jelzés, nem szerkezet. */
  padding-left: 16px;
  border-left: 1px solid #E5E9EE;
  margin-left: 4px;
}
.mobile-nav__toggle[aria-expanded='true'] + .mobile-nav__sub {
  display: block;
}
.mobile-nav__sub .mobile-nav__link {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 15px;
  font-weight: 400;
  color: #2A3340;
}
.site-footer {
  background: #0A0F18;
  color: rgba(255, 255, 255, 0.65);
  padding: 64px 0 32px;
  /* Ugyanaz, mint a fejlécnél: a design láblécében nincs sorköz, tehát a
     `normal` érvényes. A törzsszöveg 1.6-os sorköze minden linksort és a
     copyright sávot is magasabbra tolta. */
  line-height: normal;
}
.site-footer__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  display: grid;
  grid-template-columns: 1.6fr repeat(6, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.site-footer__intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin: 18px 0 0;
  max-width: 280px;
}
.site-footer__social {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
/* A design szerint kör alakú, 32 pixeles ikon — nem lekerekített négyzet. */
.social-link {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.social-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.footer-col__title {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.footer-col__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
/* A design a sorok közét a listaelem függőleges belső margójával adja, nem az
   elemek közti külső margóval — így az első és az utolsó sor is kap levegőt. */
.footer-col__list li {
  padding: 4px 0;
}
.footer-col__link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.footer-col__link:hover {
  color: #fff;
}
.site-footer__bottom {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  padding-top: 24px;
  /* A keret helyét megtartjuk — a magasságot a design is beleszámolja —,
     de átlátszóra vesszük, a látható vonalat a ::before rajzolja. */
  border-top: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
/* A designban az elválasztó vonal a tartalom szélességét fogja, nem a 56
   pixeles oldalmargót is: ott a sáv a margós burkolón BELÜL ül. Itt a sáv
   maga viseli a margót, ezért a vonalat külön elemre bízzuk — így a
   burkoló szintje nem változik, a vonal viszont a szöveggel egy vonalban
   kezdődik és végződik. */
.site-footer__bottom::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 56px;
  right: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__copy {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.legal-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.legal-links a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
.legal-links a:hover {
  color: #fff;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  /* Egysoros UI-szöveg: a designban a betűtípus saját `normal` sorköze él.
     A törzsszöveg 1.6-os sorköze 44px helyett 48px magas gombot adott, és
     mivel gomb szinte minden szekcióban van, ez oldalanként több tíz pixel
     néma csúszást okozott. Ugyanaz a hiba, mint a `.eyebrow`-nál. */
  line-height: normal;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  padding: 12px 22px;
  font-size: 14px;
}
.btn--primary {
  background: #25759c;
  color: #fff;
  border-color: #25759c;
}
.btn--primary:hover {
  background: #1F6589;
  border-color: #1F6589;
  filter: none;
}
.btn--ghost {
  background: transparent;
  color: #0B1220;
  border-color: #E5E9EE;
}
.btn--ghost:hover {
  background: #F7F9FB;
  filter: none;
}
.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  filter: none;
}
/* Áttetsző kitöltés sötét kártyán. A designban az állás-oldal kapcsolattartó
   kártyáján szerepel: nem körvonalas, hanem enyhén világító gomb, ami a sötét
   dobozból emelkedik ki. */
.btn--glass {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.btn--glass:hover {
  background: rgba(255, 255, 255, 0.16);
  filter: none;
}
.btn--lg {
  padding: 16px 30px;
  font-size: 15px;
}
.btn--dark {
  background: #0B1220;
  color: #fff;
  border-color: #0B1220;
}
.btn--dark:hover {
  background: #000;
  border-color: #000;
  filter: none;
}
.btn--white {
  background: #FFFFFF;
  color: #0B1220;
  border-color: #E5E9EE;
}
.btn--white:hover {
  background: #F7F9FB;
  filter: none;
}
.btn__icon {
  flex: none;
}
.btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #25759c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10.2px;
  letter-spacing: -0.5px;
  flex: none;
}
.brand__name {
  font-weight: 700;
  font-size: 17px;
  color: #0B1220;
  letter-spacing: -0.3px;
}
.brand__name-accent {
  color: #25759c;
}
.brand--on-dark .brand__name {
  color: #fff;
}
.section-head__title {
  font-weight: 700;
  font-size: 44px;
  color: #0B1220;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin: 12px 0 0;
  text-wrap: balance;
}
.section-head__title--40 {
  font-size: 40px;
}
.section-head__title--44-tight {
  font-weight: 600;
  letter-spacing: -1.4px;
  line-height: 1.05;
}
.section-head__title--56 {
  font-size: 56px;
  letter-spacing: -1.6px;
}
.section-head__lead {
  font-size: 17px;
  line-height: 1.6;
  color: #2A3340;
  margin: 0;
}
.section-head--split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  margin-bottom: 56px;
  align-items: start;
}
.section-head--split .section-head__lead {
  align-self: end;
  max-width: 540px;
}
/* Egymás alatti fejléc: a cím teljes soros, a bevezető alatta. Szélesség-korlát
   nélkül a sor a jobb szélig futna, és olvashatatlanul hosszú lenne. */
.section-head:not(.section-head--split) .section-head__lead {
  max-width: 720px;
  margin-top: 18px;
  margin-bottom: 24px;
}
.section-head--split-wide {
  grid-template-columns: 1fr 1.6fr;
}
.section-head--split-even {
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.section-head--split-even .section-head__lead {
  justify-self: end;
  max-width: 480px;
}
.section-head--why {
  grid-template-columns: 1fr 2fr;
  margin-bottom: 48px;
}
/* Az érvrács csomag-oldali fejléce: egyetlen, keskeny hasáb — a design itt nem
   osztja két oszlopra a feliratot és a címet. */
.section-head--pd-why {
  max-width: 620px;
  margin-bottom: 48px;
}
.section-head--split-half {
  grid-template-columns: 1fr 1fr;
}
.section-head--split-15 {
  grid-template-columns: 1fr 1.5fr;
}
.section-head--center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.section-head--center .section-head__lead {
  margin-top: 16px;
}
.section-head--row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #0B1220;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.section-link:hover {
  color: #25759c;
}
.section-link--brand {
  color: #25759c;
}
.breadcrumb strong,
.breadcrumb span:last-child {
  color: #0B1220;
  font-weight: 400;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Mind az öt nyers export ugyanezt írja: 12,5px, `normal` sorköz. */
  font-size: 12.5px;
  line-height: normal;
  color: #5B6B7E;
  margin-bottom: 28px;
}
/* A designban a morzsa hivatkozása MÁRKAKÉK mind az öt oldalon — a szürke
   link nem különült el a nem kattintható elemektől. */
.breadcrumb a {
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #1F6589;
}
.breadcrumb__sep {
  color: #636d79;
}
.breadcrumb__current {
  color: #2A3340;
}
/* A morzsa mint önálló blokk, a hero FÖLÖTT (M360-123).

   A designban a morzsa a hero belső dobozában ült, és onnan örökölt mindent,
   ami a helyét megszabta: a sávszélességet, az oldalsó belső margót és a hero
   felső levegőjét. A hero elé emelve ezt magának kell felvennie — enélkül a
   lap széléhez tapadna.

   A függőleges ritmus ezért CSERE, nem hozzáadás: a sáv veszi át a hero felső
   belső margóját, a mögötte álló hero pedig elhagyja a sajátját. A morzsa alatti
   28px (`.breadcrumb` margin-bottom) változatlan, tehát a fejléc és a hero címe
   közti távolság pontosan annyi marad, amennyi a rajzon.

   A módosítók a hero NEVÉT viselik, mert pontosan azt mondják meg, melyik hero
   dobozát veszik át. Nem egy közös geometria: a Referenciák és az álláshirdetés
   1180, a cikk 880 széles, a felső levegő pedig hatféle. */
/* Az alapeset 1280px / 64px: ezt viseli módosító-szabály NÉLKÜL a
   `breadcrumb--svc`, `--car`, `--contact`, `--pd` és `--about`. */
.breadcrumb--bar {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px 56px 0;
}
.breadcrumb--ref,
.breadcrumb--blog,
.breadcrumb--jd,
.breadcrumb--article,
.breadcrumb--case {
  padding-top: 52px;
}
.breadcrumb--ref,
.breadcrumb--jd {
  max-width: 1280px;
}

.breadcrumb--bar + .svc-hero,
.breadcrumb--bar + .pkg-hero,
.breadcrumb--bar + .ref-hero,
.breadcrumb--bar + .car-hero,
.breadcrumb--bar + .blog-hero,
.breadcrumb--bar + .jd-hero,
.breadcrumb--bar + .contact-hero,
.breadcrumb--bar + .pd-hero,
.breadcrumb--bar + .article-hero,
.breadcrumb--bar + .about-hero {
  padding-top: 0;
}
/* A sáv a SABLONÉ, tehát a bejegyzés-tartalom doboza ELŐTT áll, nem benne. A
   hero így nem a közvetlen testvére, hanem a tartalom-doboz első gyereke — a
   felső levegő cseréje viszont ugyanaz a szabály. Két alak, mert a régi,
   tartalomba írt morzsával mentett oldalak is jól kell hogy kinézzenek, amíg
   a migráció le nem fut rajtuk. */
.breadcrumb--bar + .entry-content > .svc-hero,
.breadcrumb--bar + .entry-content > .pkg-hero,
.breadcrumb--bar + .entry-content > .ref-hero,
.breadcrumb--bar + .entry-content > .car-hero,
.breadcrumb--bar + .entry-content > .blog-hero,
.breadcrumb--bar + .entry-content > .jd-hero,
.breadcrumb--bar + .entry-content > .contact-hero,
.breadcrumb--bar + .entry-content > .pd-hero,
.breadcrumb--bar + .entry-content > .article-hero,
.breadcrumb--bar + .entry-content > .case-hero,
.breadcrumb--bar + .entry-content > .about-hero {
  padding-top: 0;
}
.checklist {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #0B1220;
}
.checklist__item svg {
  flex-shrink: 0;
}
.checklist-card {
  background: #F7F9FB;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
}
.checklist-card {
  padding: 32px;
}
.checklist-card__title {
  display: block;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  margin-bottom: 18px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #E5E9EE;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  overflow: hidden;
}
.service-card {
  background: #FFFFFF;
  padding: 32px 28px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.service-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.service-card__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #25759c;
  letter-spacing: 1.4px;
}
.service-card__icon {
  color: #636d79;
}
.service-card__title {
  font-weight: 600;
  font-size: 22px;
  color: #0B1220;
  letter-spacing: -0.4px;
  margin: 0 0 12px;
}
.service-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
  flex: 1;
}
.service-card__tags {
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.service-card__tag {
  font-size: 12px;
  color: #2A3340;
  padding: 4px 10px;
  background: #F7F9FB;
  border: 1px solid #EEF1F4;
  border-radius: 999px;
}
.service-card--dark {
  background: #0B1220;
  color: #fff;
  justify-content: space-between;
}
.service-card--dark .service-card__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.service-card--dark .service-card__title {
  color: #fff;
  margin: 12px 0;
}
.service-card--dark .service-card__desc {
  color: rgba(255, 255, 255, 0.7);
  flex: none;
}
.service-card__cta {
  padding: 8px 14px;
  font-size: 13px;
  margin-top: 24px;
  align-self: flex-start;
}
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.capability-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}
.capability-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.capability-card__title {
  font-weight: 600;
  font-size: 20px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.4px;
}
.capability-card__slug {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: #636d79;
  letter-spacing: 0.5px;
}
.capability-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 16px;
}
.capability-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.capability-card__link {
  font-size: 12.5px;
  color: #1F6589;
  padding: 4px 10px;
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
}
.capability-card__link:hover {
  background: #E8F2F8;
}
.capability-card__stat {
  background: #F7F9FB;
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.capability-card__stat-value {
  font-weight: 700;
  font-size: 36px;
  color: #25759c;
  letter-spacing: -1.4px;
  line-height: 1;
}
.capability-card__stat-label {
  font-size: 12px;
  color: #5B6B7E;
  line-height: 1.4;
  margin-top: 6px;
}
.case-card {
  background: #FFFFFF;
  border: 1px solid rgba(11, 18, 32, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.case-card__media {
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  height: 180px;
  border-bottom: 1px solid rgba(11, 18, 32, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
}
.case-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.case-card__title {
  font-weight: 700;
  font-size: 22px;
  color: #0B1220;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin: 0 0 6px;
}
.case-card__sector {
  font-size: 12.5px;
  color: #5B6B7E;
  margin-bottom: 18px;
}
.case-card__tags {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.case-card__tag {
  padding: 4px 10px;
  background: #E8F2F8;
  color: #1F6589;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 999px;
}
.case-card__metrics {
  border-top: 1px solid rgba(11, 18, 32, 0.08);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.case-card__metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
/* A mérőszám a designban SAJÁT HASÁB: fix minimum-szélesség és tördeletlen
   érték, hogy a megnevezések egymás alatt, egy vonalban kezdődjenek. Enélkül a
   címkék az érték hosszához igazodva ugrálnak soronként. A `line-height: 1` is
   a designé — a soronkénti 4-5 pixel a három soron át már látszik. */
.case-card__metric-value {
  font-weight: 700;
  font-size: 24px;
  color: #25759c;
  letter-spacing: -0.8px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 92px;
}
.case-card__metric-label {
  font-size: 12.5px;
  color: #5B6B7E;
  line-height: 1.3;
}
.case-card__link {
  display: block;
  margin-top: 24px;
  font-size: 13px;
  color: #0B1220;
  font-weight: 500;
  text-decoration: none;
}
.case-card__link:hover {
  color: #25759c;
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Borító nélküli kártyák: a designban a főoldali rács kártyáin van feature kép,
   a Rólunk és a Referenciák oldalon nincs. A borítót a RÁCS rejti el, nem a
   kártya markupja hagyja ki — a rács a tartalomtárból is épül, ott a kártya
   mezőit a szerver tölti, tehát a kártyáig egy rács-szintű döntés nem érne el. */
.case-grid--no-media .case-card__media {
  display: none;
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.result-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.result-card:hover {
  border-color: #3DA5D9;
  box-shadow: 0 12px 30px -12px rgba(11, 18, 32, 0.15);
}
.result-card__title {
  font-weight: 700;
  font-size: 22px;
  color: #0B1220;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.result-card__sector {
  font-size: 12.5px;
  color: #5B6B7E;
  margin-bottom: 18px;
}
.result-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}
.result-card__tag {
  padding: 4px 10px;
  background: #F4F9FC;
  color: #1F6589;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 999px;
}
.result-card__metrics {
  border-top: 1px solid #E5E9EE;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.result-card__metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.result-card__metric-value {
  font-weight: 700;
  font-size: 24px;
  color: #25759c;
  letter-spacing: -0.8px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 92px;
}
.result-card__metric-label {
  font-size: 12.5px;
  color: #5B6B7E;
  line-height: 1.3;
}
.result-card__link {
  margin-top: 24px;
  font-size: 13.5px;
  font-weight: 500;
  color: #25759c;
  text-decoration: none;
}
.result-card__link:hover {
  color: #1F6589;
}
.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.module-card {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  background: #FFFFFF;
  border: 1px solid rgba(11, 18, 32, 0.08);
  border-radius: 16px;
  padding: 28px;
}
.module-card__slug {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #636d79;
  letter-spacing: 0.5px;
}
.module-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.module-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.module-card__title {
  font-weight: 600;
  font-size: 22px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.4px;
}
.module-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 24px;
  max-width: 380px;
}
.module-card__stats {
  display: flex;
  gap: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(11, 18, 32, 0.05);
}
.module-card__stat-label {
  font-size: 11px;
  color: #5B6B7E;
}
.module-card__stat-value {
  font-size: 22px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.6px;
  margin-top: 2px;
}
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.reason-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 28px 26px;
}
.reason-card__num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #E8F2F8;
  color: #25759c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
.reason-card__title {
  font-weight: 600;
  font-size: 18px;
  color: #0B1220;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.reason-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
/* Sötét érv-rács („Hitvallásunk"). Ugyanaz a szekció más arccal: a kártyák nem
   különálló dobozok, hanem egyetlen, hajszálvonalakkal osztott tábla — a
   vonalakat a rács háttere adja, amit az 1px-es rés enged át. A záró bekezdés
   itt keretes idézetté válik, az akcentus-sáv a bekezdés `::before`-ja, hogy a
   markup ugyanaz maradhasson, mint a világos rácsokon. */
.reason-section--dark {
  padding: 100px 0;
  background: #0B1220;
  color: #fff;
}
.reason-section--dark .section-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.reason-section--dark .section-head__title {
  font-size: 44px;
  letter-spacing: -1.4px;
  margin-top: 14px;
}
.reason-section--dark .section-head__lead {
  color: rgba(255, 255, 255, 0.7);
}
.reason-section--dark .reason-grid {
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
}
.reason-section--dark .reason-card {
  background: #0B1220;
  border: 0;
  border-radius: 0;
  padding: 36px 32px;
}
.reason-section--dark .reason-grid .reason-card__num {
  color: #e8b756;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.reason-section--dark .reason-card__title {
  font-size: 21px;
  color: #fff;
  letter-spacing: -0.4px;
  margin-bottom: 12px;
}
.reason-section--dark .reason-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.reason-section--dark .mission__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  max-width: none;
  margin: 48px 0 0;
  padding: 36px 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: #fff;
}
.reason-section--dark .mission__note::before {
  content: '';
  width: 4px;
  align-self: stretch;
  background: #25759c;
  border-radius: 2px;
}
.topline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.topline-card {
  border-top: 2px solid #25759c;
  padding-top: 22px;
}
.topline-card__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #636d79;
}
.topline-card__title {
  font-weight: 600;
  font-size: 18px;
  color: #0B1220;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin: 12px 0 10px;
}
.topline-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.stepper {
  position: relative;
}
.stepper__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  height: 1px;
  background: #E5E9EE;
}
.stepper__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.stepper__num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0B1220;
  border: 1px solid #E5E9EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.stepper__num--active {
  background: #25759c;
  color: #fff;
  border-color: #25759c;
}
/* AZ EGÉR ALATTI LÉPÉS KÖRE IS KIEMELT (M360-245). Ugyanaz a három érték, ami
   az `--active` változatot adja: a hover nem MÁSIK állapotot talál ki, hanem
   előrehozza azt, amit a szerkesztő állandóra is beállíthat. A vonalon így
   végigfut a szem, és látszik, melyik lépésnél tart.

   Az átmenet a körön ül, nem a hoveren: onnan VISSZA is fut, amikor az egér
   továbbmegy. */
.stepper__num {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.stepper__step:hover .stepper__num {
  background: #25759c;
  color: #fff;
  border-color: #25759c;
}
.stepper__title {
  font-weight: 600;
  font-size: 19px;
  color: #0B1220;
  margin: 24px 0 8px;
  letter-spacing: -0.3px;
}
.stepper__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.step-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
}
.step-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
/* Sorszám nélkül a fejléc doboza üresen marad (a nyíl a sorszámhoz tartozik,
   tehát vele együtt marad el) — üresen a margója sem kell (M360-235). */
.step-card__head:empty {
  display: none;
}
/* A sorszám és a cím egy sorban. Lásd a `buildblock--inline` magyarázatát. */
.step-card--inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}
.step-card--inline .step-card__head {
  margin-bottom: 0;
  justify-content: flex-start;
  gap: 10px;
}
.step-card--inline .step-card__title {
  margin: 0;
}
.step-card--inline .step-card__desc {
  grid-column: 1 / -1;
  margin-top: 12px;
}
.step-card__num {
  font-weight: 700;
  font-size: 30px;
  color: #25759c;
  letter-spacing: -1px;
  line-height: 1;
}
.step-card__arrow {
  color: #636d79;
  flex-shrink: 0;
}
.step-card__title {
  font-weight: 600;
  font-size: 17.5px;
  color: #0B1220;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin: 0 0 10px;
}
.step-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.testimonial-card__mark {
  margin-bottom: 18px;
}
.testimonial-card__quote {
  font-size: 16px;
  line-height: 1.55;
  color: #0B1220;
  margin: 0;
  flex: 1;
}
.testimonial-card__author {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #E5E9EE;
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E8F2F8;
  color: #25759c;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.testimonial-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #0B1220;
}
.testimonial-card__company {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
/* A besorolás a szerző-sor túlsó végén áll. Üresen nincs a markupban, tehát a
   sor a többi kártyán változatlan marad. */
.testimonial-card__tag {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  margin-left: auto;
  text-align: right;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  /* A kártya nem maga a hivatkozás, hanem a cím linkjének a kerete: a fátyol
     ehhez a dobozhoz igazodik (M360-232). */
  position: relative;
}
.blog-card__cover {
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  height: 220px;
  border-radius: 10px;
  border: 1px solid #E5E9EE;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
}
.blog-card__tags {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  /* A címkék a fátyol FÖLÖTT állnak, különben a saját kattintásuk a cikkre
     menne. */
  position: relative;
  z-index: 1;
}
.blog-card__tag {
  padding: 3px 10px;
  background: #F4F9FC;
  color: #1F6589;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
a.blog-card__tag:hover {
  background: #E4EFF6;
}
.blog-card__title {
  font-weight: 600;
  font-size: 19px;
  color: #0B1220;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin: 0 0 10px;
}
/* A CÍM VISZI A CÉLT, a fátyla pedig az egész kártyát kattinthatóvá teszi.
   Ugyanaz a minta, mint a listaoldali `post-card`-on: egy kártyán a fő
   hivatkozás mellett MÁS hivatkozás is állhat, tehát a kategória-címke valódi
   link lehet, anélkül hogy hivatkozás kerülne hivatkozásba. A billentyűzet is
   jobban jár: a fókusz a címre kerül, nem a kártya teljes szövegére. */
.blog-card__link {
  color: inherit;
  text-decoration: none;
}
.blog-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.blog-card__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 16px;
  flex: 1;
}
.blog-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid #EEF1F4;
  font-size: 12px;
  color: #5B6B7E;
  gap: 12px;
}
.blog-card__meta strong {
  color: #0B1220;
  font-weight: 600;
}
.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.topic-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 24px;
}
.topic-card__title {
  font-weight: 600;
  font-size: 16px;
  color: #0B1220;
  letter-spacing: -0.2px;
  margin: 0 0 16px;
}
.topic-card__list {
  margin: 0;
  padding: 0;
}
.topic-card__item {
  padding: 6px 0;
  border-bottom: 1px solid #EEF1F4;
}
.topic-card__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: #2A3340;
  text-decoration: none;
}
.topic-card__link:hover {
  color: #25759c;
}
.topic-card__arrow {
  color: #636d79;
}
.topic-card__link:hover .topic-card__arrow {
  color: #25759c;
}
.hero {
  background: #FFFFFF;
  padding: 88px 0 56px;
}
.hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.hero__title {
  font-weight: 700;
  font-size: 64px;
  line-height: 1.05;
  color: #0B1220;
  letter-spacing: -1.8px;
  margin: 24px 0 0;
  text-wrap: balance;
}
.hero__title-accent {
  color: #25759c;
}
.hero__lead {
  font-size: 19px;
  line-height: 1.55;
  color: #2A3340;
  margin-top: 24px;
  max-width: 520px;
}
.hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero__stats {
  display: flex;
  gap: 40px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #E5E9EE;
  flex-wrap: wrap;
}
.stat__value {
  font-weight: 700;
  font-size: 32px;
  color: #0B1220;
  letter-spacing: -1px;
}
.stat__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
  margin-top: 2px;
}
.hero__visual {
  position: relative;
  height: 560px;
}
.dash {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(11, 18, 32, 0.18), 0 2px 4px rgba(11, 18, 32, 0.04);
  overflow: hidden;
}
.dash__head {
  padding: 18px 22px;
  border-bottom: 1px solid #E5E9EE;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash__industry {
  font-size: 16px;
  font-weight: 600;
  color: #0B1220;
  margin-top: 4px;
}
.dash__live {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #7fc8a9;
}
.dash__live-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #487d65;
}
.dash__metrics {
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.metric {
  background: #F7F9FB;
  border-radius: 10px;
  padding: 14px 16px;
}
.metric__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
}
.metric__value {
  font-size: 28px;
  font-weight: 700;
  color: #0B1220;
  letter-spacing: -1px;
  margin-top: 4px;
}
.metric__delta {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #487d65;
}
.dash__chart {
  padding: 6px 22px 22px;
}
.dash__chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.dash__chart-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.dash__chart-value {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #25759c;
}
.dash-badge {
  position: absolute;
  left: -20px;
  bottom: 40px;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  box-shadow: 0 12px 30px -12px rgba(11, 18, 32, 0.15);
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 240px;
}
.dash-badge__icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dash-badge__title {
  font-size: 13px;
  font-weight: 600;
  color: #0B1220;
}
.dash-badge__sub {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
}
.placeholder {
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #636d79;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
  min-height: 160px;
}
/* Kép-hely feltöltött képpel. A méretet, a keretet és a lekerekítést továbbra
   is a hely SAJÁT osztálya adja (`.team__photo`, `.office__map`, …) — itt csak
   a helykitöltő csíkos háttere és belső margója kerül le, és a kép kitölti a
   helyet. Így egy kép beszúrása nem mozdít semmit az elrendezésen. */
.has-image {
  background: none;
  overflow: hidden;
}
.has-image:not(.has-image--contain) {
  padding: 0;
}
.image-fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Logónál a levágás tönkretenné a márkajelet: a teljes kép fér be a helyre,
   a cella belső margóján belül. */
.image-fill--contain {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.logo-cell .image-fill--contain {
  max-height: 64px;
}
.logo-wall__cell .image-fill--contain,
.logo-row .image-fill--contain {
  max-height: 40px;
}

.placeholder--sm {
  min-height: 100px;
}
.placeholder--round {
  border-radius: 50%;
}
.placeholder--pill {
  border-radius: 999px;
}
.logo-wall {
  padding: 40px 0;
  border-top: 1px solid #E5E9EE;
  border-bottom: 1px solid #E5E9EE;
  background: #F7F9FB;
}
.logo-wall__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.logo-wall__lead {
  font-size: 13px;
  color: #5B6B7E;
}
.logo-wall__lead strong {
  color: #0B1220;
  font-weight: 700;
}
.logo-wall__link {
  font-size: 13px;
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  align-items: center;
}
.logo-wall__cell {
  display: flex;
  justify-content: center;
}
.brandmark {
  color: #0B1220;
  opacity: 0.55;
  white-space: nowrap;
}
.brandmark--douglas {
  font: 700 22px Georgia, serif;
  letter-spacing: 2px;
}
.brandmark--provident {
  font: 800 19px 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.5px;
}
.brandmark--femina {
  font: italic 300 24px Georgia, serif;
}
.brandmark--vichy {
  font: 700 24px Arial, sans-serif;
  letter-spacing: 4px;
}
.brandmark--bankmonitor {
  font: 700 18px 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.4px;
}
.brandmark--miele {
  font: 900 22px Arial, sans-serif;
  letter-spacing: 1px;
}
.brandmark--wagner {
  font: 600 18px 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.brandmark--salesianer {
  font: 500 18px Georgia, serif;
  letter-spacing: 0.5px;
}
.system {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background: #FBFBFA;
}
.system__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 500px at 70% 0%, rgba(40, 127, 170, 0.1), transparent 60%),
    radial-gradient(600px 400px at 10% 100%, rgba(40, 127, 170, 0.06), transparent 70%);
}
.system__grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(11, 18, 32, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 32, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, black, transparent);
  mask-image: radial-gradient(80% 60% at 50% 30%, black, transparent);
}
.system__inner {
  position: relative;
}
.system__title {
  font-weight: 600;
  font-size: 76px;
  line-height: 1;
  color: #0B1220;
  letter-spacing: -3px;
  margin: 14px 0 0;
  max-width: 1100px;
  text-wrap: balance;
}
.system__lead {
  font-size: 20px;
  line-height: 1.5;
  color: #2A3340;
  margin-top: 26px;
  max-width: 720px;
}
.system__actions {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  align-items: center;
  flex-wrap: wrap;
}
.system__note {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #5B6B7E;
  margin-left: 16px;
}
.in-house {
  position: relative;
  overflow: hidden;
  background: #051538;
  color: #fff;
  padding: 120px 0;
}
.in-house__decor {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
}
.in-house__decor-inner {
  position: absolute;
  top: 50%;
  left: -240px;
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  opacity: 0.9;
}
.in-house__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}
.in-house__title {
  font-weight: 600;
  font-size: 56px;
  letter-spacing: -2px;
  line-height: 1;
  margin: 14px 0 28px;
}
.in-house__title-accent {
  color: #3DA5D9;
  font-style: italic;
  font-family: Georgia, serif;
  font-weight: 400;
}
.in-house__lead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 460px;
}
.in-house__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.in-house__step {
  padding: 28px;
}
.in-house__step:nth-child(1),
.in-house__step:nth-child(2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.in-house__step:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.in-house__step-num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #3DA5D9;
  letter-spacing: 1.4px;
  margin-bottom: 12px;
}
.in-house__step-title {
  font-weight: 600;
  font-size: 22px;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
}
.in-house__step-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.workflow {
  background: #FFFFFF;
  border-top: 1px solid rgba(11, 18, 32, 0.08);
  border-bottom: 1px solid rgba(11, 18, 32, 0.08);
  padding: 96px 0;
}
.workflow__row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 200px;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid rgba(11, 18, 32, 0.08);
}
.workflow__row:last-child {
  border-bottom: 1px solid rgba(11, 18, 32, 0.08);
}
.workflow__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: #25759c;
  letter-spacing: 1px;
}
.workflow__title {
  font-size: 22px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.4px;
}
.workflow__desc {
  font-size: 15px;
  color: #5B6B7E;
  line-height: 1.5;
}
.workflow__meta {
  text-align: right;
}
.workflow__meta-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.consult {
  background: #0B1220;
  color: #fff;
  padding: 96px 0;
}
.consult__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.consult__title {
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -1.6px;
  line-height: 1.05;
  margin: 12px 0 20px;
}
.consult__title-accent {
  color: #25759c;
}
.consult__lead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 540px;
}
.consult__actions {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.consult__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 28px;
}
.consult__card-title {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.consult__list {
  margin: 20px 0 0;
  padding: 0;
}
.consult__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #fff;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.consult__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
}
.faq__title {
  margin-bottom: 24px;
}
.faq__help {
  font-size: 16px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 0;
}
.faq__item {
  border-bottom: 1px solid #E5E9EE;
  padding: 22px 0;
}
.faq__item:first-child {
  border-top: 1px solid #E5E9EE;
}
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  list-style: none;
  font-size: 18px;
  font-weight: 600;
  color: #0B1220;
}
.accordion__sign {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 18px;
  color: #25759c;
}
.faq__a {
  font-size: 15px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 14px 60px 0 0;
}
/* Csomag-oldali GYIK: keskenyebb bal hasáb, tömörebb sáv és egy fokkal kisebb
   tipográfia — a főoldali változat nagyobb léptékű. */
.faq--pkg {
  padding: 96px 0;
}
.faq--pkg .faq__grid {
  grid-template-columns: 1fr 1.6fr;
}
.faq--pkg .faq__title {
  font-size: 38px;
  letter-spacing: -1.1px;
  margin-bottom: 20px;
}
.faq--pkg .faq__help {
  font-size: 15.5px;
}
.faq--pkg .faq__item {
  padding: 20px 0;
}
.faq--pkg .faq__q {
  align-items: flex-start;
  font-size: 17px;
  /* A kérdés-sor a designban szorosabb: a 1.6-os törzs-sorköz elemenként 6px-et
     adott a csukott sávhoz. */
  line-height: 1.35;
}
.faq--pkg .accordion__sign {
  font-size: 20px;
  line-height: 1;
}
.faq--pkg .faq__a {
  color: #2A3340;
  margin-right: 36px;
}
.final-cta {
  background: #0B1220;
  color: #fff;
  padding: 96px 0;
}
.final-cta__inner {
  text-align: center;
}
.final-cta__title {
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -1.8px;
  line-height: 1.05;
  margin: 14px auto 20px;
  max-width: 800px;
  text-wrap: balance;
}
.final-cta__lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 32px;
  max-width: 620px;
}
.final-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.about-hero {
  background: #FFFFFF;
  padding: 64px 0 72px;
  border-bottom: 1px solid #E5E9EE;
}
.about-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, 440px);
  gap: 64px;
  align-items: start;
}
.about-hero__title {
  font-size: 60px;
  line-height: 1.03;
  letter-spacing: -2px;
  margin: 0;
}
.about-hero__lead {
  font-size: 18.5px;
  line-height: 1.6;
  color: #2A3340;
  margin-top: 24px;
  max-width: 620px;
}
.about-hero__stats {
  border-top: none;
  border-bottom: none;
  margin-top: 36px;
  padding-top: 0;
  padding-bottom: 0;
}
.about-hero__aside {
  background: #F4F9FC;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
}
.about-hero__media {
  height: 200px;
  min-height: 0;
  margin: 0 0 22px;
  border-radius: 12px;
}
.about-facts {
  margin: 16px 0 0;
}
.about-facts__eyebrow {
  display: block;
  color: #1F6589;
}
.about-fact {
  margin-bottom: 14px;
}
.about-fact:last-child {
  margin-bottom: 0;
}
.about-fact__label {
  font-weight: 600;
  font-size: 13px;
  color: #0B1220;
  margin-bottom: 4px;
}
.about-fact__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #2A3340;
  margin: 0;
}
.fullstack__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
}
.fullstack__title {
  font-weight: 700;
  font-size: 38px;
  color: #0B1220;
  letter-spacing: -1.2px;
  line-height: 1.12;
  margin: 12px 0 24px;
}
.fullstack__text {
  font-size: 17px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 18px;
}
.fullstack__text:last-child {
  margin-bottom: 0;
}
.checklist-card__note {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid #E5E9EE;
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
}
.checklist-card__note strong {
  color: #0B1220;
}
.founder {
  background: #FFFFFF;
  padding: 96px 0;
}
.founder__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
/* A névjegy a portréra ÚSZIK rá (nem alatta ül), ezért a média-oszlop csak
   pozicionálási alap: keret és háttér nélkül. */
.founder__media {
  position: relative;
}
.founder__photo {
  height: 520px;
  border: 1px solid #E5E9EE;
}
.founder__id {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 12px 30px -12px rgba(11, 18, 32, 0.18);
}
.founder__name {
  font-weight: 600;
  font-size: 14px;
  color: #0B1220;
}
.founder__role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.founder__socials {
  display: flex;
  gap: 8px;
}
.founder__social {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #E5E9EE;
  background: #FFFFFF;
  color: #5B6B7E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.founder__social:hover {
  background: #25759c;
  border-color: #25759c;
  color: #fff;
}
.founder__quote {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -1.1px;
  color: #0B1220;
  margin: 12px 0 24px;
  text-wrap: balance;
}
.founder__bio {
  font-size: 16.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 18px;
}
/* Az utolsó bekezdés alatt már a mutatók elválasztója ad levegőt. */
.founder__bio:last-of-type {
  margin-bottom: 0;
}
.founder__bio a {
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
}
.founder__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #E5E9EE;
}
.founder__stats .stat__value {
  font-size: 28px;
  letter-spacing: -0.8px;
}
.mission__note {
  max-width: 760px;
  margin: 36px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #2A3340;
  text-wrap: pretty;
}
/* A fejléc és a kiemelt szám egy sorban áll: a bevezető a cím ALATT marad,
   a kiemelt szám pedig mellettük, jobbra, saját kártyán. Kiemelt szám nélkül
   nincs mi mellé állni, ezért a fejléc teljes szélességben marad. */
.team__intro {
  margin-bottom: 48px;
}
.team__intro--aside {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  align-items: start;
}
/* A `:not(--split)` alapszabály 720px-en és 24px alsó margón tartja a
   bevezetőt; itt a kártya melletti oszlop szabja meg a szélességet, az alsó
   térközt pedig a burkoló adja. A hosszabb szelektor a specifikusság miatt
   kell, nem díszítés. */
.team__intro .section-head:not(.section-head--split) .section-head__lead {
  max-width: 640px;
  margin-bottom: 0;
}
.team__highlight {
  background: #F7F9FB;
  border-radius: 12px;
  padding: 24px 28px;
}
.team__highlight .stat__value {
  font-size: 44px;
  letter-spacing: -1.5px;
  line-height: 1;
}
.team__highlight .stat__label {
  margin-top: 6px;
}
.team__highlight-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #5B6B7E;
  margin: 12px 0 0;
}
.team__photo {
  height: 320px;
  min-height: 0;
  border: 1px solid #E5E9EE;
  margin-bottom: 36px;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.team__member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.team__avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 12px;
  border: 1px solid #E5E9EE;
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: 1px;
}
/* A név és a pozíció a designban szorosan egymás alatt ül; a téma 1.6-os
   alap sorköze itt szétnyitná őket. */
.team__name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: #0B1220;
  letter-spacing: -0.2px;
}
.team__role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
/* Az összefoglaló kártya ugyanaz a négyzet, más felülettel: sraffozás
   helyett világoskék mező, benne a szám. */
.team__more {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid #E8F2F8;
  background: #F4F9FC;
  color: #25759c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -1px;
}
.team__more span {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  margin-top: 4px;
}
.contact-hero {
  background: #FFFFFF;
  /* A design felül ad több levegőt, és zárt vonallal választja el az űrlaptól. */
  padding: 64px 0 56px;
  border-bottom: 1px solid #E5E9EE;
}
.contact-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.contact-hero__title {
  font-size: 58px;
  letter-spacing: -2px;
  line-height: 1.04;
  margin-top: 22px;
}
.contact-hero__lead {
  font-size: 18.5px;
  line-height: 1.6;
  max-width: 600px;
}
.contact-hero__lead strong {
  color: #0B1220;
  font-weight: 600;
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: end;
}
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #F4F9FC;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-method:hover {
  border-color: #3DA5D9;
  box-shadow: 0 12px 30px -12px rgba(11, 18, 32, 0.15);
}
.contact-method__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  /* A kártya maga halványkék, ezért az ikon FEHÉR csempén ül — fordítva,
     mint a szekciókon belüli ikonok. */
  background: #FFFFFF;
  border: 1px solid #E8F2F8;
  color: #25759c;
}
.contact-method__body {
  display: flex;
  flex-direction: column;
}
.contact-method__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
}
.contact-method__value {
  font-size: 17px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 4px 0 2px;
}
.contact-method__note {
  font-size: 13px;
  color: #5B6B7E;
}
.contact-form__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Az űrlap a designban kiemelt lap: fehér doboz a meleg szürke felületen. */
.contact-form {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 24px 60px -36px rgba(11, 18, 32, 0.22);
}
/* A lapon belül a felirat sötétebb kék — a szürke elveszne a fehér mezőn. */
.contact-form > .eyebrow {
  color: #1F6589;
}
.contact-form__title {
  font-weight: 700;
  font-size: 30px;
  color: #0B1220;
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 12px 0 8px;
}
.contact-form__lead {
  font-size: 15px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 0 0 28px;
}
.contact-form__req {
  color: #25759c;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form__label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: #2A3340;
  /* Egysoros címke: a téma 1.6-os alapja mezőnként ~5px-t adna az űrlaphoz. */
  line-height: 1.4;
}
.form__input {
  width: 100%;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: #0B1220;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form__input::placeholder {
  color: #636d79;
}
.form__input:focus {
  outline: none;
  border-color: #25759c;
  box-shadow: 0 0 0 3px rgba(40, 127, 170, 0.12);
}
.form__textarea {
  resize: vertical;
  min-height: 128px;
  line-height: 1.35;
}
/* A rejtett csapdamező: a robot kitölti, az ember nem is látja. Nem
   display:none, mert azt a robotok egy része felismeri és kihagyja. */
.form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: #5B6B7E;
  line-height: 1.55;
  margin-top: 2px;
}
.form__check input {
  margin-top: 1px;
  accent-color: #25759c;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.form__footer {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.form__hint {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #5B6B7E;
}
/* A zöld pont a designban a válaszidő „él" jelzése — nem dekoráció, ezért
   marad, de tartalom nélküli, tisztán vizuális elem. */
.form__hint::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fc8a9;
  flex-shrink: 0;
}
/* ---------------------------------------------------------------------------
   Contact Form 7
   ---------------------------------------------------------------------------
   Az űrlapot a CF7 adja (lásd inc/forms.php), a sablonja a design osztályait
   viseli — a mezők tehát a fenti `form__*` szabályokból élnek. Ami itt áll, az
   a bővítmény SAJÁT burkolóit illeszti a rácsba: minden vezérlő köré kerül egy
   span, a jelölőnégyzet köré pedig három is.
--------------------------------------------------------------------------- */
.form__field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
/* A REJTETT MEZŐK BURKOLÓJA (M360-252). A CF7 6.x a saját technikai mezőit
   (`_wpcf7`, `_wpcf7_version`, `_wpcf7_locale`, …) egy `fieldset`-be csomagolja.
   A mezők `type="hidden"`-ek, tehát nem látszanak — a fieldset viszont igen: a
   böngésző alapértelmezett kerete és belső margója egy üres, keretes dobozt
   rajzolt minden űrlap első mezője FÖLÉ. Korábban sima `div` volt, aminek
   nincs saját kerete, ezért nem volt mit nullázni.

   A doboz nullázása és nem `display: none`: így nem a MEZŐKET rejtjük el
   (azok maguktól rejtettek), csak a burkolót nem rajzoljuk ki. Az űrlap
   beküldése így biztosan érintetlen marad. */
.wpcf7 .hidden-fields-container {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* A mező alatti hibaüzenet. A bővítmény alapból 1em-es, fekete-piros sort ad;
   a designban ez a méret a súgó-szövegé. */
.form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #C0392B;
}
.form .form__input.wpcf7-not-valid {
  border-color: #C0392B;
}
/* A hozzájárulás-jelölő. A CF7 `acceptance` mezője három burkot ad (`wrap` →
   `form-control` → `list-item`), a designban viszont egyetlen sor a jelölő és a
   szöveg — ezért a legbelső címke viszi az elrendezést, és ezért nullázzuk a
   bővítmény listaelem-margóját. */
.form__check .wpcf7-form-control-wrap,
.form__check .wpcf7-acceptance {
  display: block;
  width: 100%;
}
.form__check .wpcf7-list-item {
  display: block;
  margin: 0;
}
.form__check label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
/* A beküldés utáni válasz. A bővítmény 2px-es kék kerettel és 2em-es margóval
   írja ki; a szelektorok azért ilyen hosszúak, mert az övéit kell felülírniuk
   (`.wpcf7 form .wpcf7-response-output`), nem azért, mert a design kívánná. */
.wpcf7 form.form .wpcf7-response-output {
  margin: 4px 0 0;
  padding: 12px 16px;
  border: 1px solid #E5E9EE;
  border-radius: 10px;
  background: #F7F9FB;
  font-size: 14px;
  line-height: 1.5;
  color: #2A3340;
}
.wpcf7 form.form.sent .wpcf7-response-output {
  border-color: #7fc8a9;
  background: #F1FAF5;
}
.wpcf7 form.form.invalid .wpcf7-response-output,
.wpcf7 form.form.unaccepted .wpcf7-response-output {
  border-color: #E4B363;
  background: #FDF7EC;
}
.wpcf7 form.form.failed .wpcf7-response-output,
.wpcf7 form.form.aborted .wpcf7-response-output,
.wpcf7 form.form.spam .wpcf7-response-output {
  border-color: #C0392B;
  background: #FCF1EF;
}
/* Szerkesztőnek szóló üzenet a hiányzó űrlap helyén. A látogató ezt nem látja:
   szaggatott keret, mert nem a designhoz tartozik — dolga van vele valakinek. */
.form-notice {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed #C7D2DD;
  border-radius: 10px;
  background: #F7F9FB;
  font-size: 14px;
  line-height: 1.5;
  color: #5B6B7E;
}
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.next-steps {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 20px;
  padding: 32px;
}
/* A lépéssor címe a designban FELIRAT (mono, verzál), nem kártyacím. */
.next-steps__title {
  display: block;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  margin-bottom: 22px;
}
.next-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.next-step {
  display: flex;
  gap: 16px;
}
.next-step__num {
  flex-shrink: 0;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  color: #25759c;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
}
.next-step__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}
.next-step__head {
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.2px;
  line-height: 1.35;
  color: #0B1220;
}
.next-step__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #5B6B7E;
}
.contact-note {
  background: #0B1220;
  color: #fff;
  border-radius: 20px;
  padding: 32px;
}
.contact-note__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.contact-note__avatar {
  width: 54px;
  height: 54px;
  min-height: 0;
  padding: 0;
  flex-shrink: 0;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}
.contact-note__name {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}
.contact-note__role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.contact-note__quote {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}
/* A designban a hivatkozás FEHÉR, nem márkakék: a sötét lapon a kék szín a
   szöveg fölé emelné, itt viszont a záró lépés, nem a hangsúly. */
.contact-note__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
}
.contact-note__link:hover {
  color: #3DA5D9;
}
/* Két hasáb: balra a szöveges oldal, jobbra a térkép. A hasábok FÜGGŐLEGESEN
   KÖZÉPRE igazítottak — a bal oldal alacsonyabb, mint a 480px-es térkép. */
.office {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.office__title {
  font-size: 38px;
  letter-spacing: -1.2px;
  line-height: 1.12;
  margin: 12px 0 28px;
}
.office__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
/* Nem kártya, hanem adatsor: az ikon a szöveg MELLETT áll, saját doboz-keret
   nélkül — a szekció fehér felülete a háttér. */
.office-card {
  display: flex;
  gap: 14px;
}
.office-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  color: #25759c;
}
.office-card__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.office-card__value {
  font-size: 15px;
  font-weight: 500;
  color: #0B1220;
  line-height: 1.45;
  margin-top: 5px;
}
.office__map {
  height: 480px;
  min-height: 0;
  border-radius: 18px;
  border: 1px solid #E5E9EE;
  box-shadow: 0 24px 60px -36px rgba(11, 18, 32, 0.3);
}
.office__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* Két hasáb: balra a bevezető, jobbra a hivatalos adatok lapja. */
.company-data {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}
.company-data__title {
  font-size: 30px;
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 12px 0 14px;
}
.company-data__intro .section-head__lead {
  font-size: 15.5px;
  color: #5B6B7E;
  max-width: 360px;
}
.company-data__table {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  overflow: hidden;
}
/* A sorokat elválasztó vonal FELÜL van, így az első sor és a lap teteje
   között nem duplázódik a keret. */
.company-data__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  padding: 20px 28px;
  border-top: 1px solid #EEF1F4;
}
.company-data__row:first-child {
  border-top: none;
}
.company-data__key {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  align-self: center;
}
.company-data__val {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.2px;
  /* Egysoros érték: a téma 1.6-os alapja soronként ~5px-t adna a laphoz. */
  line-height: normal;
}
.ref-hero {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E9EE;
  padding: 52px 0 64px;
}
/* A Referenciák oldal saját sávszélessége. A design MINDEN tartalmi szekciót
   1180px-es konténerben tart — nem a téma 1280-asában, és nem az 1320-as
   `container--wide`-ban. A `.ref-hero__inner` itt korábban `1280px - 100px`-et
   írt: az érvénytelen CSS, a böngésző eldobta, és a hero csendben a
   `container` 1280-asára esett vissza. */
.ref-hero__inner,
.ref-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #E8F2F8;
  font-size: 13px;
  font-weight: 500;
  color: #1F6589;
}
.rating-badge svg {
  flex-shrink: 0;
}
.ref-hero__title {
  font-size: 60px;
  letter-spacing: -2.2px;
  line-height: 1.02;
  margin-top: 22px;
}
.ref-hero__lead {
  max-width: 600px;
  font-size: 20px;
}
/* A designban a kiemelés csak vastag: se más színt, se 600-as súlyt nem kap.
   Az elszínezett, félkövér változat a bevezetőt kétszínűre törte. */
.ref-hero__lead strong {
  color: inherit;
  font-weight: 700;
}
.ref-hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: end;
}
.stat-box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #E5E9EE;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  overflow: hidden;
}
.stat-box {
  background: #FFFFFF;
  padding: 24px 26px;
}
.stat-box__value {
  font-weight: 700;
  font-size: 34px;
  color: #0B1220;
  letter-spacing: -1.2px;
  line-height: 1;
}
.stat-box__label {
  font-size: 13px;
  color: #5B6B7E;
  margin-top: 7px;
}
.clients__head {
  max-width: 640px;
  margin-bottom: 32px;
}
.section-head__title--38 {
  font-size: 38px;
  letter-spacing: -1.4px;
  margin: 12px 0 14px;
}
.clients__lead {
  font-size: 16px;
  color: #5B6B7E;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #2A3340;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.filter-chip:hover {
  border-color: #3DA5D9;
  color: #1F6589;
}
.filter-chip__count {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  opacity: 0.7;
}
.filter-chip--active {
  background: #25759c;
  color: #fff;
  border-color: #25759c;
}
.filter-chip--active:hover {
  background: #1F6589;
  color: #fff;
  border-color: #1F6589;
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #E5E9EE;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  overflow: hidden;
}
.logo-cell {
  background: #FFFFFF;
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px;
  text-align: center;
  transition: background-color 0.15s ease;
}
.logo-cell:hover {
  background: #F7F9FB;
}
.logo-cell__name {
  color: #2A3340;
  opacity: 0.62;
  line-height: 1.2;
  font-size: 19px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.5px;
}
.logo-cell__name--1 {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.5px;
}
.logo-cell__name--2 {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.5px;
}
.logo-cell__name--3 {
  font-family: Georgia, serif;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0.5px;
  font-style: italic;
}
.logo-cell__name--4 {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.logo-cell__name--5 {
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.5px;
}
.logo-cell__name--6 {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0;
}
.logo-cell__name--7 {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.5px;
}
.logo-cell__name--8 {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.5px;
}
.logo-cell__name--9 {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: -0.5px;
}
.logo-cell__name--10 {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.logo-cell__name--11 {
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 14.5px;
  letter-spacing: 0.5px;
}
.logo-cell__name--12 {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: 0;
}
.logo-cell__name--13 {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 16.5px;
  letter-spacing: 0.5px;
}
.logo-cell__name--14 {
  font-family: Georgia, serif;
  font-weight: 300;
  font-size: 14.5px;
  letter-spacing: 0.5px;
  font-style: italic;
}
.logo-cell__name--15 {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 0.5px;
}
.logo-cell__name--16 {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 0.5px;
}
.logo-cell__name--17 {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -0.5px;
}
.logo-cell__name--18 {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
/* A designban a záró megjegyzés a rács alatt KÖZÉPEN áll, halványabban. */
.clients__more {
  margin: 22px 0 0;
  font-size: 13px;
  color: #636d79;
  text-align: center;
}
.ref-closing {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.ref-quote {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ref-quote__mark {
  display: block;
}
.ref-quote__text {
  font-size: 23px;
  line-height: 1.5;
  color: #0B1220;
  letter-spacing: -0.4px;
  font-weight: 500;
  margin: 18px 0 28px;
}
.ref-quote__author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ref-quote__avatar {
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  flex-shrink: 0;
  font-size: 9px;
}
/* Egysoros név: a designban `normal` a sormagasság. A téma 1.6-os alapja itt
   is 4-5px néma csúszást adott — ugyanaz az eset, mint a `.eyebrow`-nál. */
.ref-quote__name {
  font-weight: 600;
  font-size: 15px;
  color: #0B1220;
  line-height: normal;
}
.ref-quote__role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.ref-founder {
  background: #0B1220;
  color: #fff;
  border-radius: 18px;
  padding: 36px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ref-founder__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.ref-founder__avatar {
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  flex-shrink: 0;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
}
.ref-founder__name {
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
}
.ref-founder__role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.ref-founder__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 22px;
}
/* A designban a két elérhetőség-gomb EGYMÁS ALATT, teljes szélességben áll:
   a kártya keskeny, egy sorban a telefonszám mellé nem fér ki az e-mail cím. */
.ref-founder__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.ref-founder__actions .btn {
  width: 100%;
  justify-content: center;
}
/* Elérhetőség-ikon: a designban a felirat ELŐTT áll, és 16px — a gombok
   alap nyíl-ikonja utána jön és nagyobb. */
.ref-founder__actions .btn svg {
  order: -1;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.svc-hero {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E9EE;
  /* Mind a HÁROM nyers export (Reklámügynökség, SEO, AI SEO) ugyanezt írja —
     a 48/64 az átirat tévedése volt, nem oldalankénti eltérés. */
  padding: 64px 0 72px;
}
.svc-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.svc-hero__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}
.svc-hero .tag {
  margin-bottom: 26px;
}
.svc-hero .hero__actions {
  margin-top: 32px;
}
.svc-hero__title {
  font-size: 56px;
  letter-spacing: -1.8px;
  line-height: 1.05;
  margin-top: 0;
}
.svc-hero__lead {
  max-width: 640px;
}
.svc-hero__stats {
  border-top: none;
  margin-top: 36px;
  padding-top: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px;
  justify-content: start;
}
.summary-card {
  background: #F4F9FC;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
  position: sticky;
  top: 24px;
}
.summary-card__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
}
.summary-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #2A3340;
  margin: 14px 0 22px;
}
.summary-card__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.summary-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: #0B1220;
}
.summary-card__item svg {
  flex-shrink: 0;
}
.summary-card__price {
  border-top: 1px solid #E5E9EE;
  padding-top: 18px;
  margin-bottom: 18px;
}
.summary-card__price-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
  margin-bottom: 4px;
}
.summary-card__price-value {
  font-weight: 700;
  font-size: 28px;
  color: #0B1220;
  letter-spacing: -0.8px;
}
/* Az EGYSÉG halvány, az összeg nem. A statikus handoffban az összeg csupasz
   szövegcsomópont, tehát a `span` egyedül az egységet jelentette; a blokkban
   mindkettő szerkeszthető mező, ezért a szomszéd-szelektor a hű fordítás. */
.summary-card__price-value span + span {
  font-size: 15px;
  font-weight: 500;
  color: #5B6B7E;
  /* A handoffban az összeg és az egység közt szövegköz áll; két szomszédos
     elemnél az elveszik. */
  margin-left: 4px;
}
/* Ár és gomb EGY SORBAN. Az újabb látványtervekben a kártya lába nem
   egymás alá rendezi a kettőt, hanem egymás mellé — a `price` mód marad a
   handoff szerinti oszlopos alak, ez a variáns a soros. */
.summary-card__foot--price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #E5E9EE;
  padding-top: 18px;
}
.summary-card__foot--price .summary-card__price {
  border-top: none;
  padding-top: 0;
  margin-bottom: 0;
}
.summary-card__foot--price .summary-card__price-value {
  font-size: 24px;
  white-space: nowrap;
}
.svc-logos__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
}
.logo-row .logo-cell__name {
  opacity: 0.5;
}
.qa__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.qa__eyebrow-icon {
  flex-shrink: 0;
}
.qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.qa-item {
  padding-top: 18px;
  border-top: 2px solid #0B1220;
}
.qa-item__q {
  font-weight: 600;
  font-size: 16px;
  color: #0B1220;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.qa-item__a {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.why-seo {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 72px;
  align-items: start;
}
.why-seo__title {
  font-weight: 700;
  font-size: 38px;
  color: #0B1220;
  letter-spacing: -1.1px;
  line-height: 1.12;
  margin: 12px 0 24px;
  text-wrap: balance;
}
.why-seo__p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 18px;
}
.why-seo__p:last-child {
  margin-bottom: 0;
}
.why-seo__p strong {
  color: #0B1220;
  font-weight: 600;
}
.pillar-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 32px;
}
.pillar-card__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
}
.pillar-card__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pillar-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pillar-row__num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #F4F9FC;
  color: #1F6589;
  font-weight: 700;
  font-size: 15px;
}
.pillar-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pillar-row__title {
  font-weight: 600;
  font-size: 16px;
  color: #0B1220;
}
.pillar-row__desc {
  font-size: 14px;
  line-height: 1.5;
  color: #5B6B7E;
}
.pillar-card__note {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid #E5E9EE;
  font-size: 14px;
  line-height: 1.55;
  color: #2A3340;
}
.svc-areas__label {
  display: block;
  margin-bottom: 20px;
}
.svc-areas__label--sub {
  margin-top: 48px;
}
.feature-grid,
.subfeature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feature-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
}
/* A „MIT TARTALMAZ" KÁRTYÁI AZ EGÉR ALATT HALVÁNY KÉKRE VÁLTANAK (M360-245).
   A két érték nem új szín: pontosan az, amit a `feature-card--tint` visel,
   vagyis a „Kiemelt (márkaszínű) kártya" változat. A hover tehát azt mutatja
   meg, ahogy a kártya kiemelve nézne ki.

   A MÁR KIEMELT KÁRTYA KIMARAD: rajta a hover semmit nem változtatna, és
   a `:not()` nélkül a szabály ugyanazt az értéket írná rá még egyszer.

   Emelés és árnyék nincs: ezek a kártyák nem hivatkozások, a szolgáltatás
   tartalmát sorolják. A háttér-váltás annyit mond, hogy „ezt nézed", nem
   azt, hogy „ide kattints". */
.feature-card,
.subfeature-card {
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.feature-card:not(.feature-card--tint):hover,
.subfeature-card:hover {
  background: #F4F9FC;
  border-color: #D6E7F2;
}
.feature-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
}
.feature-card__title {
  font-weight: 600;
  font-size: 19px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.4px;
}
.feature-card__tag {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  flex-shrink: 0;
}
.feature-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 20px;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.feature-list__item {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: #0B1220;
  line-height: 1.4;
}
.feature-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E8F2F8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' stroke='%2325759C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.feature-card__note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #E5E9EE;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #487d65;
}
.subfeature-card {
  background: #F7F9FB;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 26px;
}
.subfeature-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.subfeature-card__title {
  font-weight: 600;
  font-size: 17px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.subfeature-card__tag {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  flex-shrink: 0;
}
.subfeature-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 18px;
}
.badge-new {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  background: #487d65;
  padding: 2px 6px;
  border-radius: 6px;
}
.rank {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
}
.rank__title {
  font-weight: 700;
  font-size: 36px;
  color: #0B1220;
  letter-spacing: -1.1px;
  line-height: 1.12;
  margin: 12px 0 16px;
  text-wrap: balance;
}
.rank__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 0;
}
.rank__note {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #636d79;
  margin: 24px 0 0;
}
.rank__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rank-factor {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 18px 22px;
}
.rank-factor__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}
.rank-factor__title {
  font-weight: 600;
  font-size: 16.5px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.2px;
}
.rank-factor__score {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #1F6589;
  flex-shrink: 0;
}
.rank-bar {
  height: 6px;
  background: #E8F2F8;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.rank-bar__fill {
  display: block;
  height: 100%;
  background: #25759c;
  border-radius: 999px;
}
.rank-factor__desc {
  font-size: 14px;
  line-height: 1.5;
  color: #5B6B7E;
  margin: 0;
}
.seo-process__head {
  max-width: 640px;
  margin-bottom: 48px;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 32px;
}
/* A NEM KIEMELT ÁR-KÁRTYA MEGEMELKEDIK AZ EGÉR ALATT (M360-245). Pontosan az
   az effekt, ami a Marketing csomagok oldal `pkgcard` elemein áll: márkaszínű
   keret, lágy vetett árnyék, két pixel emelés. Nem új mozdulat, hanem
   ugyanannak a mozdulatnak a második helye.

   A KIEMELT KÁRTYA KIMARAD. Az már sötét és kiemelt, tehát nincs mit
   megemelni rajta: ha ő is mozdulna, a kiemelés elveszítené a jelentését. */
.price-card:not(.price-card--featured) {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.price-card:not(.price-card--featured):hover {
  border-color: #25759c;
  box-shadow: 0 18px 40px -22px rgba(11, 18, 32, 0.28);
  transform: translateY(-2px);
}
.price-card--featured {
  background: #0B1220;
  border-color: #0B1220;
  color: #fff;
}
.price-card__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #0B1220;
  background: #e8b756;
  padding: 4px 10px;
  border-radius: 999px;
}
.price-card__kicker {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.price-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #E8F2F8;
  color: #25759c;
  margin-bottom: 18px;
}
.price-card__icon--light {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.price-card--featured .price-card__kicker {
  color: rgba(255, 255, 255, 0.55);
}
.price-card__name {
  font-weight: 600;
  font-size: 21px;
  margin: 12px 0 4px;
  letter-spacing: -0.3px;
  color: inherit;
}
.price-card__price {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -1px;
  color: inherit;
  margin-bottom: 14px;
}
/* AZ ÁR MÉRTÉKEGYSÉGE SAJÁT SORBAN ÁLL (M360-236). A szerkesztő az összeg mögé
   írja, egy `<span>`-be — „150 000 Ft <span>egyszeri</span>" —, tehát az alak
   ugyanaz marad, csak a tördelés változik. Sorban hagyva a hossza dönti el,
   hova kerül: a rövid mértékegység még odafért az összeg mellé, a hosszabb
   viszont magától tört, és a három kártya nem egy vonalon állt.

   `display: block` a `line-height`-tal együtt kell: a 30px-es szülőtől
   örökölt sormagasság alatt a 14px-es sor közel akkora hézagot nyitna, mint
   maga az ár. */
.price-card__price span {
  display: block;
  margin-top: 2px;
  line-height: 1.3;
  font-size: 14px;
  font-weight: 500;
  color: #5B6B7E;
  letter-spacing: 0;
}
.price-card--featured .price-card__price span {
  color: rgba(255, 255, 255, 0.6);
}
/* A csomag-oldalak keret-pirulája az ár alatt. Csak akkor van a kártyán, ha a
   szerkesztő beírta, a szolgáltatás-oldalakon nincs ilyen. */
.price-card__cap {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 8px 14px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: #E8F2F8;
  color: #1F6285;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.price-card--featured .price-card__cap {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.price-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 22px;
}
.price-card--featured .price-card__desc {
  color: rgba(255, 255, 255, 0.7);
}
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.price-list__item {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: #0B1220;
  line-height: 1.4;
}
.price-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E8F2F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' stroke='%2325759C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.price-card--featured .price-list__item {
  color: rgba(255, 255, 255, 0.9);
}
.price-card--featured .price-list__item::before {
  background: rgba(255, 255, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.price-note {
  margin: 28px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: #5B6B7E;
}
.reason-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
/* Csupasz sorszám: a designban több érv-rácson a szám háttér és keret nélkül,
   önmagában áll. A doboz a kártya belső ritmusát is átírja, ezért a méret és a
   margó is visszaáll. */
.reason-grid--plain-num .reason-card__num {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
  font-size: 12px;
  letter-spacing: 1.4px;
  margin-bottom: 14px;
}
.link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.link-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
.link-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: #0B1220;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.link-pill:hover {
  border-color: #3DA5D9;
  color: #1F6589;
}
.link-pill__arrow {
  color: #636d79;
  transition: transform 0.15s ease;
}
.link-pill:hover .link-pill__arrow {
  color: #25759c;
  transform: translateX(3px);
}
.svc-contact {
  background: #051538;
  color: #fff;
  padding: 88px 0;
}
.svc-contact__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.svc-contact__title {
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 14px 0 16px;
}
.svc-contact__lead {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 28px;
  max-width: 480px;
}
.svc-contact__methods {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.svc-contact__method {
  display: block;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.svc-contact__method:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
}
.svc-contact__method-label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}
.svc-contact__method-value {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.2px;
}
.svc-contact__method-sub {
  display: block;
  font-size: 13px;
  color: #3DA5D9;
  margin-top: 4px;
}
.svc-contact__form-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 32px;
  color: #0B1220;
}
.svc-contact__form-title {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
}
.svc-contact__form-lead {
  font-weight: 600;
  font-size: 20px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 8px 0 22px;
}
.faq__help-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #5B6B7E;
}
.summary-card__foot {
  border-top: 1px solid #E5E9EE;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.summary-card__foot-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: #5B6B7E;
}
.summary-card__foot-btn {
  flex-shrink: 0;
}
.pillar-card--dark {
  background: #0B1220;
  border-color: #0B1220;
  color: #fff;
}
.pillar-card--dark .pillar-card__eyebrow {
  color: rgba(255, 255, 255, 0.5);
}
.pillar-card--dark .pillar-row__num {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pillar-card--dark .pillar-row__title {
  color: #fff;
}
.pillar-card--dark .pillar-row__desc {
  color: rgba(255, 255, 255, 0.65);
}
.toolset {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* Az eszköztár fejléce. A közös osztott fejléc 540px-re fogja a bevezetőt, a
   design viszont a teljes jobb hasábot kitölti vele — ezért kap a szekció saját
   módosítót a közös szabály átírása helyett. */
.toolset-head {
  margin-bottom: 52px;
}
.toolset-head .section-head__title {
  text-wrap: wrap;
}
.toolset-head .section-head__lead {
  max-width: none;
}
.toolset-cat__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.toolset-cat__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #F4F9FC;
  color: #25759c;
}
.toolset-cat__name {
  font-weight: 700;
  font-size: 21px;
  color: #0B1220;
  letter-spacing: -0.4px;
  margin: 0;
  flex-shrink: 0;
}
.toolset-cat__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
  flex-shrink: 0;
}
.toolset-cat__rule {
  flex: 1;
  height: 1px;
  background: #E5E9EE;
  min-width: 24px;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  min-height: 168px;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tool-card:hover {
  border-color: #3DA5D9;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(11, 18, 32, 0.15);
}
.tool-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.tool-card__title {
  font-weight: 600;
  font-size: 17.5px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.tool-card__arrow {
  color: #636d79;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.tool-card:hover .tool-card__arrow {
  color: #25759c;
  transform: translateX(3px);
}
.tool-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.toolset__cta {
  margin-top: 48px;
  text-align: center;
}
.ad-process {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
}
.ad-process__title {
  font-weight: 700;
  font-size: 34px;
  color: #0B1220;
  letter-spacing: -1.1px;
  line-height: 1.12;
  margin: 12px 0 16px;
}
.ad-process__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 0;
}
.ad-process__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.proc-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 24px;
}
.proc-card__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #636d79;
  display: block;
}
.proc-card__title {
  font-weight: 600;
  font-size: 17px;
  color: #0B1220;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin: 10px 0 8px;
}
.proc-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
/* Az ügynökség-típusok fejléce a designban BALRA zárt és keskeny, nem középre
   zárt — a saját módosító ezt tartja a közös fejléc-osztály átírása nélkül. */
.agency-head {
  max-width: 680px;
  margin-bottom: 48px;
}
/* A design nem egyensúlyozza a sorokat: a cím a keskeny hasáb szélén tör. */
.agency-head .section-head__title {
  text-wrap: wrap;
}
.agency-head .section-head__lead {
  font-size: 16.5px;
  max-width: none;
  margin: 16px 0 0;
}
.agency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.agency-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 34px 32px;
}
/* A kiemelt kártya a jelvénynek ad helyet felül, ezért magasabb a bélése. */
.agency-card--featured {
  background: #0B1220;
  border-color: #0B1220;
  color: #fff;
  padding: 40px 32px;
  box-shadow: 0 30px 60px -24px rgba(11, 18, 32, 0.4);
}
.agency-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #0B1220;
  background: #e8b756;
  padding: 4px 10px;
  border-radius: 999px;
}
.agency-card__kicker {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
}
.agency-card--featured .agency-card__kicker {
  color: rgba(255, 255, 255, 0.5);
}
.agency-card__title {
  font-weight: 700;
  font-size: 23px;
  color: #0B1220;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 12px 0 14px;
}
.agency-card--featured .agency-card__title {
  color: #fff;
}
.agency-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 0 0 24px;
}
.agency-card--featured .agency-card__desc {
  color: rgba(255, 255, 255, 0.72);
}
/* A jellemzők a kártya ALJÁRA ülnek (`margin-top: auto`): a designban a
   különböző hosszúságú leírások alatt a listák egy vonalban indulnak. */
.agency-card__points {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #EEF1F4;
}
.agency-card--featured .agency-card__points {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.agency-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #2A3340;
}
.agency-point svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.agency-card--featured .agency-point {
  color: rgba(255, 255, 255, 0.85);
}
.agency-card--featured .agency-point svg path {
  stroke: #fff;
}
.statement {
  max-width: 820px;
  margin: 0;
  text-align: left;
}
.statement__title {
  font-weight: 700;
  font-size: 60px;
  color: #0B1220;
  letter-spacing: -2.2px;
  line-height: 1.02;
  margin: 16px 0 28px;
}
.statement__title .statement__accent {
  color: #25759c;
}
.statement__p {
  font-size: 19px;
  line-height: 1.6;
  color: #2A3340;
  margin: 0 0 16px;
  max-width: 680px;
}
.statement__p:last-child {
  margin-bottom: 0;
}
.statement__p strong {
  color: #0B1220;
}
.ai-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40, 127, 170, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.ai-glow--tr {
  top: -120px;
  right: -80px;
}
.ai-glow--bl {
  bottom: -140px;
  left: -60px;
}
.svc-hero__title--58 {
  font-size: 58px;
  letter-spacing: -1.8px;
  line-height: 1.04;
}
.tag--ai {
  background: #E8F2F8;
  padding: 6px 12px;
}
.tag__year {
  padding: 2px 8px;
  background: #25759c;
  color: #fff;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 999px;
}
.tag__text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: #1F6589;
}
.summary-card__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.summary-card__kicker .summary-card__eyebrow {
  margin: 0;
}
.summary-card__cta {
  border-top: 1px solid #E8F2F8;
  padding-top: 20px;
}
.qa-grid--plain {
  gap: 24px;
}
.qa-grid--plain .qa-item {
  border-top: none;
  padding-top: 0;
}
.qa-grid--plain .qa-item__q {
  font-size: 15.5px;
}
/* A sima felület tömörebb sávban ül: a design 56px-es szekciót ír, alul
   elválasztó vonallal — nem a 96px-es alapértelmezett szekció-sávot. */
.qa--plain {
  padding: 56px 0;
  border-bottom: 1px solid #E5E9EE;
}
.qa--plain .qa__eyebrow {
  margin-bottom: 24px;
}
.pillar-row__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #F4F9FC;
}
.ai-platforms {
  background: #0B1220;
  color: #fff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.ai-platforms__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  position: relative;
}
.ai-platforms__head {
  max-width: 720px;
  margin-bottom: 52px;
}
.ai-platforms__title {
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -1.4px;
  line-height: 1.08;
  margin: 0 0 18px;
}
.ai-platforms__lead {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.platform-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 26px;
}
.platform-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.platform-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
}
.platform-card__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.platform-card__title {
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
}
.platform-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}
.platform-card--cta {
  background: #25759c;
  border-color: #25759c;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.platform-card--cta .platform-card__title {
  font-size: 18px;
}
.platform-card--cta .platform-card__desc {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 18px;
}
.buildblock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.buildblock {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 26px;
}
.buildblock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
/* JELÖLŐ NÉLKÜLI VÁLTOZAT (M360-235). A fejléc dobozában ilyenkor legfeljebb a
   címke marad; ha az is üres, a doboz a 14px-es margóját akkor is levinné, és
   a cím fölött megmagyarázhatatlan hézag nyílna. */
.buildblock__head:empty {
  display: none;
}
.buildblock__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #F4F9FC;
  display: grid;
  place-items: center;
}
/* A címke kékje ugyanaz, ami a menü AI-chipjéé (.chip): egy márkaszín, nem
   kettő. A korábbi zöld a látványterv egyetlen pontján fordult elő. */
.buildblock__badge {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  background: #25759c;
  padding: 3px 8px;
  border-radius: 6px;
}
.buildblock__title {
  font-weight: 600;
  font-size: 18px;
  color: #0B1220;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.buildblock__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}

/* ── A kártya-fejléc EGY SORBAN álló változata (M360-235) ────────────────
   A markup ugyanaz marad mind a három elrendezésben: a jelölő, a cím és a
   leírás testvérek. Csak a tengely fordul. Ehhez rács kell, nem flex-sor: a
   leírásnak a KÖVETKEZŐ sorban, teljes szélességben kell állnia, és egy
   flex-sorban ezt csak egy plusz burkolóval lehetne elérni — az viszont a
   másik két elrendezés kimenetét is átírná.

   Ugyanaz a három szabály áll mind a három kártyán; a `column-gap` és a
   leírás fölötti hézag a kártya saját ritmusához igazodik. */
.buildblock--inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}
.buildblock--inline .buildblock__head {
  margin-bottom: 0;
  /* Egy sorban a címke a jelölő MELLETT áll, nem a kártya túlsó szélén: a
     `space-between` ott a keskeny első hasábon belül szórná szét a kettőt. */
  justify-content: flex-start;
  gap: 10px;
}
.buildblock--inline .buildblock__title {
  margin: 0;
}
.buildblock--inline .buildblock__desc {
  grid-column: 1 / -1;
  margin-top: 12px;
}
.compare {
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  overflow: hidden;
}
.compare__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
  border-bottom: 1px solid #E5E9EE;
}
.compare__row:last-child {
  border-bottom: none;
}
.compare__row--head {
  background: #FAFAF7;
}
.compare__cell {
  padding: 18px 24px;
}
.compare__cell + .compare__cell {
  border-left: 1px solid #E5E9EE;
}
.compare__cell--ai {
  background: #F4F9FC;
}
.compare__th {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.compare__th--col {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #2A3340;
}
.compare__key {
  font-weight: 600;
  font-size: 15px;
  color: #0B1220;
}
.compare__val {
  font-size: 14.5px;
  line-height: 1.5;
  color: #5B6B7E;
}
.compare__val--ai {
  color: #2A3340;
}
.aiseo-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.expert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.expert-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 24px;
}
.expert-card__portrait {
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  height: 196px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
}
.expert-card__name {
  font-weight: 600;
  font-size: 18px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}
.expert-card__role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
  margin-bottom: 12px;
}
.expert-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.pd-tier .btn {
  /* A design ársáv-gombja testesebb, mint a sitewide `btn--lg`. */
  padding: 16px 30px;
  font-size: 15px;
}
.result-section--dark {
  background: #0B1220;
  color: #fff;
  /* A design 96px-es sávot ír; a blokk `section--lg`-t (104) visz. */
  padding: 96px 0;
}
/* Halk változat — a Referenciák oldal ezt használja. Ott a szekció nem a lap
   főattrakciója, hanem a logófal felvezetése: keskenyebb sávban áll, kisebb a
   címe, a hangsúlyt a márkaszínű felirat és a „Összes esettanulmány" link
   viszi, a kártya-hivatkozás pedig sötét, nem kék. A blokk alapértelmezése
   (széles sáv, 44px-es cím) marad a szolgáltatás-oldalaknak. */
.result-section--compact {
  /* A Referenciák design 88px-es sávokat ír végig. */
  padding: 88px 0;
}
.result-section--compact .container--wide {
  max-width: 1280px;
  padding-left: 56px;
  padding-right: 56px;
}
.result-section--compact .section-head__title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1.4px;
}
.result-section--compact .eyebrow {
  color: #1F6589;
}
.result-section--compact .section-link {
  font-size: 14.5px;
  font-weight: 600;
  color: #25759c;
}
.result-section--compact .result-card__link {
  font-size: 13px;
  color: #0B1220;
}
.result-section--compact .result-card__link:hover {
  color: #25759c;
}
.result-card--dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
.result-card--dark:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.result-card--dark .result-card__title {
  color: #fff;
}
.result-card--dark .result-card__sector {
  color: rgba(255, 255, 255, 0.5);
}
.result-card--dark .result-card__tag {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.result-card--dark .result-card__metrics {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.result-card--dark .result-card__metric-value {
  color: #7fc8a9;
}
.result-card--dark .result-card__metric-label {
  color: rgba(255, 255, 255, 0.6);
}
.result-card--dark .result-card__link {
  color: #fff;
}
.result-section--dark .section-link {
  color: rgba(255, 255, 255, 0.7);
}
.result-section--dark .section-link:hover {
  color: #fff;
}
.final-cta--ai {
  position: relative;
  overflow: hidden;
}
.final-cta--ai .container {
  position: relative;
}
.final-cta__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.topics-split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
}
.topics-split .section-head__lead {
  margin-top: 16px;
}
.topic-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
}
.topic-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #EEF1F4;
  font-size: 14.5px;
  color: #2A3340;
  text-decoration: none;
  transition: color 0.15s ease;
}
.topic-link:hover {
  color: #1F6589;
}
.topic-link__arrow {
  color: #636d79;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.topic-link:hover .topic-link__arrow {
  color: #25759c;
  transform: translateX(3px);
}
.blog-hero {
  background: #FFFFFF;
  padding: 52px 0 0;
}
.blog-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.blog-hero__title {
  font-weight: 700;
  font-size: 54px;
  line-height: 1.04;
  color: #0B1220;
  letter-spacing: -2px;
  margin: 14px 0 0;
  max-width: 820px;
  text-wrap: balance;
}
.blog-hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 20px 0 0;
  max-width: 640px;
  text-wrap: pretty;
}
.blog-filterbar {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  margin-top: 34px;
}
/* Szekción belül a sáv nem visz saját konténert: a befogadó adja a szélességet
   és a behúzást. */
.blog-filterbar--inline {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
.blog-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 24px 0 28px;
  border-bottom: 1px solid #E5E9EE;
}
.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2A3340;
  border: 1px solid #E5E9EE;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.blog-chip:hover {
  border-color: #3DA5D9;
  color: #1F6589;
}
.blog-chip__count {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: #636d79;
}
.blog-chip--active {
  background: #0B1220;
  color: #fff;
  border-color: #0B1220;
}
.blog-chip--active:hover {
  color: #fff;
  border-color: #0B1220;
}
.blog-chip--active .blog-chip__count {
  color: rgba(255, 255, 255, 0.65);
}
.post-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  background: #F4F9FC;
  color: #1F6589;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #EEF1F4;
}
.post-meta .post-avatar {
  width: 30px;
  height: 30px;
  font-size: 10.8px;
  letter-spacing: 0.3px;
}
.post-meta__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.post-meta__author {
  font-size: 12.5px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.1px;
}
.post-meta__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #5B6B7E;
}
.post-meta__dot {
  color: #636d79;
}
.post-meta__read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-meta__clock {
  color: #636d79;
}
.feat-post {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  padding-top: 44px;
}
.feat-post__inner {
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid #E5E9EE;
}
.feat-card {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 48px;
  align-items: center;
  text-decoration: none;
  /* Ugyanaz a felállás, mint a cikk-kártyán: a gomb viszi a célt, a fátyla
     pedig az egész kártyát kattinthatóvá teszi (M360-228). */
  position: relative;
}
.feat-card__cta::after {
  content: '';
  position: absolute;
  inset: 0;
}
.feat-card__tags {
  position: relative;
  z-index: 1;
}
.feat-card__cover {
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
}
.feat-card__badges {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.badge-feat {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 11px;
  background: #25759c;
  color: #fff;
  border-radius: 999px;
}
.feat-card__avatar {
  width: 24px;
  height: 24px;
  font-size: 8.6px;
  letter-spacing: 0.3px;
}
.feat-card__byline {
  font-size: 13px;
  color: #0B1220;
  font-weight: 600;
}
.feat-card__date {
  font-size: 13px;
  color: #5B6B7E;
}
.feat-card__title {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  color: #0B1220;
  letter-spacing: -1.3px;
  margin: 0;
  text-wrap: balance;
}
.feat-card__excerpt {
  font-size: 17px;
  line-height: 1.62;
  color: #5B6B7E;
  margin: 18px 0 26px;
  text-wrap: pretty;
  max-width: 520px;
}
.feat-card__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.feat-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.newsletter {
  padding: 64px 0;
  border-top: 1px solid #E5E9EE;
}
.newsletter__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 56px;
}
.newsletter__card {
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  border-radius: 20px;
  padding: 48px 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.newsletter__title {
  font-weight: 800;
  font-size: 28px;
  color: #0B1220;
  letter-spacing: -1px;
  margin: 0;
  line-height: 1.15;
  max-width: 560px;
}
.newsletter__lead {
  font-size: 15.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 12px 0 24px;
  max-width: 480px;
}
/* A doboz űrlap-területe. A pirula NEM ezen van, hanem a benne álló e-mail
   mezőn: az űrlapot a Mailster rendereli, és a mező, a jelölőnégyzet és a gomb
   három testvér — egy közös keretbe csak egy burkolóval lehetne fogni őket,
   olyat pedig a bővítmény nem ad. Ez a doboz így a POZÍCIONÁLÁS gazdája: az
   e-mail ikon hozzá képest áll, a mező pedig maga viseli a pirula alakot. */
.newsletter__form {
  position: relative;
  width: 100%;
  max-width: 440px;
}
/* A boríték-ikon a mező BELSEJÉBEN áll, ahogy a látványterv mutatja. A mező a
   Mailsteré, tehát az ikon nem kerülhet bele — a helyét a mező bal oldali
   térköze tartja fenn (lásd `.newsletter-embed--newsletter .input`). A 24px a
   mező fél magassága: 13+13 térköz és a 20px-es sor. */
.newsletter__form > svg {
  position: absolute;
  left: 18px;
  top: 24px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
/* ─── Beágyazott hírlevél-űrlap (Mailster) ──────────────────────────────
   A mezőket, a jelölőnégyzetet és a gombot a Mailster írja, a saját
   `mailster-*` osztályaival: a sablonja nem szabad HTML, mint a CF7-é, hanem
   mezőlistából rendereli a markupot (lásd inc/newsletter.php). Ez a réteg
   húzza rá a látványterv geometriáját.

   MIÉRT KELL MINDENHOVA A `.newsletter-embed` ELŐTAG: a bővítmény a saját
   alapstílusát az űrlap ELÉ teszi ki, `<style>` elemben, tehát a dokumentumban
   utánunk áll. Két osztály (`.mailster-form .input`) ellen három kell. */
.newsletter-embed .mailster-form {
  margin: 0;
}
.newsletter-embed .mailster-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.newsletter-embed .mailster-wrapper {
  margin: 0;
}
/* Szöveges mezők: egy sorban osztoznak a gombbal.

   Az `order` nem díszítés. A Mailster a mezőket a FELVÉTELÜK sorrendjében
   írja ki, és a kötelező hozzájárulás-jelölő a gomb ELÉ került — jelölés
   nélkül a jelölőnégyzet sora kettévágná a mezőt és a gombot. A sorrendet
   ezért a stíluslap mondja meg: szöveg, gomb, minden más. */
.newsletter-embed .mailster-email-wrapper,
.newsletter-embed .mailster-firstname-wrapper,
.newsletter-embed .mailster-lastname-wrapper {
  flex: 1 1 160px;
  min-width: 0;
  order: 1;
}
.newsletter-embed .mailster-submit-wrapper {
  flex: 0 0 auto;
  order: 2;
}
/* Minden más mező — jelölőnégyzet, választó — SAJÁT SORBA kerül, a gomb alá.
   Nevesítve nem lehet felsorolni őket: az osztálynevük az űrlap mezőnevéből
   képződik, ami az ügyfélnél bármikor változhat. */
.newsletter-embed .mailster-wrapper:not(.mailster-email-wrapper):not(.mailster-firstname-wrapper):not(.mailster-lastname-wrapper):not(.mailster-submit-wrapper) {
  flex: 1 0 100%;
  order: 3;
}
.newsletter-embed .input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #0B1220;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 999px;
  padding: 13px 18px;
  outline: none;
}
.newsletter-embed .input:focus {
  border-color: #25759c;
}
.newsletter-embed .submit-button {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: normal;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid #25759c;
  background: #25759c;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.newsletter-embed .submit-button:hover {
  background: #1F6589;
  border-color: #1F6589;
}
/* A hozzájárulás sora: ugyanaz a hangsúly, mint a doboz saját apróbetűjéé. */
.newsletter-embed .mailster-wrapper label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 1.5;
  color: #5B6B7E;
  text-align: left;
}
.newsletter-embed .mailster-wrapper label input[type="checkbox"] {
  margin: 2px 0 0;
  flex-shrink: 0;
}
.newsletter-embed .mailster-required {
  color: #25759c;
}
/* A bővítmény visszajelzése (siker, hiba). Alapból üres és rejtett; csak
   beküldés után kap tartalmat. */
.newsletter-embed .mailster-form-info {
  flex: 1 0 100%;
  order: 0;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 12px;
  padding: 10px 14px;
}
.newsletter-embed .mailster-form-info.success {
  background: #EAF6EE;
  color: #1E6B3A;
}
.newsletter-embed .mailster-form-info.error {
  background: #FDECEC;
  color: #9B2226;
}
/* Listaoldal: középre zárt sor, és a mező bal oldalán hely a boríték-ikonnak. */
.newsletter-embed--newsletter .mailster-form-fields {
  justify-content: center;
}
.newsletter-embed--newsletter .mailster-email-wrapper .input {
  padding-left: 44px;
}
/* Cikkoldal: balra zárt, a mező és a gomb egy sorban. */
.newsletter-embed--post-newsletter .mailster-form-fields {
  justify-content: flex-start;
}
.post-section {
  padding: 56px 0 96px;
}
/* A kiemelt cikk a rács FÖLÖTT áll, teljes szélességben, és elválasztó
   vonal zárja le: alatta kezdődik a lista. */
.post-section .feat-card,
.feat-case-wrap {
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid #E5E9EE;
}
/* A szűrősáv és a kiemelt eset közé is kell levegő: a chipek után a nagy
   kártya közvetlenül következik. */
.blog-filterbar + .feat-case-wrap {
  margin-top: 40px;
}

/* A hírlevél-doboz a rács ELEME, teljes sorra kifeszítve: a designban a
   második kártyasor után áll, nem az oldal alján. */
.post-grid__break {
  grid-column: 1 / -1;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #EEF1F4;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  /* A kártya már nem maga a hivatkozás, hanem a cím linkjének a kerete:
     a fátyol ehhez a dobozhoz igazodik. */
  position: relative;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -12px rgba(11, 18, 32, 0.15);
  border-color: #E5E9EE;
}
.post-card__cover {
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
}
.post-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card__tags {
  display: flex;
  gap: 6px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}
.post-card__tag {
  padding: 3px 10px;
  background: #F4F9FC;
  color: #1F6589;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  border-radius: 999px;
  /* Hivatkozásként ugyanaz a pirula: se aláhúzás, se másik szín. A kattintható
     voltát a háttér sötétedése jelzi, nem egy vonal. */
  text-decoration: none;
  transition: background-color 0.15s ease;
}
a.post-card__tag:hover {
  background: #E4EFF6;
}
.post-card__title {
  font-weight: 600;
  font-size: 19px;
  color: #0B1220;
  letter-spacing: -0.4px;
  margin: 0 0 16px;
  line-height: 1.28;
  flex: 1;
}
/* A CÍM VISZI A CÉLT, a fátyla pedig az egész kártyát kattinthatóvá teszi.
   Ez a bevett minta arra, hogy egy kártyán a fő hivatkozás mellett MÁS
   hivatkozás is állhasson: a kategória-címke így valódi link lehet, anélkül
   hogy hivatkozás kerülne hivatkozásba (M360-228). A billentyűzet is jobban
   jár: a fókusz a címre kerül, nem a kártya teljes szövegére. */
.post-card__link {
  color: inherit;
  text-decoration: none;
}
.post-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* A címkék a fátyol FÖLÖTT állnak, különben a saját kattintásuk a cikkre
   menne. */
.post-card__tags {
  position: relative;
  z-index: 1;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.pagination__btn {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: #FFFFFF;
  color: #2A3340;
  border: 1px solid #E5E9EE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pagination__btn:hover {
  border-color: #3DA5D9;
  color: #1F6589;
}
.pagination__btn--active {
  background: #25759c;
  color: #fff;
  border-color: #25759c;
  font-weight: 700;
}
.pagination__btn--active:hover {
  color: #fff;
  border-color: #25759c;
}
.pagination__btn--disabled {
  color: #636d79;
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.pagination__ellipsis {
  color: #636d79;
  padding: 0 4px;
}
.article-hero {
  background: #FFFFFF;
  padding: 52px 0 0;
}
.article-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.article-hero__tags {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.article-hero__tag {
  padding: 4px 12px;
  background: #F4F9FC;
  color: #1F6589;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 999px;
  /* A cikk kategóriája a saját oldalára visz. A pirula ettől nem néz ki
     máshogy: se aláhúzás, se másik szín, csak a háttér sötétedik (M360-228). */
  text-decoration: none;
  transition: background-color 0.15s ease;
}
a.article-hero__tag:hover {
  background: #E4EFF6;
}
.article-hero__title {
  font-weight: 700;
  font-size: 46px;
  line-height: 1.1;
  color: #0B1220;
  letter-spacing: -1.4px;
  margin: 0;
  text-wrap: balance;
}
.article-hero__lead {
  font-size: 19.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 22px 0 32px;
  text-wrap: pretty;
}
.article-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid #E5E9EE;
  flex-wrap: wrap;
}
.article-byline__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  border: 1px solid #E5E9EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 8px;
  color: #636d79;
}
.article-byline__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.article-byline__name {
  font-size: 14.5px;
  font-weight: 600;
  color: #0B1220;
}
.article-byline__role {
  font-size: 13px;
  color: #5B6B7E;
}
.article-byline__divider {
  width: 1px;
  height: 32px;
  background: #E5E9EE;
  margin: 0 8px;
}
.article-byline__meta {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13.5px;
  color: #5B6B7E;
}
.article-byline__read {
  display: flex;
  align-items: center;
  gap: 6px;
}
.article-body {
  padding: 56px 0 8px;
}
.article-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 56px;
}
.article-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.article-toc {
  position: sticky;
  top: 152px;
  align-self: start;
  max-height: calc(100vh - 176px);
  overflow-y: auto;
}
.article-toc__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
  margin-bottom: 16px;
}
.article-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.article-toc__link {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color 0.15s ease;
}
.article-toc__link:hover {
  background: #F4F9FC;
}
.article-toc__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #636d79;
  flex-shrink: 0;
}
.article-toc__text {
  font-size: 13.5px;
  line-height: 1.4;
  color: #5B6B7E;
  font-weight: 500;
}
.article-toc__link--active {
  background: #F4F9FC;
  border-left-color: #25759c;
}
.article-toc__link--active .article-toc__num {
  color: #1F6589;
}
.article-toc__link--active .article-toc__text {
  color: #0B1220;
  font-weight: 600;
}
.article-toc__share {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #E5E9EE;
}
.article-toc__share-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
  margin-bottom: 10px;
}
.article-toc__share-row {
  display: flex;
  gap: 8px;
}
.article-toc__share-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  color: #5B6B7E;
  text-decoration: none;
}
.article-toc__share-btn:hover {
  border-color: #3DA5D9;
  color: #25759c;
}
.article-prose {
  max-width: 640px;
}
.article-prose h2 {
  font-weight: 700;
  font-size: 28px;
  color: #0B1220;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin: 44px 0 16px;
  scroll-margin-top: 150px;
}
.article-prose h3 {
  font-weight: 600;
  font-size: 20px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 32px 0 12px;
}
.article-prose p {
  font-size: 17px;
  line-height: 1.7;
  color: #2A3340;
  margin: 0 0 20px;
}
.article-prose p strong {
  color: #0B1220;
  font-weight: 600;
}
.article-prose p a {
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
}
.article-prose p a:hover {
  text-decoration: underline;
}
.prose-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prose-list__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.6;
  color: #2A3340;
}
.prose-list__icon {
  margin-top: 3px;
  flex-shrink: 0;
}
/* Számozott változat: a pipa helyére sorszám kerül. A számot a CSS
   számlálója adja, nem a markup, tehát a pontok átrendezése után is helyes. */
.prose-list--ol {
  counter-reset: prose-list;
}
.prose-list--ol .prose-list__icon {
  display: none;
}
.prose-list--ol .prose-list__item {
  counter-increment: prose-list;
}
.prose-list--ol .prose-list__item::before {
  content: counter(prose-list);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: #F4F9FC;
  color: #1F6589;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tldr {
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  border-radius: 16px;
  padding: 28px 32px;
  margin: 0 0 12px;
}
.tldr__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.tldr__badge {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 4px 10px;
  background: #25759c;
  color: #fff;
  border-radius: 6px;
}
.tldr__title {
  font-weight: 600;
  font-size: 15.5px;
  color: #0B1220;
}
.tldr__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tldr__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: #2A3340;
}
.tldr__icon {
  margin-top: 3px;
  flex-shrink: 0;
}
.pullquote {
  margin: 44px 0;
  padding: 4px 0 4px 32px;
  border-left: 3px solid #25759c;
}
.pullquote blockquote {
  margin: 0;
}
.pullquote__q {
  font-weight: 600;
  font-size: 25px;
  line-height: 1.4;
  color: #0B1220;
  letter-spacing: -0.5px;
  margin: 0;
  text-wrap: pretty;
}
.pullquote .pullquote__q {
  font-size: 25px;
  color: #0B1220;
  margin: 0;
  line-height: 1.4;
}
.pullquote__cite {
  display: block;
  margin-top: 16px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
}
/* Doboz-változat: nem idézet, hanem egy-két mondatos figyelmeztetés. Ezért
   nincs nagy szedés és nincs függőleges vonal, hanem kerete van, mint a
   cikk többi kiemelt felületének. */
.pullquote--notice {
  margin: 32px 0;
  padding: 20px 24px;
  border-left: 3px solid #25759c;
  border-top: 1px solid #E8F2F8;
  border-right: 1px solid #E8F2F8;
  border-bottom: 1px solid #E8F2F8;
  border-radius: 0 12px 12px 0;
  background: #F4F9FC;
}
.pullquote--notice .pullquote__q {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
  color: #0B1220;
}

/* Kép a cikk szövegében. A látványtervben nincs ilyen elem, a keret és a
   lekerekítés ezért a téma többi médiakártyájáé. */
.prose-figure {
  margin: 32px 0;
}
.prose-figure__media {
  border-radius: 12px;
  border: 1px solid #E5E9EE;
  overflow: hidden;
}
/* Képpel a hely már nem doboz, hanem maga a kép: a helykitöltő rácsa, a
   középre zárása és a minimális magassága lekerül. */
.prose-figure__media.has-image {
  display: block;
  min-height: 0;
  border-radius: 12px;
}
.prose-figure__media img {
  display: block;
  width: 100%;
  height: auto;
}
.prose-figure__caption {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #5B6879;
}

.prose-cta {
  background: #08214E;
  color: #fff;
  border-radius: 16px;
  padding: 32px 34px;
  margin: 44px 0;
  position: relative;
  overflow: hidden;
}
.prose-cta__glow {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40, 127, 170, 0.33) 0%, transparent 70%);
  pointer-events: none;
}
.prose-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.prose-cta__text {
  max-width: 460px;
}
.prose-cta__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.prose-cta__title {
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.6px;
  margin: 10px 0 8px;
  line-height: 1.2;
}
.prose-cta__lead {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.prose-cta .prose-cta__title {
  color: #fff;
  margin: 10px 0 8px;
}
.prose-cta .prose-cta__lead {
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.author-bio-section {
  background: #FAFAF7;
  padding: 56px 0;
}
.author-bio {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 56px;
}
.author-bio__card {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.author-bio__portrait {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
}
.author-bio__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
  margin-bottom: 8px;
}
.author-bio__name {
  font-weight: 700;
  font-size: 22px;
  color: #0B1220;
  letter-spacing: -0.4px;
  margin: 0 0 2px;
}
.author-bio__role {
  font-size: 13.5px;
  color: #5B6B7E;
}
.author-bio__desc {
  font-size: 15px;
  line-height: 1.6;
  color: #2A3340;
  margin: 14px 0 16px;
}
.author-bio__links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.author-bio__link {
  font-size: 13.5px;
  font-weight: 500;
  color: #1F6589;
  text-decoration: none;
}
.author-bio__link:hover {
  color: #25759c;
}
.post-card__meta-simple {
  font-size: 12px;
  color: #5B6B7E;
  padding-top: 14px;
  border-top: 1px solid #EEF1F4;
}
.final-cta--navy {
  background: #08214E;
  position: relative;
  overflow: hidden;
}
.final-cta--navy .container {
  position: relative;
}
.article-cover-wrap {
  max-width: 1040px;
  margin: 24px auto 0;
  padding: 0 56px;
}
.article-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 430;
  border-radius: 16px;
  overflow: hidden;
  container-type: inline-size;
  background: #08214E;
}
/* A kiemelt kép a borító teljes felületén. A doboz adja az arányt
   (1200/430), a kép `object-fit: cover`-rel tölti ki.

   A VÁGÁS 70%-NÁL ÁLL, és ez mért érték, nem ízlés. A cikkborítók egy
   sablonból készülnek: az 1200x675-ös vágaton a címsáv 207 pixelnél kezdődik,
   az alcím 530-nál ér véget, a jobb alsó „360° Marketing" felirat pedig
   605-nél. A doboz 430 pixelt mutat a 675-ből, tehát 245 esik ki. 70%-nál a
   felső 171 pixel megy el, és az ablak 601-nél zárul: a kétsoros cím a
   tetejével együtt megmarad, a márkajelzés pedig takarásban marad. Alulra
   igazítva a cím teteje csúszott ki, középre igazítva a felirat látszott. */
.article-cover__media {
  position: absolute;
  inset: 0;
}
.article-cover__media .image-fill {
  object-position: 50% 70%;
}
.article-cover__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(8, 33, 78, 0.4) 0%, rgba(8, 33, 78, 0.2) 35%, rgba(8, 33, 78, 0.88) 100%);
}
.article-cover__kicker {
  position: absolute;
  top: 6cqw;
  left: 6cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
}
.article-cover__dash {
  width: 2.6cqw;
  height: 0.32cqw;
  background: #25759c;
  border-radius: 2px;
}
.article-cover__label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 1.5cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.article-cover__titlewrap {
  position: absolute;
  left: 6cqw;
  bottom: 7.5cqw;
  right: 8cqw;
  display: flex;
  gap: 2.2cqw;
  align-items: stretch;
}
.article-cover__bar {
  width: 0.5cqw;
  background: #25759c;
  border-radius: 4px;
  flex-shrink: 0;
}
.article-cover__title {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 5.6cqw;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.article-cover__brand {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  bottom: 4cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-cover__logo {
  display: flex;
  align-items: center;
  gap: 1cqw;
}
.article-cover__logo-mark {
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background: #25759c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05cqw;
  flex-shrink: 0;
}
.article-cover__logo-name {
  font-weight: 700;
  font-size: 2cqw;
  color: #fff;
  letter-spacing: -0.02em;
}
.article-cover__logo-name span {
  color: #3DA5D9;
}
.article-cover__url {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 1.4cqw;
  color: rgba(255, 255, 255, 0.7);
}
.post-newsletter {
  padding: 64px 0;
  background: #F4F9FC;
}
.post-newsletter__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 56px;
}
.post-newsletter__card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 20px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.post-newsletter__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.post-newsletter__title {
  font-weight: 700;
  font-size: 26px;
  color: #0B1220;
  letter-spacing: -0.8px;
  line-height: 1.18;
  margin: 0;
}
.post-newsletter__lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 12px 0 0;
}
/* A mező, a gomb és a hozzájárulás a beágyazott Mailster-űrlapé — a
   geometriájukat a `.newsletter-embed` réteg adja, feljebb. Ami itt marad, az
   a doboz saját kerete. */
.post-newsletter__form a {
  color: #1F6589;
}
.pkg-hero {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E9EE;
  /* A látványterv 64-et ír felül is (`ListaHero`), ugyanannyit, mint a többi
     hero. Korábban 44 állt itt, és a morzsasáv is 44-re volt húzva egy
     `--pkg` módosítóval: a listázó így 20 pixellel szűkebben indult, mint az
     összes többi oldal. A sáv most az alapgeometriát viszi, mint mindenhol. */
  padding: 64px 0 64px;
}
.pkg-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pkg-hero__body {
  max-width: 820px;
}
/* A pirula alatti levegő. A `.tag` alapból nem visz alsó margót — a heróknak
   kell megadniuk, ahogy a `svc-hero` és a `car-hero` is 26-ot ír. Ez a
   listázóból hiányzott, ezért ült a H1 közvetlenül a pirula alatt. */
.pkg-hero .tag {
  margin-bottom: 26px;
}
/* A látványterv 32-t ír a gombsor fölé, nem a közös 36-ot. */
.pkg-hero .hero__actions {
  margin-top: 32px;
}
.pkg-hero__title {
  font-size: 60px;
  line-height: 1.04;
  letter-spacing: -1.8px;
  margin: 0;
}
.pkg-hero__lead {
  margin-top: 24px;
  max-width: 660px;
}
.pkg-hero__stats {
  display: flex;
  gap: 36px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.pkg-hero__stats .stat__value {
  font-size: 26px;
  letter-spacing: -0.8px;
}
/* A háttér a felület-osztályban áll (`section--soft` az alapérték), nem itt —
   lásd a `pkg-grid-section` ugyanilyen megjegyzését. */
.criteria {
  border-bottom: 1px solid #E5E9EE;
  padding: 64px 0;
}
.criteria__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.criteria__head {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 40px;
}
.criteria__title {
  font-weight: 700;
  font-size: 30px;
  color: #0B1220;
  letter-spacing: -0.9px;
  line-height: 1.12;
  margin: 12px 0 0;
}
.criteria__lead {
  font-size: 16.5px;
  line-height: 1.65;
  color: #2A3340;
  align-self: end;
  margin: 0;
}
.criteria__lead a {
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
}
.criteria__lead a:hover {
  color: #1F6589;
}
.criteria__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.criteria--2 .criteria__grid {
  grid-template-columns: repeat(2, 1fr);
}
.criteria--4 .criteria__grid {
  grid-template-columns: repeat(4, 1fr);
}
.criteria-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
}
.criteria-card__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
  letter-spacing: normal;
}
.criteria-card__title {
  font-weight: 600;
  font-size: 18px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 10px 0;
  line-height: 1.25;
}
.criteria-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
/* A háttér NEM itt áll, hanem a felület-osztályban (`section--warm` az
   alapérték). Így a szekció palettát kap, mint a közös keretű szekciók. */
.pkg-grid-section {
  padding: 88px 0;
}
.pkg-grid-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pkg-grid__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.pkg-grid__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 0;
  line-height: 1.1;
}
.pkg-grid__note {
  font-size: 14.5px;
  color: #5B6B7E;
  max-width: 360px;
}
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.pkg-grid-section--3 .pkg-grid {
  grid-template-columns: repeat(3, 1fr);
}
.pkgcard {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.pkgcard:hover {
  border-color: #25759c;
  box-shadow: 0 18px 40px -22px rgba(11, 18, 32, 0.28);
  transform: translateY(-2px);
}
.pkgcard:hover .pkgcard__icon {
  background: #25759c;
}
.pkgcard:hover .pkgcard__icon svg path,
.pkgcard:hover .pkgcard__icon svg circle,
.pkgcard:hover .pkgcard__icon svg rect,
.pkgcard:hover .pkgcard__icon svg g {
  stroke: #fff;
}
.pkgcard:hover .pkgcard__link {
  gap: 9px;
}
.pkgcard__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #F4F9FC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.18s;
}
.pkgcard__body {
  flex: 1 1 0%;
  min-width: 0;
}
/* A besorolások. A MEGJELENÉS VÁLTOZATLAN: pontosan az a mono-verzál felirat,
   ami eddig is állt a kártya tetején — egyetlen besorolásnál a kimenet képileg
   ugyanaz, mint a korábbi egymezős megoldásé.
   A TIPOGRÁFIA A FELIRATON ÜL, nem a soron: a hely burkolója tartalomtár-módban
   nem renderelődik (a szerver a feliratokat teszi a helyére), tehát a
   konténerre írt szabály csak kézi módban fogna.
   Több besorolásnál sima felsorolás, vesszővel. A vessző a MÁSODIKTÓL kezdve a
   felirat ELÉ kerül, nem az előzők mögé: így az utolsó után nem marad árva
   elválasztó, akkor sem, ha közben törlik valamelyiket. */
.pkgcard__tag {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.pkgcard__tag + .pkgcard__tag::before {
  content: ', ';
}
.pkgcard__title {
  font-weight: 600;
  font-size: 21px;
  color: #0B1220;
  letter-spacing: -0.4px;
  margin: 7px 0 8px;
  line-height: 1.2;
}
.pkgcard__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 16px;
}
.pkgcard__link {
  font-size: 14px;
  font-weight: 600;
  color: #25759c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: gap 0.18s;
}
.pkg-cta {
  background: #FFFFFF;
  padding: 96px 0;
}
.pkg-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pkg-cta__head {
  max-width: 680px;
  margin-bottom: 48px;
}
.pkg-cta__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 0;
  line-height: 1.1;
}
.pkg-cta__panel {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #E5E9EE;
  box-shadow: 0 30px 70px -40px rgba(11, 18, 32, 0.4);
}
.pkg-cta__aside {
  background: #0B1220;
  color: #fff;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
}
.pkg-cta__aside-eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
}
.pkg-cta__aside-title {
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -1.1px;
  line-height: 1.12;
  margin: 14px 0 16px;
}
.pkg-cta__aside-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 32px;
}
.pkg-cta__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: auto 0 24px;
}
.pkg-cta__phone-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 14px 0 22px;
  flex-wrap: wrap;
}
.pkg-cta__email {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.pkg-cta__email-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  width: 52px;
  flex: none;
}
.pkg-cta__email-value {
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}
.pkg-cta__form {
  background: #F7F9FB;
  padding: 44px;
}
.pkg-cta__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.pkg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pkg-field--single {
  margin-bottom: 18px;
}
.pkg-field__label {
  font-size: 12.5px;
  font-weight: 600;
  color: #0B1220;
}
.pkg-field__label span {
  color: #25759c;
}
.pkg-field__input {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: #0B1220;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #E5E9EE;
  background: #FFFFFF;
  outline: none;
  width: 100%;
}
.pkg-field__input:focus {
  border-color: #25759c;
}
.pkg-field__input--area {
  resize: vertical;
}
.pkg-cta__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: 22px;
}
.pkg-cta__consent input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: #25759c;
  flex-shrink: 0;
}
.pkg-cta__consent span {
  font-size: 12.5px;
  line-height: 1.5;
  color: #5B6B7E;
}
.pkg-cta__consent a {
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
}
.pd-hero {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E9EE;
  padding: 64px 0 72px;
}
.pd-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 430px);
  gap: 64px;
  align-items: start;
}
.pd-hero__title {
  font-weight: 700;
  font-size: 60px;
  line-height: 1.04;
  color: #0B1220;
  letter-spacing: -1.8px;
  margin: 0;
}
.pd-hero__lead {
  font-size: 18.5px;
  line-height: 1.6;
  color: #2A3340;
  margin-top: 24px;
  max-width: 600px;
}
.pd-hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
  flex-wrap: wrap;
}
/* A címke és a főcím közötti tér: a közös `.tag` atomnak nincs saját margója,
   a design viszont 26px-et ír a csomag-hero tetején. */
.pd-hero__text > .tag {
  margin-bottom: 26px;
}
/* Ugyanez az álláshirdetés és a karrieroldal fejlécén. Enélkül a címke a
   címhez tapadt: a `.tag` atom margó nélkül érkezik, és ez a két hero nem
   kérte el a magáét. A designban 20px, illetve 26px. */
.jd-hero .tag {
  margin-bottom: 20px;
}
.car-hero .tag {
  margin-bottom: 26px;
}
.pd-hero__stats {
  display: flex;
  gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.pd-hero__stats .stat__value {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.6px;
}
.pd-summary {
  background: #F4F9FC;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
}
.pd-summary__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
}
.pd-summary__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #2A3340;
  margin: 14px 0 22px;
}
.pd-summary__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
/* A törzs 1.6-os sorköze soronként 5px-et adott a listához: hat sor, 30px. */
.pd-summary__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.25;
  color: #0B1220;
  font-weight: 500;
}
.pd-summary__item svg {
  flex-shrink: 0;
}
.pd-summary__price-row {
  border-top: 1px solid #E8F2F8;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pd-summary__price-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
/* A designban 21px az összefoglaló ára — a 30px kilógott a kártya ritmusából. */
.pd-summary__price {
  font-weight: 700;
  font-size: 21px;
  color: #0B1220;
  letter-spacing: -0.6px;
  line-height: 1.15;
  white-space: nowrap;
}
.pd-summary__price-unit {
  font-size: 13.5px;
  font-weight: 500;
  color: #5B6B7E;
}
.pd-intro {
  background: #FAFAF7;
  padding: 96px 0;
}
.pd-intro__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pd-intro__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 72px;
  align-items: start;
}
.pd-intro__title {
  font-weight: 700;
  font-size: 38px;
  color: #0B1220;
  letter-spacing: -1.1px;
  margin: 12px 0 24px;
  line-height: 1.12;
}
.pd-intro__p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 18px;
}
.pd-intro__p:last-child {
  margin-bottom: 0;
}
.pd-intro__p strong {
  color: #0B1220;
  font-weight: 600;
}
.pd-goals {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 32px;
}
.pd-goals__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
}
.pd-goals__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.pd-goal {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pd-goal__num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #F4F9FC;
  color: #1F6589;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.pd-goal__text {
  font-size: 15.5px;
  line-height: 1.5;
  color: #0B1220;
  margin: 0;
  padding-top: 4px;
}
.pd-goals__note {
  margin-top: 26px;
  padding: 16px 18px;
  background: #0B1220;
  border-radius: 10px;
}
.pd-goals__note p {
  font-size: 14.5px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  font-weight: 500;
}
.pd-included {
  background: #FFFFFF;
  padding: 96px 0;
}
.pd-included__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pd-included__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  margin-bottom: 52px;
  align-items: start;
}
.pd-included__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 0;
  line-height: 1.1;
}
.pd-included__lead {
  font-size: 17px;
  line-height: 1.65;
  color: #2A3340;
  align-self: end;
  margin: 0;
}
.pd-included__lead strong {
  color: #0B1220;
  font-weight: 600;
}
.pd-group-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.pd-group-label span {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  flex: none;
}
.pd-group-label::after {
  content: "";
  flex: 1 1 0%;
  height: 1px;
  background: #E5E9EE;
}
.pd-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.pd-channel-grid:last-child {
  margin-bottom: 0;
}
.pd-channel {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 30px;
}
.pd-channel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.pd-channel__name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* A név TÖRHET: `nowrap` mellett a hosszú pillér-nevek min-content mérete
   szétfeszítette a hármas rácsot, és a hasábok nem egyforma szélesek lettek. */
.pd-channel__name {
  font-weight: 600;
  font-size: 20px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.4px;
  line-height: 1.3;
}
.pd-channel__badge {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #25759c;
  color: #fff;
}
.pd-channel__sub {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  flex: none;
  text-align: right;
}
.pd-channel__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 20px;
}
.pd-channel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pd-channel__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.45;
  color: #2A3340;
}
.pd-channel__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.pd-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pd-why {
  border-top: 2px solid #25759c;
  padding-top: 22px;
}
.pd-why__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
  letter-spacing: normal;
}
.pd-why__title {
  font-weight: 600;
  font-size: 18px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 12px 0 10px;
  line-height: 1.25;
}
.pd-why__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.pd-price {
  background: #F7F9FB;
  padding: 96px 0;
  border-top: 1px solid #E5E9EE;
  border-bottom: 1px solid #E5E9EE;
}
.pd-price__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pd-price__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}
.pd-price__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 16px;
  line-height: 1.1;
}
.pd-price__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: #2A3340;
  margin: 0;
}
.pd-price__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.pd-tier {
  position: relative;
  background: #FFFFFF;
  color: #0B1220;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
}
.pd-tier__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #F4F9FC;
  color: #25759c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-tier__name {
  font-weight: 600;
  font-size: 21px;
  margin: 20px 0 4px;
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.pd-tier__kicker {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
  line-height: 1.3;
}
.pd-tier__price-row {
  margin: 24px 0 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
/* A designban 32px az ársor — a 40px-es változat egy fél sorral magasabbra
   nyomta a teljes sávot. */
.pd-tier__price {
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -1.2px;
  line-height: 1.3;
  white-space: nowrap;
}
.pd-tier__per {
  font-size: 15px;
  line-height: 1.3;
  color: #5B6B7E;
}
.pd-tier__scope {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  background: #F4F9FC;
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 600;
  color: #1F6589;
  white-space: nowrap;
}
.pd-tier__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 24px;
}
/* A tételsort hajszálvonal választja el a leírástól — a design mindkét
   (világos és sötét) sávváltozatban így hozza. */
.pd-tier__list {
  list-style: none;
  padding: 20px 0 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #EEF1F4;
}
.pd-tier--featured .pd-tier__list {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.pd-tier__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.45;
  color: #2A3340;
}
.pd-tier__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.pd-tier__cta {
  margin-top: auto;
}
.pd-tier--featured {
  background: #0B1220;
  color: #fff;
  border-color: #0B1220;
  padding: 40px 32px;
  box-shadow: 0 30px 60px -24px rgba(11, 18, 32, 0.4);
}
.pd-tier--featured .pd-tier__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.pd-tier--featured .pd-tier__name {
  color: #fff;
}
.pd-tier--featured .pd-tier__price {
  color: #fff;
}
.pd-tier--featured .pd-tier__kicker {
  color: rgba(255, 255, 255, 0.55);
}
.pd-tier--featured .pd-tier__per {
  color: rgba(255, 255, 255, 0.6);
}
.pd-tier--featured .pd-tier__desc {
  color: rgba(255, 255, 255, 0.72);
}
.pd-tier--featured .pd-tier__item {
  color: rgba(255, 255, 255, 0.86);
}
.pd-tier--featured .pd-tier__scope {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.pd-tier__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #0B1220;
  background: #e8b756;
  padding: 4px 10px;
  border-radius: 999px;
}
.pd-price__note {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5B6B7E;
}
.pd-topics {
  background: #FFFFFF;
  padding: 88px 0;
}
.pd-topics__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pd-topics__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
}
.pd-topics__title {
  font-weight: 700;
  font-size: 32px;
  color: #0B1220;
  letter-spacing: -1px;
  margin: 12px 0 16px;
  line-height: 1.12;
}
.pd-topics__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 0;
}
.pd-topics__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.pd-topic-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #EEF1F4;
  font-size: 14.5px;
  color: #2A3340;
  text-decoration: none;
}
.pd-topic-link span {
  color: #636d79;
}
.pd-topic-link:hover {
  color: #25759c;
}
.pd-topic-link:hover span {
  color: #25759c;
}
.pd-industries {
  background: #FAFAF7;
  padding: 80px 0;
  border-top: 1px solid #E5E9EE;
}
.pd-industries__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.pd-industries__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.pd-industries__title {
  font-weight: 700;
  font-size: 30px;
  color: #0B1220;
  letter-spacing: -0.9px;
  margin: 12px 0 0;
  line-height: 1.1;
}
.pd-industries__all {
  font-size: 14px;
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
}
.pd-industries__all:hover {
  color: #1F6589;
}
.pd-industries__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pd-pill {
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 500;
  color: #2A3340;
  padding: 12px 20px;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s, color 0.15s;
}
.pd-pill span {
  color: #636d79;
}
.pd-pill:hover {
  border-color: #25759c;
  color: #25759c;
}
.pd-pill:hover span {
  color: #25759c;
}
.pd-channel-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.os-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  line-height: 1.25;
  font-size: 13.5px;
  color: #5B6B7E;
}
.os-hero-note strong {
  color: #0B1220;
  font-weight: 600;
}
.pd-price--warm {
  background: #FAFAF7;
}
.os-process {
  background: #FFFFFF;
}
.os-process .step-card {
  background: #FAFAF7;
}
.os-vs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
.os-vs__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.os-vs__from {
  font-size: 13.5px;
  color: #5B6B7E;
  text-align: right;
}
.os-vs__arrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #636d79;
}
.os-vs__to {
  font-size: 13.5px;
  color: #0B1220;
  font-weight: 600;
}
.os-vs__note {
  margin-top: 22px;
  padding: 16px 18px;
  background: #0B1220;
  border-radius: 10px;
}
.os-vs__note p {
  font-size: 14.5px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  font-weight: 500;
}
.os-team {
  background: #FAFAF7;
  padding: 96px 0;
}
.os-team__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.os-team__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 1.5fr;
  gap: 56px;
  align-items: center;
}
.os-team__title {
  font-weight: 700;
  font-size: 38px;
  color: #0B1220;
  letter-spacing: -1.1px;
  margin: 12px 0 20px;
  line-height: 1.12;
}
.os-am {
  background: #0B1220;
  border-radius: 16px;
  padding: 28px;
}
.os-am__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
}
.os-am__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 12px;
}
.os-am__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.os-am__name {
  font-weight: 600;
  font-size: 17px;
  color: #fff;
}
.os-am__desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.os-team__lead {
  font-size: 16.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 28px;
  max-width: 620px;
}
.os-team__lead strong {
  color: #0B1220;
  font-weight: 600;
}
.os-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.os-role {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.os-role__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #F4F9FC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.os-role__label {
  font-weight: 600;
  font-size: 14.5px;
  color: #0B1220;
  letter-spacing: -0.2px;
}
.os-builder {
  background: #F7F9FB;
  padding: 96px 0;
  border-top: 1px solid #E5E9EE;
  border-bottom: 1px solid #E5E9EE;
}
.os-builder__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.os-builder__head {
  max-width: 680px;
  margin-bottom: 48px;
}
.os-builder__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 16px;
  line-height: 1.1;
}
.os-builder__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: #2A3340;
  margin: 0;
}
.os-builder__lead strong {
  color: #0B1220;
  font-weight: 600;
}
.os-builder__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.os-cat {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.os-cat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #EEF1F4;
}
.os-cat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25759c;
  flex-shrink: 0;
}
.os-cat__title {
  font-weight: 600;
  font-size: 15.5px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.2px;
}
.os-cat__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.os-cat__item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.4;
  color: #2A3340;
}
.os-cat__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.os-builder__cta {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.os-builder__cta-text {
  font-size: 15.5px;
  color: #2A3340;
}
.os-timeline {
  background: #F7F9FB;
  padding: 96px 0;
  border-top: 1px solid #E5E9EE;
}
.os-timeline__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.os-timeline__head {
  max-width: 640px;
  margin-bottom: 48px;
}
.os-timeline__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 16px;
  line-height: 1.1;
}
.os-timeline__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: #2A3340;
  margin: 0;
}
.os-timeline__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.os-phase {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 30px;
}
.os-phase__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.os-phase__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F4F9FC;
  color: #1F6589;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.os-phase__day {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
}
.os-phase__title {
  font-weight: 600;
  font-size: 19px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 0 0 16px;
  line-height: 1.2;
}
.os-phase__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.os-phase__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: #2A3340;
}
.os-phase__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.os-cost {
  background: #FFFFFF;
  padding: 96px 0;
}
.os-cost__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.os-cost__head {
  max-width: 680px;
  margin-bottom: 44px;
}
.os-cost__title {
  font-weight: 700;
  font-size: 38px;
  color: #0B1220;
  letter-spacing: -1.1px;
  margin: 12px 0 16px;
  line-height: 1.1;
}
.os-cost__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: #2A3340;
  margin: 0;
}
.os-cost__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.os-panel {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 34px;
  display: flex;
  flex-direction: column;
}
.os-panel--brand {
  background: #F4F9FC;
  border-color: #E8F2F8;
}
.os-panel__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
}
.os-panel--brand .os-panel__eyebrow {
  color: #1F6589;
}
.os-panel__title {
  font-weight: 700;
  font-size: 22px;
  color: #0B1220;
  letter-spacing: -0.5px;
  margin: 8px 0 22px;
}
.os-panel__rows {
  display: flex;
  flex-direction: column;
}
.os-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid #EEF1F4;
}
.os-panel__row-label {
  font-size: 14px;
  color: #2A3340;
  line-height: 1.4;
}
.os-panel__row-value {
  font-size: 14px;
  color: #0B1220;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}
.os-panel__total {
  margin-top: auto;
  padding-top: 18px;
  border-top: 2px solid #E5E9EE;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.os-panel__total-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #0B1220;
}
.os-panel__total-value {
  font-weight: 700;
  font-size: 20px;
  color: #0B1220;
  letter-spacing: -0.5px;
  text-align: right;
}
.os-panel--brand .os-panel__total-value {
  color: #1F6589;
}
.os-panel__note {
  font-size: 13px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 16px 0 0;
}
.os-cost__foot {
  margin: 24px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5B6B7E;
}
.os-fit {
  background: #F7F9FB;
  padding: 96px 0;
  border-top: 1px solid #E5E9EE;
}
.os-fit__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.os-fit__head {
  max-width: 640px;
  margin-bottom: 44px;
}
.os-fit__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 16px;
  line-height: 1.1;
}
.os-fit__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: #2A3340;
  margin: 0;
}
.os-fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.os-fit__card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 34px;
}
.os-fit__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.os-fit__badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.os-fit__badge--yes {
  background: #E8F2F8;
}
.os-fit__badge--no {
  background: #F7F9FB;
}
.os-fit__card-title {
  font-weight: 600;
  font-size: 19px;
  color: #0B1220;
  letter-spacing: -0.3px;
  /* Az alapértelmezett címsor-margó 40px-szel magasabbra tolta a kártyafejet. */
  margin: 0;
}
.os-fit__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.os-fit__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: #2A3340;
}
.os-fit__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.car-hero {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E9EE;
  padding: 64px 0 56px;
}
.car-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.car-hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: end;
}
.car-hero__title {
  font-weight: 700;
  font-size: 58px;
  line-height: 1.04;
  color: #0B1220;
  letter-spacing: -2px;
  margin: 0;
}
.car-hero__title span {
  color: #25759c;
}
.car-hero__lead {
  font-size: 18.5px;
  line-height: 1.6;
  color: #2A3340;
  margin-top: 24px;
  max-width: 600px;
}
.car-hero__lead strong {
  color: #0B1220;
  font-weight: 600;
}
.car-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.car-stat {
  background: #F4F9FC;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 20px 18px;
}
.car-stat__value {
  font-size: 30px;
  font-weight: 700;
  color: #25759c;
  letter-spacing: -1px;
}
.car-stat__label {
  font-size: 13px;
  color: #5B6B7E;
  margin-top: 2px;
}
.tag__dot--live {
  background: #7fc8a9;
}
.car-about {
  padding: 88px 0;
  background: #FFFFFF;
}
.car-about__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.car-about__title {
  font-weight: 700;
  font-size: 36px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 18px;
  line-height: 1.12;
}
.car-about__prose {
  max-width: 880px;
}
.car-about__prose p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 14px;
}
.car-about__prose p:last-child {
  margin-bottom: 0;
}
.car-greet {
  display: flex;
  align-items: center;
  margin-top: 48px;
}
.car-greet__card {
  flex: 1 1 0%;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(11, 18, 32, 0.1);
  padding: 38px 42px;
  margin-right: -88px;
  position: relative;
  z-index: 2;
}
.car-greet__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
}
.car-greet__quote {
  font-size: 15px;
  line-height: 1.65;
  color: #2A3340;
  margin: 16px 0 10px;
}
.car-greet__quote:last-of-type {
  margin: 0;
}
.car-greet__id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #E5E9EE;
  flex-wrap: wrap;
}
.car-greet__name {
  font-size: 16.5px;
  font-weight: 700;
  color: #0B1220;
  letter-spacing: -0.3px;
}
.car-greet__role {
  font-size: 12.5px;
  color: #5B6B7E;
  margin-top: 2px;
}
.car-greet__badges {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.car-greet__badge {
  font-size: 12.5px;
  color: #2A3340;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  padding: 5px 11px;
  border-radius: 999px;
}
.car-greet__photo {
  width: 520px;
  height: 560px;
  flex-shrink: 0;
  border-radius: 20px;
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  letter-spacing: 1px;
}
.car-mission {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid #E5E9EE;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
.car-mission__label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.car-mission__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.car-mission__kicker {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
}
.car-mission__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0;
}
.car-jobs {
  padding: 88px 0;
  background: #FAFAF7;
}
.car-jobs__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.car-jobs__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
}
.car-jobs__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.4px;
  margin: 12px 0 0;
  line-height: 1.1;
}
.car-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.car-chip {
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  background: #FFFFFF;
  color: #2A3340;
  border: 1px solid #E5E9EE;
}
.car-chip--active {
  background: #0B1220;
  color: #fff;
  border-color: #0B1220;
}
.job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.job-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.job-card:hover {
  border-color: #25759c;
  box-shadow: 0 18px 40px -22px rgba(11, 18, 32, 0.28);
  transform: translateY(-2px);
}
.job-card:hover .job-card__arrow {
  background: #25759c;
  border-color: #25759c;
}
.job-card:hover .job-card__arrow svg path {
  stroke: #fff;
}
.job-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.job-card__cat {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1F6589;
  background: #E8F2F8;
  padding: 5px 10px;
  border-radius: 6px;
}
.job-card__arrow {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #E5E9EE;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.18s, border-color 0.18s;
}
.job-card__title {
  font-weight: 700;
  font-size: 22px;
  color: #0B1220;
  letter-spacing: -0.6px;
  margin: 0 0 8px;
}
.job-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 20px;
  flex: 1 1 0%;
}
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.job-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #2A3340;
  background: #F7F9FB;
  border: 1px solid #EEF1F4;
  padding: 5px 10px;
  border-radius: 999px;
}
.job-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #EEF1F4;
}
.job-card__deadline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #5B6B7E;
}
.job-card__deadline strong {
  color: #2A3340;
}
.job-card__link {
  font-size: 14px;
  font-weight: 600;
  color: #25759c;
}
.car-spontaneous {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: #FFFFFF;
  border: 1px dashed #E5E9EE;
  border-radius: 16px;
  flex-wrap: wrap;
}
.car-spontaneous__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.car-spontaneous__text {
  font-size: 15px;
  color: #2A3340;
  margin: 0;
  flex: 1 1 240px;
}
.car-spontaneous__text strong {
  color: #0B1220;
  font-weight: 600;
}
.car-benefits {
  padding: 88px 0;
  background: #FFFFFF;
}
.car-benefits__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.car-benefits__head {
  max-width: 640px;
  margin-bottom: 44px;
}
.car-benefits__title {
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.4px;
  margin: 12px 0 16px;
  line-height: 1.1;
}
.car-benefits__lead {
  font-size: 17px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 0;
}
.car-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.benefit-card {
  background: #FAFAF7;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 24px;
}
.benefit-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.benefit-card__title {
  font-weight: 600;
  font-size: 16px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
}
.benefit-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
/* Az ikon és a cím egy sorban. Lásd a `buildblock--inline` magyarázatát.
   Ikon nélküli változatnál nincs mit elrejteni: itt a jelölő nem burkolóban
   áll, hanem közvetlen gyerek, tehát egyszerűen nem renderel. */
.benefit-card--inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}
.benefit-card--inline .benefit-card__icon {
  margin-bottom: 0;
}
.benefit-card--inline .benefit-card__title {
  margin: 0;
}
.benefit-card--inline .benefit-card__desc {
  grid-column: 1 / -1;
  margin-top: 12px;
}
.car-team {
  padding: 88px 0;
  background: #F7F9FB;
  border-top: 1px solid #E5E9EE;
}
.car-team__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.car-team__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.car-team__title {
  font-weight: 700;
  font-size: 36px;
  color: #0B1220;
  letter-spacing: -1.2px;
  margin: 12px 0 16px;
  line-height: 1.12;
}
.car-team__lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 28px;
}
.car-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.car-info__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.car-info__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #FFFFFF;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.car-info__label {
  font-weight: 600;
  font-size: 14.5px;
  color: #0B1220;
}
.car-info__value {
  font-size: 13.5px;
  color: #5B6B7E;
  margin-top: 2px;
  line-height: 1.45;
}
.car-members {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.car-member {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.car-member__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #1F6589;
}
.car-member__name {
  font-size: 14.5px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.car-member__role {
  font-size: 12.5px;
  color: #5B6B7E;
  margin-top: 3px;
}
.car-past {
  padding: 88px 0;
  background: #FFFFFF;
}
.car-past__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.car-past__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
.car-past__title {
  font-weight: 700;
  font-size: 30px;
  color: #0B1220;
  letter-spacing: -1px;
  margin: 12px 0;
  line-height: 1.15;
}
.car-past__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 0 0 26px;
  max-width: 480px;
}
.car-past__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.car-past__tag {
  font-size: 13.5px;
  color: #2A3340;
  font-weight: 500;
  text-decoration: none;
  padding: 9px 15px;
  border-radius: 999px;
  background: #F7F9FB;
  border: 1px solid #E5E9EE;
  transition: border-color 0.15s, color 0.15s;
}
.car-past__tag:hover {
  border-color: #25759c;
  color: #25759c;
}
.car-aranka {
  background: #0B1220;
  border-radius: 20px;
  padding: 32px;
  color: #fff;
}
.car-aranka__head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.car-aranka__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 8px, rgba(255,255,255,0.03) 8px, rgba(255,255,255,0.03) 9px), #1A2435;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.5px;
}
.car-aranka__name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.car-aranka__role {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.car-aranka__quote {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 22px;
}
.car-aranka__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.car-aranka__link svg {
  transition: transform 0.15s;
}
.car-aranka__link:hover svg {
  transform: translateX(3px);
}
.tag--closed {
  background: #F7F9FB;
  border: 1px solid #E5E9EE;
}
.tag__dot--closed {
  background: #636d79;
}
.tag--closed .tag__label--plain {
  color: #5B6B7E;
}
.jd-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(217, 138, 138, 0.08);
  border: 1px solid rgba(217, 138, 138, 0.3);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 40px;
}
.jd-banner__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #FFFFFF;
  border: 1px solid rgba(217, 138, 138, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jd-banner__text {
  font-size: 15px;
  line-height: 1.55;
  color: #2A3340;
  margin: 0;
}
.jd-banner__text strong {
  color: #0B1220;
  font-weight: 600;
}
.jd-hero {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E9EE;
  padding: 52px 0 0;
}
.jd-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.jd-hero__title {
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  color: #0B1220;
  letter-spacing: -1.8px;
  margin: 0;
}
.jd-hero__sub {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 13.5px;
  color: #5B6B7E;
  letter-spacing: 0.3px;
  margin: 14px 0 0;
}
.jd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 36px;
}
.jd-meta__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #2A3340;
  background: #FAFAF7;
  border: 1px solid #E5E9EE;
  padding: 8px 14px;
  border-radius: 999px;
}
.jd-body {
  padding: 56px 0 88px;
  background: #FFFFFF;
}
.jd-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}
.jd-main {
  display: flex;
  flex-direction: column;
  gap: 52px;
  min-width: 0;
}
.jd-section {
  scroll-margin-top: 24px;
}
.jd-section__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
}
.jd-section__title {
  font-weight: 700;
  font-size: 29px;
  color: #0B1220;
  letter-spacing: -1px;
  margin: 11px 0 18px;
  line-height: 1.18;
}
.jd-prose p {
  font-size: 16.5px;
  line-height: 1.68;
  color: #2A3340;
  margin: 0 0 16px;
}
.jd-prose p:last-child {
  margin-bottom: 0;
}
.jd-prose p strong {
  color: #0B1220;
  font-weight: 600;
}
.jd-photo {
  height: 300px;
  border-radius: 12px;
  background: repeating-linear-gradient(
      135deg,
      #EEF1F4 0,
      #EEF1F4 12px,
      rgba(0, 0, 0, 0.024) 12px,
      rgba(0, 0, 0, 0.024) 13px
    )
    #EEF1F4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  margin-top: 22px;
}
.jd-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.jd-list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.jd-list__item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 7px 0;
}
.jd-list__check {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.jd-list__text {
  font-size: 16px;
  line-height: 1.55;
  color: #2A3340;
}
.jd-sublabel {
  font-weight: 700;
  font-size: 16px;
  color: #0B1220;
  margin: 24px 0 12px;
}
.jd-sublabel:first-child {
  margin-top: 0;
}
.jd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jd-tag {
  font-size: 13.5px;
  color: #2A3340;
  background: #F7F9FB;
  border: 1px solid #E5E9EE;
  padding: 7px 14px;
  border-radius: 999px;
}
.jd-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 4px;
}
.jd-fit__card {
  border-radius: 16px;
  padding: 22px 24px;
}
.jd-fit__card--yes {
  background: rgba(127, 200, 169, 0.07);
  border: 1px solid rgba(127, 200, 169, 0.35);
}
.jd-fit__card--no {
  background: rgba(217, 138, 138, 0.06);
  border: 1px solid rgba(217, 138, 138, 0.3);
}
.jd-fit__title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}
.jd-fit__card--yes .jd-fit__title {
  color: #337f61;
}
.jd-fit__card--no .jd-fit__title {
  color: #A95C5C;
}
.jd-fit__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.jd-fit__item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #2A3340;
}
.jd-fit__item svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.jd-questions {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  counter-reset: q;
}
.jd-question {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 8px 0;
}
.jd-question__num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #E8F2F8;
  color: #1F6589;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
}
.jd-question__text {
  font-size: 16px;
  line-height: 1.5;
  color: #0B1220;
  padding-top: 3px;
}
.jd-email {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  border-radius: 16px;
  padding: 22px 26px;
}
/* Lezárt pozíció: a doboz elhalványul, mert már nincs hova jelentkezni. */
.jd-email--closed {
  background: #F7F9FB;
  border-color: #E5E9EE;
}
.jd-email__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jd-email__info {
  flex: 1 1 200px;
  min-width: 0;
}
.jd-email__label {
  font-size: 13px;
  color: #5B6B7E;
}
.jd-email__addr {
  font-size: 16px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.2px;
  word-break: break-all;
}
.jd-email__closed {
  font-size: 13.5px;
  font-weight: 500;
  color: #5B6B7E;
}
.jd-consent {
  font-size: 12px;
  line-height: 1.5;
  color: #5B6B7E;
  margin: 16px 0 0;
}
.jd-aside {
  position: sticky;
  top: 152px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jd-summary {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
}
.jd-summary__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
  display: block;
}
.jd-summary__title {
  font-weight: 700;
  font-size: 21px;
  color: #0B1220;
  letter-spacing: -0.5px;
  margin: 10px 0 18px;
}
.jd-summary__rows {
  border-top: 1px solid #EEF1F4;
}
.jd-summary__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #EEF1F4;
}
.jd-summary__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jd-summary__label {
  font-size: 11.5px;
  color: #5B6B7E;
}
.jd-summary__value {
  font-size: 14.5px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.2px;
}
.jd-summary__value--expired {
  color: #A95C5C;
}
/* A kártya gombjai a téma gomb-blokkjai (`.btn`), ezért ezek az osztályok
   csak az ELRENDEZÉST viszik: teljes szélesség, méret, térköz. A SZÍNT a
   választott stílus adja (`.btn--primary`, `.btn--dark`), különben a gomb
   stílusválasztója néma vezérlő lenne: látszik, de nem történik tőle semmi.
   A `--disabled` állapot marad itt: az nem gomb, hanem a lezárt pozíció
   felirata a gomb helyén. */
.jd-summary__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 22px;
  transition: background-color 0.15s, border-color 0.15s;
}
.jd-summary__note {
  font-size: 12px;
  line-height: 1.5;
  color: #5B6B7E;
  margin: 14px 0 0;
  text-align: center;
}
/* Ez nem gomb, hanem a lezárt pozíció felirata a gomb helyén, ezért a saját
   színeit hozza. A keretet is kiírja: a gomb-osztály már csak elrendezés. */
.jd-summary__apply--disabled {
  background: #F7F9FB;
  color: #636d79;
  border: 1px solid #E5E9EE;
  cursor: not-allowed;
}
.jd-summary__apply--disabled:hover {
  background: #F7F9FB;
  border-color: #E5E9EE;
}
.jd-summary__spontan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 22px;
  transition: background-color 0.15s;
}
.jd-toc {
  background: #FAFAF7;
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 22px 24px;
}
.jd-toc__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  display: block;
  margin-bottom: 6px;
}
.jd-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.jd-toc__link {
  display: flex;
  gap: 10px;
  align-items: baseline;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  color: #2A3340;
  padding: 5px 0;
}
.jd-toc__link:hover {
  color: #25759c;
}
.jd-toc__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #636d79;
  flex-shrink: 0;
}
/* A sorszám SZÁMLÁLÓBÓL jön, nem beírt mezőből: a jegyzék sorai és a szakaszok
   is szabadon átrendezhetők a szerkesztőben, és egy begépelt szám ott azonnal
   hazudna. Ugyanez a szabály a jelentkezési kérdéseknél. */
.jd-toc__list {
  counter-reset: jdtoc;
}
.jd-toc__link {
  counter-increment: jdtoc;
}
.jd-toc__num::before {
  content: counter(jdtoc, decimal-leading-zero);
}
.jd-question {
  counter-increment: q;
}
.jd-question__num::before {
  content: counter(q);
}

/* Juttatások: ikonos kártyák két hasábban. */
.jd-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.jd-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #FAFAF7;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 18px 20px;
}
.jd-benefit__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #FFFFFF;
  border: 1px solid #E8F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jd-benefit__text {
  font-size: 14.5px;
  line-height: 1.45;
  color: #2A3340;
  margin: 0;
  align-self: center;
}

/* Kapcsolattartó: sötét kártya a ragadós sáv alján. */
.jd-person {
  background: #0B1220;
  border-radius: 18px;
  padding: 24px;
  color: #fff;
}
.jd-person__head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.jd-person__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: #1A2435;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.jd-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jd-person__name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.jd-person__role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
}
.jd-person__quote {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
/* Szintén csak elrendezés: a színt a gomb áttetsző stílusa adja
   (`.btn--glass`), ami a designnak ebből a kártyájából került a
   stíluskészletbe. */
.jd-person__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 18px;
}

@media (max-width: 900px) {
  .jd-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .jd-aside {
    position: static;
  }
  .jd-fit,
  .jd-benefits,
  .jd-list--2col {
    grid-template-columns: 1fr;
  }
}
.jd-more {
  padding: 80px 0;
  background: #FAFAF7;
  border-top: 1px solid #E5E9EE;
}
.jd-more__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.jd-more__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.jd-more__title {
  font-weight: 700;
  font-size: 30px;
  color: #0B1220;
  letter-spacing: -1px;
  margin: 12px 0 0;
  line-height: 1.1;
}
.jd-more__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #25759c;
  font-weight: 500;
  text-decoration: none;
}
.jd-more__all:hover {
  color: #1F6589;
}
.jd-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.jd-minicard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
  transition: border-color 0.18s, transform 0.18s;
}
.jd-minicard:hover {
  border-color: #25759c;
  transform: translateY(-2px);
}
.jd-minicard:hover .jd-minicard__arrow svg path {
  stroke: #25759c;
}
.jd-minicard__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.jd-minicard__cat {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
}
.jd-minicard__title {
  font-weight: 700;
  font-size: 19px;
  color: #0B1220;
  letter-spacing: -0.4px;
  margin: 0 0 14px;
}
.jd-minicard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jd-minicard__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #2A3340;
  background: #F7F9FB;
  border: 1px solid #EEF1F4;
  padding: 5px 10px;
  border-radius: 999px;
}
.gloss-hero {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E9EE;
  padding: 52px 0 44px;
}
.gloss-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.gloss-hero__grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 64px;
  align-items: end;
}
.gloss-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  background: #E8F2F8;
  font-size: 13px;
  font-weight: 500;
  color: #1F6589;
}
.gloss-hero__eyebrow svg {
  flex-shrink: 0;
}
.gloss-hero__title {
  font-weight: 700;
  font-size: 56px;
  line-height: 1.03;
  color: #0B1220;
  letter-spacing: -2.2px;
  margin: 0;
}
.gloss-hero__lead {
  font-size: 19px;
  line-height: 1.55;
  color: #2A3340;
  margin: 20px 0 0;
  max-width: 580px;
}
.gloss-search {
  position: relative;
}
.gloss-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}
.gloss-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 18px 15px 48px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: #0B1220;
  border: 1px solid #E5E9EE;
  border-radius: 12px;
  background: #F7F9FB;
  outline: none;
}
.gloss-search__input:focus {
  border-color: #25759c;
}
.gloss-search__input::placeholder {
  color: #636d79;
}
.gloss-hero__stats {
  display: flex;
  gap: 24px;
  margin-top: 22px;
}
.gloss-stat__value {
  font-weight: 700;
  font-size: 30px;
  color: #0B1220;
  letter-spacing: -1px;
  line-height: 1;
}
.gloss-stat__label {
  font-size: 13px;
  color: #5B6B7E;
  margin-top: 6px;
}
.gloss-stat__div {
  width: 1px;
  background: #E5E9EE;
}
.gloss-bar {
  position: sticky;
  top: 119px;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #E5E9EE;
}
.gloss-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.gloss-alpha {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.gloss-letter {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #2A3340;
  background: transparent;
  text-decoration: none;
  transition: background 0.15s;
}
.gloss-letter:hover {
  background: #E8F2F8;
}
.gloss-letter--off {
  color: #E5E9EE;
  cursor: default;
  pointer-events: none;
}
.gloss-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gloss-chip {
  padding: 7px 14px;
  border-radius: 999px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  background: #FFFFFF;
  color: #2A3340;
  border: 1px solid #E5E9EE;
  white-space: nowrap;
  transition: 0.15s;
}
.gloss-chip:hover {
  border-color: #25759c;
  color: #25759c;
}
.gloss-chip--active {
  background: #25759c;
  color: #fff;
  border-color: #25759c;
}
.gloss-chip--active:hover {
  color: #fff;
}
.gloss-list {
  padding: 56px 0 80px;
  background: #F7F9FB;
}
.gloss-list__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.gloss-group {
  margin-bottom: 48px;
  scroll-margin-top: 168px;
}
.gloss-group:last-child {
  margin-bottom: 0;
}
.gloss-group__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.gloss-group__letter {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #25759c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.gloss-group__rule {
  flex: 1 1 0%;
  height: 1px;
  background: #E5E9EE;
}
.gloss-group__count {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.gloss-group__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gloss-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 26px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  gap: 16px;
}
.gloss-card:hover {
  border-color: #25759c;
  box-shadow: 0 14px 32px -20px rgba(11, 18, 32, 0.25);
}
.gloss-card__badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #F4F9FC;
  color: #1F6589;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
.gloss-card__body {
  min-width: 0;
}
.gloss-card__title {
  font-weight: 700;
  font-size: 16.5px;
  color: #0B1220;
  letter-spacing: -0.4px;
  margin: 0 0 7px;
  line-height: 1.25;
}
.gloss-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.gloss-card__cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
}
.gloss-card__cat--agency {
  color: #25759c;
}
/* A két címke-szín SÖTÉTEBB, mint a designban (M360-55). A halvány zöld
   1.96:1, a borostyán 1.85:1 volt fehér háttéren — mindkettő messze az AA
   4.5:1 alatt, és ez itt SZÖVEG, nem díszítés. A hangolás csak a címkéé: a
   két alapszín máshol HÁTTÉRKÉNT áll sötét felirattal, és ott a világos
   árnyalat a helyes, tehát az változatlan marad. */
.gloss-card__cat--seo {
  color: #4F7C69;
}
.gloss-card__cat--basics {
  color: #8B6E34;
}
.gloss-card__def {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gloss-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #25759c;
}
.gloss-card__link svg {
  flex-shrink: 0;
  transition: transform 0.15s;
}
.gloss-card:hover .gloss-card__link svg {
  transform: translateX(3px);
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.lang-switch__off {
  color: #636d79;
  text-decoration: none;
}
.lang-switch__sep {
  color: #E5E9EE;
}
.lang-switch__on {
  color: #5B6B7E;
  font-weight: 600;
}
.en-work {
  background: #FAFAF7;
  padding: 96px 0;
}
.en-work__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.en-work__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 72px;
  align-items: start;
}
.en-work__title {
  font-weight: 700;
  font-size: 38px;
  color: #0B1220;
  letter-spacing: -1.1px;
  margin: 12px 0 24px;
  line-height: 1.12;
}
.en-work__p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 18px;
}
.en-work__p:last-child {
  margin-bottom: 0;
}
.en-work__p strong {
  color: #0B1220;
  font-weight: 600;
}
.en-versions {
  background: #0B1220;
  border-radius: 16px;
  padding: 32px;
  color: #fff;
}
.en-versions__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
}
.en-versions__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0 0;
}
.en-version {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 6px 16px;
}
.en-version--active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  padding: 14px 16px;
}
.en-version__badge {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.en-version--active .en-version__badge {
  background: #fff;
  color: #0B1220;
}
.en-version__text {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 4px 0 0;
}
.en-version__text strong {
  color: #fff;
  font-weight: 600;
}
.en-version--active .en-version__text {
  color: #fff;
}
.en-versions__note {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.en-versions__note strong {
  color: #fff;
}
.en-intl {
  background: #FFFFFF;
  padding: 96px 0;
}
.en-intl__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.en-intl__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
.en-intl__title {
  font-weight: 700;
  font-size: 36px;
  color: #0B1220;
  letter-spacing: -1.1px;
  margin: 12px 0 18px;
  line-height: 1.14;
}
.en-intl__p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #2A3340;
  margin: 0 0 18px;
}
.en-intl__p strong {
  color: #0B1220;
  font-weight: 600;
}
.en-intl__actions {
  margin-top: 28px;
}
.en-industries {
  background: #F7F9FB;
  padding: 96px 0;
  border-top: 1px solid #E5E9EE;
  border-bottom: 1px solid #E5E9EE;
}
.en-industries__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.en-industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.en-ind-card {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 28px;
}
.en-ind-card__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
  letter-spacing: normal;
}
.en-ind-card__title {
  font-weight: 600;
  font-size: 18px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 10px 0 8px;
  line-height: 1.25;
}
.en-ind-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.en-industries__cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.en-services {
  background: #FFFFFF;
  padding: 96px 0;
}
.en-services__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.en-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.en-service {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  min-height: 150px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.en-service:hover {
  border-color: #25759c;
  box-shadow: 0 14px 32px -20px rgba(11, 18, 32, 0.25);
  transform: translateY(-2px);
}
.en-service:hover .en-service__arrow {
  color: #25759c;
}
.en-service__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.en-service__title {
  font-weight: 600;
  font-size: 17.5px;
  color: #0B1220;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.en-service__arrow {
  color: #636d79;
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.18s;
}
.en-service__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.en-services__foot {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.en-expect {
  background: #FAFAF7;
  padding: 96px 0;
  border-top: 1px solid #E5E9EE;
}
.en-expect__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.en-expect__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
.en-expect__title {
  font-weight: 700;
  font-size: 36px;
  color: #0B1220;
  letter-spacing: -1.1px;
  margin: 12px 0 28px;
  line-height: 1.14;
}
.en-expect__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.en-expect__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.en-expect__num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #F4F9FC;
  color: #1F6589;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.en-expect__item-title {
  font-weight: 600;
  font-size: 17px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 2px 0 5px;
}
.en-expect__item-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5B6B7E;
  margin: 0;
}
.en-expect__note {
  font-size: 15px;
  line-height: 1.6;
  color: #2A3340;
  margin: 28px 0 0;
}
.en-risk {
  background: #0B1220;
  border: 1px solid #0B1220;
  border-radius: 16px;
  padding: 32px;
  color: #fff;
}
.en-risk__eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
}
.en-risk__title {
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.5px;
  margin: 12px 0 12px;
  line-height: 1.2;
}
.en-risk__lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
}
.en-risk__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.en-risk__item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
.en-risk__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.en-risk__item strong {
  color: #fff;
  font-weight: 600;
}
.en-risk__note {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.en-risk__note strong {
  color: #fff;
  font-weight: 600;
}
.en-refs {
  background: #FFFFFF;
  padding: 80px 0;
  border-top: 1px solid #E5E9EE;
}
.en-refs__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.en-refs__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 36px 24px;
  place-items: center;
  margin-top: 8px;
}
.en-logo {
  font: 700 22px Georgia, serif;
  letter-spacing: 2px;
  color: #0B1220;
  opacity: 0.55;
  white-space: nowrap;
}
.site-footer__grid--en {
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
.footer-col__plain {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────
   Az OKTATÁS-oldalak variánsai.

   A látványtervek két családot rajzolnak, és a különbség nem a komponensek
   anatómiájában van, hanem a súlyozásukban: ugyanaz a kártya keskenyebb
   rácsban, ugyanaz a sor pipával a csillag helyett, ugyanaz a megjegyzés
   sötét dobozban. Ezért variáns-osztályok, nem külön komponensek.
   ───────────────────────────────────────────────────────────────────────── */

/* Négy statisztika egy sorban. A hármas rács a szolgáltatás-oldalaké; négy
   adatnál az utolsó elem külön sorba esne. */
.svc-hero__stats--4 {
  grid-template-columns: repeat(4, auto);
  gap: 28px;
}

/* A csomag-oldalak számsora. Nem rács, hanem tördelő sor: a látványtervben az
   értékek eltérő hosszúak („akár 10 000 USD" és „INGYEN" egymás mellett), és
   egyenlő oszlopokba kényszerítve a hosszabb kettétörik. Az érték is kisebb,
   mert négy adat is elfér egy sorban. */
.svc-hero__stats--pkg {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
}
.svc-hero__stats--pkg .stat__value {
  font-size: 24px;
  letter-spacing: -0.6px;
}

/* A kártya fotója a doboz TETEJÉN, éltől élig: a `.summary-card` 28px-es
   belső margóját negatív margóval visszavesszük, a felső sarkokat pedig a
   kártya sugarára kerekítjük. */
.summary-card__media {
  margin: -28px -28px 20px;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  background: #E8EEF3;
  aspect-ratio: 16 / 10;
}
/* Kép nélkül a hely a helykitöltő SZÖVEGÉT mutatja, középre zárva — ez a
   fotó helye a látványtervben is. */
.summary-card__media {
  display: grid;
  place-items: center;
  font-size: 12.5px;
  color: #8A97A6;
  text-align: center;
  padding: 0 16px;
}
.summary-card__media.has-image {
  display: block;
  padding: 0;
}
.summary-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A pipás lista saját felirata: nem a doboz tetején nyit, hanem a lista
   fölött választ el. */
.summary-card__list-label {
  display: block;
  margin: 0 0 12px;
  color: #5B6B7E;
}

/* Pipa a pillér-sor elején — a csillag-ág párja, azonos geometriával. */
.pillar-row__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Sorszám az építőelem-kártyán, az ikon helyén. A magasság a
   `.buildblock__icon` 40px-es dobozáé, hogy a fejléc ne ugorjon a két
   változat között. */
.buildblock__num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: #1F6589;
  display: inline-flex;
  align-items: center;
  height: 40px;
}

/* Négy modul-kártya egy sorban. */
.feature-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.feature-grid--4 .feature-card {
  padding: 24px 22px;
}

/* Három csatorna-kártya egy sorban: a csomag-oldalak felső rácsa. */
.feature-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* A csomag-oldalak kártyafejléce: a besorolás a cím FÖLÖTT áll, nem mellette.
   A markup sorrendje ugyanaz, csak a tengely fordul, így a kártya egyetlen
   attribútummal vált a két elrendezés között. */
.feature-card--stack .feature-card__head {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}
.feature-card--stack .feature-card__tag {
  color: #1F6589;
}

/* Kiemelt kártya: a látványtervben egy-egy csatorna márkaszínű háttérrel áll,
   jelezve, hogy az a csomag ingyenes vagy kiemelt eleme. */
.feature-card--tint {
  background: #F4F9FC;
  border-color: #D6E7F2;
}

/* Egyhasábos, keskeny szekció-fejléc: felirat, cím és bevezető egymás alatt. */
.section-head--narrow {
  display: block;
  max-width: 680px;
}

/* Keskeny záró sáv: a cím balra, a gombok a sor túlsó végén. A csomag-oldalak
   ezzel zárnak, a nagy, középre zárt változat helyett. */
.final-cta--slim {
  padding: 64px 0;
}
/* A szöveg egymás alatt marad az első hasábban, a gombsor pedig a másodikban
   ül, teljes magasságban középre zárva. Sima flex-sorban a felirat, a cím és a
   bevezető három külön oszlop lenne. */
.final-cta--slim .final-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 40px;
  text-align: left;
}
.final-cta--slim .final-cta__inner > * {
  grid-column: 1;
}
.final-cta--slim .final-cta__title {
  font-size: 34px;
  letter-spacing: -1px;
  margin: 12px 0 0;
  max-width: 620px;
}
.final-cta--slim .final-cta__lead {
  margin: 12px 0 0;
}
.final-cta--slim .final-cta__actions {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .final-cta--slim .final-cta__inner {
    grid-template-columns: 1fr;
  }
  .final-cta--slim .final-cta__actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 24px;
  }
}

/* Kereszt-linkek a csomag-oldalakon. A cím kisebb, hogy a gyűjtő-link elférjen
   mellette a sor túlsó végén, a pirulák pedig a szövegükhöz igazodnak: kilenc
   rövid név négy egyenlő oszlopba tördelve fél sorokat hagyna maga után. */
.link-section--flow .section-head__title--40 {
  font-size: 30px;
  letter-spacing: -0.9px;
}
.link-section--flow .link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.link-section--flow .link-pill {
  padding: 12px 20px;
  border-radius: 999px;
}

/* Csoport-felirat vonallal: a felirat után vékony vonal fut a sor végéig, és
   így a két kártyacsoport látványosan elválik egymástól. */
.svc-areas__label--rule {
  display: flex;
  align-items: center;
  gap: 14px;
}
.svc-areas__label--rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5E9EE;
}

/* Címes összefoglaló kártya: a képes változatban a felirat helyén CÍM áll,
   alatta halvány alcím. A mezők ugyanazok, csak a tipográfiájuk más. */
.summary-card--titled .summary-card__eyebrow {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-transform: none;
  color: #0B1220;
}
.summary-card--titled .summary-card__desc {
  font-size: 13px;
  color: #5B6B7E;
  margin: 4px 0 20px;
}

/* A pipás kártya ÖNÁLLÓ szekcióként. Burkoló szekció nélkül a kártya a
   képernyő széléig érne; ez a szélesség pontosan az, amit egy `.container`
   adna neki (1280px mínusz a kétszer 56px belső margó). */
.checklist-card--section {
  max-width: 1168px;
  margin: 0 auto 96px;
  background: #FFFFFF;
}
.checklist--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
}
/* Két hasábban a sorok többsoros szövegűek, és ott a pipa a SOR TETEJÉHEZ
   igazodik, nem a közepéhez: középre húzva a hosszabb sornál elúszik. */
.checklist--2col .checklist__item {
  align-items: flex-start;
}
@media (max-width: 900px) {
  .checklist--2col {
    grid-template-columns: 1fr;
  }
}

/* Az ajánlatkérő szekció KÁRTYÁS felülete. A sáv világos, a két hasáb pedig
   egyetlen lekerekített dobozba zárva ül egymás mellett: balra a sötét fél a
   szöveggel és az elérhetőségekkel, jobbra az űrlap. A DOM ugyanaz, mint a
   sötét sávnál, csak a burkolat változik. */
.svc-contact--card {
  background: #FFFFFF;
  color: #0B1220;
}
.svc-contact--card .svc-contact__inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 0;
  border: 1px solid #E5E9EE;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(11, 18, 32, 0.4);
  max-width: 1168px;
  padding: 0;
  /* A sötét fél a kártya TELJES magasságát kitölti: `start` igazítással a
     rövidebb hasáb alatt kilátszana a kártya háttere. */
  align-items: stretch;
}
.svc-contact--card .svc-contact__intro {
  background: #0B1220;
  color: #fff;
  padding: 48px 44px;
}
.svc-contact--card .svc-contact__form-card {
  background: #F4F9FC;
  border-radius: 0;
  padding: 44px;
}
@media (max-width: 900px) {
  .svc-contact--card .svc-contact__inner {
    grid-template-columns: 1fr;
  }
}

/* A megjegyzés mint állítás: sötét doboz, nem lábjegyzet. */
.pillar-card__note--dark {
  margin-top: 24px;
  padding: 16px 18px;
  border-top: none;
  border-radius: 10px;
  background: #0B1220;
  color: #FFFFFF;
  font-weight: 500;
}

@media (max-width: 768px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .container--wide {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* A morzsa-sáv itt is a hero felső levegőjét viseli — ugyanazok az értékek,
     mint a lentebbi hero-felülírásokban.

     Az OLDALSÓ margó viszont nem egységes, és ezt megmérni kellett: négy hero
     belső doboza 768px alatt visszaesik a `.container` 24px-ére (svc, ref,
     contact, about), a másik hat marad 56px-en. Egyetlen közös érték ezért
     mindenképp elcsúsztatna — mérve 32px-et. */
  .breadcrumb--bar {
    padding-top: 28px;
  }
  .breadcrumb--svc,
  .breadcrumb--ref,
  .breadcrumb--contact,
  .breadcrumb--about {
    padding-left: 24px;
    padding-right: 24px;
  }
  .breadcrumb--ref,
  .breadcrumb--car,
  .breadcrumb--contact,
  .breadcrumb--pd,
  .breadcrumb--about {
    padding-top: 32px;
  }
  /* A blog-listázó és a cikk heróján nincs mobil felülírás. */
  .breadcrumb--blog,
  .breadcrumb--article {
    padding-top: 52px;
  }
  .section {
    padding: 56px 0;
  }
  .site-header__inner {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .section-head__title {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  .section-head__title--56 {
    font-size: 36px;
  }
  .section-head--split {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 36px;
  }
  .section-head--split-even {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .section-head--why {
    grid-template-columns: 1fr;
  }
  .module-grid {
    grid-template-columns: 1fr;
  }
  .stepper__line {
    display: none;
  }
  .stepper__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .hero {
    padding: 48px 0 40px;
  }
  .hero__title {
    font-size: 44px;
    letter-spacing: -1.2px;
  }
  .system {
    padding: 64px 0;
  }
  .system__title {
    font-size: 48px;
    letter-spacing: -1.8px;
  }
  .in-house {
    padding: 72px 0;
  }
  .in-house__title {
    font-size: 38px;
    letter-spacing: -1.2px;
  }
  .workflow {
    padding: 56px 0;
  }
  .workflow__row {
    grid-template-columns: 48px 1fr;
    gap: 6px 16px;
  }
  .workflow__num {
    grid-row: 1 / span 2;
  }
  .workflow__desc {
    grid-column: 2;
  }
  .workflow__meta {
    text-align: left;
    grid-column: 2;
  }
  .consult {
    padding: 64px 0;
  }
  .consult__title {
    font-size: 38px;
    letter-spacing: -1px;
  }
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .final-cta {
    padding: 64px 0;
  }
  .final-cta__title {
    font-size: 38px;
    letter-spacing: -1px;
  }
  .about-hero {
    padding: 32px 0 48px;
  }
  .about-hero__title {
    font-size: 40px;
  }
  .about-hero__media {
    min-height: 180px;
  }
  .about-facts__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .founder {
    padding: 64px 0;
  }
  .founder__photo {
    /* Mobilon a fix 520px túl magas — a magasság a tartalomra bízva. */
    height: auto;
    min-height: 260px;
  }
  .founder__quote {
    font-size: 24px;
  }
  .team__photo {
    height: 200px;
  }
  .contact-hero {
    padding: 32px 0 44px;
  }
  .contact-hero__title {
    font-size: 40px;
  }
  .contact-hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .office__map {
    height: 220px;
  }
  .company-data {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ref-hero {
    padding: 32px 0 44px;
  }
  .ref-hero__title {
    font-size: 42px;
  }
  .ref-hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .section-head__title--38 {
    font-size: 30px;
  }
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ref-quote {
    padding: 28px;
  }
  .ref-quote__text {
    font-size: 19px;
  }
  .ref-founder {
    padding: 28px;
  }
  .svc-hero {
    padding: 28px 0 44px;
  }
  .svc-hero__title {
    font-size: 34px;
  }
  .why-seo__title {
    font-size: 28px;
  }
  .feature-grid,
  .subfeature-grid {
    grid-template-columns: 1fr;
  }
  .rank__title {
    font-size: 28px;
  }
  .svc-contact {
    padding: 56px 0;
  }
  .svc-contact__title {
    font-size: 28px;
  }
  .svc-contact__form-card {
    padding: 24px;
  }
  .ad-process__title {
    font-size: 28px;
  }
  .statement__title {
    font-size: 32px;
  }
  .svc-hero__title--58 {
    font-size: 36px;
  }
  .ai-platforms {
    padding: 64px 0;
  }
  .ai-platforms__title {
    font-size: 30px;
  }
  .blog-hero__title {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .feat-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .feat-card__title {
    font-size: 26px;
    letter-spacing: -0.8px;
  }
  .newsletter__card {
    padding: 36px 24px;
  }
  .article-hero__title {
    font-size: 32px;
    letter-spacing: -1px;
  }
  .article-prose h2 {
    font-size: 24px;
  }
  .pullquote__q {
    font-size: 20px;
  }
  .pullquote--notice .pullquote__q {
    font-size: 16px;
  }
  .post-newsletter__card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px;
  }
  .pkg-hero {
    padding: 28px 0 44px;
  }
  .pkg-hero__title {
    font-size: 40px;
    letter-spacing: -1.2px;
  }
  .criteria {
    padding: 44px 0;
  }
  .criteria__head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }
  .criteria__grid {
    grid-template-columns: 1fr;
  }
  .pkg-grid-section {
    padding: 56px 0;
  }
  .pkg-grid__title {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .pkg-grid {
    grid-template-columns: 1fr;
  }
  .pkg-cta {
    padding: 56px 0;
  }
  .pkg-cta__title {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .pkg-cta__panel {
    grid-template-columns: 1fr;
  }
  .pkg-cta__aside-title {
    font-size: 28px;
  }
  .pd-hero {
    padding: 32px 0 48px;
  }
  .pd-hero__title {
    font-size: 40px;
    letter-spacing: -1.2px;
  }
  .pd-intro {
    padding: 56px 0;
  }
  .pd-intro__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .pd-included {
    padding: 56px 0;
  }
  .pd-included__head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px;
  }
  .pd-included__title {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .pd-channel-grid {
    grid-template-columns: 1fr;
  }
  .pd-price {
    padding: 56px 0;
  }
  .pd-price__title {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .pd-topics {
    padding: 56px 0;
  }
  .pd-topics__title {
    font-size: 26px;
  }
  .pd-industries {
    padding: 52px 0;
  }
  .pd-industries__title {
    font-size: 24px;
  }
  .os-team {
    padding: 56px 0;
  }
  .os-team__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .os-builder {
    padding: 56px 0;
  }
  .os-builder__title {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .os-timeline {
    padding: 56px 0;
  }
  .os-timeline__title {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .os-timeline__grid {
    grid-template-columns: 1fr;
  }
  .os-cost {
    padding: 56px 0;
  }
  .os-cost__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .os-cost__grid {
    grid-template-columns: 1fr;
  }
  .os-fit {
    padding: 56px 0;
  }
  .os-fit__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .os-fit__grid {
    grid-template-columns: 1fr;
  }
  .car-hero {
    padding: 32px 0 44px;
  }
  .car-hero__title {
    font-size: 40px;
    letter-spacing: -1.2px;
  }
  .car-about {
    padding: 56px 0;
  }
  .car-about__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .car-mission {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .car-jobs {
    padding: 56px 0;
  }
  .car-jobs__title {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .car-benefits {
    padding: 56px 0;
  }
  .car-benefits__title {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .car-team {
    padding: 56px 0;
  }
  .car-team__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .car-past {
    padding: 56px 0;
  }
  .jd-hero {
    padding: 28px 0 0;
  }
  .jd-hero__title {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .jd-body {
    padding: 40px 0 56px;
  }
  .jd-section__title {
    font-size: 24px;
  }
  .jd-more {
    padding: 52px 0;
  }
  .jd-more__grid {
    grid-template-columns: 1fr;
  }
  .gloss-hero {
    padding: 28px 0 36px;
  }
  .gloss-hero__title {
    font-size: 38px;
    letter-spacing: -1.2px;
  }
  .gloss-list {
    padding: 40px 0 56px;
  }
  .gloss-group__grid {
    grid-template-columns: 1fr;
  }
  .en-work {
    padding: 56px 0;
  }
  .en-work__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .en-intl {
    padding: 56px 0;
  }
  .en-intl__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .en-industries {
    padding: 56px 0;
  }
  .en-services {
    padding: 56px 0;
  }
  .en-services__grid {
    grid-template-columns: 1fr 1fr;
  }
  .en-expect {
    padding: 56px 0;
  }
  .en-expect__title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }
  .en-refs {
    padding: 52px 0;
  }
  .en-refs__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .primary-nav {
    display: none;
  }
  .site-header__mega {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .capability-grid {
    grid-template-columns: 1fr;
  }
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .reason-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .topline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .step-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonial-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero__visual {
    height: auto;
  }
  .dash {
    position: static;
  }
  .dash-badge {
    position: static;
    margin-top: 16px;
    max-width: none;
  }
  .logo-wall__grid {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 28px;
  }
  .in-house__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .consult__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .fullstack__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .founder__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .team__intro--aside {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact-form__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .office {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ref-closing {
    grid-template-columns: 1fr;
  }
  .svc-hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .summary-card {
    position: static;
  }
  .qa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-seo {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .rank {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .price-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
  .reason-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .link-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-contact__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ad-process {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .agency-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
  .platform-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .buildblock-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .aiseo-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .topics-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .article-toc {
    display: none;
  }
  .pd-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pd-intro__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pd-why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .pd-price__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
  .pd-topics__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pd-channel-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .os-team__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .os-builder__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .car-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .car-greet {
    flex-direction: column;
    align-items: stretch;
  }
  .car-greet__card {
    margin-right: 0;
  }
  .car-greet__photo {
    width: 100%;
    height: 320px;
    margin-top: 16px;
  }
  .car-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .car-team__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .car-past__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .jd-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .jd-aside {
    position: static;
  }
  .gloss-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gloss-bar {
    top: 73px;
  }
  .gloss-group {
    scroll-margin-top: 120px;
  }
  .en-work__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .en-intl__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .en-industries__grid {
    grid-template-columns: 1fr 1fr;
  }
  .en-expect__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 540px) {
  .phone-link {
    display: none;
  }
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .capability-card {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .case-grid {
    grid-template-columns: 1fr;
  }
  .result-grid {
    grid-template-columns: 1fr;
  }
  .reason-grid {
    grid-template-columns: 1fr;
  }
  .topline-grid {
    grid-template-columns: 1fr;
  }
  .stepper__grid {
    grid-template-columns: 1fr;
  }
  .step-grid {
    grid-template-columns: 1fr;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .topic-grid {
    grid-template-columns: 1fr;
  }
  .hero__title {
    font-size: 36px;
  }
  .hero__stats {
    gap: 28px;
  }
  .logo-wall__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .system__title {
    font-size: 36px;
    letter-spacing: -1.2px;
  }
  .system__note {
    margin-left: 0;
  }
  .in-house__steps {
    grid-template-columns: 1fr;
  }
  .in-house__step {
    border-right: none !important;
  }
  .in-house__step:nth-child(3) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .faq__a {
    margin-right: 0;
  }
  .founder__stats {
    gap: 28px;
  }
  .team__highlight {
    padding: 20px 22px;
  }
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team__more {
    font-size: 26px;
  }
  .form__row {
    grid-template-columns: 1fr;
  }
  .office__grid {
    grid-template-columns: 1fr;
  }
  .svc-hero__stats {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .qa-grid {
    grid-template-columns: 1fr;
  }
  .reason-grid--4 {
    grid-template-columns: 1fr;
  }
  .link-grid {
    grid-template-columns: 1fr;
  }
  .link-grid--2col {
    grid-template-columns: 1fr;
  }
  .tool-grid {
    grid-template-columns: 1fr;
  }
  .ad-process__grid {
    grid-template-columns: 1fr;
  }
  .platform-grid {
    grid-template-columns: 1fr;
  }
  .buildblock-grid {
    grid-template-columns: 1fr;
  }
  .compare__row {
    grid-template-columns: 1fr;
  }
  .compare__cell + .compare__cell {
    border-left: none;
    border-top: 1px solid #E5E9EE;
  }
  .expert-grid {
    grid-template-columns: 1fr;
  }
  .topic-links {
    grid-template-columns: 1fr;
  }
  .post-grid {
    grid-template-columns: 1fr;
  }
  .author-bio__card {
    flex-direction: column;
    gap: 18px;
  }
  .pkg-hero__title {
    font-size: 34px;
  }
  .pkg-hero__stats {
    gap: 28px;
  }
  .pkgcard {
    flex-direction: column;
    gap: 16px;
  }
  .pkg-cta__form {
    padding: 28px;
  }
  .pkg-cta__row {
    grid-template-columns: 1fr;
  }
  .pd-hero__title {
    font-size: 34px;
  }
  .pd-why-grid {
    grid-template-columns: 1fr;
  }
  .pd-topics__links {
    grid-template-columns: 1fr;
  }
  .pd-channel-grid--3 {
    grid-template-columns: 1fr;
  }
  .os-roles {
    grid-template-columns: 1fr 1fr;
  }
  .os-builder__grid {
    grid-template-columns: 1fr;
  }
  .car-hero__title {
    font-size: 34px;
  }
  .job-grid {
    grid-template-columns: 1fr;
  }
  .car-benefits__grid {
    grid-template-columns: 1fr;
  }
  .car-members {
    grid-template-columns: 1fr 1fr;
  }
  .jd-list--2col {
    grid-template-columns: 1fr;
  }
  .jd-fit {
    grid-template-columns: 1fr;
  }
  .en-industries__grid {
    grid-template-columns: 1fr;
  }
  .en-services__grid {
    grid-template-columns: 1fr;
  }
  .en-refs__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1025px) {
  .mobile-nav {
    display: none;
  }
}

@media (max-width: 1200px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .feature-grid--4,
  .feature-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-hero__stats--4 {
    grid-template-columns: repeat(2, auto);
  }
}
@media (max-width: 600px) {
  .feature-grid--4,
  .feature-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Konzultációs szekció, harmadik változat: kártya szekció-címmel, az
   elérhetőségek gombként.

   Forrás: a szolgáltatás-oldalak új látványtervei, `EgyesitettCTA` a közös
   bundle-ben (pl. „Hirdetés audit oldal (standalone) - javított”). A kártya
   maga a meglévő `--card` változat, ez csak a fölé kerülő fejlécet és a sötét
   hasáb alsó blokkját rajzolja át. */
.svc-contact--framed {
  padding: 96px 0;
}
.svc-contact__head {
  margin-bottom: 48px;
}
.svc-contact__head-title {
  max-width: 680px;
  font-weight: 700;
  font-size: 40px;
  color: #0B1220;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin: 12px 0 0;
}
/* A sötét hasáb alja: vékony vonal, alatta a hívás két gombja, majd az
   e-mail sor. A `margin-top: auto` tolja a hasáb aljára, ahogy a rajzon. */
.svc-contact--framed .svc-contact__methods {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Az elérhetőség sorai EGYMÁS ALATT állnak: a felirat, alatta a gomb, alatta a
   másodlagos gomb. Egy sorba rendezve a hasáb szűk hasábjában a második gomb
   kicsúszna vagy tördelne. */
.svc-contact--framed .svc-contact__method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
}
.svc-contact--framed .svc-contact__method-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
/* Az ELSŐ elérhetőség a telefonszám: fehér pirula, mellette a visszahívás
   körvonalas gombja. */
.svc-contact--framed .svc-contact__method:first-child .svc-contact__method-value {
  background: #FFFFFF;
  color: #0B1220;
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 600;
  font-size: 15px;
}
/* Az ikon a piruLÁN BELÜL áll, az érték előtt — a látványterv a telefonszám
   gombjára ezt írja. A burkoló azért sorosan rugalmas, mert az ikon és a
   szöveg alapvonala magától nem esne egybe. Ikon nélkül a `gap` nem látszik:
   a rajz helye üresen nem foglal. */
.svc-contact__method-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.svc-contact__method-value svg {
  flex-shrink: 0;
}
.svc-contact--framed .svc-contact__method:first-child .svc-contact__method-sub {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
}
/* A többi elérhetőség egyszerű sor: bal oldalon a felirat, mellette az érték.
   A felirat nem tördel: hosszabb szövegnél is egy sorban marad, csak szélesebb
   helyet foglal. */
.svc-contact--framed .svc-contact__method:not(:first-child) {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
/* Az elhagyható alsó sor ALÁ kerül, nem a felirat és az érték mellé: az a sor
   már tele van, és mellé szorítva mindhárom tördelni kezd. */
.svc-contact--framed .svc-contact__method:not(:first-child) .svc-contact__method-sub {
  width: 100%;
}
.svc-contact--framed .svc-contact__method:not(:first-child) .svc-contact__method-label {
  min-width: 52px;
  white-space: nowrap;
}
.svc-contact--framed .svc-contact__method:not(:first-child) .svc-contact__method-value {
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
}

/* ===========================================================================
   Esettanulmány
   =========================================================================== */

/* A nyitány a csomag-heróé: kétoszlopos rács, bal oldalon a szöveg, jobbra az
   ügyfél adatlapja. A méretek a látványterv értékei. */
.case-hero {
  background: #FFFFFF;
  padding: 52px 0 0;
}
.case-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.case-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
.case-hero__tags {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.case-hero__tag {
  padding: 4px 12px;
  background: #F4F9FC;
  color: #1F6589;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 999px;
}
.case-hero__title {
  font-weight: 700;
  font-size: 48px;
  line-height: 1.06;
  color: #0B1220;
  letter-spacing: -1.6px;
  margin: 0;
  text-wrap: balance;
}
.case-hero__lead {
  font-size: 19.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 22px 0 30px;
  max-width: 640px;
  text-wrap: pretty;
}
.case-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* A borító a hero alatt, teljes szélességben. A 16:7 a látványterv aránya:
   szélesebb, mint a listázó kártyáié, mert itt az oldal nyitóképe. */
.case-hero__cover {
  margin-top: 44px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 18px;
  overflow: hidden;
  background: #F7F9FB;
}

/* Az ügyfél adatlapja. Ugyanaz a doboz, mint a csomag összefoglalója, csak a
   tartalma kulcs-érték párokból áll, és a bejegyzés mezőiből jön. */
.case-summary {
  background: #F4F9FC;
  border: 1px solid #E8F2F8;
  border-radius: 18px;
  padding: 26px 26px 28px;
}
.case-summary__eyebrow {
  display: block;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1F6589;
}
.case-summary__facts {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case-summary__fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.case-summary__key {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #636d79;
}
.case-summary__value {
  font-size: 14.5px;
  font-weight: 600;
  color: #0B1220;
  line-height: 1.4;
}
.case-summary__note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #E8F2F8;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5B6B7E;
}

/* KPI-sáv. Két felülete van: fehéren a szövegben, sötét dobozban a hero alatt.
   A számok bal oldali vonalkája a design egyetlen díszítése rajta. */
/* A világos sáv a nyitány FOLYTATÁSA, nem külön szekció. A levegő FÖLÖTTE
   kell: a felvezető és a számok közé. Alatta nem, mert ott a következő
   szekció saját belső margója következik. */
.kpi-band-wrap {
  background: #FFFFFF;
  padding: 44px 0 0;
}
/* A sáv után következő szekció nem kezd elölről: a nyitány már adott
   levegőt, a 96 pixeles alapérték itt szakadékot nyitna. */
.kpi-band-wrap + .section {
  padding-top: 36px;
}
/* A sötét sáv a hero borítóképe UTÁN áll, és a látványterv 56 pixeles
   levegőt hagy neki: enélkül a kép aljához tapad, és egy blokknak látszik
   vele. */
.kpi-band-wrap--dark {
  background: #0B1220;
  padding: 52px 0;
  margin-top: 56px;
}
.kpi-band-wrap__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.kpi-band__head {
  max-width: 260px;
}
.kpi-band__eyebrow {
  display: block;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #636d79;
}
.kpi-band-wrap--dark .kpi-band__eyebrow {
  color: rgba(255, 255, 255, 0.5);
}
.kpi-band__title {
  font-size: 20px;
  font-weight: 600;
  color: #0B1220;
  letter-spacing: -0.5px;
  margin-top: 10px;
  line-height: 1.3;
}
.kpi-band-wrap--dark .kpi-band__title {
  color: #FFFFFF;
}
.kpi-band {
  flex: 1;
  min-width: 420px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.kpi-band--lg {
  gap: 32px;
}
.kpi-band__item {
  padding-left: 16px;
  border-left: 2px solid #E8F2F8;
}
.kpi-band--lg .kpi-band__item {
  padding-left: 22px;
}
.kpi-band-wrap--dark .kpi-band__item {
  border-left-color: rgba(255, 255, 255, 0.22);
}
/* A szám EGY SORBAN áll. Két sorba törve a sáv ritmusa borul: a feliratok
   elcsúsznak egymáshoz képest, és a rács szétesik. Ha egy érték nem fér el,
   az az érték hibás, nem a sáv — rövidebb alakot kell írni a mezőbe. */
.kpi-band__value {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -1px;
  color: #1F6589;
  line-height: 1.05;
  white-space: nowrap;
}
.kpi-band--lg .kpi-band__value {
  font-size: 40px;
}
.kpi-band-wrap--dark .kpi-band__value {
  color: #7fc8a9;
}
.kpi-band__label {
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 7px;
  color: #5B6B7E;
}
.kpi-band--lg .kpi-band__label {
  font-size: 14px;
}
.kpi-band-wrap--dark .kpi-band__label {
  color: rgba(255, 255, 255, 0.6);
}

/* Előtte / utána tábla. Három oszlop, a mai érték kiemelve: a szem a jobb
   szélső oszlopot olvassa végig, az a lényeg. */
.before-after {
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  overflow: hidden;
  margin: 32px 0 36px;
}
.before-after__head,
.before-after__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
}
.before-after__head {
  background: #F7F9FB;
  border-bottom: 1px solid #E5E9EE;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #5B6B7E;
}
.before-after__head .before-after__cell {
  padding: 13px 20px;
}
.before-after__row + .before-after__row {
  border-top: 1px solid #EEF1F4;
}
.before-after__row .before-after__cell {
  padding: 15px 20px;
  font-size: 15.5px;
  color: #636d79;
  text-align: right;
}
.before-after__cell--metric {
  text-align: left;
  color: #2A3340;
}
.before-after__row .before-after__cell--metric {
  color: #2A3340;
}
.before-after__row .before-after__cell--after {
  font-weight: 700;
  color: #1F6589;
}

/* --- Az eset szolgáltatásai ---
   Három kártya: cím, esetre szabott mondat, és egy nyilas felirat. A könyvtár
   kártyái mind sorszámmal vagy ikonnal nyitnak, ezért ez saját komponens — a
   keret, a sugár és a felület viszont a többiével azonos. */
.case-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.case-svc {
  display: block;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 24px 24px 22px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.case-svc:hover {
  transform: translateY(-3px);
  border-color: #25759C;
  box-shadow: 0 14px 32px -20px rgba(11, 18, 32, 0.25);
}
.case-svc__title {
  font-weight: 600;
  font-size: 18.5px;
  color: #0B1220;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
  line-height: 1.25;
}
.case-svc__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #636D79;
  margin: 0 0 16px;
}
.case-svc__more {
  font-size: 13.5px;
  font-weight: 600;
  color: #25759C;
}

@media (max-width: 1024px) {
  .case-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .kpi-band {
    min-width: 0;
  }
}
@media (max-width: 720px) {
  .case-services__grid {
    grid-template-columns: 1fr;
  }
  .case-hero__title {
    font-size: 34px;
    letter-spacing: -1px;
  }
  .kpi-band {
    grid-template-columns: 1fr;
  }
  .before-after__head,
  .before-after__row {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

/* Az esettanulmány-listázó kártyái. A rács és a lapozó a blog listaoldaláé,
   csak a kártya más: cikknél szerző és dátum, esetnél iparág, időtáv és a
   legerősebb szám. */
.feat-case-wrap {
  grid-column: 1 / -1;
}
.feat-case {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  text-decoration: none;
}
/* A borító képaránya ugyanaz, mint a blog kiemelt kártyáján (`.feat-card__cover`),
   mert a kettő UGYANAZT a képméretet kapja, az `m360-cover` vágatot. A korábbi
   16/11 ennél magasabb doboz volt, az `object-fit: cover` pedig a magassághoz
   igazított, tehát a kép két szélét levágta: a borítókra írt szöveg eleje
   eltűnt (M360-303). */
.feat-case__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 18px;
  background: #F7F9FB;
}
.feat-case__head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.feat-case__badge {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 11px;
  background: #25759c;
  color: #FFFFFF;
  border-radius: 999px;
}
.feat-case__meta {
  font-size: 13px;
  color: #5B6B7E;
}
.feat-case__title {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  color: #0B1220;
  letter-spacing: -1.3px;
  margin: 0;
  text-wrap: balance;
}
.feat-case__excerpt {
  font-size: 17px;
  line-height: 1.62;
  color: #5B6B7E;
  margin: 18px 0 26px;
  max-width: 520px;
  text-wrap: pretty;
}
.feat-case .kpi-band {
  margin-bottom: 28px;
  min-width: 0;
}
.feat-case__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.feat-case__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.feat-case__tag,
.case-light__tag {
  padding: 4px 12px;
  background: #F4F9FC;
  color: #1F6589;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  border-radius: 999px;
}

.case-light {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.case-light__cover {
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 16px;
  aspect-ratio: 16 / 10;
  background: #F7F9FB;
}
.case-light__tags {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.case-light__tag {
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 10px;
}
.case-light__title {
  font-weight: 600;
  font-size: 18.5px;
  color: #0B1220;
  letter-spacing: -0.3px;
  margin: 0 0 14px;
  line-height: 1.28;
  flex: 1;
  text-wrap: pretty;
}
.case-light__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #EEF1F4;
}
.case-light__stat-value {
  font-weight: 700;
  font-size: 20px;
  color: #1F6589;
  letter-spacing: -0.6px;
}
.case-light__stat-label {
  font-size: 12.5px;
  color: #5B6B7E;
  line-height: 1.35;
}
.case-light__meta {
  font-size: 12.5px;
  color: #636d79;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .feat-case {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .feat-case__title {
    font-size: 28px;
  }
}
/* Adatlap nélkül a szöveg a teljes szélességet kapja. */
.case-hero__grid--wide {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------------------
   404 oldal

   A szekciók a meglévő elemkészletből állnak, tehát csak az van itt, aminek
   a designban nincs párja: a hero keresősora, a kártya lábának oszlopos
   változata, és a kártyalista linkes sora.
   --------------------------------------------------------------------------- */
.nf-search {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  max-width: 560px;
}
.nf-search__input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  color: #0B1220;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid #E5E9EE;
  background: #fff;
  outline: none;
}
.nf-search__input::placeholder {
  color: #636d79;
}
.nf-search__input:focus {
  border-color: #25759c;
}
.nf-search__btn {
  flex-shrink: 0;
}

/* A kártya lába itt HÁROM elem egymás alatt (felirat, mondat, telefonszám),
   nem a szolgáltatás-hero két elemű, egy sorba rendezett lába. */
.nf-hero__foot {
  display: block;
}
.nf-hero__foot .eyebrow {
  display: block;
  margin-bottom: 10px;
}
.nf-hero__foot .summary-card__foot-text {
  margin: 0;
  font-size: 14.5px;
}
.nf-hero__phone {
  margin-top: 14px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: #0B1220;
}

/* A kártyalista sora, ha hivatkozás. A pipa a helyén marad: a sor attól még
   felsorolás, hogy el is visz valahova. */
.feature-list__link {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.feature-list__link:hover {
  color: #25759c;
}

@media (max-width: 640px) {
  .nf-search {
    flex-direction: column;
  }
}

/* A csillagsor. A sáv 9 pixeles rése a csillag és a SZÖVEG közé való; a
   csillagok egymáshoz tartoznak, tehát közelebb állnak. Burkoló elem nélkül,
   hogy az egycsillagos eset markupja karakterre a handoffé maradjon. */
.rating-badge svg + svg {
  margin-left: -5px;
}

/* A kártyák választható gombja (M360-185). A látványtervben egyik kártya sem
   visel gombot, tehát ez nem a handoff felülírása: a kapcsoló nélkül a
   kimenet karakterre változatlan marad. A gomb a kártya aljára kerül, a
   felsorolástól elválasztva. */
.feature-card__cta,
.subfeature-card__cta {
  margin-top: 20px;
}
.feature-card__note + .feature-card__cta {
  margin-top: 14px;
}

/* ---------------------------------------------------------------------------
   Kvíz (M360-203)

   A handoff nem tartalmaz kvízt, ezért a szekció a téma meglévő
   formakészletéből épül: ugyanaz a kártya-keret, ugyanazok a színek és
   ugyanaz a gomb, mint mindenütt. Új vizuális nyelvet nem találunk ki.
   --------------------------------------------------------------------------- */
.quiz {
  background: #F7F9FB;
  border: 1px solid #E5E9EE;
  border-radius: 16px;
  padding: 32px;
  margin: 40px 0;
}
.quiz__title {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.6px;
  color: #0B1220;
  margin: 12px 0 0;
  line-height: 1.2;
}
.quiz__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5B6B7E;
  margin: 10px 0 0;
}
.quiz__list {
  list-style: none;
  counter-reset: quiz;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quiz__item {
  counter-increment: quiz;
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 12px;
  padding: 20px 22px;
}
.quiz__item--hit {
  border-color: #7fc8a9;
}
.quiz__item--miss {
  border-color: #e8b756;
}
.quiz__question {
  font-weight: 600;
  font-size: 16px;
  color: #0B1220;
  margin: 0 0 14px;
  line-height: 1.4;
}
.quiz__question::before {
  content: counter(quiz, decimal-leading-zero);
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  color: #25759c;
  margin-right: 10px;
}
.quiz__answers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.45;
  color: #0B1220;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background 0.12s;
}
.quiz__option:hover {
  background: #F4F9FC;
}
.quiz__radio {
  margin-top: 2px;
  accent-color: #25759c;
  flex-shrink: 0;
}

/* Az ellenőrzés UTÁN: a helyes válasz mindig kiemelve, a hibás választás
   megjelölve. A kettő külön szín, mert két külön információ. */
.quiz--checked .quiz__answer--right .quiz__option {
  background: #EAF6F0;
  color: #1F6589;
  font-weight: 600;
}
.quiz--checked .quiz__answer--wrong .quiz__option {
  background: #FDF4E4;
  text-decoration: line-through;
  text-decoration-color: #C9873A;
}
.quiz--checked .quiz__option {
  cursor: default;
  pointer-events: none;
}
.quiz__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.quiz__score {
  font-weight: 700;
  font-size: 16px;
  color: #0B1220;
  margin: 0;
}

@media (max-width: 640px) {
  .quiz {
    padding: 22px 18px;
  }
  .quiz__item {
    padding: 16px 16px;
  }
}

/* A megosztó sor „link másolása" gombja `button`, nem `a`: itt marad, és a
   vágólapot írja (M360-206). A böngésző alapértelmezett gomb-stílusát
   semlegesítjük, hogy a három gomb pontosan ugyanúgy nézzen ki. */
button.article-toc__share-btn {
  padding: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
}
.article-toc__share-btn--done {
  border-color: #3DA5D9;
  color: #25759c;
  background: #EEF7FC;
}

/* A cikk prózájának három vendége (M360-197). A látványterv nem ismer sem
   táblázatot, sem beágyazott videót, a régi cikkekben viszont van belőlük,
   és a tartalom nem veszhet el. Ezért a mag blokkjai jönnek, a próza saját
   tokenjeire hangolva: ugyanaz a betűméret, ugyanaz a keret-szín, ugyanaz a
   sugár, mint a szomszédos elemeké. */
.article-prose .wp-block-table {
  margin: 0 0 24px;
  overflow-x: auto;
}
.article-prose .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  color: #2A3340;
}
.article-prose .wp-block-table td,
.article-prose .wp-block-table th {
  border: 1px solid #E5E9EE;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.article-prose .wp-block-table tr:first-child td,
.article-prose .wp-block-table th {
  background: #F7F9FB;
  color: #0B1220;
  font-weight: 600;
}

/* A beágyazás arányát a MAG adja (`responsive-embeds`, inc/setup.php), ezért
   itt csak a térköz és a sarok marad. Saját arány-szabály egy szerkesztői
   újramentés után összeadódna a magéval. */
.article-prose .wp-block-embed,
.article-prose .wp-block-video {
  margin: 0 0 24px;
}
.article-prose .wp-block-embed iframe {
  border: 0;
  border-radius: 12px;
}
.article-prose .wp-block-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Kód a szövegben. Harminc előfordulás hét cikkben, eddig a böngésző
   alapértelmezett monospace-ével, keret és háttér nélkül. */
.article-prose code {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.92em;
  background: #F1F4F7;
  border: 1px solid #E5E9EE;
  border-radius: 6px;
  padding: 1px 6px;
  color: #0B1220;
  word-break: break-word;
}

/* A konzultációs szekció palettája a kártyás változatokban (M360-159).
 *
 * A hiba nem specifikusság, hanem SORREND. A `.section--soft`, `--warm` és
 * `--tint` a stíluslap elején áll (196-205. sor), a `.svc-contact--card`
 * viszont a végén (10984). Mindkettő egy osztály, tehát azonos fajsúlyú, és
 * azonos fajsúlynál a KÉSŐBBI nyer: a kártya fehérje mindig lefutotta a
 * palettát, hiába állította át a szerkesztő.
 *
 * Ugyanez a többi blokkon azért NEM jelentkezik: azok a `.section` osztályt
 * viselik, ami a 166. soron, tehát a paletta ELŐTT állítja a hátteret.
 *
 * A két osztály együtt már erősebb, mint a kártya egymaga. Csak a hátteret
 * írjuk felül: a kártya szövegszíne és a többi tulajdonsága marad.
 *
 * A sötét változatra nem vonatkozik, és ez szándékos: ott a sáv színe a
 * felépítés része (a szöveg és a gombok is fehérek rajta), ezért a
 * paletta-vezérlő meg sem jelenik. */
.svc-contact--card.section--soft {
  background: #F7F9FB;
}
.svc-contact--card.section--warm {
  background: #FAFAF7;
}
.svc-contact--card.section--warm-2 {
  background: #FBFBFA;
}
.svc-contact--card.section--tint {
  background: #F4F9FC;
}

/* ---------------------------------------------------------------------------
   SZÓTÁRI FOGALOM OLDALA (M360-224)

   A látványterv (`360 Marketing - Online marketing szótár oldal (standalone)`)
   a fogalom-oldalt kéthasábosra tervezi: balra a szócikk, jobbra ragadós
   oldalsáv. A design-rendszer `main.css`-e ehhez nem hozott osztálycsaládot,
   mert a standalone export inline stílusokkal dolgozik — ez a szakasz az
   onnan leképezett család, ugyanazokkal az értékekkel.
   --------------------------------------------------------------------------- */

.gloss-term {
  padding: 36px 0 80px;
  background: #FFFFFF;
}
.gloss-term__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}
.gloss-term__main {
  min-width: 0;
}

/* --- A szócikk fejléce --- */
.gloss-term__cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* A pötty a felirat színét veszi fel: a csoport-szín egy helyen dől el
   (`.gloss-card__cat--*`), és a jelölő magától követi. */
.gloss-term__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.gloss-term__title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.6px;
  color: #0B1220;
  margin: 0;
}
/* A kiemelt definíció: bal oldali vonal, nem idézet-blokk. A designban ez a
   mondat a szócikk tétele, a folyószöveg pedig a kifejtése. */
.gloss-term__lead {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  color: #0B1220;
  margin: 26px 0 0;
  border-left: 3px solid #25759C;
  padding-left: 22px;
}

/* --- Előző / következő ---
   KÖZÖS komponens: a szótári fogalom és az esettanulmány alján is ez áll. */
.nav-pair {
  display: flex;
  gap: 14px;
  margin-top: 48px;
  border-top: 1px solid #E5E9EE;
  padding-top: 28px;
}
.nav-card {
  flex: 1;
  display: block;
  border: 1px solid #E5E9EE;
  border-radius: 14px;
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.nav-card:hover {
  border-color: #25759C;
}
/* A „következő" akkor is jobbra áll, ha nincs „előző": a szélső fogalmaknál
   az egyetlen kártya nem ugorhat át a másik oldalra. */
.nav-card--next {
  text-align: right;
  margin-left: auto;
}
.nav-card__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #636D79;
}
.nav-card__title {
  font-size: 15px;
  font-weight: 600;
  color: #0B1220;
  margin-top: 7px;
  line-height: 1.3;
}

/* --- Az oldalsáv --- */
.gloss-term__aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gloss-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #25759C;
  text-decoration: none;
}
.gloss-back:hover {
  text-decoration: underline;
}
.gloss-ask {
  background: #0B1220;
  border-radius: 18px;
  padding: 28px 26px;
  color: #FFFFFF;
}
.gloss-ask__head {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 16px;
}
/* A `min-height` ÉS a `padding` NULLÁZÁSA KELL, nem elhagyható. A közös
   `.placeholder` alap 160 pixeles minimum-magasságot és 24 pixeles belső
   teret visz — nagy kép-helyekhez való, és ott helyes. Egy 48 pixeles
   avatarnál viszont a `min-height` LEGYŐZI a `height`-et, tehát a kör
   48×160-as ovális lesz, a benne álló `object-fit: cover` kép pedig
   nyújtottnak látszik. Ugyanez a nullázás áll a Kapcsolat oldal
   `contact-note__avatar`-jánál is. */
.gloss-ask__avatar {
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
}
.gloss-ask__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
}
.gloss-ask__role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}
.gloss-ask__text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 18px;
}
.gloss-ask__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.gloss-ask__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 16px;
  white-space: nowrap;
}
.gloss-ask__btn--light {
  background: #FFFFFF;
  color: #0B1220;
}
.gloss-ask__btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

/* --- Kapcsolódó fogalmak --- */
.gloss-related {
  border: 1px solid #E5E9EE;
  border-radius: 18px;
  padding: 22px 24px;
}
.gloss-related__label {
  display: block;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #25759C;
}
.gloss-related__list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.gloss-related__item {
  padding: 8px 0;
  border-top: 1px solid #EEF1F4;
}
.gloss-related__item:first-child {
  border-top: 0;
}
.gloss-related__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #5B6B7E;
  text-decoration: none;
}
.gloss-related__link:hover {
  color: #25759C;
}
.gloss-related__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #25759C;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Cikk-értékelő blokk, a Helpful bővítményhez (M360-177)

   A markupot a téma adja, nem a bővítmény: `helpful/helpful.php` felülírja a
   sajátját. A bővítmény `blank` témán áll, tehát saját stílust nem hoz — a
   megjelenés teljes egészében innen jön, ahogy a régi oldalon is a témából
   jött.

   A `.helpful-*` osztályokra a bővítmény JS-e köt, a `.helpful__*`-okra a
   design. A kettő szándékosan külön él ugyanazon az elemen: a JS-szerződést
   nem nevezhetjük át, a designt viszont a téma BEM-konvenciója szerint írjuk.

   MINDEN BELSŐ SZABÁLY A `.helpful`-RÓL INDUL, és ez nem stílus kérdése. A
   blokk a cikk szövegoszlopában áll, ahol a `.article-prose p` (0,1,1) minden
   bekezdésre ráteszi a próza méretét és a 20 pixeles alsó margót. Egy csupasz
   `.helpful__sub` (0,1,0) ennél gyengébb, tehát alulmaradna: a felirat 14 helyett
   17 pixeles lenne, a két sor közé 20 pixel kerülne, és a sor 1 pixellel
   túlnőve a gombsort a következő sorba tördelné.

   A SORMAGASSÁG A GYÖKÉREN ÁLL VISSZA `normal`-ra. A látványterv végig ezzel
   számol, a cikk-törzs viszont 1.6-ot örökít. Saját sormagasságokat írni
   elemenként nem megoldás: mérve mindegyik mellément, a gomb 42 helyett 39
   pixel magas lett, a számláló 16 helyett 12, az alcím 18 helyett 21. Egyetlen
   helyen visszaállítva mind a hat elem magassága magától a tervre esik.
   --------------------------------------------------------------------------- */
.helpful {
  border-top: 1px solid #E5E9EE;
  border-bottom: 1px solid #E5E9EE;
  padding: 26px 0;
  margin: 48px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #0B1220;
  line-height: normal;
}
.helpful .helpful__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Szavazás után a bővítmény JS-e ELTÁVOLÍTJA a fejlécet és a gombsort, tehát
   ez a sor kiürül. Üresen is megtartaná a `gap`-et, és a köszönő szöveg fölött
   egy üres sáv maradna. */
.helpful .helpful__top:empty {
  display: none;
}

/* A szöveg-blokk zsugorodhat, a gombsor nem: a gombokat a feliratuk méretezi,
   a kérdés viszont tud tördelni. Enélkül egyetlen pixel túlnyúlás a gombsort
   a következő sorba dobná. */
.helpful .helpful__intro {
  flex: 1 1 auto;
  min-width: 0;
}
.helpful .helpful__question {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  /* A kettő `<p>`, tehát a `.article-prose p` KÖZVETLENÜL ír rájuk
     sormagasságot, a közvetlen érték pedig üti a gyökérről öröklöttet.
     A többi elem nem bekezdés, azok maguktól a `normal`-t öröklik. */
  line-height: normal;
  color: #0B1220;
}
.helpful .helpful__sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: normal;
  color: #5B6B7E;
}
.helpful .helpful__buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.helpful .helpful__vote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #E5E9EE;
  color: #0B1220;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.helpful .helpful__vote:hover {
  border-color: #287FAA;
  color: #287FAA;
  transform: translateY(-1px);
}
.helpful .helpful__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.helpful .helpful__count {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #5B6B7E;
}

/* A bővítmény a beérkezett szavazat után MINDKÉT gombot letiltja, mielőtt
   eltávolítaná őket. A pillanat rövid, de látszik. */
.helpful .helpful__vote[disabled] {
  cursor: default;
  opacity: .55;
  transform: none;
}
.helpful .helpful__vote[disabled]:hover {
  border-color: #E5E9EE;
  color: #0B1220;
}
.helpful .helpful__stat {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.helpful .helpful__pct {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1;
}
.helpful .helpful__bar {
  flex: 1;
  min-width: 80px;
  height: 4px;
  border-radius: 999px;
  background: #E5E9EE;
  overflow: hidden;
}
.helpful .helpful__bar i {
  display: block;
  height: 100%;
  background: #287FAA;
  border-radius: 999px;
  transition: width .5s ease;
}
.helpful .helpful__total {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #5B6B7E;
  flex-shrink: 0;
}