/* =============================================================================
   APP.CSS — a tokenek + tema folott. Minden ertek tokenre/temara hivatkozik.
   Nincs szabadon irt szin/meret; nincs inline stilus. Uj vizualis dontes -> token.
   ============================================================================= */

/* ---------------------------------------------------------------- Alap reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  /* overflow-x: clip (NEM hidden): megakadalyozza a vizszintes scrollt, de a 'hidden'-nel
     ellentetben NEM hoz letre scroll-konténert -> a landing sticky navja (.lp-nav) mukodik.
     A 'hidden' a body-n scroll-konténerre valtja az overflow-y-t (auto), ami elrontja a
     position:sticky-t; a 'clip' ezt nem teszi. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

/* KULCSSZABALY: a H-tag NEM hatarozza meg a kinezetet. A cimsorok semlegesek,
   a stilust mindig a .t-* osztaly adja. Igy barmi lehet barmilyen, a szemantika
   (SEO/AI) es a design szetvalik. */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; color: inherit; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ------------------------------------------------ Tipografia OSZTALYOK (5 param)
   Minden osztaly definialja: clamp meret, sortav, betukoz, text-decoration, szin. */
.t-eyebrow  { font-family: var(--font-display); font-size: var(--fs-1); line-height: var(--lh-snug); letter-spacing: var(--ls-eyebrow); text-decoration: none; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.t-hero     { font-family: var(--font-display); font-size: var(--fs-7); line-height: var(--lh-tight);   letter-spacing: var(--ls-tight); text-decoration: none; color: var(--heading); font-weight: 700; text-wrap: balance; }
.t-display  { font-family: var(--font-display); font-size: var(--fs-6); line-height: var(--lh-tight);   letter-spacing: var(--ls-tight); text-decoration: none; color: var(--heading); font-weight: 700; text-wrap: balance; }
.t-title    { font-family: var(--font-display); font-size: var(--fs-5); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); text-decoration: none; color: var(--heading); font-weight: 700; text-wrap: balance; }
.t-subtitle { font-family: var(--font-display); font-size: var(--fs-4); line-height: var(--lh-heading); letter-spacing: var(--ls-normal); text-decoration: none; color: var(--heading); font-weight: 600; text-wrap: balance; }
.t-lead     { font-family: var(--font-body);    font-size: var(--fs-3); line-height: var(--lh-body);    letter-spacing: var(--ls-normal); text-decoration: none; color: var(--text-muted); font-weight: 400; text-wrap: pretty; }
.t-body     { font-family: var(--font-body);    font-size: var(--fs-2); line-height: var(--lh-body);    letter-spacing: var(--ls-normal); text-decoration: none; color: var(--text); font-weight: 400; text-wrap: pretty; }
.t-small    { font-family: var(--font-body);    font-size: var(--fs-1); line-height: var(--lh-snug);    letter-spacing: var(--ls-normal); text-decoration: none; color: var(--text-muted); font-weight: 400; }
.t-label    { font-family: var(--font-body);    font-size: var(--fs-1); line-height: var(--lh-snug);    letter-spacing: var(--ls-wide);   text-decoration: none; color: var(--text); font-weight: 600; }
.measure { max-width: var(--measure); }
.grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------- Layout raccs
   Hierarchia: body (100vw) > .section (full width, sajat hatter) > .container (site-width). */
.container { width: 100%; max-width: var(--site-width); margin-inline: auto; padding-inline: var(--container-pad); }
.section { position: relative; padding-block: var(--section-pad); }
.section--full > .container { max-width: none; }         /* teljes szelesseg, ha a design keri */
.stack > * + * { margin-top: var(--sp-connected); }       /* osszetartozo tartalom */
.stack-lg > * + * { margin-top: var(--sp-unconnected); }  /* nem osszetartozo */
.section-head { text-align: center; margin-inline: auto; max-width: 60ch; margin-bottom: var(--sp-block); }
.section-head > * + * { margin-top: var(--sp-connected); }

