/* #region Settings */
:root {
  --dark-100: 7 18 29; /* #07121D */
  --dark-80: 56 65 74; /* #38414A */
  --dark-60: 106 113 119; /* #6A7177 */
  --dark-40: 156 160 164; /* #9CA0A4 */
  --dark-10: 230 231 232; /* #E6E7E8 */
  --brand-100: 0 167 122; /* #00A77A */
  --brand-80: 51 185 148; /* #33B994 */
  --brand-40: 166 201 202; /* #A6C9CA */
  --brand-20: 204 237 228; /* #CCEDE4 */
  --brand-10: 229 246 242; /* #E5F6F2 */
  --brand-05: 242 251 248; /* #F2FBF8 */
  --blue-100: 0 158 232; /* #009EE8 */
  --button-active: 0 151 110; /* #00976E */
  --gray-sm: 165 163 174; /* #A5A3AE */
  --gray-card: 75 70 92; /* #4B465C */
  --gray-shadow: 212 197 160; /* #D4C5A0 */
  --general-white: 255 255 255; /* #FFFFFF */
  --general-black: 0 0 0; /* #000000 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 36px;
  --s-10: 40px;
  --s-11: 44px;
  --s-12: 48px;
  --s-15: 60px;
  --s-20: 80px;
  --s-30: 120px;
  --s-37: 148px;
  --container-width: 1440px;
  --container-h-padding: var(--s-6);
  --container-v-padding: var(--s-7);
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-5: 20px;
  --radius-6: 24px;
  --radius-9: 36px;
  --animation-duration: 0.4s;
  --header-height: 64px;
}

@media (width >= 768px) {
  :root {
    --container-h-padding: var(--s-10);
    --header-height: 116px;
  }
}

@media (width >= 1024px) {
  :root {
    --container-h-padding: var(--s-15);
    --container-v-padding: var(--s-15);
    --header-height: 78px;
  }
}

@media (width >= 1280px) {
  :root {
    --container-h-padding: var(--s-20);
  }
}
/* #endregion */

/* #region Global */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  color: var(--dark-100);
  background-color: var(--general-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
}

svg {
  display: block;
}

figure {
  margin: 0;
}

q::before,
q::after {
  content: none;
}
/* #endregion */

/* #region Utilities */
.section-container {
  padding: var(--container-v-padding) var(--container-h-padding);
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

.u_h1 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
}

.u_h2 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.32;
}

.u_h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.32;
}

.u_h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.32;
}

.u_h5 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
}

.u_h6 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.32;
}

.u_body-1r {
  font-size: 18px;
  line-height: 1.42;
}

.u_body-1sb {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.42;
}

.u_body-2r {
  font-size: 14px;
  line-height: 1.42;
}

.u_body-2sb {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.42;
}

.u_body-3r {
  font-size: 12px;
  line-height: 1.34;
}

.u_body-3sb {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.34;
}

.u_ui-text-m-sb {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.238px;
}

.u_ui-text-s-r {
  font-size: 12px;
  line-height: 1.32;
  letter-spacing: -0.204px;
}

.u_ui-text-s-sb {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.204px;
}

.u_text-dark-100 {
  color: rgb(var(--dark-100));
}

.u_text-dark-80 {
  color: rgb(var(--dark-80));
}

.u_text-dark-60 {
  color: rgb(var(--dark-60));
}

.u_text-dark-40 {
  color: rgb(var(--dark-40));
}

.u_text-brand-100 {
  color: rgb(var(--brand-100));
}

@media (width >= 375px) {
  .u_h1 {
    font-size: 54px;
  }

  .u_h2 {
    font-size: 32px;
  }

  .u_h3 {
    font-size: 28px;
  }

  .u_h4 {
    font-size: 24px;
  }

  .u_h5 {
    font-size: 20px;
  }

  .u_h6 {
    font-size: 16px;
  }

  .u_body-1r {
    font-size: 20px;
  }

  .u_body-2r {
    font-size: 20px;
  }

  .u_body-2r {
    font-size: 16px;
  }

  .u_body-2sb {
    font-size: 16px;
  }

  .u_body-3r {
    font-size: 13px;
  }

  .u_body-3sb {
    font-size: 13px;
  }
}

