@import url('variables.css');

/* Minimal reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

/* Sima görgetés a horgony-linkekhez (header menü, hero CTA stb.); a fix fejléc
   miatt scroll-padding-top nélkül a célszekció teteje eltűnne a header alatt */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

/* Alap tipográfia */
body {
  font-family: 'Inter', sans-serif;
  color: var(--color-text-primary);
  background-color: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height);
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout konstansok
   ========================================================================== */
:root {
  --header-height: 80px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

/* Másodlagos gomb – elsősorban sötét hátterű (pl. hero) szekciókhoz tervezve */
.btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

/* Másodlagos gomb VILÁGOS hátterű szekciókhoz – a .btn-secondary fehér szegélye/szövege ott
   láthatatlan lenne. Teal (var(--color-primary)) keret + szöveg, transzparens háttér – kisebb
   súlyú, "érdeklődés" jellegű CTA-khoz, amikor nem a fő konverziós pont a cél (pl. BIM aloldal
   CDE-érdeklődés gombja). */
.btn-outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-outline-primary:hover {
  background-color: rgba(42, 157, 143, 0.08);
  transform: translateY(-1px);
}

/* Valódi logókép a header-ben (26. lépés, felváltja a korábbi szöveges placeholdert). */
.header-logo {
  display: flex;
  align-items: center;
}

.header-logo-img {
  display: block;
  height: 42px;
  width: auto;
}

/* Szöveges logó-placeholder — 26. lépés óta MÁR CSAK a footer sötét/monokróm változatához
   kell (ld. footer.php, .logo-placeholder.logo-placeholder--footer), a header a fenti
   .header-logo/.header-logo-img osztályokra váltott. Nem holt kód, ne töröld. */
.logo-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 42px;
  text-decoration: none;
  line-height: 1.15;
}

.logo-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.logo-text-accent {
  color: var(--color-primary);
}

.logo-subtext {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

.site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-height);
}

.main-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0.5rem 0;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-caret {
  color: var(--color-gray-dark);
  transition: transform 0.2s ease;
}

.badge-ai {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  line-height: 1.4;
}

.ext-icon {
  font-size: 0.85em;
  color: var(--color-gray-dark);
}

/* Gombon belül (pl. Tanácsadás CTA) a nyíl a gomb szövegszínét vegye fel, ne a szürkét */
.btn .ext-icon {
  color: inherit;
}

/* "Szoftverek" dropdown */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 300px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 50;
}

@media (min-width: 768px) {
  .nav-item--dropdown:hover .nav-dropdown,
  .nav-item--dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-item--dropdown:hover .nav-caret,
  .nav-item--dropdown.is-open .nav-caret {
    transform: rotate(180deg);
  }
}

.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text-primary);
}

.nav-dropdown-item:hover {
  background-color: var(--color-bg-light);
}

.nav-dropdown-icon {
  font-size: 1.05rem;
  line-height: 1.4;
}

.nav-dropdown-text {
  display: flex;
  flex-direction: column;
}

.nav-dropdown-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.nav-dropdown-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Hamburger (mobil) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobil fejléc / lenyíló menü, < 768px */
@media (max-width: 767px) {
  .hamburger {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0 2rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    box-shadow: 0 16px 24px rgba(15, 23, 42, 0.1);
  }

  .site-header.nav-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid var(--color-bg-light);
  }

  .nav-link {
    width: 100%;
    padding: 1rem 1.5rem;
    justify-content: space-between;
  }

  /* "Szoftverek" – mobilon accordion, nem hoverre nyíló dropdown */
  .nav-dropdown {
    position: static;
    margin-top: 0;
    min-width: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-item--dropdown.is-open .nav-dropdown {
    max-height: 500px;
    padding: 0.25rem 1.5rem 1rem;
  }

  .nav-item--dropdown.is-open .nav-caret {
    transform: rotate(180deg);
  }

  .nav-dropdown-item {
    padding: 0.6rem 0.5rem;
  }

  .header-cta {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: var(--color-bg-dark);
  color: #ffffff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding: 4rem 0 3rem;
}

.footer-col-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
}

.footer-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-link-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.15s ease;
}

.footer-link-list a:hover {
  color: var(--color-primary);
}

.logo-placeholder--footer .logo-text {
  color: #ffffff;
}

.logo-placeholder--footer .logo-subtext {
  color: rgba(255, 255, 255, 0.55);
}

.footer-about-text {
  margin-top: 1rem;
  max-width: 320px;
  font-size: 0.87rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

.footer-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-newsletter-title {
  font-weight: 600;
  font-size: 1rem;
  max-width: 420px;
}

.footer-newsletter-input {
  min-width: 240px;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-button);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
}

.footer-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.footer-newsletter-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.08);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.25rem 0;
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a {
  color: inherit;
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding: 3rem 0 2rem;
  }

  .footer-newsletter {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-newsletter-form {
    width: 100%;
  }

  .footer-newsletter-input {
    flex: 1;
    min-width: 0;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Hero (SZEKCIÓ 1)
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 85vh;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

/* Hero háttérkép (assets/images/hero.webp/.jpg, optimalizált – eredeti hero.png megtartva
   tartaléknak) + sötét overlay a szöveg olvashatóságáért.
   image-set(): a böngésző a type() alapján automatikusan a WebP-t választja, ha támogatja,
   különben a JPEG-re esik vissza. A sima url()-es sor MARAD az image-set ELŐTT – ez a
   fallback azoknak a (ma már elenyésző) böngészőknek, amik magát az image-set()-et sem
   ismerik (ott a teljes deklaráció érvénytelen, a korábbi, sima url()-es sor marad érvényben). */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../images/hero.jpg');
  background-image: -webkit-image-set(
    url('../images/hero.webp') type('image/webp') 1x,
    url('../images/hero.jpg') type('image/jpeg') 1x
  );
  background-image: image-set(
    url('../images/hero.webp') type('image/webp') 1x,
    url('../images/hero.jpg') type('image/jpeg') 1x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-dark);
}

/* Balról jobbra halványuló sötét réteg – a szöveg a bal oldalon ül, jobbra jobban látszik a kép */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.85) 0%,
    rgba(15, 23, 42, 0.62) 42%,
    rgba(15, 23, 42, 0.32) 75%,
    rgba(15, 23, 42, 0.18) 100%
  );
}

/* Alul is egy kis extra sötétítés a trust-ikonsor kontrasztjához */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.35) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.hero-content {
  max-width: 620px;
}

.hero-title {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.hero-subtitle {
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.hero-btn-primary,
.hero-btn-secondary {
  padding: 0.85rem 1.75rem;
  font-size: 0.95rem;
}

.hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  list-style: none;
}

.hero-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}

.hero-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-cta-group {
    flex-direction: column;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    text-align: center;
  }

  .hero-trust-list {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Mobilon a szöveg teljes szélességben fut, ezért egyenletes, erősebb sötétítés kell
     a bal→jobb halványuló gradiens helyett, különben a jobb oldali szöveg kontrasztja gyenge lenne */
  .hero-bg::before {
    background: rgba(15, 23, 42, 0.68);
  }

  .hero-bg::after {
    background: rgba(15, 23, 42, 0.15);
  }
}

/* ==========================================================================
   Szekció-cím – közös elem, később más szekciók is használják
   ========================================================================== */
.section-title {
  max-width: 760px;
  margin: 0 auto 3rem;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
  text-align: center;
}

/* 40. lépés: közös, ÚJRAFELHASZNÁLHATÓ alcím-elem összetett (fő cím + rövid kiegészítés)
   szekció-címekhez – önálló <p> a H2 UTÁN, nem a H2-BE ágyazva (tiszta H2 szemantika marad).
   Kapitälchen-jellegű (nagybetűs + laza betűköz) Teal felirat, kis méretben. Amelyik szekció
   használja, annak a saját .section-title-jén a margin-bottom-ot kell szűkebbre állítani (ld.
   pl. .adminisztracio .section-title), hogy a cím és az alcím közel kerüljön egymáshoz, az
   alcím pedig hozza a normál ~3rem térközt a rákövetkező tartalom előtt. */
.section-subtitle {
  display: block;
  max-width: 760px;
  margin: 0 auto 3rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
}

/* 41. lépés: közös, ÚJRAFELHASZNÁLHATÓ szélesítő módosító – kizárólag a SZÉLESSÉGÉRT felel,
   a szín/keret/háttér a saját dobozon (pl. .adminisztracio-closing/.epitoipar-specialitas-
   closing) marad, hogy azok megtartsák egyedi színezésüket. Negatív oldalmargóval "kilép" a
   .container 1.5rem-es paddingjéből, így a doboz a .container KÜLSŐ határáig ér (max. 1200px)
   – szemben a felette lévő 4 oszlopos ráccsal, ami csak a .container belső (padding utáni)
   szélességét tölti ki. A belső padding a kompenzáció mértékével megnövelve (1.5rem-mel
   nagyobb, mint az eredeti 2.25rem), hogy a szöveg vizuálisan ne csússzon a doboz szélére.
   Szándékosan NEM 100vw-alapú "full-bleed" trükk (ami a viewport szélén futna ki, és
   görgetősáv-szélesség-eltérésből scrollbugot okozhatna) – ez a megoldás mindig a .container
   1200px-es keretén belül marad, tehát semmilyen szélességen nem eredményezhet vízszintes
   túlcsordulást. */
.cta-box-wide {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}

@media (max-width: 767px) {
  .cta-box-wide {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

/* ==========================================================================
   Értékajánlat (SZEKCIÓ 2)
   ========================================================================== */
.value-prop {
  background-color: #ffffff;
  padding: 5rem 0;
}

.value-prop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.value-card {
  background-color: var(--color-bg-light);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.value-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.1);
}

.value-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background-color: rgba(42, 157, 143, 0.1);
  color: var(--color-primary);
}

.value-card-icon svg {
  width: 26px;
  height: 26px;
}

.value-card-title {
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.value-card-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 991px) {
  .value-prop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .value-prop {
    padding: 3rem 0;
  }

  .section-title {
    margin-bottom: 2rem;
  }

  .value-prop-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   Szoftverportfólió (SZEKCIÓ 3)
   ========================================================================== */
.portfolio-block {
  padding: 5rem 0;
}

.portfolio-block--bexel {
  background-color: #ffffff;
}

.portfolio-block--plannerly {
  background-color: var(--color-bg-light);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.portfolio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3.5rem;
}

/* Alapból: .portfolio-text a DOM-ban elöl (bal oldal), .portfolio-visual utána (jobb oldal) –
   ez a Plannerly (3.2) blokk elrendezése. A BEXEL (3.1) blokk a --visual-left módosítóval
   vizuálisan felcseréli az oldalakat, DOM-sorrend módosítása nélkül (ez fontos a mobil
   "szöveg mindig felül" szabályhoz, ld. lentebb a media query-ben). */
.portfolio-row--visual-left .portfolio-visual {
  order: -1;
}

.portfolio-text h3 {
  margin-bottom: 1rem;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.portfolio-text p {
  max-width: 520px;
  margin-bottom: 1.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.badge-soon {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background-color: rgba(42, 157, 143, 0.12);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Kb. 16:9 arányú, később valódi screenshotra/videóra cserélendő doboz */
.portfolio-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 1.5rem;
  border: 2px dashed var(--color-gray-light);
  border-radius: var(--radius-button);
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  text-align: center;
}

.portfolio-placeholder-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-gray-dark);
}

/* Valódi screenshotok (BEXEL Manager / Plannerly) – szándékosan a kép saját, természetes
   képarányában jelenik meg (nincs kényszerített 16:9 aspect-ratio/object-fit:cover, mint a
   fenti placeholdernél), mert a bexel_1024.jpg majdnem négyzetes (1014x1034) – 16:9-be
   kényszerítve jelentős részét levágná. A plannerly_1024.jpg történetesen pontosan 16:9
   (1024x576), így az a két blokk vizuális magassága eltérő marad, ez elfogadott. */
.portfolio-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-button);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

