/*
 * landing.css — стили приложения landing (в т.ч. aca_marketplace.html).
 * Roboto подключается глобально: static/css/fonts.css (base.html).
 * Ниже — :root, сброс, типографика, кнопки, Swiper, компоненты.
 * url() от каталога CSS: ../icons, ../icons-delete
 */

:root {
  --bg-color: #f4f4f4;
  --light-bg: #ffffff;
  --light-bg-2: #14161508;
  --border-color: #1416154d;
  --text-color: #141615;
  --text-color-light: #595a5a;
  --accent: #4f5a81;
  --blue: #8c9ddb;
  --accent-dark: #141e40;
  --light-card: #dbe2fd;
  --extra-light-card: #f0f3ff;
  --pressed-color: #263361;
  --hover-color: #65719c;
  --disabled: #1416151a;
  --half-transparent: #ffffff80;
  --grey: #333;
  --font: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --h1-font-size: 8.4rem;
  --h2-font-size: 6.4rem;
  --h3-font-size: 4rem;
  --h4-font-size: 2.8rem;
  --p1-font-size: 2rem;
  --p2-font-size: 2.8rem;
  --p3-font-size: 3.2rem;
  --small-font-size: 1.6rem;
  --section-margin: 12rem;
  --block-padding: 4.8rem;
  --border-radius: 2.4rem;
  --border-radius-small: 1.6rem;
  --gap: 2rem;
  --quad: 0.3s cubic-bezier(0.34, 0.73, 0.47, 0.97);
  --Base-Black-30: rgba(20, 22, 21, 0.3);
  --Base-Black-1: rgba(20, 22, 21, 0.01);
  --Base-Black-3: rgba(20, 22, 21, 0.03);
}

html {
  font-size: 8.5px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font), sans-serif;
  color: var(--text-color);
  font-size: var(--p1-font-size);
  background-color: var(--bg-color);
  min-height: 100vh;
}

body:has(.popup.active) {
  overflow: hidden;
}

main {
  display: block;
}

section {
  overflow: hidden;
  margin-top: var(--section-margin);
}

p {
  font-size: var(--p1-font-size);
  line-height: 110%;
}

img {
  object-fit: cover;
  object-position: center;
}

.wrapper {
  max-width: 170rem;
  margin: 0 auto;
  width: calc(100% - 3.2rem);
}

a,
button {
  transition: var(--quad);
  font-family: var(--font), sans-serif;
  cursor: pointer;
}

a *,
button * {
  cursor: inherit;
}

a {
  text-decoration: none;
  color: var(--text-color);
  font-size: var(--p1-font-size);
}

button {
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: var(--text-color);
  font-size: var(--small-font-size);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

h1 {
  font-family: var(--font), sans-serif;
  font-size: var(--h1-font-size);
  line-height: 120%;
  margin-bottom: 0;
  font-weight: 600;
  font-style: normal;
  color: var(--accent);
}

h2 {
  font-family: var(--font), sans-serif;
  font-size: var(--h2-font-size);
  line-height: 110%;
  margin-bottom: var(--block-padding);
  font-weight: 600;
  font-style: normal;
  color: var(--text-color);
}

h3 {
  font-family: var(--font), sans-serif;
  font-size: var(--h3-font-size);
  line-height: 120%;
  margin-bottom: 2.4rem;
  font-weight: 700;
  font-style: normal;
  color: var(--text-color);
}

h4 {
  font-family: var(--font), sans-serif;
  font-size: var(--h4-font-size);
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 1.6rem;
}

h5 {
  font-family: var(--font), sans-serif;
  font-size: var(--p1-font-size);
  font-weight: 400;
}

input {
  font-family: var(--font), sans-serif;
  padding: 1.6rem;
  border-radius: var(--border-radius-small);
  border: 1px solid rgba(20, 22, 21, 0.1);
  font-size: var(--p1-font-size);
  -webkit-transition: var(--quad);
  transition: var(--quad);
  cursor: auto;
}

input:focus-visible {
  border-color: var(--grey) !important;
  outline: 0 !important;
}

input::placeholder {
  color: rgba(20, 22, 21, 0.3019607843);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  cursor: default;
}

/* Кнопки — копия из main.css (aca_marketplace: .btn--secondary в hero, .btn--primary в шагах и баннере) */
.btn--primary,
.btn--secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 32rem;
  height: 5.6rem;
  background-color: var(--accent);
  color: var(--light-bg);
  border-radius: var(--border-radius-small);
  font-size: var(--small-font-size);
  font-weight: 600;
  box-shadow: 0 0 6px 0 transparent;
}

