:root{
  --bg: #050810;
  --bg-alt: #080c18;
  --panel: rgba(255,255,255,0.04);
  --panel-border: rgba(255,255,255,0.08);
  --cyan: #7fe9ff;
  --kek: #2ea3ff;
  --kek-mely: #0f66d8;
  --szoveg: #eaf2ff;
  --szoveg-halvany: #93a2bd;
  --gradiens: linear-gradient(120deg, var(--cyan) 0%, var(--kek) 55%, var(--kek-mely) 100%);
  --fenyarnyek: 0 0 40px rgba(46,163,255,.35);
  --sugar: 18px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--szoveg);
  font-family:'Rajdhani', sans-serif;
  font-weight:500;
  overflow-x:hidden;
  position:relative;
}

h1,h2,h3,.felcim,.navigacio-logo,.menu a,.gomb{
  font-family:'Orbitron', sans-serif;
}

::selection{ background: var(--kek); color:#04101f; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--kek-mely); border-radius:10px; }

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }

.szoveg-gradiens{
  background: var(--gradiens);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#hatter-vaszon{
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(46,163,255,.18), transparent 60%),
    var(--bg);
}
.zaj-reteg{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#betolto{
  position:fixed; inset:0; z-index:9999;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transition: opacity .6s ease, visibility .6s ease;
}
#betolto.rejtett{ opacity:0; visibility:hidden; }
.betolto-logo{ width:200px; filter: drop-shadow(0 0 30px rgba(46,163,255,.5)); animation: lelegzes 1.8s ease-in-out infinite; }
.betolto-sav{ width:220px; height:3px; background:rgba(255,255,255,.08); border-radius:10px; overflow:hidden; }
.betolto-sav span{ display:block; height:100%; width:0%; background:var(--gradiens); animation: toltes 1.4s ease forwards; }
@keyframes toltes{ to{ width:100%; } }
@keyframes lelegzes{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

.navigacio{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition: background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.navigacio.gorgetve{
  padding:10px 0;
  background: rgba(5,8,16,.75);
  backdrop-filter: blur(16px);
  border-bottom:1px solid var(--panel-border);
}
.navigacio-belso{
  max-width:1280px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.navigacio-logo img{ height:44px; width:auto; filter: drop-shadow(0 0 12px rgba(46,163,255,.45)); }
.menu{ display:flex; align-items:center; gap:32px; }
.menu a{
  font-size:14px; letter-spacing:1px; text-transform:uppercase; font-weight:600;
  color:var(--szoveg-halvany); position:relative; padding:6px 0; transition:color .25s ease;
}
.menu a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:var(--gradiens); transition:width .3s ease;
}
.menu a:hover{ color:var(--szoveg); }
.menu a:hover::after{ width:100%; }
.navigacio-gombok{ display:flex; gap:12px; align-items:center; }

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span{ width:24px; height:2px; background:var(--szoveg); border-radius:2px; }

.gomb{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 22px; border-radius:100px; font-size:13px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; border:1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.gomb-elsodleges{
  background:var(--gradiens); color:#04101f; box-shadow:0 4px 20px rgba(46,163,255,.4);
}
.gomb-elsodleges:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(46,163,255,.55); }
.gomb-halvany{ color:var(--szoveg); border-color:var(--panel-border); background:var(--panel); }
.gomb-halvany:hover{ border-color:var(--kek); color:#fff; }
.gomb-korvonalas{ color:var(--szoveg); border-color:rgba(127,233,255,.4); background:transparent; }
.gomb-korvonalas:hover{ background:rgba(46,163,255,.1); border-color:var(--cyan); transform:translateY(-2px); }
.gomb-nagy{ padding:16px 30px; font-size:14px; }

.bemutato{
  position:relative; z-index:2;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:140px 24px 80px; text-align:center; overflow:hidden;
}
.bemutato-feny{ position:absolute; border-radius:50%; filter:blur(100px); z-index:-1; }
.feny-1{ width:600px; height:600px; background:rgba(46,163,255,.25); top:-200px; left:-150px; animation: lebeg1 12s ease-in-out infinite; }
.feny-2{ width:500px; height:500px; background:rgba(127,233,255,.18); bottom:-200px; right:-150px; animation: lebeg2 14s ease-in-out infinite; }
@keyframes lebeg1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(60px,40px);} }
@keyframes lebeg2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-50px,-30px);} }

