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

body{

  background:#050505;

  color:white;

  font-family:'Poppins',sans-serif;

  overflow-x:hidden;
}

body::before{

  content:'';

  position:fixed;

  width:450px;
  height:450px;

  background:#00ff88;

  filter:blur(180px);

  top:-150px;
  right:-150px;

  opacity:0.14;

  z-index:-1;
}

body::after{

  content:'';

  position:fixed;

  width:450px;
  height:450px;

  background:#ff0055;

  filter:blur(180px);

  bottom:-150px;
  left:-150px;

  opacity:0.14;

  z-index:-1;
}

header{

  width:100%;

  padding:22px 8%;

  display:flex;

  justify-content:space-between;

  align-items:center;

  backdrop-filter:blur(10px);

  background:rgba(0,0,0,0.45);

  border-bottom:
    1px solid rgba(255,255,255,0.08);
}

.logo{

  color:#00ff88;

  font-family:'Orbitron',sans-serif;

  font-size:1.5rem;

  text-shadow:
    0 0 12px #00ff88;
}

.back-btn{

  text-decoration:none;

  color:white;

  border:
    1px solid rgba(255,255,255,0.15);

  padding:10px 18px;

  border-radius:40px;

  transition:0.3s;
}

.back-btn:hover{

  border-color:#00ff88;

  box-shadow:
    0 0 18px rgba(0,255,136,0.35);
}

.hero{

  text-align:center;

  padding:90px 20px 40px;
}

.hero h1{

  font-size:4rem;

  color:#00ff88;

  font-family:'Orbitron',sans-serif;

  text-shadow:
    0 0 15px #00ff88,
    0 0 30px rgba(0,255,136,0.4);
}

.hero p{

  max-width:760px;

  margin:25px auto 0;

  line-height:1.8;

  color:#cccccc;
}

.review-layout{

  width:92%;

  max-width:1300px;

  margin:auto auto 100px;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:40px;
}

.review-form-box,
.review-wall{

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:30px;

  padding:35px;

  backdrop-filter:blur(14px);
}

.section-title{

  color:#00ff88;

  margin-bottom:30px;

  font-family:'Orbitron',sans-serif;

  text-shadow:
    0 0 10px rgba(0,255,136,0.35);
}

.input-group{

  margin-bottom:22px;
}

.input-group label{

  display:block;

  margin-bottom:10px;

  color:#dddddd;
}

input,
textarea,
select{

  width:100%;

  padding:14px;

  background:#101010;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:16px;

  color:white;

  outline:none;
}

input:focus,
textarea:focus,
select:focus{

  border-color:#00ff88;

  box-shadow:
    0 0 18px rgba(0,255,136,0.18);
}

textarea{

  min-height:140px;

  resize:none;
}

.stars{

  display:flex;

  gap:12px;

  font-size:2rem;

  cursor:pointer;
}

.star{

  color:#444;

  transition:0.3s;
}

.star.active{

  color:#ffd700;

  text-shadow:
    0 0 12px rgba(255,215,0,0.7);
}

.submit-btn{

  width:100%;

  padding:16px;

  border:none;

  border-radius:50px;

  background:#00ff88;

  color:black;

  font-weight:700;

  cursor:pointer;

  transition:0.3s;
}

.submit-btn:hover{

  transform:translateY(-3px);

  box-shadow:
    0 0 25px rgba(0,255,136,0.5);
}

.review-card{

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:24px;

  padding:24px;

  margin-bottom:25px;
}

.review-card h3{

  margin-bottom:12px;
}

.review-stars{

  color:#ffd700;

  margin-bottom:14px;
}

.review-text{

  color:#cccccc;

  line-height:1.7;
}

.review-badge{

  display:inline-block;

  padding:6px 14px;

  border-radius:40px;

  background:
    rgba(0,255,136,0.12);

  color:#00ff88;

  font-size:0.72rem;

  margin-bottom:16px;

  border:
    1px solid rgba(0,255,136,0.2);
}

@media(max-width:900px){

  .review-layout{

    grid-template-columns:1fr;
  }

  .hero h1{

    font-size:2.6rem;
  }

}