/* ------------------------------------------------------------------ Gombok */
.btn-grad { display: inline-flex; align-items: center; gap: var(--sp-2xs); font-family: var(--font-display); font-weight: 700; color: var(--color-primary-contrast); background: var(--grad-brand); border: 0; border-radius: var(--radius-md); padding: 0.85rem 1.4rem; box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.35); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--color-primary-rgb), 0.5); }
.btn-ghost { display: inline-flex; align-items: center; gap: var(--sp-2xs); font-family: var(--font-display); font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem 1.4rem; transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ============================================================ LANDING (WOW) */
.page-dark { background: var(--bg); color: var(--text); }

/* Uveg-navigacio */
.lp-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); }
.lp-nav .container { display: flex; align-items: center; justify-content: space-between; padding-block: var(--sp-sm); }
.lp-brand { display: inline-flex; align-items: center; gap: var(--sp-2xs); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3); color: var(--heading); }
.lp-brand .dot { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: var(--radius-sm); background: var(--grad-brand); color: #fff; }
.lp-navlinks { display: flex; align-items: center; gap: var(--sp-md); }
.lp-navlinks a { color: var(--text-muted); font-weight: 600; }
.lp-navlinks a:hover { color: var(--heading); }

/* Hero: elo, mozgo hatter + gradiens cim */
.lp-hero { position: relative; overflow: hidden; text-align: center; padding-block: clamp(4rem, 9vw, 8rem); }
.aurora { position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: 0; pointer-events: none; filter: blur(12px); }
.aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; opacity: 0.55; mix-blend-mode: screen; }
.aurora::before { width: 46rem; height: 46rem; left: 4%; top: -12%; background: radial-gradient(circle at 30% 30%, var(--brand-indigo), transparent 60%); animation: floatA 14s var(--ease) infinite alternate; }
.aurora::after  { width: 42rem; height: 42rem; right: 2%; top: -6%; background: radial-gradient(circle at 60% 40%, var(--brand-violet), transparent 60%); animation: floatB 18s var(--ease) infinite alternate; }
.lp-hero .container { position: relative; z-index: 1; }
.lp-hero .t-hero { margin-inline: auto; max-width: 20ch; }
.lp-hero .t-lead { margin-inline: auto; max-width: 46ch; margin-top: var(--sp-connected); }
.lp-cta { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-unconnected); }
.lp-badges { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-block); color: var(--text-muted); }
.lp-badges span { display: inline-flex; align-items: center; gap: var(--sp-3xs); }

/* Elo demo-kartya a heroban (mozgo, szines — nincs raszterkep, tiszta CSS/SVG) */
.lp-stage { position: relative; z-index: 1; margin: var(--sp-block) auto 0; max-width: 56rem; border-radius: var(--radius-xl); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); box-shadow: var(--shadow-lg); overflow: hidden; }
.lp-stage-bar { display: flex; align-items: center; gap: var(--sp-2xs); padding: var(--sp-xs) var(--sp-sm); border-bottom: 1px solid var(--border); }
.lp-stage-bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.lp-stage-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); padding: var(--sp-md); }
.lp-metric { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-sm); background: var(--surface); }
.lp-metric .n { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 700; color: var(--heading); }
.lp-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 5rem; margin-top: var(--sp-xs); }
.lp-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--grad-cool); animation: rise var(--dur-3) var(--ease) both; }
@keyframes rise { from { transform: scaleY(0.05); transform-origin: bottom; } }
.pulse-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 0 rgba(52,211,153,0.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 0.6rem rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* Glow-kartyak: per-szekcio akcenttel vilagitanak (mint a referencian) */
.glow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-md); }
.glow-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-md); background: var(--surface); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.glow-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 26%, transparent); }
.glow-ico { width: 3rem; height: 3rem; display: inline-grid; place-items: center; border-radius: var(--radius-md); color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); margin-bottom: var(--sp-sm); }
.glow-ico svg { width: 1.5rem; height: 1.5rem; }

/* Arazas: a Tabler pricing-TABLE (osszehasonlito matrix) a landing sotet glow-szinvilagahoz.
   Huen a Tabler-blokkhoz: table-bordered (halvany fuggoleges+vizszintes osztas), kozepre
   igazitott pipa/x, CSAK a kiemelt oszlop gombja kulonleges, tfoot-ban ismet a gombok. */
.pricing-table.table { color: var(--text); background: transparent; margin: 0; }
/* Alap: MINDEN cella kozepre (ar-oszlopok: nev, ar, gomb, pipa/x). Kivetel: az intro (elso
   fejlec-cella) es a feature-nev (elso oszlop) balra igazitva. */
