/* ============================================================
   weblockai — NYILVÁNOS FELÜLET (főoldal + belépés).

   A DESIGN GONDOLATA — 2026-08-02, a három referencia (higgsfield.ai,
   openart.ai, magnific.com) átnézése után:

   Mindhárom AI-t mutat: generált képet, videót, galériát. Mi ezt NEM
   tudjuk megmutatni, mert nem generálunk — tervet és promptot adunk.
   Ezért a vizuális nyelvünk nem az AI, hanem a MOZI: vetítőgép-fénykúp,
   film-szemcse, perforált filmszalag, klaptábla. Ez egyszerre igaz a
   termékre, és megkülönböztet mindenkitől a piacon.

   MOZGÁS: halk és folyamatos, interakció NÉLKÜL. A látogatónak nem kell
   csinálnia semmit — a lap lélegzik. Minden mozgás kikapcsol
   `prefers-reduced-motion` esetén, és MINDEN tartalom látható marad
   animáció nélkül is (a keresőnek és JS nélkül).
   ============================================================ */

:root {
  --lp-bg:        #05060a;   /* majdnem fekete — vetítőterem */
  --lp-bg-2:      #0a0d14;
  --lp-bg-3:      #0e131c;
  --lp-kartya:    #10151f;
  --lp-kartya-2:  #161d2a;
  --lp-keret:     rgba(150,180,220,0.13);
  --lp-keret-2:   rgba(150,180,220,0.26);

  --lp-szoveg:    #f2f6fb;
  --lp-halvany:   #9db0c6;
  --lp-dim:       #6c7f96;

  --lime:         #c9ff35;
  --lime-halk:    rgba(201,255,53,0.13);
  --lime-el:      rgba(201,255,53,0.42);
  --lime-sotet:   #06111d;
  --magenta:      #fb23c2;
  --magenta-halk: rgba(251,35,194,0.13);
  --cyan:         #35e0ff;

  --lp-r:    4px;
  --lp-r-lg: 8px;
  --lp-r-xl: 14px;

  --lp-margo: clamp(18px, 5vw, 64px);
  --lp-max:   1200px;
  --lp-fej:   64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lp {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-szoveg);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 0.95rem + 0.15vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ── FILM-SZEMCSE az egész lapon ──────────────────────────────
   SVG-zaj data URI-ként: nulla hálózati kérés. Nagyon halkan
   kavarog, ettől lesz „filmes" a felület a lapos digitális helyett. */
body.lp::before {
  content: ""; position: fixed; inset: -120px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.052;
  animation: szemcse 900ms steps(4) infinite;
}
@keyframes szemcse {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-14px, 9px); }
  50%  { transform: translate(11px, -12px); }
  75%  { transform: translate(-8px, -7px); }
  100% { transform: translate(0, 0); }
}

/* Vignetta: a szélek felé sötétedik, mint a vetítővásznon. */
body.lp::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(0,0,0,0.55) 100%);
}
@media (prefers-reduced-motion: reduce) {
  body.lp::before { animation: none; }
}

main, header, footer { position: relative; z-index: 3; }

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

.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lime); color: var(--lime-sotet);
  padding: 10px 16px; font-weight: 600;
}
.lp-skip:focus { left: 0; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 3px; border-radius: var(--lp-r);
}

.lp-belso { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-margo); }
.lp-keskeny { max-width: 820px; }
.lp-kozep   { text-align: center; }

/* ── FEJLÉC ──────────────────────────────────────────────── */
.lp-fej {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,6,10,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--lp-keret);
}
.lp-sav {
  height: var(--lp-fej); max-width: var(--lp-max); margin: 0 auto;
  padding: 0 var(--lp-margo); display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
}
.lp-logo {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px;
  letter-spacing: -0.03em; color: var(--lime); text-decoration: none; white-space: nowrap;
  text-shadow: 0 0 26px rgba(201,255,53,0.35);
}
.lp-logo b { color: var(--magenta); font-weight: 800; text-shadow: 0 0 26px rgba(251,35,194,0.4); }
.lp-logo-kicsi { font-size: 18px; }

.lp-nav { display: flex; gap: clamp(10px, 2vw, 26px); margin-right: auto; }
.lp-nav a {
  color: var(--lp-halvany); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.lp-nav a:hover { color: var(--lp-szoveg); border-bottom-color: var(--lime); }

.lp-fej-jobb { display: flex; align-items: center; gap: 10px; }
.lp-nyelv {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em;
  color: var(--lp-halvany); text-decoration: none;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r); padding: 5px 9px;
}
.lp-nyelv:hover { color: var(--lime); border-color: var(--lime); }
.lp-link { color: var(--lp-halvany); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 6px 4px; }
.lp-link:hover { color: var(--lp-szoveg); }

@media (max-width: 860px) {
  .lp-nav, .lp-link { display: none; }
  .lp-sav { justify-content: space-between; }
  .lp-logo { margin-right: auto; }
}

/* ── GOMBOK ──────────────────────────────────────────────── */
.lp-btn, .lp-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: 11px 20px; border-radius: var(--lp-r-lg);
  transition: transform .14s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease;
}
.lp-btn {
  background: var(--lime); color: var(--lime-sotet); border: 1px solid var(--lime);
  box-shadow: 0 0 0 rgba(201,255,53,0), 0 8px 26px -12px rgba(201,255,53,0.7);
}
.lp-btn:hover {
  background: #d9ff64; transform: translateY(-2px);
  box-shadow: 0 0 34px -6px rgba(201,255,53,0.55), 0 10px 30px -12px rgba(201,255,53,0.8);
}
.lp-btn2 { background: rgba(255,255,255,0.03); color: var(--lp-szoveg); border: 1px solid var(--lp-keret-2); }
.lp-btn2:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
.lp-btn-nagy { font-size: 16px; padding: 15px 28px; }
@media (prefers-reduced-motion: reduce) { .lp-btn:hover, .lp-btn2:hover { transform: none; } }

/* ── CÍMEK ───────────────────────────────────────────────── */
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(31px, 1.7rem + 3.1vw, 76px); font-weight: 800; margin: 0 0 22px; max-width: 15ch; }
h2 { font-size: clamp(27px, 1.5rem + 1.7vw, 44px); font-weight: 700; margin: 0 0 14px; max-width: 22ch; }
.lp-kozep h2 { max-width: none; margin-left: auto; margin-right: auto; }
h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }

/* A címben kiemelt szó: alá halk neon-vonás.
   🔴 A `nowrap` CSAK ott, ahol tényleg elfér: 480 px alatt az angol
   „Then the machine." kilógott a képernyőből, és mivel a lapon
   `overflow-x: hidden` van, nem görgött — LEVÁGÓDOTT. */
.lp-kiemel { position: relative; color: var(--lime); }
@media (min-width: 480px) { .lp-kiemel { white-space: nowrap; } }
.lp-kiemel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.09em;
  background: var(--lime); opacity: .32; filter: blur(1px);
}

/* ── HERO — vetítőgép-fénykúp ─────────────────────────────── */
.lp-hero { position: relative; padding: clamp(52px, 8vw, 104px) 0 clamp(46px, 6vw, 84px); overflow: hidden; }

/* A kúp: fentről-oldalról érkező fény, ami lassan lélegzik. */
.lp-hero::before {
  content: ""; position: absolute; top: -42%; left: 50%; width: 155%; height: 150%;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 42% at 18% 6%, rgba(201,255,53,0.15), transparent 62%),
    radial-gradient(42% 40% at 84% 14%, rgba(251,35,194,0.13), transparent 60%),
    radial-gradient(55% 46% at 50% 0%, rgba(53,224,255,0.07), transparent 66%);
  filter: blur(24px);
  animation: legzes 13s ease-in-out infinite;
  pointer-events: none;
}
@keyframes legzes {
  0%, 100% { opacity: .78; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .lp-hero::before { animation: none; } }

.lp-hero-racs {
  display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 54px); align-items: center;
}
@media (min-width: 1024px) { .lp-hero-racs { grid-template-columns: 1.08fr 0.92fr; } }

.lp-kis {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--magenta); margin: 0 0 18px;
  border: 1px solid var(--magenta-halk); border-radius: var(--lp-r); padding: 6px 12px;
  background: rgba(251,35,194,0.06);
}
.lp-kis::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--magenta);
  box-shadow: 0 0 10px var(--magenta); animation: pislog 2.4s ease-in-out infinite;
}
@keyframes pislog { 0%,100% { opacity: 1 } 50% { opacity: .28 } }

.lp-alcim { font-size: clamp(16px, 1rem + 0.3vw, 19px); color: var(--lp-halvany); max-width: 56ch; margin: 0 0 30px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.lp-apro { font-size: 13.5px; color: var(--lp-dim); margin: 0; }

/* ── A PROMPT-KÁRTYA — a „termékfotónk" ───────────────────── */
.pr {
  position: relative; border-radius: var(--lp-r-xl); overflow: hidden;
  background: linear-gradient(168deg, var(--lp-kartya-2), var(--lp-kartya));
  border: 1px solid var(--lp-keret-2);
  box-shadow: 0 34px 80px -34px rgba(0,0,0,0.95), 0 0 70px -30px rgba(201,255,53,0.30);
}
.pr-fej {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--lp-keret); background: rgba(0,0,0,0.28);
}
.pr-pont { width: 9px; height: 9px; border-radius: 50%; background: #2c3648; }
.pr-pont.p1 { background: #ff5f57; } .pr-pont.p2 { background: #febc2e; } .pr-pont.p3 { background: #28c840; }
.pr-cim {
  margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--lp-dim); letter-spacing: .05em;
}
.pr-test {
  padding: 20px 18px 22px; font-family: 'JetBrains Mono', monospace;
  font-size: clamp(12.5px, 0.72rem + 0.22vw, 14.5px); line-height: 1.95;
  min-height: 268px;                    /* nincs ugrálás, amíg „gépel" */
}
.pr-sor { display: block; white-space: nowrap; overflow: hidden; color: var(--lp-halvany); }
.pr-sor b  { color: var(--lime); font-weight: 500; }
.pr-sor i  { color: var(--magenta); font-style: normal; }
.pr-sor u  { color: var(--cyan); text-decoration: none; }
.pr-sor em { color: var(--lp-dim); font-style: normal; }

/* A gépelés: minden sor a saját idősávjában írja ki magát, aztán
   a ciklus végén az egész újraindul. Ez CSS, nem JS — és ha az
   animáció ki van kapcsolva, egyszerűen mind a hat sor ott áll. */
.pr-sor { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .pr-sor { width: 0; animation: gepel 16s steps(46) infinite; }
  .pr-sor:nth-child(1) { animation-delay: 0s; }
  .pr-sor:nth-child(2) { animation-delay: 1.1s; }
  .pr-sor:nth-child(3) { animation-delay: 2.2s; }
  .pr-sor:nth-child(4) { animation-delay: 3.3s; }
  .pr-sor:nth-child(5) { animation-delay: 4.4s; }
  .pr-sor:nth-child(6) { animation-delay: 5.5s; }
}
@keyframes gepel {
  0%   { width: 0; }
  7%   { width: 100%; }
  92%  { width: 100%; }
  96%  { width: 0; }
  100% { width: 0; }
}
.pr-lab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--lp-keret); background: rgba(0,0,0,0.24);
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--lp-dim);
}
.pr-lab span { display: inline-flex; align-items: center; gap: 7px; }
.pr-masol {
  color: var(--lime); border: 1px solid var(--lime-el); border-radius: var(--lp-r);
  padding: 5px 11px; background: var(--lime-halk);
}