@media (width >= 768px) {
  .u_h1 {
    font-size: 60px;
  }

  .u_h2 {
    font-size: 44px;
  }

  .u_h3 {
    font-size: 32px;
  }

  .u_h4 {
    font-size: 22px;
    line-height: 1.4;
  }

  .u_h5 {
    font-size: 16px;
    line-height: 1.42;
  }

  .u_h6 {
    font-size: 14px;
  }

  .u_body-1r {
    font-size: 18px;
  }

  .u_body-1sb {
    font-size: 18px;
  }

  .u_body-2r {
    font-size: 15px;
  }

  .u_body-2sb {
    font-size: 15px;
  }

  .u_body-3r {
    line-height: 1.42;
  }

  .u_body-3sb {
    line-height: 1.42;
  }
}

@media (width >= 1024px) {
  .u_h1 {
    font-size: 80px;
  }

  .u_h2 {
    font-size: 48px;
  }

  .u_h3 {
    font-size: 36px;
  }

  .u_h4 {
    font-size: 26px;
  }

  .u_body-1r {
    font-size: 20px;
  }

  .u_body-1sb {
    font-size: 20px;
  }

  .u_body-2r {
    font-size: 16px;
  }

  .u_body-2sb {
    font-size: 16px;
  }

  .u_body-3r {
    font-size: 14px;
  }

  .u_body-3sb {
    font-size: 14px;
  }
}

@media (width >= 1280px) {
  .u_h3 {
    font-size: 34px;
  }

  .u_h5 {
    font-size: 20px;
  }

  .u_body-1r {
    font-size: 24px;
  }

  .u_body-1sb {
    font-size: 24px;
  }

  .u_body-2r {
    font-size: 20px;
  }

  .u_body-2sb {
    font-size: 20px;
  }

  .u_body-3r {
    font-size: 16px;
  }

  .u_body-3sb {
    font-size: 16px;
  }

  .u_ui-text-m-sb {
    font-size: 17px;
  }

  .u_ui-text-s-r {
    font-size: 14px;
  }

  .u_ui-text-s-sb {
    font-size: 14px;
  }
}
/* #endregion */

/* #region Button */
.btn {
  display: block;
  padding: 10px 20px;
  border-radius: var(--radius-2);
  box-shadow: 0px 2px 4px 0px rgb(var(--gray-sm) / 0.3);

  /* u_ui-text-m-sb */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.238px;
}

.btn__brand {
  color: rgb(var(--general-white));
  background: rgb(var(--brand-100));
}

.btn__brand:hover {
  background: rgb(var(--brand-80));
}

.btn__brand:active {
  background: rgb(var(--button-active));
}

@media (width >= 1024px) {
  .btn {
    padding: 13px 26px;
  }
}

@media (width >= 1280px) {
  .btn {
    font-size: 14px;
  }
}
/* #endregion */

/* #region Badge */
.badge {
  padding: 5px 10px;
  border-radius: var(--radius-1);

  /* u_ui-text-s-sb */
  font-size: 12px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.204px;
}

.badge__brand {
  background: rgb(var(--brand-20));
  color: rgb(var(--brand-100));
}

.badge__blue {
  color: rgb(var(--blue-100));
  background-color: rgb(var(--blue-100) / 0.15);
}

.badge__gray {
  color: rgb(var(--dark-60));
  background-color: rgb(var(--dark-10));
}

@media (width >= 1280px) {
  .primary-badge {
    font-size: 17px;
  }
}
/* #endregion */

