/* ---------- Betűtípus: Poppins, saját tárhelyről (2026-11-01; a Google Fonts helyett, az adatkezelési tájékoztató szerint) ----------
   Forrás: Google Fonts, OFL-licenc; latin és bővített latin (ő, ű) karakterkészlet, 300–900 vastagság. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/poppins-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/poppins-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/poppins-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/poppins-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/poppins-900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/poppins-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =========================================================
   Richtofit – stíluslap (2026)
   Márkaszínek: piros #D7282F · sötétkék #032169 · világoskék #0D97D0
   Betű: Poppins. Mozgás: finom, okkal mozgó elemek, csak transform, opacity és clip-path (lásd a „Mozgás” szakaszt a fájl végén);
   csökkentett mozgásnál (prefers-reduced-motion) semmi nem mozog.
   ========================================================= */

:root {
  --red: #D7282F;
  --red-ink: #B3141C;          /* piros szöveghez világos alapon (AA kontraszt) */
  --navy: #032169;
  --navy-2: #1E3363;
  --navy-deep: #021645;
  --sky: #0D97D0;
  --ice: #E0EEFF;              /* világos címkék, sötét alapon szöveg */
  --bg-1: #EEF5FC;
  --bg-2: #E3EFFA;
  --bg-3: #D6E7F7;
  --bg-4: #C4DCF2;
  --paper: #FFFFFF;
  --text: #1E2A44;
  --text-soft: #46526B;
  --line: #D3DFEC;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 12px 34px rgba(3, 33, 105, .10);
  --shadow-sm: 0 4px 14px rgba(3, 33, 105, .08);
  --wrap: 1224px;
  --gutter: 20px;
  --header-h: 72px;
  --fokusz: var(--navy);       /* fókuszkeret világos alapon (legalább 3:1); sötét és piros sávokon fehér, lásd lent */
  /* mozgás (a „Mozgás” szakasz és a termekoldal.css használja) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* gyors indulás, puha megállás */
  --ease-rugo: cubic-bezier(.34, 1.56, .64, 1);  /* enyhe túllendülés (a pont „pattan”) */
  --mozgas-rovid: .18s;                          /* visszajelzés: gomb, link */
  --mozgas-kozep: .6s;                           /* megjelenés görgetéskor */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg-1);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; color: var(--navy); text-wrap: balance; }
