/* ==========================================================================
   Király Anita — Coaching & Empatikus kommunikáció
   Közös stíluslap  |  Tiszta CSS, build-eszköz nélkül
   --------------------------------------------------------------------------
   Tartalom:
   01. Design tokenek (színek, betűk, méretek)
   02. Alapok és reset
   03. Tipográfia
   04. Elrendezés (container, section, grid)
   05. Nyelvváltás (HU / EN)
   06. Gombok
   07. Fejléc és navigáció
   08. Mobilmenü
   09. Hero (nyitókép)
   10. Futószalag (marquee)
   11. Tartalmi blokkok
   12. Kártyák, szolgáltatások, lépések
   13. Vélemények
   14. Harmonika (GYIK)
   15. Űrlap
   16. Lábléc
   17. Animációk
   18. Reszponzív töréspontok
   19. Nyomtatás és akadálymentesítés
   ========================================================================== */

/* 01. DESIGN TOKENEK ------------------------------------------------------ */
:root{
  /* Színek — a meleg, homokos paletta */
  --cream:      #faf7f5;   /* alap háttér */
  --linen:      #f4f0ec;   /* halvány váltakozó sáv */
  --sand:       #f0e9e4;   /* homok sáv */
  --clay:       #e6dbd1;   /* mélyebb homok */
  --ink:        #5c5752;   /* címsorok, sötét meleg szürke */
  --ink-soft:   #6f6a64;   /* folyószöveg */
  --gold:       #9a8360;   /* arany-drapp kiemelés */
  --gold-dark:  #836e4f;   /* arany hover */
  --gold-soft:  #c4b299;
  --line:       rgba(92, 87, 82, .16);
  --line-strong:rgba(92, 87, 82, .32);
  --white:      #ffffff;

  /* Betűtípusok */
  --font-display: "Newsreader", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-greeting: "Qwigley", "Snell Roundhand", "Apple Chancery", cursive;

  /* Betűméretek — folyékonyan skálázódnak a kijelzővel */
  --fs-hero:    clamp(1.95rem, .8rem + 4.88vw, 4.35rem);  /* a négysoros címsor keskeny kijelzőn se törjön */
  --fs-h1:      clamp(2.1rem,  1.25rem + 3.5vw, 3.75rem);
  --fs-h2:      clamp(1.85rem, 1.15rem + 2.7vw, 3rem);
  --fs-h3:      clamp(1.35rem, 1.1rem + 1vw,   1.85rem);
  --fs-h4:      clamp(1.1rem,  1rem + .5vw,    1.3rem);
  --fs-lead:    clamp(1.05rem, .98rem + .45vw, 1.28rem);
  --fs-body:    1.0625rem;
  --fs-body-serif: 1.15rem;   /* talpas folyószöveg — optikailag azonos az Interrel */
  --fs-small:   .875rem;
  --fs-label:   .72rem;

  /* Térközök */
  --space-section: clamp(4.5rem, 2rem + 7vw, 9rem);
  --space-lg: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --space-md: 1.75rem;
  --container: 1240px;
  --container-narrow: 860px;
  --container-text: 700px;

  --header-h: 104px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --transition: .45s var(--ease);
}

/* 02. ALAPOK ÉS RESET ----------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked{ overflow: hidden; }

img, svg, video{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; text-decoration: none; }

button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul, ol{ margin: 0; padding: 0; list-style: none; }

hr{ border: 0; border-top: 1px solid var(--line); margin: var(--space-lg) 0; }

::selection{ background: var(--gold); color: var(--cream); }

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Ugrás a tartalomra — billentyűzetes navigációhoz */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--cream);
  padding: .9rem 1.6rem;
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.skip-link:focus{ left: 0; }

/* 03. TIPOGRÁFIA ---------------------------------------------------------- */
h1, h2, h3, h4, h5{
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.14;
  letter-spacing: -.005em;
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); line-height: 1.22; }
h4{ font-size: var(--fs-h4); line-height: 1.3; }

p{ margin: 0 0 1.25em; }
p:last-child{ margin-bottom: 0; }

em, .italic{ font-style: italic; }

strong{ font-weight: 500; color: var(--ink); }

.eyebrow{
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4rem;
  line-height: 1.6;
}
.eyebrow--ink{ color: var(--ink); }
.eyebrow--light{ color: rgba(250, 247, 245, .85); }

.lead{
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink);
}

/* Folyószöveg talpas betűvel — a referencia oldal mintájára.
   A verzál címkék, a navigáció, a gombok és az űrlapmezők maradnak Interben. */
p, .prose li{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-body-serif);
  line-height: 1.72;
  letter-spacing: 0;
}
/* A többi folyószöveg és a nem verzál linkek: talpas betű, saját méret megtartásával.
   Listaelemek, lábléc-linkek, GYIK-válaszok, űrlapmezők, legördülő menüpontok. */
li,
.values__desc,
.form__note,
.accordion__panel-inner,
.dropdown__link,
.form__check,
.footer__legal a{
  font-family: var(--font-display);
  font-weight: 300;
}

/* Kivételek: ami verzál kisszöveg, az Interben marad. */
.dropdown__link small,
.socials a,
.mobile-sub a,
.footer__title,
.form__label{
  font-family: var(--font-sans);
}

/* Üdvözlő címsor Qwigley írott betűvel: „Szia, Anita vagyok", „Szia, Király Anita vagyok".
   Írott betűként a címsorszintnél nagyobb méretet kap. A korábbi Italianno-mérethez
   képest ~0,9-szeres, mert a Qwigley kisbetűi ~20%-kal magasabbak — így optikailag
   ugyanakkora. Betűközt nem kap: az összekötött betűk kapcsolata szétesne tőle. */
.greeting{
  font-family: var(--font-greeting);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.575rem + 3.6vw, 4.15rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}

.display{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

.text-center{ text-align: center; }
.text-gold{ color: var(--gold); }
.text-light{ color: rgba(250, 247, 245, .88); }
.text-light h1, .text-light h2, .text-light h3, .text-light h4{ color: var(--cream); }

.rule{
  width: 56px;
  height: 1px;
  background: var(--line-strong);
  border: 0;
  margin: 2rem 0;
}
.text-center .rule, .rule--center{ margin-left: auto; margin-right: auto; }

/* Hosszabb szövegtörzs (jogi oldalak, blogszerű tartalom) */
.prose h2{ margin-top: 2.6em; }
.prose h3{ margin-top: 2em; font-size: var(--fs-h4); }
.prose h2:first-child, .prose h3:first-child{ margin-top: 0; }
.prose ul{ margin: 0 0 1.5em; padding-left: 1.4em; list-style: disc; }
.prose ol{ margin: 0 0 1.5em; padding-left: 1.4em; list-style: decimal; }
.prose li{ margin-bottom: .55em; padding-left: .3em; }
.prose a{ color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.prose a:hover{ color: var(--gold-dark); border-color: var(--gold-dark); }

/* 04. ELRENDEZÉS ---------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.container--narrow{ max-width: var(--container-narrow); }
.container--text{ max-width: var(--container-text); }

.section{ padding-block: var(--space-section); position: relative; }
.section--tight{ padding-block: clamp(3rem, 1.5rem + 4vw, 5.5rem); }
.section--flush-top{ padding-top: 0; }
.section--flush-bottom{ padding-bottom: 0; }
.section--linen{ background: var(--linen); }
.section--sand{ background: var(--sand); }
.section--ink{ background: var(--ink); color: rgba(250, 247, 245, .82); }
.section--ink h1, .section--ink h2, .section--ink h3{ color: var(--cream); }
.section--gold{ background: var(--gold); color: rgba(250, 247, 245, .9); }
.section--gold h2, .section--gold h3{ color: var(--cream); }

.section-head{ max-width: 720px; margin-bottom: var(--space-lg); }
.section-head--center{ margin-inline: auto; text-align: center; }
.section-head p{ color: var(--ink-soft); }

.grid{ display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }

/* Kép + szöveg elrendezés */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.split--reverse .split__media{ order: 2; }
.split--media-narrow{ grid-template-columns: .85fr 1fr; }
.split--text-narrow{ grid-template-columns: 1fr .85fr; }
.split--sidebar{ grid-template-columns: 1.45fr 1fr; align-items: start; }
.split__body{ max-width: 34rem; }

.media{ position: relative; overflow: hidden; background: var(--clay); }
.media img{ width: 100%; height: 100%; object-fit: cover; }
.media--tall{ aspect-ratio: 4 / 5; }
.media--portrait{ aspect-ratio: 3 / 4; }
.media--square{ aspect-ratio: 1 / 1; }
.media--wide{ aspect-ratio: 16 / 10; }
/* A kép saját aránya: a teljes kép látszik, semmi nem vágódik le */
.media--natural{ aspect-ratio: auto; }
.media--natural img{ display: block; height: auto; }
.media--arch{ border-radius: 50vw 50vw 0 0; }

/* Egymásra csúsztatott képpár */
.media-stack{ position: relative; padding-bottom: 4.5rem; padding-left: 3rem; }
.media-stack__main{ aspect-ratio: 3 / 4; }
.media-stack__accent{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 8px solid var(--cream);
}
/* Álló kis kép a saját arányában: a teljes fotó látszik, semmi nem vágódik le */
.media-stack__accent--natural{ width: 36%; aspect-ratio: auto; }
.media-stack__accent--natural img{ display: block; height: auto; }

/* 05. NYELVVÁLTÁS --------------------------------------------------------- */
html[lang="hu"] .en{ display: none !important; }
html[lang="en"] .hu{ display: none !important; }

.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: .35rem .2rem;
}
.lang-switch__btn{
  padding: .18rem .55rem;
  color: var(--ink);
  opacity: .5;
  transition: opacity .3s var(--ease), color .3s var(--ease);
  line-height: 1.4;
}
.lang-switch__btn:hover{ opacity: .85; }
.lang-switch__btn[aria-pressed="true"]{ opacity: 1; color: var(--gold); font-weight: 500; }
.lang-switch__sep{ opacity: .35; }

/* 06. GOMBOK -------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--gold);
  color: var(--cream);
  border: 1px solid var(--gold);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-align: center;
}
.btn:hover{ background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-2px); }

.btn--outline{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--outline:hover{ background: var(--ink); border-color: var(--ink); color: var(--cream); }

.btn--light{ background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--light:hover{ background: transparent; color: var(--cream); border-color: var(--cream); }

.btn--ghost-light{ background: transparent; color: var(--cream); border-color: rgba(250, 247, 245, .5); }
.btn--ghost-light:hover{ background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn--wide{ width: 100%; }
.btn + .btn{ margin-left: .75rem; }

.btn-row{ display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }
.btn-row .btn + .btn{ margin-left: 0; }
.text-center .btn-row, .btn-row--center{ justify-content: center; }

/* Aláhúzásos szöveglink */
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--gold-soft);
  transition: color .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
}
.link-arrow::after{ content: "\2192"; font-size: 1em; transition: transform .35s var(--ease); }
.link-arrow:hover{ color: var(--gold-dark); border-color: var(--gold-dark); gap: .85rem; }
.link-arrow:hover::after{ transform: translateX(3px); }
.link-arrow--light{ color: var(--cream); border-color: rgba(250, 247, 245, .45); }
.link-arrow--light:hover{ color: var(--cream); border-color: var(--cream); }

/* 07. FEJLÉC ÉS NAVIGÁCIÓ ------------------------------------------------- */
.header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--transition), box-shadow var(--transition), height var(--transition);
}
.header::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity var(--transition);
}
.header.is-scrolled{
  background: rgba(250, 247, 245, .94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  height: 82px;
}
.header.is-scrolled::after{ opacity: 1; }

/* Áttetsző fejléc a nyitóképen — csak amíg nem görgettünk */
.header--overlay:not(.is-scrolled) .nav__link,
.header--overlay:not(.is-scrolled) .brand__name,
.header--overlay:not(.is-scrolled) .lang-switch,
.header--overlay:not(.is-scrolled) .lang-switch__btn{ color: var(--ink); }

.header__inner{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.header__col{
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.6vw, 1.7rem);
  min-width: 0;
}
.header__col--left{ justify-content: flex-start; }
.header__col--right{ justify-content: flex-end; }

/* Logó / névjegy */
.brand{ text-align: center; line-height: 1.2; }
.brand__name{
  display: block;
  font-family: var(--font-display);
  font-size: calc(clamp(1.15rem, 1rem + .7vw, 1.6rem) * var(--brand-scale, 1));
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: font-size var(--transition);
}
.brand__tag{
  display: block;
  margin-top: calc(.34rem * var(--brand-scale, 1));
  font-size: calc(.58rem * var(--brand-scale, 1));
  line-height: 1.75;              /* két sornyi alcímhez */
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  transition: font-size var(--transition), margin-top var(--transition);
}
/* Az oldal tetején (görgetés nélkül) a középső márkablokk másfélszeres; görgetéskor visszahúzódik
   a megszokott méretére (az .is-scrolled osztályt a main.js teszi rá 40 px görgetés után).
   Minden méret a --brand-scale szorzóból jön, a betűköz em-ben van, így az arányok nem változnak.
   Csak asztali nézetben — telefonon a blokk balra áll a menügomb és a nyelvváltó mellett. */
@media (min-width: 941px){
  .header:not(.is-scrolled){ height: calc(var(--header-h) + 20px); }
  .header:not(.is-scrolled) .brand{ --brand-scale: 1.1; }
}
/* Keskenyebb asztali kijelzőn kisebb a szorzó, hogy a nagy felirat ne érjen rá a jobb oldali
   menüpontokra (Referenciák, Kapcsolat, nyelvváltó); 1160 px felett a teljes másfélszeres méret. */
@media (min-width: 1000px){ .header:not(.is-scrolled) .brand{ --brand-scale: 1.25; } }
@media (min-width: 1160px){ .header:not(.is-scrolled) .brand{ --brand-scale: 1.5; } }

.nav{ display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem); }
.nav--left{ justify-content: flex-start; }
.nav--right{ justify-content: flex-end; }

