/* ============================================================
   Betűtípusok — saját kiszolgálás (nincs külső kérés)
   ------------------------------------------------------------
   The Seasons    a logó talpas betűje. Címsorok és a márkanév.
   VeryBerry Pro  a logó írott betűje. Csak aláírásszerű díszítés.
   Source Serif 4 kenyérszöveg. A The Seasons Didone-kontrasztja
                  18 px-en olvashatatlan volna (a vékony vonalak
                  eltűnnek), ezért folyó szöveghez egy képernyőre
                  tervezett, nyugodtabb talpas betű áll mellette.

   Mindhárom betű tartalmazza a teljes magyar ábécét (ő, ű is).
   A The Seasonsből csak a Regular és a Bold van beágyazva: a Light és
   a dőlt vágatot a stíluslap sehol nem kéri. Ha kellenének, a
   _tools/fonts.sh-ban egy sor visszaveszi őket.
   A fájlok latin + latin-ext karakterkészletre vannak szűkítve,
   a forrásuk és az újragenerálás módja: _tools/fonts.sh
   ============================================================ */

@font-face {
  font-family: 'The Seasons';
  src: url('assets/fonts/TheSeasons-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'The Seasons';
  src: url('assets/fonts/TheSeasons-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'VeryBerry Pro';
  src: url('assets/fonts/VeryBerry-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Változó betű: a 300–800 tartomány egyetlen fájlból jön */
@font-face {
  font-family: 'Source Serif 4';
  src: url('assets/fonts/SourceSerif4-Variable.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}

/* ============================================================
   Empátia — Otthoni Ápolás és Gondozás, Veszprém
   Design tokens. A színek a logóból származnak:
   puha rózsaszín, mauve monogram, meleg szürke, krém, meleg tinta.
   ============================================================ */

:root {
  /* --- Márkaszínek (a logóból) --- */
  --brand-logo:  #A2888A; /* a logó tintája, a névjegyről mérve */

  /* --- Rózsaszín skála — kiemelés, sosem nagy felület --- */
  --rose-50:  #FEF8F8;
  --rose-100: #FBECED;
  --rose-200: #F7DCDD;
  --rose-300: #F2C8CA; /* márka */
  --rose-400: #E7A9AC;
  --rose-500: #D9878B;
  --rose-600: #C46A6F;
  --rose-700: #A75257; /* olvasható rózsaszín: linkek, eyebrow */
  --rose-800: #854045;
  --rose-900: #6A3236;

  /* --- Mauve skála — a sötét horgony, gombok, címsorok --- */
  --mauve-50:  #F7F4F4;
  --mauve-100: #EDE7E7;
  --mauve-200: #DCD2D2;
  --mauve-300: #C2B4B5;
  --mauve-400: #A79798;
  --mauve-500: #8F7F80; /* márka */
  --mauve-600: #776869;
  --mauve-700: #5F5253; /* gombok háttere — fehér szöveggel AAA */
  --mauve-800: #483E3F;
  --mauve-900: #352D2E;

  /* --- Meleg szürke skála — kísérőszöveg, vonalak --- */
  --stone-50:  #F8F7F6;
  --stone-100: #F0EFEE;
  --stone-200: #E4E5E5;
  --stone-300: #CFD1D2;
  --stone-400: #B2B6B7; /* márka */
  --stone-500: #8E9394;
  --stone-600: #6E7374;
  --stone-700: #565A5B;
  --stone-800: #3F4243;
  --stone-900: #2B2E2E;

  /* --- Felületek --- */
  --surface-page:   #FFFDF9;
  --surface-card:   #FFFFFF;
  --surface-sunken: #FAF6F2;
  --surface-rose:   #FDF4F4;

  /* --- Szöveg --- */
  --text-strong:  #2B2422;
  --text-body:    #565A5B;
  --text-muted:   #6E7374;
  --text-link:    var(--rose-700);

  /* --- Vonalak --- */
  --border-subtle: #EBE5E1;
  --border-default: #DED6D2;
  --border-strong: var(--stone-400);
  --border-input: var(--stone-500);  /* 3,11:1 fehéren - WCAG 1.4.11 */

  /* --- Tipográfia --- */
  --font-display: 'The Seasons', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-script: 'VeryBerry Pro', 'Snell Roundhand', cursive;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* A The Seasons csak három vastagságban létezik. A kenyérbetű
     változó, ott bármelyik érték működik. */
  --display-regular: 400;
  --display-bold: 700;

  /* Nagyobb alapméret — sok látogató idősebb, vagy idős szülőnek keres
     segítséget. A talpas kenyérbetű x-magassága kisebb a korábbi
     Nunito Sans-énál, ezért egy fokkal feljebb vettük a méreteket. */
  --text-xs:   0.8125rem;  /* 13 */
  --text-sm:   0.9688rem;  /* 15.5 */
  --text-base: 1.125rem;   /* 18 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  1.8125rem;  /* 29 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  2.875rem;   /* 46 */

  --leading-tight: 1.18;
  --leading-normal: 1.65;
  --leading-relaxed: 1.8;

  --tracking-tight: -0.005em;
  --tracking-caps: 0.14em;  /* a logó szlogenjének ritkítása */

  /* --- Térköz --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --container-md: 820px;
  --container-lg: 1080px;
  --container-xl: 1200px;

  --control-sm: 40px;
  --control-md: 48px;
  --control-lg: 56px;

  /* --- Lekerekítés, árnyék — lágy, meleg tónusú, sosem fekete --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(74, 58, 56, 0.05);
  --shadow-sm: 0 1px 2px rgba(74, 58, 56, 0.05), 0 2px 8px rgba(74, 58, 56, 0.06);
  --shadow-md: 0 2px 4px rgba(74, 58, 56, 0.05), 0 10px 26px rgba(74, 58, 56, 0.09);
  --shadow-lg: 0 4px 10px rgba(74, 58, 56, 0.06), 0 22px 48px rgba(74, 58, 56, 0.12);

  --focus-szin: #483E3F;       /* mauve-800, 8,7:1 a lapon */
  --focus-szin-sotet: #FFFFFF; /* sötét sávokon fehér gyűrű */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 130ms;
  --dur-base: 220ms;
  --dur-slow: 340ms;
}

/* ============================================================
   Alapok
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Egy-egy hosszú összetett szó (pl. "adatkezelőként/adatfeldolgozóként")
     a legkeskenyebb telefonokon kilógatná a lapot. */
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

/* A The Seasons erős kontrasztú betű: nagy méretben a Regular a
   legszebb és jól olvasható, kis méretben viszont a hajszálvonalak
   elvékonyodnak, ezért a kisebb címsorok Bold vastagságúak. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--display-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: var(--display-bold); }
h4 { font-size: var(--text-lg); font-weight: var(--display-bold); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--rose-800); }

strong, b { font-weight: var(--weight-bold); color: var(--text-strong); }

:focus-visible {
  outline: 3px solid var(--focus-szin);
  outline-offset: 2px;
}
/* Sötét háttéren a sötét gyűrű nem látszana */
.section--mauve :focus-visible,
.ftr :focus-visible,
.cta-band :focus-visible { outline-color: var(--focus-szin-sotet); }
::selection { background: var(--rose-200); color: var(--text-strong); }

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

img { max-width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mauve-700); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0; font-weight: var(--weight-bold);
}
.skip-link:focus { left: 0; color: #fff; }

/* Ritkított nagybetűs felirat — a logó szlogenjének tipográfiája */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: var(--display-regular);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rose-700);
}

/* ============================================================
   Elrendezés
   ============================================================ */

.site { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding-inline: var(--space-6); }
.container--narrow { max-width: var(--container-md); }
.container--lg { max-width: var(--container-lg); }

.section { padding-block: clamp(3.25rem, 6.5vw, 5.5rem); }
.section--sunken { background: var(--surface-sunken); }
.section--mauve { background: var(--mauve-700); color: rgba(255,255,255,0.86); }
.section--mauve h2, .section--mauve h3 { color: #fff; }
.section--mauve .eyebrow { color: var(--rose-300); }

.section__head { max-width: 58ch; margin-bottom: var(--space-10); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { font-size: clamp(1.75rem, 3.4vw, 2.35rem); margin: 12px 0 12px; }
.section__head p { font-size: var(--text-lg); color: var(--text-muted); margin: 0; line-height: var(--leading-relaxed); }
.section--mauve .section__head p { color: rgba(255,255,255,0.82); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } }

/* ============================================================
   Fejléc
   ============================================================ */

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
/* A tördelés a látogató saját betű- és szóköz-beállításai miatt kell
   (WCAG 1.4.12): tágabb szedésnél a fejléc inkább két sorba fut,
   mintsem hogy a gomb kilógjon a képernyőről. Alapbeállítással
   sosem tördel. */
.hdr__bar { display: flex; align-items: center; gap: var(--space-6);
  min-height: 78px; flex-wrap: wrap; padding-block: 8px; }
.hdr__nav { flex-wrap: wrap; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__mark {
  width: 46px; height: 32px; flex: none;
  background-color: var(--brand-logo);
  -webkit-mask: url("assets/pm-monogram.svg") no-repeat center / contain;
  mask: url("assets/pm-monogram.svg") no-repeat center / contain;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
/* A logó felirata: „Empátia” The Seasons Regularban, alatta a ritkított
   nagybetűs szlogen — ugyanaz a betű, mint a nyomtatott névjegyen. */
.brand__name {
  font-family: var(--font-display); font-weight: var(--display-regular);
  font-size: 1.6rem; color: var(--brand-logo); letter-spacing: 0.005em;
}
.brand__tag {
  font-family: var(--font-display);
  font-size: 0.625rem; font-weight: var(--display-regular);
  letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap;
  color: var(--stone-600); margin-top: 6px;
}

/* 400 px alatt a ritkított szlogen egy sorban szélesebb, mint a kijelző,
   és vízszintes görgetést okozna. Ott két sorba törhet. */
@media (max-width: 400px) {
  .brand__tag { white-space: normal; }
}

.hdr__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hdr__link {
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  color: var(--mauve-700); padding: 9px 11px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hdr__link:hover { background: var(--rose-100); color: var(--rose-800); }
.hdr__link--active { color: var(--rose-800); background: var(--rose-100); }

.hdr__cta { margin-left: 10px; display: flex; align-items: center; gap: 8px; }
.hdr__burger { display: none; margin-left: auto; }
.hdr__mobile { display: none; }

/* A teljes fejléc (márkajelzés + ötelemű menü + két gomb) csak 1200 px-es
   tartalomsávban fér el. Alatta a menü a hamburgerbe kerül, de a telefonos
   gomb marad - az a legfontosabb művelet, és 941 px fölött van rá hely.
   Telefonon a hívás a hamburgermenüben és a hero-ban is elérhető. */
@media (max-width: 1199px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; }
  .hdr__cta .btn--primary { display: none; }

  /* A lenyíló panel ott is kell, ahol a hamburger megjelenik */
  .hdr__mobile.is-open {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px var(--space-6) 20px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-page);
  }
  .hdr__mobile .hdr__link { display: block; width: 100%; font-size: var(--text-base); padding: 14px; }
  .hdr__mobile-cta {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
  }

  /* A telefonos gomb és a hamburger együtt áll a jobb szélen. Pontosan
     egy auto margó kell hozzá, a csoport elejére: ha a hamburger is
     megtartaná a sajátját, a flexbox a szabad helyet egyenlően osztaná
     el a kettő között, és a gomb a fejléc közepére úszna. */
  .hdr__cta { margin-left: auto; }
  .hdr__burger { margin-left: 0; }
}

@media (max-width: 940px) {
  /* Telefonon a fejlécből a gomb is kikerül, a hívás a lenyíló panelban
     és a hero-ban érhető el. Ez a blokk szándékosan átfed az előzővel
     (nem 941-nél kezdődik), különben a kettő közé eső tört pixelnyi
     szélességek egyik szabályt sem kapnák meg. */
  .hdr__cta { display: none; }
  .hdr__burger { margin-left: auto; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero { position: relative; overflow: hidden; background: var(--surface-page); }
.hero__blob {
  position: absolute; z-index: 0; pointer-events: none;
  background: linear-gradient(150deg, var(--rose-200) 0%, var(--rose-100) 55%, var(--surface-page) 100%);
  filter: blur(2px);
}
.hero__blob--tr {
  top: -160px; right: -140px; width: 620px; height: 620px;
  border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%;
  opacity: 0.85;
}
.hero__blob--bl {
  bottom: -220px; left: -200px; width: 520px; height: 520px;
  border-radius: 44% 56% 63% 37% / 48% 57% 43% 52%;
  opacity: 0.5;
}

.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); line-height: 1.08; margin: 16px 0 20px; }
.hero__lead { font-size: clamp(1.0625rem, 1.9vw, 1.3rem); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media {
  /* Álló fotó fekvő keretben nem fér el: a kép már a teljes
     szélességet használja, ezért a fej fölé csak magasabb kerettel
     kerül levegő. A max-width tartja kordában — nélküle a magasabb
     arány megnövelné a képet, holott kisebbre kellett venni. Így a
     kép ~25%-kal kisebb, a keret magassága viszont marad a régi. */
  position: relative; width: 100%; max-width: 400px; margin-left: auto;
  aspect-ratio: 4 / 4.3;
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--mauve-200);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Parallax rétegek. A tényleges mozgatás az app.js-ben történik;
   mozgáscsökkentés esetén elmarad.

   Csak az eltolt díszítőelem kap will-change-et: a transform kompozitor-
   tulajdonság, ott van értelme előre réteget kérni. A képeknél az
   object-position mozog, ami úgyis újrafestést igényel - a will-change
   ott csak fölöslegesen foglalna memóriát. */
[data-px] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  [data-px] { will-change: auto; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  /* Egy hasábban a kép középre kerül, és lehet valamivel nagyobb. */
  .hero__media { aspect-ratio: 4 / 4; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 100%; }
}

/* Belső oldalak fejléce */
.pagehead { position: relative; overflow: hidden; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); }
.pagehead__inner { position: relative; z-index: 1; padding-block: clamp(2.5rem, 5vw, 4rem); max-width: 62ch; }
.pagehead h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 12px 0 14px; }
.pagehead p { font-size: var(--text-lg); color: var(--text-muted); margin: 0; line-height: var(--leading-relaxed); }

/* Bizalmi sáv a hero alatt */
.factbar { border-block: 1px solid var(--border-subtle); background: var(--surface-card); }
.factbar__row { display: flex; align-items: stretch; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-5); }
.fact { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; }
.fact__icon { color: var(--rose-500); flex: none; display: flex; }
.fact__k { font-family: var(--font-display); font-weight: var(--display-bold); font-size: var(--text-base); color: var(--text-strong); margin: 0; line-height: 1.25; }
.fact__v { font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 0; line-height: 1.4; }

/* ============================================================
   Gombok
   ============================================================ */

.btn {
  --_bg: var(--mauve-700); --_fg: #fff; --_bd: transparent; --_bgh: var(--mauve-800);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: var(--weight-bold);
  border: 1.5px solid var(--_bd); border-radius: var(--radius-pill);
  background: var(--_bg); color: var(--_fg); cursor: pointer; text-decoration: none;
  white-space: nowrap; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--_bgh); color: var(--_fg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--focus-szin); outline-offset: 2px; }
.btn--primary:focus-visible { outline-color: var(--focus-szin-sotet); outline-offset: 3px; }
.btn--sm { height: var(--control-sm); padding: 0 18px; font-size: var(--text-sm); }
.btn--lg { height: var(--control-lg); padding: 0 30px; font-size: var(--text-lg); }
.btn--block { display: flex; width: 100%; }
.btn--primary { --_bg: var(--mauve-700); --_fg: #fff; --_bgh: var(--mauve-800); }
.btn--outline { --_bg: transparent; --_fg: var(--mauve-700); --_bd: var(--border-default); --_bgh: var(--mauve-50); }
.btn--outline:hover { border-color: var(--mauve-300); }
.btn--onmauve { --_bg: #fff; --_fg: var(--mauve-800); --_bgh: var(--rose-100); }
.btn--onmauve-outline { --_bg: transparent; --_fg: #fff; --_bd: rgba(255,255,255,0.45); --_bgh: rgba(255,255,255,0.12); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-md); height: var(--control-md);
  border: 1.5px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--mauve-700); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.iconbtn:hover { background: var(--rose-100); }

/* ============================================================
   Kártyák
   ============================================================ */

.card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6);
}

.why { display: flex; flex-direction: column; gap: 14px; }
.why__icon {
  width: 54px; height: 54px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--rose-100); color: var(--rose-700); flex: none;
}
.why h3 { font-size: var(--text-lg); margin: 0; }
.why p { font-size: var(--text-sm); color: var(--text-body); margin: 0; line-height: var(--leading-normal); }

.svc-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-6); text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.svc-card:hover { box-shadow: var(--shadow-md); border-color: var(--rose-300); transform: translateY(-2px); }
.svc-card__icon {
  width: 54px; height: 54px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--rose-100); color: var(--rose-700);
}
.svc-card__icon--mauve { background: var(--mauve-100); color: var(--mauve-700); }
.svc-card h3 { font-size: var(--text-xl); margin: 0; }
.svc-card p { font-size: var(--text-sm); color: var(--text-body); margin: 0; line-height: var(--leading-normal); }
.svc-card__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  color: var(--rose-700); font-weight: var(--weight-bold); font-size: var(--text-sm);
}

