/* Modern, minimalista, világos stílus – reszponzív kivitel */
:root{
  --bg:#ffffff;
  --fg:#0f172a; /* slate-900 */
  --muted:#475569; /* slate-600 */
  --brand:#0ea5e9; /* sky-500 */
  --brand-dark:#0284c7;
  --accent:#22c55e; /* green-500 */
  --surface:#f8fafc; /* slate-50 */
  --border:#e2e8f0; /* slate-200 */
  --shadow: 0 10px 30px rgba(2,8,23,0.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--fg);
  background:var(--bg);
  line-height:1.7;
}
img{max-width:100%;display:block;height:auto}
.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding:56px 0}
.section.sm{padding:32px 0}
.grid{display:grid; gap:24px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brand); color:white; border:none; border-radius:999px; padding:12px 18px;
  font-weight:600; text-decoration:none; box-shadow:var(--shadow);
}
.btn:hover{background:var(--brand-dark)}
.btn.outline{background:transparent; color:var(--fg); border:1px solid var(--border); box-shadow:none}

/* Header, burger menü */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border)}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800}
.brand svg{width:28px; height:28px}
.nav{display:flex; gap:20px; align-items:center}
.nav a{color:var(--fg); text-decoration:none; font-weight:600}
.burger{display:none; width:42px; height:42px; border:1px solid var(--border); border-radius:10px; background:#fff; align-items:center; justify-content:center}
.burger span{width:20px; height:2px; background:var(--fg); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:100%; height:2px; background:var(--fg)}
.burger span::before{top:-6px}
.burger span::after{top:6px}

@media (max-width: 900px){
  .nav{display:none}
  .burger{display:inline-flex}
  .mobile-nav{display:grid; gap:10px; padding:12px; border-top:1px solid var(--border)}
  .mobile-nav a{padding:10px 6px; border-radius:8px; text-decoration:none; color:var(--fg)}
  .mobile-nav a:hover{background:var(--surface)}
}

/* Hero */
.hero{display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; align-items:center}
.hero .kicker{color:var(--brand); font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.hero h1{font-size:clamp(28px, 4vw, 44px); line-height:1.1; margin:10px 0 12px}
.hero p{color:var(--muted)}
.hero .media{border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
}

/* Cards */
.cards{grid-template-columns: repeat(3, 1fr)}
.card{border:1px solid var(--border); border-radius:16px; padding:18px; background:#fff; box-shadow:var(--shadow)}
.card h3{margin-top:4px}
@media (max-width: 900px){
  .cards{grid-template-columns: 1fr}
}

/* Footer */
footer{border-top:1px solid var(--border); background:#fff}
.footer-grid{display:grid; grid-template-columns: 1fr 1fr; gap:24px}
footer .meta{color:var(--muted); font-size:14px}
@media (max-width: 700px){
  .footer-grid{grid-template-columns: 1fr}
}

/* Forms */
input, textarea, select{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; font:inherit}
label{font-weight:600}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width: 700px){.form-row{grid-template-columns:1fr}}

/* Cookie banner */
.cookie-banner{position:fixed; inset:auto 16px 16px 16px; background:#0f172a; color:#fff; padding:16px; border-radius:12px; display:none; gap:10px; box-shadow:var(--shadow)}
.cookie-banner .btn{background:#22c55e}
.cookie-banner .btn:hover{background:#16a34a}

/* Utilities */
.muted{color:var(--muted)}
.center{text-align:center}
.lead{font-size:18px}
.badge{display:inline-block; background:var(--surface); border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px}
.hr{height:1px; background:var(--border); margin:24px 0}