/* ══════════════════════════════════════════════════════════
   A FILM ÉPÜL — a főoldal gerince.
   Bal oldalon a lépések görögnek, jobb oldalon a kártya RAGAD,
   és minden lépésnél egy réteggel gazdagabb lesz.
   ══════════════════════════════════════════════════════════ */

/* Nyitó képernyő: az ötlet-cédula. */
.lp-hero-sz { padding: clamp(56px, 9vw, 116px) 0 clamp(40px, 5vw, 68px); }
.lp-hero-cim { max-width: none; margin-left: auto; margin-right: auto; }

.lp-cedula {
  max-width: 620px; margin: clamp(26px, 4vw, 40px) auto clamp(22px, 3vw, 32px);
  position: relative; text-align: left;
  background: linear-gradient(168deg, var(--lp-kartya-2), var(--lp-kartya));
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-xl);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 26px);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.95), 0 0 70px -32px rgba(201,255,53,0.32);
}
.lp-cedula-jel {
  position: absolute; top: -10px; left: clamp(20px, 2.6vw, 30px);
  background: var(--magenta); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--lp-r);
}
.lp-cedula p {
  margin: 0; font-size: clamp(17px, 1rem + 0.5vw, 22px); line-height: 1.5;
  color: var(--lp-szoveg); font-style: italic;
}

/* Lefelé mutató jel — halkan pulzál. */
.lp-le { margin-top: clamp(24px, 4vw, 40px); display: flex; justify-content: center; }
.lp-le span {
  display: block; width: 11px; height: 11px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(45deg);
  animation: le 2.2s ease-in-out infinite;
}
@keyframes le {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; }
  50%      { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .lp-le span { animation: none; } }

.film-szek { padding: clamp(30px, 4vw, 60px) 0 clamp(56px, 8vw, 104px); }
.film { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3vw, 48px); align-items: start; }
@media (min-width: 1000px) { .film { grid-template-columns: 0.92fr 1.08fr; } }

.film-bal { display: grid; gap: clamp(20px, 3vw, 34px); }
@media (min-width: 1000px) {
  /* Asztalon a lépések „szellősek", hogy legyen mit görgetni a kártya mellé. */
  .film-bal { gap: clamp(120px, 26vh, 300px); padding: 22vh 0; }
}
.lepes { max-width: 46ch; }
.lepes-jel {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 14px;
  border-left: 2px solid var(--magenta); padding-left: 10px;
}
.lepes h2 { font-size: clamp(24px, 1.3rem + 1.4vw, 36px); margin-bottom: 12px; max-width: none; }
.lepes p  { color: var(--lp-halvany); font-size: clamp(15px, 0.9rem + 0.3vw, 17px); margin: 0; }

@media (min-width: 1000px) {
  .film-jobb { position: sticky; top: calc(var(--lp-fej) + 28px); }
}

/* A rétegek: alapból MIND látszik. A `nincs-meg` osztályt a JS teszi rá. */
.reteg { padding: 14px 0; border-bottom: 1px dashed var(--lp-keret); }
.reteg:last-child { border-bottom: 0; }
.reteg-cimke {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-dim); margin-bottom: 7px;
}
.reteg-sor {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(12px, 0.7rem + 0.2vw, 13.5px); line-height: 1.85;
  color: var(--lp-halvany); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reteg-sor b  { color: var(--lime);    font-weight: 500; }
.reteg-sor i  { color: var(--magenta); font-style: normal; }
.reteg-sor u  { color: var(--cyan);    text-decoration: none; }
.reteg-sor em { color: var(--lp-dim);  font-style: normal; }

@media (min-width: 1000px) {
  .reteg { transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
  .reteg.nincs-meg { opacity: 0; transform: translateY(10px); pointer-events: none; }
  /* Az ÉPPEN érkező réteg kap egy halk fényt — ettől látszik, hogy most jött. */
  .reteg.most { animation: erkezik .55s ease-out; }
  @keyframes erkezik {
    0%   { background: var(--lime-halk); }
    100% { background: transparent; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .reteg, .reteg.nincs-meg { opacity: 1; transform: none; transition: none; animation: none; }
}

/* Haladás-csík a kártya alján. */
.pr-halad {
  flex: 1 1 auto; height: 3px; background: var(--lp-keret);
  border-radius: 2px; overflow: hidden; margin-right: 12px; display: block;
}
.pr-halad-csik {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--lime), var(--magenta));
  transition: width .5s ease;
}

/* ── Két hasáb: cím + eszköz-lista ────────────────────────── */
.lp-ketto { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 42px); margin-top: clamp(44px, 6vw, 76px); }
@media (min-width: 1000px) { .lp-ketto { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
.lp-eszk-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; }
.lp-eszk-lista li {
  display: grid; grid-template-columns: 36px 1fr; gap: 4px 14px; align-items: center;
  background: var(--lp-bg-2); padding: 15px 18px; transition: background .16s ease;
}
.lp-eszk-lista li:hover { background: var(--lp-kartya-2); }
.lp-eszk-lista b { font-size: 15.5px; color: var(--lp-szoveg); }
.lp-eszk-lista span:last-child { grid-column: 2; font-size: 13.5px; color: var(--lp-halvany); }
.lp-ikon-kicsi {
  grid-row: span 2; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--lp-r-lg);
  background: var(--lime-halk); border: 1px solid var(--lime-el); color: var(--lime);
}
.lp-ikon-kicsi svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .lp-eszk-lista li { grid-template-columns: 32px 1fr; }
  .lp-ikon-kicsi { width: 32px; height: 32px; }
}

/* ── FILMSZALAG — a 15 lépés ──────────────────────────────── */
.lp-szalag-sav {
  position: relative; margin-top: clamp(38px, 5vw, 60px);
  padding: 0; overflow: hidden;
  border-top: 1px solid var(--lp-keret); border-bottom: 1px solid var(--lp-keret);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
/* perforáció fent és lent */
.lp-szalag-sav::before, .lp-szalag-sav::after {
  content: ""; position: absolute; left: 0; right: 0; height: 13px;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.14) 0 9px, transparent 9px 27px);
  background-size: 27px 7px; background-repeat: repeat-x;
  background-position: 0 center;
}
.lp-szalag-sav::before { top: 4px; }
.lp-szalag-sav::after  { bottom: 4px; }

.lp-szalag { display: flex; gap: 10px; padding: 24px 0; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .lp-szalag { animation: gordul 46s linear infinite; }
}
@keyframes gordul { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp-kocka {
  flex: 0 0 auto; width: 132px; padding: 11px 12px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
  background: var(--lp-kartya);
}
.lp-kocka-szam {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--lp-dim); letter-spacing: .08em;
}
.lp-kocka-nev { font-size: 13px; font-weight: 600; color: var(--lp-szoveg); margin-top: 3px; }
.lp-kocka.kesz { border-color: var(--lime-el); background: linear-gradient(160deg, var(--lime-halk), transparent); }
.lp-kocka.kesz .lp-kocka-nev { color: var(--lime); }

/* ── SZÁMOK — a mi „10M+ creators" helyünk ────────────────── */
.lp-szamok {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden;
}
@media (min-width: 720px)  { .lp-szamok { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .lp-szamok { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.lp-szam-cella { background: var(--lp-bg-2); padding: clamp(18px, 2.4vw, 26px); text-align: center; }
.lp-szam-ertek {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(30px, 1.6rem + 1.6vw, 44px); color: var(--lime); letter-spacing: -0.03em;
  text-shadow: 0 0 34px rgba(201,255,53,0.28);
}
.lp-szam-nev { font-size: 13px; color: var(--lp-halvany); margin-top: 4px; }

/* ── SZAKASZOK ───────────────────────────────────────────── */
.lp-szek { padding: clamp(56px, 8vw, 108px) 0; position: relative; }
.lp-szek-sotet { background: var(--lp-bg-2); border-top: 1px solid var(--lp-keret); border-bottom: 1px solid var(--lp-keret); }
.lp-vezeto { font-size: clamp(15.5px, 0.95rem + 0.25vw, 18px); color: var(--lp-halvany); max-width: 66ch; margin: 0 0 clamp(28px, 4vw, 46px); }
.lp-kozep .lp-vezeto { margin-left: auto; margin-right: auto; }

.lp-racs-3, .lp-racs-4 { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .lp-racs-3, .lp-racs-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) {
  .lp-racs-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lp-racs-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lp-racs-4 > :last-child { grid-column: span 2; }
}

/* Kártya: fent halk fény-vonal, ami rátéten felgyullad. */
.lp-kartya, .lp-eszkoz, .lp-ar {
  position: relative; background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(19px, 2.2vw, 28px); overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .22s ease;
}
.lp-kartya::before, .lp-eszkoz::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime-el), transparent);
  opacity: .38; transition: opacity .22s ease;
}
.lp-kartya:hover, .lp-eszkoz:hover {
  border-color: var(--lp-keret-2); transform: translateY(-3px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,0.9), 0 0 50px -26px rgba(201,255,53,0.3);
}
.lp-kartya:hover::before, .lp-eszkoz:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lp-kartya:hover, .lp-eszkoz:hover { transform: none; } }
.lp-kartya p, .lp-eszkoz p { color: var(--lp-halvany); margin: 0; font-size: 15px; }

.lp-szam-jel {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .1em; color: var(--magenta); margin-bottom: 13px;
}
.lp-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 15px;
  background: var(--lime-halk); border: 1px solid var(--lime-el);
  border-radius: var(--lp-r-lg); color: var(--lime);
  box-shadow: 0 0 24px -10px rgba(201,255,53,0.7);
}
.lp-ikon svg { width: 20px; height: 20px; }

.lp-valasz {
  margin: clamp(26px, 4vw, 40px) 0 0; padding: clamp(19px, 2.4vw, 28px);
  background: linear-gradient(100deg, var(--lime-halk), transparent 70%);
  border-left: 3px solid var(--lime); border-radius: 0 var(--lp-r-lg) var(--lp-r-lg) 0;
  color: var(--lp-halvany); font-size: 16px;
}
.lp-valasz b { color: var(--lp-szoveg); }

