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

body{
  background:#05080f;
  color:white;
  overflow-x:hidden
}

/* Background */
.bg-gradient{
  position:fixed;
  inset:0;
  background:
  radial-gradient(circle at 10% 10%,#00ffe133,transparent),
  radial-gradient(circle at 90% 90%,#7f00ff33,transparent);
  z-index:-3;
}
.particles{position:fixed;inset:0;z-index:-2;}

/* NAV */
header{
  display:flex;
  justify-content:space-between;
  padding:20px 50px;
  border-bottom:1px solid #00ffe150;
}
header h2{color:#00ffe1}
nav a{margin-left:25px;color:white;text-decoration:none;}

/* HERO */
.hero{
  min-height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center
}
.hero h1{font-size:60px;color:#00ffe1}
.hero p{opacity:.7;font-size:22px;margin:10px 0 20px}
button{
  padding:14px 28px;
  background:#00ffe1;
  border:none;
  font-weight:600;
  border-radius:6px;
  cursor:pointer;
}

/* STATS */
.stats{
  display:flex;
  justify-content:center;
  gap:70px;
  padding:40px 0;
}
.stats span{color:#00ffe1;font-size:34px}

/* SECTION */
section{padding:80px 20px;text-align:center}
h2{color:#00ffe1;margin-bottom:25px}

/* STEPS */
.steps{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap
}
.step-box{
  padding:30px;
  width:200px;
  background:linear-gradient(145deg,#090d19,#000);
  border:1px solid #00ffe155;
  border-radius:15px;
}
.step{
  background:#00ffe1;
  color:black;
  width:40px;
  height:40px;
  border-radius:50%;
  margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center
}

/* CODE BOX */
pre{
  margin:25px auto;
  max-width:800px;
  background:black;
  border:1px solid #00ffe1;
  padding:25px;
  text-align:left;
  border-radius:10px;
}

/* FEATURES */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  max-width:900px;
  margin:auto
}
.feature-card{
  padding:25px;
  border-radius:15px;
  background:linear-gradient(145deg,#10162a,#05080f);
  border:1px solid #00ffe155;
}

/* PRICING */
.pricing-grid{
  display:flex;
  justify-content:center;
  gap:35px;
  flex-wrap:wrap
}
.plan{
  padding:30px;
  width:260px;
  border-radius:20px;
  background:linear-gradient(145deg,#0a1022,#000);
  border:1px solid #00ffe155;
}
.price{color:#00ffe1;font-size:28px;margin:10px 0}
.popular{transform:scale(1.1)}

/* USERS */
.user{
  padding:25px;
  margin:20px auto;
  max-width:500px;
  background:black;
  border:1px solid #00ffe133;
  border-radius:10px
}

/* FOOTER */
footer{
  padding:40px;
  text-align:center;
  border-top:1px solid #00ffe144;
  opacity:.7
}