.btn--primary svg,
.btn--secondary svg {
  width: 2.4rem;
  height: 2.4rem;
}

.btn--primary svg path,
.btn--secondary svg path {
  transition: var(--quad);
}

.btn--primary img,
.btn--secondary img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  flex-shrink: 0;
}

.btn--primary:hover,
.btn--secondary:hover {
  color: var(--accent);
  background-color: var(--extra-light-card);
}

.btn--primary:hover svg,
.btn--secondary:hover svg {
  width: 2.4rem;
  height: 2.4rem;
}

.btn--primary:hover svg path,
.btn--secondary:hover svg path {
  fill: var(--accent);
}

.btn--primary:active,
.btn--secondary:active {
  background-color: var(--pressed-color);
  color: var(--light-bg);
}

.btn--primary:active svg path,
.btn--secondary:active svg path {
  fill: var(--light-bg);
}

.btn--primary:disabled,
.btn--secondary:disabled {
  background-color: rgba(20, 22, 21, 0.03);
  color: rgba(20, 22, 21, 0.03);
}

.btn--secondary {
  color: var(--text-color);
  border: 1px solid var(--accent);
  background-color: var(--light-bg);
  width: 16.4rem;
}

.btn--secondary:hover {
  color: var(--accent);
  box-shadow: none;
  border-color: #4f5a81;
  background-color: var(--light-card);
}

.btn--secondary:active {
  color: var(--light-bg);
  background-color: var(--pressed-color);
}

.swiper-pagination-horizontal {
  display: flex;
  justify-content: center;
  margin-top: 0.8rem;
}

.swiper-pagination-horizontal .swiper-pagination-bullet {
  width: 0.6rem;
  height: 0.6rem;
  background-color: #d9d9d9;
  opacity: 1;
}

.swiper-pagination-horizontal .swiper-pagination-bullet-active {
  background-color: var(--accent);
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 2px;
}

/* --- Компоненты landing --- */

.breadcrumbs {
  margin-top: 0;
}

.breadcrumbs .wrapper {
  padding: 0 4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.breadcrumbs ol {
  list-style: none;
}

.breadcrumbs ol li {
  display: flex;
  gap: 0.8rem;
}

.breadcrumbs ol li::before {
  content: "";
  display: block;
  background-image: url("../icons/right-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
}

.breadcrumbs ol li:first-of-type::before {
  content: none;
}

.breadcrumbs-link {
  font-size: var(--small-font-size);
  color: rgba(20, 22, 21, 0.6);
}

.promo {
  position: relative;
  margin-top: 3rem;
}

.promo-container {
  width: 113rem;
}

.promo h1 {
  margin-left: var(--block-padding);
}

.promo-subtitle {
  font-size: var(--h3-font-size);
  font-weight: 400;
  margin-top: 1rem;
  margin-bottom: 7rem;
  margin-left: var(--block-padding);
}

.promo-text {
  width: 100%;
  padding: var(--block-padding);
  border-radius: 2.4rem;
  background-color: rgba(255, 255, 255, 0.4);
}

.promo-text p {
  font-size: var(--p3-font-size);
}

.promo-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 151.7rem;
  z-index: -1;
}

.category-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
}

.category-content {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--gap);
}

.category-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  border: 1px solid var(--Base-Black-30, rgba(20, 22, 21, 0.3));
  grid-column: span 5;
  padding: var(--block-padding);
  background-color: var(--light-bg);
  background-image: url("../icons/main-points.svg");
  background-repeat: no-repeat;
  background-position: 100% 0;
  transition: var(--quad);
  transition-property: all !important;
}