/* ── AZ ÖT SZAKASZ ───────────────────────────────────────── */
.lp-fazisok { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-fazis {
  display: flex; gap: clamp(14px, 2vw, 24px); align-items: flex-start;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-left: 3px solid var(--lime); border-radius: var(--lp-r-lg);
  padding: clamp(16px, 2vw, 22px); transition: transform .18s ease, border-color .18s ease;
}
.lp-fazis:hover { transform: translateX(4px); border-color: var(--lp-keret-2); border-left-color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .lp-fazis:hover { transform: none; } }
.lp-fazis-szam { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--lime); flex: 0 0 auto; padding-top: 2px; }
.lp-fazis p { margin: 0; color: var(--lp-halvany); font-size: 15px; }

/* ── ELŐTTE / UTÁNA ──────────────────────────────────────── */
.lp-elutan { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .lp-elutan { grid-template-columns: 1fr auto 1fr; } }
.lp-oldal {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(18px, 2.2vw, 26px);
}
.lp-oldal-cimke {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-dim); margin-bottom: 12px;
}
.lp-nyers { font-size: 17px; color: var(--lp-halvany); font-style: italic; }
.lp-kesz-lista { list-style: none; margin: 0; padding: 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.9; }
.lp-kesz-lista li { color: var(--lp-halvany); padding-left: 18px; position: relative; }
.lp-kesz-lista li::before { content: "›"; position: absolute; left: 2px; color: var(--lime); }
.lp-nyil {
  display: flex; align-items: center; justify-content: center;
  color: var(--lime); font-size: 26px; opacity: .7;
}
@media (max-width: 899px) { .lp-nyil { transform: rotate(90deg); } }

/* ── CHIPEK ──────────────────────────────────────────────── */
.lp-chipek { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lp-chipek li {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--lp-halvany);
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r); padding: 8px 15px;
  background: var(--lp-kartya); transition: border-color .16s, color .16s;
}
.lp-chipek li:hover { border-color: var(--lime-el); color: var(--lime); }

/* ── ÁRAK ────────────────────────────────────────────────── */
.lp-ar { display: flex; flex-direction: column; }
.lp-ar ul { list-style: none; margin: 0 0 22px; padding: 0; flex: 1 1 auto; }
.lp-ar li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--lp-halvany); font-size: 14.5px; }
.lp-ar li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.lp-ar li b { color: var(--lp-szoveg); }
.lp-osszeg {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(34px, 2rem + 1.4vw, 48px);
  font-weight: 800; margin: 6px 0 18px; letter-spacing: -0.03em;
}
.lp-osszeg em { font-family: 'IBM Plex Sans', sans-serif; font-style: normal; font-size: 15px; font-weight: 400; color: var(--lp-dim); }
.lp-ar-ki {
  border-color: var(--magenta); background: linear-gradient(170deg, rgba(251,35,194,0.10), var(--lp-kartya) 60%);
  box-shadow: 0 0 60px -30px rgba(251,35,194,0.8);
}
.lp-ar-ki::before { background: linear-gradient(90deg, transparent, var(--magenta), transparent); opacity: .8; }
.lp-cimke {
  position: absolute; top: 0; right: clamp(18px, 2.2vw, 26px);
  background: var(--magenta); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px;
  border-radius: 0 0 var(--lp-r) var(--lp-r);
}
.lp-ar .lp-btn, .lp-ar .lp-btn2 { width: 100%; }

/* ── GYIK ────────────────────────────────────────────────── */
.lp-gyik { border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); background: var(--lp-kartya); margin-bottom: 10px; overflow: hidden; transition: border-color .16s; }
.lp-gyik:hover { border-color: var(--lp-keret-2); }
.lp-gyik summary { cursor: pointer; list-style: none; padding: 17px 48px 17px 19px; font-weight: 600; font-size: 16px; position: relative; }
.lp-gyik summary::-webkit-details-marker { display: none; }
.lp-gyik summary::after {
  content: ""; position: absolute; right: 21px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(45deg); transition: transform .2s ease;
}
.lp-gyik[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp-gyik[open] summary { color: var(--lime); }
.lp-gyik p { margin: 0; padding: 0 19px 19px; color: var(--lp-halvany); font-size: 15.5px; }

/* ── ZÁRÓ ────────────────────────────────────────────────── */
.lp-zaro { padding: clamp(60px, 9vw, 116px) 0; position: relative; overflow: hidden; background: var(--lp-bg-2); border-top: 1px solid var(--lp-keret); }
.lp-zaro::before {
  content: ""; position: absolute; inset: -50% 0 auto; height: 200%;
  background: radial-gradient(46% 40% at 50% 22%, rgba(201,255,53,0.13), transparent 64%),
              radial-gradient(40% 34% at 50% 30%, rgba(251,35,194,0.10), transparent 62%);
  filter: blur(18px); animation: legzes 15s ease-in-out infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .lp-zaro::before { animation: none; } }
.lp-zaro .lp-belso { position: relative; z-index: 1; }
.lp-zaro h2 { margin-bottom: 12px; }

/* ── LÁBLÉC ──────────────────────────────────────────────── */
.lp-lab { padding: 32px 0; border-top: 1px solid var(--lp-keret); background: var(--lp-bg); }
.lp-lab-sav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; justify-content: space-between; }
.lp-lab nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lp-lab a { color: var(--lp-halvany); text-decoration: none; font-size: 14px; }
.lp-lab a:hover { color: var(--lime); }
.lp-copy { color: var(--lp-dim); font-size: 13px; }

/* ── BEÚSZÁS ─────────────────────────────────────────────────
   Az alapállapot LÁTHATÓ; a rejtést a JS teszi rá, és csak a hajtás
   alatti elemekre. JS nélkül és a keresőnek minden ott van. */
.reveal { transition: opacity .55s ease, transform .55s ease; }
.reveal.rejtve { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.rejtve { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════
   BELÉPÉS / REGISZTRÁCIÓ — ugyanaz a vetítőterem, két hasábban.
   ══════════════════════════════════════════════════════════ */
.lp-auth { min-height: calc(100vh - var(--lp-fej)); display: flex; align-items: center; padding: clamp(28px, 5vw, 64px) 0; }
.lp-auth-racs { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; width: 100%; }
@media (min-width: 1000px) { .lp-auth-racs { grid-template-columns: 1.05fr 0.95fr; } }
@media (max-width: 999px)  { .lp-auth-bal { display: none; } }   /* telefonon az űrlap a fontos */

/* Nem h1, de úgy néz ki: a lap főcíme az űrlapé. */
.lp-auth-cim {
  font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.025em; line-height: 1.08;
  font-size: clamp(30px, 1.6rem + 1.9vw, 50px); font-weight: 800;
  margin: 0 0 18px; max-width: 14ch;
}
.lp-auth-lista { list-style: none; margin: 26px 0 0; padding: 0; }
.lp-auth-lista li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--lp-halvany); font-size: 15.5px; }
.lp-auth-lista li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 9px;
  border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}

.lp-auth-doboz {
  background: linear-gradient(168deg, var(--lp-kartya-2), var(--lp-kartya));
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-xl);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 34px 80px -34px rgba(0,0,0,0.95), 0 0 80px -40px rgba(201,255,53,0.28);
}
.lp-auth-doboz h1 { font-size: clamp(24px, 1.3rem + 0.9vw, 32px); margin-bottom: 8px; max-width: none; }
.lp-auth-doboz .lp-alcim { font-size: 15px; margin-bottom: 24px; }

.lp-mezo { margin-bottom: 17px; }
.lp-mezo label { display: block; font-size: 13.5px; font-weight: 600; color: var(--lp-szoveg); margin-bottom: 7px; }
.lp-mezo label span { color: var(--lp-dim); font-weight: 400; }
.lp-mezo input {
  width: 100%; height: 46px; padding: 0 14px;
  background: rgba(0,0,0,0.32); color: var(--lp-szoveg);
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  font-family: 'IBM Plex Sans', sans-serif; font-size: 15px;
  transition: border-color .15s ease, box-shadow .18s ease;
}
.lp-mezo input::placeholder { color: var(--lp-dim); }
.lp-mezo input:focus {
  outline: none; border-color: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-halk);
}
.lp-mezo small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--lp-dim); }
.lp-auth-doboz .lp-btn { width: 100%; margin-top: 6px; }
/* Robot-szűrő: a widget fix méretű, ezért csak helyet adunk neki. */
.lp-turnstile { margin: 4px 0 18px; min-height: 65px; }

.lp-auth-alt { margin: 20px 0 0; font-size: 14.5px; color: var(--lp-halvany); text-align: center; }
.lp-auth-alt a { color: var(--lime); text-decoration: none; font-weight: 600; }
.lp-auth-alt a:hover { text-decoration: underline; }
.lp-auth-hiba {
  background: rgba(255,95,87,0.12); border: 1px solid rgba(255,95,87,0.45);
  color: #ffb3ae; border-radius: var(--lp-r-lg); padding: 12px 14px; margin-bottom: 18px; font-size: 14.5px;
}

/* ── JELSZÓ-ERŐSSÉG MÉRŐ a belépő/regisztrációs képernyőn ──
   2026-08-02. Ugyanaz a komponens, mint a Műhelyben (`wlai_jelszo_ero()`),
   de ez a képernyő a NYILVÁNOS design-nyelvet használja (sötét vetítőterem),
   ezért a színek itt a saját változóiból jönnek. A szerkezet betűre azonos —
   a JS mindkét helyen ugyanaz. */
