/*
 * home.css — csak a főoldal egyedi CSS-e (forrás: index.html).
 * A közös alap a base.css-ben; itt a főoldali hero-felülírások, a szekció-glow-k
 * és az index-only komponensek (callout) élnek.
 */

/* Főoldali (nagy) hero — base a kisebb aloldali értékeket hordozza (index.html:98) */
.hero { min-height: 660px; }
.hero-overlay { background: linear-gradient(105deg, rgba(30,33,120,.9) 0%, rgba(35,60,150,.78) 42%, rgba(17,150,140,.58) 100%); } /* index.html:101 */
.hero .wrap { padding-top: 108px; padding-bottom: 108px; } /* index.html:105 */
.hero h1 { max-width: 20ch; } /* index.html:108 */
.hero .lead { max-width: 46ch; } /* index.html:110 */
/* a hero eyebrow a globális .eyebrow.light-ot használja (base.css) */

/* Szekció-glow-k (index.html:131) */
#miert::before { width: 640px; height: 640px; right: -240px; top: -220px;
  background: radial-gradient(circle, rgba(58,63,214,.13), transparent 68%); }
.section.alt:not(#blog)::before { width: 460px; height: 460px; left: -190px; top: -150px;
  background: radial-gradient(circle, rgba(19,179,154,.14), transparent 70%); }
.section.alt:not(#blog)::after { display: block; width: 420px; height: 420px; right: -150px; bottom: -200px;
  background: radial-gradient(circle, rgba(58,63,214,.09), transparent 70%); }
#rolam::before { width: 560px; height: 560px; right: -220px; bottom: -260px;
  background: radial-gradient(circle, rgba(58,63,214,.11), rgba(19,179,154,.05) 50%, transparent 72%); }
#konyv::before { width: 760px; height: 760px; left: 50%; top: -360px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(19,179,154,.11), rgba(58,63,214,.055) 45%, transparent 65%); }
#blog::before { width: 400px; height: 400px; right: -130px; top: -130px;
  background: radial-gradient(circle, rgba(58,63,214,.12), transparent 70%); }
#blog::after { display: block; width: 360px; height: 360px; left: -150px; bottom: -150px;
  background: radial-gradient(circle, rgba(19,179,154,.11), transparent 70%); }

/* Callout (index.html:186) — a komponens a base.css-ben él (3 sablon használja),
   itt csak a főoldali, valamivel nagyobb bekezdés-méret marad felülírásként. */
.callout p { font-size: 18px; }

/* Lépések alatti CTA (index.html:424 inline style kiváltása) */
.steps-cta { text-align: center; margin-top: 48px; }

/* Figure margin-reset (a design inline style-jának kiváltása) */
figure.split-media { margin: 0; }

/* ==== Tulajdonosi review-finomítások (2026-07-23) ==== */
/* #1 — a "bukás oka" (#miert) kép magasabb desktopon: a 4/3 helyett ~négyzetes,
   így közel a szövegoszlop magasságához (mobilon marad a base 4/3). */
@media (min-width: 821px) {
  #miert .split-media img { aspect-ratio: 1 / 1; }
}
/* #3 — "Ez ismerősen hangzik?" felsorolás kisebb + szűkebb sortáv (csak a főoldalon;
   a coaching/könyv checklist a base 18px/16px értéket tartja). */
.checklist li { font-size: 17px; padding: 14px 0; }
/* A kérdés-jellegű felsorolás ikonjai: körben kérdőjel (circle-help), arculati sötétkék. */
.checklist svg { color: var(--blue); }

/* A feliratkozás (hírlevél) szekció-cím stílusa a base.css .signup blokkjába került
   (a szolgáltatásaim oldal is használja). */

/* ==== Hero + stat-sáv: KÖZÖS, folytatólagos parallax háttér ====
   A hero és a százalékos sáv EGYETLEN háttérképet oszt meg (.hero-stats > .hero-bg),
   így a hero parallax háttere folytatólagosan átúszik a százalékos rész mögé is.
   A stat-sáv NEM külön doboz: egy 100% széles, színes, ÁTTETSZŐ üvegsáv (backdrop-blur),
   amin átdereng a közös háttér. Kompaktság: ugyanaz, mint az eredeti tömör sávé (54px). */
.hero-stats { position: relative; overflow: hidden; }
.hero-stats .hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 138%; z-index: 0; will-change: transform; }
.hero-stats .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-stats .hero { overflow: visible; z-index: 1; }   /* a közös bg-t a wrapper klippeli, nem a hero */
.hero-stats .stats { position: relative; z-index: 1; } /* a backdrop-blur a mögötte lévő közös bg-t mossa */

/* 100% széles, színes, áttetsző üvegsáv (mint az eredeti tömör gradiens sáv, csak átdereng) */
.stats {
  color: #fff;
  /* Sötétebb, mint a mögötte lévő (közös) háttérkép: egyenletes sötétítő réteg
     a színes üveg-tint fölött. Nincs világos szeparátor a tetején. */
  background:
    linear-gradient(0deg, rgba(10,12,34,.60), rgba(10,12,34,.60)),
    linear-gradient(112deg, rgba(58,63,214,.44) 0%, rgba(47,104,200,.36) 48%, rgba(19,179,154,.44) 100%);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}
.stats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 54px var(--edge); }
.stat { position: relative; padding-left: 26px; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,.32); }
.stat-head { display: flex; align-items: center; gap: 12px; }
/* Ikon-tónusok: az arculati hideg palettához hangolt meleg pasztellek (nem harsány narancs/sárga) */
.stat-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; }
.stat-ic svg { width: 19px; height: 19px; }
.stat-ic.loss { color: #ffb38a; }
.stat-ic.zero { color: #ffe08a; }
.stat-ic.live { color: #fff; }
.stat-ic.rich { color: #8ff3d8; } /* a hero-cím .hl kiemelés-színe */
.stat-num { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 3.2vw, 42px); line-height: 1; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 12px rgba(10,12,40,.32); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 15.5px; color: rgba(255,255,255,.92); margin-top: 10px; }
@media (max-width: 720px) {
  .stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .stat { padding-left: 0; }
  .stat + .stat::before { display: none; }
}