.category-item:nth-of-type(2n - 1):has(+ .category-item.accent) {
  grid-column: span 4;
}

.category-item.accent {
  background-color: var(--accent-dark);
  grid-column: span 6;
}

.category-item.accent .category-tag {
  background-color: rgba(255, 255, 255, 0.1019607843);
}

.category-item.accent .category-tag,
.category-item.accent h3 {
  color: var(--light-bg);
}

.category-item.accent p {
  color: rgba(255, 255, 255, 0.6980392157);
}

.category-item.accent:nth-of-type(2n) + .category-item {
  grid-column: span 5;
}

.category-item.accent:nth-of-type(2n - 1) + .category-item {
  grid-column: span 4;
}

.category-item:has(.btn--secondary:hover),
.category-item:has(.btn--primary:hover) {
  background-position: 120% 0;
}

.category-tag {
  width: fit-content;
  padding: 0.6rem 1.2rem;
  margin-bottom: 2.4rem;
  border-radius: 6rem;
  background-color: rgba(20, 22, 21, 0.03);
  font-size: var(--small-font-size);
}

.category-links {
  margin-top: auto;
  display: flex;
  gap: var(--gap);
  justify-content: center;
  align-items: center;
}

.category p {
  color: #7f7f7f;
  margin-bottom: 4rem;
  max-width: 54rem;
}

.points-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
}

.points-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  min-height: 38rem;
}

.points-item {
  display: flex;
  flex-direction: column;
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
  height: 100%;
  transition: var(--quad);
  transition-property: all !important;
}

.points-item:hover {
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.08);
}

.points-tag {
  background-color: var(--light-bg-2);
  border-radius: 6rem;
  padding: 0.6rem 1.2rem;
  width: fit-content;
  font-size: var(--small-font-size);
  margin-bottom: 1.2rem;
}

.points-img {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: var(--border-radius-small);
  background-color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.4rem;
}

.points-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.points p {
  color: #7f7f7f;
}

.consists-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
}

.consists h4 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
}

.consists h4 img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}

.consists-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.consists-item {
  display: flex;
  flex-direction: column;
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
  height: 100%;
  background: var(--Base-Black-3, rgba(20, 22, 21, 0.03));
}

.consists p {
  color: var(--text-color-light);
}

.steps-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
  background-image: url("../icons-delete/steps/vector.svg");
  background-repeat: no-repeat;
  background-size: 75% auto;
  background-position: right bottom;
  padding-bottom: 2.2rem;
}

.steps h3 {
  font-size: var(--p3-font-size);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
}

.steps h3 img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}

.steps-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem var(--gap);
  padding: 0 7.8rem;
}

.steps-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--light-card);
  height: 26rem;
  padding-left: 19rem;
}

.steps-item-content {
  flex: 1;
  min-width: 0;
}

.steps-item:hover .steps-num {
  height: 130%;
}

.steps-num-value,
.steps h5,
.steps p {
  color: var(--grey);
}

.steps h5 {
  font-size: 2.4rem;
  margin-bottom: var(--gap);
  font-weight: 500;
}

.steps-num {
  position: absolute;
  height: calc(100% + 2.8rem);
  left: 2.4rem;
  width: 14.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: var(--quad);
}

.steps-num-top {
  height: 4.8rem;
  width: 100%;
  background-color: var(--extra-light-card);
  border-radius: 0.4rem 0.4rem var(--border-radius) var(--border-radius);
}

.steps-num img {
  width: 5.6rem;
  height: 5.6rem;
}

.steps-num-value {
  font-size: var(--h2-font-size);
  font-weight: 600;
}

.steps-num-bottom {
  height: 15rem;
  width: 100%;
  background-color: var(--extra-light-card);
  border-radius: var(--border-radius) var(--border-radius) 0.4rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.2rem;
  gap: 1rem;
}

.steps-num-bottom span {
  font-family: var(--font), sans-serif;
  font-size: 1.2rem;
  color: var(--text-color);
  font-weight: 600;
  text-transform: uppercase;
}