.jero { margin-top: 9px; }
.jero-sav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.jero-sav i {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(150,180,220,0.16); transition: background .2s ease;
}
.jero-alsó { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.jero-alsó b { font-size: 12px; font-weight: 700; }
.jero-alsó span { font-size: 12px; line-height: 1.45; color: var(--lp-dim); }

.jero.p0 .jero-sav i:nth-child(1)     { background: #ff5c60; }
.jero.p0 .jero-alsó b                 { color: #ff7b7e; }
.jero.p1 .jero-sav i:nth-child(-n+2)  { background: #f0a020; }
.jero.p1 .jero-alsó b                 { color: #f0a020; }
.jero.p2 .jero-sav i:nth-child(-n+3)  { background: #9dcf35; }
.jero.p2 .jero-alsó b                 { color: #9dcf35; }
.jero.p3 .jero-sav i                  { background: var(--lime, #c9ff35); }
.jero.p3 .jero-alsó b                 { color: var(--lime, #c9ff35); }

/* ── JELSZÓ-VISSZAÁLLÍTÁS képernyők (`_jelszo.php`) ── */
/* Itt nincs bal hasáb (nincs mit „eladni"), ezért a doboz középen áll. */
.lp-auth-racs.lp-auth-egy { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }

/* Sikeres művelet visszajelzése — a hiba-doboz párja. */
.lp-auth-ok {
  margin-bottom: 16px; padding: 11px 14px;
  background: rgba(201,255,53,0.10); border: 1px solid rgba(201,255,53,0.34);
  border-radius: var(--lp-r-lg); color: var(--lime);
  font-size: 13.5px; line-height: 1.5;
}
/* Az „Elfelejtetted a jelszavad?" a jelszó-mező alatt, halkan. */
.lp-elfelejtett { display: block; margin-top: 7px; }
.lp-elfelejtett a { color: var(--lp-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.lp-elfelejtett a:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* ── MEGHÍVÓ-KÓD a regisztrációnál ───────────────────────────
   Csukott sor annak, akinek nincs kódja; magától nyitva annak, aki
   meghívó-linkről érkezett. Így senkit nem zavar, és senki nem keresi. */
.lp-meghivo { margin: -4px 0 16px; }
.lp-meghivo summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--lp-halvany);
}
.lp-meghivo summary::-webkit-details-marker { display: none; }
.lp-meghivo summary::before {
  content: ""; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.lp-meghivo[open] summary::before { transform: rotate(45deg); margin-top: -4px; }
.lp-meghivo summary:hover { color: var(--lp-szoveg); }
.lp-meghivo .lp-mezo input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* A logó magenta pontja (2026-08-03) — a nyilvános és a belépő képernyőn. */
.lp-logo .logo-pont {
  font-style: normal; font-weight: 800; color: var(--magenta);
  margin: 0 0.5px; text-shadow: 0 0 26px rgba(251,35,194,0.4);
}

/* ══════════════════════════════════════════════════════════════
   JOGI LAPOK (2026-08-04) — ÁSZF, adatvédelem, elállás, impresszum.

   🔑 A jogi szöveg attól még olvasható lehet, hogy kötelező. Három dolog
   dönti el: mérhető sorhossz (a `.lp-keskeny` 820 px-e ~75 karakter),
   levegő a szakaszok között, és egy tartalomjegyzék, amivel a 11. pont
   is megtalálható. Enélkül a lap egyetlen szövegfal.

   🔑 Minden szín a meglévő `--lp-*` változókból jön. Nem találunk ki újat:
   egy nem létező változó NÉMÁN megöli az egész deklarációt.
   ══════════════════════════════════════════════════════════════ */

/* ── Tartalomjegyzék ── */
.jogi-tj {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); padding: clamp(18px, 2.4vw, 26px);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.jogi-tj > b {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--lp-dim); margin-bottom: 12px;
}
/* 🔴 NINCS CSS-SZÁMOZÁS. A szakasz-címek MAGUK tartalmazzák a sorszámot
   („5. Csomagok, árak, fizetés"), és egy `counter()` mellette „5. 5. Csomagok"-at
   adott — mérve. Egy szám elég. */
.jogi-tj ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
}
@media (min-width: 720px) { .jogi-tj ol { grid-template-columns: 1fr 1fr; column-gap: 26px; } }
.jogi-tj a {
  display: flex; gap: 9px; align-items: baseline;
  color: var(--lp-halvany); text-decoration: none;
  font-size: 14.5px; line-height: 1.5;
  /* 44 px tap-cél telefonon: a link maga alacsony, a függőleges térköz adja. */
  padding: 5px 0; min-height: 32px;
}
.jogi-tj a::before {
  content: ""; width: 5px; height: 5px; margin-top: 0.55em;
  border-radius: 50%; background: var(--lime); flex: none; opacity: 0.75;
}
.jogi-tj a:hover { color: var(--lp-szoveg); }

/* ── A szöveg ── */
.jogi-szakasz { margin-bottom: clamp(34px, 4.5vw, 56px); scroll-margin-top: calc(var(--lp-fej) + 20px); }
.jogi-szakasz > h2 {
  font-size: clamp(19px, 1.05rem + 0.35vw, 23px); line-height: 1.3;
  font-weight: 700; color: var(--lp-szoveg);
  margin: 0 0 14px; padding-bottom: 11px;
  border-bottom: 1px solid var(--lp-keret);
}
.jogi-szoveg p {
  font-size: clamp(15px, 0.94rem + 0.12vw, 16.5px); line-height: 1.72;
  color: var(--lp-halvany); margin: 0 0 15px;
  /* Hosszú szó (URL, cégjegyzékszám) ne lógjon ki 375 px-en. */
  overflow-wrap: anywhere;
}
.jogi-szoveg a { color: var(--lime); text-decoration: none; border-bottom: 1px solid var(--lime-el); }
.jogi-szoveg a:hover { border-bottom-color: var(--lime); }

.jogi-kiemelt {
  background: var(--lp-kartya); border-left: 3px solid var(--lime);
  border-radius: 0 var(--lp-r) var(--lp-r) 0;
  padding: 15px 18px; color: var(--lp-szoveg) !important;
  margin: 0 0 18px !important;
}

.jogi-lista { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.jogi-lista li {
  position: relative; padding-left: 20px;
  font-size: clamp(15px, 0.94rem + 0.12vw, 16.5px); line-height: 1.68;
  color: var(--lp-halvany);
}
.jogi-lista li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
}

/* ── Címke → érték rács ──
   🔑 SZÁNDÉKOSAN NEM `<table>`: telefonon a kétoszlopos táblázat vagy
   vízszintesen görget, vagy betűnként töri a szavakat. Ez 640 px alatt
   magától egymás alá rendeződik. */
.jogi-tabla {
  margin: 0 0 18px; display: grid; gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); overflow: hidden;
}
.jogi-tabla dt, .jogi-tabla dd {
  background: var(--lp-bg-2); margin: 0; padding: 13px 16px;
  font-size: 14.5px; line-height: 1.62; overflow-wrap: anywhere;
}
.jogi-tabla dt { font-weight: 600; color: var(--lp-szoveg); padding-bottom: 4px; }
.jogi-tabla dd { color: var(--lp-halvany); padding-top: 0; }
@media (min-width: 640px) {
  /* 🔑 `minmax(0, …)`: enélkül a rács-cella a leghosszabb szótól szélesedne,
     és a doboz kilógna a konténerből. */
  .jogi-tabla { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
  .jogi-tabla dt { padding-bottom: 13px; }
  .jogi-tabla dd { padding-top: 13px; }
}

/* ── Tovább a többi jogi lapra ── */
.jogi-tovabb {
  margin-top: clamp(38px, 5vw, 62px); padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--lp-keret);
  display: grid; gap: 10px;
}
@media (min-width: 720px) { .jogi-tovabb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jogi-tovabb a {
  display: block; padding: 15px 17px; text-decoration: none;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); transition: border-color .16s ease, background .16s ease;
}
.jogi-tovabb a:hover { border-color: var(--lp-keret-2); background: var(--lp-kartya-2); }
.jogi-tovabb b { display: block; font-size: 14.5px; font-weight: 600; color: var(--lp-szoveg); margin-bottom: 4px; }
.jogi-tovabb span { display: block; font-size: 13px; line-height: 1.55; color: var(--lp-dim); }

/* ── Lábléc: a jogi hivatkozások sora ── */
.lp-lab-jogi {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lp-keret);
}
.lp-lab-jogi a {
  color: var(--lp-dim); text-decoration: none; font-size: 13px;
  padding: 4px 0; min-height: 24px;
}
.lp-lab-jogi a:hover { color: var(--lp-szoveg); }
.lp-lab-ceg { font-size: 12px; line-height: 1.6; color: var(--lp-dim); margin: 10px 0 0; }

/* A regisztrációs gomb alatti jogi sor (2026-08-04). */
.lp-auth-jogi {
  font-size: 12.5px; line-height: 1.6; color: var(--lp-dim);
  margin: 14px 0 0; text-align: center;
}
.lp-auth-jogi a { color: var(--lp-halvany); text-decoration: none; border-bottom: 1px solid var(--lp-keret-2); }
.lp-auth-jogi a:hover { color: var(--lime); border-bottom-color: var(--lime-el); }

/* A jogi lap feje SZŰKEBB, mint a nyitóoldalé.
   🔑 Mérve 2026-08-04: a `lp-hero-sz` + `lp-szek` együtt ~200 px üres teret
   hagyott a cím és a tartalomjegyzék között. A nyitóoldalon az levegő,
   itt viszont csak görgetés — a jogi lapra azért jön valaki, hogy ELOLVASSA. */
.jogi-fej { padding: clamp(38px, 5vw, 64px) 0 clamp(6px, 1vw, 14px); }
.jogi-fej .lp-hero-cim { margin-bottom: 12px; }
.jogi-fej .lp-alcim { margin-bottom: 10px; }
.jogi-torzs { padding: clamp(20px, 2.4vw, 32px) 0 clamp(56px, 7vw, 96px); }

/* Külső hivatkozás a jogi lapon — nyíl jelzi, hogy elvisz. */
.jogi-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.jogi-link::after { content: "↗"; font-size: 0.9em; opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════
   2026-08-05 — A NYILVÁNOS OLDAL ALOLDALAKAT KAPOTT
   Mobil menü · morzsa · oszlopos lábléc · árlap.
   Minden mozgás kikapcsol `prefers-reduced-motion` mellett, és
   MINDEN tartalom látszik JS nélkül is.
   ══════════════════════════════════════════════════════════════ */

/* Vizuálisan rejtett, de felolvasható (táblázat-felirat, segédszöveg). */
.lp-rejtett {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── MOBIL MENÜ ────────────────────────────────────────────────
   🔴 TELEFONON EDDIG NEM VOLT MENÜ: a `.lp-nav` 860 px alatt eltűnt,
   és a látogató a főoldalról sehova nem jutott. `<details>`, tehát
   JS NÉLKÜL nyílik, és a kereső a linkeket így is olvassa. */
.lp-mob { display: none; position: relative; }
.lp-mob > summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r);
}
.lp-mob > summary::-webkit-details-marker { display: none; }
.lp-mob > summary span {
  display: block; width: 17px; height: 2px; background: var(--lp-szoveg);
  transition: transform .18s ease, opacity .18s ease;
}
.lp-mob[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-mob[open] > summary span:nth-child(2) { opacity: 0; }
.lp-mob[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .lp-mob > summary span { transition: none; } }

.lp-mob-lap {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 232px; display: flex; flex-direction: column;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret-2);
  border-radius: var(--lp-r-lg); padding: 8px;
  box-shadow: 0 26px 60px -26px rgba(0,0,0,0.95);
}
.lp-mob-lap a {
  color: var(--lp-halvany); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 11px 13px; border-radius: var(--lp-r);
}
.lp-mob-lap a:hover, .lp-mob-lap a[aria-current] { background: var(--lime-halk); color: var(--lime); }

@media (max-width: 860px) {
  .lp-mob { display: block; }
  /* A „Kezdd el ingyen" marad — az a lap célja. A többi a menübe költözik. */
  .lp-nav, .lp-link { display: none; }
}
@media (max-width: 460px) {
  .lp-fej-jobb .lp-btn { padding: 10px 13px; font-size: 13.5px; }
}

/* ── MORZSA ───────────────────────────────────────────────────── */
.lp-morzsa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--lp-dim); margin: 0 0 22px;
}
.lp-morzsa a { color: var(--lp-halvany); text-decoration: none; border-bottom: 1px solid transparent; }
.lp-morzsa a:hover { color: var(--lime); border-bottom-color: var(--lime-el); }
.lp-morzsa b { color: var(--lp-szoveg); font-weight: 600; }
.lp-morzsa span { color: var(--lp-dim); }

/* ── LÁBLÉC OSZLOPOKBAN ───────────────────────────────────────── */
.lp-lab-racs {
  display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 48px);
  padding-bottom: 30px;
}
/* 🔴 ÁRVA SOR (mérve 768 px-en): a négy blokk három oszlopban azt jelenti,
   hogy a negyedik egyedül áll a második sorban. A user szabálya szerint ez
   nem ízlés kérdése — soha nincs árva sor. Ezért 620 px felett KETTŐ oszlop
   (két teli sor), és csak 940 px felett négy (egy teli sor). */
@media (min-width: 620px)  { .lp-lab-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .lp-lab-racs { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.lp-lab-fo p { color: var(--lp-halvany); font-size: 14px; margin: 12px 0 18px; max-width: 40ch; }
.lp-lab-fo .lp-btn2 { font-size: 13.5px; padding: 9px 16px; }

.lp-lab-oszlop b {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lp-dim); font-family: 'JetBrains Mono', monospace; margin-bottom: 14px;
}
.lp-lab-oszlop nav { display: flex; flex-direction: column; gap: 9px; }

.lp-lab-alja {
  border-top: 1px solid var(--lp-keret); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between;
}
.lp-lab-alja .lp-lab-ceg { margin: 0; max-width: 62ch; }

/* ══════════════════════════════════════════════════════════════
   ÁRLAP
   ══════════════════════════════════════════════════════════════ */

.ar-fej { padding: clamp(30px, 4vw, 52px) 0 clamp(14px, 2vw, 26px); }
.ar-fej .lp-hero-cim { max-width: 18ch; margin-left: 0; }
.ar-fej .lp-alcim { max-width: 62ch; margin-bottom: 26px; }

/* A próbaidő-sáv: a lap legfontosabb mondata, a hajtás fölött. */
.ar-proba {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap;
  padding: clamp(15px, 2vw, 20px) clamp(16px, 2.4vw, 26px);
  border: 1px solid var(--lime-el); border-radius: var(--lp-r-lg);
  background: linear-gradient(100deg, var(--lime-halk), transparent 62%);
  max-width: 760px; position: relative; overflow: hidden;
}
/* Halk fény, ami balról jobbra átvonul — nyugodt, nem villog. */
.ar-proba::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(201,255,53,0.14) 46%, transparent 72%);
  transform: translateX(-60%);
  animation: ar-fenypaszta 7.5s ease-in-out infinite;
}
@keyframes ar-fenypaszta {
  0%, 100% { transform: translateX(-60%); }
  50%      { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) { .ar-proba::after { animation: none; opacity: .5; } }

/* 🔴 A SZÜLŐ-SZELEKTOR LECSAPOTT A GYEREKRE (mérve 2026-08-05):
   a lenti `.ar-proba span` szabály (halvány kék, 14,5 px) ERŐSEBB, mint a
   `.ar-proba-jel` egyetlen osztálya — így a lime jelvényen halványkék
   szöveg állt, 1,9:1 kontraszttal. Olvashatatlan volt, és a screenshoton
   „elmosódásnak" látszott, nem hibának.
   🔑 A javítás a SPECIFIKUSSÁG emelése, nem `!important`: a `!important`
   a következő ilyen ütközésnél már nem hagyna hova menekülni. */
.ar-proba .ar-proba-jel {
  flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 13px; letter-spacing: .08em; color: var(--lime-sotet);
  background: var(--lime); border-radius: var(--lp-r); padding: 8px 12px;
  position: relative; z-index: 1;
}
.ar-proba div { position: relative; z-index: 1; }
.ar-proba b    { display: block; font-size: 16px; color: var(--lp-szoveg); margin-bottom: 3px; }
.ar-proba span { font-size: 14.5px; color: var(--lp-halvany); }

/* ── SZŰRŐK ──────────────────────────────────────────────────────
   A rádiógombok a szakasz elején állnak, a rács utánuk — így a CSS
   `~` szelektorával minden szűrhető, JS nélkül.
   🔑 A gombok nem `display:none`-nal tűnnek el, hanem a képernyőn
   kívülre tolva: így billentyűzettel is elérhetők maradnak. */
.ar-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.ar-szurok {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 30px);
  align-items: flex-start; margin-bottom: clamp(26px, 3.4vw, 40px);
}
/* A „mire használod" a leghosszabb és a legfontosabb — saját sorba kerül,
   a fizetési ütem és a pénznem pedig alatta, egymás mellett. Mérésből:
   a három szűrő egy sorban 1280 px-en sem fért el. */
.ar-szuro-szeles { flex: 1 0 100%; }
.ar-szuro { display: flex; flex-direction: column; gap: 9px; }
.ar-szuro-cim {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-dim);
}
.ar-szuro small { font-size: 12px; color: var(--lp-dim); max-width: 30ch; }

.ar-kapcsolo {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-2);
}
.ar-vlg {
  cursor: pointer; user-select: none; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--lp-halvany);
  padding: 9px 15px; border-radius: var(--lp-r);
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;                      /* érintő-célpont, lásd a lap alján */
}
.ar-vlg:hover { color: var(--lp-szoveg); background: rgba(255,255,255,0.04); }
.ar-vlg i {
  font-style: normal; font-size: 11px; font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em; color: var(--magenta);
  border: 1px solid var(--magenta-halk); border-radius: var(--lp-r); padding: 2px 6px;
}
@media (prefers-reduced-motion: reduce) { .ar-vlg { transition: none; } }

/* Az AKTÍV választás — tömör lime, ahogy a Műhelyben is: „ezt te választottad". */
#utem-havi:checked  ~ .ar-szurok .ar-vlg-havi,
#utem-eves:checked  ~ .ar-szurok .ar-vlg-eves,
#kinek-mind:checked ~ .ar-szurok .ar-vlg-mind,
#kinek-egyedul:checked    ~ .ar-szurok .ar-vlg-egyedul,
#kinek-rendszeres:checked ~ .ar-szurok .ar-vlg-rendszeres,
#kinek-csapat:checked     ~ .ar-szurok .ar-vlg-csapat {
  background: var(--lime); color: var(--lime-sotet); border-color: var(--lime);
}
#utem-eves:checked ~ .ar-szurok .ar-vlg-eves i { color: var(--lime-sotet); border-color: rgba(6,17,29,0.3); background: rgba(6,17,29,0.12); }

