:root{
  --bg:#0B141A;
  --ink:#ffffff;
  --muted:#cbd5e1;
  --brand:#f29d1f; /* narancs */
  --accent:#e53935; /* piros megnyitottunk */
  --card: #0f1b22;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue','Noto Sans',sans-serif;line-height:1.5}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #ffffff1a;background:rgba(11,20,26,.65)}
.header .bar{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none}
.brand .logo{height:36px;width:auto;border-radius:8px;display:block}
.nav{display:none;gap:18px}
.nav a{opacity:.85;text-decoration:none}
.nav a:hover{opacity:1}
@media(min-width:768px){.nav{display:flex}}

.ribbon{width:100%;background:linear-gradient(90deg,var(--accent),#ff6b6b);color:white;text-align:center;padding:10px 12px;font-weight:800;letter-spacing:.5px;border-bottom:1px solid #00000033;position:relative}
.ribbon .pulse{display:inline-block;margin-left:8px;width:10px;height:10px;border-radius:50%;background:#fff;opacity:.9;animation:pulse 1.8s infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.8}50%{transform:scale(1.15);opacity:1}100%{transform:scale(.9);opacity:.8}}

.hero{position:relative;overflow:hidden}
.hero .gridbg{position:absolute;inset:0;background-image:radial-gradient(transparent 1px, rgba(255,255,255,0.05) 1px);background-size:22px 22px;pointer-events:none}
.hero .inner{padding:68px 20px}
.hero h1{font-size:clamp(28px,3.2vw,43px);margin:0 0 10px;font-weight:900;letter-spacing:.4px}
.lead{color:var(--muted);max-width:780px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:14px;border:1px solid #ffffff2a;background:#ffffff10;color:white;text-decoration:none;font-weight:600}
.btn:hover{background:#ffffff18}
.btn.primary{background:var(--brand);color:#111;border-color:#00000022}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{padding:6px 10px;border-radius:999px;border:1px solid #ffffff2a;background:#ffffff12;color:#fff;font-size:13px}
.badge.brand{background:color-mix(in srgb, var(--brand) 25%, transparent);border-color:color-mix(in srgb, var(--brand) 55%, transparent);color:#111}

/*.section{padding:64px 0}*/

.h2{font-size:26px;margin:0 0 20px;font-weight:800}
.grid{display:grid;gap:16px}
.cards-2{grid-template-columns:1fr}
.cards-3{grid-template-columns:1fr}
@media(min-width:700px){.cards-2{grid-template-columns:1fr 1fr}.cards-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid #ffffff12;border-radius:18px;overflow:hidden}
.card .content{padding:16px}
.kv{height:200px;object-fit:cover;width:100%}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table td{padding:10px 14px;background:#0f1b22;border:1px solid #ffffff12}
.table tr td:first-child{border-right:none;border-radius:12px 0 0 12px;font-weight:600}
.table tr td:last-child{border-left:none;border-radius:0 12px 12px 0;text-align:right}

.footer{border-top:1px solid #ffffff1a;color:#94a3b8;text-align:center;/*padding:28px 0;*/margin-top:40px}
.colorchips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.chip{border:1px solid #ffffff16;border-radius:12px;padding:10px}
.swatch{height:50px;border-radius:10px;margin-bottom:8px}
form.simple{display:grid;gap:10px}
input[type="text"],input[type="email"],textarea{background:#0f1b22;border:1px solid #ffffff26;color:white;border-radius:10px;padding:10px}
textarea{min-height:84px;resize:vertical}
.disabled{opacity:.55;cursor:not-allowed}
.brands-bar {
  background-color: #131e26; /* sötét háttér, illik az arculathoz */
  padding: 8px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #222;
}

.brands-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1200px;
}

.brands-container img {
  height: 36px;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.brands-container img:hover {
  opacity: 1;
  transform: scale(1.05);
}
/* --- Hamburger menü gomb --- */
.hamburger {
  display: block;
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

/* --- Alapértelmezett navigáció --- */
.nav {
  display: none; /* mobilon alapból rejtve */
  flex-direction: column;
  background: rgba(11,20,26,0.95);
  position: absolute;
  top: 60px;
  right: 20px;
  border: 1px solid #ffffff22;
  border-radius: 12px;
  padding: 10px 0;
  width: 200px;
  z-index: 100;
}

.nav a {
  padding: 10px 16px;
  color: white;
  text-decoration: none;
  display: block;
}

.nav a:hover {
  background: rgba(255,255,255,0.08);
}

/* --- Asztali nézetben mindig látszódjon a menü --- */
@media (min-width: 768px) {
  .hamburger {
    display: none; /* eltűnik a hamburger */
  }
  .nav {
    display: flex; /* mindig látszik a menü */
    position: static;
    flex-direction: row;
    background: transparent;
    border: none;
    width: auto;
    padding: 0;
  }
  .nav a {
    display: inline-block;
    padding: 0;
    margin-left: 24px;
  }
  .nav a:hover {
    background: none;
    opacity: 1;
  }
}

/* --- Ha mobilon lenyitották --- */
.nav.active {
  display: flex;
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card:hover {
  background: #18252e;
  cursor: pointer;
  transition: 0.2s;
}