/* ============================================================
   Szegletház – modern újraépítés
   Sima HTML + kézzel írt CSS (Tailwind nélkül)
   ============================================================ */

/* ---------- Design tokens (márkapaletta a logóból) ---------- */
:root {
  --green:        #7ca067;   /* logó kör + felirat */
  --green-dark:   #5f8050;   /* szöveg-link zöld (AA kontraszt fehéren) */
  --olive:        #8d964e;
  --teal:         #3b9d9d;   /* logó ablakok */
  --teal-light:   #82c0c7;
  --coral:        #dbdbdb;   /* CTA gomb */
  --coral-dark:   #c4c4c4;   /* EGYSÉGES coral hover mindenhol */
  --sand:         #d3bf91;   /* dekoratív arany: cím sötét háttéren, ikonok, elválasztók */
  --sand-dark:    #a3833a;   /* szöveg-link/név arany világos háttéren */
  --primary:      #e0c588;   /* élő oldal elsődleges arany (címsorok, gombok) */
  --link:         #c5ab9e;   /* élő oldal alap link/accent szín */

  --ink:          #282625;   /* EGYSÉGES sötét szín (szöveg, sötét panelek) – élő oldal Text Primary */
  --muted:        #6b645d;   /* EGYSÉGES másodlagos szürke szöveg */
  --bg:           #ffffff;   /* élő oldal Background */
  --bg-alt:       #c5ab9e;
  --white:        #ffffff;
  --hairline:     #e2ddcf;

  --header-h: 84px;
  --radius:     20px;   /* kártyák, panelek – kerekebb, barátságosabb */
  --radius-sm:  14px;   /* kisebb kártyák, ikonok, mezők */
  --radius-pill: 999px; /* minden pill gomb */
  --shadow:   0 10px 30px rgba(44, 40, 37, 0.10);
  --shadow-sm: 0 4px 14px rgba(44, 40, 37, 0.08);
  --container: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --bp-tablet: 960px;
  --bp-mobile: 600px;
}

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

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

body {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Rubik", system-ui, sans-serif;
  line-height: 1.15;
  font-weight: 500;
  color: var(--primary);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Gombok ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 11px 24px; font-size: 0.92rem; }

.btn-primary {
  background: var(--coral);
  color: var(--green-dark);
  border-color: var(--green);
  box-shadow: 0 8px 20px rgba(219, 219, 219, 0.35);
}
.btn-primary:hover { background: var(--coral-dark); border-color: var(--green-dark); box-shadow: 0 12px 26px rgba(219, 219, 219, 0.45); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.85);
}
.btn-ghost:hover { background: var(--white); color: var(--ink); }

/* sötét-üveg gomb fotó-hero fölé (ink szín, csökkentett átlátszósággal a nyers fekete helyett) */
.btn-ghost-dark {
  background: rgba(44, 40, 37, 0.55);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost-dark:hover { background: rgba(44, 40, 37, 0.8); }

.btn-secondary {
  background: var(--white);
  color: var(--green-dark);
  border-color: var(--green);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--green); color: var(--white); }

/* tömör sötét pill világos hátteren (pl. "További szakemberek") */
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: color-mix(in srgb, var(--ink) 82%, white); }

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
/* Nincs fejléc-sáv: a header csak egy átlátszó, kattintást átengedő réteg,
   amely a jobb felső sarokba helyezi a hamburger ikont. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  pointer-events: none; /* a sáv ne fogja el a mögötte lévő tartalom kattintásait */
}
.site-header > .container { max-width: none; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logó balra, hamburger jobbra */
}

/* Logó a bal felső sarokban – a hamburgerrel azonos sorban, háttér nélkül,
   csak a logó maga, lágy türkiz-kék derengéssel. A link mindig a kezdőlapra
   visz. A méret a hamburger korongjának 130%-a. */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  background: none;
  pointer-events: auto; /* a header réteg átengedi a kattintást, a logó viszont kattintható */
  z-index: 110;
  /* Lassú, ráérős beúszás a heró elhagyásakor – nem villan be, hanem
     lágyan előjön. */
  transition: opacity .7s var(--ease), transform .7s var(--ease),
              visibility .7s var(--ease);
}
/* Az árnyék drop-shadow, nem box-shadow: háttér nélkül a box-shadow egy
   üres négyzet köré rajzolna glóriát – a drop-shadow viszont a logó
   alakját követi (a PNG átlátszó része körül nem fest semmit). */
.brand-logo {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--teal) 55%, transparent))
          drop-shadow(0 0 14px color-mix(in srgb, var(--teal) 35%, transparent));
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.brand:hover .brand-logo {
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--teal) 70%, transparent))
          drop-shadow(0 0 18px color-mix(in srgb, var(--teal) 50%, transparent));
}

/* A kezdőlap heró-ja fölött rejtve marad: ott a nagy logó-animáció viszi a
   márkát, a sarokban lévő kis logó csak ismételné. A heró elhagyásakor
   halkan beúszik. A body.at-hero osztályt az index.html már a forrásban
   viseli (nincs felvillanás), a JS pedig görgetéskor le-/felveszi. */
body.at-hero .brand {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.9);
  pointer-events: none;
}

/* ---------- Lenyíló főmenü (fentről lefelé) ----------
   A <nav> a headeren KÍVÜL van a DOM-ban, ezért a teljes képernyőt
   lefedi a tetejétől az aljáig. A jobb felső ikon végig fölötte marad. */
/* A szélesség KORÁBBAN min(22vw, 280px) volt: ez a 280px-et csak ~1280px-nél
   szélesebb ablakon adta ki, egy 390px-es telefonon viszont 22vw = 86px-re
   zsugorodott – a menü egy használhatatlan csíkká vált, minden felirat
   levágva. A két tag sorrendje fordítva helyes: a px a KÍVÁNT szélesség, a
   vw csak felső korlát keskeny kijelzőn (86vw = a lap széle mindig látszik,
   így a menün kívülre koppintva zárható). */
.primary-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(280px, 86vw);
  height: 100vh;
  height: 100dvh;
  z-index: 95;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: -6px 0 32px rgba(44, 40, 37, 0.14);
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(110%); /* jobbra elrejtve */
  transition: transform .4s var(--ease), visibility .4s var(--ease);
}
body.menu-open .primary-nav { transform: translateX(0); visibility: visible; }

.menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 94;
}
body.menu-open .menu-backdrop { display: block; }

/* Telefonon a menü a képernyő nagy részét elfoglalja, ezért a mögötte maradó
   csík nem "a lap, amit épp nézek", hanem háttér: a tompítás ezt teszi
   egyértelművé, és a lap görgetését is zároljuk, hogy a nyitott menü mögött
   ne csússzon el a tartalom. */
@media (max-width: 900px) {
  .menu-backdrop { background: rgba(40, 36, 33, 0.45); }
  body.menu-open { overflow: hidden; }

  /* Ujjal is biztosan eltalálható menüpontok (a 8px-es függőleges padding
     ~34px magas sort adott, ami koppintásra kevés). */
  .primary-nav a { padding: 12px 16px; font-size: 1.05rem; }
  .primary-nav ul { gap: 4px; }
}

.primary-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  min-height: 100%;
  padding: 16px 16px 24px;
}
.primary-nav a {
  display: block;
  padding: 8px 14px;
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

/* Kezdőlap – nagy, a bezárás gombbal egy sorban (a panel tetején, bal oldalt) */
.primary-nav li:first-child {
  margin-bottom: 10px;
}
.primary-nav li:first-child a {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-dark);
  padding: 12px 14px;
  padding-right: 70px;
  line-height: 1.1;
}
.primary-nav li:first-child a.is-active::after {
  width: 100%;
  margin-left: 0;
}
.primary-nav a:hover { background: rgba(124, 160, 103, 0.14); color: var(--green-dark); }
.primary-nav a.is-active { color: var(--green-dark); }
.primary-nav a.is-active::after {
  content: "";
  display: block;
  height: 3px;
  width: 44px;
  margin: 4px auto 0;
  border-radius: 3px;
  background: var(--coral);
}

/* Kapcsolat = kiemelt CTA. A mély türkiz ugyanaz a szín, mint a Fejlesztőház
   hero „Vissza a Kezdőlapra” pillje (--teal ink-kel mélyítve): a korábbi szürke
   helyett kiemelkedik a menüből, és a fehér felirat AA-kontrasztban marad. */