.steps .btn--primary {
  margin: 4rem auto 0;
}

.faq-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
}

.faq-item {
  width: 100%;
  margin-bottom: 2.4rem;
}

.faq-item:last-of-type {
  margin-bottom: 0;
}

.faq-item-content {
  max-width: 102rem;
  height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: var(--quad);
}

.faq-item-content p {
  color: rgba(20, 22, 21, 0.5);
  margin-bottom: 2.8rem;
}

.faq-item-content p:last-of-type {
  margin-bottom: 0;
}

.faq-item.active .faq-button img {
  transform: rotateX(180deg);
}

.faq-item.active .faq-item-content {
  margin-top: var(--gap);
}

.faq-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-button img {
  width: 4.8rem;
  height: 4.8rem;
  transition: var(--quad);
}

.faq-button h4 {
  color: var(--accent-dark);
  transition: var(--quad);
  margin-bottom: 0;
  text-align: left;
}

.faq-button:hover h3,
.faq-button:hover h4 {
  color: var(--accent);
}

.banner-item {
  width: 100%;
  height: 48rem;
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: 8rem;
  background-color: var(--light-bg);
  visibility: hidden;
  opacity: 0;
  transition: var(--quad);
}

.banner-item.swiper-slide-active {
  visibility: visible;
  opacity: 1;
}

.banner-img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
}

.banner-content {
  position: relative;
  z-index: 1;
  max-width: 100rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.banner h2 {
  margin-bottom: 4rem;
}

.banner p {
  font-size: var(--p2-font-size);
}

.banner .btn--primary {
  margin-top: auto;
}

/* ACA Marketplace и аналогичные подстраницы: hero «sub-promo», блоки «Кому подходит», сопровождение, «другие варианты» */

.sub-promo {
  margin-top: 3rem;
}

.sub-promo-container {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: #f1f1f1;
  padding: var(--block-padding);
  padding-bottom: 6.6rem;
  display: flex;
  flex-direction: column;
  height: 60rem;
  border: 1px solid var(--Base-Black-30, rgba(20, 22, 21, 0.3));
}

.sub-promo-img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right center;
}

.sub-promo-tag {
  color: var(--text-color);
  background: var(--Base-Black-3, rgba(20, 22, 21, 0.03));
  border-radius: 6rem;
  padding: 1rem 1.8rem;
  margin-bottom: 3.2rem;
  width: fit-content;
}

.sub-promo-content {
  position: relative;
  z-index: 1;
  max-width: 127rem;
}

.sub-promo h1 {
  color: var(--text-color);
  margin-bottom: 7rem;
}

.sub-promo-text {
  color: var(--text-color);
  max-width: 90rem;
}

.sub-promo-text p {
  font-size: var(--p2-font-size);
}

.sub-promo .btn--secondary {
  position: absolute;
  right: 5rem;
  bottom: 3.2rem;
  width: 32rem;
}

.sub-promo.accent .sub-promo-container {
  background-color: var(--accent-dark);
  border: none;
}

.sub-promo.accent .sub-promo-tag,
.sub-promo.accent h1,
.sub-promo.accent .sub-promo-text p {
  color: var(--light-bg);
}

.sub-promo.accent .sub-promo-tag {
  background-color: rgba(255, 255, 255, 0.1019607843);
}

.target-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--Base-Black-3, rgba(20, 22, 21, 0.03));
}

.target-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.target-item {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--light-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.target-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5.2rem;
}

.target h4 {
  margin-bottom: 4rem;
}

.target img {
  border-radius: 2.4rem;
  overflow: hidden;
  width: 12rem;
  height: 12rem;
  object-fit: contain;
}

.target p {
  margin-top: auto;
  color: var(--text-color);
  line-height: 140%;
}

.maintenance-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--Base-Black-3, rgba(20, 22, 21, 0.03));
}

.maintenance-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.maintenance-item {
  background-color: var(--light-card);
  border-radius: var(--border-radius);
}

