/* =========================================================================
   GarAI weboldal - dizájn-rendszer
   Koncepció: "A műhely" - letisztult, komoly, de barátságos.
   Nem hi-tech, nem sötét-neon-gradient. Papír, tinta, agyag, zsálya.
   Sok whitespace, nyugodt paletta, visszafogott dekoráció.
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Warm paper palette (light) */
  --paper:      #f7f2ea;
  --paper-2:    #efe7db;
  --paper-3:    #e6dccb;
  --ink:        #2b2620;
  --ink-soft:   #6b6256;
  --ink-faint:  #9a9082;

  /* Accents - earthy, calm, human */
  --clay:       #c26744;   /* terracotta - meleg, hívogató */
  --clay-deep:  #a8542f;
  --sage:       #7d8a6a;   /* zsálya - nyugalom */
  --sky:        #6f94a6;   /* poros kék - bizalom */
  --honey:      #e0a458;   /* méz - derű */

  --line:       rgba(43, 38, 32, 0.12);
  --line-soft:  rgba(43, 38, 32, 0.07);
  --shadow:     rgba(74, 58, 42, 0.14);

  /* Type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --radius:     18px;
  --radius-lg:  28px;
  --maxw:       1120px;
  --gutter:     clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-theme="dark"] {
  --paper:      #1c1815;
  --paper-2:    #251f19;
  --paper-3:    #2f2820;
  --ink:        #ede4d6;
  --ink-soft:   #b3a897;
  --ink-faint:  #7c7264;

  --clay:       #e08a63;
  --clay-deep:  #c9714a;
  --sage:       #9caf86;
  --sky:        #8fb2c4;
  --honey:      #e6b877;

  --line:       rgba(237, 228, 214, 0.13);
  --line-soft:  rgba(237, 228, 214, 0.07);
  --shadow:     rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #1c1815;
    --paper-2:    #251f19;
    --paper-3:    #2f2820;
    --ink:        #ede4d6;
    --ink-soft:   #b3a897;
    --ink-faint:  #7c7264;
    --clay:       #e08a63;
    --clay-deep:  #c9714a;
    --sage:       #9caf86;
    --sky:        #8fb2c4;
    --honey:      #e6b877;
    --line:       rgba(237, 228, 214, 0.13);
    --line-soft:  rgba(237, 228, 214, 0.07);
    --shadow:     rgba(0, 0, 0, 0.4);
  }
}

/* ---- Reset & base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw + 12px, 18px);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  /* finom papír-szemcse - self-contained SVG noise */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--clay-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay); }
img, svg { max-width: 100%; display: block; }

/* ---- Layout helpers --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(76px, 10vw, 140px); position: relative; }
/* Szekció-badge: pill formájú címke a szekciók tetején (PK-minta #4).
   A markup változatlan (.eyebrow), csak a megjelenés lett kapszula. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay-deep);
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--clay) 26%, var(--line-soft));
  background: color-mix(in srgb, var(--paper-2) 72%, transparent);
  /* kis kijelzőn a hosszú badge-szöveg törhessen, ne tolja szét a lapot */
  max-width: 100%; box-sizing: border-box;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--clay); border-radius: 999px; }
.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 68px); }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; margin-top: 14px; }

