:root{
  --bg:#060912;
  --bg-alt:#0A0F1E;
  --surface:#10182B;
  --surface-2:#141F38;
  --primary:#3E7BFA;
  --accent:#4FE3FF;
  --accent-2:#7B61FF;
  --text:#EAF1FF;
  --text-muted:#8CA0C4;
  --border:rgba(79,227,255,0.16);
  --radius:16px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  html{scroll-behavior:auto;}
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.grid-bg{
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(79,227,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,227,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.78rem;
  color:var(--accent);
  margin-bottom:0.75rem;
}
.eyebrow.center{text-align:center;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.85rem 1.6rem;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor:pointer;
  border:1px solid transparent;
}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--accent-2));
  color:#fff;
  box-shadow:0 0 24px rgba(62,123,250,0.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 6px 30px rgba(62,123,250,0.5);}
.btn-outline{border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-ghost{
  background:var(--surface);
  border:1px solid var(--border);
  font-size:0.85rem;
  padding:0.6rem 1.2rem;
}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(6,9,18,0.7);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0.02em;
  font-size:1.1rem;
}
.logo span{color:var(--accent);}
.logo.small{font-size:0.95rem;}
.nav-links{display:flex; gap:2rem;}
.nav-links a{color:var(--text-muted); font-size:0.92rem; transition:color 0.15s;}
.nav-links a:hover{color:var(--accent);}
@media (max-width:720px){ .nav-links{display:none;} }

/* Hero */
.hero{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:2rem;
  align-items:center;
  padding:5rem 1.5rem 4rem;
}
@media (max-width:900px){ .hero{grid-template-columns:1fr; padding-top:3rem;} }

.hero h1{font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.15; margin-bottom:1.2rem;}
.glow{color:var(--accent); text-shadow:0 0 30px rgba(79,227,255,0.5);}
.hero-sub{color:var(--text-muted); font-size:1.05rem; max-width:46ch; margin-bottom:2rem;}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}

.hero-visual{display:flex; justify-content:center; align-items:center;}
.network-svg{width:100%; max-width:400px;}
.ring{fill:none; stroke:var(--border); stroke-width:1;}
.ring-1{animation:pulse 3s ease-in-out infinite;}
.ring-2{animation:pulse 3s ease-in-out infinite 0.5s;}
.ring-3{animation:pulse 3s ease-in-out infinite 1s;}
@keyframes pulse{
  0%{opacity:0.9; stroke-width:1.5;}
  50%{opacity:0.2;}
  100%{opacity:0.9; stroke-width:1.5;}
}
.link{stroke:var(--accent); stroke-width:1; opacity:0.35;}
.hub{fill:var(--primary); filter:drop-shadow(0 0 14px var(--accent));}
.node circle{fill:var(--surface-2); stroke:var(--accent); stroke-width:1.2;}
.node text{font-size:18px;}

/* Strip */
.strip{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem; padding:0 1.5rem 4rem;
}
.strip-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem; text-align:center;
}
.strip-item strong{display:block; font-family:var(--font-display); color:var(--accent); font-size:1.3rem;}
.strip-item span{color:var(--text-muted); font-size:0.85rem;}
@media (max-width:720px){ .strip{grid-template-columns:repeat(2,1fr);} }

/* About */
.about{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  padding:2rem 1.5rem 5rem;
  align-items:start;
}
@media (max-width:900px){ .about{grid-template-columns:1fr;} }
.about-text h2{font-size:1.9rem; margin-bottom:1rem;}
.about-text p{color:var(--text-muted);}
.about-cards{display:flex; flex-direction:column; gap:1rem;}
.mini-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem;
}
.mini-card h3{font-size:1rem; margin-bottom:0.4rem; color:var(--accent);}
.mini-card p{color:var(--text-muted); font-size:0.92rem;}

/* Products */
.products{max-width:1180px; margin:0 auto; padding:2rem 1.5rem 5rem;}
.products h2{font-size:2rem; margin-bottom:0.6rem;}
.section-sub{color:var(--text-muted); max-width:56ch; margin-bottom:3rem;}
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:1.5rem;
}
.product-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem; display:flex; flex-direction:column; gap:0.8rem;
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.product-card:hover{transform:translateY(-4px); border-color:var(--accent);}
.product-icon{
  width:52px; height:52px; border-radius:12px;
  background:linear-gradient(135deg, var(--primary), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
}
.product-card h3{font-size:1.05rem;}
.product-card p{color:var(--text-muted); font-size:0.88rem; flex-grow:1;}
.product-price{font-family:var(--font-display); color:var(--accent); font-size:1.15rem; font-weight:600;}
.product-card .btn{width:100%; padding:0.7rem;}

/* Contact */
.contact{padding:2rem 1.5rem 6rem;}
.contact-box{
  max-width:760px; margin:0 auto; text-align:center;
  background:linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--border); border-radius:24px;
  padding:3.5rem 2rem;
}
.contact-box h2{font-size:1.8rem; margin:0.6rem 0 1rem;}
.contact-box p{color:var(--text-muted); max-width:48ch; margin:0 auto 2rem;}

/* Footer */
.footer{border-top:1px solid var(--border); padding:2rem 1.5rem;}
.footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.8rem;
}
.footer-inner p{color:var(--text-muted); font-size:0.85rem;}