:root {
  --p : #09d487;--pd : #069b65;--dark : #0b1020;--mid : #151b2d;--body : #1a1a1a;--muted : #616976;--line : #e1e8e5;--off : #f5f9f7;--white : #fff;--red : #dc2626;--r : 20px;--shadow : 0 20px 55px rgba(6, 70, 48, .12)
}
* {
  box-sizing : border-box
}
html {
  scroll-behavior : smooth
}
body {
  margin : 0;
  font-family : Poppins, sans-serif;
  color : var(--body)
}
p, li {
  font-size : 18px;
  line-height : 1.8
}
h1, h2, h3 {
  line-height : 1.15;
  margin-top : 0
}
h1 {
  font-size : clamp(42px, 6vw, 52px);
  letter-spacing : -2.5px
}
h2 {
  font-size : clamp(34px, 4vw, 48px);
  letter-spacing : -1.5px
}
h3 {
  font-size : 22px
}
img {
  width : 100%;
  display : block
}
.container {
  max-width : 1280px;
  margin : auto;
  padding : 0 24px
}
.section {
  padding : 96px 0
}
.center {
  text-align : center
}
.lead {
  max-width : 800px;
  margin : 14px auto;
  color : var(--muted)
}
.tag {
  display : inline-block;
  background : #e5fff4;
  color : #087a53;
  border-radius : 99px;
  padding : 8px 13px;
  font-size : 12px;
  font-weight : 800;
  text-transform : uppercase;
  letter-spacing : .08em
}
.btn {
  display : inline-flex;
  justify-content : center;
  align-items : center;
  padding : 15px 25px;
  border-radius : 99px;
  text-decoration : none;
  font-weight : 800
}
.primary {
  background : var(--p);
  color : #04140d
}
.darkbtn {
  background : var(--dark);
  color : #fff
}
.announcement {
  background : var(--p);
  text-align : center;
  padding : 8px;
  font-size : 13px;
  font-weight : 800
}
.navwrap {
  position : sticky;
  top : 0;
  z-index : 20;
  background : rgba(11, 16, 32, .95);
  backdrop-filter : blur(15px)
}
nav {
  height : 70px;
  display : flex;
  align-items : center;
  gap : 28px
}
.logo {
  font-size : 24px;
  font-weight : 900;
  color : #fff;
  text-decoration : none;
  white-space : nowrap;
  flex-shrink : 0
}
.logo span {
  color : var(--p)
}
.links {
  display : flex;
  justify-content : center;
  gap : 22px;
  flex : 1
}
.links a {
  color : #e4ece9;
  text-decoration : none;
  font-size : 14px;
  font-weight : 600
}
.hamb {
  display : none;
  margin-left : auto;
  background : none;
  border : 0;
  color : #fff;
  font-size : 27px
}
.hero {
  background : radial-gradient(circle at 75% 45%, rgba(9, 212, 135, .2), transparent 30%), linear-gradient(135deg, #080c16, #131c30);
  padding : 84px 0
}
.hero-grid, .split {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 60px;
  align-items : center
}
.hero h1 {
  color : #fff;
  margin : 16px 0
}
.hero h1 span {
  color : var(--p)
}
.hero .sub {
  color : #dce5e2;
  font-size : 20px
}
.pain {
  list-style : none;
  padding : 0
}
.pain li {
  color : #edf3f1;
  font-size : 16px;
  margin : 7px 0
}
.pain b {
  color : #ff7272;
  margin-right : 10px
}
.trust {
  display : flex;
  flex-wrap : wrap;
  gap : 8px;
  margin-top : 20px
}
.trust span {
  color : #dce5e2;
  border : 1px solid rgba(255, 255, 255, .13);
  padding : 8px 11px;
  border-radius : 99px;
  font-size : 11px
}
.video {
  border-radius : 28px;
  overflow : hidden;
  border : 1px solid rgba(255, 255, 255, .15);
  box-shadow : var(--shadow);
  background : #000
}
.video video {
  width : 100%;
  display : block;
  aspect-ratio : 16/10;
  object-fit : cover
}
.stats {
  border-bottom : 1px solid var(--line)
}
.statgrid {
  display : grid;
  grid-template-columns : repeat(4, 1fr)
}
.stat {
  text-align : center;
  padding : 26px;
  border-right : 1px solid var(--line)
}
  .stat : last-child {
  border : 0
}
.stat strong {
  display : block;
  color : #087a53;
  font-size : 30px
}
.stat span {
  font-size : 12px;
  color : var(--muted)
}
.grid3 {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 20px;
  margin-top : 42px
}
.card {
  border : 1px solid var(--line);
  border-radius : var(--r);
  overflow : hidden;
  background : #fff;
  box-shadow : var(--shadow)
}
.card img {
  height : 230px;
  object-fit : cover
}
.copy {
  padding : 23px
}
.copy p, .small {
  font-size : 15px
}
.visual {
  border-radius : 28px;
  overflow : hidden;
  background : #edf4f1;
  box-shadow : var(--shadow)
}
.visual img {
  min-height : 450px;
  object-fit : cover
}
.checks {
  list-style : none;
  padding : 0
}
.checks li {
  padding-left : 32px;
  position : relative;
  margin : 8px 0
}
  .checks li : before {
  content : "✓";
  position : absolute;
  left : 0;
  color : #087a53;
  font-weight : 900
}
.mechanism, .people, .guarantee, .final {
  background : var(--dark);
  color : #fff
}
.mechanism h2, .mechanism h3, .people h2, .guarantee h2, .final h2 {
  color : #fff
}
.mechanism p, .people p, .guarantee p, .final p {
  color : #dce5e2
}
.flow {
  display : grid;
  gap : 12px
}
.flow div {
  padding : 17px;
  border : 1px solid rgba(255, 255, 255, .12);
  border-radius : 15px;
  background : rgba(255, 255, 255, .04)
}
.flow b {
  color : var(--p)
}
.steps {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 20px;
  margin-top : 40px
}
.step {
  border : 1px solid var(--line);
  border-radius : 20px;
  overflow : hidden
}
.step img {
  height : 250px;
  object-fit : cover
}
.step div {
  padding : 22px
}
.num {
  display : grid;
  place-items : center;
  width : 36px;
  height : 36px;
  border-radius : 50%;
  background : var(--p);
  font-weight : 900;
  margin-bottom : 12px
}
.app {
  background : #f0f7f4
}
.modes {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 10px
}
.mode {
  padding : 14px;
  background : #fff;
  border : 1px solid var(--line);
  border-radius : 13px;
  font-weight : 700;
  font-size : 14px
}
.tablewrap {
  overflow-x : auto;
  border : 1px solid var(--line);
  border-radius : 20px;
  margin-top : 38px
}
table {
  border-collapse : collapse;
  width : 100%;
  min-width : 850px
}
th, td {
  padding : 15px;
  border-bottom : 1px solid var(--line);
  text-align : center;
  font-size : 13px
}
th {
  background : var(--dark);
  color : #fff
}
  th : first-child, td : first-child {
  text-align : left;
  font-weight : 700
}
.yes {
  color : #087a53;
  font-weight : 800
}
.no {
  color : #b91c1c
}
.quotes, .experts, .results, .included {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 18px;
  margin-top : 40px
}
.quote {
  background : var(--mid);
  border : 1px solid rgba(255, 255, 255, .1);
  border-radius : 18px;
  padding : 22px
}
.quote p {
  font-size : 14px
}
.quote b {
  display : block
}
.quote small {
  color : #a8b4b0
}
.expert, .result, .inc {
  border : 1px solid var(--line);
  border-radius : 18px;
  padding : 22px
}
.expert p {
  font-size : 14px
}
.expert small {
  color : var(--muted)
}
.results {
  grid-template-columns : repeat(6, 1fr)
}
.result {
  text-align : center;
  background : #f1fff8
}
.result strong {
  display : block;
  color : #087a53;
  font-size : 29px
}
.result span {
  font-size : 12px
}
.included {
  grid-template-columns : repeat(5, 1fr)
}
.inc b {
  display : block
}
.inc span {
  font-size : 12px;
  color : var(--muted)
}
.badge {
  width : 240px;
  height : 240px;
  border-radius : 50%;
  margin : auto;
  display : grid;
  place-items : center;
  text-align : center;
  background : radial-gradient(circle, #19e99c, #079b67);
  border : 10px solid rgba(255, 255, 255, .13)
}
.badge strong {
  font-size : 58px;
  display : block
}
.assure {
  display : grid;
  grid-template-columns : repeat(4, 1fr);
  gap : 10px;
  margin-top : 22px
}
.assure div {
  border : 1px solid rgba(255, 255, 255, .12);
  padding : 13px;
  border-radius : 12px;
  font-size : 12px
}
.offer {
  background : linear-gradient(135deg, #edfff7, #fff)
}
.offerbox {
  max-width : 900px;
  margin : 38px auto 0;
  display : grid;
  grid-template-columns : 1fr 1fr;
  border : 1px solid #cde7dc;
  border-radius : 28px;
  overflow : hidden;
  background : #fff;
  box-shadow : var(--shadow)
}
.offerimg {
  background : #e8fff4;
  padding : 30px;
  display : grid;
  place-items : center
}
.offercopy {
  padding : 38px
}
.old {
  text-decoration : line-through;
  color : #7c838d
}
.price {
  font-size : 55px;
  font-weight : 900
}
.save {
  display : inline-block;
  background : #dcfce7;
  color : #166534;
  padding : 6px 10px;
  border-radius : 99px;
  font-size : 12px;
  font-weight : 800
}
.full {
  width : 100%
}
.objections {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 18px;
  margin-top : 38px
}
.obj {
  border : 1px solid var(--line);
  border-radius : 18px;
  padding : 22px
}
.obj p {
  font-size : 14px
}
.faq {
  max-width : 900px;
  margin : 35px auto
}
.fi {
  border-bottom : 1px solid var(--line)
}
.fq {
  width : 100%;
  background : none;
  border : 0;
  text-align : left;
  padding : 19px 5px;
  font : 800 16px Poppins;
  display : flex;
  justify-content : space-between;
  cursor : pointer
}
.fa {
  display : none;
  padding : 0 5px 18px
}
.fa p {
  font-size : 14px;
  margin : 0
}
.fi.open .fa {
  display : block
}
.final {
  text-align : center
}
.final p {
  max-width : 760px;
  margin : 0 auto 25px
}
.actions {
  display : flex;
  justify-content : center;
  gap : 10px;
  flex-wrap : wrap
}
.outline {
  border : 1px solid rgba(255, 255, 255, .25);
  color : #fff
}
footer {
  background : #060910;
  color : #fff;
  padding : 60px 0 100px
}
.footergrid {
  display : grid;
  grid-template-columns : 1.2fr .8fr .8fr;
  gap : 45px
}
footer p, footer a {
  font-size : 12px;
  color : #aeb9b6;
  line-height : 1.7
}
footer a {
  display : block;
  text-decoration : none;
  margin : 7px 0
}
.legal {
  border-top : 1px solid rgba(255, 255, 255, .1);
  margin-top : 35px;
  padding-top : 22px
}
.sticky {
  position : fixed;
  bottom : 0;
  left : 0;
  right : 0;
  background : var(--dark);
  border-top : 2px solid var(--p);
  z-index : 30;
  transform : translateY(110%);
  transition : .2s
}
.sticky.show {
  transform : none
}
.stickyin {
  max-width : 1280px;
  margin : auto;
  padding : 9px 24px;
  display : flex;
  align-items : center;
  justify-content : space-between;
  color : #fff
}
.sticky small {
  display : block;
  color : #aab6b2
}
  @media(max-width : 960px) {
  .links, nav>.primary{display : none
}
.hamb {
  display : block
}
.hero-grid, .split, .offerbox {
  grid-template-columns : 1fr
}
.grid3, .quotes, .experts, .objections {
  grid-template-columns : repeat(2, 1fr)
}
.steps {
  grid-template-columns : 1fr
}
.results {
  grid-template-columns : repeat(3, 1fr)
}
.included {
  grid-template-columns : repeat(2, 1fr)
}
.hero-grid {
  gap : 30px
}
.statgrid {
  grid-template-columns : repeat(2, 1fr)
}
  }@media(max-width : 640px) {
  .container{padding : 0 18px
}
.section {
  padding : 70px 0
}
h1 {
  font-size : 42px
}
h2 {
  font-size : 34px
}
.hero {
  padding : 52px 0
}
.hero .sub {
  font-size : 17px
}
.grid3, .quotes, .experts, .objections, .results, .included {
  grid-template-columns : 1fr
}
.statgrid {
  grid-template-columns : 1fr
}
.stat {
  border-right : 0;
  border-bottom : 1px solid var(--line)
}
.modes, .assure {
  grid-template-columns : 1fr
}
.footergrid {
  grid-template-columns : 1fr
}
.price {
  font-size : 48px
}
.stickyin {
  font-size : 12px
}
.sticky small {
  display : none
}
}