.maintenance-item-inner {
  padding: 4.4rem 4.8rem;
  border-radius: 8rem var(--border-radius) var(--border-radius) var(--border-radius);
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.maintenance img {
  width: 4.8rem;
  height: 4.8rem;
  margin-bottom: 2.4rem;
  object-fit: contain;
}

.maintenance p {
  font-size: var(--p3-font-size);
  margin-top: auto;
  color: var(--text-color);
  text-align: center;
}

.other-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--Base-Black-3, rgba(20, 22, 21, 0.03));
}

.other-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.other-item {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--light-bg);
  display: flex;
  flex-direction: column;
  background-image: url("../icons-delete/other-bg.svg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 27rem;
}

.other h4 {
  margin-bottom: 4rem;
}

.other-tag {
  width: fit-content;
  padding: 0.6rem 1.2rem;
  border-radius: 6rem;
  background-color: rgba(20, 22, 21, 0.03);
  font-size: var(--small-font-size);
  margin-bottom: 2.4rem;
}

.other p {
  margin-top: auto;
  color: var(--text-color);
  line-height: 140%;
}

/* ---- Главная страница: hero (promo-main) ---- */

.promo-main {
  overflow: visible;
  position: relative;
}

.promo-main-map {
  margin: 0 auto;
  position: relative;
  width: 93rem;
  padding-top: 9rem;
}

.promo-main-map-img {
  width: 100%;
  position: relative;
  z-index: 1;
}

.promo-main-map-img-back {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
  width: 177rem;
}

.promo-main-title {
  position: absolute;
  max-width: 102rem;
  padding: 1.6rem 3.2rem;
  top: -10rem;
  border-radius: var(--border-radius-small);
  background-color: rgba(255, 255, 255, 0.32);
  border: 1px solid var(--light-bg);
  z-index: 2;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  left: 50%;
  transform: translate(-50%, 0);
}

.promo-main-title h1 {
  font-size: var(--h2-font-size);
  text-align: center;
  margin-bottom: 1rem;
  line-height: 110%;
}

.promo-main-title p {
  font-size: 2.4rem;
  text-align: center;
}

.promo-main-side {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 22rem;
  top: 16rem;
}

.promo-main-side-item {
  padding: 1.2rem;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: var(--border-radius-small);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--light-bg);
}

.promo-main-side-num {
  font-size: var(--h2-font-size);
  color: var(--accent);
  margin-bottom: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.promo-main-side p {
  font-size: 2.2rem;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  color: var(--accent);
}

/* ---- Главная страница: product cards (promo-product) ---- */

.promo-product {
  position: relative;
  z-index: 1;
}

.promo-product-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
}

.promo-product-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.promo-product-content .product-main-item {
  display: flex;
  flex-direction: column;
}

.promo-product-content .product-main-item p {
  margin-bottom: 2.4rem;
}

.promo-product-content .product-main-item-btns {
  margin-top: auto;
}

.product-main-item {
  position: relative;
  background-color: var(--light-bg);
  border-radius: var(--border-radius-small);
  overflow: hidden;
  padding: var(--block-padding);
}

.product-main-item img {
  position: absolute;
  right: 0;
  top: 0;
  width: 23rem;
  height: auto;
}

.product-main-item .tags {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}

.product-main-item h3 {
  margin-bottom: 3.2rem;
  color: var(--accent);
  font-weight: 700;
  max-width: 41rem;
}

.product-main-item p {
  font-size: var(--p1-font-size);
  color: var(--grey);
  max-width: 56rem;
}

.product-main-item-btns {
  margin-top: 2.4rem;
  display: flex;
  justify-content: flex-end;
  gap: var(--gap);
}

.tag {
  position: relative;
  padding: 0.6rem 1.2rem;
  border-radius: 6rem;
  background-color: rgba(20, 22, 21, 0.03);
  font-size: var(--small-font-size);
  color: var(--grey);
}

/* ---- Главная страница: sub-promo ---- */

.main-page.sub-promo {
  margin-top: var(--section-margin);
}

/* ---- Главная страница: how it works (about) ---- */

.about-container {
  padding: var(--block-padding);
  border-radius: var(--border-radius);
  background-color: var(--half-transparent);
}

.about-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
}

