*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
body{
  background:
    radial-gradient(circle at 15% 20%, #1aff8a55, transparent 40%),
    radial-gradient(circle at 85% 80%, #00ffcc44, transparent 40%),
    linear-gradient(120deg,#020805,#04160d,#020805);
  color:#eafff1;
}
a{text-decoration:none;color:#7CFF9B}
header{
  padding:30px 70px;
  display:flex;justify-content:space-between;align-items:center;
  backdrop-filter:blur(14px);
}
header img{height:55px;filter:drop-shadow(0 0 12px #2cff8a)}
nav a{margin-left:35px;font-weight:700;letter-spacing:1px}

.hero{
  height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;
}
.hero h1{
  font-size:86px;
  background:linear-gradient(90deg,#2cff8a,#00ffd5,#7CFF9B);
  -webkit-background-clip:text;color:transparent;
  text-shadow:0 0 40px #2cff8a55;
}
.hero p{font-size:24px;margin-top:20px;opacity:.9}

section{padding:100px 80px}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.split img{
  width:100%;
  border-radius:30px;
  box-shadow:0 30px 80px #000;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:35px;
}
.card{
  background:linear-gradient(160deg,#0b2f1a,#061a11);
  border-radius:26px;
  padding:30px;
  border:1px solid #2cff8a44;
  box-shadow:0 30px 80px #000;
  transition:.4s;
}
.card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 40px 120px #2cff8a44;
}
.card img{
  width:100%;height:230px;object-fit:cover;border-radius:20px;margin-bottom:15px;
}
.price{color:#7CFF9B;font-size:22px;font-weight:800}
button{
  margin-top:18px;padding:14px 22px;border-radius:14px;
  border:none;cursor:pointer;font-weight:800;
  background:linear-gradient(135deg,#2cff8a,#00ffd5);
}
footer{text-align:center;padding:40px;opacity:.7}
@media(max-width:900px){.split{grid-template-columns:1fr}}