.pricing-table th, .pricing-table td { border: 1px solid var(--border); vertical-align: middle; text-align: center; }
.pricing-table thead td { vertical-align: top; padding: var(--sp-md); }
.pricing-table .pricing-intro, .pricing-table .pricing-feature { text-align: left; white-space: normal; }
.pricing-intro .t-body { color: var(--text-muted); margin-top: var(--sp-2xs); max-width: 34ch; }
.pricing-col { min-width: 12rem; }
.pricing-col .t-eyebrow { color: var(--heading); }                 /* oszlopnev FEHER */
.pricing-price { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); }
.pricing-table .pricing-price { font-size: var(--fs-5); color: var(--heading); }   /* ar FEHER */
.pricing-period { color: var(--text-muted); margin-bottom: var(--sp-sm); }
.pricing-table .btn-green, .pricing-table .btn-ghost { width: 100%; justify-content: center; }
.pricing-table .subheader { color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-1); font-weight: 700; background: var(--surface); text-align: left; padding: var(--sp-2xs) var(--sp-md); }
.pricing-table tbody td { padding: var(--sp-xs) var(--sp-md); }
.pricing-feature { color: var(--text); }
.pricing-table tfoot td { padding: var(--sp-md); border-bottom: 0; }
/* A pipa/x ikon inline-block, hogy a cella text-align:center TENYLEG kozepre tegye
   (a globalis `svg{display:block}` reset kulonben balra rakja). */
.pricing-yes svg, .pricing-yes .ico { color: var(--brand-green); width: 1.2rem; height: 1.2rem; display: inline-block; }
.pricing-no svg, .pricing-no .ico { color: var(--text-muted); opacity: 0.45; width: 1.2rem; height: 1.2rem; display: inline-block; }
.pricing-value { font-weight: 700; color: var(--heading); }

/* CTA sav */
.cta-band { border-radius: var(--radius-xl); padding: clamp(2.5rem, 5vw, 4rem); text-align: center; color: #fff; background: var(--grad-brand); box-shadow: var(--shadow-lg); }

/* Scroll-reveal — PROGRESSZIV: alapban LATHATO. Csak akkor rejtjuk el az animaciohoz,
   ha a JS aktiv (.js-reveal a <html>-en). Igy no-JS es a keresok/AI is latjak a tartalmat. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

@keyframes floatA { to { transform: translate(4%, 6%) scale(1.08); } }
@keyframes floatB { to { transform: translate(-5%, 4%) scale(1.12); } }

/* ============================================================ Reszponziv tablazat
   Szabaly: min cellaszelesseg ~60% desktop; X-tengelyen scroll. A sticky fejlec a tabla
   SAJAT, fuggolegesen gorgetheto kontenereben ertelmezett: a .table-scroll.table-sticky
   max-height + overflow-y scrollportot ad, a thead top:0-val ahhoz ragad. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.table-scroll > table { min-width: 44rem; }                 /* cellak nem preselodnek ossze */
.table-scroll th, .table-scroll td { white-space: nowrap; }
.table-scroll.table-sticky { max-height: var(--table-max-h); overflow-y: auto; }
.table-sticky thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }

/* Ikon: mindig SVG, aktualis szinnel */
.ico { width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: -0.15em; stroke: currentColor; fill: none; }

/* ============================================================ APP SHELL (ikon-sav)
   Tiszta, minimal belso keret: keskeny, osszecsukhato ikon-sav + fluid munkaterulet.
   Csak tokenbol; a sav szelessege lokalis valtozobol (--rail-w / --rail-w-open). A
   nyitott/csukott allapotot a .is-open osztaly vezerli (UI-ONLY app.js, localStorage). */
.app-shell {
  --rail-w: 4.5rem;
  --rail-w-open: 15rem;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
.app-rail {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  padding: var(--sp-xs) var(--sp-2xs);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transition: flex-basis var(--dur-2) var(--ease), width var(--dur-2) var(--ease);
}
.app-shell.is-open .app-rail { flex-basis: var(--rail-w-open); width: var(--rail-w-open); }

.app-rail__head { display: flex; align-items: center; gap: var(--sp-2xs); padding: var(--sp-2xs); min-height: 3rem; }
.app-rail__brand { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius-md); background: var(--grad-cool); color: #fff; font-size: var(--fs-4); }
.app-rail__brandname { font-family: var(--font-display); font-weight: 700; color: var(--heading); }
.app-rail__toggle { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; margin-left: auto; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.app-rail__toggle:hover { background: var(--surface-2); color: var(--heading); }

.app-rail__nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-3xs); overflow-y: auto; overflow-x: hidden; }
.app-rail__foot { margin-top: auto; padding-top: var(--sp-2xs); border-top: 1px solid var(--border); }
.app-rail__foot form { margin: 0; }