.about-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--Base-Black-3, rgba(20, 22, 21, 0.03));
  border-radius: var(--border-radius-small);
  padding: var(--block-padding);
}

.about-item h3 {
  font-size: 3.2rem;
  margin-bottom: 1.2rem;
  color: var(--grey);
}

.about-item p {
  color: var(--text-color-light);
}

.about-item img {
  position: absolute;
  width: 4.8rem;
  top: 1.6rem;
  right: 1.6rem;
}

.about-item.accent {
  background-color: var(--accent);
}

.about-item.accent h3 {
  color: var(--light-bg);
}

.about-item.accent p {
  color: var(--light-card);
}

.about-item.accent button {
  width: 32rem;
  margin: 0 auto;
  margin-top: 2.4rem;
}

@media (min-width: 769px) {
  .swiper-category .swiper-slide,
  .swiper-points .swiper-slide {
    transform: none !important;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 10px;
  }

  :root {
    --h1-font-size: 3.2rem;
    --h2-font-size: 2.8rem;
    --h3-font-size: 2rem;
    --h4-font-size: 2rem;
    --p1-font-size: 1.6rem;
    --p2-font-size: 1.4rem;
    --p3-font-size: 1.4rem;
    --small-font-size: 1.2rem;
    --section-margin: 3.2rem;
    --block-padding: 1.6rem;
    --border-radius: 1.6rem;
    --border-radius-small: 1.6rem;
    --gap: 0.8rem;
    --quad: 0.3s cubic-bezier(0.34, 0.73, 0.47, 0.97);
  }

  p {
    line-height: 120%;
  }

  h2 {
    margin-bottom: 1.2rem;
  }

  h3 {
    margin-bottom: 0.8rem;
  }

  h4 {
    margin-bottom: 0.8rem;
  }

  .btn--primary,
  .btn--secondary {
    font-size: var(--p1-font-size);
    height: 4rem;
    border-radius: 0.8rem;
    width: 26rem;
  }

  .breadcrumbs .wrapper {
    padding: 0 0;
  }

  .promo {
    margin-top: 1.7rem;
  }

  .promo h1 {
    margin-left: 0;
  }

  .promo-container {
    width: 100%;
  }

  .promo-subtitle {
    margin-top: 0.4rem;
    margin-bottom: 8rem;
    margin-left: 0;
  }

  .category-content,
  .points-content {
    display: -webkit-box;
    gap: 0;
  }

  .category-item,
  .points-item {
    background-color: var(--light-bg);
    border: none;
    background-size: 50% auto;
    transition-property: transform, opacity, height !important;
  }

  .category-item.accent,
  .points-item.accent {
    box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.08);
  }

  .swiper-category,
  .swiper-points {
    margin-top: 5rem;
  }

  .category-tag,
  .points-tag {
    font-size: var(--p1-font-size);
    margin-bottom: 4.8rem;
  }

  .category-container,
  .points-container,
  .consists-container,
  .steps-container,
  .faq-container,
  .target-container,
  .maintenance-container,
  .other-container {
    padding: 0;
    background-color: transparent;
  }

  .points-img {
    display: none;
  }

  .points-tag {
    margin-bottom: 1.2rem;
  }

  .points-content {
    min-height: unset;
  }

  .consists-content {
    display: flex;
    flex-direction: column;
  }

  .consists h3 {
    font-size: var(--p1-font-size);
    font-weight: 700;
    margin-bottom: 1.2rem;
  }

  .steps-content {
    padding: 0;
    gap: 2rem;
    display: flex;
    flex-direction: column;
  }

  .steps h2 {
    margin-bottom: 2.2rem;
  }

  .steps-item {
    height: 13.6rem;
    gap: 0.8rem;
    padding-left: 10rem;
    border-radius: 1.2rem;
  }

  .steps-num-top {
    border-radius: 0.4rem 0.4rem 1.2rem 1.2rem;
  }

  .steps-num {
    width: 7.8rem;
    height: calc(100% + 2rem);
    left: 1.2rem;
  }

  .steps-num img {
    width: 3rem;
    height: 3rem;
  }

  .steps-item:hover .steps-num {
    height: calc(100% + 2rem);
  }

  .steps-num-bottom {
    padding-top: 1.2rem;
    height: 8rem;
    gap: 0.6rem;
    border-radius: 1.2rem 1.2rem 0.4rem 0.4rem;
  }

  .steps-num-bottom span {
    font-size: 0.8rem;
  }

  .steps-num-top {
    height: 2.5rem;
  }

  .steps h5 {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }

  .steps p {
    font-size: 1.1rem;
  }

  .steps .btn--primary {
    margin-top: 2.2rem;
  }

  .faq-button h3 {
    font-size: var(--p1-font-size);
  }

  .faq-button img {
    width: 3.4rem;
    height: 3.4rem;
  }

  .faq-item-content p {
    font-size: var(--p3-font-size);
    margin-bottom: 1.2rem;
  }

  .faq-item.active .faq-item-content {
    margin-top: 1.2rem;
  }

  .faq-item {
    margin-bottom: 1.2rem;
  }

  .banner h2 {
    margin-bottom: 1.2rem;
    max-width: 70%;
  }

  .banner p {
    max-width: 70%;
  }

  .banner-item {
    height: 28rem;
    padding: var(--block-padding);
  }

  .banner-img {
    right: -18rem;
  }

  .banner .btn--primary {
    width: 100%;
  }

  .sub-promo-tag {
    margin-bottom: 1.2rem;
  }

  .sub-promo.accent h1 {
    margin-bottom: 1.2rem;
  }

  .sub-promo-container {
    height: auto;
    padding: var(--block-padding);
  }

  .sub-promo .btn--secondary {
    position: static;
    z-index: 1;
    margin-top: 3.2rem;
    width: 100%;
  }

  .target-content {
    display: flex;
    flex-direction: column;
  }

  .target-item {
    gap: 2rem;
  }

  .target-item h4,
  .target-item img {
    margin-bottom: 0;
  }

  .target-item img {
    width: 6rem;
    height: 6rem;
    border-radius: 1.2rem;
    flex-shrink: 0;
  }

  .target-head {
    display: flex;
    flex-direction: row-reverse;
    gap: 1.2rem;
    align-items: center;
    margin-right: auto;
    margin-bottom: 0;
  }

  .maintenance-content {
    display: flex;
    flex-direction: column;
  }

  .maintenance-item-inner {
    background-color: #f9f9f9;
    padding: var(--block-padding);
  }

  .maintenance p {
    font-size: var(--p1-font-size);
    font-weight: 600;
  }

  .other-content {
    display: flex;
    flex-direction: column;
  }

  .other-item {
    background-size: 50% auto;
  }

  .other h4 {
    margin-bottom: 1.2rem;
  }

  .other-tag {
    margin-bottom: 1.2rem;
  }

  /* Responsive: promo-main */
  .promo-main-title {
    position: relative;
    top: 0;
  }

  .promo-main-title p {
    font-size: var(--p1-font-size);
  }

  .promo-main-map {
    width: 100%;
    padding-top: 0;
  }

  .promo-main-side {
    position: relative;
    left: unset;
    top: unset;
    transform: unset;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .promo-main-side-num {
    font-size: 3.2rem;
  }

  .promo-main-side-item p {
    font-size: 1.2rem;
  }

  .promo-main-map-img-back {
    width: 141%;
  }

  /* Responsive: promo-product */
  .promo-product-content {
    grid-template-columns: 1fr;
  }

  .product-main-item {
    border: 1px solid rgba(20, 22, 21, 0.302);
  }

  .product-main-item * {
    position: relative;
    z-index: 1;
  }

  .product-main-item img {
    z-index: 0;
  }

  /* Responsive: about */
  .about-content {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
  }

  .about-content img {
    width: 2.4rem;
  }

  .about-content h3 {
    font-size: var(--h3-font-size);
  }

  .about-item.accent .btn--secondary {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1300px) {
  html {
    font-size: var(--scale);
  }

  :root {
    --scale: calc(100vw / 140);
  }
}