/* ==========================================================================
   Main Stylesheet
   ========================================================================== */

/* Imports */
@import 'variables.css';
@import 'reset.css';
@import 'base.css';
@import 'layout.css';
@import 'components.css';

/* ==========================================================================
   Page-specific styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */

.hero {
  padding: var(--spacing-24) 0 0;
  text-align: center;
  overflow: hidden;
}

.hero__content {
  max-width: 768px;
  margin: 0 auto var(--spacing-16);
  padding: 0 var(--spacing-8);
}

.hero__title {
  margin-bottom: var(--spacing-4);
}

.hero__text {
  font-size: 20px;
  font-weight: var(--font-weight-normal);
  line-height: 30px;
  color: var(--color-text);  /* #535862 */
  margin-bottom: var(--spacing-12);
}

.hero__buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.button__icon {
  width: 24px;
  height: 24px;
}

/* Hero device mockup */
.hero__image {
  max-width: 1216px;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 1240 / 560;
}

.hero__device {
  border: 2px solid var(--color-button-border);  /* #D5D7DA */
  border-radius: 32px;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 8px;
  padding-bottom: 0;
  background-color: var(--color-white);
  box-shadow:
    0px 2px 2px -1px rgba(10, 13, 18, 0.04),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 12px 16px -4px rgba(10, 13, 18, 0.08);
}

.hero__device-inner {
  border-radius: 24px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  box-shadow:
    0px 0px 4px 2px rgba(10, 13, 18, 0.03) inset,
    0px 0px 6px 2px rgba(10, 13, 18, 0.08) inset;
}

.hero__device-screen {
  display: block;
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   Social Proof Section
   -------------------------------------------------------------------------- */

.social-proof {
  padding: var(--spacing-16) 0;
  text-align: center;
}

.social-proof__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--spacing-8);
}

.social-proof__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-10);
}

@media (min-width: 1024px) {
  .social-proof__logos {
    gap: var(--spacing-12);
  }
}

.social-proof__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-proof__logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .social-proof__logo img {
    max-height: 56px;
  }
}

/* --------------------------------------------------------------------------
   Features Section
   -------------------------------------------------------------------------- */

.features {
  padding: var(--spacing-20) 0;
}

.features__header {
  text-align: center;
  max-width: 768px;
  margin: 0 auto var(--spacing-16);
}

.features__label {
  display: inline-block;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-3);
}

.features__title {
  margin-bottom: var(--spacing-4);
}

.features__subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text);
}

/* Feature block — full-width layout (up to 1440px) */
.feature {
  display: grid;
  gap: var(--spacing-10);
  align-items: center;
  margin-bottom: var(--spacing-16);
  padding: 0 var(--spacing-4);
}

.feature:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .feature {
    padding: 0 var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .feature {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 55% 45%;
    gap: 0;
    padding: 0;
  }

  .feature--reverse {
    grid-template-columns: 45% 55%;
  }

  .feature--reverse .feature__content {
    grid-column: 2;
  }

  .feature--reverse .feature__image {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Feature content */
.feature__content {
  max-width: 560px;
}

@media (min-width: 1024px) {
  .feature__content {
    max-width: none;
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }

  .feature--reverse .feature__content {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
}

@media (min-width: 1280px) {
  .feature__content {
    padding-left: calc((100vw - 1216px) / 2);
  }

  .feature--reverse .feature__content {
    padding-left: var(--spacing-xl);
    padding-right: calc((100vw - 1216px) / 2);
  }
}

@media (min-width: 1440px) {
  .feature__content {
    padding-left: 112px;
  }

  .feature--reverse .feature__content {
    padding-right: 112px;
  }
}

.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-icon-bg);
  border-radius: var(--border-radius-full);
  margin-bottom: var(--spacing-5);
}

.feature__icon img {
  width: 24px;
  height: 24px;
}

.feature__title {
  font-size: 24px;
  margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
  .feature__title {
    font-size: var(--font-size-3xl);
  }
}

.feature__text {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--spacing-6);
}

/* Feature list */
.feature__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-left: var(--spacing-4);
}

.feature__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.feature__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* Feature image */
.feature__image {
  display: flex;
}

.feature__image-wrapper {
  width: 100%;
  background-color: var(--color-background-alt);
  overflow: hidden;
  padding-top: var(--spacing-4);
  padding-left: var(--spacing-4);
}

.feature--reverse .feature__image-wrapper {
  padding-left: 0;
  padding-right: var(--spacing-4);
}

.feature__img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--color-gray-50);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-12);
}

/* Footer top */
.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

@media (min-width: 768px) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.footer__logo {
  display: block;
}