/* #region Card */
.card {
  background-color: rgb(var(--brand-05));
  box-shadow: 0px 0px 40px 0px rgb(var(--brand-10)) inset;
  border-radius: var(--radius-6);
}

@media (width >= 1024px) {
  .card {
    border-radius: var(--radius-9);
  }
}
/* #endregion */

/* #region Header */
:target {
  scroll-margin-top: var(--header-height);
}

.header_container {
  position: sticky;
  margin: var(--s-5) auto;
  padding: 0 var(--s-6);
  padding: 0 var(--container-h-padding);
  max-width: var(--container-width);
  top: 0;
  z-index: 10;
}

.header {
  position: relative;
  margin: 0 calc(-1 * var(--s-3));
  height: var(--header-height);
  padding: 0 var(--s-3);
  display: flex;
  align-items: center;
  border-radius: var(--radius-5);
  background-color: rgb(var(--general-white) / 0.98);
}

.header_burger {
  margin-left: auto;
  padding: var(--s-1);
  background-color: rgb(var(--brand-10));
  color: rgb(var(--brand-100));
  border-radius: var(--radius-1);
}

.navigation_container {
  position: fixed;
  z-index: -1;
  inset: 0;
  padding: var(--s-37) var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--s-12);
  background-color: rgb(var(--general-white));
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all var(--animation-duration) ease-in-out;
}

.navigation_container__open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.navigation {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--s-6);
}

.navigation_link:hover {
  color: rgb(var(--brand-80));
}

.navigation_link:active {
  color: rgb(var(--brand-100));
}

@media (width >= 768px) {
  .header_container {
    margin-top: 0;
    margin-bottom: 0;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-2);
    padding: 0 var(--s-5);
    margin: 0 calc(-1 * var(--s-5));
    border-radius: var(--radius-5);
  }

  .header_burger {
    display: none;
  }

  .navigation_container,
  .navigation_container__open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .navigation_container {
    z-index: 0;
    position: static;
    padding: 0;
    align-self: stretch;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    transition: none;
  }

  .navigation {
    flex-direction: row;
    gap: var(--s-5);
  }

  .navigation_cta {
    margin-left: auto;
  }
}

@media (width >= 1024px) {
  .header_container {
    margin-top: var(--s-5);
    margin-bottom: var(--s-5);
  }

  .header {
    flex-direction: row;
    align-items: center;
  }

  .navigation_container {
    flex: 1;
  }

  .navigation {
    margin-left: auto;
  }
}
/* #endregion */

/* #region Hero */
.home-hero_container {
  padding: 0 var(--container-h-padding) var(--container-v-padding);
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-hero_title {
  margin-top: var(--s-10);
  padding: 0 var(--s-10);
  text-align: center;
}

.home-hero_text {
  margin-top: var(--s-3);
  padding: 0 var(--s-10);
  text-align: center;
}

.home-hero_cta {
  margin-top: var(--s-6);
}

.home-hero_images {
  height: auto;
  margin-top: var(--s-5);
  align-self: stretch;
  padding: var(--s-5);
  display: flex;
  align-items: stretch;
  gap: var(--s-5);
}

.home-hero_img {
  border-radius: var(--radius-1);
  box-shadow: 0px 54px 100px 0px rgb(var(--general-black) / 0.05),
    0px 24px 250px 0px rgb(var(--gray-shadow) / 0.1),
    0px 4px 24px 0px rgb(var(--general-black) / 0.03),
    0px 0px 4px 0px rgb(var(--general-black) / 0.1);
}

.home-hero_img__panel {
  width: calc((100% - var(--s-5)) * 3 / 4);
}

.home-hero_img__mobile {
  width: calc((100% - var(--s-5)) / 4);
}

@media (width >= 768px) {
  .home-hero_img {
    border-radius: var(--radius-3);
  }
}

@media (width >= 1024px) {
  .home-hero_container {
    padding-bottom: var(--s-5);
  }

  .home-hero_title {
    margin-top: var(--s-20);
    padding: 0;
    max-width: 916px;
  }

  .home-hero_text {
    padding: 0;
    max-width: 408px;
  }

  .home-hero_cta {
    margin-top: var(--s-9);
  }

  .home-hero_images {
    margin-top: var(--s-15);
    padding: var(--s-7);
    gap: var(--s-7);
  }

  .home-hero_img__panel {
    width: calc((100% - var(--s-7)) * 3 / 4);
  }

  .home-hero_img__mobile {
    width: calc((100% - var(--s-7)) / 4);
  }
}
/* #endregion */

/* #region Features */
.home-features {
  display: flex;
  flex-direction: column;
}

.home-features_title {
  align-self: flex-start;
}

.home-features_subtitle {
  margin-top: var(--s-4);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid rgb(var(--brand-40));
}

.home-features_list {
  margin-top: var(--s-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9) 0;
}

.home-features_integration-logo {
  margin-top: var(--s-3);
}

.feature {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--s-4);
}