/* A billentyűzetes használó lássa, hol jár. */
.ar-radio:focus-visible ~ .ar-szurok .ar-vlg { outline: none; }
#utem-havi:focus-visible  ~ .ar-szurok .ar-vlg-havi,
#utem-eves:focus-visible  ~ .ar-szurok .ar-vlg-eves,
#kinek-mind:focus-visible ~ .ar-szurok .ar-vlg-mind,
#kinek-egyedul:focus-visible    ~ .ar-szurok .ar-vlg-egyedul,
#kinek-rendszeres:focus-visible ~ .ar-szurok .ar-vlg-rendszeres,
#kinek-csapat:focus-visible     ~ .ar-szurok .ar-vlg-csapat {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

/* Pénznem — szerveroldali linkek, tehát JS nélkül is működnek. */
.ar-penzek { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); background: var(--lp-bg-2); }
.ar-penz {
  text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--lp-halvany); padding: 10px 13px; border-radius: var(--lp-r);
  border: 1px solid transparent; min-height: 44px; display: inline-flex; align-items: center;
}
.ar-penz:hover { color: var(--lp-szoveg); background: rgba(255,255,255,0.04); }
.ar-penz.ez { background: var(--lime); color: var(--lime-sotet); border-color: var(--lime); font-weight: 500; }

/* ── A HÁROM KÁRTYA ───────────────────────────────────────────── */
.ar-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); align-items: stretch; }
/* 🔑 A HÁROM HASÁB CSAK 880 PX FELETT. Mérve: 768 px-es tableten a
   kártyák 220 px szélesre nyomódtak, és egy „8 900 Ft" ára alig fért ki.
   Álló tableten inkább egymás alatt, teljes szélességben — ott a
   görgetés olcsóbb, mint az összenyomott szöveg. */
@media (min-width: 880px)  { .ar-racs { grid-template-columns: repeat(3, 1fr); } }

.ar-kartya {
  position: relative; display: flex; flex-direction: column;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.6vw, 30px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .2s ease, opacity .2s ease;
}
.ar-kartya:hover { transform: translateY(-3px); border-color: var(--lp-keret-2); }
@media (prefers-reduced-motion: reduce) { .ar-kartya, .ar-kartya:hover { transition: none; transform: none; } }

/* A kiemelt csomag: magenta felső fénycsík + halk aurora a háttérben. */
.ar-ki { border-color: var(--magenta-halk); box-shadow: 0 26px 64px -34px rgba(251,35,194,0.55); }
.ar-ki::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--magenta), transparent);
  border-radius: var(--lp-r-xl) var(--lp-r-xl) 0 0;
}
/* 🔴 KONTRASZT (mérve): fehér szöveg magentán csak 3,4:1 — a WCAG AA
   4,5:1-et kér, és ez egy 11,5 px-es felirat, tehát nem számít „nagy
   szövegnek". Sötét betűvel 5,5:1, és a magenta „ide nézz" szerepe megmarad. */
.ar-jelvny {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--magenta); color: var(--lime-sotet); padding: 4px 12px; border-radius: var(--lp-r);
}

.ar-kartya-fej { margin-bottom: 16px; }
.ar-kartya h2 { font-size: 22px; margin: 0 0 6px; max-width: none; }
.ar-kinek { margin: 0; font-size: 14px; color: var(--lp-halvany); min-height: 2.9em; }

.ar-osszeg { margin-bottom: 20px; min-height: 78px; }
.ar-osszeg b {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(34px, 2rem + 1.1vw, 44px);
  font-weight: 800; letter-spacing: -0.03em; color: var(--lp-szoveg); line-height: 1.05;
}
.ar-osszeg > span > span { font-size: 15px; color: var(--lp-dim); font-weight: 400; }
.ar-osszeg i {
  display: block; font-style: normal; font-size: 12.5px; color: var(--lime);
  font-family: 'JetBrains Mono', monospace; margin-top: 6px;
}
.ar-cs-ingyen .ar-osszeg > span:first-child { display: block; }
.ar-cs-ingyen .ar-osszeg span:last-child { font-size: 15px; color: var(--lp-dim); }

