/* ==========================================================================
   APARTMAN ASSISTANT — LANDING PAGE STYLESHEET
   ==========================================================================
   Fájlszerkezet ebben a fájlban (könnyű keresni / cserélni):
   1. Design tokenek (színek, tipográfia, térközök)
   2. Alapreset
   3. Segédosztályok (container, section, badge, gomb...)
   4. Blokkonkénti stílusok (Header, Hero, Probléma, Funkciók, GYIK, CTA, Footer...)
   5. Cookie banner
   6. Animációk
   7. Reszponzív módosítások (mobile-first — a query-k felfelé bővítenek)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENEK
   -------------------------------------------------------------------------- */
:root {
  /* Alapszínek — meleg antracit, nem tiszta fekete */
  --color-bg: #10161a;
  --color-bg-alt: #0c1114;
  --color-surface: #171f24;
  --color-surface-elevated: #1e2830;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  /* Szöveg */
  --color-text: #f3f5f4;
  --color-text-muted: #9fb0b0;
  --color-text-faint: #6d7c7d;

  /* Hangsúlyszínek (az alkalmazás palettájából) */
  --color-turquoise: #2fd7c4;
  --color-turquoise-dim: rgba(47, 215, 196, 0.14);
  --color-orange: #ff9a56;
  --color-orange-dim: rgba(255, 154, 86, 0.14);
  --color-green: #8fd16e;
  --color-green-dim: rgba(143, 209, 110, 0.14);

  /* Tipográfia */
  --font-display: "Outfit", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --fs-h1: clamp(2rem, 1.55rem + 2.2vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.13rem + 0.6vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* Térköz-skála
     A blokkok közti (lg/xl/2xl/3xl) térközök ~20-23%-kal csökkentve a
     tömörebb, prémiumabb ritmus érdekében. A tartalmi térközök (sm/md)
     változatlanok, hogy a kártyák belső légtere ne váljon szűkössé. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3.15rem;
  --space-2xl: 4.6rem;
  --space-3xl: 6.2rem;

  /* Egyéb */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.44);
  --container-max: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. ALAPRESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

svg {
  display: block;
}

::selection {
  background: var(--color-turquoise);
  color: #062521;
}

/* Látható fókusz — akadálymentesség */
:focus-visible {
  outline: 2px solid var(--color-turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. SEGÉDOSZTÁLYOK
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}

/* Kifejezetten a Hero → Probléma közti rés csökkentésére (kérésre) —
   csak a felső térközt érinti, az alsó (a következő blokk felé) marad. */
#problema {
  padding-top: 1.5rem;
}

.section--tight {
  padding-block: var(--space-xl);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-lg);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-turquoise);
  margin-bottom: var(--space-sm);
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  max-width: 52ch;
}

.section-head--center .lead {
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  background: var(--color-turquoise);
  color: #06201c;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* Ikon */
.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Gombok --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-turquoise), #22b8a0);
  color: #06231f;
  box-shadow: 0 8px 24px rgba(47, 215, 196, 0.28);
}

