/* ============================================================
   Számlix landing — elrendezés és komponensek.

   Itt csak var(--…) hivatkozás szerepelhet; hex, nyers px-térköz és
   radius a tokens.css-be tartozik. Kivétel a @media-töréspontok
   értéke, mert custom property media query-ben nem működik.

   Töréspontok (brief): 1024 / 768 / 390 px.

   Tartalom:
     1. Reset és alapok
     2. Elrendezés
     3. Komponensek (gomb, badge, kártya, fül, toggle)
     4. Szekciók (a szekciónkénti lépésekben töltődik fel)
     5. Reszponzív viselkedés
   ============================================================ */

/* ============================================================
   1. RESET ÉS ALAPOK
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-surface-page);
  color: var(--color-slate-900);
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, ul, ol {
  margin: 0;
}

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

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

img {
  height: auto;
}

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

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

form {
  margin: 0;
}

:focus-visible {
  outline: var(--space-2) solid var(--color-indigo-500);
  outline-offset: var(--space-2);
}

/* ============================================================
   2. ELRENDEZÉS
   ============================================================ */

/* A Figma minden szekciót egy 1280 px széles, középre igazított
   tartalmi sávban helyez el (1440 px-es tervezési szélesség mellett
   80 px-es oldalmargóval). A padding-inline csak keskenyebb nézetben
   lép életbe, amíg a max-width el nem éri az 1280-at. */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-24);
}

/* A CTA-kártya és a footer saját, --space-32 oldalpárnázást ad a
   .container fölé (605:3285 "Container": px-32 a max-width:1280-en
   belül), ugyanúgy, ahogy a többi szekció is a saját Figma-értékét
   rakja a .container-re. */
.footer-container {
  padding-inline: var(--space-32);
}

/* A Figma redline-ja szerint minden fő szekció (Hero, Funkciók, Kinek
   szól, Árazás) között pontosan --space-160 a függőleges térköz —
   ugyanez a token adja a Hero saját felső térközét is a nav alatt.
   A testvér-szelektor miatt ez minden jövőbeli szekcióra is
   automatikusan vonatkozik majd, nem csak a jelenleg beépítettekre.
   A Hero és a Funkciók a közös .hero-wrap-ban van (animált háttér),
   ezért azon belül és utána is ugyanez a ritmus érvényes. */
main > section + section,
main > .hero-wrap + section,
.hero-wrap > section + section {
  margin-top: var(--space-160);
}

/* ============================================================
   3. KOMPONENSEK
   ============================================================ */

/* A gombok (.btn és változatai) a közös buttons.css-ben vannak; itt csak
   a landingre jellemző elhelyezés marad. */

/* Számozott szekció-fejléc (eyebrow): kör jelvény + elhalványuló
   elválasztó vonal. A 02 Kinek szól és a 03 Árazás fejléce ugyanezt
   a mintát ismétli. */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.section-eyebrow-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-indigo-100);
  border: 1px solid var(--color-indigo-200);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft-1);
  color: var(--color-indigo-500);
}

.section-eyebrow-divider {
  width: 80px;
  height: 1px;
  background: var(--gradient-eyebrow-divider);
}

/* Szekció-fejléc: eyebrow + cím + alcím. A 01 Funkciók, a 02 Kinek
   szól és a 03 Árazás fejléce mind ugyanezt a mintát ismétli. */
.section-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  /* get_metadata szerint az alcím egy sorban: Funkciók 724px, Kinek
     szól 743px, Árazás 784px — mind szélesebb, mint a korábbi 720px
     (ami csak a Funkciók saját "hug" oszlopszélessége volt, nem a
     tényleges szövegszélesség). 800px biztos ráhagyással mindhárom
     törés nélkül kifér. */
  max-width: 800px;
}

.section-intro h2 {
  color: var(--color-slate-900);
}

.section-lead {
  color: var(--color-slate-500);
}

/* Görgetésre megjelenő elemek (.reveal). A rejtett kiinduló állapot csak
   akkor él, ha a landing.js (initReveal) a <html>-re tette a .has-reveal
   osztályt — JS nélkül az elemek eleve látszanak. Az .is-visible-t és a
   szomszédos elemek közti késleltetést (--reveal-delay) a JS adja. */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(var(--space-40));
  /* Hosszú, lágyan lassuló (ease-out-expo) úszás; az átlátszóság kicsit
     hamarabb beáll, hogy a kártya ne maradjon sokáig halvány. */
  transition:
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Csökkentett mozgásnál azonnal, animáció nélkül látszik — akkor is, ha
   a beállítás az oldal betöltése után változik. */
@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   4. SZEKCIÓK
   ============================================================ */

/* --- Navigáció (605:3389) ---
   Lebegő, "pirula" alakú sáv: 1024px-re korlátozva, a lapon rögzítve
   (sticky) a Figma-beli 24 px-es felső margóval (= --space-24). */

.site-nav {
  position: sticky;
  top: var(--space-24);
  z-index: 40;
  padding-inline: var(--space-24);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1024px;
  margin-inline: auto;
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-nav-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-left: var(--space-20);
}

.nav-logo img {
  height: 22px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-28);
}

.nav-links a {
  color: var(--color-slate-600);
}

.nav-links a:hover {
  color: var(--color-slate-900);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* --- Hamburger gomb (csak mobilon látható) --- */
.nav-hamburger {
  display: none;
}

/* A nav-drawer asztali nézetben nem is konténer: a tartalma (nav-links,
   nav-actions) a .nav flex-sorában jelenik meg. */
.nav-drawer {
  display: contents;
}

/* --- Hero (614:340) ---
   Jelvény, H1, alcím, CTA — középre igazítva; alatta a keretezett,
   izzó szegélyű mockup-kép. A --space-160 felső térköz a lebegő nav
   alatti helykihagyást adja vissza (Figma: a Hero 160 px-re kezdődik
   a szekció tetejétől). */

/* Közös keret a Hero és a Funkciók körül: az animált háttér színe, a
   vágása és az alsó elhalványítása itt van, nem a hero-n, így a foltok
   a Funkciók mögé is lecsúszhatnak.
   - A keret a nav alá húzódik (a nav a DOM-ban előtte áll, és sticky-ként
     elfoglalja a saját magasságát), így a háttér a lap tetejéig ér. A
     hero felső párnázása ugyanennyivel nagyobb, ezért a tartalom helye
     nem változik. A nav z-indexe miatt felül marad.
   - Az isolation miatt a foltok (z-index: -1) a keret saját rétegén belül,
     a hero és a Funkciók tartalma (cím, kártyák) alatt maradnak.
   - Az overflow-x: clip csak vízszintesen vág (nincs vízszintes
     görgetősáv), függőlegesen nem, így a kártyák árnyéka sem vágódik le.
   - Az alján a ::after a háttérszínt és a foltokat lágyan beleolvasztja
     a lap színébe, hogy ne legyen éles él. */
.hero-wrap {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  margin-top: calc(-1 * var(--nav-height));
  background: var(--color-hero-bg);
}

.hero-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(2 * var(--space-160));
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-surface-page));
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-96);
  padding-top: calc(var(--space-160) + var(--nav-height));
  /* A .container 1280 px-es sávja helyett teljes szélességű, hogy az
     animált háttér ne legyen dobozban, és ne vágja el élesen a
     színfoltokat. A tartalmat ez nem mozdítja el: minden elem középre
     igazított, a mockupot a saját 1200 px-es max-width-je tartja. */
  max-width: none;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-20);
  background: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-indigo-500);
  text-transform: uppercase;
}

