.landing-wrapper{
  max-width:860px;
  margin:auto;
  padding:40px 20px;
  text-align:center;
}

.hero{
  padding:40px 24px;
}
.hero-head{display:flex; flex-direction:column; align-items:center; gap:8px}
.hero-logo{width:64px; height:64px; object-fit:contain; border-radius: 16px}
.hero h1{font-size:34px; margin:0}
.tagline{font-family:Poppins,sans-serif; font-weight:600; font-size:1.1rem; color:var(--green)}
.intro{margin:20px auto; font-size:1.05rem; max-width:560px}

.signup-form{margin:20px auto; padding:24px; }
.signup-row{display:flex; gap:8px; margin-top:16px}
.signup-row input{flex:1}

.mockup{margin-top:24px}
.mockup img{width:100%; max-width:560px; border-radius:20px; box-shadow:var(--shadow)}

.features{
  margin: 0; display:grid; gap:20px; max-width:860px;
}
@media(min-width:720px){.features{grid-template-columns:1fr 1fr 1fr}}

.feature{padding:20px; text-align:center}
.feature h3{margin-top:8px}
.feature .badge-ico{font-size:28px; display:block; margin-bottom:8px}

footer{margin-top:40px}