/* hand-drawn wavy underline accent */
.squiggle { position: relative; white-space: nowrap; }
.squiggle::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.12em; height: 0.34em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 20 1, 30 9, 48 5 S 82 1, 100 6 S 116 4, 118 5' fill='none' stroke='%23c26744' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.85; pointer-events: none;
}
:root[data-theme="dark"] .squiggle::after,
.no-js .squiggle::after { }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  --_bg: var(--clay); --_fg: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  text-decoration: none; line-height: 1;
  box-shadow: 0 6px 18px -8px var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.btn:hover {
  transform: translateY(-2px); box-shadow: 0 12px 26px -10px var(--shadow); color: var(--_fg);
  background: var(--clay-deep);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.btn:active { transform: translateY(0); }
.btn--ghost {
  --_bg: transparent; --_fg: var(--ink);
  border-color: var(--line); box-shadow: none; backdrop-filter: blur(2px);
}
.btn--ghost:hover { border-color: var(--clay); color: var(--clay-deep); background: transparent; }
.btn svg { width: 18px; height: 18px; }
/* CTA-anatómia (PK-minta #8): a nyíl-ikon saját kontraszt-körben ül a gomb
   végén, hoverre elmozdul. Csak a telt (nem ghost) gombok ikonjára. */
.btn:not(.btn--ghost) > svg {
  width: 32px; height: 32px; padding: 8px; flex: none;
  background: var(--paper); color: var(--clay-deep); border-radius: 999px;
  transition: transform 0.2s var(--ease);
}
.btn:not(.btn--ghost):has(> svg) { padding: 7px 7px 7px 24px; gap: 12px; }
.btn:not(.btn--ghost):hover > svg { transform: translateX(3px); }

/* ---- Header ----------------------------------------------------------- */
/* Kapszula-nav (PK-minta #1): a header maga átlátszó sticky sáv, a belső
   .nav kapszula lebeg a tartalom fölött. A .scrolled állapot a kapszulán
   erősíti a keretet és az árnyékot. */
.site-header {
  position: sticky; top: 10px; z-index: 40;
  padding-inline: 10px;
}
.site-header .nav {
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid var(--line-soft); border-radius: 999px;
  box-shadow: 0 10px 30px -22px var(--shadow);
  padding-inline: clamp(14px, 2.6vw, 26px);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.scrolled .nav {
  border-color: var(--line);
  box-shadow: 0 16px 38px -20px var(--shadow);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 62px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
/* Lockup is 187x68; height drives it, width follows the aspect ratio. */
.brand .logo { height: 32px; width: auto; flex: none; display: block; }
@media (max-width: 560px) { .brand .logo { height: 27px; } }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 0.96rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 14px; }

.theme-toggle {
  width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink-soft); cursor: pointer;
  display: grid; place-items: center; transition: color 0.2s, border-color 0.2s, transform 0.4s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--clay); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 800px) {
  /* A lenyíló panel a kapszula alatt lebeg, hozzá illő lekerekítéssel. */
  .nav-links {
    position: fixed; inset: 80px 10px auto 10px; flex-direction: column; align-items: flex-start;
    gap: 4px; padding: 16px var(--gutter) 28px; background: var(--paper-2);
    border: 1px solid var(--line); border-radius: 22px; transform: translateY(-130%);
    /* A kicsúsztatás önmagában csak a SZEMNEK zárja be a panelt: a linkek
       fókuszálhatók és a képernyőolvasó bejárja őket csukott menüben is.
       A visibility kiveszi a tab-sorrendből és az akadálymentességi fából;
       a 0,35s késleltetés miatt előbb végigfut a csúszás, csak utána tűnik el. */
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
    box-shadow: 0 20px 40px -24px var(--shadow);
  }
  .nav-links.open {
    transform: translateY(0); visibility: visible;
    transition: transform 0.35s var(--ease), visibility 0s;
  }
  .nav-links a { padding: 10px 0; font-size: 1.1rem; width: 100%; }
  .nav-toggle {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  }
  .nav-cta-desktop { display: none; }
}

/* ---- Hero ------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); }
/* Halvány milliméterpapír-grid a hero mögött (PK-minta #12): tokenszínből,
   radiális maszkkal, hogy a szélek felé elfogyjon. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 15%, transparent 78%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); letter-spacing: -0.02em; }

/* Hero címsor blur-reveal (PK-minta #2). A szavakat a main.js csomagolja
   span-okba, és CSAK akkor, ha az animáció engedélyezett - így se JS nélkül,
   se prefers-reduced-motion mellett nem tud láthatatlan maradni a H1. */
.hero h1.blur-reveal > .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(8px);
  transition: opacity 0.65s var(--ease), filter 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms); }
.hero h1.blur-reveal.in > .w { opacity: 1; filter: blur(0); transform: none; }

/* Rotálódó feladat a hero-ban (PK-minta #3) */
.hero-rotate { margin-top: 20px; margin-bottom: 0; font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: var(--ink-soft); }
.rotator { color: var(--clay-deep); font-weight: 600; white-space: nowrap; }
.rotator__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  vertical-align: -0.16em; background: var(--clay); animation: caret-blink 1.05s steps(1, end) infinite; }
.no-js .rotator__caret { display: none; }
@keyframes caret-blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
/* Reduced motion: a kurzor se villogjon, a szó statikus marad (main.js nem indítja a gépelést) */
@media (prefers-reduced-motion: reduce) { .rotator__caret { display: none; } }