/* Keskeny kijelzőn a jelvény szövege sorba törhet, de nem lóghat ki. */
.badge--hero {
  max-width: 100%;
  text-align: center;
  box-shadow: var(--shadow-hero-badge);
}

.badge--audience {
  box-shadow: var(--shadow-audience-badge);
}

/* A width: 100% és a max-width: 100% kell, mert a középre igazított
   flex-oszlopban az elem különben a leghosszabb szava szélességét veszi
   fel, és keskeny kijelzőn mindkét oldalon kilóg a képből. Az
   overflow-wrap csak biztonsági háló: a méretet a mobil töréspont
   (5. rész) úgy állítja, hogy a szavak törés nélkül kiférjenek. */
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  text-align: center;
}

.hero-text > * {
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero-text h1 {
  color: var(--color-slate-900);
}

.hero-subtitle {
  max-width: min(672px, 100%);
  color: var(--color-slate-700);
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  width: 100%;
  padding-inline: var(--space-16);
}

.hero-mockup {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-16);
}

.hero-mockup::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-xl);
  background: var(--gradient-hero-glow);
  filter: blur(12px);
  z-index: -1;
}

/* A kép tárolója (picture) kerekít és vág; a glow a külső tárolón van
   (::before), nem a képen. */
.hero-mockup picture {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero-mockup img {
  width: 100%;
  height: auto;
}

/* Animált, elmosott színfolt-háttér (tiszta CSS). A .hero-bg a hero
   méretét veszi fel (a foltok helyzete ehhez van mérve), de nem vág: a
   foltokat a .hero-wrap vágja, így a Funkciók mögé is lecsúszhatnak. A
   .hero-wrap isolation-je miatt a z-index: -1 a keret rétegén belül
   marad: a háttér a tartalom alá kerül, de a mockup glow-ja (szintén -1,
   később a DOM-ban) fölé. Csak a transform animálódik.

   Teljesítmény: a foltokon nincs filter: blur(). Az elmosott hatást
   előre kiszámolt, sokfokozatú radial-gradient adja: a korábbi alak
   (0-40% tömör, 100%-ig lineárisan elhalványul) 92 px-es (mobilon
   55 px-es) Gauss-elmosásának sugárirányú görbéje, ezért nagyobb az
   elem, mint a látható mag (a 0,5/255 alatti peremet levágtuk). A kép
   a blur()-os változattól legfeljebb 6/255-tel tér el. Mérve (Chrome,
   1440 px): szoftveres kompozitálásnál ~12 → ~45 fps, GPU-n kb.
   harmadával kevesebb rajzolási munka. A will-change: transform
   szándékosan hiányzik — blur() mellett mérhetően lassított, az animált
   transform nélküle is külön rétegen fut. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-blob {
  position: absolute;
  aspect-ratio: 1;
  opacity: 0.8;
  mix-blend-mode: normal;
}

.hero-blob--1 {
  width: 76.05%;
  left: 45.1%;
  top: 62.4%;
  margin: -38.03% 0 0 -38.03%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-hero-blob-1) 86.3%, transparent) 0%,
    color-mix(in srgb, var(--color-hero-blob-1) 85.6%, transparent) 4.17%,
    color-mix(in srgb, var(--color-hero-blob-1) 83.7%, transparent) 8.33%,
    color-mix(in srgb, var(--color-hero-blob-1) 80.4%, transparent) 12.5%,
    color-mix(in srgb, var(--color-hero-blob-1) 75.9%, transparent) 16.67%,
    color-mix(in srgb, var(--color-hero-blob-1) 70.3%, transparent) 20.83%,
    color-mix(in srgb, var(--color-hero-blob-1) 63.8%, transparent) 25%,
    color-mix(in srgb, var(--color-hero-blob-1) 56.4%, transparent) 29.17%,
    color-mix(in srgb, var(--color-hero-blob-1) 48.7%, transparent) 33.33%,
    color-mix(in srgb, var(--color-hero-blob-1) 40.9%, transparent) 37.5%,
    color-mix(in srgb, var(--color-hero-blob-1) 33.3%, transparent) 41.67%,
    color-mix(in srgb, var(--color-hero-blob-1) 26.2%, transparent) 45.83%,
    color-mix(in srgb, var(--color-hero-blob-1) 20%, transparent) 50%,
    color-mix(in srgb, var(--color-hero-blob-1) 14.7%, transparent) 54.17%,
    color-mix(in srgb, var(--color-hero-blob-1) 10.4%, transparent) 58.33%,
    color-mix(in srgb, var(--color-hero-blob-1) 7%, transparent) 62.5%,
    color-mix(in srgb, var(--color-hero-blob-1) 4.6%, transparent) 66.67%,
    color-mix(in srgb, var(--color-hero-blob-1) 2.8%, transparent) 70.83%,
    color-mix(in srgb, var(--color-hero-blob-1) 1.7%, transparent) 75%,
    color-mix(in srgb, var(--color-hero-blob-1) 1%, transparent) 79.17%,
    color-mix(in srgb, var(--color-hero-blob-1) 0.5%, transparent) 83.33%,
    color-mix(in srgb, var(--color-hero-blob-1) 0.3%, transparent) 87.5%,
    color-mix(in srgb, var(--color-hero-blob-1) 0.1%, transparent) 91.67%,
    color-mix(in srgb, var(--color-hero-blob-1) 0.1%, transparent) 95.83%,
    transparent 100%
  );
  animation: szx-blob-1 18s linear 0s infinite;
}

.hero-blob--2 {
  width: 67.63%;
  left: 67.5%;
  top: 33.8%;
  margin: -33.81% 0 0 -33.81%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-hero-blob-2) 73.3%, transparent) 0%,
    color-mix(in srgb, var(--color-hero-blob-2) 72.6%, transparent) 4.17%,
    color-mix(in srgb, var(--color-hero-blob-2) 70.5%, transparent) 8.33%,
    color-mix(in srgb, var(--color-hero-blob-2) 67%, transparent) 12.5%,
    color-mix(in srgb, var(--color-hero-blob-2) 62.4%, transparent) 16.67%,
    color-mix(in srgb, var(--color-hero-blob-2) 56.8%, transparent) 20.83%,
    color-mix(in srgb, var(--color-hero-blob-2) 50.5%, transparent) 25%,
    color-mix(in srgb, var(--color-hero-blob-2) 43.9%, transparent) 29.17%,
    color-mix(in srgb, var(--color-hero-blob-2) 37.1%, transparent) 33.33%,
    color-mix(in srgb, var(--color-hero-blob-2) 30.5%, transparent) 37.5%,
    color-mix(in srgb, var(--color-hero-blob-2) 24.4%, transparent) 41.67%,
    color-mix(in srgb, var(--color-hero-blob-2) 18.9%, transparent) 45.83%,
    color-mix(in srgb, var(--color-hero-blob-2) 14.2%, transparent) 50%,
    color-mix(in srgb, var(--color-hero-blob-2) 10.3%, transparent) 54.17%,
    color-mix(in srgb, var(--color-hero-blob-2) 7.3%, transparent) 58.33%,
    color-mix(in srgb, var(--color-hero-blob-2) 4.9%, transparent) 62.5%,
    color-mix(in srgb, var(--color-hero-blob-2) 3.2%, transparent) 66.67%,
    color-mix(in srgb, var(--color-hero-blob-2) 2%, transparent) 70.83%,
    color-mix(in srgb, var(--color-hero-blob-2) 1.2%, transparent) 75%,
    color-mix(in srgb, var(--color-hero-blob-2) 0.7%, transparent) 79.17%,
    color-mix(in srgb, var(--color-hero-blob-2) 0.4%, transparent) 83.33%,
    color-mix(in srgb, var(--color-hero-blob-2) 0.2%, transparent) 87.5%,
    color-mix(in srgb, var(--color-hero-blob-2) 0.1%, transparent) 91.67%,
    color-mix(in srgb, var(--color-hero-blob-2) 0.1%, transparent) 95.83%,
    transparent 100%
  );
  animation: szx-blob-2 23.6s linear -6.7s infinite;
}

.hero-blob--3 {
  width: 72.25%;
  left: 41.3%;
  top: 43.1%;
  margin: -36.12% 0 0 -36.12%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-hero-blob-3) 81.4%, transparent) 0%,
    color-mix(in srgb, var(--color-hero-blob-3) 80.7%, transparent) 4.17%,
    color-mix(in srgb, var(--color-hero-blob-3) 78.6%, transparent) 8.33%,
    color-mix(in srgb, var(--color-hero-blob-3) 75.2%, transparent) 12.5%,
    color-mix(in srgb, var(--color-hero-blob-3) 70.5%, transparent) 16.67%,
    color-mix(in srgb, var(--color-hero-blob-3) 64.8%, transparent) 20.83%,
    color-mix(in srgb, var(--color-hero-blob-3) 58.3%, transparent) 25%,
    color-mix(in srgb, var(--color-hero-blob-3) 51.1%, transparent) 29.17%,
    color-mix(in srgb, var(--color-hero-blob-3) 43.7%, transparent) 33.33%,
    color-mix(in srgb, var(--color-hero-blob-3) 36.3%, transparent) 37.5%,
    color-mix(in srgb, var(--color-hero-blob-3) 29.3%, transparent) 41.67%,
    color-mix(in srgb, var(--color-hero-blob-3) 22.9%, transparent) 45.83%,
    color-mix(in srgb, var(--color-hero-blob-3) 17.3%, transparent) 50%,
    color-mix(in srgb, var(--color-hero-blob-3) 12.7%, transparent) 54.17%,
    color-mix(in srgb, var(--color-hero-blob-3) 8.9%, transparent) 58.33%,
    color-mix(in srgb, var(--color-hero-blob-3) 6%, transparent) 62.5%,
    color-mix(in srgb, var(--color-hero-blob-3) 3.9%, transparent) 66.67%,
    color-mix(in srgb, var(--color-hero-blob-3) 2.5%, transparent) 70.83%,
    color-mix(in srgb, var(--color-hero-blob-3) 1.5%, transparent) 75%,
    color-mix(in srgb, var(--color-hero-blob-3) 0.8%, transparent) 79.17%,
    color-mix(in srgb, var(--color-hero-blob-3) 0.5%, transparent) 83.33%,
    color-mix(in srgb, var(--color-hero-blob-3) 0.2%, transparent) 87.5%,
    color-mix(in srgb, var(--color-hero-blob-3) 0.1%, transparent) 91.67%,
    color-mix(in srgb, var(--color-hero-blob-3) 0.1%, transparent) 95.83%,
    transparent 100%
  );
  animation: szx-blob-3 40s linear -12.8s infinite;
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* Zárt ellipszispályák, 2,5%-onként mintavételezve, lineáris
   időzítéssel: a folt sehol nem áll meg, és két szomszédos szakasz
   között legfeljebb ~11°-ot fordul, ezért a mozgás egyenletes. A 0%
   és a 100% azonos, így a ciklus varrat nélkül ismétlődik.
   Csak translate (nincs scale, és a radiális folt forgatása nem
   látszana). Az 1. és a 2. folt mozog érdemben; a 3. nagyon lassan
   (40 s), kis kilengéssel. A translate a folt saját méretére
   vonatkozik, ezért a nagyobb (gradiens-)elemhez le van osztva: a
   mozgás pixelben ugyanakkora, mint a blur()-os változatban volt. */
@keyframes szx-blob-1 {
  0% { transform: translate(0, -20.31%); }
  2.5% { transform: translate(3.53%, -20.06%); }
  5% { transform: translate(6.97%, -19.31%); }
  7.5% { transform: translate(10.24%, -18.09%); }
  10% { transform: translate(13.26%, -16.43%); }
  12.5% { transform: translate(15.95%, -14.36%); }
  15% { transform: translate(18.25%, -11.94%); }
  17.5% { transform: translate(20.1%, -9.22%); }
  20% { transform: translate(21.46%, -6.27%); }
  22.5% { transform: translate(22.28%, -3.18%); }
  25% { transform: translate(22.56%, 0); }
  27.5% { transform: translate(22.28%, 3.18%); }
  30% { transform: translate(21.46%, 6.27%); }
  32.5% { transform: translate(20.1%, 9.22%); }
  35% { transform: translate(18.25%, 11.94%); }
  37.5% { transform: translate(15.95%, 14.36%); }
  40% { transform: translate(13.26%, 16.43%); }
  42.5% { transform: translate(10.24%, 18.09%); }
  45% { transform: translate(6.97%, 19.31%); }
  47.5% { transform: translate(3.53%, 20.06%); }
  50% { transform: translate(0, 20.31%); }
  52.5% { transform: translate(-3.53%, 20.06%); }
  55% { transform: translate(-6.97%, 19.31%); }
  57.5% { transform: translate(-10.24%, 18.09%); }
  60% { transform: translate(-13.26%, 16.43%); }
  62.5% { transform: translate(-15.95%, 14.36%); }
  65% { transform: translate(-18.25%, 11.94%); }
  67.5% { transform: translate(-20.1%, 9.22%); }
  70% { transform: translate(-21.46%, 6.27%); }
  72.5% { transform: translate(-22.28%, 3.18%); }
  75% { transform: translate(-22.56%, 0); }
  77.5% { transform: translate(-22.28%, -3.18%); }
  80% { transform: translate(-21.46%, -6.27%); }
  82.5% { transform: translate(-20.1%, -9.22%); }
  85% { transform: translate(-18.25%, -11.94%); }
  87.5% { transform: translate(-15.95%, -14.36%); }
  90% { transform: translate(-13.26%, -16.43%); }
  92.5% { transform: translate(-10.24%, -18.09%); }
  95% { transform: translate(-6.97%, -19.31%); }
  97.5% { transform: translate(-3.53%, -20.06%); }
  100% { transform: translate(0, -20.31%); }
}

@keyframes szx-blob-2 {
  0% { transform: translate(0, -15.8%); }
  2.5% { transform: translate(-2.78%, -15.61%); }
  5% { transform: translate(-5.49%, -15.03%); }
  7.5% { transform: translate(-8.07%, -14.08%); }
  10% { transform: translate(-10.45%, -12.79%); }
  12.5% { transform: translate(-12.57%, -11.18%); }
  15% { transform: translate(-14.38%, -9.29%); }
  17.5% { transform: translate(-15.84%, -7.17%); }
  20% { transform: translate(-16.91%, -4.88%); }
  22.5% { transform: translate(-17.56%, -2.47%); }
  25% { transform: translate(-17.78%, 0); }
  27.5% { transform: translate(-17.56%, 2.47%); }
  30% { transform: translate(-16.91%, 4.88%); }
  32.5% { transform: translate(-15.84%, 7.17%); }
  35% { transform: translate(-14.38%, 9.29%); }
  37.5% { transform: translate(-12.57%, 11.18%); }
  40% { transform: translate(-10.45%, 12.79%); }
  42.5% { transform: translate(-8.07%, 14.08%); }
  45% { transform: translate(-5.49%, 15.03%); }
  47.5% { transform: translate(-2.78%, 15.61%); }
  50% { transform: translate(0, 15.8%); }
  52.5% { transform: translate(2.78%, 15.61%); }
  55% { transform: translate(5.49%, 15.03%); }
  57.5% { transform: translate(8.07%, 14.08%); }
  60% { transform: translate(10.45%, 12.79%); }
  62.5% { transform: translate(12.57%, 11.18%); }
  65% { transform: translate(14.38%, 9.29%); }
  67.5% { transform: translate(15.84%, 7.17%); }
  70% { transform: translate(16.91%, 4.88%); }
  72.5% { transform: translate(17.56%, 2.47%); }
  75% { transform: translate(17.78%, 0); }
  77.5% { transform: translate(17.56%, -2.47%); }
  80% { transform: translate(16.91%, -4.88%); }
  82.5% { transform: translate(15.84%, -7.17%); }
  85% { transform: translate(14.38%, -9.29%); }
  87.5% { transform: translate(12.57%, -11.18%); }
  90% { transform: translate(10.45%, -12.79%); }
  92.5% { transform: translate(8.07%, -14.08%); }
  95% { transform: translate(5.49%, -15.03%); }
  97.5% { transform: translate(2.78%, -15.61%); }
  100% { transform: translate(0, -15.8%); }
}

@keyframes szx-blob-3 {
  0% { transform: translate(0, 2.51%); }
  2.5% { transform: translate(-0.55%, 2.47%); }
  5% { transform: translate(-1.08%, 2.38%); }
  7.5% { transform: translate(-1.59%, 2.23%); }
  10% { transform: translate(-2.06%, 2.03%); }
  12.5% { transform: translate(-2.48%, 1.77%); }
  15% { transform: translate(-2.84%, 1.47%); }
  17.5% { transform: translate(-3.13%, 1.14%); }
  20% { transform: translate(-3.34%, 0.77%); }
  22.5% { transform: translate(-3.46%, 0.39%); }
  25% { transform: translate(-3.51%, 0); }
  27.5% { transform: translate(-3.46%, -0.39%); }
  30% { transform: translate(-3.34%, -0.77%); }
  32.5% { transform: translate(-3.13%, -1.14%); }
  35% { transform: translate(-2.84%, -1.47%); }
  37.5% { transform: translate(-2.48%, -1.77%); }
  40% { transform: translate(-2.06%, -2.03%); }
  42.5% { transform: translate(-1.59%, -2.23%); }
  45% { transform: translate(-1.08%, -2.38%); }
  47.5% { transform: translate(-0.55%, -2.47%); }
  50% { transform: translate(0, -2.51%); }
  52.5% { transform: translate(0.55%, -2.47%); }
  55% { transform: translate(1.08%, -2.38%); }
  57.5% { transform: translate(1.59%, -2.23%); }
  60% { transform: translate(2.06%, -2.03%); }
  62.5% { transform: translate(2.48%, -1.77%); }
  65% { transform: translate(2.84%, -1.47%); }
  67.5% { transform: translate(3.13%, -1.14%); }
  70% { transform: translate(3.34%, -0.77%); }
  72.5% { transform: translate(3.46%, -0.39%); }
  75% { transform: translate(3.51%, 0); }
  77.5% { transform: translate(3.46%, 0.39%); }
  80% { transform: translate(3.34%, 0.77%); }
  82.5% { transform: translate(3.13%, 1.14%); }
  85% { transform: translate(2.84%, 1.47%); }
  87.5% { transform: translate(2.48%, 1.77%); }
  90% { transform: translate(2.06%, 2.03%); }
  92.5% { transform: translate(1.59%, 2.23%); }
  95% { transform: translate(1.08%, 2.38%); }
  97.5% { transform: translate(0.55%, 2.47%); }
  100% { transform: translate(0, 2.51%); }
}

@media (max-width: 640px) {
  .hero-blob--1 {
    width: 129.21%;
    margin: -64.61% 0 0 -64.61%;
    background: radial-gradient(
      closest-side,
      color-mix(in srgb, var(--color-hero-blob-1) 72.6%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-blob-1) 72.1%, transparent) 4.17%,
      color-mix(in srgb, var(--color-hero-blob-1) 70.5%, transparent) 8.33%,
      color-mix(in srgb, var(--color-hero-blob-1) 67.8%, transparent) 12.5%,
      color-mix(in srgb, var(--color-hero-blob-1) 64.2%, transparent) 16.67%,
      color-mix(in srgb, var(--color-hero-blob-1) 59.9%, transparent) 20.83%,
      color-mix(in srgb, var(--color-hero-blob-1) 54.8%, transparent) 25%,
      color-mix(in srgb, var(--color-hero-blob-1) 49.3%, transparent) 29.17%,
      color-mix(in srgb, var(--color-hero-blob-1) 43.6%, transparent) 33.33%,
      color-mix(in srgb, var(--color-hero-blob-1) 37.7%, transparent) 37.5%,
      color-mix(in srgb, var(--color-hero-blob-1) 32%, transparent) 41.67%,
      color-mix(in srgb, var(--color-hero-blob-1) 26.6%, transparent) 45.83%,
      color-mix(in srgb, var(--color-hero-blob-1) 21.6%, transparent) 50%,
      color-mix(in srgb, var(--color-hero-blob-1) 17.1%, transparent) 54.17%,
      color-mix(in srgb, var(--color-hero-blob-1) 13.2%, transparent) 58.33%,
      color-mix(in srgb, var(--color-hero-blob-1) 10%, transparent) 62.5%,
      color-mix(in srgb, var(--color-hero-blob-1) 7.4%, transparent) 66.67%,
      color-mix(in srgb, var(--color-hero-blob-1) 5.3%, transparent) 70.83%,
      color-mix(in srgb, var(--color-hero-blob-1) 3.7%, transparent) 75%,
      color-mix(in srgb, var(--color-hero-blob-1) 2.5%, transparent) 79.17%,
      color-mix(in srgb, var(--color-hero-blob-1) 1.7%, transparent) 83.33%,
      color-mix(in srgb, var(--color-hero-blob-1) 1.1%, transparent) 87.5%,
      color-mix(in srgb, var(--color-hero-blob-1) 0.7%, transparent) 91.67%,
      color-mix(in srgb, var(--color-hero-blob-1) 0.4%, transparent) 95.83%,
      transparent 100%
    );
  }

  .hero-blob--2 {
    width: 115.16%;
    margin: -57.58% 0 0 -57.58%;
    background: radial-gradient(
      closest-side,
      color-mix(in srgb, var(--color-hero-blob-2) 56.8%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-blob-2) 56.3%, transparent) 4.17%,
      color-mix(in srgb, var(--color-hero-blob-2) 54.9%, transparent) 8.33%,
      color-mix(in srgb, var(--color-hero-blob-2) 52.7%, transparent) 12.5%,
      color-mix(in srgb, var(--color-hero-blob-2) 49.7%, transparent) 16.67%,
      color-mix(in srgb, var(--color-hero-blob-2) 46%, transparent) 20.83%,
      color-mix(in srgb, var(--color-hero-blob-2) 41.9%, transparent) 25%,
      color-mix(in srgb, var(--color-hero-blob-2) 37.5%, transparent) 29.17%,
      color-mix(in srgb, var(--color-hero-blob-2) 32.9%, transparent) 33.33%,
      color-mix(in srgb, var(--color-hero-blob-2) 28.4%, transparent) 37.5%,
      color-mix(in srgb, var(--color-hero-blob-2) 24%, transparent) 41.67%,
      color-mix(in srgb, var(--color-hero-blob-2) 19.9%, transparent) 45.83%,
      color-mix(in srgb, var(--color-hero-blob-2) 16.2%, transparent) 50%,
      color-mix(in srgb, var(--color-hero-blob-2) 12.9%, transparent) 54.17%,
      color-mix(in srgb, var(--color-hero-blob-2) 10%, transparent) 58.33%,
      color-mix(in srgb, var(--color-hero-blob-2) 7.7%, transparent) 62.5%,
      color-mix(in srgb, var(--color-hero-blob-2) 5.7%, transparent) 66.67%,
      color-mix(in srgb, var(--color-hero-blob-2) 4.2%, transparent) 70.83%,
      color-mix(in srgb, var(--color-hero-blob-2) 3%, transparent) 75%,
      color-mix(in srgb, var(--color-hero-blob-2) 2.1%, transparent) 79.17%,
      color-mix(in srgb, var(--color-hero-blob-2) 1.4%, transparent) 83.33%,
      color-mix(in srgb, var(--color-hero-blob-2) 0.9%, transparent) 87.5%,
      color-mix(in srgb, var(--color-hero-blob-2) 0.6%, transparent) 91.67%,
      color-mix(in srgb, var(--color-hero-blob-2) 0.4%, transparent) 95.83%,
      transparent 100%
    );
  }

  .hero-blob--3 {
    width: 122.74%;
    margin: -61.37% 0 0 -61.37%;
    background: radial-gradient(
      closest-side,
      color-mix(in srgb, var(--color-hero-blob-3) 66.1%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-blob-3) 65.6%, transparent) 4.17%,
      color-mix(in srgb, var(--color-hero-blob-3) 64%, transparent) 8.33%,
      color-mix(in srgb, var(--color-hero-blob-3) 61.5%, transparent) 12.5%,
      color-mix(in srgb, var(--color-hero-blob-3) 58.1%, transparent) 16.67%,
      color-mix(in srgb, var(--color-hero-blob-3) 54%, transparent) 20.83%,
      color-mix(in srgb, var(--color-hero-blob-3) 49.3%, transparent) 25%,
      color-mix(in srgb, var(--color-hero-blob-3) 44.2%, transparent) 29.17%,
      color-mix(in srgb, var(--color-hero-blob-3) 38.9%, transparent) 33.33%,
      color-mix(in srgb, var(--color-hero-blob-3) 33.6%, transparent) 37.5%,
      color-mix(in srgb, var(--color-hero-blob-3) 28.5%, transparent) 41.67%,
      color-mix(in srgb, var(--color-hero-blob-3) 23.6%, transparent) 45.83%,
      color-mix(in srgb, var(--color-hero-blob-3) 19.2%, transparent) 50%,
      color-mix(in srgb, var(--color-hero-blob-3) 15.2%, transparent) 54.17%,
      color-mix(in srgb, var(--color-hero-blob-3) 11.8%, transparent) 58.33%,
      color-mix(in srgb, var(--color-hero-blob-3) 9%, transparent) 62.5%,
      color-mix(in srgb, var(--color-hero-blob-3) 6.6%, transparent) 66.67%,
      color-mix(in srgb, var(--color-hero-blob-3) 4.8%, transparent) 70.83%,
      color-mix(in srgb, var(--color-hero-blob-3) 3.4%, transparent) 75%,
      color-mix(in srgb, var(--color-hero-blob-3) 2.3%, transparent) 79.17%,
      color-mix(in srgb, var(--color-hero-blob-3) 1.6%, transparent) 83.33%,
      color-mix(in srgb, var(--color-hero-blob-3) 1%, transparent) 87.5%,
      color-mix(in srgb, var(--color-hero-blob-3) 0.6%, transparent) 91.67%,
      color-mix(in srgb, var(--color-hero-blob-3) 0.4%, transparent) 95.83%,
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-blob {
    animation: none;
  }
}