.footer__logo-img {
  height: 80px;
  width: auto;
}

/* Subscribe form */
.footer__subscribe {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.footer__subscribe-title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin-bottom: 0;
}

.footer__subscribe-form {
  display: flex;
  gap: var(--spacing-2);
}

.footer__subscribe-input {
  height: 40px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 20px;  
  border: 1px solid var(--color-button-border);
  border-radius: var(--border-radius-md);
  min-width: 200px;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05); 
}

.footer__subscribe-input::placeholder {
  color: var(--color-text-muted);
}

.footer__subscribe-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Footer nav */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-8);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.footer__nav-link {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.footer__nav-link:hover {
  color: var(--color-text-heading);
}

/* Footer bottom */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-top: var(--spacing-8);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
  }
}

.footer__copyright {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 0;
}

.footer__legal {
  display: flex;
  gap: var(--spacing-4);
}

.footer__legal-link {
  font-size: 14px;
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--color-text-heading);
}

/* --------------------------------------------------------------------------
   Advantages Section
   -------------------------------------------------------------------------- */

.advantages {
  padding: var(--spacing-20) 0;
}

.advantages__header {
  text-align: center;
  max-width: 768px;
  margin: 0 auto var(--spacing-16);
}

.advantages__label {
  display: inline-block;
  font-size: var(--font-size-sm);  /* 14px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-3);
}

.advantages__title {
  margin-bottom: var(--spacing-4);
}

.advantages__subtitle {
  font-size: var(--font-size-xl);  /* 20px */
  color: var(--color-text);
}

/* Cards grid */
.advantages__grid {
  display: grid;
  gap: var(--spacing-2);
}

@media (min-width: 768px) {
  .advantages__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .advantages__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2);
  }
}

/* Card */
.advantages__card {
  text-align: center;
  padding: var(--spacing-2);
}

.advantages__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);  /* #E9EAEB */
  border-radius: 10px;  /* Figma: 10px */
  margin-bottom: var(--spacing-5);
}

.advantages__icon img {
  width: 24px;
  height: 24px;
}

.advantages__card-title {
  font-size: var(--font-size-xl);  /* 20px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-2);
}

.advantages__card-text {
  font-size: var(--font-size-base);  /* 16px */
  color: var(--color-text);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   FAQ Section
   -------------------------------------------------------------------------- */

.faq {
  padding: var(--spacing-20) 0;
}

.faq__header {
  text-align: center;
  max-width: 768px;
  margin: 0 auto var(--spacing-12);
}

.faq__title {
  margin-bottom: var(--spacing-4);
}

.faq__subtitle {
  font-size: var(--font-size-lg);  /* 18px */
  color: var(--color-text);
}

/* Accordion */
.faq__accordion {
  max-width: 768px;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item:last-child {
  border-bottom: none;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-6) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-lg);  /* 18px */
  font-weight: var(--font-weight-medium);  /* 500 */
  line-height: 28px;
  color: var(--color-text-heading);  /* #181D27 */
}

.faq__question span {
  flex: 1;
  padding-right: var(--spacing-4);
}

.faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.faq__icon--minus {
  display: none;
}

.faq__icon--plus {
  display: block;
}

.faq__item--active .faq__icon--minus {
  display: block;
}

.faq__item--active .faq__icon--plus {
  display: none;
}

.faq__answer {
  display: none;
  padding-bottom: var(--spacing-6);
}

.faq__item--active .faq__answer {
  display: block;
}

.faq__answer p {
  font-size: var(--font-size-base);  /* 16px */
  font-weight: var(--font-weight-normal);  /* 400 */
  line-height: 24px;
  color: var(--color-text);  /* #535862 */
  margin-bottom: 0;
}

/* Contact block */
.faq__contact {
  /* max-width: 768px; */
  margin: var(--spacing-16) 0 0;
  padding: var(--spacing-16) var(--spacing-8) var(--spacing-8);
  background-color: var(--color-background-alt);  /* #FAFAFA */
  border-radius: var(--border-radius-xl);  /* 16px */
  text-align: center;
}

.faq__contact-title {
  font-size: var(--font-size-xl);  /* 20px */
  font-weight: var(--font-weight-semibold);  /* 600 */
  line-height: 30px;
  color: var(--color-text-heading);  /* #181D27 */
  margin-bottom: var(--spacing-2);
}

.faq__contact-text {
  font-size: var(--font-size-lg);  /* 18px */
  font-weight: var(--font-weight-normal);  /* 400 */
  line-height: 28px;
  color: var(--color-text);  /* #535862 */
  margin-bottom: var(--spacing-6);
}