@media (max-width: 767px) {
  .portfolio-block {
    padding: 3rem 0;
  }

  .portfolio-row {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Mobilon mindig a szöveg van felül, függetlenül a desktop --visual-left módosítótól */
  .portfolio-row--visual-left .portfolio-visual {
    order: 0;
  }

  .portfolio-text p {
    max-width: none;
  }
}

/* ==========================================================================
   AI Innovációs Labor (SZEKCIÓ 4)
   ========================================================================== */
.ai-labor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5.5rem 0;
  background-color: var(--color-bg-dark);
  color: #ffffff;
}

/* Finom, halvány Teal glow-foltok – szándékosan visszafogott, nem rácsmintás, hogy ne legyen zajos */
.ai-labor-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 85% 12%, rgba(42, 157, 143, 0.22), transparent 45%),
    radial-gradient(circle at 8% 92%, rgba(42, 157, 143, 0.12), transparent 42%);
}

.ai-labor .section-title {
  margin-bottom: 1rem;
  color: #ffffff;
}

.ai-labor-subtitle {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.ai-labor-intro {
  max-width: 820px;
  margin: -2.25rem auto 3.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
}

.ai-feature-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.75rem 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-button);
  background-color: rgba(255, 255, 255, 0.05);
}

.ai-feature-title {
  margin-bottom: 1.5rem;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.6rem);
  font-weight: 700;
  color: #ffffff;
}

.ai-feature-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.25rem;
  list-style: none;
}

.ai-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.ai-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .ai-labor {
    padding: 3rem 0;
  }

  .ai-labor-subtitle {
    margin-bottom: 2.5rem;
  }

  .ai-labor-intro {
    margin-top: -1.5rem;
    margin-bottom: 2.5rem;
  }

  .ai-feature-card {
    padding: 2rem 1.5rem;
  }
}

/* ==========================================================================
   Szakértői tanácsadás & stratégia (SZEKCIÓ 5)
   ========================================================================== */
.consulting {
  padding: 5rem 0;
  background-color: #ffffff;
}

.consulting-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 3.5rem;
  margin-bottom: 3.5rem;
}

.consulting-title {
  margin-bottom: 1.25rem;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.consulting-desc {
  max-width: 520px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Kb. 4:3 arányú, később valódi csapatfotóra cserélendő doboz */
.consulting-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  border: 2px dashed var(--color-gray-light);
  border-radius: var(--radius-button);
  background-color: var(--color-bg-light);
  text-align: center;
}

.consulting-placeholder-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-gray-dark);
}

.consulting-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.consulting-pillar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-button);
  background-color: var(--color-bg-light);
}

.consulting-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(42, 157, 143, 0.1);
  color: var(--color-primary);
}

.consulting-pillar-icon svg {
  width: 24px;
  height: 24px;
}

.consulting-pillar-text {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-primary);
}

.consulting-cta-wrap {
  text-align: center;
}

@media (max-width: 767px) {
  .consulting {
    padding: 3rem 0;
  }

  .consulting-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }

  .consulting-desc {
    max-width: none;
  }

  .consulting-pillars {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }
}

/* ==========================================================================
   Tudásbázis – listaoldal + cikkoldal (/tudasbazis/)
   ========================================================================== */
.tb-hero {
  padding: 4rem 0 2.5rem;
  background-color: var(--color-bg-light);
  text-align: center;
}

.tb-hero-title {
  margin-bottom: 0.75rem;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text-primary);
}

.tb-hero-subtitle {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.tb-list {
  padding: 3.5rem 0 5rem;
  background-color: #ffffff;
}

.tb-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.tb-filter-btn {
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--color-gray-light);
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tb-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tb-filter-btn.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.tb-empty {
  color: var(--color-text-muted);
}

.tb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Kártya-stílus – ugyanaz a vizuális nyelv (háttér/radius/árnyék/hover), mint a
   value-prop szekció .value-card-je, kép+meta adatokkal kiegészítve */
.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background-color: var(--color-bg-light);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.1);
}

.article-card-image {
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-light);
}

.article-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #e9ecef;
  color: var(--color-gray-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.article-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
}

.article-card-tag {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background-color: rgba(42, 157, 143, 0.12);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.article-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-primary);
}

.article-card-lead {
  flex-grow: 1;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.article-card-meta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-gray-dark);
}

/* Cikkoldal */
.tb-article {
  padding: 3rem 0 5rem;
  background-color: #ffffff;
}

.tb-article-container {
  max-width: 760px;
  margin: 0 auto;
}

.tb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.tb-back-link:hover {
  color: var(--color-primary);
}

.tb-back-link--bottom {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.tb-article-title {
  margin: 0.75rem 0 1rem;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.tb-article-meta {
  margin-bottom: 2rem;
  font-size: 0.9rem;
  color: var(--color-gray-dark);
}

.tb-article-image {
  aspect-ratio: 16 / 9;
  margin-bottom: 2.5rem;
  overflow: hidden;
  border-radius: var(--radius-button);
  background-color: var(--color-bg-light);
}

.tb-article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-article-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  color: var(--color-gray-dark);
  font-weight: 600;
}

.tb-article-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.tb-article-body p {
  margin-bottom: 1.25rem;
}

.tb-article-body h3 {
  margin: 2rem 0 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.tb-article-body ul,
.tb-article-body ol {
  margin: 0 0 1.25rem 1.25rem;
}

.tb-article-body li {
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.tb-article-body a {
  color: var(--color-primary);
  text-decoration: underline;
}

.tb-not-found {
  max-width: 480px;
  margin: 0 auto;
  padding: 3rem 0;
  text-align: center;
}

.tb-not-found-title {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

@media (max-width: 991px) {
  .tb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .tb-hero {
    padding: 3rem 0 2rem;
  }

  .tb-list {
    padding: 2.5rem 0 3rem;
  }

  .tb-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .tb-article {
    padding: 2.5rem 0 3rem;
  }
}

/* ==========================================================================
   Tudásbázis & edukáció – főoldali előnézet (SZEKCIÓ 6)
   ========================================================================== */
.tb-preview {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.tb-preview .section-title {
  margin-bottom: 1rem;
}

.tb-preview-subtitle {
  max-width: 620px;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}

/* A .tb-grid/.article-card ugyanaz a class-készlet, mint a /tudasbazis/ listaoldalon (8/b) –
   itt a szekció háttere világosszürke, ezért a kártyák fehér háttért kapnak a kontraszthoz
   (a listaoldalon ez fordítva van: fehér szekció, világosszürke kártya). */
.tb-preview .article-card {
  background-color: #ffffff;
}

.article-card-lead--clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tb-preview-cta-wrap {
  margin-top: 3rem;
  text-align: center;
}

@media (max-width: 767px) {
  .tb-preview {
    padding: 3rem 0;
  }

  .tb-preview-subtitle {
    margin-bottom: 2.5rem;
  }

  .tb-preview-cta-wrap {
    margin-top: 2.5rem;
  }
}

/* ==========================================================================
   K-ép cégcsoport (SZEKCIÓ 7) – visszafogott, bizalomépítő záró blokk
   ========================================================================== */
.kep-group {
  padding: 4rem 0;
  background-color: var(--color-bg-light);
}

.kep-group-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.kep-group-title {
  margin-bottom: 1rem;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
  color: var(--color-text-primary);
}

.kep-group-text {
  margin-bottom: 1.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .kep-group {
    padding: 3rem 0;
  }

  .kep-group-text {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   Form mezők (modalok + footer hírlevél közös eleme)
   ========================================================================== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-button);
  background-color: #ffffff;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.92rem;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.form-submit-btn {
  width: 100%;
  margin-top: 0.25rem;
}

.form-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Honeypot – NEM display:none (azt sok bot felismeri), hanem a látható területen
   kívülre pozicionálva, valódi felhasználók és képernyőolvasók számára is rejtve */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-response {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  min-height: 1em;
}

.form-response.is-error {
  color: #dc2626;
  font-weight: 600;
}

.form-success {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-button);
  background-color: rgba(42, 157, 143, 0.12);
  color: var(--color-primary);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
}

/* ==========================================================================
   Modal ablakok
   ========================================================================== */
body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(15, 23, 42, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 2.25rem 2rem;
  border-radius: var(--radius-button);
  background-color: #ffffff;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s ease;
}

.modal-overlay.is-open .modal-box {
  transform: translateY(0) scale(1);
}

.modal-box--wide {
  max-width: 560px;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-gray-dark);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
  background-color: var(--color-bg-light);
  color: var(--color-primary);
}

.modal-title {
  margin: 0 1.75rem 0.75rem 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.modal-subtitle {
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .modal-box {
    padding: 1.75rem 1.25rem;
  }
}

/* ==========================================================================
   Footer hírlevél – form-fields wrapper (AJAX bekötés miatt bevezetve)
   ========================================================================== */
.footer-newsletter-form .form-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-newsletter-response {
  width: 100%;
  color: rgba(255, 255, 255, 0.85);
}

.footer-newsletter-success {
  max-width: 320px;
}

@media (max-width: 767px) {
  .footer-newsletter-form .form-fields {
    width: 100%;
  }
}

/* ==========================================================================
   BIM aloldal (/bim/) – 12. lépés: alapstruktúra + Hero + "Mi a BIM?"
   ========================================================================== */

/* BIM Hero háttér – 19. lépés: a korábbi CSS-alapú gradiens+rács placeholder lecserélve a
   főoldal MEGLÉVŐ hero.webp/.jpg képére (nem generáltunk új, BIM-specifikus fotót – a feladat
   is a meglévő újrahasznosítását kérte). Ugyanaz az image-set() technika + ugyanazok az overlay-
   gradiens ÉRTÉKEK, mint a .hero-bg-nél (ld. fent) – szó szerint másolva, hogy a két Hero
   olvashatósága/hangulata konzisztens legyen. TODO: saját, BIM-specifikus Hero kép/render,
   amint elkészül – addig ez a "kölcsönzött" kép szolgál ideiglenes megoldásként. */
.hero-bim-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../images/hero.jpg');
  background-image: -webkit-image-set(
    url('../images/hero.webp') type('image/webp') 1x,
    url('../images/hero.jpg') type('image/jpeg') 1x
  );
  background-image: image-set(
    url('../images/hero.webp') type('image/webp') 1x,
    url('../images/hero.jpg') type('image/jpeg') 1x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-dark);
}

.hero-bim-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.85) 0%,
    rgba(15, 23, 42, 0.62) 42%,
    rgba(15, 23, 42, 0.32) 75%,
    rgba(15, 23, 42, 0.18) 100%
  );
}

.hero-bim-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.35) 100%);
}