/* --- 01 Funkciók (605:2885) ---
   Fejléc (eyebrow + cím + alcím, jobbra a Demó-gomb) és alatta egy
   3×2-es kártyarács. A szekció saját 16 px-es oldalpárnázása
   (Figma) a .container középre igazítására rakódik rá. */

.features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-64);
  padding-inline: var(--space-16);
}

/* Fejléc-sor: intro-blokk balra, egy interaktív elem (gomb / toggle)
   jobbra. A 01 Funkciók és a 03 Árazás fejléce is ezt követi. */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16) var(--space-24);
  width: 100%;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-32);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-slate-800);
  border-radius: var(--radius-md);
  color: var(--color-white);
}

.benefit-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.benefit-card h3 {
  color: var(--color-slate-900);
}

.benefit-card p {
  color: var(--color-slate-500);
}

/* --- 02 Kinek szól (605:2942, állapotok: 609:630) ---
   Bal oldalt 3 fül (automatikusan pörgő harmonika, 5 mp/fül), jobbra
   egy panel, ami a fülhöz igazodva crossfade-del cserélődik. A JS
   (landing.js initAudience) az .is-active osztályt kapcsolja a
   [data-audience-tab] / [data-audience-panel] elemeken. */

.audience {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-64);
  padding-inline: var(--space-16);
}

