/* UI */
.headline > *:nth-child(2) {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-2xs);
}


/* Hero Section */

section.hero {
  background-color: var(--surface-information);
  clip-path: inset(0 0 -100px 0);
  padding-top: var(--spacing-3xl);
}

@media (max-width: 1144px) {
  section.hero {
    padding-top: var(--spacing-6xl);
  }
}

@media (max-width: 767px) {
  section.hero {
    padding-top: var(--spacing-2xl);
  }
}


.hero__container {
  justify-content: space-between;
  gap: var(--spacing-2xl);
}


.hero__content {
  justify-content: flex-start;
  margin: auto 0;
  max-width: 620px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 1144px) {
  .hero__content {
    flex-shrink: 1;
  }
}

@media (max-width: 767px) {
  .hero__content {
    gap: var(--spacing-xs);
    max-width: none;
  }
}


section.hero .icon-list {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-5xl);
}

@media (max-width: 767px) {
    section.hero .icon-list {
    margin-bottom: var(--spacing-2xl);
  }
}


.hero__actions {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
}

@media (max-width: 767px) {
  .hero__actions {
    flex-direction: column;
    gap: 10px;
  }
}


@media (max-width: 767px) {
  .hero__actions .btn,
  .hero__actions button {
    width: 100%;
    text-align: center !important;
  }
}


.hero__visual {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 656px;
  overflow: visible;
}

@media (max-width: 1144px) {
  .hero__visual {
    align-self: center;
  }
}

.hero__visual span,
.hero__visual a {
  display: block;
  width: 100%;
}

.hero__visual img:not(.hero__visual-bg) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}


@media (max-width: 767px) {
  .hero__visual-bg {
    width: 140%;
  }
}


/* Solution Diagram Section */

section.solution-diagram {
  clip-path: inset(-100px 0 0 0);
}


.solution-diagram__container {
  justify-content: space-between;
  gap: var(--spacing-2xl);
}

@media (max-width: 1144px) {
  .solution-diagram__container {
    flex-direction: column-reverse;
  }
}

@media (max-width: 767px) {
  .solution-diagram__container {
    gap: var(--spacing-xl);
  }
}


.solution-diagram__content {
  flex: 1;
  justify-content: center;
  gap: var(--spacing-2xs);
  position: relative;
  z-index: 1;
}


.solution-diagram__visual {
  position: relative;
  flex: 1;
  overflow: visible;
  max-width: 620px;
  padding: var(--spacing-2xl);
}