.btn-primary:hover {
  box-shadow: 0 12px 32px rgba(47, 215, 196, 0.4);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-ghost:hover {
  border-color: var(--color-turquoise);
  color: var(--color-turquoise);
}

.btn-block {
  width: 100%;
}

.cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.section-head--center .cta-group {
  align-items: center;
}

/* Bizalomépítő jelvények (próbaidő / ár / lemondhatóság) --------------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.trust-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-pill);
}

.trust-badges .icon {
  width: 16px;
  height: 16px;
}

.trust-badges li:nth-child(1) .icon {
  color: var(--color-turquoise);
}

.trust-badges li:nth-child(2) .icon {
  color: var(--color-orange);
}

.trust-badges li:nth-child(3) .icon {
  color: var(--color-green);
}

.trust-badges--emphasis li:nth-child(1) {
  background: var(--color-turquoise-dim);
  border-color: rgba(47, 215, 196, 0.4);
  color: var(--color-turquoise);
}

/* Kártya elem ------------------------------------------------------------ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* Badge / állapotjelző (az app szemantikus jelzéseihez igazítva) -------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
}

.badge--turquoise {
  background: var(--color-turquoise-dim);
  color: var(--color-turquoise);
}

.badge--orange {
  background: var(--color-orange-dim);
  color: var(--color-orange);
}

.badge--green {
  background: var(--color-green-dim);
  color: var(--color-green);
}

/* --------------------------------------------------------------------------
   KÉPERNYŐKÉP-HELYTARTÓ (device-frame)
   -------------------------------------------------------------------------- 
   Ez a komponens tartja a helyét a valódi mobil screenshotoknak.
   Csere módja: lásd a HTML-ben lévő komment minden .device-frame felett.
   Amíg nincs kép: szaggatott keretes helytartó, felirattal.
   Ha van kép: a .device-frame__placeholder div-et cseréld le
   egy <img class="device-frame__img" src="assets/screenshots/xxx.webp" ...> tagre.
*/
.device-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  border-radius: 34px;
  padding: 10px;
  background: linear-gradient(160deg, #232f36, #141b1f);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg), 0 40px 70px -32px rgba(47, 215, 196, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  .device-frame {
    animation: deviceFloat 6.5s ease-in-out infinite;
  }

  /* Váltakozó fázis, hogy a szomszédos mockupok ne mozogjanak egyszerre */
  .feature--reverse .device-frame {
    animation-delay: -3.2s;
  }
}

@keyframes deviceFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* A dekoratív "sziget" jegyzet (notch) eltávolítva — a placeholder-korban
   jól nézett ki, de a valódi screenshotok fejléc-szövegeit eltakarta.
   A keret önmagában (lekerekített bezel + árnyék) is jól olvasható
   telefonformát ad, notch nélkül is. */

.device-frame__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-surface);
}

.device-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Alapérték — csak akkor számít, ha egy képhez nincs lentebb egyedi
     módosító osztály megadva. */
  object-position: center top;
}

/* --------------------------------------------------------------------------
   KÉPENKÉNTI POZÍCIÓ-FINOMHANGOLÁS
   -------------------------------------------------------------------------- 
   Minden screenshot kicsit más forrás-arányú lehet, ezért nem egy közös
   értékkel, hanem egyenként hangoljuk a vízszintes pozíciót.
   Csak a "calc(50% + Npx)" részben lévő Npx számot kell módosítani:
     - pozitív szám (pl. +15px) → a kép jobbra tolódik a keretben
       (a bal oldali tartalom jobban látszik, a jobb oldal jobban vágódik)
     - negatív szám (pl. -15px) → a kép balra tolódik a keretben
       (a jobb oldali tartalom jobban látszik, a bal oldal jobban vágódik)
     - 0px → középre igazítva (nincs eltolás)
   ------------------------------------------------------------------------ */
.img--hero {
  object-position: calc(50% - 10px) top;
}

.img--guest-profile {
  object-position: calc(50% - 4px) top;
}

.img--tasks {
  object-position: calc(50% - 4px) top;
}

.img--booking {
  object-position: calc(50% - 4px) top;
}

.img--guest-tasks {
  object-position: calc(50% - 4px) top;
}

.img--payments {
  object-position: calc(50% - 4px) top;
}

.img--contacts {
  object-position: calc(50% + 9px) top;
}

.img--ical {
  object-position: calc(50% + 0px) top;
}

.device-frame__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-md);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: 24px;
  color: var(--color-text-faint);
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.02) 10px,
    transparent 10px,
    transparent 20px
  );
}

.device-frame__placeholder .icon {
  width: 30px;
  height: 30px;
  color: var(--color-turquoise);
  opacity: 0.7;
}

.device-frame__placeholder-label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
}