.primary-nav a.nav-cta {
  margin-top: 8px;
  background: color-mix(in srgb, var(--teal) 72%, var(--ink));
  color: var(--white) !important;
  border: 2px solid transparent;
  padding-inline: 14px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--teal) 35%, transparent);
}
.primary-nav a.nav-cta:hover { background: color-mix(in srgb, var(--teal) 90%, var(--ink)); }
.primary-nav a.nav-cta::after { display: none; }

/* Hamburger gomb – az egyetlen elem a tetején, a jobb felső sarokban.
   Lágy, áttetsző háttérkorong, hogy világos és sötét szakaszok fölött is
   jól látszódjon. */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto; /* akkor is jobbra marad, ha egy oldalon nincs logó a fejlécben */
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto; /* a header réteg átengedi a kattintást, az ikon viszont kattintható */
  z-index: 110;
  background: var(--white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(44, 40, 37, 0.16);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-toggle:hover { background: var(--white); }
.nav-toggle span {
  display: block;
  height: 2px;
  width: 28px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .25s var(--ease), background-color .3s var(--ease);
}
body.menu-open .nav-toggle span { background: var(--ink); }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO (logó-animáció)
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;          /* pontosan a látható ablakot tölti ki -> a logó nem csúszik ki */
  /* Az animáció saját háttere (meleg tónusú "Sage" gradiens). Ugyanez a heró
     háttere is, így az animáció és a környezete hézagmentesen összeolvad
     (nincs "videó-keret"). A középső stop a márkaszín (#e0d6d1); a világosabb
     közép és a sötétebb szél ugyanazt a világosság-lefutást tartja, mint a
     korábbi kék változat – ettől emelkedik ki a logó a háttérből. */
  background: radial-gradient(circle at 50% 44%, #f2efee 0%, #e0d6d1 50%, #ccbfb8 100%);
  overflow: hidden;
}
/* A logó-animáció kis dobozban ül (korábban az egész heró-t kitöltötte).
   Az iframe ÁTLÁTSZÓ (lásd main.js), a hátteret végig a .hero gradiense adja –
   ezért lehet a dobozt szabadon méretezni/pozicionálni anélkül, hogy látható
   téglalapként elütne.

   A doboz 16:9, mert a belső "színpad" is az (1920×1080). Így a méretezés
   egyértelmű: a logó átmérője a doboz szélességének állandó hányada, nem
   függ attól, hogy a böngésző "contain" vagy "cover" szerint illeszti be. */
.hero {
  /* ---- EZ A HÁROM ÉRTÉK HANGOLHATÓ ---- */
  --logo-d:   clamp(162px, 17.5vw, 256px);  /* a logó LÁTHATÓ átmérője */
  --logo-top: calc(clamp(120px, 17vh, 190px) - 60px);  /* a logó teteje a heró tetejétől */
  /* A logó (és a mottó) FÜGGŐLEGES tengelye a heró szélességének %-ában.
     50% = pontosan középen; ennél kisebb érték a Fejlesztőház-oldal felé húzza.
     33%-nál a logó bal széle még elkerüli a bal oldali kulcsszó-oszlopot (az
     a ~260px-ig ér) – lejjebb véve a kulcsszavak (z-index 3) a logó fölé
     kerülnének. */
  --logo-cx:  33%;

  /* ---- innentől számított értékek, ne írd át kézzel ----
     A logó egy 16:9-es "színpad" (1920×1080) belsejében ül, amit az iframe
     méretez. A dobozon belül NEM középen van és nem is tölti ki; a két arány
     a rendereltből PIXELESEN MÉRT érték (a logó zöld gyűrűjének befoglaló
     doboza), és 16:9-es doboznál állandó, mert a színpad méretezése a doboz
     szélességével lineáris:
       átmérő    = 0.2804 × doboz-szélesség
       közép (y) = 0.4643 × doboz-magasság
     Ezeket visszafelé oldjuk meg, hogy a fenti két hangolható értéket
     közvetlenül a logóra lehessen megadni – különben a doboz nagyítása a
     logót lefelé is elmozdítaná. */
  --stage-w: calc(var(--logo-d) / 0.2804);
  --stage-h: calc(var(--stage-w) * 9 / 16);
  --stage-top: calc(var(--logo-top) - var(--stage-h) * 0.4643 + var(--logo-d) / 2);
  --logo-bottom: calc(var(--logo-top) + var(--logo-d));
  --tagline-w: min(560px, 44vw);

  /* A gombsáv teteje. Azért ITT van (és nem a .hero-actions-ben beégetve),
     mert a kulcsszavaknak is ismerniük kell: belőle számoljuk a --kw-safe
     alsó korlátot, így a két érték nem tud egymástól elcsúszni. */
  --actions-top: clamp(100px, 15vh, 170px);

  /* A kulcsszavak legfelső megengedett pozíciója = a gombsáv alja + rés.
     A gombok px-ben vannak lehorgonyozva (100px-es alsó korláttal), a
     kulcsszavak viszont a heró magasságának SZÁZALÉKÁBAN – alacsony ablakon
     (fekvő telefon, kis laptop-ablak) a százalék összeszalad a fix gombsávval,
     és a "Gyermekfejlesztés" nekicsúszik a Fejlesztőház gombnak. A százalék és
     e korlát közül a max() mindig a lejjebb esőt választja: magas ablakon a
     százalék nyer (a dizájn változatlan), alacsonyon ez a korlát véd.
     58px a gomb tényleges magassága, +28px a rés. */
  --kw-safe: calc(var(--actions-top) + 86px);

  /* A kulcsszavak közti FÜGGŐLEGES lépésköz. Egyetlen érték az összes szóra,
     mindkét oldalon: ebből következik, hogy a szavak közti rés mindenhol
     ugyanakkora (a pillek magassága is azonos, egysorosak). Nem százalék,
     mert a max()-os felső korláttal keveredve soronként más-más ág nyerne,
     és a lépésköz sorról sorra megváltozna. */
  --kw-step: clamp(52px, 7.5vh, 76px);

  /* Vízszintes horgonypont: minden kulcsszó ugyanennyire áll a képernyő bal
     (bal oszlop) ill. jobb (jobb oszlop) szélétől – így a szavak egymás alatt
     egy egyenes mentén állnak, a köztük lévő távolság minden szomszédos pár
     között azonos. */
  --kw-inset: clamp(14px, 2.6vw, 48px);
}
/* A "színpad" egyben vágódoboz is: az iframe alsó sávját levágja, ahol a DC
   keretrendszer lejátszó-vezérlősávja ül (a main.js CSS-injekciója nem éri el).
   A logó alja a doboz magasságának 71.4%-ánál van, a vezérlősáv teteje pedig
   ~91%-nál (a sáv fix ~28px). A 80% mindkettő között biztonsággal elfér. */
.hero-stage {
  position: absolute;
  top: var(--stage-top);
  left: var(--logo-cx);
  margin-left: calc(var(--stage-w) / -2);          /* transform nélkül központoz – lásd .hero-tagline */
  width: var(--stage-w);
  height: calc(var(--stage-h) * 0.80);
  overflow: hidden;
  /* Kell az explicit z-index: a .hero-photo z-index:1, a pozicionált de
     z-index:auto elemek pedig ALATTA festődnek – enélkül a fotó eltakarná
     a logót. */
  z-index: 2;
  /* Az iframe a betöltés során mutathat vezérlősávot vagy üres terültet.
     A stage-et is-revealed-ig rejtve tartjuk, így az elrejtett iframe
     nem "villan" be a fedőréteg eltávolítása alatt. */
  animation: hero-ui-in 0.8s var(--ease) 1.41s both;
  animation-play-state: paused;
}
.hero.is-revealed .hero-stage { animation-play-state: running; }

/* ---------- Heró-fotó (a logótól jobbra, a képernyő széléig) ----------
   A réteg a TELJES heró-t lefedi, a láthatóságát két maszk szabja meg:

     1) VÍZSZINTESEN a logó vonalánál kezd feltűnni: balra teljesen átlátszó,
        jobbra a képernyő széléig erősödik. A stopok a --logo-cx-hez vannak
        kötve, nem fix százalékhoz – így ha a logót arrébb húzod, a fotó
        kezdete magától követi, nem csúszik rá a logóra.

     2) FÜGGŐLEGESEN lefelé elfogy, hogy hézagmentesen fusson bele az alatta
        következő szekcióba (a .hero::after fehér fátyla ezt tovább lágyítja).

   A kettőt a mask-composite: intersect metszi össze – enélkül a böngésző az
   uniójukat venné (alapértelmezés: add), és a fotó a logó fölött is látszana.
   A -webkit-mask-composite: source-in ugyanez a régebbi WebKit-szintaxissal.

   A maszk legnagyobb alfája szándékosan 0.62 és nem 1: a fotó így háttér-
   tónus marad, nem nyomja agyon a heró-t, és a fölötte ülő jobb oldali
   kulcsszavak is olvashatóbbak maradnak. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* "right bottom": a kép JOBB ALSÓ sarka (kerítés, sátor, fák) kerül a
     látható sávba. A cover a heró szélességéhez méretez, a függőleges
     túlnyúlást pedig alulra igazítjuk – így az ég nagy része kiesik felül,
     és az épület alsó harmada + az udvar marad. */
  background: url("../assets/images/kezdolap.jpeg") right bottom / cover no-repeat;
  /* Lágy előtűnés a logó feltűnésekor (lásd .hero.is-revealed lentebb).
     CSAK opacity animálódik: a maszk gradiensei a --logo-cx-hez vannak kötve,
     egy transform elmozdítaná őket és a fotó rácsúszna a logóra.
     Az opacity: 0 szándékosan a keyframe-ben van és nem itt: a lap alján a
     prefers-reduced-motion szabály minden animációt kikapcsol, és ha az
     alapállapot lenne 0, a fotó ott véglegesen láthatatlan maradna. */
  animation: hero-photo-in 1.6s var(--ease) 0.2s both;
  animation-play-state: paused;
  /* A függőleges elhalványulás később indul (58%) és csak a legalján ér
     nullára, hogy a jobb alsó sarok ne mosódjon ki, de a szekcióhatárnál
     még mindig hézagmentes legyen az átmenet. */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent calc(var(--logo-cx) + 2%),
      rgba(0, 0, 0, 0.26) calc(var(--logo-cx) + 15%),
      rgba(0, 0, 0, 0.52) calc(var(--logo-cx) + 34%)),
    linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image:
    linear-gradient(to right,
      transparent calc(var(--logo-cx) + 2%),
      rgba(0, 0, 0, 0.26) calc(var(--logo-cx) + 15%),
      rgba(0, 0, 0, 0.52) calc(var(--logo-cx) + 34%)),
    linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* A fotó a logó feltűnésekor úszik be, nem a lapbetöltéskor – ugyanaz a
   kapcsoló, mint a gomboknál/mottónál (a betöltő fedőréteg addig úgyis
   takarja). Kicsivel a szöveges UI (1.41s) ELŐTT indul, hogy a háttér már
   a helyén legyen, mire a gombok és a kulcsszavak megjelennek. */