p { margin: 0; }
p + p { margin-top: 1em; }
:focus-visible { outline: 3px solid var(--fokusz); outline-offset: 3px; border-radius: 6px; }
/* sötét és piros alapon fehér fókuszkeret (a sötétkék ott nem látszana; a világoskék a pirosan 1,5:1 lenne) */
.site-header, .site-footer, .newsletter, .cta-band, .hero, .tile { --fokusz: #fff; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--navy); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Gombok ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 0 26px;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 15px/1 "Poppins", Arial, sans-serif; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-ink); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline-light { border-color: #fff; color: #fff; background: transparent; }
.btn-outline-light:hover { background: #fff; color: var(--red-ink); }
.btn-sm { min-height: 36px; padding: 0 18px; font-size: 13.5px; }
.btn-arrow::after { content: "→"; font-weight: 700; }

/* ---------- Fejléc ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy); }
.header-in { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.logo { display: inline-flex; flex: none; }
.logo img { width: 130px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a { color: var(--ice); text-decoration: none; font-weight: 500; font-size: 16px; padding: 8px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.main-nav a[aria-current] { color: #fff; border-bottom-color: var(--red); }
.nav-toggle { display: none; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; padding: 11px; }
.nav-toggle span { display: block; height: 2.5px; background: #fff; border-radius: 2px; margin: 5px 0; }

/* ---------- Szakaszok ---------- */
.section { padding-block: 88px; }
.section-tight { padding-block: 56px; }
.bg-1 { background: var(--bg-1); }
.bg-2 { background: var(--bg-2); }
.bg-3 { background: var(--bg-3); }
.bg-grad-a { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%); }
.bg-grad-b { background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-4) 100%); }
/* folytonos égbolt-lépcső: minden sáv ott kezdődik, ahol az előző véget ért */
.sky-1 { background: linear-gradient(180deg, #EEF5FC 0%, #E3EFFA 100%); }
.sky-2 { background: linear-gradient(180deg, #E3EFFA 0%, #D3E5F6 100%); }
.sky-3 { background: linear-gradient(180deg, #D3E5F6 0%, #C3DBF2 100%); }
.sky-4 { background: linear-gradient(180deg, #C3DBF2 0%, #B4D1EE 100%); }
.sky-5 { background: linear-gradient(180deg, #B4D1EE 0%, #A6C8EA 100%); }
.section-title { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.01em; }
.section-title.center { text-align: center; }
.lead { font-size: 18px; color: var(--text-soft); max-width: 62ch; margin-top: 16px; }
.accent { color: var(--red-ink); }
.kicker { display: block; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; color: var(--red-ink); margin-top: 8px; }

/* ---------- Nyitókép ----------
   Asztali kép (2026-10-28, hero/fooldal-gol-asztali, 3168 × 1344, 21:9): a család és a kapu a kép 53–99%-a között (vízszintesen),
   a felemelt kezektől a labdáig a 27–95% között (függőlegesen); a bal oldal üres ég a szövegnek. A nyitókép 40vw-nél nem
   alacsonyabb, így széles képernyőn is legfeljebb ~7% vágódik le a kép magasságából, és a 95% 70%-os igazítással a láb, a labda
   és a kapu 768 px-től 2560 px-ig mindig látszik (korábban a 16:9-es kép 1440–1920 px-en térdnél vágódott).
   A sötétkék réteg balról a cím mögé, alul csak a bal sarokba (a szöveg mögé) kerül; a jobb oldali családot nem sötétíti. */
.hero { position: relative; min-height: max(clamp(560px, 72vh, 760px), 40vw); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy-deep); }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero picture img { object-fit: cover; object-position: 95% 70%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 22, 69, .62) 0%, rgba(2, 22, 69, .28) 42%, rgba(2, 22, 69, 0) 68%), radial-gradient(62% 70% at 0% 100%, rgba(2, 22, 69, .45), rgba(2, 22, 69, 0)); }
.hero-in { position: relative; z-index: 1; padding-bottom: clamp(56px, 9vh, 96px); }
.hero-title { font-size: clamp(50px, 7.2vw, 106px); font-weight: 900;   /* 2026-10-28: ~14%-kal kisebb (8,4vw / 124 px volt), hogy a cím a szereplők előtt érjen véget (a kivitelező kérése) */ line-height: .95; letter-spacing: -.02em; color: var(--red); text-shadow: 0 2px 30px rgba(2, 22, 69, .35); }
.hero-title .pont { color: var(--red); }
.hero-sub { margin-top: 22px; max-width: 420px; font-size: 19px; line-height: 1.55; font-weight: 400; }
.hero-cta { margin-top: 28px; }

/* ---------- Számok és jelvények ----------
   Egy fehér panel közvetlenül a nyitókép alatt (a kártyák lekerekítésével): fent a három szám hajszálvonallal elválasztva,
   alatta a három jelvény (asztalon a számok oszlopai alatt egy sorban, mobilon balra zárt listában), az ikon halvány körben.
   Felpörgés (jóváhagyott kivétel a mozgásszabály alól, 2026-10-18): amikor a számsor legalább 60%-a látszik, a számok 0-ról a
   végértékig számolnak, utána a jelvények egyenként érkeznek. A számolás JavaScript-szövegcsere, nem CSS-animáció (main.js,
   „Számok felpörgése”): csak csökkentett mozgás nélkül és IntersectionObserverrel fut, a HTML-ben a végérték áll (JavaScript
   nélkül és a szövegellenőrzőnek is). Futás közben a végérték átlátszón a helyén marad (tartja a méretet, nincs elmozdulás, és a felolvasó
   ezt olvassa), fölötte aria-hidden rétegben pörögnek a jegyek; a végén a <b> újra sima szöveg. A Poppinsban nincs táblázatos
   számjegy (a tabular-nums hatástalan), ezért a többjegyű szám jegyei egyforma széles helyen állnak: pörgés közben nem rángat. */
.stats-band { position: relative; z-index: 1; background: var(--bg-1); padding-block: 44px 0; }   /* a panel árnyéka a következő szakasz fölé rajzolódik (nem vágja le) */
.stats-panel { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.stats .stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 30px 36px 26px; }
.stats .stat + .stat { border-left: 1px solid var(--line); }
.stat b { font-size: clamp(44px, 4.6vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.stat > span { font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--red-ink); }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.badge { display: flex; align-items: center; gap: 14px; padding: 20px 36px 22px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--navy); overflow-wrap: break-word; }
.badge svg { width: 44px; height: 44px; flex: none; padding: 11px; border-radius: 50%; background: var(--bg-2); stroke: var(--red); }
/* felpörgés közben (a .porog osztályt a main.js teszi rá és veszi le): a méretet csak a végérték adja, a pörgő réteg
   jobbra zárva fölötte lebeg (a szélesebb „0” balra kilóghat, a helyfoglalás nem változik) */
.stat b.porog { position: relative; }
.szam-vegso { color: transparent; }
.szam-futo { position: absolute; top: 0; right: 0; white-space: nowrap; }
.szam-futo-kozep { right: auto; left: 50%; transform: translateX(-50%); }   /* egyjegyű: a jegy közepe a végérték közepén */
.szam-jegy { display: inline-block; width: .64em; text-align: center; }   /* a Poppins félkövér számjegyei .55–.66em szélesek */
/* nagy kontrasztú módban a böngésző az átlátszó színt is rendszerszínre cserélné: a végérték a pörgő jegyekre csúszna */
@media (forced-colors: active) { .szam-vegso { forced-color-adjust: none; color: transparent; } }
/* 901–1180 px: keskenyebb oszlopok, kisebb belső margó (a számok és az ikonok bal széle egy vonalban). 1070 px alatt az ikon a
   szöveg mellett már nem fér el (az „Olimpiai bajnokok használták” két sorba törne, a másik kettő nem): a szöveg fölé kerül,
   mint 900 px alatt, így mindhárom felirat egy sorban marad */
@media (max-width: 1180px) {
  .stats .stat { padding-inline: 28px; }
  .badge { padding-inline: 28px; }
}
@media (max-width: 1070px) {
  .badge { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 18px 22px; }
  .badge svg { width: 40px; height: 40px; padding: 10px; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  /* A számok betöltéskor egy pillanatra rejtve indulnak (mint a nyitókép szövege), hogy a main.js addigra 0-ra állíthassa őket:
     a végérték ne villanjon fel a pörgés előtt (lassú hálózaton, amíg a szkript töltődik). JavaScript nélkül a végérték úszik be. */
  @keyframes szam-be { from { opacity: 0; } }
  .stat b { animation: szam-be .35s var(--ease-out) .25s backwards; }
  /* A jelvények egyenként, a számok indulása után úsznak be. A kezdőállapot az első képtől érvényes (mint a nyitóképen), így
     a betöltéskor látszó jelvény sem villan fel és tűnik el. A main.js (a „Számok felpörgése” blokk végén) várakoztatja őket
     (.jelveny-var: rejtve, animáció nélkül), és amelyik nagyobb része a képernyőre ért, arról leveszi, így a belépő elindul
     (a késleltetést a szkript adja: legkorábban 0,5 s-mal a számok indulása után, dokumentum-sorrendben, egymás után
     legalább 150 ms-os lépcsővel; ha a számok még nem indultak el, a jelvény megvárja őket). Nem a közös megjelenés-rendszer
     hozza: ha betöltéskor csak a sor teteje lóg be (pl. 1440×900-on), annak a lejátszott belépőjét senki nem látná.
     JavaScript nélkül a CSS-késleltetéssel, betöltéskor jönnek. */
  @keyframes jelveny-be { from { opacity: 0; transform: translateY(14px); } }
  .badges > * { animation: jelveny-be .7s var(--ease-out) backwards; }
  .badges > :nth-child(1) { animation-delay: .9s; }
  .badges > :nth-child(2) { animation-delay: 1.05s; }
  .badges > :nth-child(3) { animation-delay: 1.2s; }
  .badges > .jelveny-var { animation: none; opacity: 0; }
}

/* ---------- Bevezető két hasábban ---------- */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.intro .section-title { font-size: clamp(34px, 4vw, 55px); }
.intro p { font-size: 16.5px; line-height: 1.75; color: var(--text); }

/* ---------- Élethelyzetek ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.tile { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); aspect-ratio: 1 / 1; isolation: isolate; }
.tile > picture, .tile > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile > picture { z-index: -2; }
.tile > picture img { object-fit: cover; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(2, 22, 69, .86) 0%, rgba(2, 22, 69, .35) 42%, rgba(2, 22, 69, 0) 64%); }
.tile-body { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 14px; justify-items: start; }
.tile h3 { color: #fff; font-size: 21px; line-height: 1.25; }
.tile-link { position: absolute; inset: 0; z-index: 0; }
.tile .btn { position: relative; z-index: 1; }

.family { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 20px; }
.family-card { background: var(--navy-2); color: #fff; border-radius: var(--radius); padding: 36px 40px; }
.family-card h3 { color: var(--ice); font-size: clamp(24px, 2.4vw, 32px); }
.family-card p { margin-top: 14px; max-width: 60ch; }
.cta-card { display: flex; align-items: center; justify-content: center; text-align: center; padding: 28px; border-radius: var(--radius); text-decoration: none; color: #fff; font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; background: repeating-linear-gradient(135deg, var(--red) 0 34px, #DE3B41 34px 68px); }
.cta-card:hover { background: repeating-linear-gradient(135deg, var(--red-ink) 0 34px, #C4252C 34px 68px); }

/* ---------- Komplex formula ---------- */
.formula { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.formula-img img { width: 100%; mix-blend-mode: multiply; }
.formula-copy p { margin-top: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; padding: 0; list-style: none; }
.chips li { background: var(--ice); color: var(--navy); font-weight: 600; font-size: 14px; line-height: 1.3; padding: 9px 16px; border-radius: 10px; }

/* ---------- Termékkártyák ----------
   Egy közös kártya a főoldal „Termékeink” és a Termékek oldal minden termékénél (az ügyfél egységes dizájnt kért).
   Fehér kártya, benne 10 px-rel beljebb a lekerekített „színpad”: világoskék, lefelé kicsit mélyülő háttér, a tubus mögött
   puha fehér fény. A tubus a színpadon ÁLL: alatta padló (a színpad alsó 13 %-a) és elliptikus kontaktárnyék, így egyik él
   sem vágja el (a régi kártyán a tubus alját a szövegrész fehér éle „levágta”). A talppontok egy vonalban vannak (polc);
   a magasságot a vizuális súly adja: a keskeny Menthol magasabb (.stage-karcsu), a széles Ajakápoló-doboz kisebb (.stage-doboz).
   A packshot változatlan és arányos (csak a magasságát adjuk meg). A szöveg balra igazított, a gomb a kártya aljára tolva:
   egy sorban a kártyák egyforma magasak, a gombok egy vonalban állnak. Az egész kártya a gomb linkje (lásd lent), így a rámutatásra
   emelkedő tubus nem ígér olyat, ami nincs. Megjelenés: main.js CSOPORT (.products). */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.product { position: relative; display: flex; flex-direction: column; padding: 10px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); }
.product-stage {
  --tubus: 72%;        /* a tubus magassága a színpad magasságának arányában */
  --arnyek: 78%;       /* a kontaktárnyék szélessége a kép szélességének arányában (a kupaknál kicsit szélesebb) */
  --tartalek: 83.333%; /* aspect-ratio nélküli böngészőnek (Safari 14 és régebbi): a magasság a szélesség 5/6-a, lásd @supports lent */
  position: relative; display: block; aspect-ratio: 6 / 5; overflow: hidden; border-radius: var(--radius-sm);
  /* fal és padló: fent világosabb, a talppont mögött mélyebb kék (a fehér Menthol-tubus kupakja is kiválik);
     a fény a tubus felső része mögött, visszafogottan, hogy a fehér tubus körvonala ne olvadjon bele */
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)) 50% 30% / 80% 70% no-repeat,
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 58%, var(--bg-3) 80%, var(--bg-3) 100%);
}
.stage-karcsu { --tubus: 79%; --arnyek: 88%; }   /* Menthol Flex: keskeny, magas tubus */
.stage-doboz { --tubus: 57%; --arnyek: 100%; }   /* Ajakápoló: széles doboz és kis tubus */
/* középre: transform (a különálló translate tulajdonságot a régebbi Safari nem ismeri); a rámutatás az img-t mozgatja, nem ezt */
.product-stage picture { position: absolute; z-index: 0; left: 50%; bottom: 13%; height: var(--tubus); transform: translateX(-50%); }
/* két finom árnyék: egy éles a körvonalnak (fehér tubus világos alapon), egy puha a mélységnek */
.product-stage img { width: auto; height: 100%; max-width: none;
  filter: drop-shadow(0 1px 1.5px rgba(3, 33, 105, .16)) drop-shadow(0 10px 14px rgba(3, 33, 105, .12)); }
/* kontaktárnyék a talppontnál, a kép mögött (a <picture> saját rétegén belül); középre margóval, így a rámutatáskori scale-lel nem ütközik */
.product-stage picture::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -9px; width: var(--arnyek); height: 18px;
  margin-inline: auto; background: radial-gradient(closest-side, rgba(3, 33, 105, .38), rgba(3, 33, 105, .12) 60%, rgba(3, 33, 105, 0)); }
.product-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 16px 16px; }
.product-body h3 { font-size: 20px; font-weight: 800; line-height: 1.25; }
.product-body p { color: var(--text-soft); }
.jellemzok { display: grid; gap: 4px; margin: 0; padding-left: 1.15em; font-weight: 400; line-height: 1.5; color: var(--navy); }   /* Termékek oldal */
.jellemzok li::marker { color: var(--red); }
.product-body > :nth-last-child(2) { margin-bottom: 12px; }   /* a gomb előtti elem: a gomb fölött legalább 22 px marad */
.product-body .btn { margin-top: auto; }
/* Az egész kártya kattintható („kinyújtott link”): a gomb ::before-ja kitölti a kártyát, Tab-megálló továbbra is csak a gomb,
   a fókuszkeret a gombon marad. A színpad saját linkje (tabindex="-1") ugyanoda visz, ez alatta marad. */
.product-body .btn::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
/* Egymás alatti kártyáknál alacsonyabb színpad: rövidebb kártya, a tubus arányos marad. A főoldal 900 px alatt már egy hasábos
   (440 px-es kártya, mint mobilon), a Termékek oldal 641–900 között két hasábos, ott 640 px-ig marad a 6/5. */
@media (max-width: 900px) {
  .products:not(.termek-racs) .product-stage { aspect-ratio: 4 / 3; --tartalek: 75%; }
}
@media (max-width: 640px) {
  .product-stage { aspect-ratio: 4 / 3; --tartalek: 75%; }
}
@supports not (aspect-ratio: 1 / 1) {
  .product-stage { height: 0; padding-top: var(--tartalek); }   /* különben a színpad 0 magas, és a termékfotó eltűnik */
}
/* Rámutatásra (és ha a kártya gombja billentyűzetfókuszt kap) a tubus 6 px-et emelkedik, az árnyéka összébb húzódik és halványul.
   Csak transform és opacity; csökkentett mozgásnál nincs. A két feltétel külön szabály: :has nélküli böngészőben a rámutatás megmarad. */
@media screen and (prefers-reduced-motion: no-preference) {
  .product-stage img, .product-stage picture::after { transition: transform .45s var(--ease-out), opacity .45s var(--ease-out); }
  .product:has(:focus-visible) .product-stage img { transform: translateY(-6px); }
  .product:has(:focus-visible) .product-stage picture::after { transform: scale(.8); opacity: .6; }
  @media (hover: hover) {
    .product:hover .product-stage img { transform: translateY(-6px); }
    .product:hover .product-stage picture::after { transform: scale(.8); opacity: .6; }
  }
  /* A kártyagomb nem emelkedik és nem nyomódik össze: transform alatt a kártyát kitöltő ::before a gombhoz méreteződne,
     a rámutatás villogna, és a gombon kívül kezdett kattintás elveszne. A visszajelzés a tubus emelkedése és a gomb kitöltése. */
  .product-body .btn:hover, .product-body .btn:active { transform: none; }
}
.center-row { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Videó ---------- */
.video-sec { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; }
.video-sec p { margin-top: 18px; font-size: 16.5px; }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); cursor: pointer; box-shadow: var(--shadow); }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt::after { content: ""; position: absolute; inset: 0; background: rgba(2, 22, 69, .25); }
.yt-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); }
.yt-play svg { width: 30px; height: 30px; fill: #fff; margin-left: 5px; }
.yt-note { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 10px 16px; font-size: 12.5px; color: #fff; background: linear-gradient(0deg, rgba(2, 22, 69, .7), rgba(2, 22, 69, 0)); text-align: left; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Hol kapható? (közös blokk: <x-hol-kaphato> makró, tools/build.js + src/data/hol-kaphato.json) ---------- */
.polc { background: var(--bg-1); }
.polc-lead { margin-inline: auto; text-align: center; }
.polc-csoport { margin-top: 48px; }
.polc-csoport h3 { font-size: 22px; font-weight: 700; }
.boltok { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.boltok-4 { grid-template-columns: repeat(4, 1fr); }
.bolt { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: start; gap: 10px; background: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 24px 24px 26px; }
.bolt-ikon { width: 56px; height: 56px; }
.bolt h4 { font-size: 19px; font-weight: 700; }
.bolt p { color: var(--text-soft); font-size: 15px; line-height: 1.55; }
.bolt .btn { margin-top: 6px; }

/* ---------- Lebegő „Hol kapható?” gomb (mobil, tablet) ----------
   Az x-hol-kaphato makró teszi ki a blokk után (data-lebego). A main.js akkor teszi rá a .lathato-t, ha az oldal nyitóképe
   már kigördült, és a „Hol kapható?” blokk még lent van; JavaScript nélkül rejtve marad. 900 px fölött nincs. */
.lebego-cta { position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-color: rgba(255, 255, 255, .85);   /* fehér keret, mint a termékoldali nyitókép gombján: a sötét gomb a sötét kártyák fölött is kiválik */
  box-shadow: 0 10px 28px rgba(2, 22, 69, .28); visibility: hidden; opacity: 0; transform: translateY(14px); }
.lebego-cta.lathato { visibility: visible; opacity: 1; transform: none; }
/* bármilyen tartalom fölött lebeghet: fehér keret, belül sötétkék gyűrű (világos és sötét alapon is látszik) */
.lebego-cta.lathato:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--navy), 0 10px 28px rgba(2, 22, 69, .28); }
@media (max-width: 900px) { html { scroll-padding-bottom: 80px; } }   /* a fókuszált elem ne kerüljön a lebegő gomb alá */
@media (min-width: 901px), print { .lebego-cta { display: none; } }

/* ---------- Hírlevél ---------- */
.newsletter { background: var(--red); color: #fff; }
.newsletter-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; padding-block: 64px; }
.newsletter h2 { color: #fff; font-size: clamp(28px, 2.6vw, 34px); font-weight: 600; }
.newsletter-in > div > p { margin-top: 14px; max-width: 46ch; }
.nl-form { display: grid; gap: 14px; }
.nl-form label { font-weight: 600; font-size: 15px; }   /* vállalt javítás: a hírlevél címkéi jól olvashatók (fehér a piroson 4,6:1, nagyobb és vastagabb betűvel) */
.nl-row { display: flex; gap: 12px; }
.nl-row input[type="email"] { flex: 1; min-width: 0; min-height: 50px; padding: 0 18px; border-radius: 999px; border: 2px solid #fff; font: 400 16px "Poppins", Arial, sans-serif; color: var(--text); }
.nl-row .btn { background: var(--navy); color: #fff; min-height: 50px; }
.nl-row .btn:hover { background: var(--navy-deep); }
.nl-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; }
.nl-form .nl-consent { font-size: 14.5px; font-weight: 400; }   /* a hozzájárulás mondata: a címkeszabály (.nl-form label) ne tegye vastaggá */
.nl-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--navy); }
.nl-consent a { color: #fff; font-weight: 600; }
/* „Adatkezelési tájékoztató*” csoportcím a hozzájárulás fölött (Hostinger-űrlapcímke, KZ-08-zqklxv-2); az „Email cím*” címkével azonos stílus */
.nl-consent-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.nl-consent-group legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
/* Hostinger Reach beágyazott űrlapja (src/data/hirlevel.json): az iframe magasságát a Reach szkriptje állítja; a min-height
   foglalja a helyet a betöltésig, hogy a blokk ne ugorjon. A színeket a Reach űrlapszerkesztőjében kell a pirosra hangolni. */
/* A Reach-űrlapnak 32 px belső margója van, és legfeljebb 520 px széles, középre igazítva: az iframe-et ennyivel kijjebb húzzuk,
   így a mezők a szöveg vonalában állnak (mobilon a képernyő széléig érne, a szakasz overflow-x: clip-je levágja a kilógó, átlátszó
   részt). A tájékoztató linkje ugyanabban az 520 px-es, középre igazított sávban áll, mint az űrlap. */
.newsletter { overflow-x: clip; }
.nl-reach { min-height: 230px; margin-inline: -32px; }
.nl-reach iframe { display: block; width: 100%; border: 0; }
.nl-reach-noscript { font-weight: 600; }
.newsletter-in .nl-reach-link { max-width: 520px; margin: 4px auto 0; font-size: 14.5px; }   /* a .newsletter-in > div > p (46ch) felülírása */
.nl-reach-link a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
/* 2026-11-01 óta az űrlap csak kattintásra töltődik be: addig a gomb és egy rövid tájékoztatás áll az űrlap helyén */
.nl-reach-start { max-width: 520px; margin-inline: auto; display: grid; justify-items: start; gap: 14px; }
.nl-reach-gomb { background: var(--navy); color: #fff; min-height: 52px; }
.nl-reach-gomb:hover { background: var(--navy-deep); }
.newsletter-in .nl-reach-info { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.nl-reach-info a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.nl-reach:focus { outline: none; }

/* ---------- GYIK ----------
   Lenyitható kérdések: natív <details>/<summary> (JavaScript nélkül is működik; Enter és Szóköz is nyitja, a felolvasó
   bemondja, hogy nyitva vagy zárva). Zárva csak a kérdés látszik, az egész sor kattintható. Egy középre igazított hasáb
   asztalon is: két rácsoszlopban a kinyitott kérdés mellett lyuk maradna. A main.js CSOPORT listájában a .faq-grid:
   a kérdések sorban érkeznek (a megjelenés a <details>-en, a nyitás a válaszon mozog, nem ütköznek). */
.faq-sec { background: linear-gradient(180deg, #8EC0E6 0%, #6EAEDF 100%); }
.faq-grid { display: grid; gap: 12px; max-width: 860px; margin: 44px auto 0; }
.faq-item { background: rgba(255, 255, 255, .9); border-radius: var(--radius-sm); }
.faq-item[open] { background: var(--paper); box-shadow: var(--shadow-sm); }   /* a nyitott kérdés kissé kiemelkedik */
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px;
  padding: 20px 24px 20px 28px; border-radius: var(--radius-sm); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* a sarok kerekítése nem „inherit”: a <details> belső szerkezetében a summary szülője egy rés (slot), onnan 0 jönne */
.faq-item > summary::-webkit-details-marker { display: none; }   /* Safari: a beépített háromszög helyett a saját jel */
.faq-item[open] > summary { padding-bottom: 10px; }   /* nyitva a válasz közel kerül a kérdéshez (a kérdés sora nem mozdul) */
.faq-item h3 { font-size: 18px; font-weight: 600; line-height: 1.35; }
/* Plusz jel (CSS-ben rajzolva): nyitva a függőleges szára vízszintesbe fordul, és mínusz lesz. A kör zárva halványkék,
   rámutatásra sötétkék, nyitva piros (mint a menüben az aktuális oldal jele). */
.faq-ikon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ice); color: var(--navy); }
.faq-ikon::before, .faq-ikon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  border-radius: 2px; background: currentColor; }
.faq-ikon::after { transform: rotate(90deg); }
.faq-item[open] .faq-ikon { background: var(--red); color: #fff; }
.faq-item[open] .faq-ikon::after { transform: rotate(180deg); }
/* Nagy kontrasztú mód (Windows, forced-colors): a háttérszínek eltűnnek, ezért a kártya széle és a jel köre keretet kap,
   a plusz/mínusz szárai rendszerszínnel rajzolódnak; így itt is látszik, hogy a sor nyitható, és nyitva vagy zárva van */
@media (forced-colors: active) {
  .faq-item { border: 1px solid CanvasText; }
  .faq-ikon { border: 2px solid CanvasText; }
  .faq-ikon::before, .faq-ikon::after { forced-color-adjust: none; background: CanvasText; }
}
@media (hover: hover) {
  .faq-item:not([open]) > summary:hover { background: var(--paper); }   /* a kérdés szövegén is látszik a visszajelzés: a zárt sor kifehéredik */
  .faq-item > summary:hover .faq-ikon { background: var(--navy); color: #fff; }
  .faq-item[open] > summary:hover .faq-ikon { background: var(--red-ink); }
}
/* Fókusz: a kérdés sora kapja a keretet; ahol a böngésző tudja (:has), az egész kártya, így nyitva sem vágja ketté a kártyát */
.faq-item > summary:focus-visible { outline-offset: 3px; }
@supports selector(:has(*)) {
  .faq-item:has(> summary:focus-visible) { outline: 3px solid var(--fokusz); outline-offset: 3px; }
  .faq-item > summary:focus-visible { outline: none; }
}
.faq-valasz { padding: 0 28px 26px; }
.faq-valasz p { max-width: 66ch; color: var(--navy); }   /* vállalt javítás: a GYIK szövege sötétkék; a sor nem nyúlik túl hosszúra */
@media (max-width: 640px) {
  .faq-grid { gap: 10px; margin-top: 32px; }
  .faq-item > summary { gap: 14px; padding: 16px 16px 16px 20px; }
  .faq-item[open] > summary { padding-bottom: 8px; }
  .faq-item h3 { font-size: 16.5px; }
  .faq-ikon { width: 32px; height: 32px; }
  .faq-valasz { padding: 0 20px 22px; }
}
/* Nyomtatásban a zárt kérdés válasza is látszik (::details-content: Chrome/Edge 131+, Safari 18.4+; régebbi böngészőben
   csak a nyitott válasz nyomtatódik). Külön szabály: ahol a böngésző nem ismeri, csak ez az egy esik ki. */
@media print {
  .faq-item::details-content { content-visibility: visible; }
}
@media print {
  .faq-ikon { display: none; }
  .faq-item > summary { padding-bottom: 10px; }
}
/* Mozgás (a „Mozgás” szakasz szabályai szerint): a válasz nyitáskor finoman beúszik (átlátszóság + 6 px), a zárás azonnali;
   a jel szára elfordul. Magasság nem animálódik. Az animáció a [open] állapothoz kötött, így minden nyitáskor újraindul. */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes gyik-nyit { from { opacity: 0; transform: translateY(-6px); } }
  .faq-item[open] > .faq-valasz { animation: gyik-nyit .32s var(--ease-out); }
  .faq-ikon { transition: background-color var(--mozgas-rovid), color var(--mozgas-rovid), transform var(--mozgas-rovid) var(--ease-out); }
  .faq-ikon::after { transition: transform .3s var(--ease-out); }
  .faq-item > summary:active .faq-ikon { transform: scale(.92); }
  .faq-item > summary { transition: background-color var(--mozgas-rovid); }   /* interaktív elem: a színváltás belefér a kivételbe */
}

/* ---------- Záró felhívás ---------- */
.cta-band { background: var(--red); color: #fff; }
.cta-band-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 60px; }
.cta-band h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); }
.cta-band p { margin-top: 12px; }

/* ---------- Lábléc ---------- */
.site-footer { background: var(--navy); color: #fff; font-size: 15px; }
.footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-block: 56px 36px; }
.footer-in h2 { color: #fff; font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.footer-in h2 a { text-decoration: none; }
.footer-in h2 a:hover { text-decoration: underline; }
.footer-brand .logo img { width: 200px; }
.footer-brand .slogan { margin-top: 20px; font-size: 22px; font-weight: 700; }
.footer-brand p { margin-top: 8px; color: rgba(255, 255, 255, .86); max-width: 34ch; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-links a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.social { display: flex; gap: 12px; margin-top: 20px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.social a:hover { background: rgba(255, 255, 255, .24); }
.social svg { width: 20px; height: 20px; fill: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-block: 22px 30px; font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-bottom a { color: rgba(255, 255, 255, .9); }
.footer-disclaimer { flex-basis: 100%; }
/* „Sütibeállítások”: gomb (a sütiablakot nyitja meg), de a jogi linkekkel azonos kinézettel */
.footer-suti { padding: 0; border: 0; background: none; font: inherit; color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.footer-suti:hover { color: #fff; }

/* ---------- Sütiablak (2026-11-01) ----------
   Alul lebegő, nem blokkoló panel (az oldal közben használható). A három gomb egyforma súlyú: az elfogadás és az elutasítás
   ugyanolyan feltűnő (az adatvédelmi hatóságok iránymutatása szerint). A beállítások a panelen belül nyílnak. */
.suti-ablak { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; pointer-events: none; }
.suti-ablak[hidden] { display: none; }
/* a hidden attribútum itt is rejtsen: a .btn (inline-flex) és a rácsos panelek display-szabálya különben felülírná */
.suti-ablak [hidden], .nl-reach-wrap [hidden] { display: none !important; }
.suti-ablak-in { pointer-events: auto; width: 100%; max-width: 760px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px 26px 22px; border-radius: var(--radius-sm); background: var(--paper); color: var(--text); box-shadow: 0 18px 48px rgba(3, 33, 105, .28); border: 1px solid rgba(3, 33, 105, .08); }
.suti-cim { font-size: 19px; font-weight: 700; color: var(--navy); }
.suti-szoveg { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }
.suti-ablak a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; }
.suti-beallitasok { margin-top: 16px; display: grid; gap: 12px; }
.suti-kat { padding: 12px 14px; border-radius: 10px; background: var(--bg-1, #F2F6FC); }
.suti-kat p { margin-top: 4px; font-size: 13.5px; line-height: 1.55; }
.suti-kapcsolo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy); cursor: pointer; }
.suti-kapcsolo input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
.suti-kapcsolo input:disabled { cursor: not-allowed; }
.suti-gombok { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.suti-gomb { background: var(--navy); color: #fff; min-height: 44px; padding: 0 22px; font-size: 14.5px; }
.suti-gomb:hover { background: var(--navy-deep); }
@media (max-width: 640px) {
  .suti-ablak { left: 8px; right: 8px; bottom: 8px; }
  .suti-ablak-in { padding: 18px 16px 16px; }
  .suti-gombok { display: grid; grid-template-columns: 1fr; }
  .suti-gomb { width: 100%; }
}

/* ---------- Reszponzív ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .boltok-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .section { padding-block: 64px; }
  .nav-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: var(--header-h); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; background: var(--navy); box-shadow: 0 16px 30px rgba(2, 22, 69, .3); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .main-nav a[aria-current] { border-bottom-color: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; }
  .intro, .formula, .video-sec, .newsletter-in { grid-template-columns: 1fr; gap: 32px; }
  .family { grid-template-columns: 1fr; }
  .stats-band { padding-top: 36px; }
  .stats .stat { padding: 24px 24px 20px; }
  .stat > span { font-size: 17px; }
  .badge { padding-inline: 24px; }   /* az ikon a szöveg fölött (1070 px-től, lásd a szakaszban); a szélek a számokéval egy vonalban */
  .products { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .cta-band-in { flex-direction: column; align-items: flex-start; }
  .boltok { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  /* Nyitókép mobilon (2026-10-28 óta hero/fooldal-gol-mobil, 1536 × 2060, azaz a szélesség 134,1%-a): a kép teljes
     szélességben, torzítás nélkül, az aljához igazítva; csak a felső, égboltos részéből vágunk (a szereplők fölött legfeljebb
     290 px ég marad, a nyitókép ne legyen fölöslegesen magas). A szereplők a felemelt kezektől a kép aljáig a szélesség
     58,3%-át töltik ki. A szöveg ennyivel + 24 px-lel a kép alja fölött ér véget, így 320 és 640 px között sehol nem csúszik a
     kezekre és az arcokra. Ha a szöveg magasabb (keskeny kijelző, nagyobb betű), a nyitókép nő, a kép fölött a sötétkék háttér
     folytatódik (a maszk elmossa a határt). Az egységek a nyitókép szélességéhez mérnek (cqw; container query nélküli
     böngészőben vw). */
  .hero { min-height: 0; align-items: flex-start; container-type: inline-size; }
  .hero picture { inset: auto 0 0; height: min(100%, 134.1vw); height: min(100%, 134.1cqw);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 48px); mask-image: linear-gradient(180deg, transparent, #000 48px); }
  .hero picture img { object-position: 50% 100%; }
  /* a szöveg sávja a nyitókép tetejétől kb. 260 px-ig tart minden szélességen: az árnyék is ehhez igazodik (px). Az új kép
     teteje világos, természetes kék ég (a régié sötétkék volt), ezért az árnyék felül erősebb: így a piros cím 320–640 px
     között mindenhol legalább 3:1 (2026-10-28, szöveg nélküli képernyőképen mérve, a cím helyének legsötétebb 5%-a: 640 px-en
     3,06, 360–430 px-en 3,2 felett), a fehér alcím 6:1 fölött van; a felemelt kezekig (legkorábban 273 px) elfogy */
  .hero::after { background: linear-gradient(180deg, rgba(2, 22, 69, .95) 0, rgba(2, 22, 69, .92) 100px, rgba(2, 22, 69, .58) 190px, rgba(2, 22, 69, .22) 245px, rgba(2, 22, 69, 0) 290px); }
  .hero-in { min-height: min(134.1vw, calc(58.3vw + 290px)); min-height: min(134.1cqw, calc(58.3cqw + 290px));
    padding-top: 28px; padding-bottom: calc(58.3vw + 24px); padding-bottom: calc(58.3cqw + 24px); }
  .hero-title { font-size: min(52px, 13vw); font-size: min(52px, 13cqw); }   /* a „Maradj aktív.” 320 px-ig egy sorban marad */
  .intro .section-title { font-size: min(34px, 8.8vw); }   /* a „Gyógynövényekből.” 360 px-en se lógjon ki (vízszintes görgetés) */
  .hero-sub { font-size: 17px; max-width: 20em; }   /* 360 px-től három sor: alacsonyabb szövegtömb, több hely a fejek fölött */
  .stats-band { padding-top: 24px; }
  .stats .stat { flex-direction: column; align-items: center; gap: 6px; padding: 20px 4px 18px; text-align: center; }
  .stat b { font-size: min(40px, 11vw); }
  .stat > span { font-size: min(15px, 4.5vw); }   /* a „generáció” 320 px-en is elfér a keskeny oszlopban */
  .badges { grid-template-columns: 1fr; padding: 10px 18px 12px; }
  .badge { flex-direction: row; align-items: center; gap: 14px; padding: 8px 0; }   /* lista: ikon balra, szöveg mellette */
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 4 / 3.4; }
  .family-card { padding: 28px 24px; }
  .cta-card { min-height: 150px; }
  .nl-row { flex-direction: column; }
  .footer-in { grid-template-columns: 1fr; gap: 32px; }
  .boltok, .boltok-4 { grid-template-columns: 1fr; }
}

/* ---------- Mozgás ----------
   Finom, okkal mozgó elemek: belépés a nyitóképen (hierarchia), megjelenés görgetéskor (a tartalom sorban érkezik),
   visszajelzés a gombokon. Szabályok:
   - csak transform, opacity és clip-path mozog (kivétel: interaktív elemen – gomb, link – a szín, a keret és az árnyék
     finom váltása; a kivitelező jóváhagyta 2026-10-17); minden mozgás a prefers-reduced-motion: no-preference feltétel alatt,
     csökkentett mozgásnál minden azonnal, a végállapotában látszik; és csak képernyőn (nyomtatáskor a még meg nem jelent
     elem se maradjon átlátszó);
   - a rejtett kezdőállapotot (.reveal) és a lépcsőzés sorszámát (--i) a main.js teszi rá (IntersectionObserver, nincs
     görgetésfigyelő), csak arra, ami betöltéskor még nem látszik: JavaScript nélkül semmi nem tűnik el; jogi oldalon nincs;
   - az átmenet CSAK a megjelenő (.reveal.is-in) állapoton van: az elrejtés azonnali, az elem nem fakul ki;
   - forgó, mozgó elem nem okozhat vízszintes kilógást (a szakasza overflow-x: clip).
   A termékoldalak saját koreográfiája (előnyábra, lépések vonala) a termekoldal.css végén. Ellenőrzés: node tools/mozgas.js <oldal>. */
@media screen and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Gombok: visszajelzés rámutatásra (1 px emelkedés, árnyék, a nyíl 3 px-et mozdul) és lenyomásra (kicsit összenyomódik).
     A szín, a keret és az árnyék is finoman vált (jóváhagyott kivétel, lásd fent). */
  .btn { transition: transform var(--mozgas-rovid) var(--ease-out), background-color var(--mozgas-rovid), color var(--mozgas-rovid),
    border-color var(--mozgas-rovid), box-shadow var(--mozgas-rovid); }
  .btn-arrow::after { transition: transform var(--mozgas-rovid) var(--ease-out); }
  @media (hover: hover) {
    .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(3, 33, 105, .16); }
    .btn-arrow:hover::after { transform: translateX(3px); }
  }
  .btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

  /* Lebegő gomb be- és kiúszása (elrejtéskor a visibility a mozgás végén vált, hogy ne tűnjön el hirtelen) */
  .lebego-cta { transition: opacity .25s var(--ease-out), transform .35s var(--ease-out), visibility 0s .35s; }
  .lebego-cta.lathato { transition: opacity .25s var(--ease-out), transform .35s var(--ease-out), visibility 0s; }

  /* Nyitókép: a szöveg lépcsőzetesen beúszik, a fotó finoman „leül”. A <picture> mozog (nem az <img>), így az oldalankénti
     kép-transform (Ajakápoló: scale(1.3)) érintetlen marad. A backwards kitöltés miatt a végén nem marad animáció az elemen
     (a gombok saját visszajelzése zavartalan). Főoldal, termékoldalak, Termékek, Komplex formula (a fotós nyitókép szakasza
     mindenhol overflow: hidden, a nagyítás nem lóg ki), Rólunk. A Rólunk nyitóján a cím és az archív fotó a legnagyobb elem (LCP):
     ott csak transformmal úszik be, átlátszóság nélkül, különben a betöltés kb. 0,9 s-mal később számítana késznek. */
  @keyframes belep-fel { from { opacity: 0; transform: translateY(14px); } }
  @keyframes belep-fel-csak { from { transform: translateY(14px); } }
  @keyframes belep-leul { from { transform: scale(1.05); } }
  .hero > picture, .termek-hero > picture, .te-hero > picture, .kf-hero > picture { animation: belep-leul 1.6s var(--ease-out) backwards; }
  .hero-in > *, .termek-hero-doboz > *, .te-hero-szoveg > *, .kf-hero-in > *, .rolunk-nyito-in > * { animation: belep-fel .8s var(--ease-out) backwards; }
  .rolunk-nyito-in > * { animation-name: belep-fel-csak; }
  :is(.hero-in, .termek-hero-doboz, .te-hero-szoveg, .kf-hero-in, .rolunk-nyito-in) > :nth-child(1) { animation-delay: .08s; }
  :is(.hero-in, .termek-hero-doboz, .te-hero-szoveg, .kf-hero-in, .rolunk-nyito-in) > :nth-child(2) { animation-delay: .16s; }
  :is(.hero-in, .termek-hero-doboz, .te-hero-szoveg, .kf-hero-in, .rolunk-nyito-in) > :nth-child(3) { animation-delay: .24s; }
  :is(.hero-in, .termek-hero-doboz, .te-hero-szoveg, .kf-hero-in, .rolunk-nyito-in) > :nth-child(4) { animation-delay: .34s; }

  /* Megjelenés görgetéskor (--i: az egyszerre feltűnő testvérek sorszáma, 90 ms-os lépcső) */
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.is-in { opacity: 1; transform: none;
    transition: opacity var(--mozgas-kozep) var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }

  /* A Komplex-körkép elfordulva érkezik: a növények „összeállnak” (főoldal, termékoldalak, Komplex formula). A szakasz
     vízszintesen levágja, hogy forgás közben se lógjon ki (a kép sarka átlátszó vagy fehér, a levágás nem látszik).
     A kép (img) mozog, nem a tároló: a tároló transformja és átlátszósága elszigetelné a kép mix-blend-mode: multiply
     keverését, és a főoldali JPG fehér sarka mozgás közben négyzetként látszana. */
  .termek-formula, .kf-komplex { overflow-x: clip; }
  .section:has(> .formula) { overflow-x: clip; }   /* főoldal; külön szabály, hogy :has nélküli böngészőben a fenti megmaradjon */
  .formula-img.reveal, .kf-komplex-kep.reveal { opacity: 1; transform: none; }
  .formula-img.reveal img, .kf-komplex-kep.reveal img { opacity: 0; transform: rotate(-10deg) scale(.95); }
  .formula-img.reveal.is-in img, .kf-komplex-kep.reveal.is-in img { opacity: 1; transform: none;
    transition: opacity .9s var(--ease-out) calc(var(--i, 0) * 90ms), transform 1.1s var(--ease-out) calc(var(--i, 0) * 90ms); }
}


/* ===== oldalak/jogi.css ===== */
/* Jogi oldalak: Impresszum, Adatkezelési tájékoztató, Süti-tájékoztató (body.oldal-jogi)
   Világos fejsáv a címmel, alatta fehér lapon kb. 70 karakter széles szöveghasáb.
   Háttér: a közös égbolt-lépcső (fejsáv .sky-1, törzs .sky-2, a HTML-ben). */
.oldal-jogi { --lap-pad: 56px; }
/* 700 px − 2 × 56 px = 588 px szöveg 16,5 px-es betűvel: kb. 70–74 karakter/sor */
.oldal-jogi .jogi-hasab { max-width: 700px; margin-inline: auto; }

/* Fejsáv (nincs fotós nyitókép); a cím a lap szövegével egy vonalban kezdődik */
.oldal-jogi .jogi-fej { padding-block: 72px 36px; }
.oldal-jogi .jogi-fej .jogi-hasab { padding-inline: var(--lap-pad); }
/* max. 46 px: az „Adatkezelési tájékoztató” így egy sorban marad a 588 px-es hasábban */
.oldal-jogi .jogi-fej h1 { font-size: clamp(34px, 4.2vw, 46px); letter-spacing: -.01em; }

/* Kiemelt megjegyzés: a szöveg élesítés előtt véglegesítendő */
.oldal-jogi .jogi-megjegyzes { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 14px 18px; border-left: 4px solid #E3A008; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #FFF6DB; color: var(--text); font-size: 15.5px; font-weight: 400; line-height: 1.6; }
.oldal-jogi .jogi-megjegyzes svg { width: 22px; height: 22px; flex: none; margin-top: 1px; stroke: #9A5B00; }

/* Szöveghasáb fehér lapon (az égbolt-lépcső folytatásán) */
.oldal-jogi .jogi-torzs { padding-block: 0 96px; }
.oldal-jogi .jogi-lap { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 48px var(--lap-pad) 56px; font-size: 16.5px; font-weight: 400; line-height: 1.75; }
.oldal-jogi .jogi-lap > :first-child { margin-top: 0; }
.oldal-jogi .jogi-lap h2 { margin-top: 40px; font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.3; }
.oldal-jogi .jogi-lap h2 + p { margin-top: 10px; }
.oldal-jogi .jogi-lap a { color: var(--navy); font-weight: 500; text-underline-offset: 3px; }
.oldal-jogi .jogi-lap a:hover { color: var(--red-ink); }
.oldal-jogi .jogi-bevezeto { font-size: 18px; }
/* 2026-11-01: a jóváhagyott végleges szöveg (tools/jogi-oldalak.js): alcímek, listák, táblázatok */
.oldal-jogi .jogi-lap h3 { margin-top: 28px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--navy-2); }
.oldal-jogi .jogi-lap p { margin-top: 12px; }
.oldal-jogi .jogi-lap h2 + p, .oldal-jogi .jogi-lap h3 + p { margin-top: 8px; }
.oldal-jogi .jogi-lap ul { margin: 10px 0 0; padding-left: 1.25em; }
.oldal-jogi .jogi-lap li + li { margin-top: 4px; }
.oldal-jogi .jogi-lap li::marker { color: var(--navy); }
.oldal-jogi .jogi-lap a { overflow-wrap: anywhere; }
/* táblázat: keskeny képernyőn a saját dobozában görgethető, az oldal nem görget oldalra */
.oldal-jogi .jogi-tabla-wrap { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.oldal-jogi .jogi-tabla { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.oldal-jogi .jogi-tabla th, .oldal-jogi .jogi-tabla td { padding: 9px 12px; border: 1px solid rgba(3, 33, 105, .14); text-align: left; vertical-align: top; }
.oldal-jogi .jogi-tabla th { background: #EEF3FA; color: var(--navy); font-weight: 600; }

/* Impresszum: adatok kulcs–érték listában */
.oldal-jogi .jogi-adatok { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 0; }
.oldal-jogi .jogi-adatok > div { display: contents; }
.oldal-jogi .jogi-adatok dt { font-weight: 600; color: var(--navy); }
.oldal-jogi .jogi-adatok dd { margin: 0; }

/* Helyőrző: élesítés előtt pótolandó adat */
.oldal-jogi .kitoltendo { padding: 1px 6px; border-radius: 5px; background: #FFE58F; color: var(--navy); font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 900px) {
  .oldal-jogi { --lap-pad: 40px; }
  .oldal-jogi .jogi-fej { padding-block: 56px 28px; }
  .oldal-jogi .jogi-torzs { padding-bottom: 64px; }
}
@media (max-width: 640px) {
  .oldal-jogi { --lap-pad: 20px; }
  .oldal-jogi .jogi-fej { padding-block: 40px 24px; }
  .oldal-jogi .jogi-fej h1 { font-size: 36px; }
  .oldal-jogi .jogi-lap { padding-block: 32px 36px; border-radius: var(--radius-sm); font-size: 16px; }
  .oldal-jogi .jogi-lap h2 { margin-top: 32px; }
  .oldal-jogi .jogi-bevezeto { font-size: 17px; }
  .oldal-jogi .jogi-adatok { grid-template-columns: 1fr; gap: 0; }
  .oldal-jogi .jogi-adatok dd { margin-bottom: 12px; }
  .oldal-jogi .jogi-adatok div:last-child dd { margin-bottom: 0; }
}


/* ===== oldalak/komplex.css ===== */
/* =========================================================
   Komplex formula oldal (/komplex-formula/) · body.oldal-komplex
   Minden szelektor az .oldal-komplex alatt. A mozgás (nyitókép-belépés, görgetéses megjelenés) a style.css „Mozgás” szakaszában.
   ========================================================= */

/* ---------- Nyitókép: világos termékfotó, a szöveg a kép üres bal oldalán ---------- */
/* 1714 px felett a magasság a szélességgel nő (42vw): így a cover-vágás legfeljebb 12,7% felül-alul, a tubusok (a kép 18–81%-a) nem vágódnak le */
.oldal-komplex .kf-hero { position: relative; display: flex; align-items: center; min-height: clamp(520px, 47vw, max(720px, 42vw)); background: #E8F2FB; overflow: hidden; }
.oldal-komplex .kf-hero picture,
.oldal-komplex .kf-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.oldal-komplex .kf-hero picture img { object-fit: cover; object-position: 75% 50%; }
.oldal-komplex .kf-hero-in { position: relative; z-index: 1; padding-block: 72px; }
/* a szöveg nem csúszhat a tubusokra: legfeljebb a nézet bal fele, 641 px-en is ~24 px hézaggal */
.oldal-komplex .kf-hero-in > * { max-width: min(560px, 50vw - 64px); }
.oldal-komplex .kf-hero-in > h1 { max-width: min(680px, 50vw - 64px); font-size: clamp(44px, 4.6vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
.oldal-komplex .kf-hero p { margin-top: 22px; font-size: 17px; line-height: 1.65; font-weight: 400; color: var(--navy); }

/* ---------- A titok a mikrocirkuláció: három számozott kártya ---------- */
.oldal-komplex .kf-titok { background: linear-gradient(180deg, #E8F2FB 0%, #E3EFFA 100%); }   /* a nyitókép színéből indul, a sky-2-be fut */
.oldal-komplex .kf-lepesek { list-style: none; margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 24px; }
.oldal-komplex .kf-lepes { position: relative; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 40px 30px 32px; }
.oldal-komplex .kf-lepes-szam { position: absolute; top: -20px; right: 26px; display: grid; place-items: center; min-width: 52px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--red); color: #fff; font-size: 24px; font-weight: 700; line-height: 1; }
.oldal-komplex .kf-lepes h3 { font-size: 22px; padding-right: 56px; }
.oldal-komplex .kf-lepes p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; }

/* ---------- Komplex 7 és Komplex 10: kép és szöveg két hasábban ---------- */
.oldal-komplex .kf-komplex-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.oldal-komplex .kf-komplex-kep img { width: 100%; max-width: 560px; height: auto; aspect-ratio: 1 / 1; margin-inline: auto; }   /* négyzetes forrás: a hely betöltés előtt is lefoglalva */
.oldal-komplex .kf-k10 .kf-komplex-kep { order: 2; }
/* a h2 két sora: nagy „KOMPLEX 7/10” felirat és alcím */
.oldal-komplex .kf-cimke { display: block; font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: .01em; color: var(--navy); }
.oldal-komplex .kf-alcim { display: block; margin-top: 8px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; color: var(--navy-2); }
.oldal-komplex .kf-komplex-szoveg > p,
.oldal-komplex .kf-szoveg { margin-top: 20px; font-size: 16.5px; line-height: 1.75; }
.oldal-komplex .kf-komplex .chips { margin-bottom: 0; }

/* ---------- Gyógynövények: hét kártya, kép balra, sorszám jobbra fent ---------- */
/* a cím a többi szakaszcímmel egy vonalban, csak a kártyák állnak beljebb (1020 px, a sorhossz miatt) */
.oldal-komplex .kf-novenyek { list-style: none; max-width: 1020px; margin: 44px auto 0; padding: 0; display: grid; gap: 18px; }
.oldal-komplex .kf-noveny { display: grid; grid-template-columns: 300px 1fr; min-height: 250px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.oldal-komplex .kf-noveny-kep { position: relative; background: var(--bg-3); }
.oldal-komplex .kf-noveny-kep picture,
.oldal-komplex .kf-noveny-kep img { position: absolute; inset: 0; width: 100%; height: 100%; }
.oldal-komplex .kf-noveny-kep img { object-fit: cover; }
.oldal-komplex .kf-noveny-szoveg { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 32px 132px 32px 36px; }
/* a sorszám díszítő, a sorrendet az <ol> adja át; nagy, félkövér betű, 3:1 feletti kontraszt */
.oldal-komplex .kf-noveny-szam { position: absolute; top: 22px; right: 30px; font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: #7D8DB0; }
.oldal-komplex .kf-noveny h3 { font-size: 24px; color: var(--navy-2); }
.oldal-komplex .kf-latin { margin-top: 4px; font-style: italic; color: var(--text-soft); }
.oldal-komplex .kf-noveny-szoveg .kf-latin + p { margin-top: 12px; }

/* ---------- Gyógynövények a Komplex formula oldalon: hét kerek kép névvel (az ügyfél kérése, 2026-10-28) ----------
   A teljes lista az aloldalon (/komplex-formula/gyogynovenyek/); minden csempe a saját leírására visz (#horgony). */
.oldal-komplex .kf-noveny-csempek { list-style: none; max-width: 1020px; margin: 40px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 20px; }
.oldal-komplex .kf-noveny-csempek li { width: 124px; }
.oldal-komplex .kf-noveny-csempek a { display: grid; justify-items: center; gap: 12px; text-align: center; text-decoration: none; color: var(--navy-2); font-weight: 600; font-size: 15px; line-height: 1.3; border-radius: var(--radius-sm); }
.oldal-komplex .kf-noveny-csempek picture { display: block; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--bg-3); box-shadow: var(--shadow-sm); }
.oldal-komplex .kf-noveny-csempek img { width: 100%; height: 100%; object-fit: cover; }
.oldal-komplex .kf-noveny-csempek a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.oldal-komplex .kf-novenyek-sec .center-row { margin-top: 36px; }
@media screen and (prefers-reduced-motion: no-preference) {
  .oldal-komplex .kf-noveny-csempek img { transition: transform .5s var(--ease-out); }
  @media (hover: hover) { .oldal-komplex .kf-noveny-csempek a:hover img { transform: scale(1.08); } }
}

/* ---------- Aloldal: Gyógynövények (/komplex-formula/gyogynovenyek/) ---------- */
.oldal-gyogynovenyek .kf-al-fej { padding-bottom: 8px; }
.oldal-gyogynovenyek .kf-vissza { display: inline-flex; align-items: center; gap: .45em; margin-bottom: 18px; color: var(--navy-2); font-weight: 600; text-decoration: none; }
.oldal-gyogynovenyek .kf-vissza::before { content: "←"; font-weight: 700; }
.oldal-gyogynovenyek .kf-vissza:hover { text-decoration: underline; text-underline-offset: 3px; }
.oldal-gyogynovenyek .kf-novenyek-al { padding-top: 24px; }
.oldal-gyogynovenyek .kf-novenyek-al .kf-novenyek { margin-top: 0; }

/* ---------- Reszponzív ---------- */
@media (max-width: 900px) {
  .oldal-komplex .kf-lepesek { grid-template-columns: 1fr; max-width: 560px; }
  .oldal-komplex .kf-komplex-in { grid-template-columns: 1fr; gap: 28px; }
  .oldal-komplex .kf-k10 .kf-komplex-kep { order: 0; }
  .oldal-komplex .kf-komplex-kep img { max-width: 420px; }
  .oldal-komplex .kf-noveny { grid-template-columns: 240px 1fr; }
  .oldal-komplex .kf-noveny-szoveg { padding: 28px 96px 28px 28px; }
  .oldal-komplex .kf-noveny-szam { top: 20px; right: 24px; font-size: 44px; }
}
@media (max-width: 640px) {
  .oldal-komplex .kf-noveny-csempek { gap: 20px 12px; margin-top: 32px; }
  .oldal-komplex .kf-noveny-csempek li { width: 96px; }
  .oldal-komplex .kf-noveny-csempek picture { width: 84px; height: 84px; }
  .oldal-komplex .kf-noveny-csempek a { font-size: 14px; gap: 10px; }
  /* „Ismerd meg a gyógynövényeket”: 320 px-en egy sorban 330 px széles lenne (vízszintes görgetés) – itt törhet */
  .oldal-komplex .kf-novenyek-sec .center-row .btn { white-space: normal; max-width: 100%; text-align: center; }
  /* Mobil: az ügyfél álló mobilképe (hero/termekek-mobil, 1440 × 3000, egyszínű #E8F2FB háttér, SPF 30-as tubus nélkül),
     ugyanúgy, mint a Termékek oldalon (lásd ott a részleteket): a cím és a szöveg fent, a kép felső, üres részének helyén,
     alatta a kép 46–88,5%-os sávja, benne egészben a négy tubus (a fölösleges felső és alsó üres rész elmarad).
     480 px fölött a kép nem nő tovább, jobbra igazítva. */
  .oldal-komplex .kf-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .oldal-komplex .kf-hero picture { position: static; order: 1; display: block; align-self: center; width: min(100%, 480px); height: auto; margin-top: 8px; }
  .oldal-komplex .kf-hero picture img { position: static; width: 100%; height: auto; aspect-ratio: 1440 / 1120; object-fit: cover; object-position: 50% 50%; }   /* 2026-10-28: az újrakomponált termékcsoport, lásd a Termékek oldalon */
  .oldal-komplex .kf-hero-in { padding-block: 36px 0; }
  .oldal-komplex .kf-hero-in > *,
  .oldal-komplex .kf-hero-in > h1 { max-width: none; }
  .oldal-komplex .kf-hero-in > h1 { font-size: clamp(32px, 9.6vw, 38px); }   /* 360 px-en is egy sorban */
  .oldal-komplex .kf-hero p { margin-top: 14px; font-size: 16px; }
  .oldal-komplex .kf-lepes { padding: 36px 22px 26px; }
  .oldal-komplex .kf-cimke { font-size: 36px; }
  .oldal-komplex .kf-noveny { grid-template-columns: 1fr; min-height: 0; }
  .oldal-komplex .kf-noveny-kep { aspect-ratio: 16 / 10; }
  .oldal-komplex .kf-noveny-szoveg { padding: 22px 20px 26px; }
  .oldal-komplex .kf-noveny h3 { font-size: 22px; padding-right: 64px; }
  .oldal-komplex .kf-noveny-szam { top: 18px; right: 18px; font-size: 38px; }
}


/* ===== oldalak/rolunk.css ===== */
/* ---------- Rólunk (/rolunk/) · minden szelektor .oldal-rolunk alatt ---------- */

/* B1 · Nyitó: a cím (az archív fotó 2026-10-28 óta nincs fent, lásd rolunk.html) */
.oldal-rolunk .rolunk-nyito { padding-block: 80px 72px; }
.oldal-rolunk .rolunk-cim { font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -.01em; line-height: 1.12; max-width: 15em; }

/* B2 · Idővonal: függőleges vonal, korszakonként piros pont */
.oldal-rolunk .rolunk-tortenet { padding-block: 72px 96px; }
.oldal-rolunk .idovonal { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.oldal-rolunk .korszak { position: relative; padding: 0 0 64px 52px; border-left: 2px solid rgba(3, 33, 105, .18); margin-left: 9px; }
.oldal-rolunk .korszak:last-child { padding-bottom: 0; border-left-color: transparent; }
.oldal-rolunk .korszak:last-child::after { content: ""; position: absolute; left: -2px; top: 0; height: 24px; border-left: 2px solid rgba(3, 33, 105, .18); }
.oldal-rolunk .korszak::before { content: ""; position: absolute; left: -11px; top: calc(.575em - 10px); width: 20px; height: 20px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px var(--paper); font-size: clamp(28px, 3.2vw, 42px); }
.oldal-rolunk .korszak-cim { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -.01em; color: var(--navy); }
.oldal-rolunk .korszak-ev { color: var(--red-ink); }
.oldal-rolunk .korszak-szoveg { margin-top: 22px; max-width: 70ch; }
.oldal-rolunk .korszak-szoveg p { font-size: 16.5px; line-height: 1.75; }

/* B3 · Négy dolog, ami nem változott */
.oldal-rolunk .rolunk-allando .lead { max-width: 70ch; }
.oldal-rolunk .allando-racs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.oldal-rolunk .allando { background: rgba(255, 255, 255, .9); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 26px 26px 30px; }
.oldal-rolunk .allando-szam { display: block; font-size: 34px; font-weight: 800; line-height: 1; color: var(--red-ink); letter-spacing: -.01em; }
.oldal-rolunk .allando h3 { margin-top: 18px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.oldal-rolunk .allando p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--text); }

/* ---------- Reszponzív ---------- */
@media (max-width: 1100px) {
  .oldal-rolunk .allando-racs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .oldal-rolunk .rolunk-nyito { padding-block: 56px; }
  .oldal-rolunk .rolunk-tortenet { padding-block: 56px 72px; }
}
@media (max-width: 640px) {
  .oldal-rolunk .rolunk-nyito { padding-block: 40px 52px; }
  .oldal-rolunk .rolunk-cim { font-size: 30px; }
  .oldal-rolunk .korszak { padding: 0 0 48px 26px; margin-left: 7px; }
  .oldal-rolunk .korszak::before { left: -9px; top: calc(.575em - 8px); width: 16px; height: 16px; box-shadow: 0 0 0 4px var(--paper); font-size: 26px; }
  .oldal-rolunk .korszak-cim { font-size: 26px; }
  .oldal-rolunk .korszak-szoveg { margin-top: 16px; }
  .oldal-rolunk .korszak-szoveg p { font-size: 16px; }
  .oldal-rolunk .allando-racs { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .oldal-rolunk .allando { padding: 22px 22px 26px; }
}


/* ===== oldalak/termek-ajakapolo.css ===== */
/* =========================================================
   Ajakápoló Gél – felülírások a termékoldal-sablonhoz (oldalak/termekoldal.css)
   Ez a fájl a sablon ELŐTT töltődik, ezért minden szelektor .termekoldal.termek-ajakapolo előtagú.
   ========================================================= */

/* Nyitókép (vállalt javítás): szorosabb kivágás, hogy a kicsi tubus nagyobb legyen.
   A fotón a tubus a kép kb. ötöde; asztalon és tableten a képet a tubus közepe körül arányosan nagyítjuk
   (statikus nagyítás, nem animáció). Mobilon a tubus már a képernyő ~60%-a, ott nincs nagyítás. */
@media (min-width: 641px) {
  .termekoldal.termek-ajakapolo .termek-hero > picture { overflow: hidden; }
  .termekoldal.termek-ajakapolo .termek-hero > picture img { transform: scale(1.3); transform-origin: 73% 74%; }
}

/* A „Miért éri meg magadnál tartani?” előnyábrához nem kell saját beállítás: a sablon kódban rajzolt ábrája
   a tubus méretéből számolja a vonalakat (a korábbi, hatásképhez igazított eltolás 2026-10-15-én megszűnt). */


/* ===== oldalak/termekek.css ===== */
/* =========================================================
   Termékek oldal (/termekek/) – minden szelektor a .oldal-termekek alatt.
   A mozgás (nyitókép-belépés, görgetéses megjelenés) a style.css „Mozgás” szakaszában.
   ========================================================= */

/* ---------- Nyitókép ----------
   A kép (2026-10-28 óta a tools/termekcsoport.js újrakomponált csoportképe: a négy tubus közös alapvonalon, alig takarva
   egymást) háttere egyszínű #E8F2FB: a szakasz ugyanezt kapja, így ha a szöveg magasabb a képnél, a többlet nem látszik.
   A tubusok a kép jobb felén vannak (vízszintesen 50–93 %, függőlegesen 40–80 %), a szöveg a bal felén áll (legfeljebb 44vw);
   a kép szélessége mindig 100 %, ezért oldalt sosem vágódik, magasan legfeljebb ~15-15 %-ot. */
.oldal-termekek .te-hero { display: grid; background: #E8F2FB; overflow: hidden; }
.oldal-termekek .te-hero > picture { grid-area: 1 / 1; display: block; }
.oldal-termekek .te-hero > picture img { width: 100%; height: auto; max-height: max(600px, 40vw); object-fit: cover; object-position: 50% 50%; }
.oldal-termekek .te-hero-in { grid-area: 1 / 1; align-self: center; position: relative; z-index: 1; padding-block: 48px; }
.oldal-termekek .te-hero-szoveg { max-width: min(560px, 44vw); }
.oldal-termekek .te-hero-cim { font-size: clamp(28px, 4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--navy); }
.oldal-termekek .te-hero-sub { margin-top: 18px; max-width: 46ch; font-size: 18px; line-height: 1.6; font-weight: 400; color: var(--text); }
.oldal-termekek .te-hero-gombok { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Válassz cél szerint ---------- */
.oldal-termekek .cel-sec { background: linear-gradient(180deg, #E8F2FB 0%, #E3EFFA 100%); }
.oldal-termekek .cel-racs { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1020px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.oldal-termekek .cel-racs > li { display: flex; }
.oldal-termekek .cel {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 210px; padding: 30px 24px 28px; text-align: center; text-decoration: none;
  background: var(--paper); border: 2px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.oldal-termekek .cel:hover { border-color: var(--navy); }
.oldal-termekek .cel-ikon { width: 88px; height: 88px; }
.oldal-termekek .cel h3 { max-width: 22ch; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--navy); }

/* ---------- Termékkártyák ----------
   A kártya a közös .product (style.css „Termékkártyák”), a főoldallal azonos. Itt csak a rács hatodik helyén álló
   „Nem tudod, melyik formula?” kártya: a termékkártyával azonos lekerekítés, árnyék, sormagasság és felépítés. 640 px fölött
   a kártya tetején a színpaddal azonos méretű és színű világos mező áll (.formula-kartya-kep, 10 px keret + 6/5 arány), benne a
   főoldali, elválasztóvonalas Komplex 7 és 10 közös körképe (díszítés; a kivitelező döntése 2026-10-18, a közös képre csere
   2026-10-19). A kép fehér hátterű JPG: a világos mezőn multiply keveréssel simul bele, mint a főoldalon (sötétkék alapon fehér
   négyzet lenne, vagy elsötétülne). Alatta a szöveg: így a cím a termékcímekkel,
   a gomb a termékgombokkal egy vonalban van, és a szöveg egy tömbben, alul áll (nem marad üres sáv a bekezdés és a gomb között).
   A szöveg bal széle a termékkártyákéval egy vonalban (10 px keret + 16 px margó). Mint a termékkártya, az egész kártya a gomb
   linkje; rámutatáskor a körkép kissé elfordul (mint a termékkártyán a tubus emelkedése). */
.oldal-termekek .formula-kartya {
  --fokusz: #fff;                                                    /* sötétkék alapon fehér fókuszkeret */
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 10px 10px 26px;
  background: var(--navy); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
}
.oldal-termekek .formula-kartya-kep { flex: none; align-self: stretch; aspect-ratio: 6 / 5; margin-bottom: 4px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%); }   /* a színpad tónusai */
.oldal-termekek .formula-kartya-kep picture { display: block; height: 94%; aspect-ratio: 1; }
.oldal-termekek .formula-kartya-kep img { width: 100%; height: 100%; mix-blend-mode: multiply; }
.oldal-termekek .formula-kartya > :not(.formula-kartya-kep) { margin-inline: 16px; }
.oldal-termekek .formula-kartya h3 { color: #fff; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; }
.oldal-termekek .formula-kartya p { font-size: 17px; color: rgba(255, 255, 255, .92); }
.oldal-termekek .formula-kartya .btn { margin-top: auto; }          /* a gomb egy vonalban a szomszéd kártyák gombjaival */
.oldal-termekek .formula-kartya .btn::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.oldal-termekek .formula-kartya .btn-outline-light:hover { color: var(--navy); }   /* a közös hover piros szövege a sötétkék kártyán idegen */
@supports not (aspect-ratio: 1 / 1) {
  .oldal-termekek .formula-kartya-kep { min-height: 240px; }   /* aspect-ratio nélkül: fix magasság, a körkép középen */
  .oldal-termekek .formula-kartya-kep picture { height: 220px; width: 220px; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .oldal-termekek .formula-kartya .btn:hover, .oldal-termekek .formula-kartya .btn:active { transform: none; }   /* ok: style.css „Termékkártyák” */
  .oldal-termekek .formula-kartya-kep img { transition: transform .6s var(--ease-out); }
  @media (hover: hover) {
    .oldal-termekek .formula-kartya:hover .formula-kartya-kep img { transform: rotate(-8deg); }
  }
}

/* ---------- Reszponzív ---------- */
@media (min-width: 641px) {
  .oldal-termekek .termek-racs { grid-auto-rows: 1fr; }               /* egységes kártyamagasság sorok között is */
}
@media (max-width: 900px) {
  .oldal-termekek .te-hero-in { padding-block: 32px; }
  .oldal-termekek .te-hero-sub { font-size: 16px; }
  .oldal-termekek .cel-racs { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 900px) and (min-width: 641px) {
  .oldal-termekek .termek-racs { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
@media (max-width: 640px) {
  /* Mobil: az ügyfél álló mobilképe (hero/termekek-mobil, 1440 × 3000, egyszínű #E8F2FB háttér, SPF 30-as tubus nélkül).
     A képen felül üres hely van a szövegnek; a négy tubus (árnyékkal) a kép 31–92% (vízszintes) és 49–84% (függőleges)
     sávjában áll, körülöttük alig látható körök. A szöveg fent áll, alatta a kép 46–88,5%-os sávja (aspect-ratio + object-position:
     a 3000 px-ből 1275 px, a fölötte levő 1380 px-es üres részből indulva): a tubusok egészben, fölöttük kb. 25, alattuk kb. 40 px
     levegővel látszanak, a fölösleges felső és alsó üres rész elmarad. A háttér egyszínű, ezért a kép széle nem látszik, a szöveg
     úgy áll, mintha a kép felső, üres részén lenne. 480 px fölött a kép nem nő tovább (jobbra igazítva: a tubusok a képen is
     jobbra állnak, a kép jobb széle a képernyő széle), így a nyitókép nagyobb mobilon sem lesz indokolatlanul magas. */
  .oldal-termekek .te-hero { display: flex; flex-direction: column; }
  .oldal-termekek .te-hero-in { order: 0; align-self: stretch; padding-block: 32px 0; }
  /* 2026-10-28 óta a mobilkép az újrakomponált termékcsoport (tools/termekcsoport.js, 1440 × 1120, a csoport középen):
     egészében látszik, középre igazítva, 480 px fölött nem nő tovább */
  .oldal-termekek .te-hero > picture { order: 1; align-self: center; width: min(100%, 480px); margin-top: 8px; }
  .oldal-termekek .te-hero > picture img { width: 100%; max-height: none; aspect-ratio: 1440 / 1120; object-fit: cover; object-position: 50% 50%; }
  .oldal-termekek .te-hero-szoveg { max-width: none; }
  .oldal-termekek .te-hero-cim { font-size: 30px; }

  .oldal-termekek .cel-racs { gap: 12px; margin-top: 32px; }
  .oldal-termekek .cel { min-height: 0; gap: 12px; padding: 22px 12px 20px; border-radius: var(--radius-sm); }
  .oldal-termekek .cel-ikon { width: 64px; height: 64px; }
  .oldal-termekek .cel h3 { font-size: 15.5px; }

  /* egy hasábban nincs szomszéd, akihez igazodni kellene: a körképes mező alacsonyabb (2:1), a gomb közvetlenül a szöveg alatt */
  .oldal-termekek .formula-kartya-kep { aspect-ratio: 2 / 1; }
  .oldal-termekek .formula-kartya .btn { margin-top: 8px; }
}


/* ===== oldalak/termekoldal.css ===== */
/* =========================================================
   Termékoldal-sablon (Sportkrém, Rapid Active, Menthol Flex, Gyógynövényes, Ajakápoló)
   Gazdája: a Sportkrém oldal. Leírás: docs/uj-oldal/termekoldal-sablon.md
   Minden szelektor .termekoldal alatt. Az oldalankénti felülírás a saját
   oldalak/termek-<név>.css fájlba kerül, .termekoldal.termek-<név> előtaggal
   (az a fájl ábécérendben ELŐBB töltődik, ezért erősebb szelektor kell).
   ========================================================= */

/* ---------- Változók ----------
   Színek: minden megjelenítés márkaszínnel (sötétkék, világoskék, piros), termékenként egyformán; termékszín nincs
   (a kivitelező döntése, 2026-10-17; korábban a gomb és a pontok a csomagolás színét követték). */
.termekoldal {
  --termek: var(--navy-2);          /* az előnyábra pontjai és gyűrűje: márka-sötétkék, mint a vonalak (a Sportkrém sötétkék tubusán világoskék, lent) */
  --termek-ink: var(--red);         /* a „Hol kapható?” gomb: márkapiros, fehér szöveggel legalább 4,5:1 (mint a többi oldal fő gombja) */
  --termek-sotet: var(--red-ink);   /* gomb rámutatáskor */
  --hero-min: clamp(520px, 46vw, 1180px); /* asztali nyitókép magassága: a szélességgel nő, így 2560 px-ig a teljes tubus látszik */
  --hero-pos: 50% 55%;              /* asztali nyitókép kivágása (object-position) */
  --hero-mobil-pos: 60% 100%;       /* mobil nyitókép kivágása */
  --hero-mobil-min: max(178vw, 750px); /* mobil nyitókép magassága: a szöveg a tubus fölött marad */
  --hero-fatyol: .55;               /* asztali fátyol erőssége a szöveg mögött (0–1): sötét képen sötétít, világos képen (.hero-vilagos) fehérít */
  --hero-sotet-szin: 6 15 34;       /* sötét fátyol (R G B): mély, kissé tompított sötétkék-fekete, mint egy árnyék a fotón (a --navy-deep sötétebb, szürkébb rokona) */
  --hero-vilagos-szin: 250 247 242; /* világos fátyol (R G B): meleg semleges fehér, termékenként a fotó ablakfényéhez hangolva (lent) */
  --hero-fatyol-szin: var(--hero-sotet-szin);   /* a használt szín: a .hero-vilagos a világosra cseréli */
  --hero-fade: calc(20px + 7vw);    /* asztalon ennyivel a szövegdoboz jobb széle után ér nullára a fátyol; termékenként lent */
  --hero-telt: 1;                   /* asztalon a szövegdoboz szélességének az a része, ameddig a fátyol teljes erejű (1 = a doboz jobb széléig); onnan fogy el */
  --hero-fatyol-felul: 1;           /* asztalon a fátyol ereje a szöveg fölött, a teljeshez képest (1 = végig egyforma; a Sportkrém egén és a világos képeken gyengébb) */
  --hero-mobil-sotetites: .55;      /* mobil sötétítés erőssége a szöveg mögött (más kép, más háttér; a .hero-vilagos csak asztalon hat) */
  --elony-hatter: #E8F2FB;          /* a „Miért éri meg?” szakasz háttere */
  --tubus-arany: .569;              /* előnyábra: a tubusfotó oldalaránya (szélesség / magasság, a forrásfájlból) */
  --tubus-magas: .86;               /* előnyábra: a tubus magassága a legkülső kör átmérőjéhez képest */
  --px-bf: .18; --px-jf: .3; --px-bl: .26; --px-jl: .16;   /* előnyábra (asztal): a négy pont távolsága a tubus tengelyétől, a tubusszélesség arányában (bal fent, jobb fent, bal lent, jobb lent) */
}
/* Termékenként mért nyitókép-értékek. Mobil (360/390 px): a bekezdés minden során p95 ≥ 4,5:1 (sablonleírás 6. pont).
   Asztal (2026-10-18, 901–2560 px, a cím, a címke és a bekezdés dobozán képpontonként mérve): címke és bekezdés p5 ≥ 4,5:1, cím ≥ 3:1.
   Sötét kép (Sportkrém, Rapid): fehér szöveg, a leggyengébb a Sportkrém bekezdése (min 5,2). Világos kép (.hero-vilagos): a szűk keresztmetszet
   a piros címke (--red-ink), ezért ott erős a fátyol (Menthol .74, Gyógynövényes .82, Ajakápoló .78; a címke szövegén min ≥ 4,6, p5 ≥ 4,9).
   A cím és a bekezdés ennél gyengébb fátyollal is olvasható (bekezdés min ≥ 5,2), ezért a világos képeken a fátyol már a címke vége után
   enyhülni kezd: --hero-telt = a címke szövegének jobb széle a doboz arányában (901 px-en a legszélesebb: Menthol .45, Gyógynövényes .67,
   Ajakápoló .74) + kb. 20 px. Ha a címke szövege változik, ezt is mérd újra. Felül a fátyol a teljes .45-öd részére gyengül (az ablak, a polc fent tisztán látszik).
   --hero-fade: a szövegdoboz és a tubus közti rés kb. 85%-a (a rés ≈ 27 px + k·vw, a forráskép tubushelyéből mérve), így a fátyol
   960–2560 px-en 21–86 px-rel a tubus előtt fogy el. Ha a kivágást (--hero-pos, --hero-min) módosítod, ezt is mérd újra.
   A :where() miatt gyengék (0,1,0): a termek-<név>.css .termekoldal.termek-<név> szelektorral felülírhatja őket, pedig az a fájl előbb töltődik. */
.termekoldal:where(.termek-sportkrem)     { --hero-fatyol: .55; --hero-fade: calc(20px + 7.2vw); --hero-fatyol-felul: .15; --hero-mobil-sotetites: .55; --hero-mobil-min: max(178vw, 790px); }
.termekoldal:where(.termek-rapid)         { --hero-fatyol: .5;  --hero-fade: calc(20px + 15vw);  --hero-fatyol-felul: .6; --hero-mobil-sotetites: .55; --hero-mobil-min: max(178vw, 820px); }
.termekoldal:where(.termek-menthol)       { --hero-fatyol: .74; --hero-fade: calc(20px + 13.5vw); --hero-telt: .5; --hero-fatyol-felul: .45; --hero-vilagos-szin: 248 248 247; --hero-mobil-sotetites: .55; --hero-min: clamp(520px, 49vw, 1260px); --hero-mobil-min: max(170vw, 880px); }   /* mobilon a kép teteje megtoldva (a hosszabb bevezető a tubus fölé fér) */
.termekoldal:where(.termek-gyogynovenyes) { --hero-fatyol: .82; --hero-fade: calc(20px + 16vw);  --hero-telt: .72; --hero-fatyol-felul: .45; --hero-vilagos-szin: 250 246 241; --hero-mobil-sotetites: .45; --hero-mobil-min: max(178vw, 820px); }
.termekoldal:where(.termek-ajakapolo)     { --hero-fatyol: .78; --hero-fade: calc(20px + 9.5vw); --hero-telt: .78; --hero-fatyol-felul: .45; --hero-vilagos-szin: 252 246 240; --hero-mobil-sotetites: .6; }
/* Előnyábra: a tubusfotó oldalaránya (termekek/<név>-240.png: 240 × magasság) és magassága a körhöz képest.
   A keskeny tubusok (Menthol Flex, Ajakápoló) kicsit magasabbak, hogy a vizuális súlyuk a többiekéhez illjen.
   Az Ajakápoló tubusa lefelé keskenyedik: a bal alsó pont beljebb kerül (.26 helyett .18, a bal felsővel egy függőlegesben), különben 1101–1280 px-en
   a 12 px-es pont fele lelógna a tubus széléről. */
.termekoldal:where(.termek-sportkrem)     { --tubus-arany: .569; --tubus-magas: .86; }   /* 240 × 422 */
.termekoldal:where(.termek-rapid)         { --tubus-arany: .567; --tubus-magas: .86; }   /* 240 × 423 */
.termekoldal:where(.termek-menthol)       { --tubus-arany: .387; --tubus-magas: .9; }    /* 240 × 620 */
.termekoldal:where(.termek-gyogynovenyes) { --tubus-arany: .529; --tubus-magas: .86; }   /* 240 × 454 (a forrás legfeljebb 400 px széles) */
.termekoldal:where(.termek-ajakapolo)     { --tubus-arany: .241; --tubus-magas: .9; --px-bl: .18; }   /* 240 × 997 (a vékony tubus) */
.termekoldal.termek-sportkrem { --termek: var(--sky); }   /* a sötétkék tubuson a sötétkék pont eltűnne: itt márka-világoskék */

.termekoldal .btn-termek { background: var(--termek-ink); color: #fff; }
.termekoldal .btn-termek:hover { background: var(--termek-sotet); }

/* ---------- B0 · Nyitókép ---------- */
.termekoldal .termek-hero { --fokusz: #fff; position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: var(--hero-min); overflow: hidden; background: var(--navy-deep); color: #fff; }
.termekoldal .termek-hero > picture, .termekoldal .termek-hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.termekoldal .termek-hero > picture { z-index: -2; }
.termekoldal .termek-hero > picture img { object-fit: cover; object-position: var(--hero-pos); }
.termekoldal .termek-hero-in { padding-block: 56px clamp(56px, 7vw, 96px); }
.termekoldal .termek-hero-doboz { position: relative; max-width: min(560px, 46%); }
/* fátyol a szöveg mögött (vállalt javítás: jól olvasható szöveg a fotón). A szövegdobozhoz kötődik, nem a képernyőhöz; itt csak a váza,
   az asztali kinézet lent (901 px-től), a mobil a 640 px-es blokkban, tableten nincs (ott a szöveg világos sávon áll a kép alatt). */
.termekoldal .termek-hero-doboz::before { content: ""; position: absolute; z-index: -1; left: -100vw; pointer-events: none; }
.termekoldal .termek-hero-cim { color: #fff; font-size: clamp(40px, 5vw, 72px); font-weight: 800; line-height: 1.04; letter-spacing: -.015em; text-shadow: 0 2px 24px rgba(2, 22, 69, .4); }
.termekoldal .termek-hero-cimke { margin-top: 12px; font-size: clamp(16px, 1.45vw, 20px); font-weight: 500; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.termekoldal .termek-hero-szoveg { margin-top: 18px; font-size: 18px; line-height: 1.6; font-weight: 400; text-shadow: 0 1px 12px rgba(2, 22, 69, .35); }
.termekoldal .termek-hero .btn-termek { margin-top: 28px; border-color: rgba(255, 255, 255, .85); }   /* fehér keret: a sötét gomb is kiválik a képből */
/* Asztal (901 px-től): a fátyol a nyitókép bal szélétől indul, teljes magasságban (felül-alul a nyitókép overflow-ja vágja, így nincs vízszintes éle).
   A szövegdoboz --hero-telt részéig egyenletes (sötét képen a doboz jobb széléig, világos képen csak a piros címke végéig), onnan
   a doboz jobb széle + --hero-fade pontig egyetlen koszinuszgörbével fogy el (lágyan indul és lágyan ér nullára, ezért nincs sáv vagy perem).
   A --hero-fade termékenként a tubusig maradó hely kb. 85%-a: a tubust nem éri (a görbe vége nem függ a --hero-telt-től).
   Sötét képen (Sportkrém, Rapid Active) sötétkék-fekete árnyék, fehér szöveggel; világos képen (.hero-vilagos: Menthol Flex, Gyógynövényes,
   Ajakápoló) meleg fehér fény, mintha az ablak felől jönne, sötétkék címmel és sötét szöveggel.
   A határ 900.02 px, nem 901: böngészőnagyításnál tört szélesség is előfordul (pl. 1351 px 150%-on ≈ 900,67), és 900–901 között
   különben se a tablet, se az asztali blokk nem hatna (fehér szöveg fátyol nélkül a világos fotón). */
@media (min-width: 900.02px) {
  .termekoldal .termek-hero-doboz::before { --a: var(--hero-fatyol); --c: var(--hero-fatyol-szin); --f: var(--hero-fade);
    top: -100vw; bottom: -100vw; right: calc(-1 * var(--f));
    /* --s: a görbe kezdete. Az álelem szélessége 100vw + a doboz + --f, a doboz bal széle 100vw-nél van, így a doboz szélessége 100% - 100vw - --f */
    --s: calc(100vw + (100% - 100vw - var(--f)) * var(--hero-telt));
    background: linear-gradient(90deg,
      rgb(var(--c) / var(--a)) var(--s),
      rgb(var(--c) / calc(var(--a) * .962)) calc(var(--s) + (100% - var(--s)) * .125),
      rgb(var(--c) / calc(var(--a) * .854)) calc(var(--s) + (100% - var(--s)) * .25),
      rgb(var(--c) / calc(var(--a) * .691)) calc(var(--s) + (100% - var(--s)) * .375),
      rgb(var(--c) / calc(var(--a) * .5)) calc(var(--s) + (100% - var(--s)) * .5),
      rgb(var(--c) / calc(var(--a) * .309)) calc(var(--s) + (100% - var(--s)) * .625),
      rgb(var(--c) / calc(var(--a) * .146)) calc(var(--s) + (100% - var(--s)) * .75),
      rgb(var(--c) / calc(var(--a) * .038)) calc(var(--s) + (100% - var(--s)) * .875),
      rgb(var(--c) / 0) 100%);
    /* függőlegesen: a cím első sorának közepétől (a doboz teteje + 40 px) lefelé teljes, onnan felfelé 240 px alatt (koszinuszgörbe) a --hero-fatyol-felul arányára gyengül,
       hogy a szöveg fölötti ég, ablak, polc ne sötétüljön vagy fehéredjen feleslegesen (a doboz teteje az álelem tetejétől 100vw-re van) */
    --m: var(--hero-fatyol-felul);
    -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / var(--m)) calc(100vw - 200px), rgb(0 0 0 / calc(var(--m) + (1 - var(--m)) * .146)) calc(100vw - 140px),
      rgb(0 0 0 / calc(var(--m) + (1 - var(--m)) * .5)) calc(100vw - 80px), rgb(0 0 0 / calc(var(--m) + (1 - var(--m)) * .854)) calc(100vw - 20px), #000 calc(100vw + 40px));
    mask-image: linear-gradient(180deg, rgb(0 0 0 / var(--m)) calc(100vw - 200px), rgb(0 0 0 / calc(var(--m) + (1 - var(--m)) * .146)) calc(100vw - 140px),
      rgb(0 0 0 / calc(var(--m) + (1 - var(--m)) * .5)) calc(100vw - 80px), rgb(0 0 0 / calc(var(--m) + (1 - var(--m)) * .854)) calc(100vw - 20px), #000 calc(100vw + 40px)); }
  /* világos változat: a betöltés alatti háttér is világos, hogy a sötét szöveg kép nélkül is olvasható legyen */
  .termekoldal .termek-hero.hero-vilagos { --fokusz: var(--navy); --hero-fatyol-szin: var(--hero-vilagos-szin); background: rgb(var(--hero-vilagos-szin)); color: var(--text); }
  .termekoldal .hero-vilagos .termek-hero-cim { color: var(--navy); text-shadow: none; }
  .termekoldal .hero-vilagos .termek-hero-cimke { width: fit-content; color: var(--red-ink); }   /* a doboz a szöveg széléig ér (látványra nincs hatása): így a kontrasztmérés a címke mögötti képet méri, nem az üres, már enyhülő részt mellette */
  .termekoldal .hero-vilagos .termek-hero-szoveg { text-shadow: none; }
  .termekoldal .hero-vilagos .btn-termek { border-color: transparent; }   /* világos alapon a piros gomb keret nélkül is kiválik */
}

/* ---------- B2 · Miért éri meg? Előnyábra: tubusfotó, körök, vezetővonalak (kódban rajzolva, nem képbe égetve) ----------
   Váz: .elony-abra > .elony-tubus (a tubusfotó) + 4 × .elony (sorrend: bal fent, jobb fent, bal lent, jobb lent).
   A körök a .elony-tubus::before háttere (SVG, díszítés), a vonalak és a pontok az .elony pszeudo-elemei: egyik sincs
   a felolvasott tartalomban. Minden méret a --kozep (a legkülső kör átmérője) és a --tubus-w (a tubus szélessége) változóból
   számolódik, így a vonal minden szélességen a tubus pontjáig ér. A kirajzolódás (mozgás) a fájl végén. */
.termekoldal .termek-elonyok { background: var(--elony-hatter); }
.termekoldal .elony-abra {
  --kozep: min(300px, calc(100vw - 2 * var(--gutter)));              /* a körök átmérője (mobil; asztalon lent felülírva) */
  --tubus-w: calc(var(--kozep) * var(--tubus-magas) * var(--tubus-arany));   /* a tubus szélessége: a magassága így a kör --tubus-magas része */
  --vonal: var(--navy-2);                                              /* a vezetővonal színe */
  --vonal-y: 15px;                                                     /* a vonal és a pont magassága: a cím első sorának közepe */
  --pont: 12px;                                                        /* a pont átmérője */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px;
}
.termekoldal .elony-tubus { display: grid; place-items: center; isolation: isolate; min-height: var(--kozep); }
.termekoldal .elony-tubus > picture { grid-area: 1 / 1; }
.termekoldal .elony-tubus img { width: var(--tubus-w); height: auto; filter: drop-shadow(0 16px 18px rgba(3, 33, 105, .16)); }   /* arányos: a magasság a fájlból jön */
/* koncentrikus, finom szaggatott körök (kívül pontozott), mögöttük enyhe világos derengés; a tubus közepére igazítva */
.termekoldal .elony-tubus::before { content: ""; grid-area: 1 / 1; z-index: -1; width: var(--kozep); aspect-ratio: 1; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%231E3363' stroke-width='1.2'%3E%3Ccircle cx='200' cy='200' r='198.5' stroke-opacity='.3' stroke-linecap='round' stroke-dasharray='.1 5'/%3E%3Ccircle cx='200' cy='200' r='157' stroke-opacity='.26' stroke-dasharray='5 5'/%3E%3Ccircle cx='200' cy='200' r='115' stroke-opacity='.34' stroke-dasharray='5 5'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 78%); }
.termekoldal .elony { position: relative; z-index: 1; }
.termekoldal .elony h3 { font-size: 22px; line-height: 1.25; color: var(--navy-2); }
.termekoldal .elony p { margin-top: 10px; color: var(--navy); }
/* a pont: termékszín, fehér gyűrűvel és sötétkék szegéllyel (sötét és világos tubuson, világos háttéren is látszik) */
.termekoldal .elony h3::after { content: ""; position: absolute; box-sizing: border-box; width: var(--pont); height: var(--pont); border-radius: 50%;
  background: var(--termek); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--vonal); }
.termekoldal .elony::before, .termekoldal .elony::after { content: ""; position: absolute; background: var(--vonal); }

/* ---------- B4 · Mikor kerül elő? Tiszta eredeti képek 2×2-ben, a szöveg a képen ----------
   Kép: eletkep-tiszta/<név> (beégetett átmenet nélkül). Sötétítés két rétegben: a kártya ::before-ja (alul erős, felfelé
   elhalványul) és a szöveghez kötött réteg (.helyzet-szoveg::before, a szöveg teteje fölött 48 px alatt halványul el): így a hosszabb
   szöveg teteje is sötét alapon áll, bármekkora a kártya. Arány: asztalon 3:2, 721–1100 px 1:1, 720 px-ig egy oszlopban 5:4
   (641–720 px-en két oszlopban a kártya túl keskeny: a szöveg a kártya kétharmadát elfoglalná, és arcokat takarna), 400 px-ig 1:1.
   Mozgás (egymásba futó belépő, mobilon „pakli”): a fájl végén. */
.termekoldal .helyzet-racs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.termekoldal .termek-helyzetek .lead + .helyzet-racs { margin-top: 32px; }
.termekoldal .helyzet { position: relative; isolation: isolate; aspect-ratio: 3 / 2; background: var(--navy-deep); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.termekoldal .helyzet > picture, .termekoldal .helyzet > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.termekoldal .helyzet > picture { z-index: -2; }
.termekoldal .helyzet > picture img { object-fit: cover; }
.termekoldal .helyzet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(2, 22, 69, .9) 0%, rgba(2, 22, 69, .7) 26%, rgba(2, 22, 69, .28) 50%, rgba(2, 22, 69, 0) 68%); }
.termekoldal .helyzet-szoveg { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; padding: 26px 30px 28px; }
/* a .helyzet-szoveg nem nyit saját rétegrendet (nincs z-index): ez a réteg a kártya ::before-ja fölé és a szöveg alá kerül;
   jobbra a kártya széléig ér (a szövegdoboz legfeljebb 560 px széles, a kártya overflow: hidden levágja a többit) */
.termekoldal .helyzet-szoveg::before { content: ""; position: absolute; inset: -48px -100vw 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(2, 22, 69, .55) 0, rgba(2, 22, 69, .5) calc(100% - 48px), rgba(2, 22, 69, 0) 100%); }
/* enyhébb sötétítésű kártya (vállalt javítás, Sportkrém „Kerti munka”): rövid szöveg, így kevesebb réteg is elég; mérve AA marad */
.termekoldal .helyzet-vilagos::before { background: linear-gradient(0deg, rgba(2, 22, 69, .8) 0%, rgba(2, 22, 69, .5) 24%, rgba(2, 22, 69, .12) 44%, rgba(2, 22, 69, 0) 58%); }
.termekoldal .helyzet-vilagos .helyzet-szoveg::before { background: linear-gradient(0deg, rgba(2, 22, 69, .3) 0, rgba(2, 22, 69, .25) calc(100% - 48px), rgba(2, 22, 69, 0) 100%); }
.termekoldal .helyzet h3 { color: #fff; font-size: clamp(21px, 1.85vw, 26px); line-height: 1.22; text-shadow: 0 1px 14px rgba(2, 22, 69, .45); }
.termekoldal .helyzet p { margin-top: 8px; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.55; text-shadow: 0 1px 10px rgba(2, 22, 69, .45); }

/* ---------- B5 · Komplex 7 / Komplex 10 (a közös .formula rácsán) ---------- */
.termekoldal .formula-img { width: 100%; max-width: 560px; justify-self: center; }
.termekoldal .formula-copy .formula-cimke { margin-top: 0; font-size: clamp(38px, 4.2vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: .01em; color: var(--navy); }
.termekoldal .formula-cim { margin-top: 8px; font-size: clamp(24px, 2.3vw, 32px); color: var(--red-ink); }
.termekoldal .formula-copy strong { font-weight: 600; }

/* ---------- B6 · Három lépés, Kinek ajánljuk?, Összetevők ---------- */
.termekoldal .lepes-racs { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; margin-top: 40px; }
.termekoldal .lepes-tubus { display: flex; justify-content: center; }
.termekoldal .lepes-tubus picture { display: block; }
.termekoldal .lepes-tubus img { height: clamp(340px, 36vw, 500px); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(3, 33, 105, .18)); }
.termekoldal .lepesek { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.termekoldal .lepes { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 20px; }
.termekoldal .lepes:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 52px; bottom: -20px; width: 2px; border-radius: 2px; background: rgba(3, 33, 105, .2); }
.termekoldal .lepes-szam { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; font-size: 18px; font-weight: 700; line-height: 1; }
.termekoldal .lepes h3 { margin-top: 9px; font-size: 20px; line-height: 1.3; color: var(--navy-2); }
.termekoldal .lepes p { margin-top: 8px; color: var(--navy); }
.termekoldal .kinek { margin-top: 44px; }
.termekoldal .kinek-cim { font-size: clamp(24px, 2.2vw, 30px); color: var(--red-ink); }
.termekoldal .kinek p { margin-top: 12px; color: var(--navy); }
.termekoldal .kinek-chips { margin: 18px 0 0; }   /* a közös .chips stílus (mint a formula-blokkban); nem kattintható, ezért nem pirula */
.termekoldal .osszetevok { margin-top: 56px; padding: 28px 32px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(3, 33, 105, .18); border-radius: var(--radius); }
.termekoldal .osszetevok-cim { font-size: 20px; line-height: 1.3; color: var(--navy-2); }
.termekoldal .osszetevok p { margin-top: 10px; font-size: 15.5px; color: var(--navy); overflow-wrap: anywhere; }   /* a hosszú INCI-lista keskeny képernyőn is a dobozban marad */

/* ---------- Reszponzív ---------- */
/* Előnyábra, asztal (1101 px felett): középen a tubus a körökkel, két előny balra, kettő jobbra.
   Minden előnytől vékony vonal fut a tubus felé: vízszintesen a szöveg mellől a törésig, onnan 40°-ban a tubuson ülő pontig
   (a felső előnyöknél lefelé, az alsóknál felfelé). A vonal hossza a rácsból számolódik (oszlopköz + a középső oszlop fele
   − a pont távolsága a tubus tengelyétől), ezért 1101 és 2560 px között minden szélességen illeszkedik.
   Miért csak 1101 px-től: keskenyebb szövegoszlopban egy két soros cím vagy egy hosszabb bekezdés megnyújtja az első sort, és az alsó
   pontok a tubus aljára csúsznak (901–960 px-en a tubus 68–78%-ára; 1101 px fölött mind az öt oldalon 48–59%). 1100 px-ig ezért a
   tableten is használt elrendezés áll (tubus felül, alatta 2×2); ez a közös 1100 px-es töréspont.
   --px: a pont távolsága a tubus függőleges tengelyétől, a tubus szélességének arányában (0 = közép, .5 = a tubus széle);
   az értékek a .termekoldal --px-bf/-jf/-bl/-jl változóiból jönnek, termékenként felülírhatók (lásd fent, Ajakápoló).
   A törés mindig a tubuson kívül esik: a ferde szakasz vízszintes hossza (.5 − px) × tubusszélesség + a kör 6%-a. */
@media (min-width: 1101px) {
  .termekoldal .elony-abra {
    --kozep: clamp(280px, 29vw, 420px);
    --res: clamp(28px, 3.6vw, 56px);                                     /* oszlopköz a szöveg és a körök között */
    grid-template-columns: minmax(0, 1fr) var(--kozep) minmax(0, 1fr); grid-template-rows: minmax(calc(var(--kozep) / 2), auto) auto; gap: 0 var(--res); margin-top: 24px;
  }
  /* a tubus a rács tetejéhez kötve (nem középre): ha egy hosszú szöveg megnöveli a sort, a felső pontok akkor is a tubuson maradnak */
  .termekoldal .elony-tubus { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  /* a szövegek helye a körhöz kötve: a felsők a kör tetejétől 6%-kal, az alsók a kör közepe alatt 14%-kal kezdődnek
     (az első sor legalább a kör fele; csak akkor magasabb, ha a felső szöveg nem fér el benne: ilyenkor az alsók lejjebb csúsznak) */
  .termekoldal .elony {
    --fent: calc(var(--kozep) * .06);
    --dx: calc(var(--tubus-w) * (.5 - var(--px)) + var(--kozep) * .06);                  /* a ferde szakasz vízszintes hossza */
    --pont-tav: calc(var(--res) + var(--kozep) / 2 - var(--tubus-w) * var(--px));       /* a pont középpontja a szöveg oszlopának belső szélétől */
    align-self: start; padding-top: var(--fent);
  }
  /* a négy pont nem szabályos téglalapban áll (mint a Hostinger-képeken): a bal felső és a jobb alsó beljebb, a másik kettő kijjebb */
  .termekoldal .elony:nth-child(2) { grid-column: 1; grid-row: 1; --px: var(--px-bf); --dy: calc(var(--dx) * .8391); }
  .termekoldal .elony:nth-child(3) { grid-column: 3; grid-row: 1; --px: var(--px-jf); --dy: calc(var(--dx) * .8391); }
  .termekoldal .elony:nth-child(4) { grid-column: 1; grid-row: 2; --px: var(--px-bl); --dy: calc(var(--dx) * -.8391); --fent: calc(var(--kozep) * .14); }
  .termekoldal .elony:nth-child(5) { grid-column: 3; grid-row: 2; --px: var(--px-jl); --dy: calc(var(--dx) * -.8391); --fent: calc(var(--kozep) * .14); }
  /* a vonal fehér szegélye a sötét tubuson (Sportkrém) is láthatóvá teszi; a világos háttéren nem látszik */
  .termekoldal .elony::before, .termekoldal .elony::after { top: calc(var(--fent) + var(--vonal-y)); height: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
  /* vízszintes szakasz: 14 px-re a szöveg oszlopától a törésig */
  .termekoldal .elony::before { width: calc(var(--pont-tav) - var(--dx) - 14px); }
  /* ferde szakasz: a töréstől a pontig (hossza dx / cos 40°) */
  .termekoldal .elony::after { width: calc(var(--dx) * 1.3054); }
  /* pont: a ferde szakasz végén (dy = ± dx · tg 40°; a felső sorban lefelé, az alsóban felfelé) */
  .termekoldal .elony h3::after { top: calc(var(--fent) + var(--vonal-y) + var(--dy) - var(--pont) / 2); }
  /* bal oldal (2., 4. elem): a vonal a szöveg oszlopa mellől indul jobbra */
  .termekoldal .elony:nth-child(2n)::before { left: calc(100% + 14px); }
  .termekoldal .elony:nth-child(2n)::after { left: calc(100% + var(--pont-tav) - var(--dx)); transform-origin: 0 0; }
  .termekoldal .elony:nth-child(2n) h3::after { left: calc(100% + var(--pont-tav) - var(--pont) / 2); }
  /* jobb oldal (3., 5. elem): a tükörképe */
  .termekoldal .elony:nth-child(2n+3)::before { right: calc(100% + 14px); }
  .termekoldal .elony:nth-child(2n+3)::after { right: calc(100% + var(--pont-tav) - var(--dx)); transform-origin: 100% 0; }
  .termekoldal .elony:nth-child(2n+3) h3::after { right: calc(100% + var(--pont-tav) - var(--pont) / 2); }
  .termekoldal .elony:nth-child(2)::after, .termekoldal .elony:nth-child(5)::after { transform: rotate(40deg); }    /* bal fent: le; jobb lent: fel */
  .termekoldal .elony:nth-child(3)::after, .termekoldal .elony:nth-child(4)::after { transform: rotate(-40deg); }   /* jobb fent: le; bal lent: fel */
}
/* Előnyábra, keskeny asztal, tablet és mobil (1100 px-ig): fent a tubus a körökkel, alatta az előnyök (561–1100 px: 2×2,
   560 px-ig egymás alatt); mindegyik mellett függőleges vonal, a cím magasságában ponttal (a Hostinger mobilképeinek függőleges vonalait idézi) */
@media (max-width: 1100px) {
  .termekoldal .elony { padding-left: 30px; }
  .termekoldal .elony::before { left: 5px; top: var(--vonal-y); bottom: 4px; width: 1px; }
  .termekoldal .elony::after { display: none; }
  .termekoldal .elony h3::after { left: calc(5.5px - var(--pont) / 2); top: calc(var(--vonal-y) - var(--pont) / 2); }
}
@media (min-width: 561px) and (max-width: 1100px) {
  .termekoldal .elony-abra { --kozep: 320px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
  .termekoldal .elony-tubus { grid-column: 1 / -1; margin-bottom: 4px; }
}
@media (max-width: 1100px) {
  .termekoldal .helyzet { aspect-ratio: 1 / 1; }
  .termekoldal .helyzet::before { background: linear-gradient(0deg, rgba(2, 22, 69, .92) 0%, rgba(2, 22, 69, .72) 34%, rgba(2, 22, 69, .3) 60%, rgba(2, 22, 69, 0) 78%); }
  .termekoldal .helyzet-vilagos::before { background: linear-gradient(0deg, rgba(2, 22, 69, .82) 0%, rgba(2, 22, 69, .52) 30%, rgba(2, 22, 69, .14) 52%, rgba(2, 22, 69, 0) 66%); }
  .termekoldal .helyzet-szoveg { padding: 22px 22px 24px; }
}
@media (min-width: 641px) and (max-width: 720px) {
  .termekoldal .helyzet-racs { grid-template-columns: minmax(0, 1fr); }
  .termekoldal .helyzet { aspect-ratio: 5 / 4; }
}
@media (max-width: 900px) {
  .termekoldal .lepes-racs { grid-template-columns: 1fr; gap: 36px; margin-top: 32px; }
  .termekoldal .lepes-tubus img { height: 280px; }
  .termekoldal .formula-img { max-width: 440px; }
}
/* tablet: a kép teljes egészében felül, a szöveg alatta, világos sávon (így a tubus sosem takarja) */
@media (min-width: 641px) and (max-width: 900px) {
  .termekoldal .termek-hero { --fokusz: var(--navy); display: block; min-height: 0; background: var(--bg-1); color: var(--text); }
  .termekoldal .termek-hero > picture { position: relative; display: block; height: auto; aspect-ratio: 16 / 9; z-index: auto; }
  .termekoldal .termek-hero-doboz { max-width: 640px; }
  .termekoldal .termek-hero-doboz::before { display: none; }
  .termekoldal .termek-hero-in { padding-block: 36px 52px; }
  .termekoldal .termek-hero-cim { color: var(--navy); text-shadow: none; }
  .termekoldal .termek-hero-cimke { color: var(--navy-2); }
  .termekoldal .termek-hero-szoveg { text-shadow: none; }
  .termekoldal .termek-hero .btn-termek { border-color: transparent; }
}
/* mobil: a szöveg az ég előtt, a tubus alul; a sötétítés a kép tetejétől a bekezdés aljáig egyenletes, a gomb mögött elhalványul */
@media (max-width: 640px) {
  .termekoldal .termek-hero { align-items: flex-start; min-height: var(--hero-mobil-min); }
  .termekoldal .termek-hero > picture img { object-position: var(--hero-mobil-pos); }
  .termekoldal .termek-hero-in { padding-block: 28px 32px; }
  .termekoldal .termek-hero-doboz { max-width: none; }
  .termekoldal .termek-hero-doboz::before { top: -60px; bottom: -24px; right: -100vw; background: linear-gradient(180deg, rgba(2, 22, 69, var(--hero-mobil-sotetites)) calc(100% - 96px), rgba(2, 22, 69, 0) 100%); -webkit-mask-image: none; mask-image: none; }
  .termekoldal .termek-hero-cim { font-size: 40px; }
  .termekoldal .termek-hero-cimke { margin-top: 8px; font-size: 15px; }
  .termekoldal .termek-hero-szoveg { margin-top: 14px; font-size: 16px; line-height: 1.55; }
  .termekoldal .termek-hero .btn-termek { margin-top: 20px; }
  .termekoldal .elony-abra { gap: 26px; margin-top: 24px; }
  .termekoldal .elony h3 { font-size: 20px; }
  .termekoldal .helyzet-racs { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .termekoldal .helyzet { aspect-ratio: 5 / 4; }
  .termekoldal .helyzet h3 { font-size: 21px; }
  .termekoldal .helyzet p { font-size: 15.5px; }
  .termekoldal .lepes-tubus img { height: 240px; }
  .termekoldal .lepes { grid-template-columns: 40px 1fr; gap: 16px; }
  .termekoldal .lepes-szam { width: 40px; height: 40px; font-size: 17px; }
  .termekoldal .lepes:not(:last-child)::before { left: 19px; top: 48px; }
  .termekoldal .lepes h3 { margin-top: 7px; font-size: 19px; }
  .termekoldal .kinek { margin-top: 36px; }
  .termekoldal .osszetevok { margin-top: 40px; padding: 22px 20px; }
  /* „szoveg-alul” változat (hosszú bevezetőhöz): a kép felül 4:5-ös kivágásban, a szöveg alatta, mint tableten */
  .termekoldal .termek-hero.szoveg-alul { --fokusz: var(--navy); display: block; min-height: 0; background: var(--bg-1); color: var(--text); }
  .termekoldal .termek-hero.szoveg-alul > picture { position: relative; display: block; height: auto; aspect-ratio: 4 / 5; z-index: auto; }
  .termekoldal .termek-hero.szoveg-alul .termek-hero-doboz::before { display: none; }
  .termekoldal .termek-hero.szoveg-alul .termek-hero-in { padding-block: 28px 44px; }
  .termekoldal .termek-hero.szoveg-alul .termek-hero-cim { color: var(--navy); text-shadow: none; }
  .termekoldal .termek-hero.szoveg-alul .termek-hero-cimke { color: var(--navy-2); }
  .termekoldal .termek-hero.szoveg-alul .termek-hero-szoveg { text-shadow: none; }
  .termekoldal .termek-hero.szoveg-alul .btn-termek { border-color: transparent; }
}
@media (max-width: 400px) {
  .termekoldal .helyzet { aspect-ratio: 1 / 1; }   /* keskeny mobilon a két soros cím és a bekezdés is a képen marad */
}

/* ---------- Mozgás (csak ha a látogató nem kért csökkentett mozgást) ----------
   A rendszer (a .reveal / .is-in állapot, a --i lépcsőzés, a nyitókép belépése, a körkép elfordulása) a style.css „Mozgás”
   szakaszában van; itt csak a termékoldal saját koreográfiája. Az átmenet itt is csak a megjelenő (.is-in) állapoton van. */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Három lépés: a lépések sorban jelennek meg, a köztük futó vonal utánuk lefelé kirajzolódik (a sorrendet mutatja) */
  .termekoldal .lepes.reveal::before { transform: scaleY(0); transform-origin: 50% 0; }
  .termekoldal .lepes.reveal.is-in::before { transform: none; transition: transform .5s var(--ease-out) calc(var(--i, 0) * 90ms + .3s); }

  /* Előnyábra: a tubus és a körök megérkeznek, a szövegek sorban beúsznak, a vezetővonalak a szövegtől a tubusig kirajzolódnak
     (clip-path), a végén a pont „pattan”: az ábra elmondja, melyik előny hova tartozik. A tároló maga nem mozog, és a cím csak
     elhalványul: transformtól a pontja (a cím pszeudo-eleme) elugrana a tubusról. --n: az előny sorszáma (0–3). */
  .termekoldal .elony-abra.reveal { opacity: 1; transform: none; }
  .termekoldal .elony:nth-child(2) { --n: 0; } .termekoldal .elony:nth-child(3) { --n: 1; }
  .termekoldal .elony:nth-child(4) { --n: 2; } .termekoldal .elony:nth-child(5) { --n: 3; }
  /* a kezdő vágás nulla széles (100% + 3 px): különben a vonal 1 px-es árnyéka a kezdőpontnál pöttyként látszana */
  .termekoldal .elony { --clip-0: inset(-3px calc(100% + 3px) -3px -3px); }                 /* bal oldali előny: balról jobbra */
  .termekoldal .elony:nth-child(2n+3) { --clip-0: inset(-3px -3px -3px calc(100% + 3px)); } /* jobb oldali előny: jobbról balra */
  /* kezdőállapot (azonnal, átmenet nélkül) */
  .termekoldal .elony-abra.reveal .elony-tubus > picture { opacity: 0; transform: translateY(14px) scale(.97); }
  .termekoldal .elony-abra.reveal .elony-tubus::before { opacity: 0; transform: scale(.9); }
  .termekoldal .elony-abra.reveal .elony h3 { opacity: 0; }
  .termekoldal .elony-abra.reveal .elony p { opacity: 0; transform: translateY(10px); }
  .termekoldal .elony-abra.reveal .elony::before, .termekoldal .elony-abra.reveal .elony::after { clip-path: var(--clip-0); }
  .termekoldal .elony-abra.reveal .elony h3::after { transform: scale(0); }
  /* megjelenés (animált, lépcsőzve) */
  .termekoldal .elony-abra.reveal.is-in .elony-tubus > picture { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
  .termekoldal .elony-abra.reveal.is-in .elony-tubus::before { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) .1s, transform 1.1s var(--ease-out) .1s; }
  .termekoldal .elony-abra.reveal.is-in .elony h3 { opacity: 1; transition: opacity .5s var(--ease-out) calc(.35s + var(--n) * .12s); }
  .termekoldal .elony-abra.reveal.is-in .elony p { opacity: 1; transform: none;
    transition: opacity .5s var(--ease-out) calc(.42s + var(--n) * .12s), transform .6s var(--ease-out) calc(.42s + var(--n) * .12s); }
  .termekoldal .elony-abra.reveal.is-in .elony::before { clip-path: inset(-3px); transition: clip-path .45s var(--ease-out) calc(.55s + var(--n) * .12s); }
  .termekoldal .elony-abra.reveal.is-in .elony::after { clip-path: inset(-3px); transition: clip-path .35s var(--ease-out) calc(.95s + var(--n) * .12s); }
  .termekoldal .elony-abra.reveal.is-in .elony h3::after { transform: none; transition: transform .4s var(--ease-rugo) calc(1.25s + var(--n) * .12s); }
  /* 1100 px-ig a vonal függőleges: fentről lefelé rajzolódik ki */
  @media (max-width: 1100px) {
    .termekoldal .elony, .termekoldal .elony:nth-child(2n+3) { --clip-0: inset(-3px -3px calc(100% + 3px) -3px); }
  }

  /* Élethelyzet-kártyák, belépő (minden nézetben): egy kártyán belül egymásba futó fázisok. A kártya alulról „kinyílik”
     (clip-path, .9 s), közben a kép a helyére ül (scale 1.14 → 1, 1,4 s); mindkettő lágyan lassul (--ease-nyit), így a kinyílás
     végig látszik (a gyors indulású --ease-out mellett kb. 0,2 s alatt lefutna). A két sötétítő réteg a vágással együtt indul,
     40%-ról: a világos fotó nem villan fel, a fényerő nem „pumpál”. 380 ms-tól a cím, 480 ms-tól a bekezdés érkezik: mindegyik
     az előző vége előtt indul, a szöveg már sötét alapra úszik be. --t: a main.js --i-jéből (az egyszerre feltűnő kártyák
     sorszáma) 120 ms-os lépcső. A mobil paklin nincs lépcső, és a szöveg korábban jön (lent).
     A kártya maga nem úszik és nem halványul. Rejtve a .reveal alapszabálya szerint átlátszó (nem levágott: a Chromium
     IntersectionObservere a cél saját clip-path-ját is beszámítja, a teljesen levágott kártya sosem „lépne be”); megjelenéskor
     az átlátszósága átmenet nélkül 1, és ugyanabban a pillanatban a vágás-animáció kezdőállapota takarja (backwards kitöltés,
     a késleltetés alatt is). A vágás végállapota az árnyékon (0 12px 34px) is túlér (felül 28, oldalt 40, alul 52 px), a lefutás
     után pedig nincs vágás: a kártya ugyanúgy áll, mint a betöltéskor már látszó. A vágás nem mozdítja a pszeudo-elemeket. */
  .termekoldal .helyzet { --ease-nyit: cubic-bezier(.22, .61, .36, 1); }
  .termekoldal .helyzet.reveal { transform: none; }
  .termekoldal .helyzet.reveal > picture { transform: scale(1.14); }
  .termekoldal .helyzet.reveal::before, .termekoldal .helyzet.reveal .helyzet-szoveg::before { opacity: .4; }
  .termekoldal .helyzet.reveal h3, .termekoldal .helyzet.reveal p { opacity: 0; transform: translateY(14px); }
  .termekoldal .helyzet.reveal.is-in { --t: calc(var(--i, 0) * 120ms); transition: none; animation: helyzet-nyit .9s var(--ease-nyit) var(--t) backwards; }
  .termekoldal .helyzet.reveal.is-in > picture { transform: none; transition: transform 1.4s var(--ease-nyit) var(--t); }
  .termekoldal .helyzet.reveal.is-in::before, .termekoldal .helyzet.reveal.is-in .helyzet-szoveg::before { opacity: 1;
    transition: opacity .6s var(--ease-out) var(--t); }
  .termekoldal .helyzet.reveal.is-in h3 { opacity: 1; transform: none;
    transition: opacity .5s var(--ease-out) calc(var(--t) + .38s), transform .7s var(--ease-out) calc(var(--t) + .38s); }
  .termekoldal .helyzet.reveal.is-in p { opacity: 1; transform: none;
    transition: opacity .5s var(--ease-out) calc(var(--t) + .48s), transform .7s var(--ease-out) calc(var(--t) + .48s); }
  @keyframes helyzet-nyit {
    from { clip-path: inset(100% 0 0 0 round var(--radius)); }
    to { clip-path: inset(-28px -40px -52px round calc(var(--radius) + 40px)); }
  }

  /* Élethelyzet-kártyák, mobil „pakli” (720 px-ig, egy oszlopban): görgetés közben a kártyák egymásra csúsznak. Mindegyik a fejléc
     alatt tapad (sticky), 10 px-szel lejjebb, mint az előző, így a korábbiak felső széle kilátszik; a későbbi kártya a DOM-sorrend
     miatt kerül fölé. --k: a kártya helye a rácsban (a main.js --i-je más: az egyszerre feltűnők sorszáma).
     A rács itt flex oszlop: így a sticky biztosan a rács dobozán belül mozog (rácselemnél a specifikáció szerint a saját cellája
     a határ), ezért a pakli a rács végén együtt gördül tovább, és nem takarja a következő szakaszt. A fejléc (z-index 50) és a lebegő gomb (40) fölötte marad.
     Csak álló, legfeljebb 3:4-es képernyőn: ott a kártya a fejléc alatt mindig teljesen elfér. Fekvő telefonon (pl. 667 × 375)
     a kártya magasabb a látható résznél, és a következő kártya a szövegét takarná el, mielőtt látszana: ott sima lista marad. */
  @media (max-width: 720px) and (max-aspect-ratio: 3 / 4) {
    .termekoldal .helyzet-racs { display: flex; flex-direction: column; gap: 24px; }
    .termekoldal .helyzet { --teto: calc(var(--header-h) + 12px + var(--k, 0) * 10px); position: sticky; top: var(--teto); }
    .termekoldal .helyzet:nth-child(2) { --k: 1; } .termekoldal .helyzet:nth-child(3) { --k: 2; }
    .termekoldal .helyzet:nth-child(4) { --k: 3; } .termekoldal .helyzet:nth-child(5) { --k: 4; } .termekoldal .helyzet:nth-child(6) { --k: 5; }
    /* Belépő a paklin: nincs lépcső (--t: 0). Lefelé görgetve a kártyák úgyis egyenként érkeznek; ha egyszerre több jelenik meg
       (pl. oldalon belüli ugrás után visszagörgetve), egymáson állnak, és lépcsővel a letakartak nyílnának ki a felső előtt.
       A cím 120, a bekezdés 180 ms-tól jön (asztalon 380/480): itt az olvasható szakaszt a rácsúszó következő kártya zárja le,
       gyors görgetésnél a késői szöveg el sem érkezne. */
    .termekoldal .helyzet.reveal.is-in { --t: 0ms; }
    .termekoldal .helyzet.reveal.is-in h3 { transition-delay: .12s; }
    .termekoldal .helyzet.reveal.is-in p { transition-delay: .18s; }
    /* Ráfutáskor az előző kártya hátrébb lép (kicsit kisebb, a felső éle helyben marad) és enyhén elsötétül: görgetéshez kötött
       animáció (scroll-driven), a KÖVETKEZŐ kártya nézet-idővonalán (view-timeline; a név a rácson látszik: timeline-scope).
       Tartomány: attól, hogy a következő kártya teteje eléri ennek az alját, addig, amíg a következő letapad. Az „entry” szakaszhoz
       mérve (0%: a következő kártya teteje a nézet alján; a % a kártya magasságához mér): kezdet 100dvh − --teto − 100%, vég
       100dvh − --teto − 10 px. Azért az „entry”, mert a teljes tartomány a letapadás ELŐTTI szakaszra esik, ahol a sticky kártya
       még a helyén áll; az „exit”-et a Chromium sticky alanynál a legnagyobb tapadási eltolással (a rács aljáról) számolja.
       A sötétítő réteg (::after) e kártyán belül van, a fölé csúszó kártyát nem éri. Ahol nincs ilyen animáció, a sima
       egymásra csúszás marad. */
    @supports (animation-timeline: view()) and (timeline-scope: --a) {
      .termekoldal .helyzet-racs { timeline-scope: --helyzet-2, --helyzet-3, --helyzet-4, --helyzet-5, --helyzet-6; }
      .termekoldal .helyzet { view-timeline-inset: 0; }   /* különben a html scroll-padding-je (fejléc, lebegő gomb) tolná el */
      .termekoldal .helyzet:nth-child(2) { view-timeline-name: --helyzet-2; } .termekoldal .helyzet:nth-child(3) { view-timeline-name: --helyzet-3; }
      .termekoldal .helyzet:nth-child(4) { view-timeline-name: --helyzet-4; } .termekoldal .helyzet:nth-child(5) { view-timeline-name: --helyzet-5; }
      .termekoldal .helyzet:nth-child(6) { view-timeline-name: --helyzet-6; }
      .termekoldal .helyzet:nth-child(1) { --kov: --helyzet-2; } .termekoldal .helyzet:nth-child(2) { --kov: --helyzet-3; }
      .termekoldal .helyzet:nth-child(3) { --kov: --helyzet-4; } .termekoldal .helyzet:nth-child(4) { --kov: --helyzet-5; }
      .termekoldal .helyzet:nth-child(5) { --kov: --helyzet-6; }
      .termekoldal .helyzet { --tartomany: entry calc(100dvh - var(--teto) - 100%) entry calc(100dvh - var(--teto) - 10px); }
      .termekoldal .helyzet:not(:last-child), .termekoldal .helyzet:not(:last-child)::after {
        animation: helyzet-hatra linear both; animation-timeline: var(--kov, none); animation-range: var(--tartomany); }
      /* a megjelenő kártyán a belépő és a pakli animációja együtt fut (a kettő más tulajdonságot mozgat) */
      .termekoldal .helyzet.reveal.is-in:not(:last-child) { animation: helyzet-nyit .9s var(--ease-nyit) var(--t) backwards, helyzet-hatra linear both;
        animation-timeline: auto, var(--kov, none); animation-range: normal, var(--tartomany); }
      .termekoldal .helyzet:not(:last-child) { transform-origin: 50% 0; }
      .termekoldal .helyzet:not(:last-child)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: var(--navy-deep); opacity: 0; animation-name: helyzet-sotetul; }
    }
  }
  @keyframes helyzet-hatra { to { transform: scale(.94); } }
  @keyframes helyzet-sotetul { to { opacity: .4; } }
}

/* ---------- Előnyábra mobilon: kísérő tubus + hullám (jóváhagyva 2026-10-17; ahol a .elony-pontok jelölő megvan: mind az öt termékoldal) ----------
   A) ≤720 px: a tubus a körökkel a fejléc alatt marad (sticky), az előnyök alatta haladnak el. Amelyik előny a képernyő
      figyelő sávjába ér (main.js, IntersectionObserver), azt a .aktiv és a tároló data-aktiv="0–3" jelöli: a tubuson a hozzá
      tartozó pont kiemelkedik, egyszer gyűrű fut körbe rajta, és kirajzolódik a szöveg felé mutató rövid vonal; a többi előny
      kicsit halványabb (opacity .7: a szöveg így is AA kontrasztú). A pontok helye a tubus magasságának arányában
      (a fenti asztali pontok közelítése), vízszintesen a --px-* változókból.
   C) ≤1100 px: a szakasz megjelenésekor a körök kétszer kifelé hullámzanak.
   JavaScript nélkül és csökkentett mozgásnál a mostani, mozdulatlan lista marad (a .kovet osztályt a main.js teszi rá). */
.termekoldal .elony-pontok { display: none; }
@media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .termekoldal .elony-abra:has(.elony-pontok) .elony-tubus::after { content: ""; grid-area: 1 / 1; z-index: -1; width: var(--kozep); aspect-ratio: 1;
    border-radius: 50%; border: 2px solid rgba(30, 51, 99, .55); opacity: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(30, 51, 99, 0) 72%, rgba(30, 51, 99, .14) 96%, rgba(30, 51, 99, 0) 100%); }
  .termekoldal .elony-abra.is-in:has(.elony-pontok) .elony-tubus::after { animation: elony-hullam 1.8s cubic-bezier(.22, .61, .36, 1) .35s 2; }
}
@media screen and (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .termekoldal .elony-abra.kovet { --kozep: min(232px, 60vw); --tubus-h: calc(var(--kozep) * var(--tubus-magas));
    container-type: inline-size; overflow: visible clip; }   /* cqw: a vonal hossza a tároló szélességéből; függőlegesen vág: a felfutó vonal a tubus alatt marad */
  /* a ragadó tubus: teljes szélességű háttér (a lista alatta fut el), az alja finoman elhalványul */
  .termekoldal .elony-abra.kovet .elony-tubus { position: sticky; top: var(--header-h); z-index: 3; margin-inline: calc(-1 * var(--gutter)); padding-block: 10px 22px;
    background: var(--elony-hatter); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 20px), transparent); }
  .termekoldal .elony-abra.kovet .elony-pontok { display: block; grid-area: 1 / 1; position: relative; width: var(--tubus-w); height: calc(var(--kozep) * var(--tubus-magas)); pointer-events: none; }
  /* egy pont: az <i> maga a pont (termékszín, fehér gyűrű, sötétkék szegély), ::before a kiemeléskor egyszer kitáguló gyűrű,
     ::after az összekötő vonal. A pont maga nem nagyít (a transform a vonalat is nyújtaná): a nem kiemelt pont halványabb. */
  .termekoldal .elony-pontok i { position: absolute; left: calc(50% + var(--x) * 100%); top: calc(var(--y) * 100%); box-sizing: border-box;
    width: var(--pont); height: var(--pont); margin: calc(var(--pont) / -2) 0 0 calc(var(--pont) / -2); border-radius: 50%;
    background: var(--termek); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--vonal);
    opacity: 0; transition: opacity .3s var(--ease-out); }
  .termekoldal .elony-pontok i:nth-child(1) { --x: calc(-1 * var(--px-bf)); --y: .24; }   /* bal fent */
  .termekoldal .elony-pontok i:nth-child(2) { --x: var(--px-jf); --y: .18; }               /* jobb fent */
  .termekoldal .elony-pontok i:nth-child(3) { --x: calc(-1 * var(--px-bl)); --y: .53; }   /* bal lent */
  .termekoldal .elony-pontok i:nth-child(4) { --x: var(--px-jl); --y: .48; }               /* jobb lent */
  .termekoldal .elony-pontok i::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--termek); opacity: 0; }
  /* összekötő: L alakú vonal a pontból vízszintesen a saját oldali sínig (bal pont: bal sín, jobb pont: jobb sín), onnan le a ragadó
     tubus aljáig; ott a kiemelt előny felfutó vonala folytatja (lent). --dx: a pont és a sín távolsága, --dh: a pont és a tubus alja. */
  .termekoldal .elony-pontok i::after { content: ""; position: absolute; top: 50%; box-sizing: border-box; width: var(--dx); height: var(--dh);
    --dx: calc(50cqw - var(--pxa) * var(--tubus-w) - 4.5px);
    --dh: calc(var(--kozep) / 2 + var(--tubus-h) / 2 + 22px - var(--y) * var(--tubus-h));   /* a pont középétől a tubus-sáv aljáig */
    border-top: 2px solid var(--vonal); filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)); clip-path: var(--l-0); }
  .termekoldal .elony-pontok i:nth-child(odd)::after { left: calc(50% - var(--dx)); border-left: 2px solid var(--vonal); border-top-left-radius: 14px;
    --l-0: polygon(calc(100% + 3px) -3px, calc(100% + 3px) -3px, calc(100% + 3px) 5px, calc(100% + 3px) 5px); }
  .termekoldal .elony-pontok i:nth-child(even)::after { left: 50%; border-right: 2px solid var(--vonal); border-top-right-radius: 14px;
    --l-0: polygon(-3px -3px, -3px -3px, -3px 5px, -3px 5px); }
  .termekoldal .elony-pontok i:nth-child(1) { --pxa: var(--px-bf); } .termekoldal .elony-pontok i:nth-child(2) { --pxa: var(--px-jf); }
  .termekoldal .elony-pontok i:nth-child(3) { --pxa: var(--px-bl); } .termekoldal .elony-pontok i:nth-child(4) { --pxa: var(--px-jl); }
  /* a pontok a tubussal együtt jelennek meg (megjelenés után); a nem kiemelt kicsit halványabb */
  .termekoldal .elony-abra.kovet:not(.reveal) .elony-pontok i, .termekoldal .elony-abra.kovet.is-in .elony-pontok i { opacity: .85; }
  /* kiemelt pont: teljes színű, a gyűrű egyszer kifut, az összekötő kirajzolódik */
  .termekoldal .elony-abra.kovet[data-aktiv="0"] .elony-pontok i:nth-child(1), .termekoldal .elony-abra.kovet[data-aktiv="1"] .elony-pontok i:nth-child(2),
  .termekoldal .elony-abra.kovet[data-aktiv="2"] .elony-pontok i:nth-child(3), .termekoldal .elony-abra.kovet[data-aktiv="3"] .elony-pontok i:nth-child(4) {
    opacity: 1; }
  .termekoldal .elony-abra.kovet[data-aktiv="0"] .elony-pontok i:nth-child(1)::before, .termekoldal .elony-abra.kovet[data-aktiv="1"] .elony-pontok i:nth-child(2)::before,
  .termekoldal .elony-abra.kovet[data-aktiv="2"] .elony-pontok i:nth-child(3)::before, .termekoldal .elony-abra.kovet[data-aktiv="3"] .elony-pontok i:nth-child(4)::before {
    animation: elony-gyuru .9s var(--ease-out) .05s both; }
  .termekoldal .elony-abra.kovet[data-aktiv="0"] .elony-pontok i:nth-child(1)::after, .termekoldal .elony-abra.kovet[data-aktiv="2"] .elony-pontok i:nth-child(3)::after {
    animation: elony-l-bal .55s var(--ease-out) .05s both; }
  .termekoldal .elony-abra.kovet[data-aktiv="1"] .elony-pontok i:nth-child(2)::after, .termekoldal .elony-abra.kovet[data-aktiv="3"] .elony-pontok i:nth-child(4)::after {
    animation: elony-l-jobb .55s var(--ease-out) .05s both; }
  /* a lista cikcakkban: a bal oldali pontokhoz tartozó előnyök (bal fent, bal lent) a cím pontját bal oldalon, a jobb oldaliak jobb
     oldalon és jobbra igazított szöveggel kapják; mindkét oldalon 22 px szabad sáv marad a másik oldal felfutó vonalának */
  .termekoldal .elony-abra.kovet .elony { padding-right: 22px; }
  .termekoldal .elony-abra.kovet .elony:nth-child(2n+3) { padding-left: 22px; padding-right: 30px; text-align: right; }
  .termekoldal .elony-abra.kovet .elony:nth-child(2n+3) h3::after { left: auto; right: calc(5.5px - var(--pont) / 2); }
  /* a cím alatti sín itt nem kell (a kivitelező kérése, 2026-10-17): csak a cím pontja marad, a kiemeltnél ebben végződik a felfutó vonal */
  .termekoldal .elony-abra.kovet .elony::before { display: none; }
  /* a nem kiemelt előny kicsit halványabb (opacity .7: a szöveg így is AA kontrasztú) */
  .termekoldal .elony-abra.kovet[data-aktiv] .elony { opacity: .7; transition: opacity .35s var(--ease-out); }
  .termekoldal .elony-abra.kovet[data-aktiv] .elony.aktiv { opacity: 1; }
  /* felfutó vonal: a kiemelt előny címének pontjától fel, a ragadó tubus mögé (az takarja, és a tároló függőlegesen vág), így a
     tubusból lefutó L-lel együtt egy vonal köti össze a pontot és a címet, bárhol tart a görgetés */
  .termekoldal .elony-abra.kovet .elony::after { display: block; content: ""; left: 4.5px; width: 2px; height: 120vh; bottom: calc(100% - var(--vonal-y));
    top: auto; background: var(--vonal); opacity: 0; clip-path: none; box-shadow: none; transform: none; }
  .termekoldal .elony-abra.kovet .elony:nth-child(2n+3)::after { left: auto; right: 4.5px; }
  .termekoldal .elony-abra.kovet .elony.aktiv::after { opacity: 1; transition: opacity .2s var(--ease-out) .45s; }
}
/* az összekötő L kirajzolódása: előbb a vízszintes szakasz a ponttól a sínig, aztán a függőleges le */
@keyframes elony-l-bal {
  0% { clip-path: polygon(calc(100% + 3px) -3px, calc(100% + 3px) -3px, calc(100% + 3px) 5px, calc(100% + 3px) 5px); }
  50% { clip-path: polygon(-3px -3px, calc(100% + 3px) -3px, calc(100% + 3px) 5px, -3px 5px); }
  100% { clip-path: polygon(-3px -3px, calc(100% + 3px) -3px, calc(100% + 3px) calc(100% + 3px), -3px calc(100% + 3px)); } }
@keyframes elony-l-jobb {
  0% { clip-path: polygon(-3px -3px, -3px -3px, -3px 5px, -3px 5px); }
  50% { clip-path: polygon(-3px -3px, calc(100% + 3px) -3px, calc(100% + 3px) 5px, -3px 5px); }
  100% { clip-path: polygon(-3px -3px, calc(100% + 3px) -3px, calc(100% + 3px) calc(100% + 3px), -3px calc(100% + 3px)); } }
@keyframes elony-hullam { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } }
/* a gyűrű: a pont körül indul, kitágul és elhalványul (csak transform és opacity mozog) */
@keyframes elony-gyuru { 0% { opacity: .9; transform: scale(.8); } 75%, 100% { opacity: 0; transform: scale(2.4); } }