.feature_icon {
  flex-shrink: 0;
}

.feature_description {
  margin-top: var(--s-3);
}

.csi_certified {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 36px;
}

.csi_certified img {
  margin-top: 12px;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgb(var(--dark-10)); 
}

@media (width >= 375px) {
  .feature_icon {
    width: 100px;
    height: 100px;
  }
}

@media (width >= 768px) {
  .home-features_list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 var(--s-6);
  }

  .feature {
    flex-direction: column;
  }

  .feature_description {
    margin-top: var(--s-4);
  }

  .home-features_integration-logo {
    width: 319px;
    height: auto;
  }

  .csi_certified {
    margin-top: 60px;
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }

  .csi_certified img {
    max-width: 227px;
    margin-top: 0px;
  }
}

@media (width >= 1024px) {
  .home-features_list {
    gap: 0 var(--s-9);
  }

  .csi_certified img {
    max-width: 320px;
  }
}
/* #endregion */

/* #region Process */
.home-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-7);
}

.home-process_title {
  margin-top: var(--s-3);
}

.home-process_steps {
  margin-top: var(--s-11);
  margin-bottom: var(--s-5);
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  text-align: center;
}

.process-step_badges {
  display: flex;
  gap: var(--s-1);
}

@media (width >= 768px) {
  .home-process {
    padding: var(--s-7) var(--s-10);
  }

  .home-process_steps {
    gap: 0;
  }

  .process-step {
    max-width: 360px;
  }

  .process-step:nth-child(2n) {
    align-self: flex-end;
  }

  .process-step_badges {
    margin-top: var(--s-3);
  }
}

@media (width >= 1024px) {
  .home-process {
    padding: var(--s-20) var(--s-10);
  }

  .home-process_title {
    margin-top: var(--s-5);
  }

  .home-process_steps {
    margin-top: var(--s-15);
  }

  .process-step + .process-step {
    margin-top: calc(-1 * var(--s-10));
  }
}
/* #endregion */

/* #region Testimonials */
.home-testimonials {
  display: flex;
  flex-direction: column;
}

.home-testimonials_title {
  align-self: flex-start;
}

.home-testimonials_subtitle {
  margin-top: var(--s-4);
}

.home-testimonials_description {
  margin-top: var(--s-2);
}

.home-testimonials_list {
  margin-top: var(--s-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7) 0;
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--radius-2);
  box-shadow: 0px 4px 18px 0px rgb(var(--gray-card) / 0.1);
}

.testimonial_stars {
  display: flex;
  gap: 2px;
}