.hero.is-revealed .hero-photo { animation-play-state: running; }

@keyframes hero-photo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-animation {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--stage-h);                          /* teljes 16:9 – a vágást a .hero-stage végzi */
  border: 0;
  display: block;
}
/* Mottó a logó alatt, VELE AZONOS függőleges tengelyen (--logo-cx), hogy a
   kettő egy blokként mozogjon. A központozás fix szélesség + negatív
   margin-left, NEM translateX(-50%): a hero-ui-in keyframe maga is transform-ot
   animál, így egy központosító transform-ot felülírna és a szöveg elugrana. */
.hero-tagline {
  position: absolute;
  top: calc(var(--logo-bottom) + clamp(24px, 4.5vh, 52px) - 10px);
  left: var(--logo-cx);
  margin-left: calc(var(--tagline-w) / -2);
  width: var(--tagline-w);
  z-index: 3;
  text-align: center;
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.6vw, 1.25rem);
  line-height: 1.3;
  /* Világosabb, meleg szürke a korábbi majdnem fekete --ink helyett. Ez
     nagyjából a világosítás határa: a heró gradiensén így is 4.5:1 fölött
     marad a kontraszt (WCAG AA) – ennél világosabb tónus már megbukna. */
  color: var(--muted);
  text-wrap: balance;
  animation: hero-ui-in 0.8s var(--ease) 1.41s both;
  animation-play-state: paused;
}
.hero.is-revealed .hero-tagline { animation-play-state: running; }

/* Betöltési fedőréteg: azonos gradiens mint a hero – takarja az iframe-et amíg
   az animáció el nem indul, így semmi villanás nem látszik. JS távolítja el. */
.hero-load-cover {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: radial-gradient(circle at 50% 44%, #f2efee 0%, #e0d6d1 50%, #ccbfb8 100%);
  pointer-events: none;
}
/* Gombok. animation-play-state: paused amíg a .hero nem kapja meg az
   "is-revealed" osztályt (JS adja hozzá a logó tényleges feltűnésekor) –
   enélkül a fix másodperc-késleltetés a lapbetöltéshez képest futna, ami a
   hálózat sebességétől függően a logó feltűnése ELŐTT véget érhetne (a
   felhasználó soha nem látná a mozgást, csak a már kész végállapotot). */
.hero-actions {
  animation: hero-ui-in 0.8s var(--ease) 1.41s both;
  animation-play-state: paused;
}

.hero.is-revealed .hero-actions,
.hero.is-revealed .hero-keywords {
  animation-play-state: running;
}

@keyframes hero-ui-in {
  0%   { opacity: 0; transform: translateY(10px) scale(1); }
  50%  { opacity: 1; transform: translateY(0) scale(1.028); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* A két gomb a hero tetején, a fejléc/hamburger alatt, a logó fölött.
   A padding-inline szándékosan kicsi: a gombok ugyanúgy a képernyő széléhez
   simulnak, mint az alattuk szétszórt kulcsszavak (clamp 10-72px) – így a
   bal és a jobb oldal egy-egy összetartozó blokként olvasódik, nem pedig
   egy beljebb húzott gomb + egy tőle független szó-oszlopként. */
.hero-actions {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--actions-top);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-inline: clamp(14px, 3vw, 56px);
}

/* A gomb önmagában áll az oszlopban – a hozzá tartozó kulcsszavak
   (lásd lejjebb, .hero-keywords) a hero teljes bal/jobb felén szétszórva
   jelennek meg, nem a gomb alatt egy szűk oszlopban. */
.hero-action-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* A hero „Közösségi ház” gombja ugyanazt a mély türkizt kapja, mint a menü
   Kapcsolat CTA-ja és a Fejlesztőház hero pillje – a szürke .btn-primary
   helyett. Csak a főoldali hero gombjára hat. */
.hero-actions .btn-primary {
  background: color-mix(in srgb, var(--teal) 72%, var(--ink));
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--teal) 40%, transparent);
}
.hero-actions .btn-primary:hover {
  background: color-mix(in srgb, var(--teal) 90%, var(--ink));
  border-color: transparent;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--teal) 52%, transparent);
}

/* A „Fejlesztőház” gomb a türkiz párja: ugyanaz a korall (#ff7355), ami a
   Fejlesztőház hero CTA-ján és a lap „Érzelmek és viselkedés” kártyáján fut. */
