:root{
  --navy:#0b2d5c;
  --green:#43aa32;
  --leaf:#76c943;
  --gold:#f5b325;
  --soft:#f3fbef;
  --blue:#eaf6ff;
  --text:#14213d;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fffef8 0%,#fff 42%,#f5fbff 100%);
}
.header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 5%;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(11,45,92,.08);
}
.logo-wrap{display:flex;align-items:center;text-decoration:none}
.logo{
  width:310px;
  max-height:118px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 5px 10px rgba(11,45,92,.10));
}
nav{display:flex;gap:28px;align-items:center}
nav a{color:var(--text);text-decoration:none;font-weight:800}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 26px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--green),#69bd42);
  color:white;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 14px 26px rgba(67,170,50,.26);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.secondary{
  background:white;
  color:var(--navy);
  border:3px solid var(--navy);
  box-shadow:none;
}
.nav-btn{padding:12px 22px}
.hero{
  min-height:760px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  padding:70px 5% 50px;
  background:
    radial-gradient(circle at 6% 22%,#def6ff 0 28px,transparent 30px),
    radial-gradient(circle at 88% 26%,#def6ff 0 28px,transparent 30px),
    linear-gradient(135deg,#fffdf7,#ffffff,#f1faec);
  overflow:hidden;
}
.badge{
  display:inline-block;
  padding:11px 18px;
  border-radius:999px;
  background:#e8f6df;
  color:#2e7a26;
  font-weight:900;
}
h1{
  font-size:72px;
  line-height:1.02;
  margin:22px 0;
  color:#123b28;
  letter-spacing:-2px;
}
h1 span{color:var(--green)}
.lead{
  max-width:660px;
  font-size:22px;
  line-height:1.58;
  color:#1f2937;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.social-proof{margin-top:22px;color:#334155;font-weight:700}
.sprout-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:560px;
  background:linear-gradient(135deg,#f5ffed,#ffffff);
  border:8px solid white;
  border-radius:42px;
  box-shadow:0 30px 80px rgba(11,45,92,.15);
  overflow:hidden;
}
.sprout-card img{
  width:100%;
  max-width:620px;
  display:block;
  object-fit:contain;
  animation:float 4s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.trust{
  max-width:1180px;
  margin:-42px auto 54px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  padding:20px;
  border-radius:30px;
  background:white;
  box-shadow:0 22px 60px rgba(11,45,92,.10);
  position:relative;
  z-index:5;
}
.trust div{
  padding:18px;
  border-radius:22px;
  background:linear-gradient(135deg,#f7fff4,#eef8ff);
  text-align:center;
}
.trust strong{display:block;color:var(--green);font-size:30px}
.trust span{font-weight:900;color:var(--navy);font-size:14px}
.section{padding:80px 5%;text-align:center}
.section h2{font-size:46px;color:var(--navy);margin:0 0 14px}
.intro{font-size:19px;color:#526179;max-width:750px;margin:0 auto 38px;line-height:1.6}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1150px;margin:0 auto}
.steps article{
  background:white;
  border-radius:28px;
  padding:30px;
  box-shadow:0 16px 36px rgba(11,45,92,.08);
  border:3px solid #edf6ec;
}
.steps span{
  width:46px;height:46px;margin:0 auto 16px;
  display:grid;place-items:center;
  border-radius:50%;background:var(--green);color:white;font-weight:900;font-size:22px;
}
.steps h3{color:var(--navy);font-size:22px}
.steps p{color:#526179;line-height:1.55}
.soft{background:linear-gradient(135deg,#fff9df,#f3fbef,#edf8ff)}
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;max-width:1050px;margin:34px auto 0;text-align:left;
}
.grid div{
  background:white;border-radius:24px;padding:24px;
  box-shadow:0 12px 30px rgba(11,45,92,.07);
  font-weight:900;color:var(--navy);
}
.preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1250px;margin:36px auto 0}
figure{margin:0;background:white;border-radius:28px;padding:12px;box-shadow:0 16px 42px rgba(11,45,92,.12)}
figure img{width:100%;display:block;border-radius:20px}
figcaption{padding:14px;font-weight:900;color:var(--navy);font-size:18px}
.pricing{background:linear-gradient(135deg,#ffffff,#f3fbef)}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:930px;margin:36px auto 0}
.price-card{position:relative;background:white;border-radius:32px;padding:38px;box-shadow:0 18px 45px rgba(11,45,92,.10);border:4px solid #edf6ec}
.price-card.featured{border-color:var(--green);background:linear-gradient(180deg,#fff,#f8fff4)}
.ribbon{position:absolute;top:0;right:0;background:var(--green);color:white;padding:10px 18px;border-bottom-left-radius:18px;border-top-right-radius:25px;font-weight:900}
.price-card h3{color:var(--navy);font-size:28px;margin:0}
.price{font-size:54px;color:var(--green);font-weight:900;margin:18px 0}
.price-card p{color:#526179;line-height:1.6}
.email{background:var(--navy);color:white}
.email h2{color:white}
.email p{color:#dbeafe}
form{display:flex;gap:12px;max-width:620px;margin:28px auto 0}
input{flex:1;border:0;border-radius:999px;padding:18px 22px;font-size:16px}
button{border:0;border-radius:999px;padding:18px 28px;background:var(--green);color:white;font-weight:900;font-size:16px}
footer{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:32px 5%;color:#526179}
footer strong{color:var(--navy)}
@media(max-width:980px){
  nav{display:none}
  .logo{width:220px}
  .hero{grid-template-columns:1fr;padding-top:46px}
  h1{font-size:50px}
  .sprout-card{min-height:auto}
  .trust,.steps,.grid,.preview-grid,.price-grid{grid-template-columns:1fr}
  .trust{margin:20px 5% 40px}
}
@media(max-width:520px){
  .header{padding:12px 4%}
  .logo{width:175px;max-height:80px}
  .nav-btn{display:none}
  h1{font-size:40px}
  .lead{font-size:18px}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  form{flex-direction:column}
}