@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --brand-red: #a80c0c;
  --brand-green: #14b866;
  --brand-green-dark: #0d8d4d;
  --brand-blue: #2c3fd6;
  --brand-purple: #5b259f;
  --brand-pink: #ff6fc4;
  --cyan: #b6f7fb;
  --cyan-soft: #e8fdff;
  --yellow: #ffd43b;
  --ink: #101828;
  --muted: #667085;
  --border: #e4e7ec;
  --paper: #ffffff;
  --shadow-soft: 0 12px 30px rgb(16 24 40 / 14%);
  --shadow-strong: 0 20px 48px rgb(16 24 40 / 22%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

img,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

.announcement {
  padding: 0.65rem 0.85rem;
  background: var(--brand-red);
  color: #fff;
  text-align: center;
}

.announcement p {
  margin: 0;
  font-size: clamp(0.95rem, 4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: uppercase;
}

.section {
  padding: 3.25rem 1rem;
  text-align: center;
}

.section--cyan {
  background: var(--cyan);
}

.container {
  width: min(100%, 68rem);
  margin-inline: auto;
}

.container--medium {
  width: min(100%, 54rem);
}

.eyebrow {
  margin-bottom: 0.65rem;
  color: var(--brand-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.eyebrow--light {
  color: #fff;
}

.section h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.7rem, 7.3vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
}

.hero {
  padding-top: 2.3rem;
  padding-bottom: 1.2rem;
  background:
    radial-gradient(circle at 15% 20%, rgb(255 111 196 / 16%), transparent 28%),
    radial-gradient(circle at 85% 10%, rgb(182 247 251 / 72%), transparent 32%),
    #fff;
}

.hero h1 {
  max-width: 50rem;
  margin: 0 auto 1rem;
  font-size: clamp(2rem, 9vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
}

.hero__lead {
  max-width: 49rem;
  margin: 0 auto;
  color: #344054;
  font-size: clamp(1rem, 4.15vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
}

.offer-overview {
  padding-top: 0.85rem;
  padding-bottom: 3rem;
}

.offer-overview__badge {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-bottom: -0.9rem;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  background: var(--brand-purple);
  box-shadow: 0 6px 0 #37126b;
  color: #fff;
  font-size: clamp(1rem, 4.5vw, 1.35rem);
  font-weight: 800;
  text-transform: uppercase;
}

.offer-overview__image {
  width: min(100%, 46rem);
  margin: 0 auto 1.25rem;
}

.cta {
  display: flex;
  min-height: 3.6rem;
  width: min(100%, 27rem);
  align-items: center;
  justify-content: center;
  margin: 1rem auto 0;
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 1rem;
  box-shadow: 0 10px 24px rgb(0 0 0 / 20%);
  color: #fff;
  font-size: clamp(0.92rem, 4.1vw, 1.15rem);
  line-height: 1.22;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.cta--primary,
.upgrade-modal__accept {
  background: var(--brand-green);
}

.cta--secondary {
  background: var(--brand-blue);
}

.cta:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgb(0 0 0 / 24%);
}

.cta:active {
  transform: translateY(1px);
}

.cta-note {
  margin: 0.75rem auto 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.split-layout {
  display: grid;
  gap: 1.6rem;
  align-items: center;
}

.split-layout__content {
  text-align: left;
}

.split-layout img {
  width: 100%;
  border-radius: 1.4rem;
  box-shadow: var(--shadow-soft);
}

.split-layout p:last-child {
  margin-bottom: 0;
}

.short-list,
.check-list {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.short-list li,
.check-list li {
  position: relative;
  padding-left: 1.7rem;
  text-align: left;
}

.short-list li::before,
.check-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--brand-green);
  content: "✓";
  font-weight: 800;
}

.short-list li + li,
.check-list li + li {
  margin-top: 0.55rem;
}

.solution {
  background: #fff9fd;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.65rem;
}

.benefits__grid article {
  min-width: 0;
  border: 1px solid rgb(44 63 214 / 12%);
  border-radius: 1rem;
  padding: 1rem 0.65rem;
  background: #fff;
  box-shadow: 0 6px 18px rgb(16 24 40 / 8%);
}

.benefits__grid article:last-child {
  grid-column: 1 / -1;
}

.benefits__grid span {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 1.75rem;
  line-height: 1;
}

.benefits__grid h3 {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.3;
}

.worlds__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.75rem;
}

.worlds__grid figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 20px rgb(16 24 40 / 12%);
}

.worlds__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.worlds__grid figcaption {
  padding: 0.65rem 0.35rem 0.75rem;
  color: var(--brand-purple);
  font-size: clamp(0.82rem, 3.5vw, 1rem);
  font-weight: 800;
}

.complete-kit .check-list--large {
  margin-top: 1.25rem;
}

.check-list--large li {
  font-size: 0.95rem;
  font-weight: 600;
}

.how-it-works {
  background: var(--cyan-soft);
}

.steps {
  display: grid;
  gap: 1rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  border-radius: 1.2rem;
  padding: 1.3rem;
  background: #fff;
  box-shadow: 0 8px 22px rgb(16 24 40 / 10%);
}

.steps span {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 auto 0.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
}

.steps h3 {
  margin-bottom: 0.35rem;
  font-size: 1.2rem;
}

.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.bonuses {
  background: linear-gradient(145deg, #6d28d9, #47209a);
  color: #fff;
}

.bonuses__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.75rem;
}

.bonuses__grid article {
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 35%);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 28px rgb(0 0 0 / 24%);
  color: var(--ink);
}

.bonuses__grid article > p {
  margin: 0;
  padding-top: 0.7rem;
  color: #f97316;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bonuses__grid h3 {
  min-height: 3.1rem;
  margin: 0;
  padding: 0.15rem 0.35rem 0.55rem;
  font-size: clamp(0.75rem, 3.1vw, 0.95rem);
  line-height: 1.25;
}

.bonuses__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.bonuses__note {
  max-width: 42rem;
  margin: 1.35rem auto 0;
  color: rgb(255 255 255 / 88%);
  font-size: 0.88rem;
}

.audience__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.audience__grid article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.9rem 0.65rem;
  background: #fff;
  box-shadow: 0 6px 18px rgb(16 24 40 / 7%);
}

.audience__grid article:last-child {
  grid-column: 1 / -1;
}

.audience__grid img {
  width: 4.5rem;
}

.audience__grid p {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.audience__text-card span {
  color: var(--brand-pink);
  font-size: 2rem;
  line-height: 1;
}

.demonstration__grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: center;
}

.demonstration__grid > img,
.video-frame {
  width: 100%;
  overflow: hidden;
  border-radius: 1.2rem;
  box-shadow: var(--shadow-soft);
}

.video-frame {
  aspect-ratio: 4 / 3;
  background: #1f2937;
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.testimonials__grid {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
  text-align: left;
}

.review {
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 5px 16px rgb(16 24 40 / 8%);
}

.review p {
  margin-bottom: 0;
  font-size: 0.88rem;
}

.review .stars {
  margin-bottom: 0.7rem;
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.review .review__author {
  margin-top: 0.75rem;
  color: var(--brand-purple);
  font-weight: 800;
}

.plans {
  scroll-margin-top: 1rem;
  background: linear-gradient(145deg, #4f2bb8, #2c3fd6 55%, #18abc4);
  color: #fff;
}

.plans__grid {
  display: grid;
  gap: 1.25rem;
  max-width: 58rem;
  margin: 1.8rem auto 0;
  align-items: stretch;
}

.plan {
  position: relative;
  min-width: 0;
  border-radius: 1.4rem;
  padding: 1.3rem 1rem;
  background: #fff;
  box-shadow: var(--shadow-strong);
  color: var(--ink);
}

.plan--complete {
  order: -1;
  border: 4px solid var(--yellow);
  padding-top: 2.2rem;
  transform: none;
}

.plan__badge {
  position: absolute;
  top: -1rem;
  left: 50%;
  margin: 0;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  background: var(--yellow);
  box-shadow: 0 5px 0 #d19900;
  color: #3d2500;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.plan h3 {
  margin-bottom: 0.35rem;
  color: var(--brand-purple);
  font-size: 1.55rem;
}

.plan__price {
  margin: 0;
  color: var(--brand-green-dark);
  font-size: clamp(2.65rem, 13vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

.plan__price span {
  font-size: 1.1rem;
  vertical-align: top;
}

.plan__payment {
  margin: 0.35rem 0 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.plan .check-list {
  margin: 0 auto;
}

.plan img {
  width: min(100%, 17rem);
  margin: 1rem auto 0;
  border-radius: 1rem;
}

.plan__comparison {
  margin: 1rem 0 0;
  border-radius: 0.8rem;
  padding: 0.8rem;
  background: #fff7cc;
  color: #5b3c00;
  font-size: 0.88rem;
  font-weight: 400;
  text-transform: none;
}

.main-offer {
  background: #fff9e8;
}

.main-offer h2 {
  color: var(--brand-purple);
}

.main-offer > .container > p:not(.eyebrow, .cta-note) {
  max-width: 42rem;
  margin-inline: auto;
}

.main-offer img {
  width: min(100%, 42rem);
  margin: 1.25rem auto 0;
}

.guarantee {
  padding: 3.25rem 1rem;
  background: linear-gradient(100deg, #3b2da6, #2f77c8 55%, #23aeb7);
  color: #fff;
  text-align: center;
}

.guarantee__content {
  display: grid;
  gap: 1rem;
  align-items: center;
}

.guarantee__image {
  width: 7.5rem;
  margin-inline: auto;
}

.guarantee h2 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.65rem, 6.5vw, 2.4rem);
  line-height: 1.15;
}

.guarantee p:last-child {
  max-width: 40rem;
  margin: 0 auto;
}

.faq__list {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.5rem;
  text-align: left;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  background: #fff;
}

.faq summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary span {
  flex: 0 0 auto;
  color: var(--brand-blue);
  font-size: 1.4rem;
  transition: transform 180ms ease;
}

.faq details[open] summary span {
  transform: rotate(45deg);
}

.faq details p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.final-cta {
  background:
    radial-gradient(circle at 10% 20%, rgb(255 255 255 / 18%), transparent 28%),
    linear-gradient(145deg, #ff6fc4, #7b3ddb);
  color: #fff;
}

.final-cta p:not(.cta-note) {
  max-width: 38rem;
  margin-inline: auto;
}

.final-cta .cta-note {
  color: rgb(255 255 255 / 90%);
}

html.modal-open {
  overflow: hidden;
}

.upgrade-modal {
  width: min(31rem, calc(100% - 1rem));
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  border: 0;
  border-radius: 1.4rem;
  padding: 0;
  background: #fff;
  box-shadow: 0 28px 70px rgb(0 0 0 / 35%);
  color: var(--ink);
}

.upgrade-modal::backdrop {
  background: rgb(10 15 30 / 72%);
  backdrop-filter: blur(4px);
}

.upgrade-modal__content {
  position: relative;
  padding: 2.3rem 1rem 1.3rem;
  text-align: center;
}

.upgrade-modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f2f4f7;
  color: var(--ink);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
}

.upgrade-modal__eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: #fff1c2;
  color: #8a5700;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.upgrade-modal h2 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.45rem, 7vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.upgrade-modal__lead {
  margin-bottom: 0.6rem;
}

.upgrade-modal__price-before {
  margin-bottom: -0.1rem;
  color: var(--brand-red);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: line-through;
}

.upgrade-modal__price {
  margin-bottom: 0;
  color: var(--brand-green-dark);
  font-size: clamp(2.8rem, 15vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
}

.upgrade-modal__payment {
  margin: 0.3rem 0 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.upgrade-modal__benefits {
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0;
  text-align: left;
  list-style: none;
}

.upgrade-modal__benefits li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.upgrade-modal__benefits li::before {
  position: absolute;
  left: 0;
  color: var(--brand-green);
  content: "✓";
  font-weight: 800;
}

.upgrade-modal__benefits li + li {
  margin-top: 0.25rem;
}

.upgrade-modal__accept {
  margin-top: 0;
  font-size: clamp(0.82rem, 3.8vw, 1rem);
}

.upgrade-modal__decline {
  display: inline-block;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.cta:focus-visible,
summary:focus-visible,
.upgrade-modal__close:focus-visible,
.upgrade-modal__decline:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

.purchase-note {
  position: fixed;
  right: 0.65rem;
  bottom: 0.65rem;
  left: 0.65rem;
  z-index: 10;
  display: flex;
  width: auto;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  box-shadow: 0 12px 28px rgb(16 24 40 / 18%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  visibility: hidden;
  transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms;
}

.purchase-note.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.purchase-note__dot {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 0.4rem rgb(20 184 102 / 18%);
}

.purchase-note p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

.purchase-note small {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
}

footer {
  padding: 1.2rem 1rem 3rem;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

footer p {
  margin: 0;
}

@media (min-width: 640px) {
  .section {
    padding: 4.5rem 1.5rem;
  }

  .offer-overview {
    padding-top: 1rem;
  }

  .split-layout,
  .demonstration__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
  }

  .split-layout--reverse .split-layout__content {
    order: 2;
  }

  .benefits__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .benefits__grid article:last-child {
    grid-column: auto;
  }

  .benefits__grid article:nth-last-child(2) {
    grid-column: 2 / 3;
  }

  .worlds__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .audience__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .audience__grid article:last-child {
    grid-column: 2 / 3;
  }

  .testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .plan--complete {
    order: initial;
    transform: scale(1.025);
  }

  .guarantee__content {
    grid-template-columns: 9rem 1fr;
    max-width: 50rem;
    text-align: left;
  }

  .guarantee p:last-child {
    margin-left: 0;
  }

  .purchase-note {
    right: auto;
    bottom: 1rem;
    left: 1rem;
    width: min(20rem, calc(100vw - 2rem));
  }
}

@media (min-width: 900px) {
  .bonuses__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .testimonials__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 359px) {
  .section {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }

  .benefits__grid,
  .worlds__grid,
  .bonuses__grid,
  .audience__grid {
    gap: 0.55rem;
  }

  .bonuses__grid h3 {
    font-size: 0.69rem;
  }

  .plan {
    padding-right: 0.8rem;
    padding-left: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}