.nav__item{ position: relative; }

.nav__link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .5rem 0;
  position: relative;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav__link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: .15rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover{ color: var(--gold); }
.nav__link:hover::after,
.nav__item.is-current > .nav__link::after{ transform: scaleX(1); transform-origin: left; }
.nav__item.is-current > .nav__link{ color: var(--gold); }
/* A „Szolgáltatások” menüpont nem link (2026-10-13), csak a lenyíló menüt nyitja: nyíl kurzor */
.nav__item--has-sub > .nav__link{ cursor: default; }

.nav__caret{
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .35s var(--ease);
  flex: none;
}
.nav__item:hover .nav__caret,
.nav__item.is-open .nav__caret{ transform: rotate(-135deg) translate(-3px, -3px); }

/* Legördülő almenü */
.dropdown{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 320px;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: .6rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  box-shadow: 0 24px 48px -30px rgba(92, 87, 82, .5);
}
/* Láthatatlan, tágabb érzékelő terület a menü körül, hogy egy kis kicsúszástól ne csukódjon
   össze. Csak nyitott menünél él, mert zárva a menü pointer-events: none. */
.dropdown::before{ content: ""; position: absolute; inset: -16px -28px -28px; z-index: -1; }
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown,
.nav__item.is-open .dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown__link{
  display: block;
  padding: .8rem 1.6rem;
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), padding-left .3s var(--ease);
}
.dropdown__link:hover{ background: var(--sand); color: var(--gold); padding-left: 1.95rem; }
.dropdown__link small{
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .1rem;
}

/* A Coaching alá tartozó három ág: beljebb húzva, halkabban, hogy
   ránézésre látszódjon az alá-fölé rendeltség. */
.dropdown__link--sub{
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 1.95rem;
  font-size: .8rem;
  color: var(--ink-soft);
}
.dropdown__link--sub:hover{ padding-left: 2.3rem; color: var(--gold); }
/* A menücsoportok (Coaching az ágaival, Empatikus kommunikáció, Mindfulness) között finom,
   jobbra elhalványuló arany hajszálvonal; a Coaching ágai előtt kis arany rombusz. */
.dropdown__link:not(.dropdown__link--sub):not(:first-child){ position: relative; margin-top: .55rem; padding-top: 1.15rem; }
.dropdown__link:not(.dropdown__link--sub):not(:first-child)::before{
  content: "";
  position: absolute;
  top: 0;
  left: 1.6rem;
  right: 1.6rem;
  height: 1px;
  background: linear-gradient(to right, var(--gold-soft), rgba(196, 178, 153, 0));
}
.dropdown__link--sub::before{
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: .75rem;
  background: var(--gold);
  transform: rotate(45deg);
  vertical-align: .2em;
}

/* Hamburger */
.burger{
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
}
.burger__box{ position: relative; width: 24px; height: 12px; }
.burger__box span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger__box span:nth-child(1){ top: 0; }
.burger__box span:nth-child(2){ bottom: 0; }
.burger.is-active .burger__box span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.burger.is-active .burger__box span:nth-child(2){ transform: translateY(-5.5px) rotate(-45deg); }

/* 08. MOBILMENÜ ----------------------------------------------------------- */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--cream);
  padding: calc(var(--header-h) + 2rem) clamp(1.5rem, 6vw, 3rem) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.is-open{ opacity: 1; visibility: visible; transform: none; }

.mobile-nav__item{ border-bottom: 1px solid var(--line); }
.mobile-nav__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--ink);
  text-align: left;
}
.mobile-nav__link .nav__caret{ width: 9px; height: 9px; color: var(--gold); }
.mobile-nav__item.is-open .nav__caret{ transform: rotate(-135deg) translate(-3px, -3px); }

.mobile-sub{
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.mobile-nav__item.is-open .mobile-sub{ max-height: 320px; }
.mobile-sub a{
  display: block;
  padding: .7rem 0 .7rem 1.1rem;
  border-left: 1px solid var(--line-strong);
  margin-left: .2rem;
  font-size: var(--fs-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mobile-sub__child{ padding-left: 2.2rem !important; opacity: .8; }
.mobile-sub a:last-child{ margin-bottom: 1rem; }
.mobile-sub a:hover{ color: var(--gold); }

.mobile-menu__foot{
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
.mobile-menu__meta{ font-size: var(--fs-small); color: var(--ink-soft); }
.mobile-menu__meta a{ color: var(--gold); }

/* 09. HERO ---------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: min(80vh, 760px);           /* korábban 92vh / 900px: a szöveg fölött nagy üres sáv maradt */
  display: flex;
  align-items: center;                    /* a szöveg függőlegesen középen a fejléc alatti térben */
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
  background: var(--clay);
}
.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img{ width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(250, 247, 245, .92) 0%, rgba(250, 247, 245, .62) 34%, rgba(250, 247, 245, .1) 62%, rgba(250, 247, 245, 0) 100%);
}
.hero__inner{ position: relative; z-index: 3; width: 100%; }

/* Krém fátyol: a fotó fölött, a szöveg alatt fut, hogy a címsor
   minden képernyőszélességen tisztán olvasható maradjon. */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(96deg,
    rgba(250, 247, 245, .96) 0%,
    rgba(250, 247, 245, .84) 26%,
    rgba(250, 247, 245, .42) 48%,
    rgba(250, 247, 245, 0) 72%);
}

/* Portré a nyitóképen — lágyan beleolvad a krém háttérbe.
   A maszkolás két rétegben történik, hogy minden böngészőben működjön:
   a külső elem oldalt, a belső fent-lent halványítja el a fotót. */
.hero__photo{
  position: absolute;
  z-index: 1;
  top: auto;
  right: 0;
  bottom: 0;
  /* A doboz pontosan akkora, mint a fotó: az arányát a kép adja, a magassága pedig
     a legkisebb e három közül: a fejléc alatti hely; a képernyő 62%-ának megfelelő
     szélesség; és keskenyebb asztali kijelzőn (kb. 940–1250 px) egy kisebb szélesség,
     hogy a címsor ne érjen rá az arcra. Így a kép sehol nem lóg ki és nem vágódik le —
     csak a széleit maszkoljuk. */
  height: min(calc(100% - var(--header-h)), calc(62vw * 1145 / 1374), calc((90vw - 400px) * 1145 / 1374));
  width: auto;
  aspect-ratio: 1374 / 1145;      /* = a fotó eredeti aránya (images/anita-hero.jpg) */
  max-width: none;
  pointer-events: none;
  /* Balra erősen halványodik bele a háttérbe */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 12%, rgba(0,0,0,.7) 28%, #000 46%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 12%, rgba(0,0,0,.7) 28%, #000 46%);
}
.hero__photo-inner{
  width: 100%;
  height: 100%;
  /* Felül és alul csak kicsit */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
}
.hero__photo img{
  width: 100%;
  height: 100%;
  object-fit: contain;            /* teljes kép, vágás nélkül */
  object-position: center;
}
.hero__photo picture{ display: contents; }   /* a <picture> ne szóljon bele a méretezésbe: a kép a dobozt tölti ki */
.hero__content{ max-width: 48rem; }   /* a négysoros címsor leghosszabb sora is kiférjen */
.hero__title{
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 2.25rem;
  text-wrap: balance;
}
.hero__title em{ color: var(--gold); }

/* Belső oldalak fejléce */
.page-hero{
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 7vw, 6.5rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  background: var(--sand);
  overflow: hidden;
}
.page-hero::after{
  content: "";
  position: absolute;
  right: -8%;
  top: -30%;
  width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(154, 131, 96, .17), rgba(154, 131, 96, 0) 68%);
  pointer-events: none;
}
/* A szöveg szélesebben futhat, hogy a cím és a bevezető kevesebb sorba törjön, és a bézs
   fejléc minden aloldalon nagyjából a Coaching oldal magasságáig tartson (2026-10-03). */
.page-hero__inner{ position: relative; z-index: 1; max-width: 60rem; }
.page-hero__title{ margin-bottom: 1.2rem; }
.page-hero p{ max-width: 48rem; }

/* 10. FUTÓSZALAG ---------------------------------------------------------- */
.marquee{
  overflow: hidden;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Naplemente-égbolt háttér. A kréta fátyol a paletta felé hangolja a képet,
     és biztosítja, hogy a szavak minden kivágásnál olvashatók maradjanak.
     A kép nem mozdul: csak a szöveg fut rajta. */
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(250, 247, 245, .55), rgba(250, 247, 245, .55)),
    url("../images/szalag-hatter.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  --marquee-duration: 42s;
}
.marquee__track{
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
.marquee__group{
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  padding-right: clamp(1.5rem, 4vw, 3.25rem);
}
.marquee__item{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  white-space: nowrap;
}
.marquee__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
@keyframes marquee{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(-50%, 0, 0); }
}
.marquee:hover .marquee__track{ animation-play-state: paused; }