.hero .lede { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--ink-soft); max-width: 44ch; margin-top: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* D1: hitelesítő számok - termék-igazság, nem kitalált ügyfélszám */
/* Grid, nem flex: a három szám egységesen tördel. Flexnél 1440px körül a szűk
   hero-oszlopban a harmadik stat egyedül csúszott a második sorba. */
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 30px); margin-top: 34px; }
.hero-stats .stat { display: grid; gap: 2px; min-width: 0; }
@media (max-width: 560px) { .hero-stats { grid-template-columns: 1fr; } }
.hero-stats strong {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  white-space: nowrap;
  color: var(--ink); line-height: 1.1; letter-spacing: -0.01em;
}
/* Csak a felirat-span, NEM a strong-on belüli count-up span (az a szám része). */
.hero-stats .stat > span { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.4; }
/* A count-up közben változik a szám hossza - a tabuláris számjegy megállítja a lötyögést. */
.hero-stats strong [data-countup] { font-variant-numeric: tabular-nums; }

/* organic warm blobs behind hero art */
.hero-art { position: relative; }
.hero-art .blob { position: absolute; z-index: 0; filter: blur(2px); opacity: 0.35; }
.hero-art .scene { position: relative; z-index: 1; }
.hero-blob-a { top: -6%; right: -8%; width: 62%; }
.hero-blob-b { bottom: -12%; left: -6%; width: 52%; }

/* A "rendezés" hero variánsban a rendezett sorok a jobb felső sarokba esnek,
   pont a méz blob alá - a blob elnyeli őket, és a variáns gyengébbnek látszik,
   mint amilyen. A blobot ilyenkor kisebbre vesszük, feljebb és jobbra toljuk,
   halványítjuk: dekoráció marad, de nem verseng az illusztráció fő állításával.
   Az attribútumot az apply-variant.py teszi ki a .hero-art konténerre. */
.hero-art[data-variant="a"] .hero-blob-a { top: -18%; right: -20%; width: 46%; opacity: 0.18; }
.hero-art[data-variant="a"] .hero-blob-b { bottom: -16%; left: -10%; width: 46%; opacity: 0.22; }

/* Az E ("kézrajz") variánsnál ugyanez a kompozíció, de tollrajzban - és ott a
   zsálya blob már zavar: a bal alsó, szándékosan rendetlen kupacra fekszik rá,
   és két különböző vizuális réteg keveredik pont ott, ahol a rendetlenséget
   olvasni kell. Kijjebb-lejjebb tolva és jóval halványabban dekoráció marad,
   a kártyák pedig tiszták. (Aura minőségkapu-észrevétele, 2026-07-27.) */
.hero-art[data-variant="e"] .hero-blob-a { top: -20%; right: -22%; width: 44%; opacity: 0.16; }
/* A zsálya blob az E alatt egyszerűen elmarad. Kipróbáltam elhúzni és halványítani
   is: eltolva vagy külön zöld folttá vált a rajz alatt, vagy átcsúszott a
   szövegoszlopba. A kézrajznak ráadásul saját talajvonala és satírozása van, tehát
   a blob nem is hiányzik - a méz blob jobb fent marad a melegségért. */
.hero-art[data-variant="e"] .hero-blob-b { display: none; }

/* Az F-sorozat (látványosabb / komolyabb / futurisztikus irány) saját mélységet
   és fényt hoz - a lágy dekor-blobok ezekbe belemosnának, és pont a kontrasztot
   vennék el, ami miatt ez az irány készült. Ezért mind a négy alatt kikapcsolva.
   Előnézeti szabály: a variáns-lap kedvéért van itt, még nincs döntés. */
.hero-art[data-variant^="f"] .blob { display: none; }

/* ---- Idővonal (hogyan működik) ---------------------------------------
   Korábban három kártya egy 3 oszlopos rácsban, nyíl-connectorokkal. Kártyában
   három külön dolognak látszott; a vonal folyamattá fűzi, és a vevő a folyamatot
   akarja látni. Egy elrendezés van, asztalon és mobilon is - a lépcsőzetes
   olvasás mindkét méreten működik, tehát nincs miért két változatot tartani. */
