:root{
  --bg-deep: #020617;
  --navy-1: #04132a;
  --navy-2: #06203a;
  --accent: #00b0ff;
  --accent-2: #5de0ff;
  --muted: #97a3b3;
  --glass: rgba(255,255,255,0.03);
  --card: rgba(10,15,25,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(0,176,255,0.03), transparent),
              linear-gradient(180deg, var(--navy-1), var(--navy-2) 60%, var(--bg-deep));
  color:#cfe9ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:14px 28px;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.08));
}
.brand-name{
  font-weight:800;
  letter-spacing:1px;
  font-size:20px;
  color:#e6f7ff;
}
.brand .minor{
  color:var(--accent-2);
  font-weight:700;
  margin-left:6px;
}
.thin-line{
  height:1px;
  background:linear-gradient(90deg, rgba(0,176,255,0.06), rgba(255,255,255,0.02));
}

/* Hamburger */
.hamburger{
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:20px;
  cursor:pointer;
  padding:6px 8px;
}
.top-actions .btn{font-size:14px}

/* Side panel (off-canvas) */
.side-panel{
  position:fixed;
  left:-320px;
  top:0;
  height:100vh;
  width:320px;
  background:linear-gradient(180deg, rgba(3,8,16,0.98), rgba(6,12,20,0.98));
  box-shadow: 10px 0 30px rgba(0,0,0,0.6);
  z-index:140;
  transition:left .36s cubic-bezier(.22,.9,.26,1);
  display:flex;
  flex-direction:column;
  color:var(--muted);
}
.side-panel.open{left:0}
.side-nav{padding:24px;display:flex;flex-direction:column;height:100%}
.side-nav ul{list-style:none;padding:0;margin:20px 0 0 0;flex:1}
.side-nav li{margin:8px 0}
.side-nav a{
  display:block;
  color:#dfeeff;
  text-decoration:none;
  padding:12px 14px;
  border-radius:8px;
  transition:background .18s, transform .12s;
}
.side-nav a:hover{background:rgba(255,255,255,0.02); transform:translateX(6px)}
.close-btn{align-self:flex-end;background:transparent;border:0;color:var(--muted);font-size:18px}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, rgba(2,6,12,0.6), rgba(2,6,12,0.6));
  z-index:130;
  opacity:0;
  transition:opacity .22s;
}
.overlay.show{opacity:1}

/* Hero */
.main-hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 20px;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 400px at 85% 20%, rgba(0,176,255,0.04), transparent),
    radial-gradient(600px 300px at 20% 70%, rgba(93,224,255,0.03), transparent),
    linear-gradient(180deg, rgba(2,8,20,0.6), rgba(2,4,10,0.8));
  filter:blur(8px) saturate(.95);
  z-index:0;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:980px;
  text-align:center;
  padding:40px;
}
.hero-title{
  font-size:64px;
  margin:0;
  line-height:0.9;
  letter-spacing: -1px;
  font-weight:800;
  color: #e9fbff;
  text-shadow: 0 6px 30px rgba(0,176,255,0.08), 0 2px 12px rgba(0,0,0,0.4);
}
.hero-title .glow{
  color:var(--accent-2);
  text-shadow:
    0 0 10px rgba(0,176,255,0.08),
    0 0 24px rgba(93,224,255,0.06),
    0 6px 30px rgba(0,0,0,0.35);
}
.hero-sub{
  margin:14px auto 22px;
  color:var(--muted);
  font-size:18px;
  max-width:760px;
}

/* buttons */
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  backdrop-filter: blur(4px);
  transition:transform .12s, box-shadow .12s;
}
.btn.primary{
  background: linear-gradient(90deg, rgba(0,176,255,0.12), rgba(93,224,255,0.06));
  border: 1px solid rgba(0,176,255,0.18);
  color:#eaffff;
  box-shadow: 0 6px 26px rgba(0,176,255,0.03);
}
.btn.ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.04);
}

/* Intro card */
.intro-card{
  margin-top:30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:20px;
  text-align:left;
  color:#cbeeff;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.01);
}

/* Product Section */
.products{
  padding:48px 20px;
}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.products h3{color:#e3f8ff;font-size:20px;margin-bottom:18px}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:18px;
}
.card{
  background:var(--card);
  padding:18px;
  border-radius:12px;
  min-height:120px;
  color:#d8f3ff;
  box-shadow: 0 6px 30px rgba(2,8,16,0.6);
}

/* Contact & footer */
.contact{padding:36px 20px;color:var(--muted)}
.site-footer{
  border-top:1px solid rgba(255,255,255,0.03);
  padding:22px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), transparent);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  max-width:1100px;margin:0 auto;
}
.footer-links a{color:var(--muted);margin-left:14px;text-decoration:none}

/* Responsive */
@media (max-width:800px){
  .hero-title{font-size:44px}
  .brand-name{font-size:18px}
  .side-panel{width:86%}
  .header-inner{padding:12px 16px}
  .footer-inner{flex-direction:column;align-items:flex-start}
}