/* ============================================================
   Lépések
   ============================================================ */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step__num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--rose-300); color: var(--mauve-800);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--display-bold); font-size: 1.15rem;
  margin-bottom: 16px;
}
.step h3 { font-size: var(--text-lg); margin: 0 0 8px; }
.step p { font-size: var(--text-sm); color: var(--text-body); margin: 0; line-height: var(--leading-normal); }
.section--mauve .step p { color: rgba(255,255,255,0.82); }

/* ============================================================
   Idézet
   ============================================================ */

.quote { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .quote { grid-template-columns: 1fr; } }
.quote__media { width: 100%; aspect-ratio: 4 / 4.6; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); }
.quote__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .quote__media { aspect-ratio: 16 / 12; } }
.quote__mark { color: var(--rose-300); display: block; margin-bottom: -8px; }
.quote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: var(--display-regular);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.45;
  color: var(--text-strong); letter-spacing: var(--tracking-tight);
}
/* A név aláírásszerűen, a logó írott betűjével — a beosztás alatta
   marad a kenyérbetűben, hogy olvasható legyen. */
.quote__cite {
  display: block; margin-top: 22px; font-style: normal;
  font-family: var(--font-script); font-weight: 400;
  font-size: 1.9rem; line-height: 1.1; color: var(--brand-logo);
}
.quote__cite span {
  display: block; margin-top: 8px;
  font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: var(--weight-regular); color: var(--text-muted);
}

