/* ===========================================================================
   Balazs Janocsi — AI automation

   Sötét, mérnöki felület. A "prémium" érzetet négy dolog adja, nem az effektek
   száma:
     1. rétegzett felületek és következetes árnyékskála
     2. EGYETLEN kiemelőszín, csak ott, ahol cselekvés van
     3. a kurzort követő fényfolt — ettől él a lap, és ezt csinálják a nagyok is
     4. mozgás, aminek dolga van (a terminál lejátssza a terméket)

   Nincs lila-rózsaszín AI-gradient. Attól néz ki minden AI-oldal ugyanolyannak.
   =========================================================================== */

:root {
  --hatter:        #060910;
  --hatter-2:      #0A101C;
  --felulet:       #101A2B;
  --felulet-2:     #16233A;
  --keret:         #1E2C44;
  --keret-eros:    #2B3D5C;

  --szoveg:        #E8EEF7;
  --halvany:       #9FB0C7;
  --nagyon-halk:   #8296B1;

  --kiemel:        #38BDF8;
  --kiemel-eros:   #0EA5E9;
  --kiemelen:      #041520;

  --ok:            #34D399;
  --veszely:       #F87171;
  --figyelem:      #FBBF24;

  --t1: 4px;  --t2: 8px;  --t3: 12px; --t4: 16px;
  --t5: 24px; --t6: 32px; --t7: 48px; --t8: 64px; --t9: 96px;

  --iv: 16px;
  --iv-kicsi: 10px;

  --arnyek-1: 0 1px 2px rgba(0,0,0,.4);
  --arnyek-2: 0 8px 24px -8px rgba(0,0,0,.6);
  --arnyek-3: 0 32px 72px -20px rgba(0,0,0,.8);

  /* Egyetlen mozgásritmus az egész lapon. */
  --gyors: 140ms;
  --ido:   240ms;
  --lassu: 520ms;
  --gorbe: cubic-bezier(.2,.7,.3,1);
  --rugo:  cubic-bezier(.34,1.4,.5,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--hatter);
  color: var(--szoveg);
  font: 400 17px/1.65 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ------------------------------------------------------------- Háttérrétegek */

#hatter { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .5; }

/* Két nagyon lassan sodródó fényfolt. Kék és zöldeskék — nem lila. */
.fenyfolt { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fenyfolt i {
  position: absolute; display: block;
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .16;
}
.fenyfolt i:nth-child(1) { top: -14vw; left: -8vw;  background: #1D6FE0; animation: sodras 34s ease-in-out infinite alternate; }
.fenyfolt i:nth-child(2) { top: 22vw;  right: -12vw; background: #0E7490; animation: sodras 44s ease-in-out infinite alternate-reverse; }

@keyframes sodras {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(6vw, 8vw, 0) scale(1.18); }
}

.szemcse {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, .fejlec, .lablec { position: relative; z-index: 2; }

.sav { width: min(1160px, 100% - 2 * var(--t5)); margin-inline: auto; }
.sav.keskeny { width: min(760px, 100% - 2 * var(--t5)); }

.skip {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  background: var(--kiemel); color: var(--kiemelen);
  padding: var(--t3) var(--t4); border-radius: 0 0 var(--iv-kicsi) 0;
  font-weight: 600; z-index: 100; white-space: nowrap;
}
.skip:focus { width: auto; height: auto; clip-path: none; }

/* -------------------------------------------------------------- Tipográfia */

h1, h2, h3 { margin: 0; letter-spacing: -.024em; line-height: 1.1; font-weight: 700; }
/* A H1 most kulcsszavas mondat, nem márkanév — hosszabb, tehát kisebb kell.
   A 6,4vw-s méret a magyar változatot öt sorba törte, és a gombokat a hajtás
   alá nyomta. A text-wrap: balance kiegyenlíti a sorhosszakat; ahol a böngésző
   nem ismeri, ott a szokásos törés marad. */
h1 {
  font-size: clamp(1.95rem, 4.3vw, 3rem);
  line-height: 1.14;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--kiemel); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); line-height: 1.16; margin-bottom: var(--t4); }
h3 { font-size: 1.1rem; letter-spacing: -.012em; }
p  { margin: 0 0 var(--t4); }

.vezeto     { font-size: 1.18rem; color: var(--halvany); max-width: 56ch; }
.nagyszoveg { font-size: 1.12rem; color: var(--halvany); max-width: 62ch; }
.alszoveg   { color: var(--halvany); max-width: 62ch; }
.halk       { color: var(--nagyon-halk); font-size: .92rem; }
.jegyzet    { color: var(--nagyon-halk); font-size: .92rem; border-left: 2px solid var(--keret); padding-left: var(--t4); }

.rejtett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nemlatszik { display: none !important; }

.cimke, .szakaszcimke {
  display: flex; align-items: center; gap: var(--t2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kiemel); margin-bottom: var(--t3);
}
.szakaszcimke { color: var(--nagyon-halk); }
.szakaszcimke .szam { color: var(--kiemel); }

/* Az élő pont a hero címkéjén: azt jelzi, hogy a lap "fut". */
.pulzus {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: pulzal 2.4s ease-out infinite;
}
@keyframes pulzal {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

a { color: var(--kiemel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #7DD3FC; }
:focus-visible { outline: 3px solid var(--kiemel); outline-offset: 3px; border-radius: var(--t1); }

/* ============================ A FÉNYFOLT ============================
   A kurzort követő halvány fénykör. Ez az egyetlen effekt, ami minden
   interaktív felületen ott van, és ettől érződik a lap "élőnek".
   A --mx/--my értékeket a JS állítja. */

[data-fenyfolt] { position: relative; isolation: isolate; }

[data-fenyfolt]::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--ido) var(--gorbe);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(56,189,248,.13), transparent 62%);
}
[data-fenyfolt]:hover::before,
[data-fenyfolt]:focus-within::before { opacity: 1; }

/* ------------------------------------------------------------------ Gombok */

.gomb {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--t2);
  min-height: 46px; padding: 0 var(--t5);
  background: var(--kiemel); color: var(--kiemelen);
  border: 1px solid var(--kiemel); border-radius: var(--iv-kicsi);
  font: 600 .98rem/1 Inter, sans-serif; text-decoration: none; cursor: pointer;
  transition: background var(--ido) var(--gorbe),
              box-shadow var(--ido) var(--gorbe),
              transform var(--gyors) var(--gorbe);
  box-shadow: 0 8px 26px -10px rgba(56,189,248,.7);
  will-change: transform;
}
.gomb-nagy { min-height: 54px; padding: 0 var(--t6); font-size: 1.02rem; }

/* Fénypászma, ami áthúz a gombon hoverkor. */
.gomb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 620ms var(--gorbe);
}
.gomb:hover::after { transform: translateX(120%); }
.gomb:hover { background: #7DD3FC; border-color: #7DD3FC; box-shadow: 0 14px 34px -10px rgba(56,189,248,.85); }
.gomb:active { transform: scale(.975); }

.gomb-halk { background: transparent; color: var(--szoveg); border-color: var(--keret-eros); box-shadow: none; }
.gomb-halk::after { background: linear-gradient(105deg, transparent 35%, rgba(56,189,248,.16) 50%, transparent 65%); }
.gomb-halk:hover { background: var(--felulet-2); border-color: var(--kiemel); color: var(--szoveg); box-shadow: 0 10px 28px -14px rgba(56,189,248,.6); }

.gomb-kicsi { min-height: 38px; padding: 0 var(--t4); font-size: .9rem; }
.gombsor { display: flex; flex-wrap: wrap; gap: var(--t3); margin-top: var(--t6); }

/* ------------------------------------------------------------------ Fejléc */

.fejlec {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(16px) saturate(140%);
  background: color-mix(in srgb, var(--hatter) 78%, transparent);
  border-bottom: 1px solid var(--keret);
}

/* Görgetési folyamatjelző. Vékony, de sokat ad: mutatja, hol tartasz. */
.folyamat {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--kiemel), #22D3EE);
  box-shadow: 0 0 12px rgba(56,189,248,.7);
}

