
:root{
  --bg:#0b1220; --panel:#0f1a2e; --panel2:#0c1627; --border:#22324f;
  --txt:#e9eefc; --muted:#a7b0c6; --pri:#4ea3ff; --accent:#8bffcc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--pri);text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:22px 24px}

.nav{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand menu lang";align-items:center;gap:16px;background:rgba(11,18,32,.92);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.brand{grid-area:brand;font-weight:800;color:#fff;white-space:nowrap}
.nav-links{grid-area:menu;display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--muted)}
.lang{grid-area:lang;display:flex;gap:10px;justify-content:flex-end}
.lang-strip{display:none}
.lang-item{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:#dbe4ff}
.lang-item img{width:18px;height:18px;border-radius:2px}
.lang-item.active{background:#1b2b49;border-color:#3a4d70}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);color:#e9eefc}
.btn.primary{background:var(--pri);border-color:transparent;color:#041225;font-weight:600}
.btn.ghost{background:transparent}

.hero{padding:28px 0 6px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hero h1{font-size:46px;margin:6px 0 12px}
.hero p{color:var(--muted);max-width:560px}
.hero-visual{justify-self:center}
.hero-visual img{width:100%;max-width:520px;height:auto;border-radius:14px;border:1px solid var(--border)}
.badge{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:#a7b0c6;font-size:12px}
.kpis{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.kpi{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:8px 12px;font-size:14px;color:#cfe1ff}

.section{margin:28px auto}
.section h2{margin:8px 0 14px;text-align:center}

/* Centered grids */
.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,340px));
  gap:16px;
  justify-content:center;
  justify-items:stretch;
  text-align:center;
}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}
.card h3{margin-top:0}

/* Specs grid centered */
.specs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,340px));
  gap:12px;
  justify-content:center;
  justify-items:stretch;
}
.spec{display:flex;justify-content:space-between;gap:8px;background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:left}
.note{color:var(--muted);font-size:14px}

/* Gallery centered */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,340px));
  gap:10px;
  justify-content:center;
  justify-items:center;
}
.gallery img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:#0a1529}

.video-embed{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#000;max-width:880px;margin:0 auto}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;max-width:920px;margin:0 auto}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#0a1522;color:#e9eefc}
textarea{min-height:120px}

.footer{border-top:1px solid var(--border);color:#93a0bf;text-align:center;margin-top:30px;padding:16px 0}

@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{order:2}
  .hero h1{font-size:40px}
}
@media (max-width:900px){
  .nav{grid-template-columns:1fr auto;grid-template-areas:"brand lang" "menu menu"}
  .lang{display:none}
  .lang-strip{display:flex;justify-content:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);background:rgba(11,18,32,.92)}
}
@media (max-width:560px){
  .contact-grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}