.audience-widget {
  display: flex;
  gap: var(--space-48);
  align-items: stretch;
  width: 100%;
}

.audience-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 400px;
  flex-shrink: 0;
}

.audience-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0px;
  width: 100%;
  padding: var(--space-20) var(--space-24);
  background: var(--color-white);
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-xl);
  text-align: left;
  transition: row-gap 0.6s ease-in-out, box-shadow 0.3s ease;
}

.audience-tab.is-active {
  row-gap: var(--space-12);
  box-shadow: var(--shadow-panel);
}

.audience-tab-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.audience-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-slate-100);
  color: var(--color-slate-500);
  border: 2px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.audience-tab.is-active .audience-avatar {
  background: var(--color-indigo-50);
  border-color: var(--color-indigo-500);
  color: var(--color-indigo-500);
}

.audience-tab-title {
  font-size: var(--text-title-20-semibold-size);
  line-height: var(--text-title-20-semibold-line);
  font-weight: var(--font-weight-regular);
  color: var(--color-slate-500);
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.audience-tab.is-active .audience-tab-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
}

.audience-tab-collapse {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.6s ease-in-out;
}

.audience-tab.is-active .audience-tab-collapse {
  grid-template-rows: 1fr;
}

.audience-tab-collapse-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.audience-tab-desc {
  color: var(--color-slate-500);
}