.fejlec .sav { display: flex; align-items: center; justify-content: space-between; gap: var(--t4); min-height: 64px; }
.jel { display: inline-flex; align-items: center; gap: var(--t3); text-decoration: none; color: var(--szoveg); font-weight: 600; }
.jel-mark {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(140deg, var(--kiemel), #1D4ED8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 14px -3px rgba(56,189,248,.75);
  transition: transform var(--ido) var(--rugo);
}
.jel:hover .jel-mark { transform: rotate(-12deg) scale(1.08); }

.fejlec nav { display: flex; align-items: center; gap: var(--t5); }
.fejlec nav a { position: relative; color: var(--halvany); text-decoration: none; font-size: .95rem; }
.fejlec nav a:not(.gomb)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--kiemel); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--ido) var(--gorbe);
}
.fejlec nav a:not(.gomb):hover { color: var(--szoveg); }
.fejlec nav a:not(.gomb):hover::after { transform: scaleX(1); }
.fejlec nav a.gomb { color: var(--kiemelen); }

@media (max-width: 820px) { .fejlec nav a:not(.gomb) { display: none; } }

/* -------------------------------------------------------------------- Hero */

.hero { padding: clamp(var(--t7), 8vw, var(--t9)) 0 var(--t9); }
/* FONTOS: align-items nem "center".
   A jobb oldali kártya menet közben nő — a terminál sorai peregnek, aztán
   megjelenik a rangsor és az indoklás. Középre igazított rácsnál ettől a BAL
   oszlop is elmozdul, vagyis a főcím ugrál a futás alatt. A "start" rögzíti
   a szöveget: a kártya lefelé nő, a cím marad. */
