/* Hero Section — Wolna Mobile (197:651) */

.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: var(--section-padding-block) var(--page-padding-x);
  background-color: var(--color-gray-4);
  overflow-x: visible;
}

.hero-section__logotype {
  display: block;
  width: var(--logotype-width);
  height: auto;
  max-width: none;
}

.hero-section__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-text);
  text-align: center;
}

.hero-section__title {
  display: block;
  color: var(--color-gray);
}

.hero-section__title-accent {
  display: block;
}

.hero-section__article {
  width: 100%;
  max-width: var(--content-text);
  text-align: center;
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  letter-spacing: var(--font-body-letter-spacing);
  color: var(--color-gray-2);
}

.hero-section__article p + p {
  margin-top: 0;
}

.hero-section__article-emphasis {
  color: var(--color-gray);
}

.hero-section__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-actions-gap);
}

.hero-section__trial {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-section__pic {
  position: relative;
  align-self: stretch;
  width: auto;
  height: var(--hero-pic-height);
  margin-inline: calc(-1 * var(--page-padding-x));
  overflow: visible;
}

.hero-section__pic-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--hero-pic-container-width);
  height: var(--hero-pic-container-height);
  transform: translateX(-50%);
}

.hero-section__pic-container img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.hero-section[data-hero-enter] [data-hero-enter-item] {
  opacity: 0;
  transform: translateY(var(--scroll-reveal-offset));
  transition:
    opacity var(--scroll-reveal-duration) var(--scroll-reveal-easing),
    transform var(--scroll-reveal-duration) var(--scroll-reveal-easing);
  transition-delay: calc(var(--hero-enter-start-delay) + var(--hero-enter-delay, 0ms));
}

.hero-section[data-hero-enter].is-active [data-hero-enter-item] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-section[data-hero-enter] [data-hero-enter-item] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Promo Section — Wolna Mobile (197:665) */

.promo-section {
  display: flex;
  flex-direction: column;
  gap: var(--promo-gap);
  padding: var(--section-padding-block) var(--page-padding-x) 0;
  background-color: var(--color-white);
}

.promo-section__text {
  display: flex;
  flex-direction: column;
  gap: var(--promo-text-gap);
  width: 100%;
}

.promo-section__label,
.promo-section__title,
.promo-section__article {
  width: 100%;
  max-width: var(--content-promo);
}

.promo-section__label {
  display: block;
}

.promo-section__title {
  color: var(--color-gray);
}

.promo-section__article {
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  letter-spacing: var(--font-body-letter-spacing);
  color: var(--color-gray-2);
}

.promo-section__pic {
  position: relative;
  width: 100%;
  height: var(--promo-pic-height);
  overflow: visible;
}

.promo-section__pic-container {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--promo-pic-container-width);
  height: var(--promo-pic-container-height);
}

.promo-section__pic-container img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

@media (min-width: 1280px) {
  .promo-section {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
  }

  .promo-section__text,
  .promo-section__pic {
    flex: 1 0 0;
    min-width: 0;
  }
}

/* Platforms Section — Wolna Mobile (288:11878) */

.platforms-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 48px;
  background-color: var(--color-white);
}

.platforms-slider {
  display: flex;
  gap: 48px;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-padding-x);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.platforms-slider::before,
.platforms-slider::after {
  content: "";
  flex-shrink: 0;
  width: var(--page-padding-x);
}

.platforms-slider::-webkit-scrollbar {
  display: none;
}

.platforms-slider--marquee {
  scroll-snap-type: none;
}

.platform-element {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.platform-element__label {
  font-size: var(--font-body-thin-size);
  font-weight: var(--font-body-thin-weight);
  line-height: var(--font-body-thin-line-height);
  letter-spacing: var(--font-body-thin-letter-spacing);
  color: var(--color-gray);
  text-align: center;
  white-space: nowrap;
}

.platforms-section__caption {
  width: 100%;
  text-align: center;
}

@media (min-width: 1280px) {
  .platforms-section {
    gap: 32px;
    padding-block: var(--section-padding-block);
  }

  .platforms-slider {
    gap: 0;
    justify-content: space-between;
    width: 100%;
    max-width: var(--content-wide);
    margin-inline: auto;
    overflow: visible;
    scroll-snap-type: none;
  }

  .platforms-slider::before,
  .platforms-slider::after {
    content: none;
    width: 0;
  }
}

/* Socials Section — Wolna Mobile (265:7072) */

.socials-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--socials-min-height);
  overflow: hidden;
  background-color: var(--color-white);
}

.socials-section__logos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.socials-section__logos-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--socials-logos-size);
  height: var(--socials-logos-size);
  transform: translate(-50%, calc(-50% + var(--socials-logos-parallax, 0px))) rotate(var(--socials-logos-rotate, var(--socials-logos-rotate-start))) scale(var(--socials-logos-scale, var(--socials-logos-scale-start)));
  transform-origin: center center;
  opacity: var(--socials-logos-opacity, 0);
}