/* ============================================================
   Listák
   ============================================================ */

.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-normal); }
.ticks li svg { color: var(--rose-500); flex: none; margin-top: 4px; }
.section--mauve .ticks li { color: rgba(255,255,255,0.86); }
.section--mauve .ticks li svg { color: var(--rose-300); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--mauve-700); background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  padding: 8px 16px;
}
/* ============================================================
   Szolgáltatások oldal
   ============================================================ */

.svc-group { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--border-subtle); }
.svc-group:first-of-type { border-top: 0; padding-top: 0; }
.svc-group__grid { display: grid; grid-template-columns: 330px 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 920px) { .svc-group__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.svc-group__aside { position: sticky; top: 104px; }
@media (max-width: 920px) { .svc-group__aside { position: static; } }
.svc-group__icon { width: 62px; height: 62px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--rose-100); color: var(--rose-700); }
.svc-group__aside h2 { font-size: var(--text-2xl); margin: 0 0 14px; }
.svc-group__aside p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; }
.svc-items { display: flex; flex-direction: column; gap: var(--space-5); }
.svc-item { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.svc-item:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-item h3 { font-size: var(--text-lg); margin: 0 0 6px; }
.svc-item p { margin: 0; color: var(--text-body); line-height: var(--leading-relaxed); }

/* ============================================================
   Árak
   ============================================================ */

.price-table { display: flex; flex-direction: column; }
.price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-5); padding: 16px 0; border-bottom: 1px solid var(--border-subtle);
}
/* A min-width:0 nélkül a megnevezés nem zsugorodhat a tartalma alá, és a
   nem törhető ár kilógatná a sort a legkeskenyebb telefonokon. */