.hero-racs { display: grid; gap: var(--t8); grid-template-columns: 1fr; align-items: start; }

/* A rácselemek alapértelmezett min-width-e "auto", vagyis nem zsugorodnak a
   tartalmuk legszélesebb eleménél kisebbre. A terminál sorai nem törnek
   (white-space: pre), ezért mobilon szétfeszítenék az egész lapot.
   Ez a sor engedi meg nekik, hogy összemenjenek — a sorok ellipszissel
   vágódnak, ahogy egy valódi terminálban is. */
.hero-racs > * { min-width: 0; }
@media (min-width: 1020px) { .hero-racs { grid-template-columns: 1.02fr .98fr; gap: var(--t7); } }

/* Szavankénti megjelenés a címeknél. */
.szo { display: inline-block; opacity: 0; transform: translateY(.5em); }
.szo.be { animation: szoBe 620ms var(--gorbe) forwards; }
@keyframes szoBe { to { opacity: 1; transform: none; } }

/* A számok most közvetlenül a főcím alatt állnak, nem a blokk végén —
   ezért kisebb a fölöttük lévő térköz, és alul is elválnak a szövegtől. */
.tenyek {
  display: flex; flex-wrap: wrap; gap: var(--t7);
  list-style: none; margin: var(--t5) 0 var(--t5); padding: var(--t5) 0;
  border-top: 1px solid var(--keret);
  border-bottom: 1px solid var(--keret);
}
.tenyek li { display: flex; flex-direction: column; gap: 2px; }
.tenyek strong {
  font-family: "JetBrains Mono", monospace; font-size: 1.8rem; font-weight: 500;
  color: var(--szoveg); font-variant-numeric: tabular-nums;
}
.tenyek span { font-size: .86rem; color: var(--nagyon-halk); }

/* ---- A dőlő kártyaköteg ---- */

.hero-kartya {
  position: relative;
  perspective: 1400px; perspective-origin: 50% 40%;
  /* A hátsó lapok 26 px-szel jobbra és lefelé csúsznak. Ez a hely nekik
     szól — enélkül kilógnának, és az egész lapon vízszintes görgetés lenne. */
  padding-right: 30px;
}

@media (max-width: 700px) {
  /* Kis képernyőn a kötegre nincs hely, és nem is mond semmit. */
  .hero-kartya { padding-right: 0; }
  .lap-hatso, .lap-hatso2 { display: none; }
}

.lap {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--felulet-2), var(--felulet));
  border: 1px solid var(--keret-eros);
  border-radius: var(--iv);
  box-shadow: var(--arnyek-3);
  padding: var(--t5);
  transform-style: preserve-3d;
  transition: transform 420ms var(--gorbe);
  will-change: transform;
}

/* A csillanás: a kurzor irányából érkező fénypászma az üvegen. */
.csillanas {
  position: absolute; inset: -40%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%);
  transform: translateX(calc(var(--gx, 0) * 1%));
  transition: opacity var(--ido) var(--gorbe);
  opacity: 0;
}
.hero-kartya:hover .csillanas { opacity: 1; }

.lap-hatso, .lap-hatso2 {
  position: absolute; inset: 0; z-index: -1; padding: 0; overflow: hidden;
  background: var(--felulet); border: 1px solid var(--keret); box-shadow: var(--arnyek-2);
}
.lap-hatso  { transform: translate3d(14px, 16px, -40px) rotate(1.1deg); opacity: .7; }
.lap-hatso2 { transform: translate3d(26px, 32px, -80px) rotate(2.2deg); opacity: .4; }

.lap-jegyzet { margin: var(--t5) 0 0; font-size: .84rem; color: var(--nagyon-halk); }

.lap-fejlec {
  display: flex; align-items: center; gap: var(--t2);
  padding-bottom: var(--t4); margin-bottom: var(--t4);
  border-bottom: 1px solid var(--keret);
}
.pont { width: 9px; height: 9px; border-radius: 50%; background: var(--keret-eros); }
.pont:first-child { background: #3F5474; }
.lap-cim { margin-left: var(--t2); font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--halvany); }

.ujra-gomb {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 var(--t3);
  background: transparent; color: var(--nagyon-halk);
  border: 1px solid var(--keret); border-radius: 7px;
  font: 500 .74rem/1 "JetBrains Mono", monospace; cursor: pointer;
  transition: all var(--gyors) var(--gorbe);
}
.ujra-gomb:hover { color: var(--kiemel); border-color: var(--kiemel); }

