/* ============================================================
   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);
}