.audience-progress {
  height: 3px;
  width: 100%;
  background: var(--color-slate-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.audience-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-indigo-500);
  border-radius: var(--radius-sm);
}

.audience-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
}

.audience-panel-inner {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-40);
  background: var(--color-white);
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.audience-panel-inner.is-active {
  opacity: 1;
  pointer-events: auto;
}

.audience-panel-inner h3 {
  color: var(--color-slate-900);
}

.audience-screen {
  width: 100%;
  height: 340px;
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* A kisebb helyeken a kép vágódik: a bal felső sarok (menü és
   statisztikakártyák) marad látható. */
.audience-screen picture {
  display: block;
  height: 100%;
}

.audience-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.audience-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-28);
  width: 100%;
}

.audience-benefit {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-slate-900);
}

.audience-benefit-icon {
  display: flex;
  color: var(--color-indigo-500);
}

.audience-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-indigo-500);
}

/* --- 03 Árazás (605:3110) ---
   Fejléc (eyebrow + cím + alcím, jobbra a Havi/Éves toggle) és alatta
   2 kártya. A JS (landing.js initPricing) az .is-active osztályt
   kapcsolja a toggle gombokon, és a [data-monthly]/[data-annual]
   elemek szövegét cseréli — nem számol, csak vált a szerveroldalon
   előre kiszámolt két érték között. */

.pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-64);
  padding-inline: var(--space-16);
}

.pricing-toggle {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  background: var(--color-slate-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft-1);
}

.pricing-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-24);
  border-radius: var(--radius-full);
  color: var(--color-slate-500);
}

/* Az "Éves" gomb a beágyazott kedvezmény-jelvény miatt jobbról
   kevesebb, --space-8 belső térközt kap (nem szimmetrikus --space-24). */
.pricing-toggle-btn[data-pricing-period="annual"] {
  padding-right: var(--space-8);
}

.pricing-toggle-btn.is-active {
  background: var(--color-indigo-500);
  color: var(--color-white);
  box-shadow: var(--shadow-toggle-active);
}

.pricing-toggle-badge {
  padding: var(--space-2) var(--space-8);
  background: var(--color-emerald-200);
  color: var(--color-emerald-800);
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  width: 100%;
}

.pricing-card {
  position: relative;
  border-radius: var(--radius-2xl);
}

.pricing-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-pricing-hover-border);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.pricing-card:hover::before {
  opacity: 1;
}

.pricing-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
  padding: var(--space-48);
  background: var(--color-surface-indigo-tint);
  border: 1px solid var(--color-indigo-100);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-pricing-card);
}

.pricing-card--dark .pricing-card-content {
  background: var(--color-slate-800);
  border-color: var(--color-slate-800);
}

.pricing-card-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-indigo-500);
}

.pricing-card-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-indigo-500);
}

.pricing-card-heading {
  color: var(--color-slate-900);
}

.pricing-card--dark .pricing-card-heading {
  color: var(--color-white);
}

.pricing-card-heading-accent {
  display: block;
  color: var(--color-indigo-500);
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.pricing-amount {
  color: var(--color-slate-900);
}

.pricing-card--dark .pricing-amount {
  color: var(--color-white);
}

.pricing-amount::after {
  content: " Ft";
}

.pricing-card-price-suffix {
  color: var(--color-slate-500);
}

.pricing-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-16);
  background: var(--color-indigo-100);
  border: 1px solid var(--color-indigo-200);
  border-radius: var(--radius-lg);
  color: var(--color-slate-700);
}

.pricing-card--dark .pricing-note {
  background: var(--color-surface-dark-overlay);
  color: var(--color-white);
}

.pricing-note-btn {
  flex-shrink: 0;
}

.pricing-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16) var(--space-24);
  width: 100%;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  color: var(--color-slate-800);
}

.pricing-card--dark .pricing-feature {
  color: var(--color-white);
}

.pricing-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: var(--space-4);
  flex-shrink: 0;
  border: 1px solid var(--color-indigo-muted);
  border-radius: var(--radius-full);
  color: var(--color-indigo-muted);
}

/* --- CTA-kártya + footer (605:3284) ---
   A CTA-kártya a #kezdes szekcióban (main), a footer landmark utána
   következik — vizuálisan egy folytonos fehér felület, csak a
   szemantikus határ van kettéválasztva. A gap-64, ami a Figmában a
   CTA-kártya és a footer-oszlopok között van, a footer saját felső
   paddingjébe került. */

/* A #kezdes az Árazás után jön, de a Figma itt NEM az általános
   --space-160 szekcióritmust követi, ezért kikerül a generikus
   main > section + section szabály alól. Két KÜLÖN --space-128
   forrásból adódik össze a teljes térköz (get_metadata szerint):
   1) az Árazás UTÁN, a "Main - Hero Section" keretén belül maradó
      128,08px üres hely (4356.16 − 4228.16), itt margin-top-ként;
   2) a Footer keret saját pt-[space/128]-a, lásd .cta-band lejjebb. */
#kezdes {
  margin-top: var(--space-128);
}

.cta-band {
  width: 100%;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  padding-top: var(--space-128);
}

.cta-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: var(--space-64);
  background: var(--color-surface-page);
  border: 1px solid var(--color-divider-black-10);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-pricing-card);
}

.cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 33%;
  background: var(--gradient-cta-glow);
  pointer-events: none;
}

/* A szöveg keskenyebb oszlopot kap, a kép a maradék helyet tölti ki a
   saját arányában — így a széles vezérlőpult-kép vágás nélkül kifér. */
.cta-card-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  width: 100%;
}

.cta-card-text {
  display: flex;
  flex: 0 1 480px;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

.cta-card-text h2 {
  color: var(--color-slate-900);
}

.cta-card-text .btn {
  align-self: flex-start;
  margin-bottom: var(--space-16);
}

.cta-stats {
  display: flex;
  gap: var(--space-32);
  width: 100%;
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-divider-black-10);
}

.cta-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cta-stat-value {
  color: var(--color-slate-900);
}

.cta-stat-label {
  color: var(--color-slate-500);
}

.cta-card-image {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-cta-image);
  overflow: hidden;
}

.cta-card-image img {
  width: 100%;
  height: auto;
}

.site-footer {
  width: 100%;
  background: var(--color-white);
  padding-top: var(--space-64);
  padding-bottom: var(--space-40);
}

.footer-columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 384px;
}

.footer-brand img {
  align-self: flex-start;
  height: 22px;
  width: auto;
}

.footer-brand p {
  color: var(--color-slate-500);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding-top: var(--space-32);
}

.footer-social a,
.footer-social button {
  display: flex;
  color: var(--color-slate-900);
}

.footer-social a:hover,
.footer-social button:hover {
  color: var(--color-indigo-500);
}

.footer-link-groups {
  display: flex;
  gap: var(--space-36);
}

.footer-link-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 176px;
}

.footer-link-group h3 {
  color: var(--color-slate-900);
}

.footer-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.footer-link-list a,
.footer-link-list button {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--color-slate-600);
}

.footer-link-list a:hover,
.footer-link-list button:hover {
  color: var(--color-slate-900);
}

.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 408px;
  max-width: 100%;
  padding: var(--space-32);
  background: var(--color-white);
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-newsletter);
}

.footer-newsletter h3 {
  color: var(--color-slate-900);
}

.footer-newsletter p {
  color: var(--color-slate-500);
}

/* A Figma (605:3372) a gombot abszolút pozícióval a mezőre lógatja,
   fix ~150px hellyel — ez csak az ő rögzített 408px-es asztali
   szélességénél fér el. Konténer-szélességtől függetlenül biztosan
   ütközésmentes elrendezéshez flexbox-sort használunk: a mező zsugo-
   rodhat (min-width:0), a gomb soha (flex-shrink:0). */
.footer-newsletter-form {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding-top: var(--space-12);
}

.footer-newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--space-48);
  padding-inline: var(--space-12);
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-full);
  color: var(--color-slate-900);
}

.footer-newsletter-input::placeholder {
  color: var(--color-slate-400);
}

.footer-newsletter-btn {
  flex-shrink: 0;
}

.footer-newsletter-consent {
  color: var(--color-slate-500);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-16);
  width: 100%;
  margin-top: var(--space-64);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-slate-100);
  color: var(--color-slate-500);
}

.footer-legal-links {
  display: flex;
  gap: var(--space-24);
}

/* --- Demó-popup (natív <dialog>) ---
   A nav Belépés / Regisztráció linkje nyitja (landing.js initDemoDialog).
   A böngésző középre teszi és a legfelső rétegbe emeli; itt csak a
   méret és a megjelenés van. A szélesség mobilon is hagy --space-16
   szegélyt, a magasság görgethető, ha nem fér ki. */
.demo-dialog {
  width: min(480px, 100% - 2 * var(--space-16));
  max-width: none;
  max-height: calc(100% - 2 * var(--space-16));
  padding: 0;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-pricing-card);
  color: var(--color-slate-900);
}

.demo-dialog::backdrop {
  background: var(--color-dialog-backdrop);
}

.demo-dialog-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-40);
}

/* A jobb felső bezáró gomb alá ne fusson be a cím. Ha törnie kell
   (keskeny kijelzőn), a balance miatt nem marad egy szó egyedül a
   második sorban. */
.demo-dialog-title {
  padding-right: var(--space-32);
  text-wrap: balance;
}

.demo-dialog-text {
  color: var(--color-slate-500);
}

.demo-dialog-form {
  margin-top: var(--space-8);
}

.demo-dialog-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--color-slate-500);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-dialog-close:hover {
  background: var(--color-slate-100);
  color: var(--color-slate-900);
}

/* ============================================================
   5. RESZPONZÍV VISELKEDÉS
   ============================================================ */

/* A CTA-kártyában a széles kép a szöveg mellett 1200 px alatt már túl kicsi
   lenne, ezért ott egymás alá kerülnek. */