/* ---- A terminál ---- */

.terminal {
  font-family: "JetBrains Mono", monospace;
  font-size: .74rem; line-height: 1.75;
  min-height: 190px;
  color: var(--halvany);
  overflow: hidden;
}
.terminal .sor { display: block; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
/* Volt #55708F — az csak 3.89:1 kontrasztot adott a kártya hátterén.
   Az időbélyeg halvány, de olvasható kell hogy maradjon. */
.terminal .idobelyeg { color: #7C96B4; }
.terminal .info { color: #7FD1F5; }
.terminal .warn { color: var(--figyelem); }
.terminal .kesz { color: var(--ok); }
.terminal .parancs { color: var(--szoveg); }
.terminal .kurzor {
  display: inline-block; width: 7px; height: 1em;
  background: var(--kiemel); vertical-align: -2px;
  animation: villog 1.05s steps(2) infinite;
}
@keyframes villog { 50% { opacity: 0; } }

/* ---- A rangsor táblázat ---- */

.mini { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: var(--t4); }
.mini th {
  text-align: left; font-weight: 500; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nagyon-halk); padding-bottom: var(--t2);
}
.mini td { padding: var(--t2) 0; border-top: 1px solid var(--keret); }
.mini .szam { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; padding-right: var(--t4); }
.mini tbody tr { opacity: 0; transform: translateY(6px); }
.mini tbody tr.be { animation: sorBe 380ms var(--gorbe) forwards; }
@keyframes sorBe { to { opacity: 1; transform: none; } }
.mini tr.kiemelt td { background: rgba(248,113,113,.08); }
.mini tr.injekcios td { background: rgba(251,191,36,.07); }

/* A CV-be rejtett utasítás jelzése. A rendszer nem engedelmeskedett neki —
   a jelvény azt mutatja, hogy megtalálta és beidézte. */
.injekcio-jel {
  display: inline-block; margin-left: var(--t2);
  font-family: "JetBrains Mono", monospace; font-size: .56rem;
  letter-spacing: .06em; padding: 2px 5px; border-radius: 4px;
  color: var(--figyelem); border: 1px solid currentColor;
  vertical-align: 1px;
}

.dontes {
  display: inline-block; font-family: "JetBrains Mono", monospace;
  font-size: .64rem; letter-spacing: .08em; padding: 3px var(--t2);
  border-radius: 5px; border: 1px solid currentColor;
}
.dontes.ok { color: var(--ok); }
.dontes.tiltott { color: var(--veszely); }
.dontes.nem { color: var(--nagyon-halk); }

.indok {
  margin-top: var(--t5); padding: var(--t4);
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.24);
  border-radius: var(--iv-kicsi);
  animation: sorBe 420ms var(--gorbe) both;
}
.indok-cim {
  font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--veszely);
  margin-bottom: var(--t2);
}
.indok p:last-child { margin: 0; font-size: .92rem; color: var(--halvany); }

/* --------------------------------------------------------------- Szakaszok */

.szakasz { padding: var(--t9) 0; border-top: 1px solid var(--keret); }
.szakasz.zaro { border-top: 1px solid var(--keret-eros); background: linear-gradient(180deg, transparent, rgba(56,189,248,.06)); }

.racs { display: grid; gap: var(--t5); margin-top: var(--t6); }
.racs.harom, .racs.ketto { grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .racs.harom { grid-template-columns: repeat(3, 1fr); }
  .racs.ketto { grid-template-columns: repeat(2, 1fr); }
}

/* Az összekötő vonal a három lépés között. */
.lepcsok { position: relative; }
.osszekoto { display: none; }
@media (min-width: 880px) {
  .osszekoto {
    display: block; position: absolute; top: 54px; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--keret-eros), transparent);
  }
}

.kartya {
  position: relative;
  background: var(--felulet);
  border: 1px solid var(--keret);
  border-radius: var(--iv);
  padding: var(--t6) var(--t5) var(--t5);
  box-shadow: var(--arnyek-1);
  transition: border-color var(--ido) var(--gorbe),
              transform var(--ido) var(--gorbe),
              box-shadow var(--ido) var(--gorbe);
}
.kartya:hover { border-color: var(--keret-eros); transform: translateY(-5px); box-shadow: var(--arnyek-2); }
.kartya h3 { margin-bottom: var(--t3); }
.kartya p { margin: 0; color: var(--halvany); font-size: .98rem; }

.kartya-szam {
  position: absolute; top: var(--t4); right: var(--t5);
  font-family: "JetBrains Mono", monospace; font-size: .8rem;
  color: var(--keret-eros);
  transition: color var(--ido) var(--gorbe);
}
.kartya:hover .kartya-szam { color: var(--kiemel); }

.ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--t4);
  border-radius: var(--iv-kicsi);
  background: var(--felulet-2); border: 1px solid var(--keret); color: var(--kiemel);
  transition: transform var(--ido) var(--rugo), border-color var(--ido) var(--gorbe);
}
.kartya:hover .ikon { transform: translateY(-2px) scale(1.06); border-color: var(--kiemel); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; gap: var(--t3); align-items: flex-start;
  padding: var(--t3) 0; border-bottom: 1px solid var(--keret);
  color: var(--halvany); font-size: .98rem;
  transition: color var(--gyors) var(--gorbe);
}
.lista li:last-child { border-bottom: 0; }
.lista li:hover { color: var(--szoveg); }
.pipa {
  flex: 0 0 auto; margin-top: 7px; width: 7px; height: 7px; border-radius: 2px;
  background: var(--kiemel); box-shadow: 0 0 12px -1px var(--kiemel);
}

/* --------------------------------------------------- A súlycsúszka doboz */

.suly-doboz {
  margin-top: var(--t6);
  background: linear-gradient(165deg, var(--felulet-2), var(--felulet));
  border: 1px solid var(--keret-eros);
  border-radius: var(--iv);
  padding: clamp(var(--t5), 3.5vw, var(--t6));
  box-shadow: var(--arnyek-2);
}
.suly-fej { display: grid; gap: var(--t5); align-items: start; }
@media (min-width: 860px) { .suly-fej { grid-template-columns: 1.2fr .8fr; gap: var(--t7); } }
.suly-fej h3 { margin-bottom: var(--t2); }
.suly-fej p { margin: 0; font-size: .96rem; }

.suly-vezerlo { display: grid; gap: var(--t2); }
.suly-cimke {
  font-family: "JetBrains Mono", monospace; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nagyon-halk);
}
.suly-ertek {
  font-family: "JetBrains Mono", monospace; font-size: 1.6rem;
  color: var(--kiemel); font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--kiemel) var(--kitolt, 12%), var(--keret) var(--kitolt, 12%));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--keret); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--kiemel); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--szoveg); border: 3px solid var(--kiemel);
  box-shadow: 0 0 0 0 rgba(56,189,248,.35);
  transition: box-shadow var(--gyors) var(--gorbe), transform var(--gyors) var(--gorbe);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--szoveg); border: 3px solid var(--kiemel);
}
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(56,189,248,.16); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

.suly-lista { list-style: none; margin: var(--t6) 0 var(--t4); padding: 0; display: grid; gap: var(--t2); }
.suly-lista li {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--t3);
  padding: var(--t3) var(--t4);
  background: var(--hatter-2); border: 1px solid var(--keret); border-radius: var(--iv-kicsi);
  font-size: .95rem;
  transition: transform 420ms var(--gorbe), border-color var(--ido) var(--gorbe), background var(--ido) var(--gorbe);
}
.suly-lista li .hely { font-family: "JetBrains Mono", monospace; color: var(--nagyon-halk); font-size: .82rem; }
.suly-lista li .pont-szam { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; color: var(--szoveg); }
.suly-lista li.mozgott { border-color: var(--kiemel); background: rgba(56,189,248,.07); }
.suly-lista li.blokkolt { border-color: rgba(248,113,113,.35); }
.suly-lista li.blokkolt .pont-szam { color: var(--veszely); }

/* -------------------------------------------------------------------- Videó */

.video-keret {
  margin-top: var(--t6); aspect-ratio: 16 / 9;
  background: var(--felulet); border: 1px solid var(--keret-eros);
  border-radius: var(--iv); box-shadow: var(--arnyek-3); overflow: hidden;
  transition: border-color var(--ido) var(--gorbe), box-shadow var(--ido) var(--gorbe);
}
.video-keret:hover { border-color: var(--kiemel); }
.video-keret iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-helyorzo {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--t2); text-align: center; color: var(--nagyon-halk);
}
.video-helyorzo p { margin: 0; }
.video-helyorzo code { font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--halvany); }

/* ----------------------------------------------------------------- Kérdőív */

.urlap-doboz {
  position: relative;
  margin-top: var(--t6);
  background: linear-gradient(165deg, var(--felulet-2), var(--felulet));
  border: 1px solid var(--keret-eros);
  border-radius: var(--iv);
  padding: clamp(var(--t5), 4vw, var(--t7));
  box-shadow: var(--arnyek-3);
}

/* Lassan körbeforgó világító keret. Egyetlen elemen van az egész lapon —
   ez jelöli ki, hol kell cselekedni. */