@media (max-width: 1144px) {
  .solution-diagram__visual {
    align-self: center;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .solution-diagram__visual {
    padding: 0;
  }
}


.solution-diagram img:not(.solution-diagram__visual-bg) {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}


@media (max-width: 767px) {
  .solution-diagram__visual-bg {
    width: 140%;
  }
}


/* Advantage Cards */

section.advantage-cards {
  background-color: var(--surface-primary);
  border-top-left-radius: var(--desktop-section-border-radius);
  border-bottom-right-radius: var(--desktop-section-border-radius);
}

@media (max-width: 767px) {
  section.advantage-cards {
    border-top-left-radius: var(--mobile-section-border-radius);
    border-bottom-right-radius: var(--mobile-section-border-radius);
  }
}


.advantage-cards__container {
  gap: var(--spacing-5xl);
}

@media (max-width: 767px) {
  .advantage-cards__container {
    gap: var(--spacing-xl);
  }
}


.advantage-cards__text {
  align-items: center;
}


.advantage-cards__subtitle {
  width: 800px;
}

@media (max-width: 1144px) {
  .advantage-cards__subtitle {
    width: 100%;
  }
}


/* Timeline Section */

section.timeline {
  background-color: var(--surface-page);
  border-top-right-radius: var(--desktop-section-border-radius);
  border-bottom-left-radius: var(--desktop-section-border-radius);
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  section.timeline {
    border-top-right-radius: var(--mobile-section-border-radius);
    border-bottom-left-radius: var(--mobile-section-border-radius);
  }
}


.timeline__container {
  margin: 130px 0;
  gap: var(--spacing-6xl);
  position: relative;
  z-index: 1;
}

@media (max-width: 1144px) {
  .timeline__container {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .timeline__container {
    gap: var(--spacing-xl);
  }
}


.timeline__bg {
  max-width: 100%;
}


/* Features Section */

section.features {
  overflow: hidden;
  height: 760px;
  display: flex;
  align-items: center;
}

@media (max-width: 1144px) {
  section.features {
    height: auto;
  }
}


.features__container {
  justify-content: space-between;
  gap: var(--spacing-2xl);
  overflow: visible;
  margin: auto 0;
}

@media (max-width: 767px) {
  .features__container {
    gap: var(--spacing-xl);
  }
}


.features__content {
  justify-content: center;
  gap: var(--spacing-3xl);
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .features__content {
    display: contents;
  }
}

.features__content,
.features__visual {
  flex: 1; 
  min-width: 0;
}


.features__text {
  gap: var(--spacing-2xs);
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .features__text {
    order: 1;
  }
}


.features__visual {
  margin: auto 0;
  overflow: visible;
  position: relative;
}

@media (max-width: 1144px) {
  .features__visual {
    align-self: center;
  }
}

@media (max-width: 767px) {
  .features__visual {
    order: 2;
  }
}


.features__visual img:not(.features__visual-bg) {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}


@media (max-width: 1144px) {
  .features__visual-bg {
    width: 150%;
  }
}


section.features .card-grid {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  section.features .card-grid {
    order: 3;
  }
}


/* Experience Section */

section.experience {
  background-color: var(--surface-primary);
  border-top-left-radius: var(--desktop-section-border-radius);
  border-bottom-right-radius: var(--desktop-section-border-radius);
  overflow: hidden;
  max-height: 480px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1144px) {
  section.experience {
    max-height: none;
  }
}

@media (max-width: 767px) {
  section.experience {
    border-top-left-radius: var(--mobile-section-border-radius);
    border-bottom-right-radius: var(--mobile-section-border-radius);
  }
}


.experience__container {
  gap: var(--spacing-5xl);
  position: relative;
  z-index: 1;
}

@media (max-width: 1144px) {
  .experience__container {
    gap: 0;
  }
}


.experience__visual {
  --visual-max-width: 392px;
  --visual-headroom: 42px;
  flex: 0 3 var(--visual-max-width);
  max-width: var(--visual-max-width);
  min-width: 352px;
  align-items: center;
  transform: translateY(calc( var(--visual-headroom) * -1));
}

@media (max-width: 1144px) {
  .experience__visual {
    align-self: center;
    order: 2;
    clip-path: inset(0 -10% 0 -10%);
    max-height: calc(400px + var(--visual-headroom));
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
    transform: none;
  }
}

@media (max-width: 767px) {
  .experience__visual {
    max-height: calc(348px + var(--visual-headroom));
    width: 100%;
    min-width: 0;
    margin-top: var(--spacing-4xl);
  }
}


.experience__visual > * {
  width: 124%;
}


.experience__visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}


.experience__content {
  gap: var(--spacing-2xl);
  flex: 1 1 800px;
  min-width: 0;
}

@media (max-width: 1144px) {
  .experience__content {
    display: contents;
  }
}


.experience__text-content {
  padding-top: var(--spacing-xl);
  gap: var(--spacing-2xs);
}

@media (max-width: 1144px) {
  .experience__text-content {
    order: 1;
    padding-top: 0;
  }
}


@media (max-width: 1144px) {
  section.experience .card-grid {
    order: 3;
  }
}


/* Benefits Section */

section.benefits {
  background-color: var(--surface-page);
  position: relative;
  clip-path: inset(-100px 0 0 0);
}

section.benefits::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--desktop-section-border-radius));
  left: 0;
  right: 0;
  height: var(--desktop-section-border-radius);
  background-color: var(--surface-page);
}

@media (max-width: 767px) {
  section.benefits::before {
    top: calc(-1 * var(--mobile-section-border-radius));
    height: var(--mobile-section-border-radius);
  }
}


.benefits__bg {
  max-width: 100%;
}


.benefits__container {
  gap: var(--spacing-5xl);
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .benefits__container {
    gap: var(--spacing-xl);
  }
}


/* Ideal Purchase Section */

section.ideal-purchase {
  background-color: var(--surface-primary);
  position: relative;
  overflow: hidden;
}


.ideal-purchase__bg {
  left: 68%;
}

@media (max-width: 1144px) {
  .ideal-purchase__bg {
    left: 50%;
    width: 170%;
  }
}


.ideal-purchase__container {
  gap: var(--spacing-4xl);
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .ideal-purchase__container {
    gap: var(--spacing-xl);
  }
}


.ideal-purchase__content {
  gap: var(--spacing-2xs);
}


@media (max-width: 767px) {
  .ideal-purchase .ideal-purchase__content .themed-text-block {
    text-align: center !important;
  }
}


.ideal-purchase__actions {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
  margin: auto 0;
}

@media (max-width: 1144px) {
  .ideal-purchase__actions {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    width: fit-content;
    align-self: center;
  }

  .ideal-purchase__actions > :last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .ideal-purchase__actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-self: auto;
    width: auto;
  }
}


@media (max-width: 767px) {
  .ideal-purchase__actions .btn,
  .ideal-purchase__actions button {
    text-align: center !important;
    width: 100%;
  }
}


/* Contact Us Section */

section.contact-us {
  position: relative;
  overflow: hidden;
}


.contact-us__container {
  gap: 136px;
  position: relative;
  z-index: 1;|
}

@media (max-width: 1144px) {
  .contact-us__container {
    gap: var(--spacing-6xl);
  }
}

@media (max-width: 767px) {
  .contact-us__container {
    gap: var(--spacing-xl);
  }
}


.contact-us__content {
  margin: auto 0;
}


.contact-us__form {
  max-width: 528px;
  width: 100%;
}

@media (max-width: 1144px) {
  .contact-us__form {
    max-width: none;
  }
}