:root{
  --kék:#1a4a7a;
  --kék-sötét:#0f3557;
  --világoskék:#e8f1fa;
  --zöld:#1e7e34;
  --zöld-sötét:#155724;
  --sárga:#fff3cd;
  --szürke:#f4f4f4;
  --keret:#d0d0d0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  line-height:1.5;
  color:#1a1a1a;
  background:#fff;
}
a{color:var(--kék)}
header.top{
  background:var(--kék);
  color:#fff;
  padding:10px 16px;
  text-align:center;
  font-size:19px;
}
header.top strong{display:block;font-size:21px}
nav{
  background:var(--kék-sötét);
  padding:6px;
  text-align:center;
  position:sticky;
  top:0;
  z-index:10;
}
nav a{
  color:#fff;text-decoration:none;font-size:18px;font-weight:bold;
  margin:0 8px;padding:8px 10px;display:inline-block;
}
nav a:hover{background:rgba(255,255,255,.2);border-radius:8px}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px 30px}
.hero{
  text-align:center;background:var(--világoskék);
  border-bottom:3px solid var(--kék);
  padding:22px 16px;
}
.hero h1{font-size:30px;margin:0;color:var(--kék);line-height:1.2}
.hero p{font-size:19px;margin:8px 0}
.gombok{margin-top:12px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gomb{
  display:inline-block;font-size:19px;font-weight:bold;text-decoration:none;
  padding:12px 22px;border-radius:10px;border:2px solid var(--kék);
}
.gomb.elsődleges{background:var(--zöld);border-color:var(--zöld-sötét);color:#fff}
.gomb.elsődleges:hover{background:var(--zöld-sötét)}
.gomb.másodlagos{background:#fff;color:var(--kék)}
h2{font-size:25px;color:var(--kék);margin:28px 0 10px;border-bottom:2px solid var(--kék);padding-bottom:6px}
.kártyák{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:720px){.kártyák{grid-template-columns:1fr 1fr 1fr}}
.kártya{
  border:2px solid var(--kék);border-radius:12px;
  padding:16px 14px;text-align:center;background:#fff;
}
.kártya h3{margin:6px 0;color:var(--kék);font-size:20px}
.kártya p{font-size:17px;margin:8px 0}
.kártya .ár{font-size:20px;font-weight:bold;margin:6px 0}
.ingyen{
  display:inline-block;background:var(--zöld);color:#fff;
  font-weight:bold;border-radius:8px;padding:2px 12px;font-size:17px;
}
.ársáv{
  background:var(--sárga);border:2px solid #d9a400;border-radius:10px;
  padding:10px 14px;margin-top:14px;font-size:19px;text-align:center;
}
table.árak{width:100%;border-collapse:collapse;font-size:18px;margin-top:12px}
table.árak th,table.árak td{border:2px solid var(--keret);padding:10px;text-align:left}
table.árak th{background:var(--kék);color:#fff}
table.árak tr:nth-child(even){background:var(--szürke)}
.lépések{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0 0;padding:0;list-style:none}
@media(min-width:720px){.lépések{grid-template-columns:1fr 1fr 1fr}}
.lépések li{background:var(--világoskék);padding:12px 14px;border-radius:10px;font-size:18px}
.infodoboz{background:var(--sárga);border:2px solid #d9a400;border-radius:10px;padding:10px 14px;margin-top:12px;font-size:17px}
details{border:2px solid var(--keret);border-radius:10px;margin-bottom:8px;background:#fff}
details summary{padding:12px;font-size:18px;font-weight:bold;cursor:pointer;color:var(--kék)}
details p{padding:0 12px 12px;margin:0;font-size:17px}
form.rendelés{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:720px){form.rendelés{grid-template-columns:1fr 1fr}form.rendelés .teljes{grid-column:1/-1}}
form.rendelés label{display:block;font-weight:bold;font-size:18px}
form.rendelés input,form.rendelés select,form.rendelés textarea{
  width:100%;font-size:18px;padding:10px;margin-top:4px;
  border:2px solid var(--kék);border-radius:8px;font-family:inherit;
}
form.rendelés textarea{min-height:80px}
form.rendelés button{
  grid-column:1/-1;margin-top:4px;font-size:21px;font-weight:bold;cursor:pointer;
  background:var(--zöld);color:#fff;border:2px solid var(--zöld-sötét);
  border-radius:10px;padding:14px;
}
form.rendelés button:hover{background:var(--zöld-sötét)}
#űrlap-üzenet{margin-top:12px;font-size:18px;display:none;background:#d4edda;border:2px solid var(--zöld);border-radius:10px;padding:12px}
#másolás-doboz{margin-top:12px;font-size:18px;background:#fff8e1;border:2px solid #d9a400;border-radius:10px;padding:12px}
#másolás-gomb{
  font-size:19px;font-weight:bold;cursor:pointer;
  background:#fff;color:var(--kék);border:2px solid var(--kék);
  border-radius:10px;padding:12px 18px;
}
#másolva-üzenet{margin-top:10px;font-weight:bold}
.kontakt{text-align:center;font-size:19px;margin:10px 0}
.figyelem{
  background:#fff6dd;border:1px solid #e0c25e;border-left:8px solid #c99900;
  border-radius:0 12px 12px 0;box-shadow:0 2px 10px rgba(0,0,0,.10);
  padding:8px 22px 16px;margin-top:18px;font-size:19px;
}
.figyelem h2{border-bottom:none;margin:14px 0 8px;padding-bottom:0;font-size:28px}
.figyelem ul{margin:10px 0;padding-left:22px;list-style:square}
.figyelem li{margin-bottom:8px}
.figyelem li::marker{color:#a37e00;font-size:1.1em}
.figyelem p strong{font-size:19px}
.válaszidő{
  text-align:center;font-size:18px;margin:0 0 6px;
  background:var(--világoskék);border-radius:10px;padding:10px 14px;
}
footer{background:var(--kék);color:#fff;text-align:center;padding:18px;font-size:17px;margin-top:30px}
footer a{color:#fff}
.nyelv{margin-bottom:8px}
.nyelv button{
  font-size:17px;font-weight:bold;cursor:pointer;
  background:transparent;color:#fff;border:2px solid #fff;border-radius:8px;
  padding:6px 16px;margin:0 4px;
}
.nyelv button.aktív{background:#fff;color:var(--kék)}