.vilagito::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--szog, 0deg),
    transparent 0deg, rgba(56,189,248,.85) 40deg, transparent 110deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: keretForog 7s linear infinite;
}
@property --szog { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes keretForog { to { --szog: 360deg; } }

.lepesek { display: flex; gap: var(--t2); list-style: none; margin: 0 0 var(--t6); padding: 0; }
.lepesek li {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-size: .78rem; color: var(--nagyon-halk);
  border: 1px solid var(--keret); transition: all var(--ido) var(--rugo);
}
.lepesek li.aktiv { color: var(--kiemelen); background: var(--kiemel); border-color: var(--kiemel); transform: scale(1.08); }
.lepesek li.kesz { color: var(--kiemel); border-color: var(--kiemel); }

.lepes { border: 0; margin: 0; padding: 0; animation: lapBe 340ms var(--gorbe) both; }
@keyframes lapBe { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.lepes legend { font-size: 1.2rem; font-weight: 600; margin-bottom: var(--t5); padding: 0; }

.valasz {
  display: flex; align-items: flex-start; gap: var(--t3);
  padding: var(--t4); margin-bottom: var(--t3); min-height: 46px;
  background: var(--hatter-2); border: 1px solid var(--keret); border-radius: var(--iv-kicsi);
  cursor: pointer;
  transition: border-color var(--gyors) var(--gorbe),
              background var(--gyors) var(--gorbe),
              transform var(--gyors) var(--gorbe);
}
.valasz:hover { border-color: var(--keret-eros); transform: translateX(3px); }
.valasz:has(input:checked) { border-color: var(--kiemel); background: rgba(56,189,248,.09); }
.valasz:has(input:focus-visible) { outline: 3px solid var(--kiemel); outline-offset: 2px; }
.valasz.hianyzik { border-color: var(--figyelem); animation: rezzen 420ms var(--gorbe); }
@keyframes rezzen { 25% { transform: translateX(-4px);} 75% { transform: translateX(4px);} }

.valasz input { margin-top: 4px; accent-color: var(--kiemel); width: 18px; height: 18px; flex: 0 0 auto; }
.urlap-doboz .valasz input { display: inline-block; max-width: none; }
.valasz span { display: flex; flex-direction: column; gap: 2px; }
.valasz strong { font-weight: 600; font-size: .99rem; }
.valasz em { font-style: normal; font-size: .88rem; color: var(--nagyon-halk); }

.urlap-labl { display: flex; gap: var(--t3); justify-content: flex-end; margin-top: var(--t5); }

.eredmeny { animation: lapBe 380ms var(--gorbe) both; }
.eredmeny h3 { font-size: 1.6rem; margin-bottom: var(--t3); }
.er-adatok { display: grid; gap: var(--t4); margin: var(--t5) 0 0; padding: var(--t5) 0 0; border-top: 1px solid var(--keret); }
@media (min-width: 700px) { .er-adatok { grid-template-columns: repeat(3, 1fr); } }
.er-adatok dt {
  font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nagyon-halk); margin-bottom: var(--t1);
}
.er-adatok dd { margin: 0; font-size: .98rem; }

/* -------------------------------------------------------------------- GYIK */

.gyik { margin-top: var(--t6); }
.gyik details {
  border: 1px solid var(--keret); border-radius: var(--iv-kicsi);
  background: var(--felulet); margin-bottom: var(--t3);
  transition: border-color var(--ido) var(--gorbe), transform var(--ido) var(--gorbe);
}
.gyik details:hover { border-color: var(--keret-eros); transform: translateX(3px); }
.gyik details[open] { border-color: var(--keret-eros); background: var(--felulet-2); }
.gyik summary {
  cursor: pointer; padding: var(--t4) var(--t5); font-weight: 600; font-size: 1rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--t4); min-height: 46px;
}
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 1.5px solid var(--kiemel); border-bottom: 1.5px solid var(--kiemel);
  transform: rotate(45deg) translateY(-2px); transition: transform var(--ido) var(--rugo);
}
.gyik details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.gyik details p { margin: 0; padding: 0 var(--t5) var(--t5); color: var(--halvany); font-size: .98rem; max-width: 68ch; }
.gyik code { font-family: "JetBrains Mono", monospace; font-size: .88em; color: var(--szoveg); }

/* ---------------------------------------------------------------- Kapcsolat */

.elerhetoseg {
  margin-top: var(--t6); font-family: "JetBrains Mono", monospace;
  font-size: .92rem; color: var(--halvany);
  display: flex; flex-wrap: wrap; gap: var(--t2); align-items: center;
}
.elerhetoseg a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--t2); }
.valaszto { color: var(--keret-eros); }

.lablec { border-top: 1px solid var(--keret); padding: var(--t6) 0; color: var(--nagyon-halk); font-size: .9rem; }
.lablec p { margin: 0 0 var(--t1); }