.price-row__label { min-width: 0; }
/* Ha a látogató tágabb betűközt állít be (WCAG 1.4.12), a legkeskenyebb
   kijelzőkön az ár inkább a megnevezés alá csússzon. */
@media (max-width: 480px) {
  .price-row { flex-wrap: wrap; }
}
.price-row:last-of-type { border-bottom: 0; }
.price-row__label { font-size: var(--text-base); color: var(--text-strong); font-weight: var(--weight-semibold); }
.price-row__note { display: block; font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-regular); margin-top: 3px; line-height: 1.45; }
.price-row__price {
  /* Az ár a legfontosabb adat a sorban. A The Seasons hajszálvonalai
     miatt a számok halványabbnak látszanának a megnevezésnél, ezért
     itt a kenyérbetű marad. */
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); color: var(--mauve-700); white-space: nowrap;
}
.price-foot { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); margin: var(--space-6) 0 0; }

/* ============================================================
   Rólunk
   ============================================================ */

.about-hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; } }
.about-hero__media { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .about-hero__media { aspect-ratio: 4 / 3.4; } }
.about-lead {
  font-family: var(--font-display); font-weight: var(--display-regular);
  font-size: clamp(1.2rem, 2.3vw, 1.5rem); line-height: 1.5;
  color: var(--text-strong); letter-spacing: var(--tracking-tight);
}
.prose { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); }
.prose h3 { margin-top: var(--space-8); }
.prose p:last-child { margin-bottom: 0; }