/* 11. TARTALMI BLOKKOK ---------------------------------------------------- */
/* Nagy, központozott bevezető gondolat */
.statement{
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.statement p{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}
.statement p + p{ margin-top: 1.4rem; }

/* Értékek / megközelítés listája */
.values{
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.values__item{
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 21rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease), color .45s var(--ease);
}
.values__item:hover{ padding-left: .8rem; }
/* A címek oszlopa a leghosszabb címhez igazodik: minden leírás ugyanott, a címhez közel
   kezdődik. Régebbi böngészőben a fenti rögzített oszlopszélesség marad érvényben. */
@supports (grid-template-columns: subgrid){
  .values{ grid-template-columns: 2.2rem max-content minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 2.5rem); }
  .values__item{ grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.values__num{
  font-size: var(--fs-label);
  letter-spacing: .18em;
  color: var(--gold);
  flex: none;
  min-width: 2.2rem;
}
.values__label{
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.25;
}
.values__desc{
  max-width: 34rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Egyszerű jellemzők rácsban */
.feature{ }
.feature__icon{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--gold);
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
/* Ikon a kockában (a Rólam oldal módszertanjainál): vékony vonalas SVG a szám helyett. */
.feature__icon svg{
  width: 1.45em;
  height: 1.45em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature h3{ font-size: var(--fs-h4); margin-bottom: .6rem; }
.feature p{ font-size: var(--fs-small); line-height: 1.75; }

/* Idézet */
.pull-quote{
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.pull-quote blockquote{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.15rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}
.pull-quote cite{
  display: block;
  margin-top: 1.8rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Tényadat-sáv */
.stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.stats__num{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem);
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .7rem;
}
.stats__label{
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* 12. KÁRTYÁK, SZOLGÁLTATÁSOK, LÉPÉSEK ------------------------------------ */
.card{
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 32px 60px -40px rgba(92, 87, 82, .55);
}
.card__media{ aspect-ratio: 4 / 3; overflow: hidden; background: var(--clay); }
.card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.card:hover .card__media img{ transform: scale(1.05); }
.card__body{
  padding: clamp(1.75rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .9rem;
}
.card__body h3{ margin: 0; }
.card__body p{ font-size: var(--fs-small); line-height: 1.78; margin: 0; }
.card__foot{ margin-top: auto; padding-top: 1.4rem; }

.card--plain{ background: transparent; border: 0; }
.card--plain:hover{ transform: none; box-shadow: none; }
.card--plain .card__body{ padding: 1.6rem 0 0; }

/* Kiemelt szolgáltatás-blokk */
.service{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.service + .service{ margin-top: var(--space-section); }
.service:nth-child(even) .service__media{ order: 2; }
.service__index{
  font-size: var(--fs-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1.1rem;
}
.service__body h2{ margin-bottom: 1rem; }
.service__list{ margin: 1.6rem 0 0; }
.service__list li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  font-size: var(--fs-small);
  line-height: 1.7;
}
.service__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

/* Lépések */
.steps{ counter-reset: step; display: grid; gap: 0; }
.steps__item{
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 3vw, 2.75rem);
  padding: clamp(1.75rem, 3vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.steps__item:first-child{ border-top: 1px solid var(--line); }
.steps__item::before{
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 300;
  color: var(--gold-soft);
  line-height: 1;
  min-width: 3rem;
}
.steps__item h3{ font-size: var(--fs-h4); margin-bottom: .55rem; }
.steps__item p{ font-size: var(--fs-small); margin: 0; max-width: 44rem; }
.steps__item p + p{ margin-top: .75rem; }

/* Árblokk */
.price{
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 3vw, 2.75rem);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.price--highlight{ background: var(--sand); border-color: var(--line-strong); }
.price__name{ font-size: var(--fs-h4); margin-bottom: .4rem; }
.price__meta{
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.price__value{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  margin-bottom: .35rem;
}
.price__value small{ font-size: .4em; letter-spacing: .1em; color: var(--ink-soft); }
.price__note{ font-size: var(--fs-small); margin-bottom: 1.6rem; }
.price ul{ margin-bottom: 1.8rem; }
.price li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .6rem;
  font-size: var(--fs-small);
  line-height: 1.65;
}
.price li::before{
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 8px; height: 1px;
  background: var(--gold);
}
.price .btn{ margin-top: auto; }

/* Célcsoport-lista pipákkal */
.check-list li{
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}
.check-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}

/* Vélemény-kártya (referenciák oldal) */
.quote-card{
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.6rem);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color var(--transition), transform var(--transition);
}
.quote-card:hover{ border-color: var(--line-strong); transform: translateY(-4px); }
.quote-card__text{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.75rem;
}
.quote-card footer{
  margin-top: auto;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.quote-card footer span{
  display: block;
  margin-top: .45rem;
  letter-spacing: .08em;
  text-transform: none;
  font-size: .8rem;
  color: var(--ink-soft);
}

/* 13. VÉLEMÉNYEK ---------------------------------------------------------- */
.testimonials{ position: relative; }
.testimonial{
  display: none;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.testimonial.is-active{ display: block; animation: fadeUp .7s var(--ease) both; }
.testimonial__quote{
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.9rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.9rem;
}
.testimonial__author{
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.testimonial__author span{ display: block; margin-top: .4rem; letter-spacing: .12em; color: var(--ink-soft); text-transform: none; font-size: .78rem; }

.testimonial-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.75rem;
}
.testimonial-nav__btn{
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.testimonial-nav__btn:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.testimonial-dots{ display: flex; gap: .6rem; }
.testimonial-dots button{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.testimonial-dots button[aria-current="true"]{ background: var(--gold); transform: scale(1.35); }

/* 14. HARMONIKA (GYIK) ---------------------------------------------------- */
.accordion{ border-top: 1px solid var(--line); }
.accordion__item{ border-bottom: 1px solid var(--line); }
.accordion__trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, .95rem + .6vw, 1.4rem);
  font-weight: 300;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.accordion__trigger:hover{ color: var(--gold); }
.accordion__icon{
  position: relative;
  width: 14px; height: 14px;
  flex: none;
  color: var(--gold);
}
.accordion__icon::before, .accordion__icon::after{
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.accordion__icon::before{ left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.accordion__icon::after{ top: 0; left: 50%; height: 100%; width: 1px; transform: translateX(-50%); }
.accordion__item.is-open .accordion__icon::after{ transform: translateX(-50%) rotate(90deg); opacity: 0; }
.accordion__panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease);
}
.accordion__panel-inner{
  padding-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
  max-width: 46rem;
  font-size: var(--fs-small);
  line-height: 1.8;
}

/* 15. ŰRLAP --------------------------------------------------------------- */
.form{ display: grid; gap: 1.5rem; }
.form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form__field{ display: flex; flex-direction: column; gap: .55rem; }
.form__label{
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.form__control{
  width: 100%;
  padding: .95rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.form__control:focus{ outline: none; border-color: var(--gold); background: var(--white); }
.form__control::placeholder{ color: rgba(111, 106, 100, .55); }
textarea.form__control{ min-height: 168px; resize: vertical; line-height: 1.7; }
select.form__control{
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.form__check{
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: var(--fs-small);
  line-height: 1.6;
}
.form__check input{ margin-top: .35rem; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.form__check a{ color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.form__note{ font-size: .8rem; color: var(--ink-soft); opacity: .85; }
.form__status{
  padding: 1rem 1.2rem;
  border: 1px solid var(--gold);
  background: var(--sand);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-small);
  display: none;
}
.form__status.is-visible{ display: block; }
.form__status a{ color: var(--gold-dark); border-bottom: 1px solid var(--gold-soft); }
/* Rejtett csapdamező a robotoknak: a látogató nem látja, a képernyőolvasó sem olvassa fel */
.form__hp{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form .btn[aria-busy="true"]{ opacity: .6; cursor: progress; }
/* Visszajelzés küldés után: a hiba piros keretes, a siker zöld és jól látható.
   A zöld doboz a felhasználó kérésére (2026-09-12) a callingisfun.hu mintáját követi —
   ez az egyetlen szín az oldalon, ami nem a :root tokenekből jön. */
.form__status--error{ border-color: #b4544a; }
.form__status--ok{
  padding: 1.15rem 1.4rem;
  border-color: transparent;
  background-color: #25804a;
  background-image: linear-gradient(135deg, #2b8a4d 0%, #1f6f40 100%);
  color: #fff;
  font-weight: 400;
  font-size: var(--fs-body-serif);
  box-shadow: 0 16px 32px -18px rgba(31, 111, 64, .75);
}
.form__status--ok.is-visible{
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: status-be .5s cubic-bezier(.2, .8, .3, 1.15) both;
}
.form__status--ok::before{
  content: "";
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237a47' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center / 58% no-repeat;
  animation: status-pipa .45s .2s cubic-bezier(.2, .8, .3, 1.4) both;
}
.form__status-title{ display: block; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.55rem); font-weight: 400; line-height: 1.15; margin-bottom: .25rem; color: inherit; }
.form__status--ok a{ color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
@keyframes status-be{ from{ opacity: 0; transform: translateY(12px) scale(.97); } to{ opacity: 1; transform: none; } }
@keyframes status-pipa{ from{ transform: scale(0); } to{ transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
  .form__status--ok.is-visible, .form__status--ok::before{ animation: none; }
}

/* Kapcsolat adatblokk */
.contact-list{ display: grid; gap: 1.9rem; }
.contact-list dt{
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .45rem;
}
.contact-list dd{
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.5;
}
.contact-list dd a{ transition: color .3s var(--ease); }
.contact-list dd a:hover{ color: var(--gold); }

/* 16. LÁBLÉC -------------------------------------------------------------- */
.cta-band{
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  text-align: center;
  background: var(--ink);
}
.cta-band__bg{ position: absolute; inset: 0; z-index: 0; }
.cta-band__bg img{ width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cta-band__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(92, 87, 82, .55), rgba(92, 87, 82, .78));
}
.cta-band__inner{ position: relative; z-index: 1; max-width: 44rem; margin-inline: auto; }
.cta-band h2{ color: var(--cream); }
.cta-band p{ color: rgba(250, 247, 245, .86); }

.footer{
  background: var(--sand);
  padding-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  padding-bottom: 2.25rem;
  font-size: var(--fs-small);
}
.footer__top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.footer__brand .brand__name{ font-size: 1.3rem; text-align: left; }
.footer__brand .brand__tag{ text-align: left; }
.footer__brand p{ margin-top: 1.4rem; max-width: 22rem; line-height: 1.8; }
.footer__title{
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.3rem;
}
.footer__list li{ margin-bottom: .75rem; }
.footer__list a{ transition: color .3s var(--ease), padding-left .3s var(--ease); display: inline-block; }
.footer__list a:hover{ color: var(--gold); padding-left: .3rem; }
.footer__bottom{
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8rem;
  color: var(--ink-soft);
}
.footer__legal{ display: flex; flex-wrap: wrap; gap: 1.5rem; padding-right: 3.75rem; }
.footer__legal a:hover{ color: var(--gold); }
.socials{ display: flex; gap: 1.4rem; margin-top: 1.6rem; }
.socials a{
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover{ color: var(--gold); border-color: var(--gold-soft); }

/* Vissza a tetejére */
.to-top{
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 80;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .3s var(--ease);
}
.to-top.is-visible{ opacity: 1; visibility: visible; transform: none; }
.to-top:hover{ background: var(--gold); }

/* Kézzel rajzolt kiemelés (aláhúzás és bekarikázás) ------------------------
   Használat:
     <span class="sketch sketch--underline">Szöveg<svg class="sketch__mark" …></span>
   A rajzolás akkor indul, amikor a szülő [data-sketch] elem képernyőre görög.
   Teljes hossz: 2 másodperc (aláhúzás 0–0,8 s, karika 0,7–2,0 s). */
.h-sketch{ line-height: 1.4; }

.sketch{
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.sketch__mark{
  position: absolute;
  left: 50%;
  max-width: none;          /* felülírja a globális svg{max-width:100%} resetet */
  overflow: visible;
  pointer-events: none;
}
.sketch__mark path{
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--sketch-len);
  stroke-dashoffset: var(--sketch-len);
}

/* Aláhúzás */
.sketch--underline .sketch__mark{
  --sketch-len: 293;
  width: 104%;
  height: .26em;
  bottom: -.02em;
  transform: translateX(-50%);
}
.sketch--underline .sketch__mark path{
  stroke: var(--gold);
  stroke-width: 2.4;
  transition: stroke-dashoffset .8s cubic-bezier(.55, .15, .3, 1);
}

/* Bekarikázás — szándékosan szabálytalan, kézzel húzott vonal: nem zárt ellipszis,
   az oldalai nem egyformák, a vége túlfut a kezdőponton, és kicsit meg is billen.
   A karika rögzített ráhagyást kap a szöveg körül (nem százalékot), a felső íve a doboz
   legtetején fut, így a betűket nem húzza át; a kifejezés körüli térköz miatt a szomszéd
   szavakra (pl. az „az"-ra) sem ér rá. */
.sketch--circle{ margin-inline: .55em; margin-block: .4em; }
.sketch--circle .sketch__mark{
  --sketch-len: 721;
  width: calc(100% + .9em);
  height: calc(100% + 1em);
  top: 50%;
  transform: translate(-50%, -50%) rotate(-.8deg);
}
/* Az „az" / „to our" a kiemeléssel egy sorban marad: nagy kijelzőn így a sortörés
   a „Lépések" után jön, és nem a névelő lóg a sor végén. */
.sketch-keep{ white-space: nowrap; }
/* Keskeny kijelzőn a hosszú kiemelés két sorba törhet — a doboz szélessége ilyenkor a
   sorokhoz igazodik, hogy a karika a szöveget ölelje, ne az üres sorvéget. */
@media (max-width: 560px){
  .sketch-keep, .sketch--circle{ white-space: normal; }
  .sketch--circle{ max-width: 7.4em; margin-block: .6em .35em; }
}
.sketch--circle .sketch__mark path{
  stroke: var(--gold-soft);
  stroke-width: 2.2;
  transition: stroke-dashoffset 1.3s cubic-bezier(.5, .1, .3, 1) .7s;
}

/* Megrajzolt állapot */
.is-drawn .sketch__mark path{ stroke-dashoffset: 0; }

/* Ismerj meg — fotónapló ------------------------------------------------------
   Lépcsőzetes „nagyítások": krém kerettel és árnyékkal, mint egy előhívott fotó; a
   páros elemek lejjebb csúsznak, az első és a negyedik kép enyhén megbillen. A
   bevezető szöveg nagy kijelzőn görgetés közben a képek mellett marad. */
.moments{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-lg);
  align-items: start;
}
/* A bevezető görgetését a js/main.js 13. modulja intézi: lefelé görgetve a
   szöveg alja áll meg az ablak alján, felfelé görgetve a teteje a fejléc
   alatt. Itt csak a tömörebb sortávot állítjuk be, hogy több férjen ki. */
.moments__intro{ position: relative; }
.moments__intro p{ line-height: 1.5; margin-bottom: .95em; }
/* Két hasáb, egyenletes hézagokkal — a képek magasságtól függetlenül egymás alá kerülnek */
.moments__grid{
  column-count: 2;
  column-gap: clamp(1.1rem, 2.6vw, 2.2rem);
}
.moment{
  margin: 0 0 clamp(1.1rem, 2.6vw, 2.2rem);
  break-inside: avoid;
  padding: .6rem .6rem 0;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px -32px rgba(92, 87, 82, .55);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
/* Mindegyik kép kicsit ferdén áll, és egérrel ráállva egyenesedik ki */
.moment:nth-child(3n+1){ transform: rotate(-1.1deg); }
.moment:nth-child(3n+2){ transform: rotate(.9deg); }
.moment:nth-child(3n+3){ transform: rotate(-.7deg); }
.moment:hover{ transform: none; box-shadow: 0 26px 50px -30px rgba(92, 87, 82, .6); }
/* Teljes szélességű kép: mindkét hasábon átnyúlik — a dőlés kisebb, hogy a
   széles kártya se álljon nagyon ferdén, de egérrel ráállva ez is kiegyenesedik */
.moment.moment--full{ column-span: all; transform: rotate(-.6deg); }
.moment.moment--full:hover{ transform: none; }
.moment img{
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--clay);
}
.moment--tall img{ aspect-ratio: 3 / 4; }
.moment--square img{ aspect-ratio: 1 / 1; }
.moment--wide img{ aspect-ratio: 4 / 3; }
.moment--portrait img{ aspect-ratio: 4 / 5; }
.moment figcaption{ padding: .9rem .2rem 1.05rem; }
.moment__label{
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.moment__note{
  display: block;
  margin-top: .3rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 940px){
  .moments{ grid-template-columns: minmax(0, 1fr); }
  .moments__intro{ position: static; }
}
@media (max-width: 560px){
  .moments__grid{ column-gap: .9rem; }
  .moment{ padding: .45rem .45rem 0; margin-bottom: .9rem; }
  .moment figcaption{ padding: .7rem .1rem .85rem; }
}

/* Karrier coaching — szakasz-navigátor, folyamatsáv, szembeállítás, címkék, mérleg ----
   A „Hol tartasz most?" kártyák a négy szakaszra ugranak; a szakaszok a fix fejléc
   alá igazodnak. Minden a meglévő tokenekből építkezik, éles sarkokkal. */
.phase{ scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.phase-nav{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.phase-card{
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.phase-card:hover{ border-color: var(--gold-soft); transform: translateY(-3px); box-shadow: 0 22px 40px -32px rgba(92, 87, 82, .5); }
.phase-card__top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.phase-card__num{ font-family: var(--font-display); font-size: 2rem; font-weight: 300; line-height: 1; color: var(--gold-soft); }
.phase-card__icon svg{ display: block; width: 26px; height: 26px; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.phase-card__title{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 300; line-height: 1.28; }
.phase-card__text{ font-family: var(--font-display); font-size: var(--fs-small); font-weight: 300; line-height: 1.6; color: var(--ink-soft); }
.phase-card__more{ margin-top: auto; padding-top: .6rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

.pipeline{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pipe;
}
.pipeline::before{ content: ""; position: absolute; left: 10%; right: 10%; top: 14px; border-top: 1px dashed var(--line-strong); }
.pipeline li{ position: relative; padding: 0 .4rem; text-align: center; font-size: var(--fs-small); color: var(--ink); counter-increment: pipe; }
.pipeline li::before{
  content: counter(pipe);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 auto .75rem;
  background: var(--linen);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: .7rem;
}
.pipeline__caption{ margin-top: 1.1rem; text-align: center; font-style: italic; font-size: var(--fs-small); color: var(--ink-soft); }

.questions{ display: grid; gap: .85rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.questions li{ position: relative; padding-left: 1.5rem; font-size: var(--fs-h4); font-style: italic; line-height: 1.35; color: var(--ink); }
.questions li::before{ content: ""; position: absolute; left: 0; top: .72em; width: .8rem; border-top: 1px solid var(--gold); }

.contrast{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--cream);
  border: 1px solid var(--line);
}
.contrast__side{ padding: clamp(1.4rem, 3vw, 2.3rem); }
.contrast__side p{ margin: 0; }
.contrast__side--muted{ background: var(--linen); }
.contrast__label{ display: block; margin-bottom: .6rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.contrast__side--muted .contrast__label{ color: var(--ink-soft); }
.contrast__vs{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  border-inline: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--gold-soft);
}
.contrast__caption{ margin-top: 1rem; text-align: center; font-style: italic; font-size: var(--fs-small); color: var(--ink-soft); }

.tests{ margin-top: clamp(2.5rem, 5vw, 4rem); }
.chips{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.chips li{ padding: .45rem .8rem; background: var(--cream); border: 1px solid var(--line-strong); font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.phase__note{ margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-style: italic; color: var(--gold-dark); }

.balance{ padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--cream); border: 1px solid var(--line); }
.balance__label{ display: block; margin-bottom: 1.2rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.balance__bar{ display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1.4rem; border: 1px solid var(--line-strong); }
.balance__half{ padding: 1rem .9rem; text-align: center; }
.balance__half + .balance__half{ border-left: 1px solid var(--line-strong); background: var(--sand); }
.balance__pct{ display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 300; line-height: 1; color: var(--gold); }
.balance__who{ display: block; margin-top: .45rem; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 300; color: var(--ink); }
.balance__fit{ display: block; margin-top: 1.4rem; font-family: var(--font-display); font-size: var(--fs-h3); font-style: italic; font-weight: 300; color: var(--ink); }

.pull-quote__lead{ max-width: 40rem; margin: 0 auto 1.6rem; text-align: center; color: var(--ink-soft); }
/* Keskeny szövegoszlopban a hosszabb szám (pl. „since 2018") is egy sorban maradjon. */
.stats--compact .stats__num{ font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); }

@media (max-width: 1080px){
  .phase-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .phase-nav{ grid-template-columns: minmax(0, 1fr); }
  .pipeline{ grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .pipeline::before{ left: 13.5px; right: auto; top: 14px; bottom: 14px; border-top: 0; border-left: 1px dashed var(--line-strong); }
  .pipeline li{ display: flex; align-items: center; gap: .9rem; padding: 0; text-align: left; }
  .pipeline li::before{ flex: none; margin: 0; }
  .pipeline__caption{ text-align: left; }
  .contrast{ grid-template-columns: minmax(0, 1fr); }
  .contrast__vs{ min-width: 0; padding: .45rem 0; border-inline: 0; border-block: 1px solid var(--line); }
}

/* Karrier coaching — „Hol tartasz most?”: balra a szöveg és a négy kompakt kártya 2×2-ben, jobbra
   a fotó a bal oldalhoz képest középre igazítva. A kártyák szövege mögött témánként más, elvont,
   visszafogott háttérrajz (images/kartya-*.svg, a minta a jobb oldalon); a fotó a keretnél
   szélesebb, ezért csak a bal széléből vágódik. */
.where{ display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head media" "cards media"; column-gap: clamp(2rem, 4.5vw, 4rem); align-items: start; }
.where .section-head{ grid-area: head; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.where__media{ grid-area: media; align-self: center; }
.where__photo{ aspect-ratio: 4 / 3; }
.where__photo img{ object-position: right center; }
.where .phase-nav{ grid-area: cards; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1rem); }
.where .phase-card{ gap: .35rem; padding: 1.05rem 1.15rem 1rem; background-color: var(--cream); background-image: linear-gradient(90deg, rgba(250, 247, 245, .9) 0%, rgba(250, 247, 245, .55) 55%, rgba(250, 247, 245, 0) 85%), var(--kartya-hatter); background-repeat: no-repeat; background-position: center, right center; background-size: cover, cover; }
.where .phase-card--1{ --kartya-hatter: url("../images/kartya-utkereses.svg"); }
.where .phase-card--2{ --kartya-hatter: url("../images/kartya-elindulas.svg"); }
.where .phase-card--3{ --kartya-hatter: url("../images/kartya-interju.svg"); }
.where .phase-card--4{ --kartya-hatter: url("../images/kartya-vallalkozas.svg"); }
.where .phase-card__top{ margin-bottom: .1rem; }
.where .phase-card__num{ font-size: 1.4rem; }
.where .phase-card__icon{ display: none; }
.where .phase-card__title{ font-size: 1.08rem; }
.where .phase-card__text{ font-size: .82rem; line-height: 1.5; }
.where .phase-card__more{ padding-top: .35rem; }
@media (max-width: 940px){
  /* keskenyebb kijelzőn: szöveg, fotó, kártyák egymás alatt */
  .where{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "cards"; row-gap: clamp(1.4rem, 4vw, 2rem); }
  .where .section-head{ margin-bottom: 0; }
}
@media (max-width: 560px){
  .where .phase-nav{ grid-template-columns: minmax(0, 1fr); }
}

/* Coaching — az elméről szóló gondolat a „Kérdések, nem receptek" részben */
.mind-note{ margin-top: 1.9rem; padding: .15rem 0 .15rem 1.3rem; border-left: 1px solid var(--gold-soft); }
.mind-note p{ margin: 0 0 .7rem; }
.mind-note p:last-child{ margin-bottom: 0; }
.mind-note__key{ font-size: var(--fs-lead); font-style: italic; line-height: 1.5; color: var(--ink); }

/* Coaching — az együttműködés folyamata: mozaik (két út · elköteleződés + időtartam ·
   párhuzamos tanulás + e-mail). Éles sarkok, a meglévő színtokenekből. */
.collab{
  --collab-gap: clamp(.9rem, 1.8vw, 1.4rem);
  --collab-pad: clamp(1.4rem, 2.6vw, 2.2rem);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--collab-gap);
}
.collab__item{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: var(--collab-pad);
  background: var(--cream);
  border: 1px solid var(--line);
}
.collab__item p{ margin: 0; }
.collab__item--one,
.collab__item--regular,
.collab__item--free,
.collab__item--time{ grid-column: span 3; }
.collab__item--free{ background: var(--sand); }
.collab__item--learn{ grid-column: span 4; background: var(--linen); }
.collab__item--mail{ grid-column: span 2; }
.collab__icon svg{ display: block; width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.collab__label{ margin-top: .35rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.collab__meta{ font-family: var(--font-display); font-size: var(--fs-small); font-style: italic; color: var(--ink-soft); }
.collab__big{ font-family: var(--font-display); font-size: var(--fs-h3); font-style: italic; font-weight: 300; line-height: 1.2; color: var(--ink); }
.collab__nums{ display: flex; align-items: flex-end; gap: clamp(1.4rem, 3vw, 2.6rem); margin: .3rem 0 .5rem; }
.collab__num{ display: flex; flex-direction: column; }
.collab__n{ font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); font-weight: 300; line-height: 1; color: var(--gold); }
.collab__n small{ margin-left: .18em; font-size: .36em; color: var(--ink-soft); }
.collab__num--alt .collab__n{ color: var(--gold-soft); }
.collab__cap{ margin-top: .35rem; font-family: var(--font-display); font-size: var(--fs-small); font-style: italic; color: var(--ink-soft); }
/* Egy alkalom · vagy · rendszeres folyamat: pontsor a két kártya tetején, egy vonalban.
   A vonalak a kártya széléig érnek, így a köztük ülő, hangsúlyos arany „vagy” címkébe futnak. */
.collab__track{ position: relative; display: flex; justify-content: space-between; align-items: center; height: 9px; margin-bottom: 1.1rem; }
.collab__track::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--gold-soft); }
.collab__track--single{ justify-content: flex-start; }
.collab__track--single::before{ right: calc(-1 * var(--collab-pad)); border-top-style: dashed; border-top-color: var(--line-strong); }
.collab__item--regular .collab__track::before{ left: calc(-1 * var(--collab-pad)); }
.collab__track i{ position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.collab__or{
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(var(--collab-pad) + 4.5px);
  transform: translate(calc(-50% - var(--collab-gap) / 2 - 1px), -50%);
  padding: .5rem 1.2rem .65rem;
  background: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--cream);
  box-shadow: 0 14px 28px -16px rgba(92, 87, 82, .6);
}
@media (max-width: 940px){
  .collab{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collab__item--one, .collab__item--regular, .collab__item--free, .collab__item--time{ grid-column: span 1; }
  .collab__item--learn, .collab__item--mail{ grid-column: span 2; }
}
@media (max-width: 640px){
  .collab{ grid-template-columns: minmax(0, 1fr); }
  .collab__item--one, .collab__item--regular, .collab__item--free,
  .collab__item--time, .collab__item--learn, .collab__item--mail{ grid-column: auto; }
  /* Telefonon a két kártya egymás alatt: köztük több hely, a „vagy” középen ül */
  .collab__item--regular{ margin-top: 1.5rem; }
  .collab__or{ left: 50%; top: 0; transform: translate(-50%, calc(-50% - (var(--collab-gap) + 1.5rem) / 2 - 1px)); }
  .collab__track--single::before{ right: 0; }
  .collab__item--regular .collab__track::before{ left: 0; }
}

/* Díjak: szöveges „ár" (pl. Egyedi ajánlatkérés) kisebb méretben, hogy ne törjön csúnyán */
.price__value--text{ font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); line-height: 1.2; }
.price__value + ul{ margin-top: 1.25rem; }

/* Lépések: a felkészítő kérdéssor kompakt változata */
.questions--compact{ gap: .45rem; margin-top: .9rem; }
.questions--compact li{ padding-left: 1.2rem; font-size: var(--fs-small); }

/* Coaching — Három irány: kétoldalas fejléc, három kártya kör alakú, kézzel rajzolt hatású
   grafikával. A grafikák a data-reveal .is-visible osztályára rajzolódnak ki
   (pathLength="1" + stroke-dashoffset), csökkentett mozgásnál azonnal. */
.branches-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.branches-head h2{ margin: 0; }
.branches-head__lead{ margin: 0; color: var(--ink-soft); }

.branches{
  --branch-art: clamp(112px, 11vw, 144px);
  --branch-pad: clamp(1.5rem, 2.6vw, 2.4rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding-top: calc(var(--branch-art) / 2);
}
.branch{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: calc(var(--branch-art) / 2 + 1.75rem) var(--branch-pad) var(--branch-pad);
  background: var(--cream);
  border: 1px solid var(--line);
}
.branch__art{
  position: absolute;
  top: calc(var(--branch-art) / -2);
  left: var(--branch-pad);
  width: var(--branch-art);
  height: var(--branch-art);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--white) 0%, var(--cream) 42%, var(--clay) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 36px -24px rgba(92, 87, 82, .45);
}
.branch__art svg{
  width: 64%;
  height: 64%;
  overflow: visible;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.branch__art .fill{ fill: var(--gold); stroke: none; }
.branch__num{
  position: absolute;
  top: .9rem;
  right: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2.6rem + 2.4vw, 5.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--linen);
  -webkit-text-stroke: 1px var(--gold-soft);
  pointer-events: none;
  user-select: none;
}
.branch__label{
  display: block;
  margin-bottom: .7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.branch h3{ font-size: var(--fs-h3); margin-bottom: .7rem; }
.branch p{ font-size: var(--fs-small); line-height: 1.75; margin: 0 0 1.6rem; }
.branch .link-arrow{ margin-top: auto; align-self: flex-start; }
/* Tovább szakasz: az általános Coaching kártya a köréhez hasonlóan barnított, a kör középen ül,
   sötétebb kitöltéssel — így elkülönül a szakterületek kártyáitól */
.branch--hub{
  background: radial-gradient(120% 80% at 50% 0%, var(--sand) 0%, var(--clay) 100%);
  border-color: var(--line-strong);
}
.branch--hub .branch__art{
  left: calc(50% - var(--branch-art) / 2);
  background: radial-gradient(circle at 34% 28%, var(--sand) 0%, var(--clay) 58%, var(--gold-soft) 135%);
}
/* A barnított alapon sötétebb szöveg és arany, hogy jól olvasható maradjon */
.branch--hub p{ color: var(--ink); }
.branch--hub .branch__label,
.branch--hub .link-arrow{ color: var(--gold-dark); }

/* Kirajzolódás: sorban a három grafika */
.branch__art path{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.branch__art .fill{ opacity: 0; transition: opacity .6s var(--ease); }
.branches.is-visible .branch__art path{ stroke-dashoffset: 0; }
.branches.is-visible .branch__art .fill{ opacity: 1; }
.branches.is-visible .branch:nth-of-type(1) .branch__art path{ transition-delay: .2s; }
.branches.is-visible .branch:nth-of-type(2) .branch__art path{ transition-delay: .6s; }
.branches.is-visible .branch:nth-of-type(3) .branch__art path{ transition-delay: 1s; }
.branches.is-visible .branch:nth-of-type(1) .branch__art .fill{ transition-delay: 1.2s; }
.branches.is-visible .branch:nth-of-type(2) .branch__art .fill{ transition-delay: 1.6s; }
.branches.is-visible .branch:nth-of-type(3) .branch__art .fill{ transition-delay: 2s; }
@media (prefers-reduced-motion: reduce){
  .branch__art path{ stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .branch__art .fill{ opacity: 1; transition: none; }
}
@media (max-width: 940px){
  .branches-head{ grid-template-columns: minmax(0, 1fr); align-items: start; }
  .branches{ grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--branch-art) / 2 + 2rem); }
}

/* Coaching — Kinek ajánlom: teljes szélességű fotó sötétítő réteggel, fehér, középre igazított
   szöveggel (az angelabainpsychology.com „Our Therapeutic Relationship” szakaszának mintájára).
   A fotó nagyon világos, ezért a szöveg mögött erősebb a sötétítés, és a betűk halvány árnyékot kapnak. */
.fit-band{
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 4rem + 7vw, 10rem);
  text-align: center;
  background: var(--ink);
}
.fit-band__bg{ position: absolute; inset: 0; z-index: 0; }
.fit-band__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.fit-band__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 72% at 50% 52%, rgba(92, 87, 82, .66) 0%, rgba(92, 87, 82, .36) 100%),
    rgba(92, 87, 82, .16);
}
.fit-band__wave{
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 6vw;                     /* mint a referencia szakaszelválasztója */
  fill: var(--sand);
  pointer-events: none;
}
.fit-band__wave--top{ top: -1px; }
.fit-band__wave--bottom{ bottom: -1px; }
.fit-band__inner{ position: relative; z-index: 2; max-width: 50rem; }
.fit-band .eyebrow{ text-shadow: 0 1px 10px rgba(92, 87, 82, .6); }
.fit-band h2{ color: var(--cream); text-shadow: 0 1px 18px rgba(92, 87, 82, .55); }
.fit-band__list{ list-style: none; max-width: 44rem; margin: clamp(2rem, 4vw, 2.75rem) auto 0; padding: 0; }
.fit-band__list li{
  padding: 1rem 0;
  border-top: 1px solid rgba(250, 247, 245, .34);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.55;
  color: var(--cream);
  text-shadow: 0 1px 14px rgba(92, 87, 82, .85);
}
.fit-band__list li:last-child{ border-bottom: 1px solid rgba(250, 247, 245, .34); }
.fit-band__list li::before{
  content: "";
  display: inline-block;
  width: 11px;
  height: 6px;
  margin: 0 .9rem .3em 0;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  vertical-align: middle;
}

/* Business coaching — ugrólinkek az oldalfejben, siker-kör, a „Mikor érdemes" fotósáv krém pereme,
   kifelé–befelé szembeállítás. Minden a meglévő tokenekből, éles sarkokkal; a vonalas
   grafikák a data-reveal .is-visible osztályára rajzolódnak ki. */
.link-arrow--down::after{ content: "\2193"; }
.link-arrow--down:hover::after{ transform: translateY(3px); }
.page-hero .btn-row{ column-gap: 2.2rem; }

.loop{ margin: 2rem 0 0; padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.1rem, 2.6vw, 1.9rem); background: var(--linen); border: 1px solid var(--line); }
.loop__visual{ display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 1.6vw, 1.1rem); }
.loop__node{ font-family: var(--font-display); font-size: var(--fs-h4); font-style: italic; font-weight: 300; line-height: 1.2; color: var(--ink); text-align: center; }
.loop__arrows{ flex: none; width: clamp(4rem, 7vw, 5.4rem); height: auto; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.loop__caption{ margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-small); line-height: 1.7; color: var(--ink-soft); text-align: center; }
.loop__arrows path{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.loop.is-visible .loop__arrows path{ stroke-dashoffset: 0; }
.loop.is-visible .loop__arrows path:nth-child(1){ transition-delay: .3s; }
.loop.is-visible .loop__arrows path:nth-child(2){ transition-delay: 1.2s; }
.loop.is-visible .loop__arrows path:nth-child(3){ transition-delay: 1.5s; }
.loop.is-visible .loop__arrows path:nth-child(4){ transition-delay: 2.4s; }

/* A „Mikor érdemes" fotósáv hullámos pereme itt krém színű, mert krém hátterű szakaszok között ül */
.fit-band--cream .fit-band__wave{ fill: var(--cream); }
/* Rövidebb fotósáv: kisebb térköz, szélesebb és sűrűbb lista, az utolsó pont alatt nincs vonal.
   A felső-alsó térköz a hullám magasságából (6vw) indul, hogy a szöveg ne csússzon a hullám alá. */
.fit-band--compact{ padding-block: calc(6vw + clamp(1.75rem, 1rem + 2.2vw, 3rem)); }
.fit-band--compact .fit-band__inner{ max-width: 60rem; }
.fit-band--compact .fit-band__list{ max-width: 56rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.fit-band--compact .fit-band__list li{ padding: .75rem 0; }
.fit-band--compact .fit-band__list li:last-child{ border-bottom: 0; }

.contrast--and{ margin-top: 0; }
.contrast--and .contrast__side:last-child{ background: var(--sand); }

@media (prefers-reduced-motion: reduce){
  .loop__arrows path{ stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* Business coaching — négy téma kétszer kettes rácsban, középen kirajzolódó iránytűvel;
   idővonal, ügyfélkör-skála, a céges coaching formái, „mikor érdemes" panel. */
.quad{
  --hub: clamp(96px, 9vw, 124px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cream);
  border: 1px solid var(--line);
}
.quad__item{ padding: clamp(1.6rem, 3vw, 2.6rem); }
/* A középső kör felé eső oldalon több a hely, hogy a szöveg ne érjen alá */
.quad__item:nth-of-type(odd){ padding-right: calc(var(--hub) / 2 + 1.6rem); border-right: 1px solid var(--line); }
.quad__item:nth-of-type(even){ padding-left: calc(var(--hub) / 2 + 1.6rem); }
.quad__item:nth-of-type(-n+2){ border-bottom: 1px solid var(--line); }
.quad__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.quad__icon svg{ display: block; width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.quad__num{ font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--gold-soft); }
.quad__item h3{ font-size: var(--fs-h3); margin-bottom: .6rem; }
.quad__item p{ margin: 0; font-size: var(--fs-small); line-height: 1.75; }
.quad__hub{
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: var(--hub);
  height: var(--hub);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--white) 0%, var(--cream) 42%, var(--clay) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 36px -24px rgba(92, 87, 82, .45);
}
.quad__hub svg{ width: 60%; height: 60%; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.quad__hub path{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.quad__hub path + path{ transition-delay: 1.1s; }
.quad__hub .fill{ fill: var(--gold); stroke: none; opacity: 0; transition: opacity .6s var(--ease) 2s; }
.quad.is-visible .quad__hub path{ stroke-dashoffset: 0; }
.quad.is-visible .quad__hub .fill{ opacity: 1; }

.journey{ position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); margin: 0; padding: 0; list-style: none; }
.journey::before{ content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1px dashed var(--line-strong); }
.journey__step{ position: relative; padding-top: 2.3rem; }
.journey__step::before{ content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--sand); border: 1px solid var(--gold); }
.journey__step:last-child::before{ background: var(--gold); }
.journey__when{ display: block; margin-bottom: .7rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.journey__step h3{ font-size: var(--fs-h3); margin-bottom: .75rem; }
.journey__step p{ margin: 0; font-size: var(--fs-small); line-height: 1.75; }
.strain{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.strain li{ font-family: var(--font-display); font-size: var(--fs-small); font-style: italic; color: var(--ink); }
.strain li + li::before{ content: "\2192"; margin-right: .5rem; font-style: normal; color: var(--gold); }
.range{ margin-top: 1.4rem; }
.range__line{ position: relative; display: flex; align-items: center; justify-content: space-between; height: 20px; }
.range__line::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--gold-soft); }
.range__line i{ position: relative; flex: none; border-radius: 50%; background: var(--gold); }
.range__line i:nth-child(1){ width: 5px; height: 5px; }
.range__line i:nth-child(2){ width: 8px; height: 8px; }
.range__line i:nth-child(3){ width: 11px; height: 11px; }
.range__line i:nth-child(4){ width: 15px; height: 15px; }
.range__line i:nth-child(5){ width: 20px; height: 20px; }
.range__ends{ display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.range__ends > span:last-child{ text-align: right; }
.journey__foot{ margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.8rem, 3.5vw, 2.5rem); border-top: 1px solid var(--line); }
.journey__foot .chips{ margin-top: .2rem; }
.journey__foot p{ max-width: 48rem; margin: 1.6rem 0 0; font-style: italic; color: var(--gold-dark); }

.formats{ background: var(--cream); border: 1px solid var(--line); }
.formats__row{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.formats__row + .formats__row{ border-top: 1px solid var(--line); }
.formats__opt{ display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: clamp(1.1rem, 2.2vw, 1.5rem) .6rem; text-align: center; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 300; line-height: 1.25; color: var(--ink); }
.formats__opt svg{ display: block; width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.formats__opt .fill{ fill: var(--gold-soft); stroke: none; }
.formats__or{ padding: .4rem .85rem .5rem; background: var(--gold); font-family: var(--font-display); font-size: 1.05rem; font-style: italic; line-height: 1; color: var(--cream); }
.formats__note{ margin: 1rem 0 0; font-size: var(--fs-small); font-style: italic; color: var(--ink-soft); }

.when-panel{ margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.8rem, 3.5vw, 2.8rem); background: var(--linen); border: 1px solid var(--line); }
.when-panel h3{ margin-bottom: 1.5rem; }
.when-panel .check-list{ columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.when-panel .check-list li{ break-inside: avoid; }

@media (max-width: 940px){
  .journey{ grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .journey::before{ left: 7px; right: auto; top: 8px; bottom: 8px; border-top: 0; border-left: 1px dashed var(--line-strong); }
  .journey__step{ padding: 0 0 0 2.5rem; }
}
@media (max-width: 760px){
  /* A kör a panel tetejére kerül, a négy téma egymás alá */
  .quad{ grid-template-columns: minmax(0, 1fr); margin-top: calc(var(--hub) / 2 + 1.5rem); padding-top: calc(var(--hub) / 2); }
  .quad__hub{ top: 0; }
  .quad__item:nth-of-type(n){ padding: clamp(1.4rem, 5vw, 1.9rem); border-right: 0; }
  .quad__item:nth-of-type(-n+3){ border-bottom: 1px solid var(--line); }
  .when-panel .check-list{ columns: 1; }
}
@media (prefers-reduced-motion: reduce){
  .quad__hub path{ stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .quad__hub .fill{ opacity: 1; transition: none; }
}

/* Empatikus kommunikáció — fókuszváltás panel, előtte–utána jelenetek (CSS-es fülek rádiógombokkal,
   JS nélkül), párbeszéd-buborékok, idézetsáv díszes idézőjellel. Éles sarkok, a meglévő tokenekből. */
.shift{ margin: 2rem 0 0; padding: clamp(1.3rem, 2.6vw, 1.9rem); background: var(--linen); border: 1px solid var(--line); }
.shift__title{ display: block; margin-bottom: .6rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.shift__row{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.shift__from{ font-family: var(--font-display); font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--gold-soft); text-decoration-thickness: 1px; }
.shift__arrow{ font-family: var(--font-display); font-size: 1.2rem; line-height: 1; color: var(--gold); }
.shift__to{ font-family: var(--font-display); font-size: var(--fs-h4); font-style: italic; font-weight: 300; line-height: 1.3; color: var(--ink); }

.scenes{ position: relative; }
.scenes__radio{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.scenes__tabs{ display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.scenes__tab{ display: flex; flex-direction: column; gap: .2rem; padding: .7rem 1rem .75rem; background: var(--cream); border: 1px solid var(--line-strong); cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
.scenes__tab:hover{ border-color: var(--gold); }
.scenes__for{ font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.scenes__name{ font-family: var(--font-display); font-size: var(--fs-small); line-height: 1.3; color: var(--ink); }
#scene-1:checked ~ .scenes__tabs [for="scene-1"],
#scene-2:checked ~ .scenes__tabs [for="scene-2"],
#scene-3:checked ~ .scenes__tabs [for="scene-3"],
#scene-4:checked ~ .scenes__tabs [for="scene-4"],
#scene-5:checked ~ .scenes__tabs [for="scene-5"],
#scene-6:checked ~ .scenes__tabs [for="scene-6"]{ background: var(--ink); border-color: var(--ink); }
#scene-1:checked ~ .scenes__tabs [for="scene-1"] .scenes__for,
#scene-2:checked ~ .scenes__tabs [for="scene-2"] .scenes__for,
#scene-3:checked ~ .scenes__tabs [for="scene-3"] .scenes__for,
#scene-4:checked ~ .scenes__tabs [for="scene-4"] .scenes__for,
#scene-5:checked ~ .scenes__tabs [for="scene-5"] .scenes__for,
#scene-6:checked ~ .scenes__tabs [for="scene-6"] .scenes__for{ color: var(--gold-soft); }
#scene-1:checked ~ .scenes__tabs [for="scene-1"] .scenes__name,
#scene-2:checked ~ .scenes__tabs [for="scene-2"] .scenes__name,
#scene-3:checked ~ .scenes__tabs [for="scene-3"] .scenes__name,
#scene-4:checked ~ .scenes__tabs [for="scene-4"] .scenes__name,
#scene-5:checked ~ .scenes__tabs [for="scene-5"] .scenes__name,
#scene-6:checked ~ .scenes__tabs [for="scene-6"] .scenes__name{ color: var(--cream); }
#scene-1:focus-visible ~ .scenes__tabs [for="scene-1"],
#scene-2:focus-visible ~ .scenes__tabs [for="scene-2"],
#scene-3:focus-visible ~ .scenes__tabs [for="scene-3"],
#scene-4:focus-visible ~ .scenes__tabs [for="scene-4"],
#scene-5:focus-visible ~ .scenes__tabs [for="scene-5"],
#scene-6:focus-visible ~ .scenes__tabs [for="scene-6"]{ outline: 2px solid var(--gold); outline-offset: 3px; }
.scene{ display: none; }
#scene-1:checked ~ .scenes__panels .scene--1,
#scene-2:checked ~ .scenes__panels .scene--2,
#scene-3:checked ~ .scenes__panels .scene--3,
#scene-4:checked ~ .scenes__panels .scene--4,
#scene-5:checked ~ .scenes__panels .scene--5,
#scene-6:checked ~ .scenes__panels .scene--6{ display: block; animation: fadeUp .5s var(--ease); }
.scene__context{ max-width: 48rem; margin: 0 0 1.4rem; font-size: var(--fs-lead); color: var(--ink); }
.scene__cols{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); }
.scene__col{ display: flex; flex-direction: column; padding: clamp(1.2rem, 2.4vw, 1.8rem); background: var(--cream); border: 1px solid var(--line); }
.scene__col--after{ background: var(--sand); border-color: var(--line-strong); }
.scene__label{ align-self: flex-start; margin-bottom: 1.1rem; padding: .35rem .75rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.scene__col--after .scene__label{ color: var(--cream); background: var(--gold); border-color: var(--gold); }
.chat{ display: flex; flex-direction: column; gap: .7rem; }
.chat__msg{ max-width: 90%; margin: 0; padding: .7rem .95rem .75rem; background: var(--linen); border: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }
.chat__msg--b{ align-self: flex-end; background: var(--white); }
.chat__name{ display: block; margin-bottom: .15rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.chat__note{ margin: 0; font-size: var(--fs-small); font-style: italic; text-align: center; color: var(--ink-soft); }
.scene__result{ margin: auto 0 0; padding-top: 1.1rem; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-soft); }
.scene__result::before{ content: ""; display: block; margin-bottom: .9rem; border-top: 1px solid var(--line); }
.scene__result-label{ font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.scene__why{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: baseline; margin: clamp(1.2rem, 2.4vw, 1.75rem) 0 0; padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.4vw, 1.8rem); background: var(--cream); border-left: 2px solid var(--gold); }
.scene__why-label{ font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: var(--gold); }
.scene__why-text{ margin: 0; font-family: var(--font-display); font-size: var(--fs-lead); font-style: italic; line-height: 1.5; color: var(--ink); }

.quote-band .pull-quote{ position: relative; padding-top: clamp(3rem, 6vw, 4.5rem); }
.quote-band .pull-quote::before{ content: "\201C"; position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(6rem, 4rem + 6vw, 9.5rem); line-height: .8; color: var(--gold-soft); pointer-events: none; }
.pull-quote__source{ display: block; margin-top: .5rem; font-family: var(--font-display); font-size: var(--fs-small); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.section--ink .pull-quote blockquote{ color: var(--cream); }
.section--ink .pull-quote__source{ color: rgba(250, 247, 245, .72); }
.section--ink.quote-band .pull-quote::before{ color: var(--gold); }

@media (max-width: 760px){
  .scene__cols{ grid-template-columns: minmax(0, 1fr); }
  .scene__why{ grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .scenes__tab{ flex: 1 1 calc(50% - .3rem); }
}
@media (max-width: 480px){
  .shift__row{ grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .shift__arrow{ justify-self: start; transform: rotate(90deg); }
}

/* Empatikus kommunikáció — célcsoport-szakaszok kirajzolódó körrel, nézőpont-kártyák, kiemelt
   workshop idővonallal, díjcsoportok, széles díjkártya, források könyvgerinc-stílusban. */
.aud__grid{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.aud__art{
  width: clamp(96px, 9vw, 124px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 1.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--white) 0%, var(--cream) 42%, var(--clay) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 36px -24px rgba(92, 87, 82, .45);
}
.aud__art svg{ width: 62%; height: 62%; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.aud__art path{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .35s; }
.aud__art .fill{ fill: var(--gold); stroke: none; opacity: 0; transition: opacity .6s var(--ease) 1.7s; }
.aud__intro.is-visible .aud__art path{ stroke-dashoffset: 0; }
.aud__intro.is-visible .aud__art .fill{ opacity: 1; }
.aud__intro h2{ margin-bottom: 1rem; }
.aud__format{ margin: 1.5rem 0 1.3rem; padding: .15rem 0 .15rem 1rem; border-left: 2px solid var(--gold); font-size: var(--fs-small); line-height: 1.7; }
.aud__format-label{ display: block; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.aud__lists{ display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.aud__panel{ padding: clamp(1.4rem, 2.6vw, 2.2rem); background: var(--cream); border: 1px solid var(--line); }
.aud__panel--gain{ background: var(--sand); border-color: var(--line-strong); }
.aud__panel-title{ margin-bottom: 1.1rem; font-size: var(--fs-h4); }
.aud__panel .check-list li:last-child{ margin-bottom: 0; }
.aud__note{ margin: 1rem 0 0; font-size: var(--fs-small); font-style: italic; color: var(--ink-soft); }
.gain-list{ display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.gain-list li{ position: relative; padding-left: 1.7rem; line-height: 1.65; }
.gain-list li::before{ content: "\2192"; position: absolute; left: 0; top: 0; font-family: var(--font-display); color: var(--gold); }

.persp{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.persp__card{ padding: clamp(1.4rem, 2.6vw, 2.2rem); background: var(--cream); border: 1px solid var(--line); border-top: 2px solid var(--gold); }
.persp__who{ display: block; margin-bottom: .5rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.persp__card h3{ margin-bottom: 1rem; font-size: var(--fs-h4); }
.persp .gain-list li{ font-size: var(--fs-small); }

.pricing-group + .pricing-group{ margin-top: clamp(3rem, 6vw, 4.5rem); }
.pricing-group__title{ display: flex; align-items: center; gap: 1rem; margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dark); }
.pricing-group__title::after{ content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
.pricing-group__cards{ margin-top: clamp(1.5rem, 3vw, 2.75rem); }

.workshop{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--cream); border: 1px solid var(--line-strong); }
.workshop__main{ padding: clamp(1.6rem, 3.2vw, 2.8rem); }
.workshop__badge{ display: inline-block; margin-bottom: 1rem; padding: .35rem .75rem; background: var(--gold); font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.workshop__title{ margin-bottom: .5rem; font-size: var(--fs-h3); }
.workshop__tagline{ margin: 0 0 1.1rem; font-family: var(--font-display); font-size: var(--fs-lead); font-style: italic; color: var(--gold-dark); }
.workshop__main p{ font-size: var(--fs-small); line-height: 1.75; }
.workshop__price{ display: flex; flex-direction: column; justify-content: center; padding: clamp(1.6rem, 3.2vw, 2.8rem); background: var(--sand); border-left: 1px solid var(--line); }
.workshop__calc{ margin-bottom: .7rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.workshop__price .price__note{ margin: .6rem 0 0; }
.workshop__price .btn{ align-self: flex-start; margin-top: 1.5rem; }
.timeline{ position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: clamp(1.6rem, 3.2vw, 2.4rem) clamp(1.6rem, 3.2vw, 2.8rem); list-style: none; background: var(--linen); border-top: 1px solid var(--line); }
.timeline::before{ content: ""; position: absolute; left: clamp(1.6rem, 3.2vw, 2.8rem); right: clamp(1.6rem, 3.2vw, 2.8rem); top: calc(clamp(1.6rem, 3.2vw, 2.4rem) + 15px); border-top: 1px solid var(--gold-soft); }
.timeline__step{ position: relative; padding-top: 2.8rem; }
.timeline__num{ position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; background: var(--linen); border: 1px solid var(--gold); font-family: var(--font-sans); font-size: var(--fs-label); color: var(--gold); }
.timeline__step--optional .timeline__num{ border-style: dashed; }
.timeline__head{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .6rem; margin-bottom: .35rem; }
.timeline__name{ font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.3; color: var(--ink); }
.timeline__hours{ font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--gold); }
.timeline__when{ display: block; margin-bottom: .35rem; font-size: var(--fs-small); font-style: italic; color: var(--gold-dark); }
.timeline__step p{ margin: 0; font-size: var(--fs-small); line-height: 1.65; }
.workshop__foot{ grid-column: 1 / -1; margin: 0; padding: 1rem clamp(1.6rem, 3.2vw, 2.8rem); border-top: 1px solid var(--line); font-size: var(--fs-small); font-style: italic; color: var(--ink-soft); }

.price--wide{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; height: auto; }
.price--wide .price__note{ margin-bottom: 0; }
.price--wide ul{ margin-bottom: 0; }
.price--wide .btn{ margin-top: 0; }

.books__label{ display: block; margin-bottom: 1rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.books__list{ display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.book{ position: relative; display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.2rem 1rem 1.7rem; background: var(--cream); border: 1px solid var(--line); }
.book::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--gold-soft); }
.book:nth-child(2)::before{ background: var(--gold); }
.book:nth-child(3)::before{ background: var(--clay); }
.book__author{ font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.book__title{ font-family: var(--font-display); font-size: var(--fs-h4); font-style: italic; line-height: 1.3; color: var(--ink); }
.books__note{ margin: 1rem 0 0; font-size: var(--fs-small); font-style: italic; color: var(--ink-soft); }

@media (max-width: 940px){
  .aud__grid{ grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .persp{ grid-template-columns: minmax(0, 1fr); }
  .workshop{ grid-template-columns: minmax(0, 1fr); }
  .workshop__price{ border-left: 0; border-top: 1px solid var(--line); }
  .timeline{ grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .timeline::before{ left: calc(clamp(1.6rem, 3.2vw, 2.8rem) + 15px); right: auto; top: clamp(1.6rem, 3.2vw, 2.4rem); bottom: clamp(1.6rem, 3.2vw, 2.4rem); border-top: 0; border-left: 1px solid var(--gold-soft); }
  .timeline__step{ padding: 0 0 0 3rem; }
  .price--wide{ grid-template-columns: minmax(0, 1fr); align-items: start; }
  .price--wide .btn{ justify-self: start; }
}
@media (prefers-reduced-motion: reduce){
  .aud__art path{ stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .aud__art .fill{ opacity: 1; transition: none; }
}
/* A három díjkártya sorai (cím, adatok, ár, megjegyzés, lista, gomb) egy vonalban ülnek */
@media (min-width: 941px){
  @supports (grid-template-rows: subgrid){
    .pricing-group__cards{ row-gap: 0; }
    .pricing-group__cards .price{ display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  }
}
/* Keskeny hasábban a hosszabb szám (pl. „2010 óta”, „több száz”) is egy sorban marad */
.stats--narrow .stats__num{ font-size: clamp(1.5rem, 1rem + 1.2vw, 2.1rem); white-space: nowrap; }

/* Mindfulness, meditáció, Sedona — lélegző kör, életút-idővonal fotókkal, a négy kérdés
   lépései (CSS-es fülek rádiógombokkal, JS nélkül) és a „honnan jön” doboz.
   Minden a meglévő tokenekből; az egyetlen kerek elem a lélegző kör. */

/* Lélegző kör: tíz másodperces ciklus — kb. négy másodperc belégzés, rövid tartás, hat kilégzés.
   Mozgáscsökkentett módban megáll, és a két szó egymás mellé kerül. */
.breath{ display: grid; justify-items: center; gap: clamp(1.1rem, 2.4vw, 1.6rem); }
.breath__stage{ position: relative; display: grid; place-items: center; width: clamp(240px, 60vw, 400px); aspect-ratio: 1 / 1; }
.breath__ring{ position: absolute; inset: 0; border: 1px solid var(--gold); border-radius: 50%; animation: ka-breath 10s ease-in-out infinite; }
.breath__ring--inner{ inset: 17%; border-color: var(--gold-soft); background: rgba(154, 131, 96, .07); }
.breath__words{ position: relative; display: grid; place-items: center; }
.breath__word{ grid-area: 1 / 1; font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dark); }
.breath__word--in{ animation: ka-breath-in 10s ease-in-out infinite; }
.breath__word--out{ animation: ka-breath-out 10s ease-in-out infinite; }
.breath__note{ max-width: 34rem; margin: 0; font-size: var(--fs-small); font-style: italic; text-align: center; color: var(--ink-soft); }
@keyframes ka-breath{ 0%{ transform: scale(.62); } 38%{ transform: scale(1); } 46%{ transform: scale(1); } 100%{ transform: scale(.62); } }
@keyframes ka-breath-in{ 0%, 3%{ opacity: 0; } 8%, 36%{ opacity: 1; } 43%, 100%{ opacity: 0; } }
@keyframes ka-breath-out{ 0%, 43%{ opacity: 0; } 50%, 92%{ opacity: 1; } 97%, 100%{ opacity: 0; } }

/* Az én utam: idővonal bal oldalon, fotók mellette. A kiemelt állomások pontja tömör. */
.path-wrap{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.path{ --path-indent: clamp(1.9rem, 3vw, 2.6rem); position: relative; margin: 0; padding: 0 0 0 var(--path-indent); list-style: none; }
.path::before{ content: ""; position: absolute; left: 7px; top: .7rem; bottom: .7rem; border-left: 1px solid var(--line-strong); }
.path__step{ position: relative; padding-bottom: clamp(1.5rem, 3vw, 2.3rem); }
.path__step:last-child{ padding-bottom: 0; }
.path__step::before{ content: ""; position: absolute; left: calc(2px - var(--path-indent)); top: .45rem; width: 9px; height: 9px; background: var(--cream); border: 1px solid var(--gold); }
.path__step--key::before{ background: var(--gold); }
.path__when{ display: block; margin-bottom: .25rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.path__name{ margin: 0 0 .45rem; font-size: var(--fs-h4); line-height: 1.3; }
.path__step p{ margin: 0; font-size: var(--fs-small); line-height: 1.7; }
.path__step p a{ color: var(--gold); border-bottom: 1px solid var(--gold-soft); transition: color .3s var(--ease), border-color .3s var(--ease); }
.path__step p a:hover{ color: var(--gold-dark); border-color: var(--gold-dark); }
.path__photos{ display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); align-items: start; }
.path__photo{ margin: 0; padding: .6rem .6rem 0; background: var(--cream); border: 1px solid var(--line); box-shadow: 0 22px 44px -32px rgba(92, 87, 82, .55); }
.path__photo img{ display: block; width: 100%; height: auto; }
.path__photo figcaption{ padding: .75rem .2rem .9rem; font-size: var(--fs-small); font-style: italic; line-height: 1.6; color: var(--ink-soft); }

/* Honnan jön a módszer — kiemelt doboz a történet mellett */
.fact{ padding: clamp(1.4rem, 3vw, 2.1rem); background: var(--cream); border: 1px solid var(--line); border-left: 2px solid var(--gold); }
.fact__label{ display: block; margin-bottom: .7rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.fact p{ font-size: var(--fs-small); line-height: 1.75; }
.fact p:last-child{ margin-bottom: 0; }
/* A Sedona-szakaszban a két hasáb felül igazodik, a doboz alatt a könyvfotó */
.split--top{ align-items: start; }
.fact-books{ margin-top: clamp(1.4rem, 3vw, 2rem); }

/* A négy kérdés: lépések rádiógombokkal, JS nélkül */
.release-head{ margin-top: clamp(3rem, 6vw, 4.5rem); }
.release{ position: relative; margin-top: clamp(2.2rem, 4.5vw, 3.5rem); padding: clamp(1.6rem, 3.4vw, 2.6rem); background: var(--cream); border: 1px solid var(--line); }
.release__radio{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* A doboz három része (Próbáld ki · kérdéssor · a négy akarás) vékony vonallal, kis térközzel */
.release__part + .release__part{ margin-top: clamp(1.3rem, 2.8vw, 1.9rem); padding-top: clamp(1.3rem, 2.8vw, 1.9rem); border-top: 1px solid var(--line); }
.release__title{ margin: 0 0 .55rem; text-align: center; }
.try__lead{ max-width: 42rem; margin: 0 auto 1.1rem; font-size: var(--fs-small); line-height: 1.65; text-align: center; color: var(--ink-soft); }
.release__tabs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: .9rem 0 1.1rem; }
.release__tab{ display: flex; flex-direction: column; gap: .3rem; padding: .75rem .9rem .85rem; background: var(--linen); border: 1px solid var(--line-strong); cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
.release__tab:hover{ border-color: var(--gold); }
.release__num{ font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .18em; color: var(--gold); }
.release__short{ font-family: var(--font-display); font-size: var(--fs-small); line-height: 1.3; color: var(--ink); }
#rel-1:checked ~ .release__tabs [for="rel-1"],
#rel-2:checked ~ .release__tabs [for="rel-2"],
#rel-3:checked ~ .release__tabs [for="rel-3"],
#rel-4:checked ~ .release__tabs [for="rel-4"]{ background: var(--ink); border-color: var(--ink); }
#rel-1:checked ~ .release__tabs [for="rel-1"] .release__num,
#rel-2:checked ~ .release__tabs [for="rel-2"] .release__num,
#rel-3:checked ~ .release__tabs [for="rel-3"] .release__num,
#rel-4:checked ~ .release__tabs [for="rel-4"] .release__num{ color: var(--gold-soft); }
#rel-1:checked ~ .release__tabs [for="rel-1"] .release__short,
#rel-2:checked ~ .release__tabs [for="rel-2"] .release__short,
#rel-3:checked ~ .release__tabs [for="rel-3"] .release__short,
#rel-4:checked ~ .release__tabs [for="rel-4"] .release__short{ color: var(--cream); }
#rel-1:focus-visible ~ .release__tabs [for="rel-1"],
#rel-2:focus-visible ~ .release__tabs [for="rel-2"],
#rel-3:focus-visible ~ .release__tabs [for="rel-3"],
#rel-4:focus-visible ~ .release__tabs [for="rel-4"]{ outline: 2px solid var(--gold); outline-offset: 3px; }
.release__panel{ display: none; }
#rel-1:checked ~ .release__panels .release__panel--1,
#rel-2:checked ~ .release__panels .release__panel--2,
#rel-3:checked ~ .release__panels .release__panel--3,
#rel-4:checked ~ .release__panels .release__panel--4{ display: block; animation: fadeUp .5s var(--ease); }
.release__question{ margin: 0 0 .9rem; font-family: var(--font-display); font-size: var(--fs-h3); font-style: italic; font-weight: 300; line-height: 1.35; color: var(--ink); }
.release__panel p{ max-width: 46rem; }
.release__panel p:last-child{ margin-bottom: 0; }

/* Végtelenített hanganyag: ovális pálya a felvétel hangerejéből (js/main.js 15. modul). A pályán
   gyöngyök ülnek, ahol beszélek, ott nagyobbak. A lejátszás pontja felülről, az óramutató szerint
   körbejár, a lejátszott rész arannyá válik; beszéd közben udvar fénylik a pont körül, és a gomb is
   együtt lélegzik a hanggal (--hang). Körbeérve az egész pálya felragyog, majd elenged, a
   kör-számláló lép. A pályába szándékosan nem lehet belekattintani. */
.loop-audio{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); height: 124px; margin-top: .6rem; }
.loop-audio__oval{ position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.loop-audio__track{ fill: var(--linen); stroke: var(--line); stroke-width: 1; }
.loop-audio__ripple{ fill: none; stroke: var(--gold-soft); stroke-width: 1; transform-box: view-box; transform-origin: 50% 50%; animation: ka-oval-ripple 2.4s var(--ease) forwards; }
@keyframes ka-oval-ripple{ 0%{ opacity: .9; transform: none; } 100%{ opacity: 0; transform: scale(var(--sx, 1.03), var(--sy, 1.2)); } }
.loop-audio__start{ fill: var(--gold); stroke: var(--cream); stroke-width: 1.5; }
.loop-audio__done{ fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; }
.loop-audio__glow{ fill: none; stroke: var(--gold); stroke-width: 2.5; opacity: 0; }
.loop-audio__pearl{ fill: var(--gold-soft); transform-box: fill-box; transform-origin: center; transition: fill .5s var(--ease), transform .4s var(--ease); }
.loop-audio__pearl.is-quiet{ fill: var(--line-strong); }
.loop-audio__pearl.is-played{ fill: var(--gold); }
.loop-audio__pearl.is-quiet.is-played{ fill: var(--gold-soft); }
.loop-audio.is-playing .loop-audio__pearl.is-near{ fill: var(--gold-dark); transform: scale(1.7); }
.loop-audio__halo{ fill: var(--gold-soft); opacity: 0; }
.loop-audio__dot{ fill: var(--gold-dark); opacity: 0; transition: opacity .4s var(--ease); }
.loop-audio.has-started .loop-audio__dot{ opacity: 1; }
.loop-audio__btn{ position: relative; grid-column: 2; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; background: var(--cream); border: 1px solid var(--gold); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 calc(var(--hang, 0) * 14px) rgba(196, 178, 153, .3); transition: background .35s var(--ease), transform .35s var(--ease); }
.loop-audio__btn:hover{ background: var(--sand); transform: scale(1.04); }
.loop-audio__btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }
.loop-audio__icon{ width: 0; height: 0; margin-left: 4px; border-left: 15px solid var(--gold); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.loop-audio.is-playing .loop-audio__btn{ background: var(--gold); }
.loop-audio.is-playing .loop-audio__icon{ width: 14px; height: 18px; margin-left: 0; border: 0; border-left: 4px solid var(--cream); border-right: 4px solid var(--cream); }
.loop-audio__time, .loop-audio__round{ position: relative; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: var(--ink-soft); }
.loop-audio__time{ grid-column: 1; justify-self: end; }
.loop-audio__round{ grid-column: 3; justify-self: start; color: var(--gold); }
.loop-audio.is-lap .loop-audio__pearl{ animation: ka-pearl 1.4s var(--ease) both; animation-delay: calc(var(--p) * 1.2s); }
@keyframes ka-pearl{ 0%{ fill: var(--gold); transform: scale(1); } 35%{ fill: var(--gold-soft); transform: scale(2); } }
.loop-audio.is-lap .loop-audio__glow{ animation: ka-oval-glow 2s var(--ease) both; }
@keyframes ka-oval-glow{ 0%{ opacity: .9; } 100%{ opacity: 0; } }
.loop-audio.is-lap .loop-audio__round{ animation: ka-lap-text 1.6s var(--ease); }
@keyframes ka-lap-text{ 0%{ color: var(--ink); transform: translateY(-4px); } 100%{ color: var(--gold); transform: none; } }

/* A négy akarás: 2×2 kártya, ráállva (vagy koppintva / billentyűzettel) megfordul */
.wants__intro{ max-width: 44rem; margin: .2rem auto 0; text-align: center; }
.wants__intro p{ margin: 0 0 .5rem; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); }
.wants__intro p:last-child{ margin-bottom: 0; }
.wants__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.2rem; }
.want{ perspective: 1200px; outline: none; cursor: pointer; }
.want__inner{ display: grid; height: 100%; transition: transform .7s var(--ease); transform-style: preserve-3d; }
.want__face{ grid-area: 1 / 1; display: flex; flex-direction: column; padding: 1.05rem 1.25rem; background: var(--linen); border: 1px solid var(--line); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.want__front{ align-items: center; justify-content: center; gap: .45rem; padding-top: .35rem; text-align: center; background: radial-gradient(circle at 50% 36%, var(--cream) 0, rgba(250, 247, 245, 0) 60%), var(--linen); }
.want__back{ justify-content: center; background: var(--sand); transform: rotateY(180deg); }
@media (hover: hover){ .want:hover .want__inner{ transform: rotateY(180deg); } }
.want:focus-within .want__inner{ transform: rotateY(180deg); }
.want:focus-visible .want__face{ border-color: var(--gold); }
.want__art{ flex: none; width: min(340px, calc(100% + 2.5rem)); max-width: none; height: 150px; margin: 0 -1.25rem .15rem; color: var(--gold); }
.want__title{ margin: 0; font-size: var(--fs-h4); font-weight: 300; line-height: 1.3; }
.want__more{ font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.want__back-title{ margin: 0 0 .45rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.want__back p:not(.want__back-title){ margin: 0 0 .45rem; font-size: .84rem; line-height: 1.5; }
.want__back p:last-child{ margin-bottom: 0; }
.want__back strong{ font-weight: 500; color: var(--ink); }
/* A kártyák rajzai: arany vonal, homokszín kitöltés, halvány visszhang. Mindegyik lassan mozog,
   és a mozgás a saját kettősségét mutatja: a marionett leng, a szívből hullámok indulnak, a
   biztonság köréből pontok szállnak szét, a két kör hol összeér, hol eltávolodik. */
.want__art .wa-fill{ fill: var(--gold-soft); fill-opacity: .28; }
.want__art .wa-line{ fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.want__art .wa-thin{ stroke-width: 1; stroke-opacity: .7; }
.want__art .wa-faint{ stroke: var(--gold-soft); }
.want__art .wa-dash{ stroke-dasharray: 3 4.5; }
.want__art .wa-dot{ fill: currentColor; }
.want__art .wa-soft{ fill-opacity: .5; }
.wa-swing{ transform-box: view-box; transform-origin: 170px 16px; animation: ka-swing 3s ease-in-out infinite alternate; }
.wa-ripple{ transform-box: view-box; transform-origin: 170px 75px; opacity: 0; animation: ka-ripple 3s ease-out infinite; }
.wa-ripple + .wa-ripple{ animation-delay: -1.5s; }
.wa-p{ animation: ka-drift 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.wa-left{ animation: ka-meet-l 4s ease-in-out infinite alternate; }
.wa-right{ animation: ka-meet-r 4s ease-in-out infinite alternate; }
@keyframes ka-swing{ from{ transform: rotate(-5deg); } to{ transform: rotate(5deg); } }
@keyframes ka-ripple{ 0%{ transform: scale(1); opacity: .9; } 100%{ transform: scale(1.55); opacity: 0; } }
@keyframes ka-drift{ 0%{ transform: translate(-8px, 2px); opacity: 0; } 30%{ opacity: 1; } 100%{ transform: translate(22px, -3px); opacity: 0; } }
@keyframes ka-meet-l{ from{ transform: translateX(-12px); } to{ transform: translateX(6px); } }
@keyframes ka-meet-r{ from{ transform: translateX(12px); } to{ transform: translateX(-6px); } }

/* Díjak: a kártyák sorai (cím, adatok, ár…) az empatikus oldal díjkártyáihoz hasonlóan egy
   vonalban ülnek (.pricing-group__cards); itt közvetlenül a szakaszfej alatt, külön térköz nélkül */
.section-head + .pricing-group__cards{ margin-top: 0; }
/* Csomagok alatti megjegyzés */
.packages__note{ max-width: 46rem; margin: clamp(1.8rem, 3.5vw, 2.6rem) auto 0; font-size: var(--fs-small); font-style: italic; text-align: center; color: var(--ink-soft); }

@media (max-width: 900px){
  .path-wrap{ grid-template-columns: minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 2.6rem); }
  .path__photos{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .release__tabs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wants__grid{ grid-template-columns: minmax(0, 1fr); }
  .loop-audio{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 132px auto; gap: .5rem 1rem; height: auto; }
  .loop-audio__oval{ bottom: auto; height: 132px; }
  .loop-audio__btn{ grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .loop-audio__time{ grid-column: 1; grid-row: 2; }
  .loop-audio__round{ grid-column: 2; grid-row: 2; }
  .path__photos{ grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce){
  .loop-audio.is-lap .loop-audio__pearl, .loop-audio.is-lap .loop-audio__glow, .loop-audio.is-lap .loop-audio__round{ animation: none; }
  .loop-audio__pearl{ transition: none; }
  .loop-audio__halo{ display: none; }
  .loop-audio__btn{ box-shadow: none; }
  .want__inner{ transition: none; }
  .wa-swing, .wa-ripple, .wa-p, .wa-left, .wa-right{ animation: none; }
  .wa-ripple{ opacity: .6; transform: scale(1.2); }
  .wa-ripple + .wa-ripple{ opacity: 0; }
  .breath__ring{ animation: none; transform: scale(.88); }
  .breath__word{ animation: none; opacity: 1; grid-area: auto; }
  .breath__words{ grid-auto-flow: column; gap: .7rem; }
}

/* Süti-sáv — a Google Tag Manager hozzájárulási módját állítja (js/main.js 14. modul).
   Asztalon bal alsó doboz, hogy a „vissza a tetejére” gomb szabadon maradjon; keskeny
   kijelzőn teljes szélességű sáv, ilyenkor a vissza-gomb amíg nyitva van, elbújik.
   Az „Elfogadom mindet” és a „Csak a szükségesek” egyforma méretű, egymás mellett: az
   elutasítás ugyanolyan könnyű, mint az elfogadás. A „Beállítások” alattuk, teljes
   szélességben; megnyitva két szögletes kapcsoló jelenik meg (Statisztika, Marketing). */
.consent{
  position: fixed;
  left: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 85;
  width: min(30rem, calc(100% - 2 * clamp(1rem, 2.5vw, 2rem)));
  padding: clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.7rem);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px -28px rgba(92, 87, 82, .5);
  max-height: calc(100vh - 2 * clamp(1rem, 2.5vw, 2rem));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
/* Nyitáskor a láthatóság azonnal vált, hogy a billentyűzetes fókusz rögtön a gombra kerülhessen */
.consent.is-open{ opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s; }
.consent__title{ margin: 0 0 .5rem; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.consent__text{ margin: 0; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-soft); }
.consent__text a{ color: var(--ink); border-bottom: 1px solid var(--gold-soft); transition: color .3s var(--ease), border-color .3s var(--ease); }
.consent__text a:hover{ color: var(--gold); border-color: var(--gold); }
.consent__actions{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.consent__actions .btn{ flex: 1 1 0; min-width: max-content; padding: .9rem 1.2rem; }
.consent__actions .btn + .btn{ margin-left: 0; }
.consent__actions .consent__settings{ flex-basis: 100%; }
.consent__prefs{ display: grid; gap: .9rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.consent__prefs[hidden]{ display: none; }
.consent__opt{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: start; cursor: pointer; }
.consent__opt-text{ font-family: var(--font-display); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.consent__opt-text strong{ display: block; font-weight: 500; color: var(--ink); }
.consent__note{ margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.consent__prefs .btn{ justify-self: start; padding: .85rem 1.2rem; }
/* Kapcsoló: szögletes, mint az oldal többi eleme */
.consent__switch{ -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 38px; height: 20px; margin: .15rem 0 0; background: var(--cream); border: 1px solid var(--gold); cursor: pointer; transition: background .25s var(--ease); }
.consent__switch::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--gold); transition: transform .25s var(--ease), background .25s var(--ease); }
.consent__switch:checked{ background: var(--gold); }
.consent__switch:checked::after{ background: var(--cream); transform: translateX(18px); }
.consent__switch:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

/* Lábléc: „Süti-beállítások” gomb, ugyanúgy, mint a mellette álló linkek */
.footer__consent{ padding: 0; font: inherit; font-family: var(--font-display); font-weight: 300; color: inherit; background: none; border: 0; cursor: pointer; transition: color .3s var(--ease); }
.footer__consent:hover{ color: var(--gold); }

@media (max-width: 600px){
  .consent{ left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
  .consent{ max-height: calc(100vh - 1.5rem); }
  .consent__actions .btn{ padding: .85rem .7rem; letter-spacing: .14em; }   /* a két gomb elférjen egymás mellett */
  body.consent-open .to-top{ opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce){
  .consent, .consent__switch, .consent__switch::after{ transition: none; }
}
@media print{
  .consent{ display: none !important; }
}

/* 404-es oldal — szöveg balra, a Travolta-mém jobbra, kicsit ferdén, mint egy kitűzött fotó */
/* A „404” nagy, vékony, talpas arany szám — nagyobb, mint az alatta álló cím */
.nf-code{ display: block; margin-bottom: .15em; font-family: var(--font-display); font-size: clamp(5.5rem, 3rem + 9vw, 10rem); font-weight: 200; line-height: .9; letter-spacing: -.01em; color: var(--gold); }
.nf-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.nf-meme{ position: relative; z-index: 1; margin: 0; padding: .6rem .6rem 0; background: var(--cream); border: 1px solid var(--line); box-shadow: 0 22px 44px -28px rgba(92, 87, 82, .55); transform: rotate(1.5deg); }
.nf-meme video{ display: block; width: 100%; height: auto; background: var(--clay); }
.nf-meme figcaption{ padding: .75rem .2rem .9rem; font-size: var(--fs-small); font-style: italic; line-height: 1.55; text-align: center; color: var(--ink-soft); }
@media (max-width: 900px){
  .nf-grid{ grid-template-columns: minmax(0, 1fr); }
  .nf-meme{ max-width: 24rem; }
}
/* Egyetlen képernyő, görgetés nélkül: az oldal pontosan a látható magasságot tölti ki (a lábléc
   nincs), a méretek a képernyő magasságához igazodnak, így nincs mit görgetni. Ha egy nagyon
   kicsi, régi telefonon mégsem férne el, ott inkább görgethető, mint hogy a gomb levágódjon. */
.page-404 .page-hero{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(.5rem, 2vh, 1.5rem));
  padding-bottom: clamp(1rem, 4vh, 2.5rem);
}
.page-404 .nf-grid{ width: 100%; }
.page-404 .nf-code{ font-size: clamp(4rem, 15vh, 10rem); }
.page-404 .page-hero__title{ margin-bottom: clamp(.5rem, 2vh, 1.2rem); }
.page-404 .page-hero .btn-row{ margin-top: clamp(1rem, 3.5vh, 2.25rem); }
.page-404 .nf-meme{ width: min(26rem, 58vh); justify-self: end; }
@media (max-width: 900px){
  .page-404 .page-hero{ align-items: flex-start; padding-bottom: clamp(.5rem, 2vh, 1.5rem); }
  .page-404 .nf-grid{ gap: clamp(1rem, 3vh, 2rem); }
  .page-404 .nf-code{ font-size: clamp(3.2rem, 10vh, 6rem); }
  .page-404 .page-hero .btn-row{ gap: .6rem; }
  .page-404 .page-hero .btn-row .btn{ width: auto; flex: 1 1 auto; padding: .95rem 1rem; letter-spacing: .12em; }   /* a két gomb egymás mellé fér */
  .page-404 .nf-meme{ width: min(100%, 26vh); justify-self: center; }
  .page-404 .nf-meme figcaption{ padding: .5rem .1rem .6rem; font-size: .8rem; }
}
/* Alacsony telefonképernyőn (pl. iPhone SE a böngésző sávjaival) még tömörebben */
@media (max-width: 900px) and (max-height: 600px){
  .page-404 .page-hero{ padding-top: calc(var(--header-h) + .25rem); }
  .page-404 .nf-code{ font-size: 8.5vh; }
  .page-404 .page-hero__title{ font-size: 1.75rem; margin-bottom: .4rem; }
  .page-404 .page-hero .lead{ font-size: var(--fs-small); line-height: 1.55; }
  .page-404 .page-hero .btn-row{ margin-top: .8rem; }
  .page-404 .nf-grid{ gap: .8rem; }
  .page-404 .nf-meme{ width: min(100%, 13rem); }
  .page-404 .nf-meme figcaption{ padding: .4rem .1rem .5rem; font-size: .72rem; line-height: 1.35; }
}

/* 17. ANIMÁCIÓK ----------------------------------------------------------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible{ opacity: 1; transform: none; }
[data-reveal][data-delay="1"]{ transition-delay: .12s; }
[data-reveal][data-delay="2"]{ transition-delay: .24s; }
[data-reveal][data-delay="3"]{ transition-delay: .36s; }
[data-reveal][data-delay="4"]{ transition-delay: .48s; }

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}

/* 18. RESZPONZÍV TÖRÉSPONTOK ---------------------------------------------- */
@media (max-width: 1080px){
  .footer__top{ grid-template-columns: 1fr 1fr; }
  .nav{ gap: 1.1rem; }
  .brand__tag{ font-size: calc(.54rem * var(--brand-scale, 1)); letter-spacing: .24em; }
}

@media (max-width: 940px){
  :root{ --header-h: 86px; }

  .nav{ display: none; }
  .burger{ display: flex; }
  .header__inner{ grid-template-columns: 1fr auto; gap: .75rem; }
  .header__col--left{ display: none; }
  .brand{ text-align: left; justify-self: start; }
  .header__col{ gap: .5rem; }
  .header.is-scrolled{ height: 76px; }
  .lang-switch{ padding: .3rem .15rem; }
  .lang-switch__btn{ padding: .15rem .4rem; }

  .split, .service, .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; }
  .split--media-narrow, .split--text-narrow, .split--sidebar{ grid-template-columns: 1fr; }
  .split--reverse .split__media,
  .service:nth-child(even) .service__media{ order: 0; }
  .split__body{ max-width: none; }

  .values{ grid-template-columns: minmax(0, 1fr); }
  .values__item{ grid-template-columns: 2.2rem minmax(0, 1fr); row-gap: .45rem; }
  .values__desc{ grid-column: 2; }

  /* A fotó a fejléc alá kerül, jobbra igazítva, teljes egészében (vágás nélkül); a szöveg
     alatta, normál folyásban — így a nyitókép magassága mindig a tartalomhoz igazodik, és a
     szöveg nyelvtől függetlenül sem csúszik rá a fotóra. A magasság a fotó arányából jön. */
  .hero{
    --hero-photo-h: min(83.34vw, 480px);          /* 1145 / 1374 */
    display: block;
    min-height: 0;
    padding-top: var(--header-h);
  }
  .hero__bg::after{
    background: linear-gradient(180deg, rgba(250, 247, 245, .55) 0%, rgba(250, 247, 245, .35) 35%, rgba(250, 247, 245, .92) 78%, rgba(250, 247, 245, .97) 100%);
  }
  .hero::after{
    background: linear-gradient(180deg,
      rgba(250, 247, 245, 0) 0%,
      rgba(250, 247, 245, 0) 44%,
      rgba(250, 247, 245, .8) 56%,
      rgba(250, 247, 245, .97) 68%,
      rgba(250, 247, 245, .99) 100%);
  }
  .hero__photo{
    position: relative;
    inset: auto;
    width: auto;
    height: var(--hero-photo-h);
    aspect-ratio: 1374 / 1145;
    max-width: none;
    margin: 0 0 0 auto;                              /* jobbra igazítva */
    /* Balra lágyan elhalványul; jobbra a képernyő széléig ér */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 14%, #000 30%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 14%, #000 30%);
  }
  .hero__photo-inner{
    /* Felül és alul kicsit halványít */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%);
  }
  .hero__photo img{ object-position: center; }
  .hero__inner{ margin-top: -2rem; }               /* a felcím épp csak ráér a fotó halványuló aljára */
  .media-stack{ padding-bottom: 3rem; padding-left: 2rem; }
}

@media (max-width: 640px){
  :root{ --fs-body: 1rem; --fs-body-serif: 1.06rem; }

  .brand__name{ font-size: 1.05rem; letter-spacing: .18em; }
  /* A két soros alcím telefonon is látszik: kisebb betű és szűkebb betűköz,
     hogy elférjen a hamburger menü és a nyelvváltó mellett. */
  .header .brand__tag{
    display: block;
    margin-top: .28rem;
    font-size: .52rem;
    line-height: 1.6;
    letter-spacing: .16em;
  }

  .grid--2, .grid--3, .grid--4, .stats{ grid-template-columns: 1fr; }
  .stats{ gap: 2.5rem; }
  .form__row{ grid-template-columns: 1fr; }
  .btn{ padding: .95rem 1.6rem; }
  .btn-row .btn{ width: 100%; }
  .footer__top{ grid-template-columns: 1fr; gap: 2.25rem; }
  .footer__bottom{ flex-direction: column; align-items: flex-start; }
  .footer__legal{ padding-right: 0; }
  .steps__item{ grid-template-columns: 1fr; gap: .6rem; }
  .media-stack{ padding-left: 0; padding-bottom: 0; }
  .media-stack__accent{ display: none; }
  .testimonial-nav{ gap: 1rem; }
  .marquee{ --marquee-duration: 26s; }
}

@media (max-width: 420px){
  /* Keskeny telefonon a láblécben is elférjen a két soros alcím */
  .footer__brand .brand__tag{ font-size: .5rem; letter-spacing: .2em; }
}

@media (max-width: 380px){
  .brand__name{ font-size: .95rem; letter-spacing: .14em; }
  .header .brand__tag{ font-size: .46rem; letter-spacing: .1em; }
}

/* 19. NYOMTATÁS ÉS AKADÁLYMENTESÍTÉS -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1; transform: none; }
  .sketch__mark path{ stroke-dashoffset: 0 !important; }
  .marquee__track{ animation: none; }
}

@media print{
  .header, .mobile-menu, .to-top, .cta-band, .marquee, .burger{ display: none !important; }
  body{ background: #fff; color: #000; font-size: 11pt; }
  .section{ padding-block: 1.5rem; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}