/* A lábléc e-mail és telefon linkje: ezekre tényleg rá fognak koppintani,
   tehát ujjal is el kell tudni találni őket. */
.lablec a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; }

/* ===================== A HÁROM NYELVŰ VÁLTOZAT KIEGÉSZÍTÉSEI ===================== */

/* Nyelvválasztó a fejlécben. Valódi linkek külön URL-ekre — nem JavaScript,
   mert a keresők csak így látják mindhárom nyelvet. */
.nyelvek { display: flex; gap: 2px; margin-left: auto; margin-right: var(--t4); }
.nyelvek a {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 var(--t3);
  font-family: "JetBrains Mono", monospace; font-size: .76rem;
  color: var(--nagyon-halk); text-decoration: none; border-radius: 7px;
  transition: color var(--gyors) var(--gorbe), background var(--gyors) var(--gorbe);
}
.nyelvek a:hover { color: var(--szoveg); background: var(--felulet); }
.nyelvek a.aktiv { color: var(--kiemel); background: rgba(56,189,248,.1); }

@media (max-width: 720px) { .nyelvek a { padding: 0 var(--t2); } }

.hero-alcim {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 600; line-height: 1.25; letter-spacing: -.02em;
  color: var(--kiemel);
  margin: var(--t3) 0 var(--t4);
  max-width: 24ch;
}

.alcim-h3 {
  margin: var(--t7) 0 0;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  font-family: "JetBrains Mono", monospace; font-weight: 500;
  color: var(--nagyon-halk);
}

/* A tényszámok mértékegysége kisebb, hogy a szám vigye a hangsúlyt. */
.tenyek strong span { font-size: .62em; color: var(--halvany); margin-left: 1px; }

.lista-ketto { columns: 1; }
@media (min-width: 820px) { .lista-ketto { columns: 2; column-gap: var(--t7); } }
.lista-ketto li { break-inside: avoid; }

/* -- Idő-kalkulátor -- */

.ido-racs { display: grid; gap: var(--t4); margin: var(--t6) 0 var(--t5); }
@media (min-width: 720px) { .ido-racs { grid-template-columns: repeat(3, 1fr); } }

.ido-doboz {
  padding: var(--t4) var(--t5);
  background: var(--hatter-2); border: 1px solid var(--keret); border-radius: var(--iv-kicsi);
}
.ido-doboz .ido-cimke {
  display: block; margin-bottom: var(--t1);
  font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nagyon-halk);
}
.ido-doboz strong {
  font-family: "JetBrains Mono", monospace; font-size: 1.5rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.kiemelt-doboz { border-color: var(--kiemel); background: rgba(56,189,248,.08); }
.kiemelt-doboz strong { color: var(--kiemel); }

/* -- Kapcsolatfelvétel az ajánló végén -- */

.kapcsolat-urlap {
  margin-top: var(--t6); padding-top: var(--t6);
  border-top: 1px solid var(--keret);
}
.kapcsolat-urlap h4, .koszonjuk h4 { margin: 0 0 var(--t2); font-size: 1.15rem; }
.kapcsolat-urlap > .alszoveg { margin-bottom: var(--t5); }

.mezo-racs { display: grid; gap: var(--t4); }
@media (min-width: 620px) { .mezo-racs { grid-template-columns: 1fr 1fr; } }

.kapcsolat-urlap label:not(.jelolo) {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .88rem; color: var(--halvany);
}
.kapcsolat-urlap label.teljes { margin-top: var(--t4); }

.kapcsolat-urlap input[type="text"],
.kapcsolat-urlap input[type="email"],
.kapcsolat-urlap input[type="tel"],
.kapcsolat-urlap textarea {
  width: 100%; min-height: 46px; padding: var(--t3) var(--t4);
  font: 400 1rem/1.5 Inter, sans-serif; color: var(--szoveg);
  background: var(--hatter-2); border: 1px solid var(--keret);
  border-radius: var(--iv-kicsi);
  transition: border-color var(--gyors) var(--gorbe), background var(--gyors) var(--gorbe);
}
.kapcsolat-urlap textarea { resize: vertical; min-height: 84px; }
.kapcsolat-urlap input:hover, .kapcsolat-urlap textarea:hover { border-color: var(--keret-eros); }
.kapcsolat-urlap input:focus, .kapcsolat-urlap textarea:focus {
  border-color: var(--kiemel); background: var(--felulet); outline: none;
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
}

.jelolo {
  display: flex; align-items: flex-start; gap: var(--t3);
  margin: var(--t5) 0; font-size: .9rem; line-height: 1.5; color: var(--halvany);
  cursor: pointer;
}
.jelolo input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--kiemel); }