.testimonial_author {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.testimonial_avatar {
  width: var(--s-8);
  height: var(--s-8);
  border-radius: 100%;
}

.testimonial_avatar__c4g {
  border: 3px solid #73a54c;
}

.testimonial_avatar__carboneers {
  border: 3px solid #ff9f43;
}

.testimonial_avatar__biocharlife {
  border: 3px solid #c5ac98;
}

.testimonial__cta {
  background-color: rgb(var(--brand-10));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

@media (width >= 768px) {
  .home-testimonials_description {
    margin-top: 0;
  }

  .home-testimonials_list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-7) var(--s-6);
    align-items: start;
  }

  .testimonial:not(.testimonial__cta):nth-child(-n + 2) {
    order: 1;
  }

  .testimonial:not(.testimonial__cta):nth-child(n + 3) {
    order: 3;
  }

  .testimonial__cta {
    order: 2;
  }
}

@media (width >= 1024px) {
  .home-testimonials_list {
    gap: var(--s-7);
  }
}

@media (width >= 1280px) {
  .home-testimonials_list {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* #endregion */

/* #region Benefits and Offerings */
.home-benefits {
  display: flex;
  flex-direction: column;
}

.home-benefits_title {
  align-self: flex-start;
}

.home-benefits_subtitle {
  margin-top: var(--s-2);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgb(var(--brand-40));
}

.home-benefits_list {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) 0;
}

.benefit {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--s-4);
}

.benefit_icon {
  flex-shrink: 0;
}

.benefit_description {
  margin-top: var(--s-2);
}

.home-offerings {
  margin-top: var(--s-10);
}

.home-offerings_title {
  padding-bottom: var(--s-10);
  border-bottom: 1px solid rgb(var(--brand-40));
}

.home-offerings_list {
  margin-top: var(--s-10);
}

.offering {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.offering + .offering {
  margin-top: var(--s-6);
}

.offering_icon {
  flex-shrink: 0;
}

@media (width >= 375px) {
  .home-benefits_subtitle {
    padding-bottom: var(--s-6);
  }

  .home-benefits_list {
    margin-top: var(--s-6);
  }

  .benefit_description {
    margin-top: var(--s-3);
  }
}

@media (width >= 768px) {
  .home-benefits_subtitle {
    margin-top: var(--s-4);
    padding-bottom: var(--s-10);
  }

  .home-benefits_list {
    margin-top: var(--s-10);
    grid-template-columns: repeat(4, 1fr);
    gap: 0 var(--s-6);
  }

  .benefit {
    flex-direction: column;
    justify-content: flex-start;
  }

  .benefit_description {
    margin-top: var(--s-4);
  }

  .home-offerings {
    margin-top: var(--s-20);
  }

  .home-offerings_list {
    columns: 2;
    column-gap: var(--s-15);
  }

  .offering {
    break-inside: avoid;
  }

  .offering + .offering {
    margin-top: var(--s-7);
  }
}

@media (width >= 1024px) {
  .home-benefits_list {
    gap: 0 var(--s-9);
  }
}

@media (width >= 1280px) {
  .home-benefits_list {
    gap: 0 var(--s-15);
  }
}
/* #endregion */

/* #region Science */
.home-science_container {
  background: url("img/martian.jpg") top center no-repeat;
  background-size: cover;
  padding-top: 240px;
  max-width: var(--container-width);
  margin: 0 auto;
}

.home-science {
  padding: var(--s-10) var(--container-h-padding);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  color: rgb(var(--general-white));
}

.home-science_title {
  margin-top: var(--s-3);
}

.home-science_text {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

@media (width >= 768px) {
  .home-science_container {
    background-image: url("img/martian-desktop.jpg");
    background-position: top left;
    padding-top: 0;
  }

  .home-science {
    padding: var(--s-10) var(--s-20) var(--s-10) var(--container-h-padding);
    background: linear-gradient(
      90deg,
      rgb(var(--general-black) / 0.41) 0%,
      rgb(var(--general-black) / 0.34) 53.5%,
      rgb(var(--general-black) / 0) 90.5%
    );
    max-width: 540px;
  }
}

@media (width >= 1024px) {
  .home-science {
    padding: var(--s-30) var(--container-h-padding);
    max-width: 760px;
  }
}
/* #endregion */

/* #region CTA */
.home-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-10);
  text-align: center;
  overflow: hidden;
}