.cv { display: flex; flex-direction: column; }
.cv__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-5); padding: 15px 0; border-bottom: 1px solid var(--border-subtle); }
.cv__row:last-child { border-bottom: 0; }
@media (max-width: 620px) { .cv__row { grid-template-columns: 1fr; gap: 4px; } }
.cv__when { font-family: var(--font-body); font-weight: var(--weight-bold); color: var(--rose-700); font-size: var(--text-sm); padding-top: 2px; }
.cv__what strong { display: block; color: var(--text-strong); font-size: var(--text-base); }
.cv__what span { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

.story { display: flex; flex-direction: column; gap: var(--space-5); }
.story__item { background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--rose-300); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.story__item h3 { font-size: var(--text-lg); margin: 0 0 8px; }
.story__item p { margin: 0; color: var(--text-body); line-height: var(--leading-relaxed); font-size: var(--text-sm); }

.motto { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .motto { grid-template-columns: 1fr; } }
.motto__item {
  /* A The Seasons dőlt vágata kalligrafikus és nehezen olvasható, ezért
     itt az álló Regular áll — ugyanaz a betű, csak nem dőlten. */
  font-family: var(--font-display); font-weight: var(--display-regular);
  font-size: var(--text-xl); line-height: 1.55; color: var(--text-strong);
  background: var(--surface-rose); border-radius: var(--radius-lg); padding: var(--space-6);
}
.motto__item span { display: block; font-style: normal; font-size: var(--text-xs); color: var(--text-muted); margin-top: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

.figure { margin: 0; }
/* height:auto kell, mert az <img> width/height attribútuma prezentációs
   tippként fix magasságot adna, és torzítaná a képet */
.figure img { width: 100%; height: auto; border-radius: var(--radius-xl); display: block; box-shadow: var(--shadow-md); }
.figure figcaption { font-size: var(--text-sm); color: var(--text-muted); margin-top: 12px; text-align: center; }

/* A kapcsolat oldal oldalsó portréja ne nyúljon el — fix arány, levágva */
.figure--crop img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 22%; }

/* ============================================================
   Kapcsolat
   ============================================================ */

.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: var(--space-5); }
/* A min-width:0 nélkül a flex-elem nem zsugorodhat a tartalma alá, és a
   szóköz nélküli e-mail-cím kilógatná a lapot a legkeskenyebb telefonokon. */