@media (max-width: 767px) {
  .hero-bim-bg::before {
    background: rgba(15, 23, 42, 0.68);
  }

  .hero-bim-bg::after {
    background: rgba(15, 23, 42, 0.15);
  }
}

/* In-page navigáció (#bim-tartalom-nav) – közvetlenül a Hero alatt, a fő fejléc alá
   tapadva (sticky). A belső .bim-tartalom-nav-inner kapja az overflow-x:auto-t (nem a
   külső sávot, sem a .bim-nav-list-et közvetlenül), így a vízszintes görgetés a .container
   szélességén BELÜL marad mobilon, nem lóg ki alóla. */
.bim-tartalom-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-gray-light);
}

.bim-tartalom-nav-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bim-nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  white-space: nowrap;
}

.bim-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.bim-nav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
}

/* Aktív szekció kiemelése – JS-sel kapja (bim/index.php scroll-spy szkriptje) */
.bim-nav-link.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (max-width: 767px) {
  .bim-nav-link {
    padding: 0.8rem 0.85rem;
    font-size: 0.8rem;
  }
}

/* "Mi a BIM?" szekció (SZEKCIÓ 1) */
.mi-a-bim {
  padding: 5rem 0;
  background-color: #ffffff;
}

/* Ugyanaz a hosszú-szövegblokk tipográfia, mint a tudásbázis cikkoldalán (.tb-article-body):
   1.02rem/1.75 sortáv, bekezdésenként 1.25rem margó – itt önálló class alatt, hogy a /bim/
   modul CSS-e ne függjön a /tudasbazis/ modulétól. */
/* 19. lépés: 2 hasábos elrendezés (szöveg + idővonal-ábra) desktopon, egymás alatt mobilon.
   max-width itt (a korábbi .mi-a-bim-body-n lévő helyett) a teljes 2 hasábos blokkra kerül. */
/* 20. lépés: 1.4:1 → 1:1.3 (az ábra lett a domináns/nagyobb elem, kb. 56%, korábban a szöveg
   kapta a nagyobb részt). */
.mi-a-bim-columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.mi-a-bim-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.mi-a-bim-visual {
  display: flex;
  justify-content: center;
}

.mi-a-bim-diagram {
  width: 100%;
  max-width: 400px;
  height: auto;
}

@media (max-width: 767px) {
  .mi-a-bim-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .mi-a-bim-diagram {
    max-width: 320px;
  }
}

.mi-a-bim-body p {
  margin-bottom: 1.25rem;
}

.mi-a-bim-body p:last-child {
  margin-bottom: 0;
}

/* "BIM felhasználása" szekció (SZEKCIÓ 2) – 13. lépés. A háttér var(--color-bg-light),
   szándékosan elkülönítve az előtte lévő "Mi a BIM?" fehér szekciójától. */
.felhasznalas {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

.felhasznalas .section-title {
  margin-bottom: 1.25rem;
}

.felhasznalas-intro {
  max-width: 80%;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-muted);
}

/* A kártyarács maga a közös .value-prop-grid (3/2/1 oszlopos reszponzív lépcső, ld. a
   value-prop szekciónál) – csak a kártya HÁTTÉRSZÍNE van itt megfordítva fehérre, mert a
   szekció saját háttere már var(--color-bg-light) (a .value-card alapból is ugyanezt a
   színt használná, ami kontraszt nélkül eltüntetné a kártyák körvonalát). */
.felhasznalas .value-card {
  background-color: #ffffff;
}

.felhasznalas-infobox {
  max-width: 80%;
  margin: 3rem auto 0;
  padding: 1.5rem 1.75rem;
  background-color: #ffffff;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .felhasznalas {
    padding: 3rem 0;
  }

  .felhasznalas-intro {
    max-width: 700px;
    font-size: 0.95rem;
  }

  .felhasznalas-infobox {
    max-width: 700px;
    padding: 1.25rem 1.5rem;
    font-size: 0.88rem;
  }
}

/* "BIM stratégia" szekció (SZEKCIÓ 3) – 14. lépés. Fehér háttér, hogy váltakozzon az előtte
   lévő "Felhasználás" szekció var(--color-bg-light) hátteréhez képest. */
.strategia {
  padding: 5rem 0;
  background-color: #ffffff;
}

/* 20. lépés: a korábbi max-width:800px/margin:0 auto SZÁNDÉKOSAN eltávolítva – a szekció
   most a többi kártyás /bim/ szekcióhoz hasonlóan a teljes .container szélességét (max 1200px)
   használja ki, nem csak egy keskeny szövegoszlopot. */
.strategia-body {
  max-width: 1152px;
  margin: 0 auto;
}

/* 20. lépés: 2 KÜLÖN SVG (desktop vízszintes / mobil függőleges), CSS-sel váltva – ld.
   strategia.php kommentje a technikai indoklásért. */
.strategia-flow-wrap {
  margin: 2rem 0 2.5rem;
}

.strategia-flow-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.strategia-flow-img--desktop {
  max-width: 1000px;
}

.strategia-flow-img--mobile {
  display: none;
}

@media (max-width: 767px) {
  .strategia-flow-img--desktop {
    display: none;
  }

  .strategia-flow-img--mobile {
    display: block;
    max-width: 320px;
  }
}

/* Ugyanaz a hosszú-szövegblokk tipográfia, mint a "Mi a BIM?" szekció .mi-a-bim-body-jánál –
   itt is önálló class alatt (nem cross-referencia), hogy a szekció fájlja önmagában maradjon
   érthető/karbantartható. 20. lépés: max-width hozzáadva MAGÁRA A BEKEZDÉSRE (nem a
   .strategia-body-ra) – a kérdéssor és a folyamatábra így kihasználja a teljes szélességet,
   de a hosszú, olvasandó bekezdések egy kényelmes ~700px-es oszlopban maradnak (egy 1150px
   széles sor túl hosszú lenne folyamatos olvasáshoz). */
.strategia-text {
  max-width: 80%;
  margin: 0 auto 1.75rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

/* A kérdéssor kiemelt doboza – halvány háttér, hogy elváljon a bekezdésektől. 20. lépés:
   3 oszlopos rács desktopon (korábban egymás alatt, keskeny oszlopban futott). */
.strategia-questions {
  margin: 2.5rem 0;
  padding: 2rem;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-button);
}

.strategia-questions-title {
  margin-bottom: 1.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
}

.strategia-question-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  list-style: none;
}

.strategia-question-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.strategia-question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
}

.strategia-question-text {
  padding-top: 0.35rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text-primary);
}

.strategia-cta-wrap {
  margin-top: 2.5rem;
  text-align: center;
}