.hero-actions .btn-secondary {
  background: #ff7355;
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255, 115, 85, 0.35);
}
.hero-actions .btn-secondary:hover {
  background: color-mix(in srgb, #ff7355 86%, var(--white));
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(255, 115, 85, 0.45);
}

/* Kulcsszó-sáv a hero bal/jobb felén, a gombtól a kontakt-sávig – a benne
   lévő szavak (lásd lejjebb) szabadon, egymástól távol helyezkednek el
   ezen a teljes felületen, nem egy tömör oszlopban a gomb alatt. */
.hero-keywords {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
  z-index: 3;
  list-style: none;
  pointer-events: none;
  animation: hero-ui-in 0.8s var(--ease) 1.41s both;
  animation-play-state: paused;
}
.hero-keywords--left { left: 0; }
.hero-keywords--right { right: 0; }

/* A pontos top/left értékek lentebb, a pozicionáló blokkban. */
.hero-keywords li {
  position: absolute;
  left: var(--kw-inset);
}
.hero-keywords--right li {
  left: auto;
  right: var(--kw-inset);
}

/* A konténer pointer-events:none, hogy a szavak közti rés ne fogja el a
   háttérben lévő logó-animáció kattintásait – maguk a linkek viszont
   kattinthatók. */
/* Alaphelyzetben CSAK a szöveg látszik: nincs pill-háttér és nincs árnyék,
   a szavak szabadon "lebegnek" a logó körül. A pill-alak (háttér + árnyék)
   kizárólag rámutatásra jelenik meg. A padding és a border-radius ezért
   alapállapotban is megmarad: egyrészt a kattintható felület ne ugráljon,
   másrészt a hover-alak pontosan a szöveg köré nőjön ki, elmozdulás nélkül. */
.hero-keywords li a {
  display: block;
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--green-dark);
  white-space: nowrap;
  pointer-events: auto;
  transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* :focus-visible is – billentyűzettel navigálva ugyanaz az alak jelenjen meg,
   különben a tabbal érkező látogató semmilyen visszajelzést nem kapna. */
.hero-keywords li a:hover,
.hero-keywords li a:focus-visible {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Közösségi ház (jobb) oldal: itt a pill-háttér ALAPÁLLAPOTBAN is látszik –
   pontosan az az alak, ami a bal oldalon csak rámutatásra jelenik meg (azonos
   padding, azonos --radius-pill, azonos fehér). Mivel a padding és a
   border-radius eleve minden kulcsszón rajta van, ez nem mozdítja el a
   szavakat, csak "bekapcsolja" a hátteret.
   Rámutatásra a háttér tömör fehérre vált – ez adja a visszajelzést a
   megemelés és az árnyék helyett (a "transform: none" a bal oldal 2px-es
   felugrását kapcsolja ki ezen az oldalon). */
.hero-keywords--right li a {
  background: rgba(255, 255, 255, 0.85);
}
.hero-keywords--right li a:hover,
.hero-keywords--right li a:focus-visible {
  background: #fff;
  transform: none;
  box-shadow: none;
}

/* Egyenletes oszlop mindkét oldalon: azonos vízszintes horgonypont
   (--kw-inset) és azonos függőleges lépésköz (--kw-step) minden szóra. Mivel a
   pillek egysorosak, tehát azonos magasságúak, az egyenlő lépésköz egyenlő
   közöket is jelent – a rés minden szomszédos szó között ugyanakkora.

   A vízszintes horgonyzás a KÉPERNYŐ széléhez igazodik (clamp + vw), nem a
   szülő 46%-os konténer százalékához. Egy "left: 8%" ugyanis a konténer 8%-a,
   azaz csak 3,7vw – felbontásonként máshova esik, és nehéz ránézésre
   megmondani, milyen messze lesz a széltől. Így viszont a rés minden
   képernyőn kiszámítható.

   A bal oldaliak "left"-tel, a jobb oldaliak "right"-tal vannak horgonyozva
   (nem tükrözött "left" értékkel) – a szöveg mindig BEFELÉ nő a horgonyponttól,
   így a hosszabb feliratok sem lóghatnak túl az oldal szélén.

   A kiindulópont max(28%, --kw-safe): magas ablakon a százalék nyer (a szavak
   a hero arányaihoz igazodnak), alacsony ablakon a gombsávból számolt korlát
   véd, hogy az első szó ne csússzon a gomb alá. A lépésköz utána mindkét
   esetben ugyanaz, tehát a közök nem torzulnak el. */
.hero-keywords li:nth-child(1) { top: max(28%, var(--kw-safe)); }
.hero-keywords li:nth-child(2) { top: calc(max(28%, var(--kw-safe)) + var(--kw-step)); }
.hero-keywords li:nth-child(3) { top: calc(max(28%, var(--kw-safe)) + var(--kw-step) * 2); }
.hero-keywords li:nth-child(4) { top: calc(max(28%, var(--kw-safe)) + var(--kw-step) * 3); }
.hero-keywords li:nth-child(5) { top: calc(max(28%, var(--kw-safe)) + var(--kw-step) * 4); }

/* Alsó kontakt-sáv: Beraxa Beáta (bal) – közös e-mail (közép) – Rapai Zsolt
   (jobb). Egy közös flex sor pozicionál, hogy a középső e-mail pontosan a
   két "névjegy" közé, azok magasságában üljön. */
.hero-contacts {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 4vh, 32px);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* A széli behúzás a két névjegyen ül, NEM a soron: így a sáv padding-doboza
     pontosan a heró teljes szélessége, és a benne abszolút pozicionált e-mail
     --logo-cx-e ugyanazt a tengelyt jelenti, mint a logóé/mottóé. */
  animation: hero-ui-in 0.8s var(--ease) 1.41s both;
  animation-play-state: paused;
}
.hero.is-revealed .hero-contacts { animation-play-state: running; }

.hero-founder-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-founder-wrap--left  { align-items: flex-start; padding-left: clamp(16px, 4vw, 32px); }
.hero-founder-wrap--right { align-items: flex-end;   padding-right: clamp(16px, 4vw, 32px); }

.hero-founder-phone {
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--green-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.hero-founder-phone:hover { color: var(--green); transform: translateY(-2px); }

.hero-contact-email {
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), transform .2s var(--ease);
  color: var(--green-dark);
  /* Kikerül a flex-sorból, hogy a vízszintes helyét ne a két névjegy szélessége
     szabja meg: a logó/mottó tengelyére (--logo-cx) kerül. A translateX(-50%)
     itt biztonságos – a hero-ui-in a SZÜLŐ-n (.hero-contacts) fut, nem ezen az
     elemen, így nincs ütköző transform-animáció (v.ö. .hero-tagline). */
  position: absolute;
  left: var(--logo-cx);
  bottom: 0;                                       /* = a korábbi align-self: flex-end */
  transform: translateX(-50%);
}
.hero-contact-email:hover { color: var(--green); transform: translateX(-50%) translateY(-2px); }

@media (max-width: 460px) {
  .hero-contact-email { font-size: 0.62rem; }
}

.hero-founder {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform .25s var(--ease);
}
.hero-founder:hover { transform: translateY(-2px); }

.hero-founder-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.hero-founder-name {
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.hero-founder-name--right { text-align: right; }
.hero-founder-name small {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  color: var(--muted);
}


/* Vizuálisan rejtett, de képernyőolvasónak látható cím */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   ÁLTALÁNOS SZEKCIÓ-ELEMEK
   ============================================================ */
.section {
  padding: clamp(56px, 6vw, 88px) 0;
  scroll-margin-top: var(--header-h);
  position: relative;
}
.section-alt { background: var(--bg-alt); }

/* ---------- Lágy színsáv (.section-band) ----------
   A .section-alt tömör tónusának és hullám-élének halk testvére: a szekció
   háttere fent és lent hosszan, élesedő szél nélkül úszik át a szomszédos
   fehér szekcióba. A szín az impresszum-kártyáé (--bg-alt 40%-on, lásd
   .kp-redesign .kp-info-card).

   Bármelyik szekción használható: <section class="section section-band">.
   Hangolható változók:
     --band-rgb    a sáv színe RGB-komponensekben (alfát a --band-alpha adja)
     --band-alpha  a sáv legtelítettebb pontja
     --band-fade   az átúszás hossza fent és lent

   A ki-/befutó nem lineáris: a köztes stopok (0.12 / 0.42) egy lassan induló,
   majd gyorsuló rámpát rajzolnak, így a szem nem találja meg a sáv kezdetét,
   és a hosszú, halvány szakaszon sem jelenik meg sávosodás (banding). */
.section-band {
  --band-rgb: 197, 171, 158;
  --band-alpha: 0.4;
  --band-fade: clamp(90px, 12vh, 170px);
  padding-top: clamp(72px, 8vw, 116px);
  padding-bottom: clamp(72px, 8vw, 116px);
  background-image: linear-gradient(to bottom,
    rgba(var(--band-rgb), 0) 0,
    rgba(var(--band-rgb), calc(var(--band-alpha) * 0.12)) calc(var(--band-fade) * 0.4),
    rgba(var(--band-rgb), calc(var(--band-alpha) * 0.42)) calc(var(--band-fade) * 0.72),
    rgba(var(--band-rgb), var(--band-alpha)) var(--band-fade),
    rgba(var(--band-rgb), var(--band-alpha)) calc(100% - var(--band-fade)),
    rgba(var(--band-rgb), calc(var(--band-alpha) * 0.42)) calc(100% - var(--band-fade) * 0.72),
    rgba(var(--band-rgb), calc(var(--band-alpha) * 0.12)) calc(100% - var(--band-fade) * 0.4),
    rgba(var(--band-rgb), 0) 100%);
  background-repeat: no-repeat;
}
/* A sáv a .section-alt hullámát sem hozza magával, ha valaki a kettőt
   együtt tenné egy szekcióra – a lágy átmenet lényege épp az élek hiánya. */
.section-band::before { content: none; }

/* ---------- Dekoratív "shapes" háttér ----------
   Ugyanaz a halvány geometrikus mintázat, amit a Fejlesztőház
   (#nehezsegek / #fejlesztes, lásd css/fejlesztohaz.css) és az 1% oldal
   használ – így a főoldal fehér szekciói sem maradnak üres felületek.
   A kép 1920×1447; "contain" → szekciónként pontosan egyszer jelenik meg,
   felülre igazítva, a maradék terület sima fehér. */
.section-shapes {
  background: var(--bg) url("../assets/images/shapes-bg.png") center top / contain no-repeat;
}

.eyebrow {
  display: inline-block;
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.eyebrow-light { color: var(--teal-light); }

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 18px;
}

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.section-actions { text-align: center; margin-top: 44px; }
.cta-panel-actions { text-align: center; margin-top: 24px; }

p + p { margin-top: 14px; }
.signature {
  margin-top: 18px;
  font-style: italic;
  font-weight: 600;
  color: var(--green-dark);
}

/* Középre zárt idézet egy szekció lezárásaként (pl. a Jókai-mottó a
   Családiasan szekció alján). A .story-quote-tól abban tér el, hogy nem
   a szövegfolyamba ékelődik, hanem önálló, saját szerzős zárlat. */
.section-quote {
  max-width: 620px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  text-align: center;
  font-style: italic;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.7;
  color: var(--green-dark);
}
.section-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-weight: 700;
  font-family: "Baloo Bhai 2", sans-serif;
}

/* ---------- Split (kép + szöveg) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tamogatas-illustration {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.split-text p { color: var(--muted); }
.split-text .btn { margin-top: 24px; }
#csaladiasan .section-title { white-space: nowrap; }

/* Egységes "szám-jelvény" komponens (1%, 01–06 fejlesztési kártyák, program-számok, esemény-dátum) */
.num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent, var(--coral)), color-mix(in srgb, var(--accent, var(--coral)) 65%, white));
  color: var(--white);
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 800;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent, var(--coral)) 40%, transparent);
}
.num-badge--lg {
  min-width: 96px;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
}
.num-badge--sm {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.3rem;
}