.hiba {
  color: #FCA5A5; font-size: .92rem; font-weight: 500;
  padding: var(--t3) var(--t4); margin: 0 0 var(--t4);
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--iv-kicsi);
}

.koszonjuk {
  padding: var(--t5); margin-top: var(--t6);
  background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.3);
  border-radius: var(--iv-kicsi);
}
.koszonjuk h4 { color: var(--ok); }
.koszonjuk p { margin: 0; color: var(--halvany); }

#ujra { margin-top: var(--t5); }

/* ------------------------------------------------------------------- Mozgás */

.js [data-fel] {
  opacity: 0; transform: translateY(22px) scale(.985);
  transition: opacity var(--lassu) var(--gorbe), transform var(--lassu) var(--gorbe);
}
.js [data-fel].latszik { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-fel] { opacity: 1; transform: none; }
  .szo { opacity: 1; transform: none; }
  #hatter, .fenyfolt { display: none; }
  .lap { transform: none !important; }
  .mini tbody tr { opacity: 1; transform: none; }
  .vilagito::after { display: none; }
}

/* ===========================================================================
   "Ki áll mögötte" — a bizalmi blokk
   Ez volt az oldal legnagyobb hiánya: egy névtelen szolgáltató, aki
   önéletrajzokat kezelne, a bizalmi küszöbön bukik el.
   =========================================================================== */

.rolam { display: grid; gap: var(--t5); align-items: start; margin-bottom: var(--t6); }
@media (min-width: 720px) { .rolam { grid-template-columns: 132px 1fr; gap: var(--t6); } }

.portre {
  width: 132px; height: 132px; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--keret-eros);
  box-shadow: var(--arnyek-2);
}

.rolam-szoveg p { color: var(--halvany); }
.rolam-szoveg p:last-child { margin-bottom: 0; }

.bizonyitek-cim { font-size: 1rem; margin: 0 0 var(--t4); }

.bizonyitek { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--t3); }
@media (min-width: 780px) { .bizonyitek { grid-template-columns: repeat(3, 1fr); } }

.bizonyitek a {
  display: flex; flex-direction: column; gap: 4px;
  height: 100%; padding: var(--t4);
  background: var(--felulet); border: 1px solid var(--keret);
  border-radius: var(--iv-kicsi); text-decoration: none;
  transition: border-color var(--ido) var(--gorbe), transform var(--ido) var(--gorbe);
}
.bizonyitek a:hover { border-color: var(--kiemel); transform: translateY(-3px); }
.bizonyitek strong { color: var(--szoveg); font-size: .96rem; }
.bizonyitek span { color: var(--nagyon-halk); font-size: .88rem; }

/* ===========================================================================
   Az AI Act-oldal
   =========================================================================== */

.hero-cikk { padding-bottom: var(--t7); }
.hero-cikk .vezeto { max-width: 60ch; }

/* A kilenc kérdés. Számozott, mert a látogató végig fogja kérdezni őket. */
.kerdeslista {
  counter-reset: k; list-style: none; margin: var(--t5) 0 0; padding: 0;
  max-width: 68ch;
}
.kerdeslista li {
  counter-increment: k; position: relative;
  padding: var(--t3) 0 var(--t3) var(--t7);
  border-bottom: 1px solid var(--keret);
  color: var(--halvany);
}
.kerdeslista li:last-child { border-bottom: 0; }
.kerdeslista li::before {
  content: counter(k, decimal-leading-zero);
  position: absolute; left: 0; top: var(--t3);
  font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--kiemel);
}

/* A megfelelési táblázat: mit kér a rendelet, mit csinál a rendszer. */
.megfeleles { width: 100%; border-collapse: collapse; margin-top: var(--t5); }
.megfeleles td { padding: var(--t4) var(--t4) var(--t4) 0; border-top: 1px solid var(--keret); vertical-align: top; color: var(--halvany); font-size: .96rem; }
.megfeleles td:first-child { width: 210px; color: var(--szoveg); }
@media (max-width: 640px) {
  .megfeleles td { display: block; padding: var(--t2) 0; border-top: 0; }
  .megfeleles td:first-child { width: auto; padding-top: var(--t4); border-top: 1px solid var(--keret); }
}

/* A jogi kitétel. Nem apróbetűs: látszódnia kell, mert bizalmat épít. */
.jogi-doboz {
  background: var(--felulet); border: 1px solid var(--keret-eros);
  border-left: 3px solid var(--figyelem);
  border-radius: var(--iv-kicsi); padding: var(--t5);
}
.jogi-doboz h2 { font-size: 1.05rem; margin-bottom: var(--t3); }
.jogi-doboz p { margin: 0; color: var(--halvany); font-size: .96rem; }