@media (max-width: 991px) {
  .strategia-question-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 767px) {
  .strategia {
    padding: 3rem 0;
  }

  .strategia-text {
    max-width: 700px;
    font-size: 0.95rem;
  }

  .strategia-questions {
    padding: 1.5rem 1.25rem;
  }

  .strategia-question-item {
    gap: 0.75rem;
  }

  .strategia-question-number {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .strategia-question-text {
    padding-top: 0.15rem;
    font-size: 0.92rem;
  }

  .strategia-cta-wrap .btn {
    width: 100%;
  }
}

/* "BIM a jobb információmegosztásért" szekció (SZEKCIÓ 4) – 15. lépés. Halvány háttér,
   hogy váltakozzon az előtte lévő "Stratégia" szekció fehér hátteréhez képest. */
.informaciomegosztas {
  padding: 5rem 0;
  background-color: var(--color-bg-dark);
  color: #ffffff;
}

/* 20. lépés: inverz (sötét) szekció – ugyanaz a minta, mint az AI Labor szekciónál
   (var(--color-bg-dark) háttér + a megosztott, alapból sötét-szövegű .section-title
   fehérre felülírva, csak erre a szekcióra szűkítve). */
.informaciomegosztas .section-title {
  color: #ffffff;
}

/* 20. lépés: az oszlopok aránya 1:1.3-ra módosítva (korábban 1.4:1 volt, tehát a SZÖVEG
   kapott több helyet) – most az ÁBRA a nagyobb/domináns elem, kb. az elrendezés 56%-át
   foglalja el, a "feliratok legyenek a domináns elem" elvárásnak megfelelően. */
.informaciomegosztas-columns {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.informaciomegosztas-body {
  min-width: 0;
}

.informaciomegosztas-visual {
  display: flex;
  justify-content: center;
}

.informaciomegosztas-diagram {
  width: 100%;
  max-width: 380px;
  height: auto;
}

@media (max-width: 767px) {
  .informaciomegosztas-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .informaciomegosztas-diagram {
    max-width: 320px;
  }
}

/* Ugyanaz a hosszú-szövegblokk tipográfia, mint a .mi-a-bim-body / .strategia-text-nél –
   önálló class alatt itt is, hogy a szekció fájlja önmagában maradjon karbantartható.
   20. lépés: szín világosra váltva (sötét szekció-háttér). */
.informaciomegosztas-text {
  margin-bottom: 1.75rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

/* 21. lépés: a CDE definíció-doboz átkerült a 2 hasábos szövegoszlopból egy TELJES SZÉLESSÉGŰ,
   önálló "középső részbe" (ld. informaciomegosztas.php), és a korábbi halványan áttetsző
   sötét-témás kártyából egy TÖMÖR, VILÁGOS kiemelt infobox lett – szándékos kontraszt-fordítás
   a sötét szekció-háttérrel szemben, hogy erősen kiugorjon ("fontos infobox" hatás). */
.cde-definition-box {
  max-width: 1100px;
  margin: 3rem auto;
  padding: 2.5rem 3rem;
  background-color: var(--color-bg-light);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-button);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.cde-definition-title {
  margin-bottom: 0.85rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.cde-definition-text {
  max-width: 80%;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* 21. lépés: 3) ALSÓ RÉSZ – 2 hasábos (2:1 arány), a CTA gomb függőlegesen középre igazítva
   a bal oldali bekezdéshez képest. */
.informaciomegosztas-bottom {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.informaciomegosztas-closing {
  margin-bottom: 0;
}

.informaciomegosztas-cta-wrap {
  text-align: center;
}

@media (max-width: 767px) {
  .informaciomegosztas {
    padding: 3rem 0;
  }

  .informaciomegosztas-text {
    font-size: 0.95rem;
  }

  .cde-definition-box {
    margin: 2rem auto;
    padding: 1.5rem 1.5rem;
  }

  .cde-definition-title {
    font-size: 1.1rem;
  }

  .cde-definition-text {
    max-width: 700px;
    font-size: 0.92rem;
  }

  /* Mobilon a 2:1 hasábos alsó rész 1 oszlopra esik vissza – a gomb a szöveg alá kerül,
     teljes szélességben (ld. lent), ahogy a feladat kérte. */
  .informaciomegosztas-bottom {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .informaciomegosztas-cta-wrap .btn {
    width: 100%;
  }
}

/* "BIM a kivitelezés tervezésében" (4D/5D) szekció (SZEKCIÓ 5) – 16. lépés. Fehér háttér,
   hogy váltakozzon az előtte lévő "Információmegosztás" szekció var(--color-bg-light)
   hátteréhez képest. */
.tervezes-kontroll {
  padding: 5rem 0;
  background-color: #ffffff;
}

.tervezes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

/* A 4D és 5D kártya szándékosan azonos felépítésű/méretű – egyik sem "fontosabb" a másiknál.
   A háttér var(--color-bg-light) (ugyanaz a kontraszt-irány, mint a value-prop .value-card-nél:
   fehér szekció + halványszürke kártya). */
.tervezes-card {
  padding: 2.5rem 2rem;
  background-color: var(--color-bg-light);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tervezes-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.1);
}

.tervezes-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.tervezes-card-title {
  margin-bottom: 0.85rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.tervezes-card-text {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.tervezes-closing {
  max-width: 80%;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .tervezes-kontroll {
    padding: 3rem 0;
  }

  .tervezes-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .tervezes-card {
    padding: 1.75rem 1.5rem;
  }

  .tervezes-card-title {
    font-size: 1.15rem;
  }

  .tervezes-card-text {
    font-size: 0.92rem;
  }

  .tervezes-closing {
    max-width: 700px;
    font-size: 0.95rem;
  }
}

/* "BIM alapú projekt kontroll" szekció (SZEKCIÓ 6) – 17. lépés. Nyugodtabb, kártyák nélküli
   szövegblokk a 4D/5D kártyás szekció után (vizuális váltás), halvány háttérrel, hogy
   váltakozzon a "Tervezés & kontroll" fehér hátteréhez képest. */
.projektkontroll {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

/* 19. lépés: 2 hasábos elrendezés (szöveg + állapotkövető/dashboard ábra) desktopon, egymás
   alatt mobilon. */
/* 20. lépés: 1.4:1 → 1:1.3 (az ábra lett a domináns/nagyobb elem). */
.projektkontroll-columns {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.projektkontroll-body {
  min-width: 0;
}

.projektkontroll-visual {
  display: flex;
  justify-content: center;
}

.projektkontroll-diagram {
  width: 100%;
  max-width: 380px;
  height: auto;
}

@media (max-width: 767px) {
  .projektkontroll-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .projektkontroll-diagram {
    max-width: 320px;
  }
}

/* Ugyanaz a hosszú-szövegblokk tipográfia, mint a többi /bim/ szekciónál (.mi-a-bim-body,
   .strategia-text, .informaciomegosztas-text) – önálló class alatt itt is. */
.projektkontroll-text {
  margin-bottom: 1.75rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.projektkontroll-text:last-child {
  margin-bottom: 0;
}

/* Kiemelt, in-page horgony-link a szövegen belül – Teal, alapból aláhúzás nélkül (a
   tb-article-body a-jától eltérően, ami mindig aláhúzott), hoverre aláhúzva. */
.projektkontroll-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.projektkontroll-link:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .projektkontroll {
    padding: 3rem 0;
  }

  .projektkontroll-text {
    font-size: 0.95rem;
  }
}

/* "Működjünk együtt" záró CTA szekció (SZEKCIÓ 7) – 18. lépés. Fehér háttér, hogy
   váltakozzon a "Projektkontroll" halvány hátteréhez képest, és enyhe átmenetet adjon
   a közvetlenül utána következő sötét footer (var(--color-bg-dark)) felé. */
.egyuttmukodes {
  padding: 5rem 0;
  background-color: #ffffff;
}

.egyuttmukodes-intro {
  max-width: 80%;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-muted);
}

.egyuttmukodes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* A 4 kártya azonos felépítésű/méretű – egyik sem "fontosabb" a másiknál. Flex column +
   a szöveg flex-grow-ja miatt a gombok minden kártyán azonos magasságban ülnek, függetlenül
   attól, hogy az adott kártya szövege rövidebb vagy hosszabb. */
.egyuttmukodes-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background-color: var(--color-bg-light);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.egyuttmukodes-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.1);
}

.egyuttmukodes-card-title {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.egyuttmukodes-card-text {
  flex-grow: 1;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.egyuttmukodes-card .btn {
  align-self: flex-start;
}

@media (max-width: 991px) {
  .egyuttmukodes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .egyuttmukodes {
    padding: 3rem 0;
  }

  .egyuttmukodes-intro {
    max-width: 700px;
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  .egyuttmukodes-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* 25. lépés: reszponzív átvizsgálás során észrevett apró következetlenség – a többi
     kártyás /bim/ szekció (.tervezes-card, .digitalis-iker-list-card stb.) mind kap mobilon
     kisebb paddingot, ez a négy kártya eddig nem kapott. Nem tört el semmit (bőven fér az
     560px-nél is), de a konzisztencia kedvéért itt is hozzáadva. */
  .egyuttmukodes-card {
    padding: 1.5rem;
  }

  .egyuttmukodes-card .btn {
    align-self: stretch;
    text-align: center;
  }
}

/* "A BIM jövője: a digitális iker" szekció – 22. lépés, ÁTRENDEZVE a 23. lépésben a CDE
   szekció (21. lépés) 3(+1) rétegű mintájára. Fehér háttér (a "Projektkontroll" előtte lévő
   var(--color-bg-light) hátteréhez képest ez ad vizuális törést) – NINCS sötét váltás,
   ellentétben a CDE-résszel, csak a középső doboz kap kiemelést. */
.digitalis-iker {
  padding: 5rem 0;
  background-color: #ffffff;
}

/* 23. lépés: 1) FELSŐ RÉSZ – csak az 1. bekezdés + az ábra (a többi tartalom lejjebb
   került). Az ábra a korábbinál jóval nagyobb max-width-öt kapott (ld. .digitalis-iker-
   diagram lent), hogy egyensúlyban legyen a most jóval rövidebb szövegoszloppal. */
.digitalis-iker-columns {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.digitalis-iker-body {
  min-width: 0;
}

.digitalis-iker-text {
  margin-bottom: 1.75rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.digitalis-iker-visual {
  display: flex;
  justify-content: center;
}

/* 420px → 520px: a felső résznek immár csak 1 bekezdéssel kell vizuálisan egyensúlyban
   lennie (nem a teljes szöveggel, mint a 22. lépésben), ezért nagyobb méret indokolt. */
.digitalis-iker-diagram {
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* 23. lépés: 2) KÖZÉPSŐ RÉSZ – a doboz TELJES SZÉLESSÉGŰ lett (a korábbi, a szövegoszlopba
   ágyazott keskeny változat helyett), pontosan a CDE szekció "Mi a CDE?" dobozának
   LAYOUT-ját követve (max-width/margin/padding/text-align) – de a SZÍNEZÉS változatlanul
   Teal bal szegély + halvány Teal háttér marad (nem a CDE doboz tömör világos/sötét-
   kontrasztos verziója), mert ez a szekció világos hátterű maradt. */
.digitalis-iker-definition-box {
  max-width: 1100px;
  margin: 3rem auto;
  padding: 2rem 2.5rem;
  background-color: rgba(42, 157, 143, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.digitalis-iker-definition-title {
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.digitalis-iker-definition-text {
  max-width: 80%;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* 24. lépés: 3) RÉSZ – a korábbi 2 hasábos (2:1) elrendezés helyett 2 KÜLÖN, egymás alatti,
   teljes szélességű blokk. A bekezdés keskeny olvasási-oszlopban (mint a szekció többi
   bekezdése), a lista alatta, önálló, teljes szélességű 3 oszlopos kártyarácsban – így nem
   marad aránytalan üres tér a rövidebb bekezdés mellett a hosszabb lista miatt. */
.digitalis-iker-bottom-text {
  max-width: 80%;
  margin: 0 auto 2.5rem;
}

.digitalis-iker-list-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.digitalis-iker-list-intro {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-primary);
}

/* 3 egyenrangú kártya – ugyanaz az elrendezési logika, mint a "BIM felhasználása" szekció
   kártyarácsánál (.value-prop-grid) vagy a Stratégia szekció kérdéssoránál
   (.strategia-question-list): 3 oszlop desktopon, 1 oszlop mobilon. */
.digitalis-iker-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.digitalis-iker-list-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-button);
  text-align: center;
}

/* Ugyanaz a teal körös pipa-minta, mint a Hero trust-ikonsoránál (.hero-trust-icon) – itt
   nagyobb méretben, mert most egy kártya tetején álló, önálló ikon, nem szövegsorba
   illesztett jelölő. */
.digitalis-iker-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.digitalis-iker-list-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-primary);
}

/* 23. lépés: 4) ZÁRÓ RÉSZ – teljes szélességben, a keskenyebb szövegoszlopokhoz hasonló
   olvasási-szélességre korlátozva. */
.digitalis-iker-final-text {
  max-width: 80%;
  margin: 2.5rem auto 0;
}

@media (max-width: 991px) {
  .digitalis-iker-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .digitalis-iker {
    padding: 3rem 0;
  }

  .digitalis-iker-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .digitalis-iker-diagram {
    max-width: 320px;
  }

  .digitalis-iker-text {
    font-size: 0.95rem;
  }

  .digitalis-iker-bottom-text {
    max-width: 700px;
  }

  .digitalis-iker-definition-box {
    margin: 2rem auto;
    padding: 1.5rem 1.5rem;
  }

  .digitalis-iker-definition-title {
    font-size: 1.05rem;
  }

  .digitalis-iker-definition-text {
    max-width: 700px;
    font-size: 0.92rem;
  }

  .digitalis-iker-list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .digitalis-iker-list-text {
    font-size: 0.9rem;
  }

  .digitalis-iker-final-text {
    max-width: 700px;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   AI aloldal (/ai/) – 29. lépés: alapstruktúra + Hero + "Ismerős helyzet?"
   ========================================================================== */

/* AI Hero háttér – 36. lépés: a korábbi CSS-alapú gradiens+rács+glow placeholder lecserélve a
   beérkezett assets/images/AI_epitoipar.jpg-re. Szándékosan MÉG NEM image-set()/WebP – a feladat
   kifejezetten csak a beillesztést kérte ebben a lépésben, a WebP-optimalizálás (mint a főoldal
   hero.png-jénél a 19-20. lépésben) egy KÜLÖN, jövőbeli lépés lehet (ld. ⚠️ lent). Saját, önálló
   class marad (nem a .hero-bg/.hero-bim-bg újrahasznosítva) – a struktúra-döntés a 29. lépésből
   változatlan, csak a háttér tartalma cserélődött placeholderből fotóra. Az overlay-gradiens
   ÉRTÉKEK szó szerint a .hero-bg-ből másolva (mint ahogy a .hero-bim-bg is tette a 19. lépésben),
   hogy mindhárom Hero olvashatósága/hangulata konzisztens legyen – a hero-ai.php-nak nincs
   trust-ikonsora, de a ::after alsó sötétítés így is nem árt, és a jövőben esetleg bekerülő
   tartalommal (pl. trust-lista) is konzisztens marad. */
.hero-ai-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../images/AI_epitoipar.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-dark);
}

/* Balról jobbra halványuló sötét réteg – a szöveg a bal oldalon ül, jobbra jobban látszik a kép */
.hero-ai-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.85) 0%,
    rgba(15, 23, 42, 0.62) 42%,
    rgba(15, 23, 42, 0.32) 75%,
    rgba(15, 23, 42, 0.18) 100%
  );
}

/* Alul is egy kis extra sötétítés (a .hero-bg/.hero-bim-bg mintája – ott a trust-ikonsor
   kontrasztjához kell, itt megelőlegezve egy esetleges jövőbeli alsó tartalomhoz) */
.hero-ai-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.35) 100%);
}

/* Mobilon a szöveg teljes szélességben fut, ezért egyenletes, erősebb sötétítés kell a
   bal→jobb halványuló gradiens helyett (ugyanaz a minta, mint a .hero-bg-nél/.hero-bim-bg-nél).
   A background-position:center-t (image, ld. fent) szándékosan NEM módosítottuk mobilra – a
   kép 2816×1536-os (ugyanaz a méret, mint az eredeti hero.png-nek volt), közép-jobb harmadában
   van a fő motívum (emberek + "AI-stratégia" holografikus panel), a kép közepe egy tartalmas
   hologram-panel részletre esik, nem üres égre/falra, ezért a középre-vágás keskeny mobil
   nézetben sem üres/érdektelen. Élő böngészős vizuális ellenőrzés (tényleges ≤375px görgetés)
   még ajánlott, ld. a lépés végi megjegyzést. */
@media (max-width: 767px) {
  .hero-ai-bg::before {
    background: rgba(15, 23, 42, 0.68);
  }

  .hero-ai-bg::after {
    background: rgba(15, 23, 42, 0.15);
  }
}

/* In-page navigáció (#ai-tartalom-nav) – szó szerint ugyanaz a szabálykészlet, mint a /bim/
   #bim-tartalom-nav-jánál (ld. fent), csak "ai-" előtagú, önálló class-neveken – ld. indoklás
   a tartalom-nav.php tetején. */
.ai-tartalom-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-gray-light);
}

.ai-tartalom-nav-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  white-space: nowrap;
}