.timeline {
  --tl-badge: clamp(52px, 6vw, 64px);
  --tl-gap: clamp(26px, 4vw, 44px);
  list-style: none; margin: 0; padding: 0;
  counter-reset: step; display: grid; gap: var(--tl-gap);
  max-width: 720px;
}
.tl-step {
  position: relative; display: grid; grid-template-columns: var(--tl-badge) 1fr;
  gap: clamp(18px, 2.6vw, 30px); align-items: start;
}
.tl-badge {
  width: var(--tl-badge); height: var(--tl-badge); border-radius: 999px;
  display: grid; place-items: center; flex: none;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--clay);
}
.tl-badge .icon { width: 55%; height: 55%; }

/* Az összekötő vonal a badge függőleges tengelyén fut a következő badge-ig.
   Ugyanaz a mechanika, mint a B fázisban: a végállapot az .in osztályon van,
   nem keyframe-en, tehát reduced motion mellett is teljes lesz a vonal. */
.tl-step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--tl-badge) / 2);
  top: var(--tl-badge); height: calc(100% - var(--tl-badge) + var(--tl-gap));
  width: 2px; margin-left: -1px; background: var(--line);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.6s var(--ease) 0.15s;
}
.tl-step.in:not(:last-child)::before { transform: scaleY(1); }
/* JS nélkül nincs .in, tehát a vonal sose töltődne fel - ott legyen egyszerűen kint. */
.no-js .tl-step:not(:last-child)::before { transform: scaleY(1); }

.tl-body { min-width: 0; padding-top: clamp(4px, 1vw, 10px); }
.tl-num {
  counter-increment: step; display: block;
  font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.14em;
  color: var(--ink-faint); line-height: 1; margin-bottom: 8px; user-select: none;
}
.tl-num::before { content: counter(step, decimal-leading-zero); }
.tl-body h3 { font-size: clamp(1.2rem, 1.8vw, 1.42rem); margin-bottom: 8px; }
.tl-body p { color: var(--ink-soft); margin: 0; font-size: 1rem; }

@media (max-width: 560px) {
  /* Kisebb badge, hogy a szövegoszlop ne szoruljon össze. */
  .timeline { --tl-badge: 46px; }
}

/* ---- Use-cases -------------------------------------------------------- */
/* Kötelező jelölés a példák fölött. Szándékosan nem apróbetű: a példák
   illusztratívak, és ha ez nem olvasható, esettanulmánynak látszanak. */
.disclaimer {
  max-width: 720px; margin: -14px 0 clamp(28px, 4vw, 40px);
  padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--clay) 32%, transparent);
  border-left: 4px solid var(--clay);
  background: color-mix(in srgb, var(--clay) 7%, transparent);
  color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55;
}
.disclaimer strong { color: var(--ink); }