/* HAVI ↔ ÉVES — mindkét ár a HTML-ben van, a CSS az egyiket rejti. */
.ar-eves { display: none; }
#utem-eves:checked ~ .ar-racs .ar-eves { display: inline-block; }
#utem-eves:checked ~ .ar-racs .ar-havi { display: none; }

.ar-mit { list-style: none; margin: 0 0 22px; padding: 0; flex: 1 1 auto; }
.ar-mit li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  color: var(--lp-halvany); font-size: 14.5px; line-height: 1.55;
}
.ar-mit li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px;
  border-radius: 2px; background: var(--lime);
}
.ar-mit li.nem { color: var(--lp-dim); }
.ar-mit li.nem::before { background: transparent; border: 1px solid var(--lp-keret-2); }
.ar-mit li b { color: var(--lp-szoveg); font-weight: 600; }
.ar-mit li em {
  display: block; font-style: normal; font-size: 12.5px; color: var(--lp-dim);
  font-family: 'JetBrains Mono', monospace; margin-top: 2px;
}

.ar-kartya .lp-btn, .ar-kartya .lp-btn2 { width: 100%; }
.ar-apro { display: block; text-align: center; font-size: 12.5px; color: var(--lp-dim); margin-top: 9px; }

/* MIRE HASZNÁLOD — a nem illő csomagok halkulnak, az illő emelkedik.
   🔑 Nem REJTJÜK el őket: aki a Stúdióra kíváncsi, attól még lássa. */
#kinek-egyedul:checked ~ .ar-racs .ar-cs-pro,
#kinek-egyedul:checked ~ .ar-racs .ar-cs-studio,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-ingyen,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-studio,
#kinek-csapat:checked ~ .ar-racs .ar-cs-ingyen,
#kinek-csapat:checked ~ .ar-racs .ar-cs-pro {
  opacity: .52;
}
#kinek-egyedul:checked    ~ .ar-racs .ar-cs-ingyen,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-pro,
#kinek-csapat:checked     ~ .ar-racs .ar-cs-studio {
  border-color: var(--lime-el);
  box-shadow: 0 26px 64px -34px rgba(201,255,53,0.5);
}
/* A „legtöbbeknek ez elég" jelvény csak akkor igaz, ha nem szűrtél másra. */
#kinek-egyedul:checked ~ .ar-racs .ar-jelvny,
#kinek-csapat:checked  ~ .ar-racs .ar-jelvny { opacity: 0; }

.ar-labjegyzet { margin: clamp(22px, 3vw, 32px) 0 0; font-size: 13px; color: var(--lp-dim); max-width: 76ch; }

/* ── MI AZ AZ AI-HÍVÁS ────────────────────────────────────────── */
.ar-hivas { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; margin-bottom: clamp(24px, 3vw, 36px); }
@media (min-width: 620px)  { .ar-hivas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ar-hivas { grid-template-columns: repeat(4, 1fr); } }
.ar-hivas-elem { background: var(--lp-bg-3); padding: clamp(18px, 2.2vw, 24px); }
.ar-hivas-szam {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--lp-r);
  background: var(--lime-halk); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; margin-bottom: 11px;
}
.ar-hivas-elem b { display: block; font-size: 16px; margin-bottom: 5px; }
.ar-hivas-elem > span:last-child { font-size: 14px; color: var(--lp-halvany); }

.ar-szamlalo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; }
@media (min-width: 760px) { .ar-szamlalo { grid-template-columns: repeat(4, 1fr); } }
.ar-szamlalo-elem { background: var(--lp-bg); padding: clamp(18px, 2.4vw, 28px); text-align: center; }
.ar-szamlalo-elem b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(30px, 1.8rem + 1.2vw, 44px); letter-spacing: -0.03em;
  color: var(--lp-szoveg); line-height: 1;
}
.ar-szamlalo-elem.ki b { color: var(--lime); }
.ar-szamlalo-elem span { display: block; font-size: 13px; color: var(--lp-halvany); margin-top: 7px; }

/* ── ÖSSZEHASONLÍTÓ TÁBLÁZAT ──────────────────────────────────────
   🔑 SAJÁT görgetődobozban, nem a lapban: telefonon így nem tolja
   szét az egész oldalt. Ez a hiba egyszer már végigment a Műhelyen. */
.ar-tabla-doboz { overflow-x: auto; border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); background: var(--lp-kartya); }
.ar-tabla { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 14.5px; }
.ar-tabla th, .ar-tabla td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--lp-keret); }
.ar-tabla thead th { position: sticky; top: 0; background: var(--lp-bg-3); font-size: 13px; letter-spacing: .04em; z-index: 1; }
.ar-tabla th[scope="row"] { text-align: left; font-weight: 500; color: var(--lp-halvany); min-width: 240px; }
.ar-tabla tbody tr:last-child th, .ar-tabla tbody tr:last-child td { border-bottom: 0; }
.ar-tabla tbody tr:hover { background: rgba(255,255,255,0.02); }
.ar-tabla .ki { background: rgba(251,35,194,0.05); }
.ar-tabla thead .ki { color: var(--magenta); }
.ar-van   { color: var(--lime); font-size: 17px; }
.ar-nincs { color: var(--lp-dim); }


/* ── HORGONY ÉS TÉRKÖZ ────────────────────────────────────────────
   🔴 A sticky fejléc RÁTAKARTA a szakasz tetejét, ha valaki horgonyra
   ugrott (`#csomagok`, `#gyik`). A jogi lapoknál ez már meg volt oldva —
   most minden azonosítóval ellátott nyilvános szakasz megkapja. */
.lp-szek[id], .lp-hero[id], .ar-lap section[id] {
  scroll-margin-top: calc(var(--lp-fej) + 18px);
}

/* A lap feje után a csomag-szakasz KÖZELEBB kezdődik: a hero alsó és a
   szekció felső paddingja együtt 190 px üres sávot adott a próbaidő-doboz
   és a szűrők között. Az levegő helyett görgetés volt. */
.ar-lap .ar-csomagok { padding-top: clamp(26px, 3vw, 42px); }

/* ── ÉRINTŐ-CÉLPONTOK ─────────────────────────────────────────────
   🔴 Mérve 2026-08-05, 375 px-en: a gombok 40–43 px magasak voltak, a
   követelmény 44×44. Egérrel a 42 px kényelmes, ujjal viszont mellé lehet
   nyúlni — ezért az EGÉRNÉL nem változtatunk, csak ott, ahol tényleg
   ujjal nyúlnak hozzá. Ugyanez a megoldás a Műhelyben már bevált. */
@media (pointer: coarse) {
  .lp-btn, .lp-btn2 { min-height: 44px; }
  .lp-nyelv         { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .lp-mob-lap a     { min-height: 44px; display: flex; align-items: center; }
  .lp-gyik summary  { min-height: 44px; display: flex; align-items: center; }
}

/* ── MOZGÁS-CSÖKKENTÉS: A VÉGSŐ HÁLÓ ─────────────────────────────
   🔴 Mérve 2026-08-05: négy animáció (`pislog`, `gordul`, `erkezik`,
   `ar-fenypaszta`) egyenként volt kikapcsolva vagy sem — a `pislog` és a
   `gordul` NEM volt. Az egyenkénti kikapcsolás elfelejthető: minden új
   animációnál újra meg kell csinálni, és a hiba NÉMA (aki mozgás-érzékeny,
   nem ír nekünk, csak elmegy).

   Ez a blokk MINDENT lefog, ami eddig kimaradt vagy ezután születik.
   🔑 Nem `animation: none` — az a KEZDŐ állapotban fagyasztana. A
   „0,01 ms + egy ismétlés" a VÉGállapotba viszi, ami minden itteni
   animációnál a nyugalmi kép (a szalag féltolása duplikált tartalomnál
   ugyanaz a látvány, a pislogás vége teljes fedés, a beúszásé az alapszín).
   🔑 A gépelés-animáció szándékosan `no-preference` blokkban él, tehát itt
   el sem indul — a hat sor egyszerűen ott áll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FUNKCIÓK LAP
   ══════════════════════════════════════════════════════════════ */

.fn-elso { padding-top: clamp(26px, 3vw, 42px); }

/* ── A három réteg ────────────────────────────────────────────── */
.fn-harom { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 820px) { .fn-harom { grid-template-columns: repeat(3, 1fr); } }
.fn-reteg {
  position: relative; background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(22px, 2.6vw, 30px);
  overflow: hidden;
}
/* Halk fény a kártya bal felső sarkából — nem villog, csak van. */
.fn-reteg::before {
  content: ""; position: absolute; top: -60%; left: -20%; width: 90%; height: 140%;
  background: radial-gradient(50% 40% at 50% 50%, var(--lime-halk), transparent 70%);
  pointer-events: none;
}
.fn-reteg-szam {
  position: relative; display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .1em; color: var(--lime); margin-bottom: 14px;
}
.fn-reteg h2 { position: relative; font-size: 22px; margin: 0 0 10px; max-width: none; }
.fn-reteg p  { position: relative; margin: 0; color: var(--lp-halvany); font-size: 15px; }

/* ── Jelmagyarázat ────────────────────────────────────────────── */
.fn-jelmagy {
  list-style: none; margin: 0 0 clamp(20px, 2.6vw, 30px); padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.fn-jelmagy li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--lp-halvany); }
.fn-pont { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.fn-p-eszkoz  { background: var(--lime); }
.fn-p-ai      { background: var(--magenta); }
.fn-p-szamolt { background: var(--cyan); }
.fn-p-mezos   { background: var(--lp-dim); }

/* ── A 15 lépés térképe ───────────────────────────────────────── */
.fn-terkep { display: grid; gap: clamp(14px, 2vw, 20px); }
.fn-szakasz {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  background: var(--lp-bg-3); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 900px) { .fn-szakasz { grid-template-columns: 250px 1fr; gap: clamp(20px, 2.4vw, 34px); } }

.fn-szakasz-fej { display: flex; flex-direction: column; gap: 5px; }
.fn-rom {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 26px;
  color: var(--lime); letter-spacing: -0.02em; line-height: 1;
}
.fn-szakasz-fej b { font-size: 19px; font-family: 'Bricolage Grotesque', sans-serif; }
.fn-szakasz-fej > span:last-child { font-size: 13.5px; color: var(--lp-halvany); }

.fn-lepesek { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); overflow: hidden; }
.fn-lepes {
  display: grid; grid-template-columns: 30px 26px 1fr auto; align-items: center; gap: 10px;
  background: var(--lp-kartya); padding: 12px 14px; position: relative;
}
/* A bal élen a fajta színe — ez köti össze a jelmagyarázattal.
   🔴 A FAJTA-OSZTÁLYOK KÜLÖN ELŐTAGOT KAPNAK (`fn-f-`). Először `fn-eszkoz`
   volt a nevük — ugyanaz, mint az eszköz-KÁRTYÁÉ lentebb —, és a két
   szabálykészlet ráragadt egymásra: a kártyákra rákerült ez a színes él, a
   lépésekre pedig a kártya kerete és rátét-emelkedése. A mérés fogta meg:
   15 „eszközt" számolt ott, ahol 8 van. */