@media (max-width: 1200px) {
  .cta-card-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-card-text {
    flex-basis: auto;
  }

  .cta-card-image {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience-widget {
    flex-direction: column;
  }

  .audience-tabs {
    width: 100%;
  }

  /* minmax(0, …): a kártya ne a tartalma legszélesebb sorához nőjön,
     hanem a rendelkezésre álló szélességhez (különben mobilon kilóg). */
  .pricing-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .benefit-grid {
    grid-template-columns: 1fr;
  }

  .cta-card {
    padding: var(--space-32);
  }

  /* Hero cím mobilon (9. pont): 500-as vastagság, line-height 1.15–1.2 */
  .hero-text h1 {
    font-size: clamp(38px, 7vw, 48px);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-hero-mobile-line, 1.18);
    letter-spacing: -0.5px;
  }

  /* Az alcím kézi sortörése csak asztali szélességre van szabva: ennél
     keskenyebben az első sor már nem fér ki egyben, és a törés után egy
     rövid sor ("számlázó —") maradna. Itt a szöveg magától törik. */
  .hero-subtitle br {
    display: none;
  }

  /* =================================================================
     MOBIL: Fejléc — hamburger menü
     ================================================================= */

  /* A logó mobilon kb. 15%-kal nagyobb. */
  .nav-logo img {
    height: 25px;
  }

  /* Hamburger ikon: 2 vízszintes vonal, lekerekített végek. Kattintható
     terület 44×44 px (a11y). A vonalak CSS-ből, a gomb csak mobilon
     jelenik meg (display: none az asztali nézetben). */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    /* A logó bal oldali behúzása 28px (8px nav padding + 20px logo padding).
       A jobb oldalon a gomb széle 44px, a vonal 22px (11px belső margó).
       8px nav padding + 9px margin-right + 11px = 28px, így pontosan
       ugyanolyan távolságra van a pirula jobb szélétől, mint a logó a baltól. */
    margin-right: 9px;
  }

  .nav-hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-slate-900);
    border-radius: var(--radius-full);
    transition: transform 220ms ease, opacity 220ms ease;
    transform-origin: center center;
  }

  /* X állapot: az első vonal 45°-kal jobbra, a második 45°-kal balra. */
  .nav-hamburger[aria-expanded="true"] .nav-hamburger-line:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .nav-hamburger[aria-expanded="true"] .nav-hamburger-line:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  /* --- Lenyíló menü (drawer) --- */
  .nav-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    position: absolute;
    top: calc(100% + var(--space-8));
    left: 0;
    right: 0;
    padding: var(--space-20);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-panel);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 0ms 200ms;
  }

  .nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms ease, transform 200ms ease, visibility 0ms 0ms;
  }

  /* A .nav-ben a drawer absolútan van pozícionálva, tehát a .nav
     legyen relatív és a túlfolyás ne vágja le. */
  .nav {
    position: relative;
    overflow: visible;
  }

  /* A menüpontok függőlegesen, teljes szélességben. */
  .nav-drawer .nav-links {
    flex-direction: column;
    gap: 0;
  }

  .nav-drawer .nav-links li {
    width: 100%;
  }

  .nav-drawer .nav-links a {
    display: block;
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-md);
    color: var(--color-slate-700);
    font-size: var(--text-body-16-size);
    line-height: var(--text-body-16-line);
  }

  .nav-drawer .nav-links a:hover {
    background: var(--color-slate-50);
    color: var(--color-slate-900);
  }

  /* Elválasztó a menüpontok és a gombok között. */
  .nav-drawer .nav-actions {
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-slate-100);
  }

  .nav-drawer .nav-actions .btn {
    width: 100%;
    display: flex;
  }

  /* Háttérfedés: nyitott menü mögé. A JS adja a .nav-backdrop
     osztályt a body-ra, ezzel jelenik meg az overlay. */
  .nav-backdrop::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 39;
    background: transparent;
  }

  /* =================================================================
     MOBIL: Szekciók közötti térköz felezése
     ================================================================= */
  main > section + section,
  main > .hero-wrap + section,
  .hero-wrap > section + section {
    margin-top: var(--space-80);
  }

  .hero {
    padding-top: calc(var(--space-80) + var(--nav-height));
    gap: var(--space-48);
  }

  .features {
    gap: var(--space-32);
  }

  .audience {
    gap: var(--space-32);
  }

  .pricing {
    gap: var(--space-32);
  }

  #kezdes {
    margin-top: var(--space-64);
  }

  .cta-band {
    padding-top: var(--space-64);
  }

  /* =================================================================
     MOBIL: 9. Szekció-headline-ok egységesen kb. 28px, line-height 1.2
     ================================================================= */
  .section-intro h2,
  .section-headline {
    font-size: var(--text-section-headline-mobile-size, 28px);
    line-height: var(--text-section-headline-mobile-line, 1.2);
    letter-spacing: 0;
  }

  .audience-panel-inner h3 {
    font-size: var(--text-heading-h3-28-size);
    line-height: 1.2;
  }

  /* =================================================================
     MOBIL: Funkció csempék kompakt elrendezése
     ================================================================= */

  .benefit-card {
    /* flex-row: ikon a cím mellé, nem fölé */
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
    padding: 20px;
  }

  .benefit-grid {
    gap: 12px;
  }

  .benefit-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .benefit-icon svg {
    width: 18px;
    height: 18px;
  }

  .benefit-card-body {
    gap: var(--space-8);
  }

  .benefit-card h3 {
    font-size: 18px;
    line-height: 1.2;
  }

  /* =================================================================
     MOBIL: 4. Kinek szol kep nem log ki, teljes szelessegben
     ================================================================= */
  .audience-panel-inner {
    padding: 20px;
    gap: var(--space-16);
  }

  .audience-screen {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }

  .audience-screen picture {
    display: block;
    width: 100%;
    height: auto;
  }

  .audience-screen img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* =================================================================
     MOBIL: 5. Arazas kartyak kompaktabb
     ================================================================= */
  .pricing-card-content {
    padding: 20px;
    gap: var(--space-20);
  }

  .pricing-card-heading {
    font-size: 22px;
    line-height: 1.2;
  }

  .pricing-amount {
    font-size: 42px;
    line-height: 48px;
  }

  .pricing-card-price-suffix {
    font-size: var(--text-body-15-size);
    line-height: var(--text-body-15-line);
  }

  .pricing-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-12);
  }

  .pricing-feature {
    gap: var(--space-8);
    font-size: 13px;
    line-height: 18px;
  }

  .pricing-note {
    padding: var(--space-12);
    gap: var(--space-8);
  }

  .pricing-cards {
    gap: var(--space-32);
  }

  /* =================================================================
     MOBIL: 6. CTA cim kb. 30%-kal kisebb
     ================================================================= */
  .cta-card-text h2 {
    font-size: var(--text-heading-36-size);
    line-height: 1.2;
    letter-spacing: var(--text-heading-36-tracking);
  }

  .cta-card-text h2 br {
    display: none;
  }

  .cta-card {
    padding: 20px;
  }

  .cta-stats {
    gap: var(--space-20);
  }

  /* =================================================================
     MOBIL: 7. Footer link oszlopok 2 oszlopos grid egymas mellett
     ================================================================= */
  .footer-container {
    padding-inline: var(--space-20);
  }

  .footer-brand {
    padding-left: 5px;
  }

  .footer-link-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-24);
    width: 100%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .footer-link-group {
    width: auto;
  }

  /* =================================================================
     MOBIL: 8. Newsletter form gap az input es a gomb kozott
     ================================================================= */
  .footer-newsletter {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .footer-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    width: 100%;
    box-sizing: border-box;
  }

  .footer-newsletter-input {
    width: 100%;
    box-sizing: border-box;
  }

  .footer-newsletter-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-16);
  }

  /* A 768px-es kompakt pricing beallitasok (2 oszlop, 20px padding)
     480px alatt is ervenyesek maradnak. */
  .pricing-card-price,
  .pricing-note {
    flex-wrap: wrap;
  }

  .hero-text h1 {
    font-size: var(--text-hero-mobile-size, 41.4px);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-hero-mobile-line, 1.18);
    letter-spacing: -0.5px;
  }

  .hero-subtitle {
    font-size: var(--text-body-lead-20-size);
    line-height: var(--text-body-lead-20-line);
  }

  .cta-card-text h2 {
    font-size: 30px;
    line-height: 1.2;
  }

  .demo-dialog-body {
    padding: var(--space-24);
  }

  .demo-dialog-close {
    top: var(--space-8);
    right: var(--space-8);
  }
}

/* A footer 3 oszlopa (384 + 388 + 408 px) + a --space-32 oldalpárnázás
   csak kb. 1244 px-től fér el egy sorban gap nélkül (605:3312-nek
   nincs is gap-je, a hely a justify-content:space-between-ből jön) —
   ez szélesebb, mint a 1024-es törésponti skála, ezért saját, 1280
   px-es töréspontot kap. */
@media (max-width: 1280px) {
  .footer-columns {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-48);
  }

  .footer-newsletter {
    width: 100%;
  }
}

/* A korabbi 480px-es footer tores a 768px-es blokkba koltozott
   (2 oszlopos grid + newsletter wrap). */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}