.device-frame__placeholder-meta {
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

/* --------------------------------------------------------------------------
   4a. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(16, 22, 26, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.65rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}

.logo__mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-turquoise), var(--color-green));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #06231f;
}

.logo__mark svg {
  width: 16px;
  height: 16px;
  stroke: #06231f;
  stroke-width: 2;
  fill: none;
}

.site-header .btn {
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   4b. HERO
   -------------------------------------------------------------------------- */
.hero {
  /* Az alsó térköz szándékosan kisebb, mint a felső — így szűkebb a rés
     a "Talán neked is ismerős" blokk felé (kérésre csökkentve). */
  padding-block: var(--space-2xl) 1rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 480px;
  background: radial-gradient(closest-side, rgba(47, 215, 196, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hero__content {
  text-align: center;
}

.hero__kicker {
  color: var(--color-turquoise);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  display: block;
}

.hero h1 {
  font-size: var(--fs-h1);
}

.hero h1 .accent {
  background: linear-gradient(100deg, var(--color-turquoise), var(--color-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  max-width: 56ch;
  margin-inline: auto;
}

.hero__cta {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.hero__visual {
  display: flex;
  justify-content: center;
}

.hero__visual .device-frame {
  max-width: 260px;
}

/* --------------------------------------------------------------------------
   4c. PROBLÉMA BLOKK
   -------------------------------------------------------------------------- */
.problem__intro {
  max-width: 640px;
  margin-bottom: var(--space-lg);
}

.problem__question {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-text);
  margin-top: var(--space-sm);
}

.problem__list {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.problem__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.problem__item .icon {
  color: var(--color-orange);
  margin-top: 2px;
}

.problem__outro {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-left: 3px solid var(--color-turquoise);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  /* ~18%-kal kisebb, mint a --fs-h3, hogy ne versenyezzen a főcímekkel */
  font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.3rem);
  font-weight: 500;
  color: var(--color-text);
}

.problem__outro span {
  color: var(--color-turquoise);
}

/* --------------------------------------------------------------------------
   4d. FUNKCIÓ BLOKK (ismételhető komponens — kép + szöveg, felváltva)
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.feature + .feature {
  margin-top: var(--space-2xl);
}

.feature__icon-badge {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.feature__icon-badge .icon {
  width: 24px;
  height: 24px;
}

.feature__title {
  font-size: var(--fs-h2);
}

.feature__text {
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  max-width: 52ch;
}

.feature__points {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-xs);
}

.feature__points li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text);
  font-weight: 500;
}

.feature__points .icon {
  width: 18px;
  height: 18px;
  color: var(--color-green);
}

.feature--reverse .feature__visual {
  order: -1;
}

/* Spotlight változat — egy-két kiemelt blokkhoz, hogy törje a mintázat
   ismétlődését. Egyoszlopos, keretezett, izzó kártya, középre igazítva. */
.feature--spotlight {
  background: linear-gradient(160deg, var(--color-surface), var(--color-surface-elevated));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: 0 40px 80px -40px rgba(255, 154, 86, 0.28), var(--shadow-sm);
}

.feature--spotlight .feature__icon-badge {
  margin-inline: auto;
}

.feature--spotlight .feature__text {
  margin-inline: auto;
}

.feature--spotlight .feature__points {
  display: inline-grid;
  margin-inline: auto;
  margin-top: var(--space-md);
  text-align: left;
}

.feature--spotlight .feature__visual {
  margin-top: var(--space-lg);
}

.feature--spotlight .device-frame {
  max-width: 240px;
}

/* --------------------------------------------------------------------------
   4e. KIEMELT SÁV (digitális asszisztens callout)
   -------------------------------------------------------------------------- */
.highlight-banner {
  position: relative;
  background: linear-gradient(160deg, var(--color-surface), var(--color-surface-elevated));
  border: 1px solid rgba(47, 215, 196, 0.28);
  border-left: 3px solid var(--color-turquoise);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 90px -24px rgba(47, 215, 196, 0.4), var(--shadow-md);
}

.highlight-banner::before {
  content: "";
  position: absolute;
  top: -60%;
  left: 50%;
  translate: -50% 0;
  width: 70%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(47, 215, 196, 0.16), transparent 70%);
  pointer-events: none;
}

.highlight-banner__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 215, 196, 0.3), rgba(47, 215, 196, 0.04));
  box-shadow: 0 0 34px rgba(47, 215, 196, 0.4), inset 0 0 0 1px rgba(47, 215, 196, 0.3);
  margin-bottom: var(--space-sm);
}

.highlight-banner .icon-lg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  color: var(--color-turquoise);
  margin: 0;
}

.highlight-banner h3 {
  position: relative;
  z-index: 1;
  font-size: var(--fs-h3);
}

.highlight-banner p {
  position: relative;
  z-index: 1;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  max-width: 56ch;
  margin-inline: auto;
}

/* Narancs színváltozat az árazás/bevezető időszak blokkhoz — hogy vizuálisan
   megkülönböztethető legyen a türkiz "digitális asszisztens" kiemeléstől. */
.highlight-banner--pricing {
  border-color: rgba(255, 154, 86, 0.28);
  border-left-color: var(--color-orange);
  box-shadow: 0 0 90px -24px rgba(255, 154, 86, 0.4), var(--shadow-md);
}

.highlight-banner--pricing::before {
  background: radial-gradient(closest-side, rgba(255, 154, 86, 0.16), transparent 70%);
}

.highlight-banner--pricing .highlight-banner__icon {
  background: radial-gradient(circle, rgba(255, 154, 86, 0.3), rgba(255, 154, 86, 0.04));
  box-shadow: 0 0 34px rgba(255, 154, 86, 0.4), inset 0 0 0 1px rgba(255, 154, 86, 0.3);
}

.highlight-banner--pricing .icon-lg {
  color: var(--color-orange);
}

/* Hero "Bevezető időszak" kiemelő doboz ----------------------------------- */
.intro-period-badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-turquoise-dim);
  border: 1px solid rgba(47, 215, 196, 0.3);
  border-radius: var(--radius-md);
  text-align: left;
}