/* ---------- Fejlesztőház hero (a "Milyen nehézségek..." szekció) ---------- */
#nehezsegek {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(36px, 4vw, 56px) 0;
  /* Háttér: ugyanaz a forma-mintás fehér, mint a "Fejlesztési területeink"
     szekcióé – lásd css/fejlesztohaz.css */
  overflow: hidden;
}
#nehezsegek .container { position: relative; z-index: 2; width: 100%; }

.cta-panel {
  background: transparent;
}
.cta-panel-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.cta-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green-dark) 16%, #fff);
  color: var(--green-dark);
  margin-bottom: 16px;
}
.cta-panel-icon svg { width: 28px; height: 28px; }

.check-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 24px;
  max-width: 880px;
  margin: 0 auto;
}
.check-grid li {
  position: relative;
  padding-left: 30px;
  line-height: 1.4;
}
.check-grid li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(95, 128, 80, 0.14);
  color: var(--green-dark);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ---------- Közösségi ház: szeglet-kártyák ---------- */
/* A hero "Szegleteink" gombja ezt a szekciót viszi a képernyő tetejére.
   Enélkül a lap nem tudna elég mélyre gördülni: a szekció (~660px) és a
   lábléc együtt sem ad annyi görgethető magasságot, hogy a hero kicsússzon a
   képből – ezért a gomb korábban a lap aljának ütközött, és mindig maradt egy
   csík a fotóból. Képernyőnyi minimummal a szekció egyedül tölti ki a
   nézetet, a tartalom pedig középen ül benne. Mobilon a kártyák amúgy is
   egymás alá kerülnek, ott a min-height nem lép életbe. */
#szegletek {
  min-height: 100vh;
  min-height: 100dvh;
}

.szeglet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.szeglet-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--accent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.szeglet-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.szeglet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, #fff);
  color: var(--accent);
  margin-bottom: 16px;
}
.szeglet-icon svg { width: 30px; height: 30px; }
/* A cím a szeglet saját színét kapja (ugyanaz a --accent, mint a felső
   csík és az ikon), így a három kártya színkódolása végigmegy. */
.szeglet-card h3 { font-size: 1.18rem; margin-bottom: 12px; color: var(--accent); }
.szeglet-card ul { list-style: none; }
.szeglet-card li {
  position: relative;
  padding-left: 20px;
  font-size: .94rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.szeglet-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.szeglet-card li a { color: inherit; text-decoration: none; }
.szeglet-card li a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Vélemények ----------
   A hátteret a .section-shapes hozza (fehér + geometrikus mintázat). A
   korábbi homok (#c5ab9e) blokkhoz tartozó lágy él-maszk itt már nem kell:
   fehér a fehérben nem látszana, viszont a maszk saját kompozit-réteget
   hoz létre, ami a szekció szélén levágná a tartalmat – ezért nem elég
   átlátszóra állítani, teljesen elhagytuk. */
.testimonials { max-width: 820px; margin: 0 auto; text-align: center; }
/* Minden vélemény ugyanabba a rácscellába kerül egymásra, így a track
   magassága mindig a LEGHOSSZABB véleményhez igazodik, és váltáskor nem változik. */
.testimonial-track { display: grid; }
.testimonial {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease);
}
.testimonial.is-active { opacity: 1; visibility: visible; }
.testimonial blockquote {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(44, 40, 37, 0.3), 0 3px 7px rgba(44, 40, 37, 0.42);
}
.testimonial figcaption { margin-top: 22px; }
.testimonial figcaption strong { display: block; color: var(--teal); font-size: 1.05rem; }
.testimonial figcaption span { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 2px; }

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}
.t-prev, .t-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: transparent;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.t-prev:hover, .t-next:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--ink); }
.testimonial-dots { display: flex; gap: 10px; }
.testimonial-dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.testimonial-dots button.is-active { background: var(--coral); transform: scale(1.25); }

/* ---------- Segíthetünk? (kapcsolat CTA) ---------- */
.section-help {
  position: relative;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--teal) 100%);
  color: var(--white);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.help-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.help-cta .section-title { color: var(--white); }
.help-cta p { opacity: 0.9; margin-bottom: 26px; max-width: 420px; }
.help-contacts { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--white);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.contact-card:hover { background: rgba(255,255,255,0.2); transform: translateX(4px); }
.contact-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--coral);
}
.contact-icon svg { width: 24px; height: 24px; }
.contact-body { display: flex; flex-direction: column; line-height: 1.4; }
.contact-body strong { font-family: "Baloo Bhai 2", sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.contact-body small { opacity: 0.75; }

/* ============================================================
   FOOTER
   Sötét (#333333) lábléc, fölötte hosszú, lágy átmenet fehérből.
   A rámpát alapesetben az utolsó tartalmi szekció viszi (.footer-fade),
   így a fade nem foglal külön helyet; a lábléc csak folytatja azt.
   ============================================================ */
.site-footer {
  background: linear-gradient(to bottom,
    color-mix(in srgb, #333333 78%, var(--bg)) 0%,
    color-mix(in srgb, #333333 90%, var(--bg)) 35%,
    color-mix(in srgb, #333333 97%, var(--bg)) 70%,
    #333333 100%);
  color: var(--sand);
}

/* A főoldal alján álló „Kapcsolat” gomb ugyanazt a mély türkizkéket viszi,
   mint a menü Kapcsolat CTA-ja és a hero „Közösségi ház” pillje. */
#kapcsolat-cta .btn-primary {
  background: color-mix(in srgb, var(--teal) 72%, var(--ink));
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--teal) 40%, transparent);
}
#kapcsolat-cta .btn-primary:hover {
  background: color-mix(in srgb, var(--teal) 90%, var(--ink));
  border-color: transparent;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--teal) 52%, transparent);
}

/* Az utolsó tartalmi szekcióra kerül: fehérből indul és a lábléc
   kezdőszínéig (78%) sötétedik — a saját magasságán belül. */
