:root{
  --bg:#FFFFFF;
  --bg-2:#F1FAF8;
  --card:#FFFFFF;
  --line:#E1EFED;
  --text:#0F1E22;
  --muted:#5B6E72;
  --teal:#2FD6BA;
  --blue:#2E7DF0;
  --grad: linear-gradient(135deg, #2FD6BA 0%, #2E7DF0 100%);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ font-family: var(--font); background: var(--bg); color: var(--text); line-height:1.55; }
a{ color:inherit; }
.wrap{ max-width: 940px; margin:0 auto; padding: 0 24px; }

header.hero{
  padding: 88px 0 76px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(700px 440px at 90% -10%, rgba(47,214,186,0.30), transparent 60%),
    radial-gradient(560px 380px at 10% 15%, rgba(47,214,186,0.18), transparent 65%),
    radial-gradient(520px 340px at -10% 100%, rgba(46,125,240,0.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(47,214,186,0.08) 0px, rgba(47,214,186,0.08) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(47,214,186,0.08) 0px, rgba(47,214,186,0.08) 1px, transparent 1px, transparent 40px),
    var(--bg-2);
}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700;
  color: #1D9E86;
  background: rgba(47,214,186,0.10);
  border: 1px solid rgba(47,214,186,0.30);
  padding: 7px 16px; border-radius: 999px;
  margin-bottom: 26px;
}
h1{
  font-weight:800;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height:1.12;
  letter-spacing:-0.02em;
  max-width: 700px;
  margin-bottom: 22px;
}
h1 .grad{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ font-size:17px; max-width: 540px; color: var(--muted); margin-bottom: 28px; }

.hero-perks{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-bottom: 32px;
}
.hero-perks .perk{
  display:flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700; color:#124D42;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(47,214,186,0.35);
  padding: 9px 16px; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.hero-perks .perk-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background: var(--grad); color:#fff; font-size:11px; font-weight:800;
  flex-shrink:0;
}
@media (max-width:640px){ .hero-perks{ gap:8px; } .hero-perks .perk{ font-size:13px; padding:8px 13px; } }
.cta-btn{
  display:inline-block;
  background: var(--grad);
  color: #04141C;
  font-weight:700;
  font-size:16px;
  padding:16px 34px;
  border-radius: 100px;
  text-decoration:none;
  box-shadow: 0 12px 28px rgba(46,125,240,0.20);
}
.cta-btn:hover{ filter: brightness(1.04); }

section.problem{ padding: 80px 0; }
.section-title{ font-size: 27px; font-weight:800; margin-bottom: 40px; text-align:center; letter-spacing:-0.01em;}
.pain-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pain-card{
  background: var(--card);
  border-radius: 16px;
  padding: 26px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(15,30,34,0.04);
}
.pain-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; padding: 4px 10px; border-radius:6px; margin-bottom: 12px;
}
.pain-tag.problem{ background: #F2F2F0; color:#7A7A72;}
.pain-tag.solution{ background: rgba(47,214,186,0.14); color: #1D9E86;}
.pain-card h3{ font-size:16px; margin-bottom:6px;}
.pain-card p{ font-size:14px; color: var(--muted); }
@media (max-width:640px){ .pain-grid{ grid-template-columns:1fr; } }

section.offer{ background: var(--bg-2); padding: 80px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.offer-box{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items:center;
  box-shadow: 0 8px 24px rgba(15,30,34,0.05);
}
.offer-box .name{ font-size:21px; font-weight:800; margin-bottom:18px;}
.terms-row{ display:flex; gap: 30px; flex-wrap:wrap; }
.term .val{ font-size:24px; font-weight:800; background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.term .label{ font-size:13px; color: var(--muted); max-width:150px; }
.offer-cta{
  background: var(--grad);
  color: #04141C;
  font-weight:700;
  padding:16px 30px;
  border-radius:100px;
  text-decoration:none;
  white-space:nowrap;
}
@media (max-width:640px){ .offer-box{ grid-template-columns:1fr; text-align:left;} }

section.stories{ padding: 80px 0; }
.stories-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.story-card{ background: var(--card); border-radius:16px; padding: 24px; border:1px solid var(--line); box-shadow: 0 4px 16px rgba(15,30,34,0.04);}
.story-quote{ font-size:14px; color:#2B3B3E; margin-bottom:14px; font-style:italic;}
.story-meta{ font-size:12px; color: var(--muted); font-weight:600;}
@media (max-width:780px){ .stories-grid{ grid-template-columns:1fr; } }

section.final{
  padding: 56px 0 72px; text-align:center;
  background: radial-gradient(600px 340px at 50% 0%, rgba(46,125,240,0.16), transparent 60%);
}
section.final h2{ font-size: 27px; font-weight:800; letter-spacing:-0.01em;}
.urgency-note{ font-size:15px; font-weight:600; color: #2B3B3E; max-width: 520px; margin: 28px auto 0; text-align:center; }

footer{ border-top:1px solid var(--line); color: #8B9BA0; font-size:12px; padding: 32px 0 48px; }
footer .wrap{ max-width: 720px; }
footer p{ margin-bottom:10px; }