.socials-section__logos-container img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.socials-section__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--socials-content-gap);
  width: 100%;
  margin-top: var(--socials-content-offset);
  padding: 96px var(--page-padding-x) var(--socials-content-padding-end);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    var(--color-white) 35%
  );
}

.socials-section__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-text);
  text-align: center;
}

.socials-section__title-line {
  display: block;
  color: var(--color-gray);
}

.socials-section__title-accent {
  display: block;
  color: var(--color-green-1);
}

.socials-section__subtitle {
  width: 100%;
  max-width: var(--content-text);
  text-align: center;
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  letter-spacing: var(--font-body-letter-spacing);
  color: var(--color-gray-2);
}

@media (prefers-reduced-motion: reduce) {
  .socials-section__logos-container {
    transform: translate(-50%, -50%) rotate(0deg) scale(var(--socials-logos-scale-end));
    opacity: 1;
    will-change: auto;
  }
}

/* Features Section — Wolna Mobile (288:11877) */

.features-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: var(--section-padding-block);
  background-color: var(--color-gray-4);
}

.features-section__title {
  width: 100%;
  max-width: var(--content-wide);
  padding-inline: var(--page-padding-x);
  color: var(--color-gray);
}

@media (min-width: 1280px) {
  .features-section {
    align-items: center;
    gap: 48px;
  }

  .features-section__title {
    text-align: center;
  }
}

/* Banners Section — Wolna Mobile (197:1580) */

.banners-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--banners-gap);
  padding: var(--section-padding-block) var(--page-padding-x) 0;
  background-color: var(--color-white);
}

.banners-section__title,
.cta-banner,
.telegram-banner {
  width: 100%;
  max-width: var(--content-wide);
}

.banners-section__title {
  color: var(--color-gray);
}

.cta-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  height: var(--cta-banner-height);
  padding: 64px var(--banner-padding-inline);
  border-radius: 28px;
  background-color: #020202;
  overflow: hidden;
}

.cta-banner__pic {
  position: absolute;
  bottom: 0;
  left: -141.85%;
  right: -11.15%;
  aspect-ratio: 1932 / 844;
  pointer-events: none;
}

.cta-banner__pic img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.cta-banner__heading {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  color: var(--color-white);
}

.cta-banner .primary-button {
  position: relative;
  z-index: 1;
}

.telegram-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 64px var(--banner-padding-inline);
  border-radius: 28px;
  overflow: hidden;
}

.telegram-banner__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.telegram-banner__bg-gradient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gradient-telegram);
}

.telegram-banner__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0.5;
}

.telegram-banner__logo {
  position: relative;
  z-index: 1;
  width: var(--telegram-logo-size);
  height: var(--telegram-logo-size);
  flex-shrink: 0;
}

.telegram-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.telegram-banner__title {
  width: 100%;
  text-align: center;
  color: var(--color-white);
}

.telegram-banner__subtitle {
  width: 100%;
  text-align: center;
  color: var(--color-white);
}

@media (min-width: 1280px) {
  .cta-banner {
    align-items: flex-start;
    justify-content: center;
  }

  .cta-banner__pic {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 512.865px;
    aspect-ratio: auto;
  }

  .cta-banner__heading {
    width: 400px;
    text-align: left;
  }

  .banners-section .telegram-banner {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    height: 500px;
    gap: 0;
  }

  .banners-section .telegram-banner__content {
    align-items: flex-start;
    width: 450px;
  }

  .banners-section .telegram-banner__title,
  .banners-section .telegram-banner__subtitle {
    text-align: left;
  }
}

/* FAQ Section — Wolna Mobile (197:1592) */

.faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: var(--section-padding-block) var(--page-padding-x);
  background-color: var(--color-white);
}

.faq-section__title {
  width: 100%;
  max-width: var(--content-narrow);
  color: var(--color-gray);
}

.faq-section__accordions {
  width: 100%;
  max-width: var(--content-narrow);
}

.faq-section__accordions .accordion {
  max-width: none;
  width: 100%;
}

@media (min-width: 1280px) {
  .faq-section {
    gap: 32px;
  }

  .faq-section__title {
    text-align: center;
  }
}

/* Footer Section — Wolna Mobile (197:1601) */

.footer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: var(--section-padding-block) var(--page-padding-x);
  background-color: var(--color-gray-4);
}

.footer-section__top,
.footer-section__text,
.footer-section__payments {
  width: 100%;
  max-width: var(--content-narrow);
}

.footer-section__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-section__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--font-small-size) * var(--font-small-line-height));
}

.footer-section__payments {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Products Page — Wolna Mobile (146:4389) */

.products-page__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 112px 24px 64px;
  background-color: var(--color-gray-4);
}

.products-page__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-narrow);
  text-align: center;
}

.products-page__title-line {
  display: block;
  color: var(--color-gray);
}

.products-page__title-accent {
  display: block;
}

.products-page__enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

.products-page__intro {
  width: 100%;
  max-width: var(--content-text);
  text-align: center;
  color: var(--color-gray-2);
}