.home-cta::before {
  content: "";
  position: absolute;
  right: calc(50% - 69px);
  bottom: -75px;
  width: 279px;
  height: 163px;
  border-radius: 12px;
  transform: rotate(15deg);
  background: lightgray 50% / cover no-repeat;
  background-image: url("img/panel_w800.jpg");
  background-image: image-set(
    url("img/panel_w400.jpg") 1x,
    url("img/panel_w800.jpg") 2x
  );
  box-shadow: 0px 54px 100px 0px rgb(0 0 0 / 0.05),
    0px 24px 250px 0px rgb(var(--gray-shadow), 0.1),
    0px 4px 24px 0px rgb(0 0 0 / 0.03), 0px 0px 4px 0px rgb(0 0 0 / 0.1);
}

.home-cta::after {
  content: "";
  position: absolute;
  width: 83px;
  height: 174px;
  left: calc(50% + 68px);
  bottom: -8px;
  border-radius: 12px;
  transform: rotate(15deg);
  background: lightgray 50% / cover no-repeat;
  background-image: url("img/app_w300.jpg");
  background-image: image-set(
    url("img/app_w150.jpg") 1x,
    url("img/app_w300.jpg") 2x
  );
  box-shadow: 0px 54px 100px 0px rgb(0 0 0 / 0.05),
    0px 24px 250px 0px rgb(var(--gray-shadow) / 0.1),
    0px 4px 24px 0px rgb(0 0 0 / 0.03), 0px 0px 4px 0px rgb(0 0 0 / 0.1);
}

.home-cta_bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(
    91.32% 44.7% at 50% 87.97%,
    rgb(var(--brand-80) / 0.41) 0%,
    rgb(var(--brand-80) / 0) 100%
  );
}

.home-cta::before,
.home-cta::after {
  z-index: 0;
}

.home-cta *:not(.home-cta_bg) {
  position: relative;
  z-index: 2;
}

