:root{
  --mint:#A8F0B2;
  --dark:#05070c;
  --card:#10141b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--dark);
  color:white;
}
.hero{
  height:100vh;
  background:linear-gradient(120deg,#05070c 35%,rgba(168,240,178,.18)), url('https://images.unsplash.com/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&w=1600&q=80') center/cover;
  position:relative;
  display:flex;
  align-items:center;
  padding:40px;
}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.content{position:relative;max-width:650px}
.logo{
  color:var(--mint);
  font-weight:800;
  letter-spacing:4px;
  margin-bottom:40px;
}
.logo span{display:block;color:white;font-size:13px;margin-top:8px}
h1{
  font-size:64px;
  line-height:1;
  margin:0 0 20px;
}
p{font-size:20px;color:#d8d8d8}
button{
  border:none;
  cursor:pointer;
  border-radius:12px;
  padding:16px 24px;
  font-size:16px;
  font-weight:700;
}
.hero button,.whatsapp{
  background:var(--mint);
  color:#07110a;
  margin-top:20px;
}
.builder{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  padding:60px 40px;
  max-width:1200px;
  margin:auto;
}
.left,.jar-card{
  background:linear-gradient(180deg,#111821,#090d12);
  border:1px solid rgba(168,240,178,.25);
  border-radius:24px;
  padding:30px;
}
label,h3{display:block;margin-top:22px;color:var(--mint)}
input,select{
  width:100%;
  padding:15px;
  border-radius:12px;
  border:1px solid #2a333d;
  background:#05070c;
  color:white;
  margin-top:8px;
  font-size:16px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:12px;
}
.chip{
  background:#171d25;
  color:white;
  border:1px solid #2a333d;
}
.chip.active{
  background:var(--mint);
  color:#07110a;
}
.whatsapp{width:100%;font-size:18px}
.right{
  display:flex;
  align-items:center;
  justify-content:center;
}
.jar-card{text-align:center;width:100%}
.jar{
  width:100%;
  max-width:420px;
  height:360px;
  margin:0 auto 25px;
  border-radius:22px;
  background:url('power-jar.png') center/cover no-repeat;
  box-shadow:0 0 50px rgba(168,240,178,.25);
  border:1px solid rgba(168,240,178,.25);
}
small{color:var(--mint)}
@media(max-width:800px){
  .builder{grid-template-columns:1fr;padding:30px 18px}
  h1{font-size:44px}
  .hero{padding:24px}
}