/* auto-fill, nem auto-fit: 10 kártyánál az utolsó sor két eleme így normál
   szélességű marad, nem nyúlik szét a teljes sávra. */
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 20px; }
.case {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.case:hover { transform: translateY(-3px); border-color: var(--clay); }
.case .tag { align-self: flex-start; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); background: color-mix(in srgb, var(--sage) 14%, transparent); padding: 5px 11px; border-radius: 999px; }
.case h3 { font-size: 1.16rem; }
.case p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.case .outcome { margin-top: auto; font-size: 0.9rem; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.case .outcome svg { width: 16px; height: 16px; color: var(--clay); }
/* A megoldás-bekezdés: bal szegély választja el a helyzet leírásától, hogy ne
   kelljen minden kártyán megismételni egy "Mit lehet vele kezdeni" címkét. */
.case .fix { padding-left: 14px; border-left: 2px solid var(--clay); color: var(--ink); }
/* Kártya-szintű jelölés, halkan - a szekció fölötti dobozé a főszerep. */
.case .illus {
  margin-top: auto; padding-top: 4px; font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---- Szekció-záró CTA (a Példák után) --------------------------------- */
.section-cta {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid; justify-items: center; gap: 18px; text-align: center;
}
.section-cta p {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.45rem);
  color: var(--ink); max-width: 36ch; margin: 0; line-height: 1.35;
}

/* ---- Manifesztum közjáték (PK-minta #11) ------------------------------
   Szándékosan nincs benne semmi a szokásos szekció-anatómiából: se badge, se
   H2, se leírás, se CTA. Egy mondat, nagy betűvel, sok levegővel - ez töri meg
   a ritmust két hosszú szekció között. Ha ide bármi más bekerül, elveszti a
   funkcióját és lesz belőle egy újabb szekció. */
.statement { padding-block: clamp(72px, 11vw, 148px); text-align: center; }
.statement__text {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.18; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 auto; max-width: 22ch; text-wrap: balance;
}
.statement__hl { color: var(--clay-deep); }

/* ---- Záró CTA panel (PK-minta #9) --------------------------------------
   A téma-invertálást nem külön szabály csinálja: a kártya --ink hátteret és
   --paper szöveget kap, és mivel sötét témában a két token értéke felcserélődik,
   a sötét kártya magától világos kártyává válik. A gomb ugyanígy invertál, hogy
   a panelen belül is a legnagyobb kontraszt legyen - a clay gomb a kártya
   sarkában elveszne. */
.cta-panel-wrap { padding-block: clamp(20px, 4vw, 48px) clamp(56px, 8vw, 96px); }
.cta-panel {
  background-color: var(--ink); color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.045'/%3E%3C/svg%3E");
  border-radius: var(--radius-lg);
  padding: clamp(44px, 7vw, 84px) clamp(28px, 5vw, 72px);
  display: grid; justify-items: center; gap: clamp(26px, 3.5vw, 38px); text-align: center;
  box-shadow: 0 30px 60px -40px var(--shadow);
}
.cta-panel h2 {
  font-size: clamp(1.75rem, 4.2vw, 3rem); line-height: 1.15; max-width: 20ch;
  text-wrap: balance; color: inherit;
}
/* A garancia-sor a címsor blokkjához tartozik, nem külön bekezdés: a panelben a
   címsor az egyik félelemre válaszol ("bonyolult lesz"), ez a másikra ("mi van,
   ha nem válik be"). Ezért ül szorosan a címsor alatt és halványabb - egy
   gondolat két fele, nem két elem. */
.cta-panel__note {
  /* elég széles, hogy asztalon egy sorban elférjen; kisebb kijelzőn a balance
     két egyenletes sorra bontja, nem hagy egy szót lógva az aljára */
  margin: calc(-1 * clamp(14px, 2vw, 22px)) 0 0; max-width: 48ch;
  font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.45; opacity: 0.78;
  text-wrap: balance;
}
.cta-panel .btn { --_bg: var(--paper); --_fg: var(--ink); }
.cta-panel .btn:hover { background: var(--paper-2); color: var(--ink); }
.cta-panel .btn:not(.btn--ghost) > svg { background: var(--ink); color: var(--paper); }

/* ---- Trust ------------------------------------------------------------ */
.trust { background: var(--paper-2); border-block: 1px solid var(--line-soft); }
.trust-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 820px) { .trust-grid { grid-template-columns: 1fr; } }
/* A két oszlop korábban inline style-ban ült az index.html-ben, ezért 360px-en
   is kettő maradt: a tick + szöveg 5 px-el kilógott a viewportból. */
.trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
@media (max-width: 560px) { .trust-list { grid-template-columns: 1fr; } }
.trust-item { display: flex; gap: 16px; align-items: flex-start; }
/* flex child min-width:auto helyett 0, hogy a hosszú szó ne feszítse szét */
.trust-item > div { min-width: 0; overflow-wrap: break-word; }
.trust-item .tick { flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--sage) 16%, transparent); display: grid; place-items: center; color: var(--sage); }
.trust-item .tick svg { width: 20px; height: 20px; }
.trust-item h3 { font-size: 1.08rem; margin-bottom: 3px; }
.trust-item p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ---- Pricing (placeholder - Vera pozicionálására vár) ----------------- */
.pricing-note {
  display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem;
  color: var(--ink-soft); background: color-mix(in srgb, var(--honey) 16%, transparent);
  border: 1px dashed color-mix(in srgb, var(--honey) 55%, var(--line));
  padding: 8px 16px; border-radius: 999px; margin-bottom: 26px;
}
/* D2: havi/éves számlázás-váltó */
.billing-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 30px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
}
.billing-toggle .bt-opt {
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
  color: var(--ink-soft); background: transparent; border: none; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; transition: background 0.2s var(--ease), color 0.2s;
  display: inline-flex; align-items: center; gap: 7px;
}
.billing-toggle .bt-opt:hover { color: var(--ink); }
.billing-toggle .bt-opt.active { background: var(--clay); color: #fff; box-shadow: 0 6px 16px -8px var(--shadow); }
.billing-toggle .bt-deal {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--honey) 30%, transparent); color: inherit;
  padding: 3px 8px; border-radius: 999px;
}
.billing-toggle .bt-opt.active .bt-deal { background: rgba(255, 255, 255, 0.22); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; display: flex; flex-direction: column;
}
.plan.featured { border-color: var(--clay); box-shadow: 0 24px 50px -30px var(--shadow); position: relative; }
.plan.featured::before {
  content: "Legnépszerűbb"; position: absolute; top: -13px; left: 28px;
  background: var(--clay); color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px;
}
.plan h3 { font-size: 1.3rem; margin-bottom: 6px; }
.plan .price { font-family: var(--font-display); font-size: 2.1rem; color: var(--ink); margin: 12px 0 4px; }
/* A "/ hó + áfa" egyben maradjon: a Scale kártyán a hosszú ártartomány mellett
   a "+ áfa" kulonben kulon sorba esik es elarvul. Inkabb az egesz kiegeszites
   csuszik at a kovetkezo sorra. */
