:root{--c1:#51f5d1;--c2:#85cc8d;--bg:#070a0f;--card:#0d1117;--line:#162033;--muted:#9aa6b2}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;color:#fff;background:var(--bg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}

.nav{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(13,17,23,.7);backdrop-filter:saturate(1.1) blur(6px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
img.logo{width:28px;height:28px}
.menu a{margin:0 10px;opacity:.9;transition:opacity .15s}
.menu a:hover{opacity:1}
.auth{display:flex;gap:10px}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid #1f2937;background:#0f131b;color:#fff;font-weight:600}
.btn.grad{background:linear-gradient(90deg,var(--c1),var(--c2));color:#00130f;border:none}
.btn.ghost{background:transparent;border:1px solid var(--line)}

.hero{min-height:70vh;display:grid;place-items:center;position:relative;overflow:hidden}
.hero.has-bg{background:
  linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)),
  url('/theme/img/hero-bg.jpg') center/cover no-repeat;
}
.hero.has-bg .overlay{display:none}
.hero.only-text{background:linear-gradient(160deg, rgba(81,245,209,.08), rgba(133,204,141,.08))}
.hero .inner{text-align:center;padding:64px 20px;max-width:900px}
.hero h1{font-size:44px;margin:0 0 12px}
.hero p{font-size:18px;opacity:.95;margin:0 auto 18px;max-width:780px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.foot{padding:18px;text-align:center;color:var(--muted);border-top:1px solid var(--line);background:#0b0f16}

/* kártyák/számlálók */
.stat{border:1px solid var(--line);border-radius:12px;padding:12px;background:#0b0f16}
.label{color:var(--muted);font-size:12px}
.value{font-size:18px}
/* --- gomb-szikrák (globális) --- */
.lp-spark{
  position:absolute;border-radius:50%;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.6);
  filter:blur(0.2px);
  animation: lpSpark .8s ease-out forwards;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 35%, rgba(81,245,209,.0) 70%);
}
@keyframes lpSpark {
  0%{opacity:.85;transform:translate(-50%,-50%) scale(.3)}
  60%{opacity:.6}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}
}
/* finom hover */
.btn:hover{ transform:translateY(-1px); transition:.18s ease }
.card{ transition:transform .25s ease, box-shadow .25s ease }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.25) }