.bemutato-tartalom{ max-width:900px; display:flex; flex-direction:column; align-items:center; }
.bemutato-cimke{
  display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:100px;
  background:var(--panel); border:1px solid var(--panel-border); font-size:13px; letter-spacing:1px;
  color:var(--szoveg-halvany); margin-bottom:28px; text-transform:uppercase; font-weight:600;
}
.bemutato-cimke .pont{ width:8px; height:8px; border-radius:50%; background:#3cff8a; box-shadow:0 0 10px #3cff8a; animation: villog 1.6s ease-in-out infinite; }
@keyframes villog{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

.bemutato-logo{ width:min(360px, 70vw); margin-bottom:18px; filter: drop-shadow(0 0 45px rgba(46,163,255,.45)); animation: lebegteto 5s ease-in-out infinite; }
@keyframes lebegteto{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.bemutato-cim{
  font-size: clamp(32px, 6vw, 64px); line-height:1.15; font-weight:900;
  letter-spacing:1px; margin-bottom:22px; text-shadow:0 0 40px rgba(46,163,255,.25);
}
.bemutato-alcim{ font-size:18px; color:var(--szoveg-halvany); max-width:640px; line-height:1.7; margin-bottom:38px; }
.gombsor{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:50px; }

.gorgetes-jelzo{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--szoveg-halvany); font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.eger{ width:26px; height:42px; border:2px solid var(--panel-border); border-radius:14px; display:flex; justify-content:center; padding-top:6px; }
.kerek{ width:4px; height:8px; border-radius:2px; background:var(--cyan); animation: gorgetokerek 1.6s ease-in-out infinite; }
@keyframes gorgetokerek{ 0%{ transform:translateY(0); opacity:1;} 100%{ transform:translateY(12px); opacity:0;} }

.futoszalag{
  position:relative; z-index:2; overflow:hidden; padding:18px 0;
  background:linear-gradient(90deg, rgba(46,163,255,.08), rgba(127,233,255,.08));
  border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);
}
.futoszalag-sav{
  display:flex; gap:40px; white-space:nowrap; width:max-content;
  animation: gorgetX 26s linear infinite;
  font-family:'Orbitron', sans-serif; font-size:14px; letter-spacing:2px; color:var(--szoveg-halvany);
}
.futoszalag-sav span{ display:inline-flex; align-items:center; gap:40px; }
@keyframes gorgetX{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

main section{ position:relative; z-index:2; padding:120px 24px; }
.szekcio-fejlec{ max-width:640px; margin:0 auto 64px; text-align:center; }
.felcim{
  display:inline-block; font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px; font-weight:700;
}
.szekcio-fejlec h2{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; font-weight:800; }
.szekcio-fejlec p{ color:var(--szoveg-halvany); font-size:17px; line-height:1.7; }

.statisztikak{ padding:80px 24px; }
.statisztika-racs{
  max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.statisztika-kartya{
  text-align:center; padding:36px 20px; border-radius:var(--sugar);
  background:var(--panel); border:1px solid var(--panel-border);
  transition: transform .3s ease, border-color .3s ease;
}
.statisztika-kartya:hover{ transform:translateY(-6px); border-color:rgba(127,233,255,.4); }
.statisztika-szam{
  display:block; font-family:'Orbitron',sans-serif; font-size:clamp(30px,4vw,44px); font-weight:800;
  background:var(--gradiens); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.statisztika-cimke{ display:block; margin-top:8px; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--szoveg-halvany); }

.tamogatas-figyelmeztetes{
  margin-top:26px; display:inline-flex; align-items:center; gap:12px;
  padding:18px 30px; border-radius:100px; font-size:15px; font-weight:700;
  color:var(--szoveg); background:rgba(46,163,255,.12);
  border:1px solid rgba(127,233,255,.55);
  box-shadow:0 0 30px rgba(46,163,255,.3);
  animation: pulzal 2.2s ease-in-out infinite;
}
.tamogatas-figyelmeztetes-ikon{ font-size:18px; color:var(--cyan); }
@keyframes pulzal{ 0%,100%{ box-shadow:0 0 20px rgba(46,163,255,.25); } 50%{ box-shadow:0 0 40px rgba(46,163,255,.55); } }

.tamogatas-blokk{ max-width:1100px; margin:0 auto 80px; }
.tamogatas-blokk:last-child{ margin-bottom:0; }
.tamogatas-blokk-cim{
  font-size:22px; font-weight:800; margin-bottom:28px; text-align:center;
  position:relative; display:flex; align-items:center; gap:18px;
}
.tamogatas-blokk-cim::before, .tamogatas-blokk-cim::after{
  content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--panel-border), transparent);
}

.csomag-racs{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.csomag-kartya{
  position:relative; padding:32px 26px; border-radius:var(--sugar); text-align:center;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--panel-border);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.csomag-kartya:hover{ transform:translateY(-8px); border-color:rgba(127,233,255,.45); box-shadow:var(--fenyarnyek); }
.csomag-kartya.kiemelt{
  border-color:rgba(127,233,255,.6);
  background:linear-gradient(160deg, rgba(46,163,255,.16), rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(127,233,255,.25), var(--fenyarnyek);
  transform:scale(1.04);
}
.csomag-kartya.kiemelt:hover{ transform:scale(1.04) translateY(-8px); }
.csomag-jelveny{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gradiens); color:#04101f; font-size:11px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; padding:6px 16px; border-radius:100px; white-space:nowrap;
}
.csomag-ikon{ font-size:34px; }
.csomag-kartya h4{ font-family:'Orbitron',sans-serif; font-size:17px; font-weight:700; }
.csomag-ar{
  font-family:'Orbitron',sans-serif; font-size:32px; font-weight:800;
  background:var(--gradiens); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.csomag-ar span{ font-size:16px; margin-left:3px; }
.csomag-lista{ display:flex; flex-direction:column; gap:6px; margin:6px 0 4px; }
.csomag-lista li{ font-size:14px; color:var(--szoveg-halvany); }

.csomag-egyedi{
  margin-top:24px; text-align:center; padding:18px 24px; border-radius:14px;
  background:var(--panel); border:1px dashed rgba(127,233,255,.4);
  color:var(--szoveg-halvany); font-size:15px;
}
.csomag-egyedi span{ color:var(--cyan); font-weight:700; }

.auto-tablazat{
  border-radius:var(--sugar); overflow:hidden; border:1px solid var(--panel-border);
  background:var(--panel);
}
.auto-sor{
  display:grid; grid-template-columns:1fr 140px; align-items:center; gap:12px;
  padding:16px 26px; border-bottom:1px solid var(--panel-border);
  transition: background .25s ease;
}
.auto-sor:last-child{ border-bottom:none; }
.auto-sor:not(.auto-sor-fejlec):hover{ background:rgba(46,163,255,.07); }
.auto-sor-fejlec{
  font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--szoveg-halvany); background:rgba(255,255,255,.03); font-weight:700;
}
.auto-sor span:first-child{ font-weight:600; }
.auto-sor span:nth-child(2){ color:var(--cyan); font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px; text-align:right; }

.egyedi-auto{
  position:relative; overflow:hidden; text-align:center; padding:60px 40px; border-radius:28px;
  border:1px solid rgba(127,233,255,.4);
  background:
    radial-gradient(circle at 30% 20%, rgba(127,233,255,.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(46,163,255,.2), transparent 55%),
    var(--panel);
}
.egyedi-auto-feny{
  position:absolute; inset:-2px; border-radius:28px; z-index:-1; opacity:.5;
  background:var(--gradiens); filter:blur(30px);
}
.egyedi-auto-jelveny{
  display:inline-block; margin-bottom:16px; padding:7px 18px; border-radius:100px;
  background:rgba(127,233,255,.12); border:1px solid rgba(127,233,255,.4);
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan); font-weight:700;
}
.egyedi-auto h3{ font-size:26px; font-weight:800; margin-bottom:14px; }
.egyedi-auto .csomag-ar{ font-size:40px; margin-bottom:18px; }
.egyedi-auto p{ max-width:560px; margin:0 auto; color:var(--szoveg-halvany); font-size:16px; line-height:1.7; }
.egyedi-auto strong{ color:var(--szoveg); }

.szerver-panel{ padding:0 24px 120px; }
.szerver-panel-belso{
  max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;
  padding:64px; border-radius:28px; background:var(--panel); border:1px solid var(--panel-border);
  position:relative; overflow:hidden;
}
.szerver-info p{ color:var(--szoveg-halvany); font-size:16px; line-height:1.75; margin:18px 0 26px; }
.szerver-adatok{ display:flex; flex-direction:column; gap:10px; margin-bottom:30px; }
.szerver-adatok li{ font-size:15px; color:var(--szoveg-halvany); }
.szerver-adatok strong{ color:var(--szoveg); margin-right:6px; }
.allapot-online{ color:#3cff8a; font-weight:700; }

.szerver-vizual{ position:relative; display:flex; align-items:center; justify-content:center; height:340px; }
.orbit-gyuru{ position:absolute; border:1px solid rgba(127,233,255,.25); border-radius:50%; }
.gyuru-1{ width:180px; height:180px; animation: forog 14s linear infinite; }
.gyuru-2{ width:260px; height:260px; border-style:dashed; animation: forog 22s linear infinite reverse; }
.gyuru-3{ width:340px; height:340px; animation: forog 30s linear infinite; }
@keyframes forog{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.szerver-logo{ width:160px; filter: drop-shadow(0 0 40px rgba(46,163,255,.5)); position:relative; z-index:2; }

.galeria-racs{
  max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:18px;
}
.galeria-elem{ border-radius:16px; overflow:hidden; border:1px solid var(--panel-border); }
.galeria-elem.szeles{ grid-column:span 2; grid-row:span 2; }
.galeria-helyorzo{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, rgba(46,163,255,.15), rgba(5,8,16,.6));
  color:var(--szoveg-halvany); font-family:'Orbitron',sans-serif; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; transition: transform .5s ease, background .5s ease;
}
.galeria-elem:hover .galeria-helyorzo{ transform:scale(1.06); background:linear-gradient(140deg, rgba(46,163,255,.3), rgba(5,8,16,.6)); }

.felhivas{
  text-align:center; margin:0 24px 120px; padding:90px 40px; border-radius:28px;
  background:
    radial-gradient(circle at 30% 20%, rgba(127,233,255,.15), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(46,163,255,.18), transparent 55%),
    var(--panel);
  border:1px solid var(--panel-border);
}
.felhivas h2{ font-size:clamp(28px,4vw,42px); font-weight:800; margin-bottom:16px; }
.felhivas p{ color:var(--szoveg-halvany); font-size:17px; margin-bottom:34px; }

.lablec{ position:relative; z-index:2; border-top:1px solid var(--panel-border); padding:44px 24px; }
.lablec-belso{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.lablec-logo{ height:32px; opacity:.85; }
.lablec-belso p{ color:var(--szoveg-halvany); font-size:13px; }
.lablec-linkek{ display:flex; gap:24px; }
.lablec-linkek a{ color:var(--szoveg-halvany); font-size:13px; letter-spacing:.5px; transition:color .25s ease; }
.lablec-linkek a:hover{ color:var(--cyan); }

[data-animacio]{ opacity:0; transform:translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-animacio].lathato{ opacity:1; transform:translateY(0); }

@media (max-width: 980px){
  .menu, .navigacio-gombok{ display:none; }
  .hamburger{ display:flex; }
  .navigacio.nyitva .menu{
    display:flex; position:fixed; inset:0 0 0 auto; width:70%; height:100vh; top:0; right:0;
    background:rgba(5,8,16,.98); flex-direction:column; justify-content:center; align-items:flex-start; gap:26px; padding:40px;
    border-left:1px solid var(--panel-border);
  }
  .navigacio.nyitva .navigacio-gombok{ display:flex; position:fixed; bottom:40px; right:40px; flex-direction:column; z-index:101; }
  .szerver-panel-belso{ grid-template-columns:1fr; }
  .szerver-vizual{ order:-1; }
  .statisztika-racs{ grid-template-columns:repeat(2,1fr); }
  .galeria-racs{ grid-template-columns:repeat(2,1fr); }
  .galeria-elem.szeles{ grid-column:span 2; grid-row:span 1; }
  .csomag-racs{ grid-template-columns:repeat(2,1fr); }
  .csomag-kartya.kiemelt{ transform:none; }
  .csomag-kartya.kiemelt:hover{ transform:translateY(-8px); }
}
@media (max-width: 560px){
  .statisztika-racs{ grid-template-columns:1fr 1fr; }
  .csomag-racs{ grid-template-columns:1fr; }
  .gombsor{ flex-direction:column; width:100%; }
  .gombsor .gomb{ width:100%; }
  .tamogatas-figyelmeztetes{ font-size:13px; padding:14px 20px; text-align:left; }
}