.plan .price small { font-size: 0.9rem; color: var(--ink-faint); font-family: var(--font-body); white-space: nowrap; }
/* Eves fizetesnel a Scale ar-tartomanya hosszabb, mint ami 2.1rem-en kifer -
   a main.js teszi ki ezt az osztalyt, lasd renderPrices(). */
.plans--annual .plan .price { font-size: 1.8rem; }
.plan .price-note { font-size: 0.8rem; color: var(--sage); font-weight: 600; margin: 0 0 4px; }
/* Aki árat hasonlít, a kártyát nézi, nem a szekció bevezetőjét. A platform-előfizetés
   ezért itt is ott áll: halkan, de a szám mellett - különben a kártya félrevezet. */
.plan .plan-extra { font-size: 0.78rem; line-height: 1.4; color: var(--ink-faint); margin: 2px 0 4px; }
.plan .desc { color: var(--ink-soft); font-size: 0.93rem; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--ink-soft); }
.plan li svg { width: 17px; height: 17px; color: var(--sage); flex: none; margin-top: 3px; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan:not(.featured) .btn { --_bg: transparent; --_fg: var(--ink); border-color: var(--line); box-shadow: none; }
.plan:not(.featured) .btn:hover { border-color: var(--clay); color: var(--clay-deep); }

/* ---- GYIK (D4) --------------------------------------------------------- */
.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  list-style: none; cursor: pointer; padding: 22px 4px;
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; color: var(--ink);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--clay-deep); }
.faq-item .faq-ico { position: relative; flex: none; width: 22px; height: 22px; }
.faq-item .faq-ico::before, .faq-item .faq-ico::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--clay); border-radius: 2px; transition: transform 0.25s var(--ease);
}
.faq-item .faq-ico::before { width: 14px; height: 2.2px; }
.faq-item .faq-ico::after { width: 2.2px; height: 14px; }
.faq-item[open] .faq-ico::after { transform: rotate(90deg); }
.faq-item .faq-body { padding: 0 4px 24px; max-width: 62ch; }
.faq-item .faq-body p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.faq-item .faq-body .prompt-chip { margin-top: 16px; }

/* ---- Vélemények (D6, rejtve az első pilot-referenciáig) ---------------- */
.tst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.tst-card {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 14px;
}
.tst-quote { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.5; color: var(--ink); margin: 0; }
.tst-result {
  align-self: flex-start; font-size: 0.82rem; font-weight: 700; color: var(--sage);
  background: color-mix(in srgb, var(--sage) 14%, transparent);
  padding: 5px 12px; border-radius: 999px; margin: 0;
}
.tst-who { margin-top: auto; display: grid; gap: 2px; font-size: 0.9rem; }
.tst-who strong { color: var(--ink); }
.tst-who span { color: var(--ink-soft); }
.tst-who a { display: inline-flex; align-items: center; gap: 5px; font-size: 0.84rem; margin-top: 4px; justify-self: start; }
.tst-who a svg { width: 13px; height: 13px; }

