:root{
  --bg: #0f172a;           /* slate-900 */
  --surface: #111827;      /* gray-900 */
  --text: #e5e7eb;         /* gray-200 */
  --muted: #9ca3af;        /* gray-400 */
  --accent: #22d3ee;       /* cyan-400 */
  --accent-2: #a78bfa;     /* violet-400 */
  --accent-3: #f472b6;     /* pink-400 */
  --card: #0b1220;         /* deep */
  --border: rgba(255,255,255,0.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% -10%, rgba(34,211,238,0.15), transparent 60%),
              radial-gradient(1200px 800px at 90% 10%, rgba(167,139,250,0.12), transparent 60%),
              linear-gradient(180deg, #0b1020, #0f172a 40%);
  color: var(--text);
  min-height: 100vh;
  display:flex;flex-direction:column;
}


a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}

.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: saturate(120%) blur(8px);
  background: rgba(15, 23, 42, 0.65);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.3px}
.brand-badge{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#00111a; font-weight:900}
.navlinks{display:flex;gap:16px;align-items:center}
.navlinks a{padding:8px 12px;border-radius:10px;color:var(--text);opacity:.9;border:1px solid transparent}
.navlinks a:hover{background: rgba(255,255,255,0.06);border-color:var(--border)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(167,139,250,0.12));
  color:var(--text);cursor: pointer;
}
.btn:hover{transform:translateY(-1px);transition:transform .12s ease}

.hero{padding:72px 20px 32px}
.hero-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;
}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
}

.title{
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin:0 0 12px;
}
.subtitle{color:var(--muted);font-size: clamp(16px, 2.5vw, 18px);margin:0 0 22px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.badges{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.badge{
  font-size:12px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);
  background: rgba(255,255,255,0.03);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--border); border-radius:18px; padding:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.phone-frame{
  border-radius:28px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #0c1224, #0d1427);
  height: 440px;
  display:grid;place-items:center;
  position:relative;overflow:hidden;
}
.blob{
  position:absolute;inset:auto;width:500px;height:500px;filter:blur(60px);opacity:.35;
  background: conic-gradient(from 120deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  animation: spin 24s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.section{padding:28px 20px}
.section h2{margin:0 0 8px;font-size:28px}
.grid-3{display:grid;grid-template-columns: repeat(3, 1fr); gap:16px}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr} }

.feature{display:flex;gap:12px}
.feature-emoji{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background: rgba(255,255,255,0.08); font-size:22px
}

.kbd{border:1px solid var(--border);border-bottom-width:2px;border-radius:8px;padding:2px 6px;background:rgba(255,255,255,0.06)}

.footer{margin-top:auto;border-top:1px solid var(--border);padding:20px 0;color:var(--muted);font-size:14px}
.footer a{color:var(--muted)}

/* ===== Header fölé helyezés ===== */
.header{ z-index: 6000; } /* a Leaflet kontrollok fölé kerül */

/* ===== Hamburger ===== */
.hamburger{
  display:none; width:44px; height:44px; border:1px solid var(--border);
  border-radius:12px; background:rgba(255,255,255,0.04);
  align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.hamburger span{ display:block; width:18px; height:2px; background:var(--text); opacity:.9; }

@media (max-width:900px){
  .navlinks{ display:none; }
  .hamburger{ display:flex; }
}

/* ===== Mobil menü (overlay + animáció) ===== */
.mobile-menu{
  position:fixed; top:64px; left:0; right:0; max-height:calc(100vh - 64px);
  padding:12px 20px 16px; background:rgba(15,23,42,0.98); border-bottom:1px solid var(--border);
  overflow:auto; z-index: 5500;

  /* animációs állapotok */
  opacity:0; transform: translateY(-8px);
  transition: transform .22s ease, opacity .2s ease;
  pointer-events:none;  /* ne legyen kattintható zárt állapotban */
}
.mobile-menu a{
  display:block; padding:12px; margin-bottom:8px; border:1px solid var(--border);
  border-radius:12px; background:rgba(255,255,255,0.03); color:var(--text);
}
body.menu-open .mobile-menu{
  opacity:1; transform: translateY(0); pointer-events:auto;
}

/* Háttér-scrim a tartalom fölött, menü alatt */
.menu-scrim{
  position:fixed; left:0; right:0; top:64px; bottom:0;
  background: rgba(0,0,0,0.35);
  opacity:0; transition: opacity .2s ease;
  pointer-events:none; z-index: 5000;
}
body.menu-open .menu-scrim{ opacity:1; pointer-events:auto; }

/* ===== Loader (spinner) – ha még nincs bent ===== */
.spinner{
  display:none; align-items:center; gap:8px; color:var(--muted); font-size:14px;
}
.spinner::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.9);
  animation: spin 1s linear infinite;
}
.spinner.show{ display:inline-flex; }
@keyframes spin{ to{ transform: rotate(360deg);} }