.intro-period-badge__emoji {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.intro-period-badge__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-turquoise);
  font-size: 0.95rem;
}

.intro-period-badge__text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.intro-period-badge__link {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--color-turquoise);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.intro-period-badge__link:hover {
  color: var(--color-green);
}

/* Korai felhasználók / visszajelzés blokk — visszafogott, kártya nélküli -- */
.early-access-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.early-access-note .icon {
  color: var(--color-green);
  margin-top: 3px;
  flex-shrink: 0;
}

.early-access-note p {
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   4f. TOVÁBBI FUNKCIÓK RÁCS
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  gap: var(--space-sm);
}

.feature-grid__item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.feature-grid__item:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.feature-grid__item .icon {
  color: var(--color-turquoise);
  flex-shrink: 0;
}

.feature-grid__item p {
  font-weight: 500;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   4g. TÖRTÉNET / FOUNDER BLOKK
   -------------------------------------------------------------------------- */
.story {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.story blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}

.story p {
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

.story p + p {
  margin-top: var(--space-sm);
}

.story__signature {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-turquoise);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.story__signature::before {
  content: "";
  width: 30px;
  height: 2px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--color-turquoise), var(--color-green));
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   4h. GYIK (FAQ)
   -------------------------------------------------------------------------- */
.faq-list {
  display: grid;
  gap: var(--space-xs);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  text-align: left;
}

.faq-item__question .icon {
  color: var(--color-turquoise);
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}

.faq-item[open] .faq-item__question .icon {
  transform: rotate(180deg);
}

.faq-item__answer {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-text-muted);
}

/* Simább nyitás modern böngészőkben (progresszív feljavítás) */
@media (prefers-reduced-motion: no-preference) {
  .faq-item__answer {
    animation: faqFadeIn 0.25s var(--ease);
  }
}

@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   4i. ZÁRÓ CTA
   -------------------------------------------------------------------------- */
.final-cta {
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(47, 215, 196, 0.14), transparent 60%), var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-md);
}

.final-cta h2 {
  font-size: var(--fs-h2);
  max-width: 20ch;
  margin-inline: auto;
}

.final-cta .lead {
  margin-inline: auto;
}

.final-cta .cta-group {
  margin-top: var(--space-lg);
  align-items: center;
}