.products-page__intro p + p {
  margin-top: 0;
}

.products-page__intro-emphasis {
  color: var(--color-gray);
}

.products-page__cards {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.products-page__row {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

@media (max-width: 1279px) {
  .products-page__row {
    display: contents;
  }
}

.products-page__body .product-card,
.products-page__telegram {
  align-self: stretch;
}

@media (max-width: 1279px) {
  .products-page__enter .product-card.scroll-reveal,
  .products-page__cards .product-card.scroll-reveal {
    transform: none;
  }
}

@media (min-width: 1280px) {
  .products-page__body {
    gap: 48px;
    padding: var(--page-body-padding-top-with-header, 190px) var(--page-padding-x) var(--section-padding-block);
  }

  .products-page__enter {
    max-width: var(--content-narrow);
  }

  .products-page__enter .product-card--between {
    opacity: 0;
    transform: translateY(var(--scroll-reveal-offset));
    transition:
      opacity var(--scroll-reveal-duration) var(--scroll-reveal-easing),
      transform var(--scroll-reveal-duration) var(--scroll-reveal-easing);
    transition-delay: calc(var(--scroll-reveal-entry-delay) + var(--scroll-reveal-stagger) * 2);
  }

  .products-page__enter.is-active .product-card--between {
    opacity: 1;
    transform: none;
  }

  .products-page__cards {
    gap: 40px;
    max-width: var(--content-narrow);
  }

  .products-page__row {
    flex-direction: row;
    gap: 48px;
    align-items: stretch;
  }

  .products-page__enter .products-page__row {
    min-height: 455px;
    padding-top: 24px;
  }

  .products-page__cards .products-page__row:nth-child(1) {
    min-height: 430px;
  }

  .products-page__row .product-card,
  .products-page__row .products-page__telegram {
    flex: 1 0 0;
    min-width: 0;
  }

  .products-page__telegram.telegram-banner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    height: auto;
    padding: 40px;
  }

  .products-page__telegram .telegram-banner__logo {
    width: var(--products-telegram-logo-size);
    height: var(--products-telegram-logo-size);
  }

  .products-page__telegram .telegram-banner__content {
    align-items: flex-start;
    width: 100%;
    gap: 20px;
  }

  .products-page__telegram .telegram-banner__title {
    font-size: var(--font-h2-size);
    font-weight: var(--font-h2-weight);
    line-height: var(--font-h2-line-height);
    letter-spacing: var(--font-h2-letter-spacing);
    text-align: left;
  }

  .products-page__telegram .telegram-banner__subtitle {
    text-align: left;
  }
}

@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
  .products-page__enter .product-card--between {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Profile Page — Wolna Mobile (146:4236) */

.profile-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 64px var(--page-padding-x);
  background-color: var(--color-gray-4);
}

.profile-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-profile);
}

.profile-page__header .accordion-open-button {
  width: var(--profile-close-button-size);
  height: var(--profile-close-button-size);
}

.profile-page__title {
  color: var(--color-gray);
}

.profile-page__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: var(--content-profile);
}

.profile-page__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.profile-page__subscription {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.profile-page__column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.profile-page__body--new-user {
  align-items: stretch;
}

.profile-page__body[data-profile-panel][hidden] {
  display: none;
}

@media (min-width: 1280px) {
  .profile-page {
    gap: 48px;
    padding: var(--page-body-padding-top-with-header, 190px) var(--page-padding-x) var(--section-padding-block);
  }

  .profile-page__header .accordion-open-button__icon {
    width: 28px;
    height: 28px;
    background-size: 20px 20px;
  }

  .profile-page__body {
    gap: 32px;
  }

  .profile-page__row {
    flex-direction: row;
    gap: 32px;
    align-items: stretch;
  }

  .profile-page__subscription {
    gap: 32px;
  }

  .profile-page__row--main > .profile-page__column,
  .profile-page__row--stats .info-card {
    flex: 1 0 0;
    min-width: 1px;
    width: auto;
  }

  .profile-page__row--main > .profile-page__column {
    gap: 32px;
  }

  .profile-page__row--main > .profile-page__column .access-card {
    flex: 1 1 auto;
    height: 100%;
  }

  .profile-page__body--new-user .new-user-card {
    width: 50%;
  }
}

/* Policy Page — Policy Page Desktop (446:1329) / Policy Page (446:1360) */

.policy-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 64px var(--page-padding-x);
  background-color: var(--color-gray-4);
}

.policy-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-profile);
}

.policy-page__header .accordion-open-button {
  width: var(--profile-close-button-size);
  height: var(--profile-close-button-size);
}

.policy-page__title {
  color: var(--color-gray);
}

.policy-page__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: var(--content-profile);
}

@media (min-width: 1280px) {
  .policy-page {
    gap: 48px;
    padding: var(--page-body-padding-top-with-header, 190px) var(--page-padding-x) var(--section-padding-block);
  }

  .policy-page__header .accordion-open-button__icon {
    width: 28px;
    height: 28px;
    background-size: 20px 20px;
  }
}