:root {
  --bg:#0a0e12; --surface:#0f1722; --line:#1d2632; --card:#111826;
  --text:#e6eef8; --muted:#9bb0c9; --brand:#00c26e; --brand2:#00a6ef;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(11,15,20,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:96px;gap:16px}
.brand img{height:auto!important;max-height:96px!important;width:auto!important;display:block!important}
@media (max-width:992px){.brand img{max-height:72px!important}}
@media (max-width:768px){.brand img{max-height:52px!important}}

/* Menu */
.menu{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.menu a{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border:1px solid var(--line);background:var(--surface);border-radius:12px;color:var(--text);position:relative}
.menu a::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;background:linear-gradient(90deg,var(--brand2),var(--brand));transform:scaleX(0);transform-origin:left;transition:transform .22s}
.menu a:hover{filter:saturate(115%);box-shadow:0 6px 18px rgba(0,166,239,.15)} .menu a:hover::after{transform:scaleX(1)}
.hamburger{display:none}
@media (min-width:769px){.menu{display:flex!important}}
@media (max-width:768px){
  .nav{flex-wrap:wrap;gap:10px;justify-content:space-between}
  .header .nav{min-height:60px;padding:6px 12px}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font-size:15px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px}
  .menu{display:none;width:100%;flex-direction:column;gap:10px}
  .menu.open{display:flex;margin-top:6px}
  .menu a{width:100%;justify-content:flex-start}
}

/* Hero */
.hero .wrap{padding:54px 20px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.badge{display:inline-flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);color:var(--muted);padding:6px 12px;border-radius:999px;font-size:12px}
.hero h1{font-size:44px;line-height:1.1;margin:.4em 0}
.lead{font-size:18px;color:var(--muted)}

.btn,.btn.alt{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--line)}
.btn{background:linear-gradient(90deg,var(--brand2),var(--brand));color:#0a0e12;font-weight:700}
.btn.alt{background:var(--surface);color:var(--text)}

section{padding:52px 0}
.center{text-align:center}

/* Cards & grids */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.card h3{margin:0 0 .3em}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.metric .big{font-size:28px;font-weight:800}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--surface);border:1px dashed #203046;border-radius:14px;padding:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* Form */
form.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.form .field{display:flex;flex-direction:column;gap:6px}
.form .field--full{grid-column:1 / -1}
label{font-size:14px;color:var(--muted)}
input,textarea{width:100%;max-width:100%;background:var(--surface);border:1px solid #253144;border-radius:12px;color:var(--text);padding:12px}
textarea{resize:vertical}
img.responsive{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.actions .btn{white-space:nowrap}
#formStatus{margin:0}

/* Footer */
footer{border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:28px 0}
.legal{font-size:13px;color:var(--muted)}
.build{padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:#0f1722}

/* Responsive layout tweaks */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cards,.steps,.metrics{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  form.form{grid-template-columns:1fr}
}

/* Checkbox alignment */
.checkbox{display:flex;align-items:center;gap:10px;line-height:1.4;user-select:none}
.checkbox input{appearance:auto;-webkit-appearance:auto;margin:0;width:18px;height:18px;flex:0 0 auto;transform:translateY(1px);accent-color:var(--brand)}
.checkbox a{text-decoration:underline}

/* Buttons unified */
button,input[type=submit],.btn{display:inline-block;font-size:16px;font-weight:600;padding:12px 20px;border-radius:12px;border:1px solid var(--line);cursor:pointer;transition:background .2s,transform .1s}
input[type=submit],button.btn,.btn{background:linear-gradient(90deg,var(--brand2),var(--brand));color:#0a0e12}
input[type=submit]:hover,.btn:hover{filter:saturate(120%);transform:translateY(-1px)}

/* Anchor scroll offset (sticky header) */
#szolgaltatasok,#miert-mi,#folyamat,#ar,#gyik,#kapcsolat{scroll-margin-top:96px}
@media (max-width:768px){
  #szolgaltatasok,#miert-mi,#folyamat,#ar,#gyik,#kapcsolat{scroll-margin-top:64px}
}

/* ===== Kapcsolat szekció – stabil, szűkített patch ===== */
#kapcsolat .wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
@media (min-width:900px){
  #kapcsolat .wrap{ grid-template-columns:1.1fr 1fr; gap:32px; }
}
#kapcsolat form.form{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:900px){
  #kapcsolat form.form{ grid-template-columns:1fr 1fr; }
  #kapcsolat .form .field--full{ grid-column:1 / -1; }
}
@media (max-width:640px){
  #kapcsolat .actions{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  #kapcsolat .actions .btn{ width:100%; text-align:center; }
}
#kapcsolat .checkbox{ display:flex; align-items:center; gap:10px; }
#kapcsolat img.responsive{ max-width:100%; height:auto; }
/* Árak szekció – finomhangolás */
#ar .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

#ar .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
#ar .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

#ar .card h3 { font-size: 18px; margin: 0 0 6px; }
#ar .card p { margin: 6px 0; }

#ar .card strong {
  color: var(--brand);
  font-size: 20px;
  font-weight: 800;
}

#ar .card em {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

/* Csillagos megjegyzések (kisebb betűvel) */
#ar .card small {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.4;
}
#ar .card small br { line-height: 1.2; }

/* Mobilon egy oszlop */
@media (max-width: 768px) {
  #ar .cards { grid-template-columns: 1fr; }
  #ar .card { text-align: left; }
}