.ai-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ai-nav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
}

/* Aktív szekció kiemelése – JS-sel kapja (ai/index.php scroll-spy szkriptje) */
.ai-nav-link.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (max-width: 767px) {
  .ai-nav-link {
    padding: 0.8rem 0.85rem;
    font-size: 0.8rem;
  }
}

/* "Ismerős helyzet?" szekció (SZEKCIÓ 1) – világos háttér (Light Canvas) */
.ismeros-helyzet {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

.ismeros-helyzet-intro {
  max-width: 80%;
  margin: -1.5rem auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}

.ismeros-helyzet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* A 2 kártya vizuálisan "tükör" jellegű – azonos méret/stílus/ikon-kezelés mindkét oldalon,
   csak a szöveg más. A borostyán (--color-warning) ikon-tónus jelzi mindkettőn, hogy ez egy
   probléma-leírás, nem egy szolgáltatás-kártya (szemben pl. a .value-card teal ikonjaival). */
.ismeros-card {
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.ismeros-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background-color: rgba(244, 162, 97, 0.14);
  color: var(--color-warning);
}

.ismeros-card-icon svg {
  width: 26px;
  height: 26px;
}

.ismeros-card-title {
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ismeros-card-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* 38. lépés: a korábbi, NEM-gomb szöveges-link CTA (.ismeros-helyzet-cta/-cta-arrow, ld. git
   history) lecserélve egy valódi gombos CTA-ra – a wrap most maga a kiemelt doboz (ugyanaz a
   minta, mint az .adminisztracio-closing/.epitoipar-specialitas-closing/.sajat-fejlesztes-
   closing-nél: Teal bal szegély + halvány Teal háttér), a gomb pedig a közös .btn.btn-primary
   osztályt kapja közvetlenül a HTML-ben (nincs itt saját gomb-stílus duplikálva).
   39. lépés: a korábbi külön .ismeros-helyzet-closing bekezdés MEGSZŰNT (a szövege beolvadt
   ebbe a dobozba), és a doboz max-width:780px korlátja is eltávolítva – szándékosan a felette
   lévő .ismeros-helyzet-grid (nincs saját max-width-je, a teljes .container szélességét
   kitölti) szélességéhez igazodik, NEM keskenyebb, mint korábban volt. */
.ismeros-helyzet-cta-wrap {
  margin: 3rem auto 0;
  padding: 2rem 2.25rem;
  background-color: rgba(42, 157, 143, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.ismeros-helyzet-cta-support {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

@media (max-width: 991px) {
  .ismeros-helyzet-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ismeros-helyzet {
    padding: 3rem 0;
  }

  .ismeros-helyzet-intro {
    max-width: 700px;
    margin-top: -1rem;
    margin-bottom: 2rem;
  }

  .ismeros-helyzet-cta-wrap {
    padding: 1.5rem 1.5rem;
  }

  .ismeros-helyzet-cta-support {
    font-size: 0.95rem;
  }

  /* Teljes szélességű, jól tapintható gomb (min. 44px magasság) mobilon – az alap .btn
     (0.65rem padding + 0.9rem betűméret) önmagában kb. 42px, ez a felülírás biztosan a
     44px-es érinthetőségi minimum fölé viszi. */
  .ismeros-helyzet-cta-wrap .btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
  }
}

/* "AI alapjai és turbulenciája" szekció (SZEKCIÓ 2, 30. lépés) – fehér háttér, váltakozva az
   előző (.ismeros-helyzet, Light Canvas) szekcióhoz képest. */
.ai-alapok {
  padding: 5rem 0;
  background-color: #ffffff;
}

/* 1. blokk: Horizontális vs. Vertikális. 39. lépés: mindkét oszlop önálló kártya-hátteret
   kapott (Light Canvas, lekerekített sarok, finom árnyék) – ÁLTALÁNOS SZABÁLY innentől: ha egy
   szekció háttere fehér (mint az .ai-alapok), a benne lévő tartalmi kártyák/blokkok kapjanak
   Light Canvas (var(--color-bg-light)) hátteret, hogy elváljanak tőle; ha a szekció már Light
   Canvas/szürke, a kártyák lehetnek fehérek (ld. pl. .adminisztracio .value-card). A 2 oszlop
   vizuálisan TOVÁBBRA IS egyenrangú marad (azonos kártya-stílus mindkettőn, nem "melyik a jobb"
   versengés) – csak a szekció-háttértől való elválás a cél, nem egymástól való megkülönböztetés.
   A középső oszlop csak egy elválasztó vonal + "vs." jelvény, a kártyák közötti térközhöz
   igazítva. */
.ai-alapok-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.ai-alapok-compare-col {
  background-color: var(--color-bg-light);
  border-radius: var(--radius-button);
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Fejléc-ikon a cím felett – egyenlő súlyú, semleges (szürke) színben mindkét oszlopon, hogy a
   forma (nem a szín) hordozza a jelentést, és a 2 kategória vizuálisan egyenrangú maradjon. */
.ai-alapok-compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  color: var(--color-gray-dark);
}

.ai-alapok-compare-icon svg {
  width: 100%;
  height: 100%;
}

.ai-alapok-compare-title {
  margin-bottom: 0.9rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.ai-alapok-compare-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.ai-alapok-compare-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
}

.ai-alapok-compare-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: var(--color-gray-light);
}

.ai-alapok-compare-divider-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-gray-light);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* 2. blokk: a piaci "turbulencia" – 39. lépés: a korábbi külön .ai-alapok-turbulencia wrapper
   (ami 780px-re szűkítette a tartalmat) ÉS a benne lévő külön bevezető bekezdés MEGSZŰNT – a
   szöveg beolvadt a doboz szövegébe, a doboz maga pedig szándékosan a fenti
   .ai-alapok-compare szélességéhez igazodik (nincs saját max-width-je, csak a .container-t
   tölti ki), ugyanaz a minta, mint a .digitalis-iker-definition-box-nál (halvány Teal háttér +
   Teal bal szegély, világos szekció-háttéren "kiugró" hatás). A text-align:center korábban a
   megszűnt wrapperről öröklődött, most közvetlenül a dobozon van. */
.ai-alapok-conclusion-box {
  padding: 2rem 2.25rem;
  background-color: rgba(42, 157, 143, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.ai-alapok-conclusion-text {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.65;
  font-weight: 600;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .ai-alapok {
    padding: 3rem 0;
  }

  .ai-alapok-compare {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Mobilon a középső oszlop vízszintes elválasztóvá vált, a 2 hasáb közé ékelve */
  .ai-alapok-compare-divider {
    width: auto;
    height: 2.5rem;
    margin: 0.5rem 0;
  }

  .ai-alapok-compare-divider::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .ai-alapok-conclusion-box {
    padding: 1.5rem 1.5rem;
  }

  .ai-alapok-conclusion-text {
    font-size: 1rem;
  }
}

/* "Adminisztráció automatizálása — AI agentek" szekció (SZEKCIÓ 3, 31. lépés) – Light Canvas
   háttér, váltakozva az előző (.ai-alapok, fehér) szekcióhoz képest. */
.adminisztracio {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

/* 40. lépés: a cím ("Adminisztráció automatizálása") és az alcím ("AI agentek", .section-subtitle)
   közel kerüljön egymáshoz – az alap .section-title 3rem-es alsó margója erre szűkítve. */
.adminisztracio .section-title {
  margin-bottom: 0.5rem;
}

/* Ugyanaz a "megfordított kontraszt" minta, mint a .felhasznalas .value-card-nél a /bim/
   modulban: a szekció saját háttere var(--color-bg-light), ezért a kártyák fehér hátteret
   kapnak (az alap .value-card a var(--color-bg-light)-ot örökölné, ami itt eltűnne). */
.adminisztracio .value-card {
  background-color: #ffffff;
}

/* 40. lépés: 1×4-es, teljes szélességű rács desktopon (a korábbi 2×2 helyett) – a korábbi
   max-width:900px korlát megszűnt, hogy a 4 kártya a szekció teljes elérhető szélességét
   kitöltse (ugyanolyan oldalmargóval, mint a szekció többi teljes szélességű eleme). 41. lépés
   óta a .adminisztracio-closing (a .cta-box-wide módosítóval) már SZÉLESEBB is ennél a rácsnál,
   ld. lentebb. Mobile-first rétegzés: alap (≤767px) 1
   oszlop, változatlanul a meglévő .value-prop-grid media query-jéből öröklődik; ≥768px-től 2
   oszlop (köztes, "tablet" állapot, ha a 4 oszlop még túl szűk lenne); ≥1100px-től 4 oszlop
   (a szélesebb desktop nézeteken már kényelmesen elfér). A kártya belső padding/betűméret
   finoman csökkentve csak a ≥1100px 4-oszlopos állapotban, hogy ne legyenek túlzsúfoltak. */
.adminisztracio-grid {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .adminisztracio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .adminisztracio-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .adminisztracio-grid .value-card {
    padding: 1.5rem 1.375rem;
  }

  .adminisztracio-grid .value-card-title {
    font-size: 1.05rem;
  }

  .adminisztracio-grid .value-card-text {
    font-size: 0.88rem;
  }
}

/* Záró doboz – fehér háttér (a szekció saját világos hátterén így is kiugrik, mint a
   .felhasznalas-infobox), Teal bal szegély. 41. lépés: a korábbi max-width:780px megszűnt –
   a .cta-box-wide módosító (ld. fent) teszi szélesebbé a felette lévő 4 oszlopos rácsnál; a
   korábbi lefelé mutató nyíl-ikon ("átvezető jellegű" elem) is eltávolítva, feleslegessé vált. */
.adminisztracio-closing {
  margin-top: 3rem;
  padding: 2rem 2.25rem;
  background-color: #ffffff;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.adminisztracio-closing-text {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .adminisztracio {
    padding: 3rem 0;
  }

  .adminisztracio-closing {
    padding: 1.5rem 1.5rem;
  }

  .adminisztracio-closing-text {
    font-size: 0.95rem;
  }
}

/* "Az építőipar specialitásai" szekció (SZEKCIÓ 4, 32. lépés) – fehér háttér, váltakozva az
   előző (.adminisztracio, Light Canvas) szekcióhoz képest. */
.epitoipar-specialitas {
  padding: 5rem 0;
  background-color: #ffffff;
}

.epitoipar-specialitas-intro {
  max-width: 80%;
  margin: -1.5rem auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}

/* 40. lépés: ugyanaz az 1×4-es, teljes szélességű rács-minta, mint az .adminisztracio-grid-nél
   (ld. ott a részletes indoklást) – a korábbi max-width:900px/2×2-es korlát megszűnt. */
.epitoipar-specialitas-grid {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .epitoipar-specialitas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .epitoipar-specialitas-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .epitoipar-specialitas-grid .value-card {
    padding: 1.5rem 1.375rem;
  }

  .epitoipar-specialitas-grid .value-card-title {
    font-size: 1.05rem;
  }

  .epitoipar-specialitas-grid .value-card-text {
    font-size: 0.88rem;
  }
}

/* Vizuálisan kiemelt kártyák – Teal keret + halvány Teal háttér, tömör Teal ikon-jelvény,
   jelezve, hogy ez a "magasabb szintű", vertikális kategória, szemben az előző szekció
   (.adminisztracio) semleges, fehér kártyáival. */
.epitoipar-specialitas .value-card {
  background-color: rgba(42, 157, 143, 0.05);
  border-color: var(--color-primary);
}

.epitoipar-specialitas .value-card-icon {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* Záró doboz – ugyanaz a minta, mint az .ai-alapok-conclusion-box-nál (halvány Teal háttér +
   Teal bal szegély), itt középre igazítva, mert a CTA gomb is ide tartozik. 41. lépés: a
   korábbi max-width:780px megszűnt – a .cta-box-wide módosító (ld. fent) teszi szélesebbé a
   felette lévő 4 oszlopos rácsnál, ugyanúgy, mint az .adminisztracio-closing-nél. */
.epitoipar-specialitas-closing {
  margin-top: 3rem;
  padding: 2rem 2.25rem;
  background-color: rgba(42, 157, 143, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.epitoipar-specialitas-closing-text {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .epitoipar-specialitas {
    padding: 3rem 0;
  }

  .epitoipar-specialitas-intro {
    max-width: 700px;
    margin-top: -1rem;
    margin-bottom: 2rem;
  }

  .epitoipar-specialitas-closing {
    padding: 1.5rem 1.5rem;
  }

  .epitoipar-specialitas-closing-text {
    font-size: 0.95rem;
  }

  /* A CTA-szöveg ennél a szekciónál szokatlanul hosszú ("Nézzük meg, nálatok hol van...") –
     enélkül a .btn shrink-to-fit szélessége keskeny nézetben túllógna a konténeren. Ugyanaz a
     minta, mint a .hero-btn-primary/-secondary mobil szabályánál. */
  .epitoipar-specialitas-closing .btn {
    width: 100%;
    white-space: normal;
  }
}

/* "Nincs jó AI jó adat nélkül" szekció (SZEKCIÓ 5, 33. lépés) – Light Canvas háttér, váltakozva
   az előző (.epitoipar-specialitas, fehér) szekcióhoz képest. */
.ai-bim-kapcsolat {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

/* 43. lépés: a korábbi, egyoszlopos szövegblokk + definíció-box + navigációs kártya szerkezet
   helyett 2 hasábos elrendezés (szöveg + SVG-illusztráció) – szerkezetileg a /bim/ "Mi a BIM?"
   (.mi-a-bim-columns) mintáját követi, de kb. 50-50%-os (1fr 1fr) oszloparánnyal, mert itt a
   kép nem csak kiegészítő illusztráció, hanem egyenrangú vizuális elem. */
.ai-bim-kapcsolat-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 3rem;
}

.ai-bim-kapcsolat-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.ai-bim-kapcsolat-body p {
  margin-bottom: 1.25rem;
}

.ai-bim-kapcsolat-body p:last-child {
  margin-bottom: 0;
}

.ai-bim-kapcsolat-visual {
  display: flex;
  justify-content: center;
}

.ai-bim-kapcsolat-diagram {
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* Egyszerű, önálló CTA gomb – szándékosan NINCS köré kiemelt doboz/kártya (a korábbi
   .ai-bim-nav-card megszűnt, a feladat kifejezetten ezt kérte). */
.ai-bim-kapcsolat-cta-wrap {
  text-align: center;
}

@media (max-width: 767px) {
  .ai-bim-kapcsolat {
    padding: 3rem 0;
  }

  .ai-bim-kapcsolat-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ai-bim-kapcsolat-body {
    font-size: 0.95rem;
  }

  /* Teljes szélességű kép mobilon (a feladat kifejezett kérésére, eltérve a .mi-a-bim-diagram
     mobil max-width:320px-es mintájától) – a base .ai-bim-kapcsolat-diagram width:100%-a már
     eleve adott, csak a max-width korlátot kell feloldani. */
  .ai-bim-kapcsolat-diagram {
    max-width: 100%;
  }
}

/* "Ahol a K+F és a mérnöki valóság találkozik" szekció (SZEKCIÓ 6, 34. lépés) – fehér háttér,
   váltakozva az előző (.ai-bim-kapcsolat, Light Canvas) szekcióhoz képest. */
/* 42. lépés: a korábbi fehér háttér SÖTÉTRE váltva (var(--color-bg-dark)), hogy erős vizuális
   kiemelést adjon ennek a hitelesség-blokknak ("mi ezt tényleg megcsináltuk") – ugyanaz a
   stílus, mint a főoldal AI Labor szekciója vagy a /bim/ "BIM a jobb információmegosztásért"
   (.informaciomegosztas) szekciója. FONTOS KÖVETKEZMÉNY: a rákövetkező .egyuttmukodes-ai
   szekció komment-je ("váltakozva az előző, fehér .sajat-fejlesztes szekcióhoz képest") ettől
   a lépéstől szövegesen elavult (a szekció most sötét) – funkcionálisan nem tört el semmit
   (sötét→Light Canvas→még sötétebb footer is helyes fokozatos átmenet), csak a komment-
   szöveget nem frissítettem, mert ez a lépés kifejezetten csak a sajat-fejlesztes.php-ra
   korlátozódott. */
.sajat-fejlesztes {
  padding: 5rem 0;
  background-color: var(--color-bg-dark);
}

.sajat-fejlesztes .section-title {
  color: #ffffff;
}

/* "Kutatás+Fejlesztés AI területen" jelvény – jelzi, hogy ez saját fejlesztés, nem piaci/
   általános megoldás leírása. A háttér-tónus opacitása 0.1→0.18-ra emelve a korábbi (fehér
   szekcióra tervezett) értékről, hogy a pill-forma a sötét háttéren is jól kirajzolódjon. */
.sajat-fejlesztes-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 1.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background-color: rgba(42, 157, 143, 0.18);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sajat-fejlesztes-lead {
  max-width: 80%;
  margin: -1.5rem auto 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

/* Felsorolás a korábbi hosszú bevezető helyett – Teal villám-jelvény minden ponton, vizuálisan
   ugyanaz a minta, mint a főoldal AI Labor .ai-feature-list/-icon-jánál (kör alakú Teal jelvény
   fehér ikonnal), csak önálló class-családdal (ld. class-elnevezési elv az "/ai/ aloldal"
   dokumentációban – az .ai-feature-* a főoldal AI Labor szekciójához kötött, nem hasznosítjuk
   újra közvetlenül). */
.sajat-fejlesztes-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto 3rem;
  list-style: none;
  text-align: left;
}

.sajat-fejlesztes-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.sajat-fejlesztes-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
}

.sajat-fejlesztes-list-icon svg {
  width: 14px;
  height: 14px;
}

/* SVG folyamatábra (4 állomás) a korábbi 4 kártyás rács helyett. Deszktopon vízszintes,
   mobilon (≤767px) függőleges verzió – 2 KÜLÖN SVG-fájl, ugyanaz a technika, mint a /bim/
   stratégia-folyamatábránál (20. lépés): megbízhatóbb, mint egy fájlon belüli SVG
   <style>+@media (ami <img>-be ágyazva böngészőnként eltérően viselkedhetne). A wrapper
   aria-hidden="true" – a diagram tartalma (mind a 4 állomás felirata) szövegesen már
   megjelenik a szekció szövegében/az SVG saját <title>-jében, tisztán illusztratív elem. */
.sajat-fejlesztes-flow {
  max-width: 1000px;
  margin: 0 auto 3rem;
}

.sajat-fejlesztes-flow-img--desktop {
  display: block;
  width: 100%;
  height: auto;
}

.sajat-fejlesztes-flow-img--mobile {
  display: none;
}

/* Záró doboz – 42. lépés: a korábbi Teal-tónusú (sötét szövegre tervezett) doboz helyett
   VILÁGOS kiemelés a sötét szekció-alapon, ugyanaz a minta, mint a /bim/ "Mi a CDE?"
   (.cde-definition-box) dobozánál – fehér/Light Canvas háttér + Teal felső szegély + erős
   árnyék, hogy jól kiugorjon. A .cta-box-wide módosítóval (ld. fent) szélesebb is, mint a
   felette lévő folyamatábra. FONTOS: a padding-ot NEM shorthand-dal állítjuk (csak top/bottom),
   hogy a .cta-box-wide saját padding-left/right értéke (a szélesítéshez szükséges) ne íródjon
   felül – ugyanaz a minta, mint az .adminisztracio-closing/.epitoipar-specialitas-closing-nél
   a margin esetében (41. lépés). */
.sajat-fejlesztes-closing {
  margin-top: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background-color: var(--color-bg-light);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-button);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.sajat-fejlesztes-closing-text {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .sajat-fejlesztes {
    padding: 3rem 0;
  }

  .sajat-fejlesztes-lead {
    max-width: 700px;
    margin-top: -1rem;
    margin-bottom: 2rem;
  }

  .sajat-fejlesztes-flow-img--desktop {
    display: none;
  }

  .sajat-fejlesztes-flow-img--mobile {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    height: auto;
  }

  .sajat-fejlesztes-closing {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .sajat-fejlesztes-closing-text {
    font-size: 0.95rem;
  }
}

/* "Működjünk együtt" záró CTA szekció (SZEKCIÓ 7, 35. lépés) – Light Canvas háttér, váltakozva
   az előző (.sajat-fejlesztes, fehér) szekcióhoz képest, mielőtt a sötét footer következik.
   Szó szerint a /bim/ aloldal .egyuttmukodes* szabályainak másolata (ugyanaz a döntés, mint a
   .hero-ai-bg / .ai-tartalom-nav-nál: azok a nevükben is a BIM modulhoz kötöttek, style.css-ben
   is a "BIM aloldal" szekció alatt élnek, ezért önálló "-ai" class-családot kaptak itt), 3
   oszlopos rácsra igazítva (a bim-es eredeti 4 oszlopos) és a kártya-háttér fehérre fordítva
   (a szekció itt Light Canvas, nem fehér, mint a bim-es változatnál – "megfordított kontraszt",
   ugyanaz a minta, mint a többi /ai/ szekció kártyáinál). */
.egyuttmukodes-ai {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

.egyuttmukodes-ai-intro {
  max-width: 80%;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-muted);
}

.egyuttmukodes-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* A 3 kártya azonos felépítésű/méretű – egyik sem "fontosabb" a másiknál. Flex column + a
   szöveg flex-grow-ja miatt a gombok minden kártyán azonos magasságban ülnek. */
.egyuttmukodes-ai-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.egyuttmukodes-ai-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.1);
}

.egyuttmukodes-ai-card-title {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.egyuttmukodes-ai-card-text {
  flex-grow: 1;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.egyuttmukodes-ai-card .btn {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .egyuttmukodes-ai {
    padding: 3rem 0;
  }

  .egyuttmukodes-ai-intro {
    max-width: 700px;
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  .egyuttmukodes-ai-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .egyuttmukodes-ai-card {
    padding: 1.5rem;
  }

  .egyuttmukodes-ai-card .btn {
    align-self: stretch;
    text-align: center;
  }
}

/* ==========================================================================
   /ai/ aloldal – reszponzív finomhangolás (35. lépés)
   ========================================================================== */

/* A 375px-es (keskeny mobil) átvizsgálás során talált egyetlen tényleges hiba: a "Horizontális
   vs. Vertikális" összehasonlító blokk (.ai-alapok-compare) mobil nézetben a középső "vs."
   elválasztó ::before pszeudo-elemének "left:0; right:0;" szélessége a divider SAJÁT paddingja
   nélkül a konténer teljes szélességéig ért (helyesen), DE a divider maga csak "height:2.5rem"
   volt explicit "width" nélkül – grid-elemként ez alapból helyesen 100%-ra nyúlik, tehát nem
   volt tényleges hiba, ELLENŐRIZVE (nem igényelt javítást). A többi 2×2-es kártyarács
   (.adminisztracio-grid / .epitoipar-specialitas-grid / .sajat-fejlesztes-grid) és a 2 hasábos
   .ismeros-helyzet-grid mind helyesen esik vissza 1 oszlopra ≤767px / ≤991px alatt – ELLENŐRIZVE
   a style.css meglévő media query-in keresztül, nem igényelt javítást.

   Egyetlen ténylegesen hiányzó darab: az in-page navigáció (.ai-tartalom-nav) 375px-en, 7 nav-
   ponttal – a .ai-tartalom-nav-inner már eleve overflow-x:auto (ld. fent), tehát vízszintesen
   görgethető, ez működik, DE hiányzott a lekerekített görgetési viselkedés (iOS Safari) és a
   görgetősáv elrejtése (vizuálisan zajos lenne egy vékony, natív scrollbar egy sticky sáv
   alatt) – ez a /bim/ #bim-tartalom-nav-inál sem volt kezelve, tehát ez egy ÚJ, mindkét modult
   érintő javítás, de csak az /ai/ oldal style.css-szakaszába kerül be (a /bim/-ét a jelen
   feladat nem kérte módosítani). */
.ai-tartalom-nav-inner {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ai-tartalom-nav-inner::-webkit-scrollbar {
  display: none;
}

/* A .btn elemek alapból inline-flex, shrink-to-fit szélességűek – a "Bővebben a BIM-ről"
   kártyán belüli .ai-bim-nav-card-cta ÉS a 3 új .egyuttmukodes-ai-card gombja is ellenőrizve
   375px-en: egyik szövege sem elég hosszú ahhoz, hogy túllógjon (a leghosszabb, "Bemutató
   kérése"/"Tanácsadás kérése" bőven elfér egy 343px-es tartalmi szélességben is) – nem
   igényelt width:100% felülírást, szemben az epitoipar-specialitas.php jóval hosszabb CTA-
   szövegével (ld. ott a dedikált mobil szabály). */

/* ==========================================================================
   Plannerly aloldal (/plannerly/) – 45. lépés: alapstruktúra + Hero + "ISO 19650 dokumentumok
   fontossága" szekció. Ugyanaz a class-elnevezési alapelv, mint a /ai/ modulnál (ld. fent,
   "Class-elnevezési alapelv" komment az AI aloldal blokk tetején): a Hero-háttér és az
   in-page navigáció SAJÁT, "plannerly-" előtagú class-családot kap (nem a .hero-bg/.hero-bim-
   bg/.hero-ai-bg vagy a .bim-tartalom-nav/.ai-tartalom-nav újrahasznosítva), mert ezek a nevükben
   is a modulhoz kötött, azonosító komponensek – a CSS-ÉRTÉKEK viszont szó szerint másoltak.
   ========================================================================== */

/* Plannerly Hero háttér – 52. lépés: a korábbi CSS-alapú gradiens+rácsmintázat+glow placeholder
   lecserélve a beérkezett assets/images/plannerly_hero.jpg-re. Szándékosan MÉG NEM image-set()/
   WebP – csak egyetlen JPG érkezett (nincs hozzá WebP-pár), ugyanúgy, ahogy a /ai/ Hero-ja is
   sima url()-lel indult a 36. lépésben, mielőtt esetleg WebP-optimalizálásra kerülne (ld. a
   /ai/ blokk fenti megjegyzését, "hero.png"/nyitott feladatok). Az overlay-gradiens ÉRTÉKEK szó
   szerint a .hero-bg-ből másolva (mint a .hero-bim-bg/.hero-ai-bg is tette), hogy mindegyik Hero
   olvashatósága/hangulata konzisztens legyen. */
.hero-plannerly-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../images/plannerly_hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-dark);
}

/* Balról jobbra halványuló sötét réteg – a szöveg a bal oldalon ül, jobbra jobban látszik a kép */
.hero-plannerly-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.85) 0%,
    rgba(15, 23, 42, 0.62) 42%,
    rgba(15, 23, 42, 0.32) 75%,
    rgba(15, 23, 42, 0.18) 100%
  );
}

/* Alul is egy kis extra sötétítés – ugyanaz a minta, mint a .hero-bg/.hero-bim-bg/.hero-ai-bg-nél */
.hero-plannerly-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.35) 100%);
}

/* Mobilon a szöveg teljes szélességben fut, ezért egyenletes, erősebb sötétítés kell a
   bal→jobb halványuló gradiens helyett (ugyanaz a minta, mint a .hero-bg-nél/.hero-bim-bg-nél/
   .hero-ai-bg-nél). A background-position:center-t (ld. fent) szándékosan nem módosítottuk
   mobilra – a kép közepén a "plannerly" felirat/mockup-ablak ül (nem üres ég/fal), ezért a
   középre-vágás keskeny mobil nézetben sem üres/érdektelen. */
@media (max-width: 767px) {
  .hero-plannerly-bg::before {
    background: rgba(15, 23, 42, 0.68);
  }

  .hero-plannerly-bg::after {
    background: rgba(15, 23, 42, 0.15);
  }
}

/* In-page navigáció (#plannerly-tartalom-nav) – szó szerint ugyanaz a szabálykészlet, mint a
   /bim/ #bim-tartalom-nav-jánál és a /ai/ #ai-tartalom-nav-jánál (ld. fent), csak "plannerly-"
   előtagú, önálló class-neveken. A vízszintes görgetősáv-elrejtés (scrollbar-width/::-webkit-
   scrollbar) ELEVE bekerült ide, a /ai/ 35. lépésben tanult leckéje alapján (ld. fent) – nem
   kellett utólag pótolni, mint ott. */
.plannerly-tartalom-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-gray-light);
}

.plannerly-tartalom-nav-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.plannerly-tartalom-nav-inner::-webkit-scrollbar {
  display: none;
}

.plannerly-nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  white-space: nowrap;
}