/* ---- Ki áll emögött (alapító bemutatkozás, a vélemények helyén) -------- */
.founder { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; gap: 26px; } }
.founder-photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  background: var(--paper-2); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-faint);
}
.founder-photo svg { width: 58px; height: 58px; }
.founder-photo span { font-size: 0.82rem; letter-spacing: 0.02em; }
@media (max-width: 760px) { .founder-photo { max-width: 240px; } }
.founder-body p { color: var(--ink-soft); line-height: 1.65; margin-bottom: 16px; }
.founder-name { margin-bottom: 20px !important; display: grid; gap: 2px; }
.founder-name strong { color: var(--ink); font-size: 1.15rem; }
.founder-name span { color: var(--ink-soft); font-size: 0.9rem; }
.founder-body .btn { margin-top: 6px; }

/* ---- Egyedi (negyedik opció - kiút, nem árszint) ---------------------- */
.plan-custom {
  margin-top: 20px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px;
  align-items: center; padding: 30px 32px;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--paper-2) 45%, transparent);
}
@media (max-width: 760px) { .plan-custom { grid-template-columns: 1fr; gap: 20px; padding: 26px 24px; } }
.plan-custom h3 { font-size: 1.25rem; margin-bottom: 4px; }
.plan-custom-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-soft); margin-bottom: 12px; }
.plan-custom-desc { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.plan-custom-side ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.plan-custom-side li { position: relative; padding-left: 18px; font-size: 0.9rem; color: var(--ink-soft); }
.plan-custom-side li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--clay); }
.plan-custom-side .btn { width: 100%; justify-content: center; }

/* ---- Prompt chip (kapcsolat aside + GYIK) ------------------------------ */
.prompt-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink);
  cursor: pointer; transition: border-color 0.2s, transform 0.2s;
}
.prompt-chip:hover { border-color: var(--clay); transform: translateY(-1px); }
.prompt-chip svg { width: 16px; height: 16px; color: var(--clay); }

/* ---- Contact ---------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px 15px; transition: border-color 0.2s, box-shadow 0.2s; width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--clay);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--clay) 15%, transparent);
}
.form-note { font-size: 0.82rem; color: var(--ink-faint); margin-top: 4px; }
/* "Indulás alatt" tényközlés az űrlap fölött: látható, de nem riasztó -
   ugyanaz a meleg akcentus, mint a kiemelt kártyáké, nem hibaszín. */
.launch-note {
  font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--paper-2); border-left: 3px solid var(--clay);
  border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 24px;
}
/* Honeypot: a képernyőn kívül, de a DOM-ban ott van, hogy a botok kitöltsék.
   Nem display:none - azt sok bot felismeri és kihagyja. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status[aria-busy="true"] { color: var(--ink-faint); }
.form-status { font-size: 0.92rem; margin-top: 12px; min-height: 1.2em; }
.form-status.ok { color: var(--sage); }
.form-status.err { color: var(--clay-deep); }
.contact-aside { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 32px; }
.contact-aside h3 { font-size: 1.3rem; margin-bottom: 12px; }
.contact-aside p { color: var(--ink-soft); font-size: 0.96rem; }
.contact-aside .prompt-chip { margin-top: 8px; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 44px; color: var(--ink-soft); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.footer-grid a { color: var(--ink-soft); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.92rem; }
.footer-contact { display: grid; gap: 3px; font-size: 0.92rem; }
.footer-contact-label { color: var(--ink-faint); font-size: 0.8rem; }
.footer-contact a { color: var(--ink); font-weight: 600; }
.footer-contact a:hover { color: var(--clay-deep); }
.site-footer .fine { font-size: 0.82rem; color: var(--ink-faint); margin-top: 16px; }
.contact-direct { font-size: 0.9rem; margin-top: 14px; }
.contact-direct a { color: var(--clay-deep); font-weight: 600; text-decoration: none; }
.contact-direct a:hover { text-decoration: underline; }

/* ---- Reveal-on-scroll ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* =========================================================================
   Chat widget - beépíthető, self-contained
   ========================================================================= */
.chat-launcher {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 60; width: 60px; height: 60px; border-radius: 999px; border: none;
  background: var(--clay); color: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px var(--shadow); transition: transform 0.25s var(--ease), background 0.2s;
}
.chat-launcher:hover { transform: translateY(-3px) scale(1.03); background: var(--clay-deep); }
.chat-launcher svg { width: 26px; height: 26px; }
.chat-launcher .close-ico { display: none; }
.chat-launcher.open .open-ico { display: none; }
.chat-launcher.open .close-ico { display: block; }
.chat-launcher .badge {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--honey); color: #3a2a14; border-radius: 999px; font-size: 0.72rem;
  font-weight: 700; display: grid; place-items: center; border: 2px solid var(--paper);
}