/* --------------------------------------------------------------------------
   4j. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-lg);
  background: var(--color-bg-alt);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.site-footer__links a:hover {
  color: var(--color-turquoise);
}

.site-footer__meta {
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

/* --------------------------------------------------------------------------
   5. COOKIE BANNER (GDPR — Consent Mode v2 alapú)
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 200;
  max-width: 560px;
  margin-inline: auto;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
  display: none;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-banner p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.cookie-banner a {
  color: var(--color-turquoise);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.cookie-banner__actions .btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   6. ANIMÁCIÓK — finom, visszafogott (fade-in + kis elmozdulás)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   7. RESZPONZÍV MÓDOSÍTÁSOK (mobile-first — bővítés felfelé)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .hero__cta {
    flex-direction: row;
  }

  .problem__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-lg);
  }

  .hero__content {
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    text-align: left;
  }

  .hero__content {
    text-align: left;
    margin-inline: 0;
  }

  .hero__lead {
    margin-inline: 0;
  }

  .hero__cta {
    align-items: flex-start;
  }

  .hero__cta .trust-badges {
    justify-content: flex-start;
  }

  .hero__visual .device-frame {
    max-width: 300px;
  }

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

  .feature__visual {
    order: 1;
  }

  .feature--reverse .feature__visual {
    order: -1;
  }

  .feature--spotlight {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }

  .feature--spotlight .feature__visual {
    order: 0;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-header .btn {
    padding: 0.65rem 1.35rem;
    font-size: 0.95rem;
  }
}

@media (min-width: 1280px) {
  .section {
    padding-block: var(--space-3xl);
  }
}

/* --------------------------------------------------------------------------
   8. JOGI OLDALAK (ÁSZF, Adatkezelési tájékoztató, Impresszum, Kapcsolat)
   -------------------------------------------------------------------------- 
   Közös komponensek a négy jogi/utility oldalhoz — ugyanazt a design-nyelvet
   használják, mint a landing oldal többi része.
   ------------------------------------------------------------------------ */
.legal-page {
  padding-block: var(--space-xl) var(--space-2xl);
}

.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.legal-back-link:hover {
  color: var(--color-turquoise);
}

.legal-back-link .icon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.legal-page__eyebrow {
  color: var(--color-turquoise);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-sm);
}

.legal-page h1 {
  font-size: var(--fs-h1);
}

.legal-page__updated {
  color: var(--color-text-faint);
  font-size: var(--fs-small);
  margin-top: var(--space-sm);
}

/* "Tartalom hamarosan" figyelmeztető sáv — amíg a végleges jogi szöveg
   nincs beillesztve, ez jelzi a látogatónak, hogy az oldal szerkezetileg
   kész, de a tartalma még készül. Töröld ki, ha bekerül a végleges szöveg. */
.legal-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-orange-dim);
  border: 1px solid rgba(255, 154, 86, 0.3);
  border-radius: var(--radius-md);
}

.legal-notice .icon {
  color: var(--color-orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.legal-notice p {
  color: var(--color-text);
  font-size: 0.95rem;
}

.legal-notice strong {
  color: var(--color-orange);
}

.legal-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.legal-section:first-of-type {
  border-top: none;
}

.legal-section h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-sm);
}

.legal-placeholder {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--color-text-faint);
  font-style: italic;
  font-size: 0.95rem;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.02) 10px,
    transparent 10px,
    transparent 20px
  );
}

/* Inline jelölés a jogi szövegekben még hiányzó cégadatokhoz (pl. adószám) —
   jelenleg nincs használatban, mert a hiányzó adatok visszafogott,
   dokumentumszerű szöveggel ("kitöltés alatt") jelennek meg, kiemelés nélkül. */

/* Kapcsolat oldal — egyszerűbb, nem szakaszolt jogi szöveg, hanem elérhetőségi kártya */
.contact-card {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}

.contact-card__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.contact-card__item .icon {
  color: var(--color-turquoise);
  flex-shrink: 0;
}

.contact-card__item-label {
  font-size: var(--fs-small);
  color: var(--color-text-faint);
  display: block;
}

.contact-card__item-value {
  font-weight: 600;
  color: var(--color-text);
}