.plannerly-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.plannerly-nav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
}

/* Aktív szekció kiemelése – JS-sel kapja (plannerly/index.php scroll-spy szkriptje) */
.plannerly-nav-link.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (max-width: 767px) {
  .plannerly-nav-link {
    padding: 0.8rem 0.85rem;
    font-size: 0.8rem;
  }
}

/* "ISO 19650 dokumentumok fontossága" szekció (SZEKCIÓ 1) – Light Canvas háttér. */
.iso19650 {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

/* 53. lépés: 2 hasábos elrendezés, kb. 60/40 (3fr/2fr) – a szerkezeti minta a /bim/
   .mi-a-bim-columns-ét követi (ott 1.3fr/1fr, itt a feladat kifejezetten 60/40-et kért, ezért
   3fr/2fr). Ugyanaz a max-width/margin, ami korábban az egyhasábos .iso19650-body-n volt. */
.iso19650-columns {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: center;
  max-width: 1152px;
  margin: 0 auto;
}

/* A korábbi "80% + középre igazítva" szabály (egyhasábos elrendezéshez készült) megszűnt – 2
   hasábos elrendezésben a szöveg a bal oszlop TELJES szélességét kitölti, balra igazítva,
   ugyanaz a tipográfia, mint a /bim/ .mi-a-bim-body-jánál. */
.iso19650-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.iso19650-text {
  margin-bottom: 1.25rem;
}

.iso19650-text:last-of-type {
  margin-bottom: 0;
}

.iso19650-visual {
  display: flex;
  justify-content: center;
}

.iso19650-diagram {
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* Kiemelt CTA-doboz – VÁLTOZATLAN stílus, csak mostantól a 2 hasábos rész ALATT, teljes
   szélességben áll (ugyanaz a szerkezeti döntés, mint az /ai/ .ai-bim-kapcsolat-cta-wrap-nál):
   halvány Teal háttér + Teal bal szegély, a gomb a közös .btn.btn-primary osztályt kapja
   közvetlenül a HTML-ben (nincs itt saját gomb-stílus duplikálva). */
.iso19650-cta-wrap {
  margin: 3rem auto 0;
  padding: 2rem 2.25rem;
  max-width: 1152px;
  background-color: rgba(42, 157, 143, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.iso19650-cta-support {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .iso19650 {
    padding: 3rem 0;
  }

  /* Mobilon a szöveg és az ábra egymás alá kerül (ugyanaz a minta, mint a
     .mi-a-bim-columns-nál) – a DOM-sorrend (szöveg → ábra) miatt külön "order" nélkül a
     szöveg marad felül, az ábra alul. */
  .iso19650-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .iso19650-body {
    font-size: 0.95rem;
  }

  .iso19650-diagram {
    max-width: 300px;
  }

  .iso19650-cta-wrap {
    padding: 1.5rem 1.5rem;
  }

  .iso19650-cta-support {
    font-size: 0.95rem;
  }

  /* Teljes szélességű, jól tapintható gomb mobilon – ugyanaz a minta, mint az
     .ismeros-helyzet-cta-wrap .btn-nél. */
  .iso19650-cta-wrap .btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
  }
}

/* "Miért a Plannerly" szekció (SZEKCIÓ 2, 46. lépés) – fehér háttér, váltakozva az előző
   (.iso19650, Light Canvas) szekcióhoz képest. A .value-card ALAP (Light Canvas) háttere itt
   nem igényel felülírást – az magától elválik ettől a fehér szekció-háttértől (fordított eset,
   mint pl. az .adminisztracio-nál, ahol a szekció maga Light Canvas, ott KELLETT fehérre
   felülírni a kártyát). */
.miert-plannerly {
  padding: 5rem 0;
  background-color: #ffffff;
}

.miert-plannerly-intro {
  max-width: 80%;
  margin: -1.5rem auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}

/* 1→2→4 oszlopos mobile-first lépcső, ugyanaz a minta, mint az .adminisztracio-grid-nél (ld.
   fent, "AI aloldal" blokk) – a mobil (≤767px) 1 oszlop változatlanul a .value-prop-grid alap
   media query-jéből öröklődik. */
.miert-plannerly-grid {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .miert-plannerly-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .miert-plannerly-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .miert-plannerly-grid .value-card {
    padding: 1.5rem 1.375rem;
  }

  .miert-plannerly-grid .value-card-title {
    font-size: 1.05rem;
  }

  .miert-plannerly-grid .value-card-text {
    font-size: 0.88rem;
  }
}

/* A számszerű eredmény a domináns vizuális elem a kártya fejlécében – a feladat kifejezetten
   ezt kérte az ikon HELYETT (a .value-card-icon itt szándékosan nincs használva). Nagy,
   félkövér, Teal szám/adat, alatta közvetlenül a .value-card-title következik. */
.miert-plannerly-card-stat {
  margin-bottom: 0.75rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
}

/* A 3./4. kártyánál nincs konkrét számadat a forrásszövegben (ld. miert-plannerly.php komment)
   – ugyanolyan vizuális súlyú, de kisebb betűméretű szöveges címke lép a szám helyébe, hogy a
   4 kártya egységes maradjon. */
.miert-plannerly-card-stat--text {
  font-size: 1.2rem;
}

@media (min-width: 1100px) {
  .miert-plannerly-card-stat {
    font-size: 1.6rem;
  }

  .miert-plannerly-card-stat--text {
    font-size: 1.05rem;
  }
}

/* Kiemelt záró doboz – szó szerint az .iso19650-cta-wrap mintája (halvány Teal háttér + Teal
   bal szegély), önálló class alatt, hogy a szekció fájlja önmagában maradjon karbantartható. */
.miert-plannerly-closing {
  margin: 3rem auto 0;
  padding: 2rem 2.25rem;
  max-width: 1152px;
  background-color: rgba(42, 157, 143, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.miert-plannerly-closing-text {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .miert-plannerly {
    padding: 3rem 0;
  }

  .miert-plannerly-intro {
    max-width: 700px;
    margin-top: 0;
    font-size: 0.95rem;
  }

  .miert-plannerly-closing {
    padding: 1.5rem 1.5rem;
  }

  .miert-plannerly-closing-text {
    font-size: 0.95rem;
  }

  /* Teljes szélességű, jól tapintható gomb mobilon – ugyanaz a minta, mint az
     .iso19650-cta-wrap .btn-nél. */
  .miert-plannerly-closing .btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
  }
}

/* "Mi értjük, és segítünk a bevezetésében" szekció (SZEKCIÓ 3, 47. lépés) – Light Canvas
   háttér, váltakozva az előző (.miert-plannerly, FEHÉR) szekcióhoz képest. A kártyarács maga a
   közös .value-prop-grid (MODIFIER NÉLKÜL – az alap 3/2/1 oszlopos lépcső pontosan a feladat
   kérését adja), a kártyák fehér hátteret kapnak, mert a .value-card alap Light Canvas háttere
   itt eltűnne a szekció saját, ugyanolyan színű hátterén – ugyanaz a minta, mint a /bim/
   .felhasznalas .value-card-jénél és az /ai/ .adminisztracio .value-card-jénél. */
.bevezetes-tamogatas {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

.bevezetes-tamogatas .value-card {
  background-color: #ffffff;
}

.bevezetes-tamogatas-intro {
  max-width: 80%;
  margin: -1.5rem auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}

/* Kiemelt záró doboz – szó szerint az .iso19650-cta-wrap / .miert-plannerly-closing mintája
   (halvány Teal háttér + Teal bal szegély, ugyanaz az rgba-érték – az .iso19650 szekció szintén
   Light Canvas hátteret használ, tehát ugyanez a szín ott is bizonyítottan jól elválik). Önálló
   class alatt, hogy a szekció fájlja önmagában maradjon karbantartható. */
.bevezetes-tamogatas-closing {
  margin: 3rem auto 0;
  padding: 2rem 2.25rem;
  max-width: 1152px;
  background-color: rgba(42, 157, 143, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.bevezetes-tamogatas-closing-text {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .bevezetes-tamogatas {
    padding: 3rem 0;
  }

  .bevezetes-tamogatas-intro {
    max-width: 700px;
    margin-top: 0;
    font-size: 0.95rem;
  }

  .bevezetes-tamogatas-closing {
    padding: 1.5rem 1.5rem;
  }

  .bevezetes-tamogatas-closing-text {
    font-size: 0.95rem;
  }

  /* Teljes szélességű, jól tapintható gomb mobilon – ugyanaz a minta, mint az
     .iso19650-cta-wrap / .miert-plannerly-closing .btn-nél. */
  .bevezetes-tamogatas-closing .btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
  }
}

/* "BIM stratégia része" ÁTVEZETŐ BLOKK (48. lépés) – SZÁNDÉKOSAN rövidebb függőleges padding
   (nem a szokásos 5rem, mint a teljes szekcióknál), mert ez egy köztes, kisebb súlyú blokk, nem
   önálló tartalmi szekció.

   54. lépés: a korábbi FEHÉR szekció-háttér (a dobozon belül sötét) most a TELJES szekcióra
   kiterjedő sötét háttérré (var(--color-bg-dark)) váltott – ugyanaz a "sötét zóna" minta, mint
   az /ai/ .ai-labor-nál / a /bim/ .informaciomegosztas-nál. Emiatt a doboz saját, korábban
   TÖMÖR sötét háttere (ami a fehér szekción még jól elkülönült) most a szekcióval AZONOS
   színű lett volna, ami visszahozta volna az eredeti "összeolvadás" problémát (ld. korábbi
   felhasználói visszajelzés a 48. lépés után) – csak fordítva. Ezért a doboz áttetsző,
   halvány fehér overlay-kártyává váltott, szó szerint az /ai/ .ai-feature-card mintája
   (rgba(255,255,255,0.05) háttér + rgba(255,255,255,0.12) szegély), ami sötét szekció-
   háttéren is látható, elkülönülő "kártya" hatást ad. */
.bim-strategia-resze {
  padding: 3rem 0;
  background-color: var(--color-bg-dark);
  color: #ffffff;
}

/* Keskeny, középre igazított kiemelt doboz – szűkebb max-width, mint az eddigi teljes
   szélességű (1152px) záró dobozok, hogy vizuálisan is érzékelhető legyen: ez egy kompakt
   átvezetés, nem egy teljes szekció tartalma. */
.bim-strategia-resze-box {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 2.25rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-button);
  text-align: center;
}

.bim-strategia-resze-title {
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
}

.bim-strategia-resze-text {
  margin-bottom: 1.5rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 767px) {
  .bim-strategia-resze {
    padding: 2.25rem 0;
  }

  .bim-strategia-resze-box {
    padding: 1.5rem 1.5rem;
  }

  .bim-strategia-resze-title {
    font-size: 1.1rem;
  }

  .bim-strategia-resze-text {
    font-size: 0.92rem;
  }

  /* Teljes szélességű, jól tapintható gomb mobilon – ugyanaz a minta, mint a modul többi
     kiemelt dobozánál. */
  .bim-strategia-resze-box .btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
  }
}

/* "Rendelje meg rajtunk keresztül" szekció (SZEKCIÓ 5, 49. lépés) – Light Canvas háttér,
   váltakozva az előző (.bim-strategia-resze, FEHÉR) blokkhoz képest. Ez a modul fő konverziós
   pontja, ezért teljes, standard szekció-padding (nem a .bim-strategia-resze rövidített
   átvezető-paddingja). */
.rendeles {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

.rendeles-intro {
  max-width: 80%;
  margin: -1.5rem auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}

/* 54. lépés: a korábbi kompakt pipás checklist (.rendeles-list/.rendeles-icon, ld. git history)
   helyett valódi 3 kártyás rács – a közös .value-prop-grid/.value-card ad keretet (mint a
   miert-plannerly.php-nál/bevezetes-tamogatas.php-nál), a .rendeles-cards-grid módosító csak az
   ikon-méretet nagyítja fel (a feladat kifejezetten "jól láthatóan nagyobb" ikonokat kért, mint
   az alap .value-card-icon 52px/26px mérete). A szekció Light Canvas hátterű, ezért a kártyák
   fehér hátteret kapnak (fehér-szekción-szürke-kártya szabály fordítva – ugyanaz a minta, mint
   a .bevezetes-tamogatas .value-card-nél). */
.rendeles .value-card {
  background-color: #ffffff;
}

.rendeles-cards-grid {
  margin-bottom: 2.75rem;
}

.rendeles-cards-grid .value-card-icon {
  width: 72px;
  height: 72px;
}

.rendeles-cards-grid .value-card-icon svg {
  width: 38px;
  height: 38px;
}

.rendeles-cta-wrap {
  text-align: center;
}

/* A feladat kifejezetten kérte, hogy ez a gomb legyen jól látható, mivel ez az oldal egyik fő
   konverziós pontja – ezért nagyobb padding/betűméret, mint az alap .btn-primary, ugyanúgy,
   ahogy a Hero .hero-btn-primary is kiemelt méretet kap. */
.rendeles-cta-btn {
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
}

@media (max-width: 767px) {
  .rendeles {
    padding: 3rem 0;
  }

  .rendeles-intro {
    max-width: 700px;
    margin-top: 0;
    font-size: 0.95rem;
  }

  .rendeles-cards-grid {
    margin-bottom: 2rem;
  }

  .rendeles-cards-grid .value-card-icon {
    width: 60px;
    height: 60px;
  }

  .rendeles-cards-grid .value-card-icon svg {
    width: 32px;
    height: 32px;
  }

  .rendeles-cta-btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
  }
}

/* "Újdonságok a Plannerlyben" szekció (SZEKCIÓ 6, 51. lépés) – fehér háttér, váltakozva az
   előző (.rendeles, Light Canvas) szekcióhoz képest. A .value-card ALAP (Light Canvas) háttere
   itt nem igényel felülírást – ugyanaz a minta, mint a miert-plannerly.php-nál/
   bevezetes-tamogatas.php-nál (fordítva: ott a Light Canvas hátterű szekció kártyáit kellett
   fehérre váltani, itt a fehér szekció kártyái maradnak Light Canvas-ok, magától elválnak). */
.ujdonsagok {
  padding: 5rem 0;
  background-color: #ffffff;
}

/* Kiemelt záró doboz – szó szerint az eddigi minta (halvány Teal háttér + Teal bal szegély),
   önálló class alatt, hogy a szekció fájlja önmagában maradjon karbantartható. */
.ujdonsagok-closing {
  margin: 3rem auto 0;
  padding: 2rem 2.25rem;
  max-width: 1152px;
  background-color: rgba(42, 157, 143, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-button);
  text-align: center;
}

.ujdonsagok-closing-text {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .ujdonsagok {
    padding: 3rem 0;
  }

  .ujdonsagok-closing {
    padding: 1.5rem 1.5rem;
  }

  .ujdonsagok-closing-text {
    font-size: 0.95rem;
  }

  /* Teljes szélességű, jól tapintható gomb mobilon – ugyanaz a minta, mint a modul többi
     kiemelt dobozánál. */
  .ujdonsagok-closing .btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
  }
}