.footer-fade {
  background: linear-gradient(to bottom,
    var(--bg) 0%,
    color-mix(in srgb, #333333 6%, var(--bg)) 20%,
    color-mix(in srgb, #333333 22%, var(--bg)) 43%,
    color-mix(in srgb, #333333 43%, var(--bg)) 64%,
    color-mix(in srgb, #333333 64%, var(--bg)) 86%,
    color-mix(in srgb, #333333 78%, var(--bg)) 100%);
}

/* Ahol az utolsó szekciónak saját háttere van (fh-idopont, al-promos,
   esz-panels, section-help), ott a lábléc hozza a rámpát a saját felső
   paddingjában — különben a fade felülírná a szekció dizájnját. */
/* A lépcsők S-görbét rajzolnak (lassú indulás → gyors közép → lassú kifutás).
   Ez nem finomkodás: ahol a sötétedés üteme ugrik, ott a szem vízszintes
   vonalat lát (Mach-sáv) – ez adta a rámpa látható felső élét (a fölötte lévő
   szekció háttere teljesen egyenletes) és a padding végén a törést, ahol a
   meredek szakasz hirtelen ellaposodott. Az ütem így végig folyamatos.
   Ugyanaz a görbe, mint a homokszínű változatban (css/fejlesztohaz.css),
   csak fehér alapszínnel és 96px-re skálázva – a magasság változatlan,
   így a tartalom pozíciója sem mozdul. */
.site-footer--fade-in {
  /* 1px átfedés: tört pixeles elrendezésnél (nem egész arányú zoom, HiDPI) a
     szekció és a lábléc közé beszorulhat egy alpixelnyi rés, amin átvillan a
     body-háttér – vékony világos vonalként. A rámpa kezdőszíne azonos a
     fölötte lévő szekcióéval, így az átfedés maga nem látszik. */
  margin-top: -1px;
  padding-top: 96px;
  background: linear-gradient(to bottom,
    var(--bg) 0px,
    color-mix(in srgb, #333333 4%,  var(--bg)) 12px,
    color-mix(in srgb, #333333 15%, var(--bg)) 26px,
    color-mix(in srgb, #333333 32%, var(--bg)) 42px,
    color-mix(in srgb, #333333 52%, var(--bg)) 59px,
    color-mix(in srgb, #333333 68%, var(--bg)) 75px,
    color-mix(in srgb, #333333 82%, var(--bg)) 96px,
    color-mix(in srgb, #333333 90%, var(--bg)) 132px,
    color-mix(in srgb, #333333 96%, var(--bg)) 184px,
    #333333 100%);
}

/* A rámpa fölött az utolsó szekció teljes alsó paddingja is üresen állna,
   így a tartalom és a lábléc közé kétszeres hézag kerülne. A saját dizájnnal
   bíró záró szekciók (.fh-idopont, .esz-panels, .tk-step) érintetlenek. */
main:has(+ .site-footer--fade-in) > .section:last-child,
main:has(+ .site-footer--fade-in) > .ro-section:last-child,
main:has(+ .site-footer--fade-in) > .al-section:last-child {
  padding-bottom: clamp(20px, 2.4vw, 34px);
}

.footer-contacts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(20px, 3vw, 32px) 24px clamp(32px, 4vw, 48px);
  text-align: center;
}
.footer-contacts h4 { color: var(--sand); font-size: 0.95rem; margin-bottom: 8px; }
.footer-contacts p,
.footer-contacts a { color: var(--sand); font-size: 0.85rem; }
.footer-contacts a { transition: color .2s var(--ease); }
.footer-contacts a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.footer-bottom .container { padding-block: 18px; }
.footer-bottom p { font-size: 0.85rem; color: var(--sand); opacity: 0.75; text-align: center; }
@media (max-width: 760px) {
  .footer-contacts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .footer-contacts { grid-template-columns: 1fr; }
}

/* ---------- Beúszó animáció (reveal) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   ALOLDALAK – közös elemek
   ============================================================ */

/* Aloldali hero (nincs animáció, egyszerű gradiens + szöveg) */
.page-hero {
  position: relative;
  padding: clamp(100px, 14vw, 160px) 0 clamp(56px, 8vw, 96px);
  background: radial-gradient(circle at 30% 60%, #f3f7ef 0%, #dceace 55%, #c3d8b2 100%);
  text-align: center;
}
.page-hero > .container { position: relative; z-index: 2; }
/* Alján lágy átmenet a következő szekció háttérszínébe (mint a főoldali hero) */
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent 20%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}
.page-hero .eyebrow { margin-bottom: 12px; }
.page-hero-title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1.1;
}
/* A Közösségi ház hero-címe vastagabb: a fotós háttér előtt az alap 500-as
   súly elmosódik, a 700 viszont tisztán kiválik. */
#page-kozossegi-haz .page-hero-title { font-weight: 700; }
.page-hero-lead {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 36px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--muted);
  line-height: 1.7;
}

/* ---------- Fotós hero (gradiens helyett háttérkép) ----------
   A képet maga az oldal adja meg inline background-image-ként:
   <section class="page-hero page-hero--photo" style="background-image: url('...')">
   A ::before egy világos fátyol, hogy a sötét cím és az idézet olvasható
   maradjon; jobbra elhalványul, így a fotó tárgya szabadon látszik. */
.page-hero--photo {
  padding: clamp(120px, 16vw, 190px) 0 clamp(72px, 10vw, 118px);
  background-color: #ece9e3;
  background-position: 62% 32%;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.72) 28%,
    rgba(255, 255, 255, 0.74) 58%,
    rgba(255, 255, 255, 0.58) 78%,
    rgba(255, 255, 255, 0.42) 100%);
  pointer-events: none;
  z-index: 1;
}
.page-hero--photo .page-hero-title,
.page-hero--photo .page-hero-lead { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65); }

/* ---------- Balra igazított hero-tartalom ----------
   Ott hasznos, ahol a háttérfotó tárgya a jobb oldalon van (közösségi ház:
   a kulcs a jobb szélen ül) – a szöveg a fotó világos, üres bal felére kerül,
   a kép fő motívuma pedig szabadon marad. A .page-hero középre záró
   szabályait írja felül, ezért mindenhol eggyel nagyobb a súlya. */
.page-hero--left { text-align: left; }
.page-hero--left .page-hero-title,
.page-hero--left .page-hero-lead { margin-inline: 0; }
.page-hero--left .page-hero-actions { justify-content: flex-start; }

/* A fátyol iránya megfordul: balra erős (a szöveg mögött), jobbra elfogy,
   hogy a fotó tárgya tisztán látszódjon. */
.page-hero--left.page-hero--photo::before {
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.74) 0%,
    rgba(255, 255, 255, 0.70) 38%,
    rgba(255, 255, 255, 0.45) 66%,
    rgba(255, 255, 255, 0.20) 100%);
}

/* Keskeny kijelzőn a "cover" úgyis levágja a fotó jobb szélét, így nincs mit
   szabadon hagyni – ott egyenletes fátyol adja az olvashatóságot. */
@media (max-width: 720px) {
  .page-hero--left.page-hero--photo::before {
    background: linear-gradient(to right,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.72) 100%);
  }
}

/* ---------- Kapcsolat-sáv (Cím / Telefon / E-mail / Facebook) ----------
   Egységes komponens — korábban 8+ helyen (fh-contacts, sz-strip, ro-strip,
   al-contact-card, kt-contacts, kt-bottom-bar, tb-contacts-panel stb.)
   külön-külön újraírt blokk. Módosítók: --card (fehér panel), --dark (ink
   sáv, homok szöveg — lábléc előtti sáv), --inline (dísz nélküli sor). */
.contact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.contact-strip__item { display: flex; align-items: center; gap: 14px; }
.contact-strip__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.contact-strip__icon svg { width: 22px; height: 22px; }
.contact-strip__body h4 {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.contact-strip__body p { font-size: 0.98rem; line-height: 1.4; }
.contact-strip__body a:hover { text-decoration: underline; }

.contact-strip__item--cim .contact-strip__icon      { background: color-mix(in srgb, var(--olive) 16%, #fff); color: var(--olive); border: 2px solid var(--olive); }
.contact-strip__item--tel .contact-strip__icon      { background: color-mix(in srgb, var(--green) 16%, #fff); color: var(--green-dark); }
.contact-strip__item--email .contact-strip__icon    { background: color-mix(in srgb, var(--teal) 16%, #fff); color: var(--teal); }
.contact-strip__item--facebook .contact-strip__icon { background: color-mix(in srgb, #005a8a 16%, #fff); color: #005a8a; }

.contact-strip--card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 3vw, 36px);
}
.contact-strip--card .contact-strip__body h4 { color: var(--muted); }
.contact-strip--card .contact-strip__body p { color: var(--ink); font-weight: 600; }

.contact-strip--dark {
  background: var(--ink);
  border-radius: var(--radius);
  padding: clamp(28px, 3.5vw, 40px);
}
.contact-strip--dark .contact-strip__icon { background: rgba(255,255,255,0.1); color: var(--sand); }
.contact-strip--dark .contact-strip__body h4 { color: var(--sand); opacity: 0.85; }
.contact-strip--dark .contact-strip__body p,
.contact-strip--dark .contact-strip__body p a { color: rgba(255,255,255,0.85); }

.contact-strip--inline .contact-strip__icon { background: color-mix(in srgb, var(--sand) 22%, #fff); color: var(--sand-dark); }

/* --stack módosító: függőleges lista (pl. szűkebb, szöveg melletti oszlopban) */
.contact-strip--stack { grid-template-columns: 1fr; gap: 22px; }

@media (max-width: 960px) {
  .contact-strip { grid-template-columns: repeat(2, 1fr); }
  .contact-strip--stack { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .contact-strip { grid-template-columns: 1fr; }
}

/* Section lead (alcím a section-head alatt) */
.section-lead {
  max-width: 640px;
  margin-inline: auto;
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .split,
  .help-inner { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .container { padding-inline: 18px; }

  /* Telefonon a heró saját, álló logója viszi a márkát (lásd .hero::before),
     ezért a sarokban lévő kicsi ugyanúgy rejtve marad a heró fölött, mint
     asztali nézetben – két logó egyszerre ismétlés lenne. Görgetéskor a JS
     leveszi a body.at-hero osztályt, és a sarok-logó beúszik. */

  /* Telefonon a hero-ból csak a logó, a mottó és a két fő gomb (Fejlesztőház /
     Közösségi ház) látszik – a logó-ANIMÁCIÓ, a szétszórt kulcsszavak és a
     kontakt-sáv (telefonszámok, névjegyek, e-mail) mind rejtve maradnak, hogy
     szűk képernyőn ne legyen zsúfolt a kép. A hero magassága ennek megfelelően
     a tartalomhoz igazodik, nem tölti ki a teljes képernyőt. */
  .hero-stage,
  .hero-photo,
  .hero-keywords,
  .hero-contacts,
  .hero::after {
    display: none;
  }

  /* A betöltő fedőréteg az animáció villanását takarja. Telefonon nincs
     animáció, viszont a réteg (inset:0, z-index:10) RÁTAKART a mottóra és a
     gombokra – emiatt volt a mobil kezdőlap heró-ja egy üres színes doboz. */
  .hero-load-cover { display: none; }

  /* A heró UI-t asztali nézetben a JS indítja el (.hero.is-revealed), amikor a
     logó-animáció ténylegesen feltűnik – addig az animation-fill-mode:both
     0%-os kulcskockája tartja opacity:0-n. Telefonon az animáció rejtett,
     tehát ez a jel SOHA nem érkezik meg: a mottó és a gombok véglegesen
     láthatatlanok maradtak. Itt nincs mire várni, ezért nincs animáció sem. */
  .hero-tagline,
  .hero-actions,
  .hero-contacts {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero {
    height: auto;
    padding: clamp(72px, 14vh, 104px) 0 clamp(40px, 7vh, 56px);
    overflow: visible;
    text-align: center;
    /* A heró alja lágyan fut bele a következő fehér szekcióba – enélkül a homok
       gradiens éles vízszintes vonallal ér véget. A rámpa a HÁTTÉR rétege (nem
       egy ::after doboz), így soha nem takarhat rá a mottóra és a gombokra:
       a háttér definíció szerint a tartalom alatt van. A radiális gradiens
       változatlan, csak kap egy réteget maga fölé. */
    background:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0) calc(100% - clamp(88px, 14vh, 132px)),
        var(--bg) 100%),
      radial-gradient(circle at 50% 44%, #f2efee 0%, #e0d6d1 50%, #ccbfb8 100%);
  }

  /* Álló logó a heró élén: az animáció helyett ez az egyetlen márkajel.
     Pszeudo-elem, hogy az index.html-t ne kelljen egy csak-mobil <img>-gel
     bővíteni. A drop-shadow ugyanaz a türkiz derengés, mint a .brand-logón. */
  .hero::before {
    content: "";
    display: block;
    width: min(148px, 38vw);
    aspect-ratio: 1;
    margin: 0 auto clamp(16px, 3vh, 26px);
    background: url("../assets/images/logo.png") center / contain no-repeat;
    filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--teal) 45%, transparent));
  }

  /* A heró alsó rámpájának mobil változatát lásd a SZEKCIÓ HULLÁM-ÁTMENETEK
     blokkban: az alap .hero::after szabály ebben a fájlban KÉSŐBB áll, így egy
     itteni felülírást azonos specificitással felülütne. */

  /* A mobil hero::after rövid és fehérig fut, ezért a Családiasan szekció
     hosszú, asztali méretre hangolt folytatása fölösleges lenne. */
  #csaladiasan::after { display: none; }
  /* Az asztali "egy sorban a cím" szabály telefonon a képernyő szélének
     feszíti a címsort – itt törhet. */
  #csaladiasan .section-title { white-space: normal; }

  /* A mottó a folyamba kerül (a rejtett logó helyett ez nyitja a heró-t),
     abszolút pozícióban a magasodó mobil heró-ban a gombokra csúszna. */
  .hero-tagline {
    position: static;
    width: auto;                 /* a --tagline-w (44vw) itt kifacsarná a szöveget */
    margin: 0 auto clamp(20px, 4vh, 32px);
    padding-inline: 18px;
    font-size: 1.02rem;
  }
  .hero-actions {
    position: static;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: 18px;
    gap: 12px;
  }
  .hero-actions .btn { width: min(320px, 78vw); }
  .hero-action-col { max-width: min(320px, 78vw); gap: 10px; }

  /* Aloldali heró-gombok: egymás alatt, azonos szélességben. Külön-külön
     méretezve rendetlen, lépcsős szélű oszlopot adtak. */
  .page-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-hero-actions .btn { width: 100%; }

  /* Fotós heró: keskeny kijelzőn a "cover" a kép sűrű részét hozza a szöveg
     mögé, ezért erősebb fátyol kell az olvashatósághoz. */
  .page-hero--photo::before,
  .page-hero--left.page-hero--photo::before {
    background: linear-gradient(to right,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.82) 100%);
  }

  /* A vélemények szövegárnyéka még a szekció RÉGI, homokszínű (#c5ab9e)
     hátteréhez készült – a mai fehér alapon két sötét árnyék ül a betűk körül,
     ami telefonon, 16px-es törzsméretnél elmosottnak láttatja a szöveget.
     (Ugyanez asztali nézetben is felesleges, de ott a nagyobb betűméret miatt
     kevésbé zavaró – azt szándékosan nem nyúlom meg ebben a körben.) */
  .testimonial blockquote { text-shadow: none; }

  /* A vélemény-pöttyök koppintható felülete. A pötty LÁTHATÓ mérete marad
     11px (a dizájn nem változik), a találati felületet egy átlátszó
     pszeudo-elem tágítja ujjnyira – paddinggel maga a korong nőne meg. */
  .testimonial-dots { gap: 16px; }
  .testimonial-dots button { position: relative; }
  .testimonial-dots button::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
}

/* Akadálymentesség: csökkentett mozgás */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   SZEKCIÓ HULLÁM-ÁTMENETEK
   ============================================================ */

/* Hero alján + a Családiasan szekció tetején EGYETLEN folytonos, hosszú
   átmenet (összesen 600px: 340px a heróban, 260px a szekcióban). A két
   gradiens pontosan ugyanazzal az árnyalattal ér véget / kezdődik a
   szekcióhatárnál (42% kékkeverék), így nincs törésvonal – a hullám-motívum
   (ami éles, homogén fehér alakzat lenne a határon) ezért itt ki van kapcsolva. */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 340px;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg) 3%, transparent) 26%,
    color-mix(in srgb, var(--bg) 14%, transparent) 62%,
    color-mix(in srgb, var(--bg) 42%, transparent) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Telefonon ez a rámpa ki van kapcsolva (lásd a mobil blokkot fentebb): a
   340px-es, csak 42%-ig fehéredő asztali átmenet a tartalmához igazodó (~540px)
   mobil heróban eltakarná a mottót és a gombokat – z-index:2, a statikus
   tartalom fölött. A heró alsó lágyítását ott a .hero SAJÁT hátterébe rétegzett
   linear-gradient adja, ami definíció szerint minden tartalom alatt marad. */

/* section-alt szekciók tetején hullám (előző --bg szekció → --bg-alt) */
.section-alt::before {
  content: '';
  position: absolute;
  top: -48px; left: 0; right: 0; height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C360,0 1080,48 1440,24 L1440,48 L0,48 Z' fill='%23c5ab9e'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
/* A hero-átmenet folytatása: a tónus nem áll meg élesen a szekcióhatárnál,
   hanem – pontosan onnan folytatva, ahol a hero::after abbahagyta – tovább
   halványul, ténylegesen belenyúlva az első szekcióba. A kezdő szín (#ece6e3)
   a korábbi, ténylegesen lemért kék pixelszín (#e2eef3) meleg megfelelője,
   ugyanazzal a hue/telítettség-váltással számolva, mint a heró gradiens.
   Ez SZÁMÍTOTT érték: ha a heró alján mégis látszik törésvonal, mérd le
   újra a renderelt pixelszínt és írd ide. */
#csaladiasan::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background: linear-gradient(to bottom,
    #ece6e3 0%,
    color-mix(in srgb, #ece6e3 55%, transparent) 40%,
    color-mix(in srgb, #ece6e3 22%, transparent) 72%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}
#csaladiasan > .container { position: relative; z-index: 1; }

/* Megjegyzés: a Családiasan szekció korábban .section-alt volt, és a homok
   hullám-alakzatot egy #csaladiasan::before{content:none} kapcsolta ki. A
   szekció ma .section-shapes (fehér + mintázat), így nincs mit kikapcsolni –
   az átmenetet önmagában a fenti ::after gradiens adja. */

/* Fejlesztőház CTA tetején hullám (előző --bg-alt szekció → --bg) */
#fejlesztohaz-cta::before {
  content: '';
  position: absolute;
  top: -48px; left: 0; right: 0; height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C360,48 1080,0 1440,24 L1440,48 L0,48 Z' fill='%23fbfaf6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Dekoratív "blob" foltok ----------
   Játékos, márkaszínű elmosott foltok szekció-fejlécek/kártyarácsok mögé,
   új kép-asszet nélkül. Helyzetét (top/left/width/height) az adott oldal
   szekciója adja meg inline style-ban vagy saját szabályban; itt csak az
   alap-recept + néhány szín-módosító van. */
.blob-accent {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.5;
  pointer-events: none;
}
.blob-accent--coral { background: var(--coral); }
.blob-accent--teal   { background: var(--teal-light); }
.blob-accent--sand   { background: var(--sand); }
.blob-accent--green  { background: var(--green); }

/* ============================================================
   KÖZÖSSÉGI HÁZ ALOLDAL
   ============================================================ */

/* Hero: mottó + gombok */
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ============================================================
   AKTUALITÁSOK ALOLDAL – eseménykártyák (poszterek elöl, részletek lenyílóban,
   ugyanaz a minta, mint a táborok oldal kártyái)
   ============================================================ */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 28px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

/* Az egész kártya (poszter + lenyíló) EGY közös, kerekített/árnyékolt egység */
.event-card {
  scroll-margin-top: var(--header-h);
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.event-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

/* Csak plakátot tartalmazó kártya (nincs lenyíló): a fekvő poszter
   saját sorban, de a sornál keskenyebben, középre igazítva */
.event-card--poster {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 860px;
  justify-self: center;
}

.event-media {
  position: relative;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}
.event-media img { width: 100%; height: auto; display: block; }
.event-date {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 10px 14px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--white);
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-sm);
}
.event-date strong { font-size: 1.9rem; font-weight: 800; }

/* Cím + dátum sáv + nyíl: mindig látható, erre kattintva nyílik le a részletes panel */
.event-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  background: var(--white);
  border-top: 1px solid var(--hairline);
  border-left: 5px solid var(--accent);
  user-select: none;
}
.event-summary::-webkit-details-marker { display: none; }
.event-summary-text { flex: 1; min-width: 0; }
.event-summary-text h2 {
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
}
.event-summary-date {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}
.event-arrow {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.event-arrow::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.event-panel[open] .event-arrow::after { transform: translate(-50%, -30%) rotate(-135deg); }

.event-body {
  padding: clamp(20px, 3vw, 30px);
}
.event-panel[open] .event-body { animation: event-panel-in .35s var(--ease); }
@keyframes event-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
}
.event-facts { list-style: none; margin-bottom: 18px; }
.event-facts li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  margin-bottom: 6px;
}
.event-facts li strong { color: var(--ink); }
.event-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
/* Lenyíló ("Mi várható?", esemény-részletek, bemutatkozás stb.) — natív
   <details>/<summary>, egy közös komponens az egész oldalon.
   Alap: áttetsző, színes hátteret feltételező (pl. tábor-kártyák).
   --card módosító: átlátszatlan fehér, világos hátteren való használatra. */
.tb-toggle {
  background-color: rgba(255, 255, 255, 0.52);
  border-radius: var(--radius-sm);
  color: var(--ink);
  margin-bottom: 18px;
}
.tb-toggle[open] { background-color: rgba(255, 255, 255, 0.3); }
.tb-toggle summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 56px 14px 20px;
  user-select: none;
}
.tb-toggle summary::-webkit-details-marker { display: none; }
.tb-toggle summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 20px;
  font-weight: 400;
  line-height: 27px;
  text-align: center;
  transition: transform .25s var(--ease);
}
.tb-toggle[open] summary::after { content: "–"; }
.tb-toggle-body { padding: 2px 20px 20px; color: var(--muted); }
.tb-toggle-body p,
.tb-toggle-body div { margin-bottom: 10px; font-size: clamp(0.92rem, 1.05vw, 1rem); }
.tb-toggle-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 8px;
}
.tb-toggle-body ul,
.tb-toggle-body ol { margin: 0 0 12px; padding-left: 22px; }
.tb-toggle-body li { margin-bottom: 4px; font-size: clamp(0.92rem, 1.05vw, 1rem); }
.tb-toggle-body a { color: var(--ink); font-weight: 700; }

/* --card módosító: átlátszatlan fehér kártya (fejlesztési terület / szakember oldalak) */
.tb-toggle--card {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.tb-toggle--card[open] { background: var(--white); }
.tb-toggle--card summary { color: var(--green-dark); }
.tb-toggle--card summary::after { background: var(--accent, var(--coral)); }
.event-leaders-title { margin-bottom: 12px; }
.event-leaders {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.leader-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  background: var(--bg);
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
a.leader-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.leader-card img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
}
.leader-card .leader-body {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--muted);
}
.leader-card .leader-body strong {
  display: block;
  font-family: "Baloo Bhai 2", sans-serif;
  color: var(--ink);
  font-size: 1rem;
}
/* Kártya alján egymás mellett/alatt álló gombok – egyenletes térközzel */
.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Az „Érdekel” gomb a fejlesztőház-hero korall-narancsát viszi (--btn-coral),
   nem a semleges szürke .btn-primary alapszínt. */
.event-body .btn-primary {
  background: #ff7355;
  color: var(--white);
  border-color: #ff7355;
  box-shadow: 0 8px 20px rgba(255, 115, 85, 0.35);
}
.event-body .btn-primary:hover {
  background: color-mix(in srgb, #ff7355 86%, var(--white));
  border-color: color-mix(in srgb, #ff7355 86%, var(--white));
  box-shadow: 0 12px 26px rgba(255, 115, 85, 0.45);
}
/* Facebook-eseményre mutató gomb: a Facebook márkakékje */
.btn-facebook {
  background: #1877f2;
  color: var(--white);
  border-color: #1877f2;
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.3);
}
.btn-facebook:hover {
  background: #0f5fd0;
  border-color: #0f5fd0;
  box-shadow: 0 12px 26px rgba(24, 119, 242, 0.4);
}
.event-note {
  max-width: 1200px;
  margin: 40px auto 0;
  text-align: center;
  font-style: italic;
  color: var(--muted);
}

/* ============================================================
   SZEGLETHÁZ TÖRTÉNETE ALOLDAL
   ============================================================ */
.prose {
  max-width: 760px;
  margin-inline: auto;
  color: var(--muted);
}
.prose h3 {
  color: var(--ink);
  font-size: 1.35rem;
  margin-top: 40px;
  margin-bottom: 14px;
}
.prose h3:first-child { margin-top: 0; }
.prose p { line-height: 1.75; }
.prose strong { color: var(--ink); }

.story-quote {
  margin: 26px 0;
  padding: 20px 26px;
  border-left: 4px solid var(--coral);
  background: color-mix(in srgb, var(--coral) 8%, #fff);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
}

/* ---------- Fotógaléria lightbox (a js/main.js építi fel minden olyan
   oldalon, ahol .kp-gallery vagy .ft-gallery van) ---------- */
.kp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.92);
  padding: clamp(16px, 5vw, 64px);
}
.kp-lightbox.is-open { display: flex; }
body.kp-lightbox-open { overflow: hidden; }

.kp-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.kp-lightbox-close,
.kp-lightbox-prev,
.kp-lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}
.kp-lightbox-close:hover,
.kp-lightbox-prev:hover,
.kp-lightbox-next:hover { background: rgba(255, 255, 255, 0.25); }

.kp-lightbox-close {
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
}
.kp-lightbox-prev,
.kp-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}
.kp-lightbox-prev { left: clamp(8px, 3vw, 28px); }
.kp-lightbox-next { right: clamp(8px, 3vw, 28px); }

@media (max-width: 600px) {
  .kp-lightbox-prev,
  .kp-lightbox-next { width: 40px; height: 40px; }
}