.fn-lepes::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.fn-f-eszkoz::before  { background: var(--lime); }
.fn-f-ai::before      { background: var(--magenta); }
.fn-f-szamolt::before { background: var(--cyan); }
.fn-f-mezos::before   { background: var(--lp-dim); }

.fn-sorszam { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--lp-dim); text-align: right; }
.fn-ikon svg { width: 17px; height: 17px; color: var(--lp-halvany); }
.fn-lepes b { font-size: 15px; }
.fn-mit { grid-column: 3; font-size: 13px; color: var(--lp-dim); }
.fn-fajta {
  grid-row: 1 / span 2; grid-column: 4; align-self: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .05em;
  color: var(--lp-halvany); border: 1px solid var(--lp-keret); border-radius: var(--lp-r);
  padding: 3px 8px; white-space: nowrap;
}
@media (max-width: 620px) {
  .fn-lepes { grid-template-columns: 26px 22px 1fr; row-gap: 4px; }
  .fn-fajta { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
  .fn-mit   { grid-column: 1 / -1; }
}

/* ── Az eszközök ──────────────────────────────────────────────── */
.fn-eszkozok { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 640px)  { .fn-eszkozok { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .fn-eszkozok { grid-template-columns: repeat(4, 1fr); } }
.fn-eszkoz {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(18px, 2.2vw, 24px);
  transition: transform .16s ease, border-color .16s ease;
}
.fn-eszkoz:hover { transform: translateY(-3px); border-color: var(--lime-el); }
@media (prefers-reduced-motion: reduce) { .fn-eszkoz:hover { transform: none; } }
.fn-eszkoz-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--lp-r-lg);
  background: var(--lime-halk); color: var(--lime); margin-bottom: 13px;
}
.fn-eszkoz-ikon svg { width: 19px; height: 19px; }
.fn-eszkoz h3 { font-size: 16.5px; margin: 0 0 7px; }
.fn-eszkoz p  { margin: 0; font-size: 13.5px; color: var(--lp-halvany); line-height: 1.55; }

/* ── A három nyelv — inline SVG ───────────────────────────────────
   🔑 A feliratok VALÓDI <text> elemek, tehát a Google olvassa őket, és
   a színek CSS-ből jönnek — így az ábra a lap témájával együtt él, és
   JS nélkül is teljesen látszik. */
.fn-abra { margin: 0; }
.fn-svg  { width: 100%; height: auto; display: block; }
.fn-sav rect { fill: var(--lp-kartya); stroke: var(--lp-keret); stroke-width: 1; }
.fn-sav-lime    rect { stroke: var(--lime-el); }
.fn-sav-magenta rect { stroke: rgba(251,35,194,0.42); }
.fn-sav-cyan    rect { stroke: rgba(53,224,255,0.42); }
.fn-sav-cim {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em;
  fill: var(--lp-szoveg);
}
.fn-sav-lime    .fn-sav-cim { fill: var(--lime); }
.fn-sav-magenta .fn-sav-cim { fill: var(--magenta); }
.fn-sav-cyan    .fn-sav-cim { fill: var(--cyan); }
.fn-sav-mit   { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; fill: var(--lp-halvany); }
.fn-sav-kinek { font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; font-weight: 600; fill: var(--lp-szoveg); }
.fn-abra figcaption { margin-top: 14px; font-size: 13px; color: var(--lp-dim); }
/* Kis képernyőn az SVG szövege olvashatatlanul összemenne, ezért ott
   nagyobb betűvel rajzoljuk (a viewBox arányát a böngésző kezeli). */
@media (max-width: 640px) {
  .fn-sav-cim   { font-size: 17px; }
  .fn-sav-mit   { font-size: 19px; }
  .fn-sav-kinek { font-size: 20px; }
}

/* ── Amit a végén kapsz ───────────────────────────────────────── */
.fn-eredmeny { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; }
@media (min-width: 760px) { .fn-eredmeny { grid-template-columns: repeat(2, 1fr); } }
.fn-er { display: flex; gap: 14px; background: var(--lp-kartya); padding: clamp(16px, 2vw, 22px); }
.fn-er-ikon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--lp-r-lg);
  background: rgba(255,255,255,0.04); color: var(--lime);
}
.fn-er-ikon svg { width: 17px; height: 17px; }
.fn-er b    { display: block; font-size: 15.5px; margin-bottom: 4px; }
.fn-er span { font-size: 13.5px; color: var(--lp-halvany); line-height: 1.55; }

/* ── Amit NEM csinálunk ───────────────────────────────────────── */
.fn-nem { display: grid; gap: 12px; margin-bottom: 18px; }
.fn-nem-elem {
  border-left: 3px solid var(--magenta); padding: 14px 0 14px 18px;
  background: linear-gradient(90deg, var(--magenta-halk), transparent 40%);
}
.fn-nem-elem b { display: block; font-size: 16px; margin-bottom: 5px; }
.fn-nem-elem p { margin: 0; font-size: 14.5px; color: var(--lp-halvany); }

.fn-zaro-gombok { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   HOGYAN MŰKÖDIK — IDŐVONAL
   🔑 Nem kártyarács: itt a SORREND a mondanivaló. Minden állomás
   abból él, amit az előző hagyott hátra, ezért fut végig egy vonal.
   ══════════════════════════════════════════════════════════════ */

.hg-elso { padding-top: clamp(26px, 3vw, 42px); }

.hg-cedula {
  margin-top: 26px; max-width: 620px;
  border: 1px dashed var(--lp-keret-2); border-radius: var(--lp-r-lg);
  padding: 16px 20px; background: rgba(255,255,255,0.02);
}
.hg-cedula-jel {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); margin-bottom: 7px;
}
.hg-cedula p { margin: 0; font-size: 17px; color: var(--lp-szoveg); font-style: italic; }

.hg-vonal { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.hg-allomas { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: clamp(26px, 3.4vw, 44px); }
@media (min-width: 820px) { .hg-allomas { grid-template-columns: 56px 1fr; gap: 26px; } }

/* A jelzés-oszlop: korong + a lefelé futó vonal. */
.hg-jel { position: relative; display: flex; flex-direction: column; align-items: center; }
.hg-jel::after {
  content: ""; position: absolute; top: 46px; bottom: -22px; width: 2px;
  background: linear-gradient(var(--lime-el), var(--lp-keret));
}
.hg-allomas:last-child .hg-jel::after { display: none; }

.hg-korong {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--lp-r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lp-kartya); border: 1px solid var(--lime-el); color: var(--lime);
  box-shadow: 0 0 26px -10px rgba(201,255,53,0.55);
}
.hg-korong svg { width: 20px; height: 20px; }
.hg-szam {
  margin-top: 9px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--lp-dim); background: var(--lp-bg); padding: 2px 0; position: relative; z-index: 1;
}

.hg-torzs { min-width: 0; }
.hg-fej { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 8px; }
.hg-fej h2 { font-size: clamp(21px, 1.2rem + 0.7vw, 28px); margin: 0; max-width: none; }
.hg-perc {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--lp-halvany);
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r); padding: 3px 9px; white-space: nowrap;
}
.hg-mit { margin: 0 0 16px; color: var(--lp-halvany); font-size: 15.5px; max-width: 68ch; }

/* A „mit írsz be / mi van meg" doboz: ez a termék maga, ezért gépbetűs. */
.hg-doboz {
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-3); padding: 15px 17px; max-width: 640px;
}
.hg-doboz-cim {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--lp-dim); margin-bottom: 9px;
}
.hg-doboz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hg-doboz li {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--lp-halvany);
  padding-left: 16px; position: relative; overflow-wrap: anywhere;
}
.hg-doboz li::before { content: "›"; position: absolute; left: 0; color: var(--lime); }

.hg-ki { margin: 14px 0 0; font-size: 14.5px; color: var(--lp-dim); max-width: 68ch; }

/* ── Ami a háttérben történik ─────────────────────────────────── */
.hg-hatter { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 820px) { .hg-hatter { grid-template-columns: repeat(3, 1fr); } }
.hg-h-elem {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.4vw, 26px);
}
.hg-h-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--lp-r-lg);
  background: var(--magenta-halk); color: var(--magenta); margin-bottom: 13px;
}
.hg-h-ikon svg { width: 18px; height: 18px; }
.hg-h-elem b { display: block; font-size: 16.5px; margin-bottom: 7px; font-family: 'Bricolage Grotesque', sans-serif; }
.hg-h-elem p { margin: 0; font-size: 14px; color: var(--lp-halvany); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   KINEK VALÓ
   ══════════════════════════════════════════════════════════════ */

.kv-elso { padding-top: clamp(26px, 3vw, 42px); }

.kv-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 720px)  { .kv-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .kv-racs { grid-template-columns: repeat(3, 1fr); } }

.kv-kartya {
  display: flex; flex-direction: column;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.4vw, 28px);
  transition: border-color .16s ease, transform .16s ease;
}
.kv-kartya:hover { border-color: var(--lime-el); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .kv-kartya:hover { transform: none; } }

.kv-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--lp-r-lg);
  background: var(--lime-halk); color: var(--lime); margin-bottom: 14px;
}
.kv-ikon svg { width: 20px; height: 20px; }
.kv-kartya h2 { font-size: 19px; margin: 0 0 16px; max-width: none; line-height: 1.25; }

.kv-blokk { margin-bottom: 14px; }
.kv-cimke {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px;
}
.kv-baj .kv-cimke { color: var(--magenta); }
.kv-mit .kv-cimke { color: var(--lime); }
.kv-blokk p { margin: 0; font-size: 14px; color: var(--lp-halvany); line-height: 1.6; }
.kv-mit     { flex: 1 1 auto; }

/* A kártya lába: a példa és a hozzá elég csomag. */
.kv-lab {
  margin-top: 4px; padding-top: 15px; border-top: 1px solid var(--lp-keret);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
}
.kv-pelda { font-size: 12.5px; color: var(--lp-dim); font-style: italic; max-width: 24ch; }
.kv-csomag {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .04em;
  color: var(--lime); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--lime-el); border-radius: var(--lp-r); padding: 5px 10px;
}
.kv-csomag:hover { background: var(--lime-halk); }

/* ── Ami mindegyikben közös ───────────────────────────────────── */
.kv-kozos { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.2vw, 26px); }
@media (min-width: 860px) { .kv-kozos { grid-template-columns: repeat(3, 1fr); } }
.kv-k-elem { border-top: 2px solid var(--lime); padding-top: 18px; }
.kv-k-szam {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--lime); letter-spacing: .1em; margin-bottom: 9px;
}
.kv-k-elem b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; margin-bottom: 8px; }
.kv-k-elem p { margin: 0; font-size: 14.5px; color: var(--lp-halvany); line-height: 1.62; }