.home-cta_text {
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.home-cta_button {
  margin-top: var(--s-9);
}

@media (width >= 768px) {
  .home-cta {
    padding: var(--s-20) var(--s-10);
  }

  .home-cta::before {
    transform: rotate(-15deg);
    width: 410px;
    height: 239px;
    right: calc(50% + 170px);
    bottom: 40px;
    background-image: url("img/panel.jpg");
    background-image: image-set(
      url("img/panel_w800.jpg") 1x,
      url("img/panel.jpg") 2x
    );
    box-shadow: 0px 54px 100px 0px rgb(var(--general-black) / 0.05),
      0px 24px 250px 0px rgb(var(--gray-shadow) / 0.1),
      0px 4px 24px 0px rgb(var(--general-black) / 0.03),
      0px 0px 4px 0px rgb(var(--general-black) / 0.1);
  }

  .home-cta::after {
    width: 180px;
    height: 378px;
    left: calc(50% + 180px);
    bottom: -30px;
    background-image: url("img/app.jpg");
    background-image: image-set(
      url("img/app_w300.jpg") 1x,
      url("img/app.jpg") 2x
    );
    box-shadow: 0px 54px 100px 0px rgb(var(--general-black) / 0.05),
      0px 24px 250px 0px rgb(var(--gray-shadow) / 0.1),
      0px 4px 24px 0px rgb(var(--general-black) / 0.03),
      0px 0px 4px 0px rgb(var(--general-black) / 0.1);
  }

  .home-cta_bg {
    background-image: radial-gradient(
      50% 44.7% at 50% 87.97%,
      rgb(var(--brand-80) / 0.41) 0%,
      rgb(var(--brand-80) / 0) 100%
    );
  }

  .home-cta_title {
    padding: 0 var(--s-10);
  }

  .home-cta_text {
    padding: 0 var(--s-10);
    max-width: 400px;
  }
}

@media (width >= 1024px) {
  .home-cta_title {
    max-width: 496px;
  }

  .home-cta_text {
    max-width: 496px;
  }

  .home-cta::before {
    right: calc(50% + 380px);
    bottom: 50px;
  }

  .home-cta::after {
    left: calc(50% + 390px);
    bottom: -10px;
  }
}
/* #endregion */

/* #region Manual */
.home-manual {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.home-manual_content {
  display: flex;
  flex-direction: column;
}

.home-manual_title {
  align-self: flex-start;
}

.home-manual_subtitle {
  margin-top: var(--s-4);
}

.home-manual_description {
  margin-top: var(--s-2);
}

.home-manual_resources {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.edu-resource {
  width: min-content;
}

.edu-resource_link {
  position: relative;
  display: block;
  color: rgb(var(--brand-100));
  border: 2px solid rgb(var(--brand-100));
  border-radius: var(--radius-2);
  overflow: hidden;
  background: linear-gradient(
    0deg,
    rgb(var(--general-white) / 0.8) 0%,
    rgb(var(--general-white) / 0.8) 100%
  );
  box-shadow: 0px 54px 100px 0px rgb(var(--general-black) / 0.05),
    0px 24px 250px 0px rgb(var(--gray-shadow) / 0.1),
    0px 4px 24px 0px rgb(var(--general-black) / 0.03);
}

.edu-resource_link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.edu-resource_link__guideline {
  width: 115px;
  height: 229px;
}

.edu-resource_link__guideline::before {
  background-image: url("img/guidline-screenshot_w230.jpg");
  background-image: image-set(
    url("img/guidline-screenshot_w115.jpg") 1x,
    url("img/guidline-screenshot_w230.jpg") 2x
  );
  background-size: 100% 100%;
}

.edu-resource_link__manual {
  width: 168px;
  height: 229px;
}

.edu-resource_link__manual::before {
  background-image: url("img/manual-screenshot_w340.jpg");
  background-image: image-set(
    url("img/manual-screenshot_w170.jpg") 1x,
    url("img/manual-screenshot_w340.jpg") 2x
  );
  background-size: 100% 100%;
}

.edu-resource_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.edu-resource_caption {
  margin-top: var(--s-3);
  display: flex;
  justify-content: space-between;
}

@media (width >= 768px) {
  .home-manual_description {
    margin-top: var(--s-3);
  }

  .edu-resource_link {
    border-radius: var(--s-3);
  }

  .edu-resource_link__guideline {
    width: 225px;
    height: 450px;
  }

  .edu-resource_link__guideline::before {
    background-image: url("img/guidline-screenshot_w450.jpg");
    background-image: image-set(
      url("img/guidline-screenshot_w225.jpg") 1x,
      url("img/guidline-screenshot_w450.jpg") 2x
    );
  }

  .edu-resource_link__manual {
    width: 330px;
    height: 450px;
  }

  .edu-resource_link__manual::before {
    background-image: url("img/manual-screenshot_w660.jpg");
    background-image: image-set(
      url("img/manual-screenshot_w330.jpg") 1x,
      url("img/manual-screenshot_w660.jpg") 2x
    );
    background-size: 100% 100%;
  }

  .edu-resource_icon {
    width: var(--s-20);
    height: var(--s-20);
  }
}

@media (width >= 1024px) {
  .home-manual {
    flex-direction: row;
    justify-content: space-between;
  }

  .home-manual_content {
    max-width: 320px;
  }
}
/* #endregion */

/* #region Footer */
.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-7);
  border-top: 1px solid rgb(var(--brand-40));
}

.footer_contacts {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.footer_pvplus-reference {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

@media (width >= 768px) {
  .footer {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
  }

  .footer_pvplus-icon {
    width: 183px;
    height: auto;
  }
}
/* #endregion */