.app-rail__item { display: flex; align-items: center; gap: var(--sp-2xs); width: 100%; padding: var(--sp-3xs); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); cursor: pointer; text-align: left; font-family: var(--font-body); font-size: var(--fs-2); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.app-rail__item:hover { background: var(--surface-2); color: var(--heading); }
.app-rail__item.is-active { background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary); }
.app-rail__ico { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; font-size: var(--fs-3); }
.app-rail__item--danger { color: var(--color-danger); }
.app-rail__item--danger:hover { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }

/* A feliratok csak nyitott savban latszanak; csukva a keskeny ikon-sav marad. */
.app-rail__label { white-space: nowrap; overflow: hidden; opacity: 0; width: 0; transition: opacity var(--dur-1) var(--ease); }
.app-shell.is-open .app-rail__label { opacity: 1; width: auto; }

.app-main { flex: 1 1 auto; min-width: 0; }
.app-content { padding-block: var(--sp-md); }

/* A PIPA MINDIG NEGYZET, sose kor. A globalis --tblr-border-radius (12px, theme.css) a
   ~20px-es checkboxot koronggá kerekitene; itt visszafogjuk. A radio (type=radio) marad kor. */
.form-check-input[type="checkbox"] { border-radius: var(--radius-xs); }

/* ------------------------------------------------------------- App finomitas */
.app-eyebrow { color: var(--accent); }
.icon-box { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(var(--color-primary-rgb), 0.10); color: var(--color-primary); }
.icon-box--sm { width: 2rem; height: 2rem; }
.icon-box--md { width: 2.25rem; height: 2.25rem; }

/* Demo-stage szinei/meretek — nth-child, hogy NE kelljen inline style */
.lp-stage-bar i:nth-child(1) { background: #ff5f57; }
.lp-stage-bar i:nth-child(2) { background: #febc2e; }
.lp-stage-bar i:nth-child(3) { background: #28c840; }
.lp-bars i:nth-child(1) { height: 42%; } .lp-bars i:nth-child(2) { height: 64%; }
.lp-bars i:nth-child(3) { height: 48%; } .lp-bars i:nth-child(4) { height: 82%; }
.lp-bars i:nth-child(5) { height: 66%; } .lp-bars i:nth-child(6) { height: 96%; }

/* Apro, ujrahasznos utility-k (elore felvett class-ok, nem inline) */
.text-brand-green { color: var(--brand-green); }
.text-brand-amber { color: var(--brand-amber); }

/* Szinminta (style guide galeria) */
.sw { height: 3rem; border-radius: var(--radius-md); border: 1px solid var(--border); }
.sw-primary { background: var(--color-primary); }
.sw-accent  { background: var(--brand-violet); }
.sw-cyan    { background: var(--brand-cyan); }
.sw-success { background: var(--color-success); }
.sw-warning { background: var(--color-warning); }
.sw-danger  { background: var(--color-danger); }
.sw-info    { background: var(--color-info); }
.sw-surface-2 { background: var(--surface-2); }
.sw-muted   { background: var(--text-muted); }
.type-row { display: flex; align-items: baseline; gap: var(--sp-md); flex-wrap: wrap; }
.type-row .tag { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--fs-1); }
.narrow { max-width: 52rem; margin-inline: auto; }
.btn-on-brand { background: #fff; color: #10131a; }
.btn-on-brand:hover { background: #fff; color: #000; }

/* CTA sav: a cimsor/lead feher, inline nelkul */
.cta-band .t-title { color: #fff; }
.cta-band .t-lead { color: rgba(255, 255, 255, 0.88); margin-inline: auto; }
.cta-band .lp-cta { margin-top: var(--sp-unconnected); }

/* Landing lablec */
.lp-footer { padding-block: var(--sp-block); }
.lp-footer .container { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: var(--sp-md); }

@media (max-width: 790px) {
  .lp-navlinks { gap: var(--sp-sm); }
  .lp-navlinks a:not([class]) { display: none; }   /* mobilon a horgony-linkek rejtve, CTA marad */
  .lp-stage-body { grid-template-columns: 1fr; }
}

/* Jogi (ASZF/Adatvedelem) markdown tartalom — a cimsorok olvashatoak */
.legal-content h1 { font-family: var(--font-display); font-size: var(--fs-6); font-weight: 700; margin-bottom: var(--sp-md); color: var(--heading); }
.legal-content h2 { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 700; margin: var(--sp-md) 0 var(--sp-sm); color: var(--heading); }
.legal-content h3 { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; margin: var(--sp-md) 0 var(--sp-xs); color: var(--heading); }
.legal-content p, .legal-content li { font-size: var(--fs-2); line-height: var(--lh-body); color: var(--text); }
.legal-content ul { padding-left: 1.25rem; }
.legal-content em { color: var(--text-muted); }