/* ══════════════════════════════════════════════════════════════
   GYIK LAP
   ══════════════════════════════════════════════════════════════ */

/* Ugró-sáv a csoportokhoz — horgony-linkek, JS nélkül is működnek. */
.gy-ugro { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.gy-ugro a {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); padding: 10px 14px; min-height: 44px;
  color: var(--lp-halvany); font-size: 14px; font-weight: 500;
  transition: border-color .15s, color .15s;
}
.gy-ugro a:hover { border-color: var(--lime-el); color: var(--lp-szoveg); }
.gy-ugro svg { width: 17px; height: 17px; color: var(--lime); }
.gy-ugro b {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  color: var(--lp-dim); background: rgba(255,255,255,0.04);
  border-radius: var(--lp-r); padding: 2px 7px;
}

.gy-csoport { padding-top: clamp(34px, 4vw, 56px); padding-bottom: clamp(34px, 4vw, 56px); }
.gy-fej { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.gy-fej h2 { margin: 0; font-size: clamp(23px, 1.3rem + 0.8vw, 30px); max-width: none; }
.gy-fej-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--lp-r-lg); flex: 0 0 auto;
  background: var(--lime-halk); color: var(--lime);
}
.gy-fej-ikon svg { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════
   KAPCSOLAT
   ══════════════════════════════════════════════════════════════ */

.kp-elso { padding-top: clamp(26px, 3vw, 42px); }

.kp-cim-doboz {
  margin-top: 26px; display: inline-flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--lime-el); border-radius: var(--lp-r-lg);
  padding: 16px 22px; background: linear-gradient(100deg, var(--lime-halk), transparent 70%);
}
.kp-cim-jel {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lp-dim);
}
.kp-cim {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: clamp(20px, 1.1rem + 1vw, 28px); letter-spacing: -0.02em;
  color: var(--lime); text-decoration: none; overflow-wrap: anywhere;
}
.kp-cim:hover { text-decoration: underline; text-underline-offset: 4px; }

/* „Lehet, hogy már megvan a válasz" */
.kp-elobb {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl);
  background: var(--lp-bg-3); padding: clamp(20px, 2.6vw, 30px);
}
@media (min-width: 900px) { .kp-elobb { grid-template-columns: 1fr auto; gap: 34px; } }
.kp-elobb h2 { font-size: 22px; margin: 0 0 8px; max-width: none; }
.kp-elobb p  { margin: 0; color: var(--lp-halvany); font-size: 15px; max-width: 56ch; }
.kp-elobb-gombok { display: flex; flex-wrap: wrap; gap: 10px; }

/* A hat téma */
.kp-racs { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 700px)  { .kp-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kp-racs { grid-template-columns: repeat(3, 1fr); } }

.kp-elem {
  position: relative; display: block; text-decoration: none;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(18px, 2.2vw, 24px);
  transition: border-color .16s ease, transform .16s ease;
}
.kp-elem:hover { border-color: var(--lime-el); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .kp-elem:hover { transform: none; } }
.kp-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--lp-r-lg);
  background: var(--lime-halk); color: var(--lime); margin-bottom: 12px;
}
.kp-ikon svg { width: 18px; height: 18px; }
.kp-elem b { display: block; font-size: 16px; color: var(--lp-szoveg); margin-bottom: 6px; }
.kp-mikor { display: block; font-size: 13.5px; color: var(--lp-halvany); line-height: 1.55; }
.kp-nyil {
  position: absolute; top: clamp(18px, 2.2vw, 24px); right: clamp(18px, 2.2vw, 24px);
  color: var(--lp-dim); font-size: 15px; transition: transform .16s ease, color .16s ease;
}
.kp-elem:hover .kp-nyil { color: var(--lime); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .kp-elem:hover .kp-nyil { transform: none; } }

/* Mit írj bele */
.kp-tippek { list-style: none; margin: 0; padding: 0; counter-reset: tipp; display: grid; gap: 16px; }
.kp-tippek li { counter-increment: tipp; padding-left: 46px; position: relative; }
.kp-tippek li::before {
  content: counter(tipp); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: var(--lp-r);
  display: flex; align-items: center; justify-content: center;
  background: var(--lime-halk); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
}
.kp-tippek b    { display: block; font-size: 16px; margin-bottom: 4px; }
.kp-tippek span { font-size: 14.5px; color: var(--lp-halvany); line-height: 1.6; }

/* Cégadatok */
.kp-ceg {
  margin: 0 0 16px; display: grid; grid-template-columns: 1fr; gap: 2px 20px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl);
  background: var(--lp-kartya); padding: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 620px) { .kp-ceg { grid-template-columns: minmax(0, 240px) 1fr; } }
.kp-ceg dt { font-size: 13px; color: var(--lp-dim); padding: 7px 0; }
.kp-ceg dd { margin: 0; font-size: 15px; color: var(--lp-szoveg); padding: 7px 0; }
.kp-ceg dd a { color: var(--lime); text-decoration: none; }
.kp-ceg dd a:hover { text-decoration: underline; }
@media (min-width: 620px) {
  .kp-ceg dt, .kp-ceg dd { border-top: 1px solid var(--lp-keret); }
  .kp-ceg dt:first-of-type, .kp-ceg dd:first-of-type { border-top: 0; }
}

/* ══════════════════════════════════════════════════════════════
   TUDÁSBÁZIS — lista és cikk
   ══════════════════════════════════════════════════════════════ */

.tb-elso { padding-top: clamp(26px, 3vw, 42px); }

.tb-temak { list-style: none; margin: 0 0 clamp(20px, 2.6vw, 30px); padding: 0; display: flex; flex-wrap: wrap; gap: 9px 20px; }
.tb-temak li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--lp-halvany); }
.tb-tema-pont { width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.tb-temak b {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: var(--lp-dim);
  background: rgba(255,255,255,0.04); border-radius: var(--lp-r); padding: 1px 7px;
}

.tb-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 720px)  { .tb-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .tb-racs { grid-template-columns: repeat(3, 1fr); } }

.tb-kartya {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.tb-kartya:hover { border-color: var(--lime-el); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .tb-kartya:hover { transform: none; } }
.tb-link { display: flex; flex-direction: column; height: 100%; padding: clamp(20px, 2.4vw, 26px); text-decoration: none; }

.tb-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.tb-tema {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime);
}
.tb-perc { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lp-dim); }
.tb-kartya h2 { font-size: 18.5px; line-height: 1.28; margin: 0 0 10px; max-width: none; color: var(--lp-szoveg); }
.tb-kartya p  { margin: 0 0 16px; font-size: 14px; color: var(--lp-halvany); line-height: 1.6; flex: 1 1 auto; }
.tb-tovabb { font-size: 13.5px; font-weight: 600; color: var(--lime); }

/* ── A cikk ───────────────────────────────────────────────────── */
.tb-cikk-fej { padding: clamp(30px, 4vw, 52px) 0 clamp(8px, 1.4vw, 18px); }
.tb-cikk-fej .lp-hero-cim { font-size: clamp(28px, 1.5rem + 2.2vw, 50px); max-width: none; }
.tb-meta { margin: 6px 0 0; font-size: 13px; color: var(--lp-dim); display: flex; gap: 9px; flex-wrap: wrap; }
.tb-torzs { padding: clamp(18px, 2.2vw, 30px) 0 clamp(50px, 6vw, 84px); }

.tb-szoveg p {
  font-size: clamp(16px, 0.98rem + 0.22vw, 18px); line-height: 1.72;
  color: var(--lp-halvany); margin: 0 0 20px; max-width: 68ch;
}
.tb-szoveg h2 {
  font-size: clamp(24px, 1.3rem + 1vw, 33px); margin: clamp(36px, 4vw, 54px) 0 16px;
  max-width: none; scroll-margin-top: calc(var(--lp-fej) + 18px);
}
.tb-szoveg h3 { font-size: 20px; margin: 30px 0 12px; }

.tb-lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.tb-lista li {
  position: relative; padding-left: 24px; font-size: 15.5px;
  color: var(--lp-halvany); line-height: 1.62;
}
.tb-lista li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--lime);
}

.tb-lepesek { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: lep; display: grid; gap: 14px; }
.tb-lepesek li { counter-increment: lep; position: relative; padding-left: 48px; }
.tb-lepesek li::before {
  content: counter(lep); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--lp-r);
  display: flex; align-items: center; justify-content: center;
  background: var(--lime-halk); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
}
.tb-lepesek b    { display: block; font-size: 16.5px; margin-bottom: 5px; }
.tb-lepesek span { display: block; font-size: 15px; color: var(--lp-halvany); line-height: 1.62; }

.tb-kiemelt {
  margin: 0 0 24px; padding: 18px 22px;
  border-left: 3px solid var(--lime);
  background: linear-gradient(90deg, var(--lime-halk), transparent 60%);
  font-size: 16.5px; color: var(--lp-szoveg); line-height: 1.6;
}

.tb-idezet {
  margin: clamp(28px, 3.4vw, 40px) 0; padding: 0 0 0 26px;
  border-left: 2px solid var(--magenta);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500;
  font-size: clamp(19px, 1.05rem + 0.6vw, 24px); line-height: 1.45;
  color: var(--lp-szoveg); letter-spacing: -0.015em;
}

.tb-szamok {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); overflow: hidden; margin: 0 0 24px;
}
.tb-szamok > div { background: var(--lp-bg-3); padding: clamp(16px, 2vw, 22px); text-align: center; }
.tb-szamok b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(22px, 1.2rem + 1vw, 32px); color: var(--lime); line-height: 1.1; letter-spacing: -0.02em;
}
.tb-szamok span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--lp-halvany); line-height: 1.4; }

/* A másolható prompt-részlet: pont úgy néz ki, ahogy a generátorba kerül. */
.tb-prompt {
  margin: 0 0 24px; border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-3); overflow: hidden;
}
.tb-prompt figcaption {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-dim);
  padding: 9px 16px; border-bottom: 1px solid var(--lp-keret); background: rgba(0,0,0,0.24);
}
.tb-prompt code {
  display: block; padding: 16px; font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; line-height: 1.75; color: var(--cyan);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.tb-tabla-doboz { margin: 0 0 26px; }
.tb-tabla { min-width: 460px; }
.tb-tabla th[scope="row"] { min-width: 160px; }

.tb-tovabbiak { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--lp-keret); }
.tb-tovabbiak h2 { font-size: 22px; margin: 0 0 18px; max-width: none; }

/* A nyitott regisztráció jelzése a nyitóoldalon — halk, de a hajtás fölött. */
.lp-nyitva {
  display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 0;
  font-size: 14px; color: var(--lp-halvany);
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r);
  padding: 8px 14px; background: rgba(255,255,255,0.02);
}
.lp-nyitva-pont {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 10px var(--lime); animation: pislog 2.4s ease-in-out infinite;
}