.chat-panel {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(86px, 11vw, 100px);
  z-index: 60; width: min(390px, calc(100vw - 32px)); height: min(560px, calc(100vh - 130px));
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 70px -30px var(--shadow), 0 4px 16px -8px var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right; transform: translateY(14px) scale(0.96); opacity: 0;
  pointer-events: none; transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.chat-panel.open { transform: none; opacity: 1; pointer-events: auto; }

.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--paper-2); border-bottom: 1px solid var(--line-soft); }
.chat-head .ava { width: 40px; height: 40px; border-radius: 999px; background: var(--clay); display: grid; place-items: center; color: #fff; flex: none; }
.chat-head .ava svg { width: 22px; height: 22px; }
.chat-head .meta { line-height: 1.25; }
.chat-head .meta strong { font-family: var(--font-display); font-size: 1.02rem; }
.chat-head .meta .status { font-size: 0.78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.chat-head .meta .status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 30%, transparent); }

.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

.msg { max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: 0.94rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg.bot { align-self: flex-start; background: var(--paper-2); border: 1px solid var(--line-soft); border-bottom-left-radius: 5px; color: var(--ink); }
.msg.user { align-self: flex-end; background: var(--clay); color: #fff; border-bottom-right-radius: 5px; }
.msg a { color: inherit; }

.chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: 13px 16px; background: var(--paper-2); border-radius: 16px; border-bottom-left-radius: 5px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-faint); animation: blink 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.chat-quick button {
  font-family: var(--font-body); font-size: 0.84rem; color: var(--clay-deep);
  background: color-mix(in srgb, var(--clay) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--clay) 30%, transparent);
  padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: background 0.2s;
}
.chat-quick button:hover { background: color-mix(in srgb, var(--clay) 18%, transparent); }

.chat-input { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--line-soft); background: var(--paper-2); }
.chat-input input {
  flex: 1; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 16px;
}
.chat-input input:focus { outline: none; border-color: var(--clay); }
.chat-input button {
  width: 44px; height: 44px; flex: none; border: none; border-radius: 999px;
  background: var(--clay); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background 0.2s, transform 0.2s;
}
.chat-input button:hover { background: var(--clay-deep); }
.chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-input button svg { width: 19px; height: 19px; }

.chat-notice {
  font-size: 0.72rem; line-height: 1.45; color: var(--ink-faint);
  background: var(--paper-2); padding: 8px 16px 6px; margin: 0; text-align: center;
}
.chat-foot { text-align: center; font-size: 0.72rem; color: var(--ink-faint); padding: 0 0 8px; background: var(--paper-2); }
.chat-foot .mode-live { color: var(--sage); }
.chat-foot .mode-demo { color: var(--honey); }

@media (max-width: 460px) {
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: 84px; height: calc(100vh - 150px); }
}

/* utility */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================================
   JOGI OLDALAK (adatkezelés) - egyszerű, olvasható szövegoldal.
   Nem külön dizájn: ugyanaz a tokenkészlet, csak szélesebb sortáv és
   szűkebb szövegoszlop, mert ezt tényleg végig kell tudni olvasni.
   ========================================================================= */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 8px 0 18px; }
.legal h2 { font-size: 1.25rem; margin: 38px 0 12px; }
.legal p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 14px; }
.legal-lead { font-size: 1.05rem; }
.legal-list { color: var(--ink-soft); line-height: 1.75; margin: 0 0 14px 20px; }
.legal-list li { margin-bottom: 8px; }
.legal-note {
  font-size: 0.92rem; background: var(--paper-2); border-left: 3px solid var(--clay);
  border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 16px 0 14px;
}
.legal-updated { font-size: 0.88rem; color: var(--ink-faint); margin-top: 40px; }
/* A tábla mobilon nem fér ki: saját vízszintes görgetése van, a lap nem csúszik el */
.table-scroll { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
.legal-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.9rem; }
.legal-table th, .legal-table td {
  border: 1px solid var(--line-soft); padding: 10px 12px;
  text-align: left; vertical-align: top; color: var(--ink-soft); line-height: 1.6;
}
.legal-table th { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.footer-legal a { color: var(--ink-faint); font-size: 0.9rem; text-decoration: none; }
.footer-legal a:hover { color: var(--clay); text-decoration: underline; }