:root{
  --bg:#0f1220; --panel:#171a2b; --muted:#9aa4b2; --text:#e7edf5;
  --brand:#6ee7f5; --accent:#a78bfa; --ok:#34d399; --warn:#f59e0b; --err:#ef4444;
  --border:#232745; --chip:#20253f; --radius:16px; --shadow:0 6px 24px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font:16px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  background:
    radial-gradient(1200px 600px at 20% -10%,#1a1f37 0%,#0f1220 55%),
    radial-gradient(900px 400px at 110% 10%,#1a1f37 0%,transparent 60%);
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(7px);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-badge{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 8px 32px rgba(108,231,246,.35)}
.brand h1{font-size:18px;margin:0}
.brand small{display:block;color:var(--muted);font-weight:500}
.nav{display:flex;gap:10px;align-items:center}
.nav a{
  color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px; border:1px solid transparent;
}
.nav a.active{background:#131a33;border-color:#2b3261}
.nav a:hover{background:#121733}

.main{padding:28px 0}
.footer{
  border-top:1px solid var(--border); margin-top:40px; padding:16px 0; color:var(--muted);
}

/* Components */
.hero{
  padding:42px 0 18px;
  display:grid; gap:16px;
}
.hero h2{margin:0 0 6px 0; font-size:28px}
.hero p{margin:0; color:var(--muted)}
.card{
  background:linear-gradient(180deg,#171a2b 0%,#13172a 100%);
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:18px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#0e1326; color:var(--text);
  border:1px solid var(--border); padding:12px 16px; border-radius:12px;
  text-decoration:none; font-weight:700; cursor:pointer;
}
.btn.primary{background:linear-gradient(135deg,#1c2447,#161c36);border-color:#2a3259}
.btn.ok{background:linear-gradient(135deg,#0d2f25,#0b241c);border-color:#104c3b}
.btn.light{background:#131a33}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-color:#3b4a86}
.btnrow{display:flex; gap:10px; flex-wrap:wrap}

/* Embed */
.embed-wrap{
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden; background:#0f1324;
}
.webapp-frame{
  width:100%;
  min-height: 1200px; /* állítható: ha kevés, növeld */
  border:0; display:block;
}
.info{color:var(--muted); font-size:.95rem; margin:8px 0 0}
.kicker{display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:var(--chip); color:var(--text); font-size:.85rem}

/* Grid helpers */
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
@media (max-width:900px){ .grid.two{grid-template-columns:1fr}}

/* Section spacing */
.section{margin-top:22px}
.section h3{margin:0 0 8px 0}