.contact-item { display: flex; gap: 15px; align-items: flex-start; }
.contact-item > div { min-width: 0; }
.contact-item__v { overflow-wrap: anywhere; }
.contact-item__icon {
  width: 46px; height: 46px; border-radius: var(--radius-md); flex: none;
  background: var(--rose-100); color: var(--rose-700);
  display: flex; align-items: center; justify-content: center;
}
.contact-item__k { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 3px; }
.contact-item__v { font-size: var(--text-lg); color: var(--text-strong); font-weight: var(--weight-bold); margin: 0; text-decoration: none; display: block; }
a.contact-item__v:hover { color: var(--rose-700); }
.contact-item__note { font-size: var(--text-sm); color: var(--text-muted); margin: 4px 0 0; line-height: 1.5; }

.alert { display: flex; gap: 13px; align-items: flex-start; border-radius: var(--radius-md); padding: 16px 18px; border: 1px solid transparent; }
.alert__icon { flex: none; margin-top: 2px; }
.alert__body { font-size: var(--text-sm); color: var(--text-body); line-height: var(--leading-normal); }
.alert__title { font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: 3px; }
.alert--info { background: var(--mauve-50); border-color: var(--mauve-200); }
.alert--info .alert__icon { color: var(--mauve-600); }
.alert--rose { background: var(--surface-rose); border-color: var(--rose-200); }
.alert--rose .alert__icon { color: var(--rose-600); }
.alert--success { background: #F1F7F2; border-color: #C9E0CE; }
.alert--success .alert__icon { color: #3F7A4C; }
.alert--warn { background: #FDF2F2; border-color: #EDC9C9; }
.alert--warn .alert__icon { color: #A83232; }

/* Csak képernyőolvasónak szánt szöveg. Nem display:none, mert azt a
   felolvasó sem látja; a lapon viszont nem foglal helyet. */
.csak-olvasonak {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.form-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.field__req { color: var(--rose-600); margin-left: 2px; }
.field__hint { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
.input, .textarea, .select {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-strong); background: var(--surface-card);
  /* A keret az egyetlen jel, ami a mezőt megkülönbözteti a lap
     hátterétől, ezért legalább 3:1 kontraszt kell hozzá. */
  border: 1.5px solid var(--border-input); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input, .select { height: var(--control-md); padding: 0 15px; }
.select { appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236E7374' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.textarea { min-height: 130px; resize: vertical; padding: 13px 15px; line-height: var(--leading-normal); }
/* A mintaszöveg is szöveg: 4,5:1 kell neki (eddig 2,05:1 volt) */
.input::placeholder, .textarea::placeholder { color: var(--stone-600); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: 3px solid var(--focus-szin); outline-offset: 1px;
  border-color: var(--mauve-500);
}

/* ---------- Facebook CTA (kapcsolat oldal) ---------- */

.fb-cta {
  display: flex; align-items: center; gap: 15px; text-decoration: none;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: var(--shadow-xs);
  color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fb-cta:hover { border-color: var(--mauve-300); box-shadow: var(--shadow-sm); transform: translateY(-1px); color: var(--text-strong); }
.fb-cta__icon { flex: none; display: flex; color: #1877f2; }
.fb-cta__text { display: flex; flex-direction: column; line-height: 1.35; flex: 1; }
.fb-cta__text strong { font-size: var(--text-base); }
.fb-cta__text span { font-size: var(--text-sm); color: var(--text-muted); }
.fb-cta > svg:last-child { color: var(--mauve-500); flex: none; }

.fb-or {
  display: flex; align-items: center; text-align: center; gap: 14px;
  color: var(--text-muted); font-size: var(--text-sm); margin: 22px 0;
}
.fb-or::before, .fb-or::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* ============================================================
   CTA sáv
   ============================================================ */

.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.65rem, 3.2vw, 2.25rem); margin: 0 0 10px; }
.cta-band p { margin: 0; font-size: var(--text-lg); }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   Lábléc
   ============================================================ */

.ftr { background: var(--mauve-800); color: rgba(255,255,255,0.72); padding-block: var(--space-12) var(--space-8); margin-top: auto; }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: var(--space-8); }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr .brand__name { color: var(--rose-300); }
.ftr .brand__mark { background-color: var(--rose-200); }
.ftr .brand__tag { color: rgba(255,255,255,0.62); } /* 5,12:1 */
.ftr__brand { margin-bottom: 16px; }
.ftr p { font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0 0 8px; }
.ftr h2 { color: #fff; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--weight-bold); margin: 0 0 16px; }
.ftr a { color: rgba(255,255,255,0.86); }
.ftr a:hover { color: var(--rose-200); }
.ftr__links { display: flex; flex-direction: column; gap: 10px; font-size: var(--text-sm); }
.ftr__contact a { font-weight: var(--weight-bold); color: var(--rose-200); }
.ftr__bottom {
  border-top: 1px solid rgba(255,255,255,0.13); margin-top: var(--space-10); padding-top: var(--space-6);
  font-size: var(--text-xs); color: rgba(255,255,255,0.62);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  align-items: center;
}
/* A záró sor hivatkozásai 17 px magasak voltak. A WCAG 2.2 legalább
   24x24 px-es célterületet vár, hogy remegő kézzel vagy érintőképernyőn
   is el lehessen találni őket. */
.ftr__bottom a { display: inline-block; padding: 5px 2px; }

/* ============================================================
   Süti-sáv
   ============================================================ */

.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface-card); border-top: 1px solid var(--border-default);
  box-shadow: 0 -8px 28px rgba(74, 58, 56, 0.1); padding: 18px var(--space-6);
}
.cc-banner[hidden] { display: none; }
.cc-inner { max-width: var(--container-lg); margin: 0 auto; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.cc-text { flex: 1; min-width: 260px; font-size: var(--text-sm); color: var(--text-body); line-height: var(--leading-normal); margin: 0; }
.cc-actions { display: flex; gap: 10px; flex: none; }
@media (max-width: 620px) { .cc-actions { width: 100%; } .cc-actions .btn { flex: 1; } }

/* ============================================================
   Jogi oldal
   ============================================================ */

.legal h2 { font-size: var(--text-xl); margin: var(--space-10) 0 var(--space-3); }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: var(--text-base); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li { color: var(--text-body); line-height: var(--leading-relaxed); }
.legal ul { padding-left: 1.3em; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal__note { font-size: var(--text-sm); color: var(--text-muted); }

/* ============================================================
   Animáció — az opacitás mindig 1, csak finom elmozdulás
   ============================================================ */

.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: em-rise var(--dur-slow) var(--ease-out) both; }
  @keyframes em-rise { from { transform: translateY(14px); } to { transform: none; } }
}

@media print {
  .hdr, .ftr, .cc-banner, .hero__blob { display: none !important; }
  body { background: #fff; }
}