:root{
  --primary: #0b2f4d;
  --secondary: #145374;
  --accent: #00aaff;
  --bg: #0f1720;
  --card-bg: #142838;
  --muted: #7fbbe0;
  --text: #f0f6fb;
  --hover: #00d0ff;
  --shadow: rgba(0,170,255,0.25);
  --radius: 12px;
  --glass: rgba(255,255,255,0.02);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter", "Arial", sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}

.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

.top-banner{
  padding:1.6rem 0;
  text-align:center;
  color:var(--muted);
  text-shadow:0 0 10px rgba(80,160,255,0.12);
}
.divider{
  width:100%;
  height:3px;
  margin-top:1rem;
  background:linear-gradient(90deg, rgba(80,160,255,0) 0%, rgba(80,160,255,0.9) 50%, rgba(80,160,255,0) 100%);
  box-shadow:0 0 25px rgba(80,160,255,0.25);
}

header{padding:20px 0;background:transparent}
header .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand .logo{font-weight:700;letter-spacing:0.06em}
.brand-sub{font-size:0.85rem;color:var(--muted);margin-top:4px}

.nav-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.nav-links a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  padding:6px 10px;
  border-radius:8px;
  transition:all .18s ease;
  text-shadow:0 0 6px rgba(0,120,200,0.06);
}
.nav-links a:hover{
  color:var(--accent);
  transform:translateY(-2px);
  text-shadow:0 0 12px var(--accent);
}

.nav-actions{display:flex;gap:10px;align-items:center}
.lang-toggle{display:flex;gap:8px}
.btn{
  padding:9px 14px;
  border-radius:10px;
  border:1.5px solid rgba(255,255,255,0.04);
  background:transparent;
  color:var(--muted);
  font-weight:700;
  cursor:pointer;
  transition:all .22s;
  box-shadow:0 6px 18px rgba(0,0,0,0.4) inset;
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{
  background:linear-gradient(180deg, rgba(0,170,255,0.12), rgba(0,170,255,0.06));
  color:var(--text);
  border:1px solid rgba(0,170,255,0.18);
  box-shadow:0 8px 26px var(--shadow);
}
.btn.ghost{
  background:transparent;
  color:var(--accent);
  border:1.5px solid rgba(0,170,255,0.12);
}

@keyframes neonGlow{0%{box-shadow:0 0 8px rgba(0,170,255,0.06)}50%{box-shadow:0 0 20px rgba(0,170,255,0.18)}100%{box-shadow:0 0 30px rgba(0,170,255,0.26)}}
.btn.ghost:hover{animation:neonGlow 1.2s ease-in-out}

.hero{
  display:flex;
  gap:24px;
  align-items:center;
  padding:64px 0;
  position:relative;
  z-index:1;
}
.hero-left{flex:1;min-width:260px}
.hero-left h1{
  font-size:2.4rem;
  color:var(--accent);
  text-shadow:0 0 18px rgba(0,170,255,0.12);
  margin:12px 0;
}
.kicker{font-weight:800;color:var(--muted)}
.hero-left p{color:#cfeeff;margin-bottom:16px}

.hero-right{
  width:340px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), var(--glass));
  padding:20px;border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.02);
}

.floating-blob{
  position:absolute;right:6%;top:6%;
  width:220px;height:220px;border-radius:50%;
  filter:blur(40px);background:linear-gradient(180deg,var(--accent),rgba(0,170,255,0.6));
  opacity:0.12;pointer-events:none;z-index:0;
}

.section{padding:56px 0}
.section h2{font-size:1.8rem;color:var(--accent);margin-bottom:18px;text-shadow:0 0 12px rgba(0,170,255,0.06)}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

.product{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  padding:18px;border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s;
  border:1px solid rgba(255,255,255,0.02);
}
.product:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,170,255,0.06)}
.product .thumb{height:60px;border-radius:8px;background:rgba(255,255,255,0.02);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.product h3{color:var(--accent);margin-bottom:6px}

.modal{
  display:none;
  position:fixed;inset:0;
  background:rgba(6,10,16,0.7);
  justify-content:center;align-items:center;z-index:9999;padding:24px;
}
.modal[aria-hidden="false"]{display:flex}
.modal-card{
  width:100%;max-width:640px;background:var(--card-bg);padding:24px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal-header h3{color:var(--accent)}
.modal-body{margin-top:12px;color:var(--text)}

form{max-width:700px}
form input, form textarea{
  width:100%;padding:12px;border-radius:10px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.04);
  background:var(--card-bg);color:var(--text);resize:vertical;
}
form input::placeholder, form textarea::placeholder{color:var(--muted)}
form label{display:flex;align-items:center;gap:8px;color:var(--muted);margin-bottom:6px}
#responseMsg{margin-top:10px;text-align:center;color:var(--muted)}

footer{padding:36px 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.footer-grid a{color:var(--muted);text-decoration:none;margin-right:12px}
.footer-grid a:hover{color:var(--accent);text-shadow:0 0 10px rgba(0,170,255,0.04)}

@media (max-width:900px){
  .hero{flex-direction:column}
  .hero-right{width:100%}
  .footer-grid{grid-template-columns:1fr; text-align:center; gap:8px}
  .nav-links{order:3;width:100%;justify-content:center;margin-top:8px}
  .nav-actions{order:2}
}