/* =========================================================
    EMAAA — styles.css (clean, mobile-first)
    Structure:
    1) Tokens & Base
    2) Elements / Helpers
    3) Layout (containers, visibility)
    4) Components (buttons, titles, utilities)
    5) Sections (Hero, Audience, Benefits, Compare, How, Test-Drive, Pricing, FAQ, Footer)
    6) Components (Modal)
    7) Breakpoints (>=980px, <=340px)
    ========================================================= */

/* ========== 1) TOKENS & BASE ========== */
:root{
  --brand-red: #F45B5B;
  --bg-beige: #FFF5EC;
  --text: #1D1D1F;

  /* original palette */
  --footer-accent: #fe7654;
  --gray-900: #1D1D1F;
  --gray-700: #333333;
  --gray-100: #ffffff;
  --gray-200: #eeeeee;
  --gray-300: #d7d7d7;
  --green: #28A745;
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }

body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background-color: #ffffff;
  line-height: 1.5;
}


/* БЛОК С СРАНЕНИЕМ ЕМАА И МЕНЕДЖЕР */
/* Единый по толщине значок «крестик» */
.sign{ display:inline-block; vertical-align:middle; line-height:0; }
.sign--x{
  width: 1.05em;              /* общий размер */
  height: 1.05em;
  position: relative;
}
.sign--x::before,
.sign--x::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 1em;               /* длина штриха */
  height: 0.16em;           /* толщина ≈ как у галочки */
  background: currentColor;
  border-radius: 999px;
  transform-origin:center;
}
.sign--x::before{ transform: translate(-50%,-50%) rotate(45deg); }
.sign--x::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* немного веса цветам, чтобы значки читались уверенно */
.table .text-red,
.table .text-green{ font-weight:700; }
/* Нейтральный цвет для "нет / не применимо / нежелательное 'да' " */
.text-muted{ color:#9AA3AF; }  /* можно чуть темнее: #6B7280 */



/* ========== 2) ELEMENTS / HELPERS ========== */
img{ max-width:100%; height:auto; display:block; }

/* Focus */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(244,91,91,.45);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Utilities */
.text-red{ color: var(--brand-red); }
.text-green{ color: var(--green); }

/* ========== 3) LAYOUT ========== */
.container{ max-width:1000px; margin:0 auto; padding:0 20px; }
.container--narrow{ max-width:600px; }
.container--wide{ max-width:1000px; }
.container--xl{ max-width:1200px; }

/* Visibility (mobile-first) */
.only-mobile{ display:block; }
.only-desktop{ display:none; }

/* ========== 4) COMPONENTS ========== */
.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  padding:16px 32px;
  border-radius:14px;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
  border: none;
  cursor: pointer;
}
.btn:active{ transform: translateY(1px) scale(.995); }

.btn--primary{ background-color:var(--brand-red); color:#fff; white-space:nowrap; }
.btn--primary:hover{ filter: brightness(.95); }

.btn--outline{ border:2px solid var(--brand-red); color:var(--brand-red); background:transparent; }
.btn--ghost{ background:transparent; color:var(--gray-900); }

.btn--chip{ border-radius:40px; padding:12px 24px; }
.btn--pill{ border-radius:999px; padding:14px 28px; }

/* Section titles */
.section-title{
  font-weight:800;
  margin:0 0 50px 0;
  color:var(--text);
  font-size:24px;              /* mobile base; desktop in @media */
}
.section-title--center{ text-align:center; }

/* ========== 5) SECTIONS ========== */

/* --- HERO --- */
.hero{ background-color:var(--bg-beige); }

/* logo/brand */
.hero__brand{
  font-size: clamp(35px, 3.2vw, 64px); /* было 30px */
  font-weight: 700;
  color: var(--brand-red);
  padding: 0 0 20px 0;
  white-space: nowrap; /* чтобы EMA! не переносился (опционально) */
}

/* desktop row scaffolding (doesn't harm mobile) */
.hero__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:40px;
}
.hero__col{ flex:1 1 300px; }
.hero__copy{ max-width:55%; }

.hero__title{ margin:0 0 20px 0; font-weight:700; color:var(--text); }
.hero__subtitle{ font-size:20px; color:var(--gray-700); margin:0 0 30px 0; }

.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero__media{ text-align:right; }
.hero__img{ width:100%; max-width:420px; height:auto; }

/* Mobile hero wrapper */
.hero__mobile-wrap{
  position:relative;
  width:100%;
  padding:80px 20px;
  overflow:hidden;
  background-color:var(--bg-beige);
}

/* keep text out from under the image on mobile */
.hero__mobile .container{
  position:relative;
  z-index:2;
  padding-right:160px;         /* from original */
}

.hero__title--mobile{ font-size:32px; font-weight:800; line-height:1.3; margin-bottom:20px; }
.hero__subtitle--mobile{ font-size:18px; font-weight:600; color:var(--gray-700); margin-bottom:30px; }

/* CTA chip group (mobile & can be reused) */
.hero__cta-group{
  display:inline-flex;
  background-color:#FFEFE7;
  border-radius:40px;
  overflow:hidden;
  padding:6px;
  align-items:stretch;         /* both buttons same height */
}
.hero__cta-group .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  line-height:1.2;
}

/* mobile bg illustration */
.hero__bg-image{
  position:absolute;
  bottom:0;
  right:-20px;
  width:300px;
  min-width:220px;
  height:auto;
  z-index:1;
  pointer-events:none;
}

/* --- AUDIENCE --- */
.audience{ background:#ffffff; padding:100px 20px; }
.audience .section-title{ margin-bottom:100px; text-align:center; }
.audience__cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:100px; }
.audience__card{ max-width:146px; text-align:center; }
.audience__img{ width:100%; max-width:145px; margin-bottom:16px; height:auto; }
.audience__text{ font-size:16px; font-weight:500; margin:0; }

/* --- BENEFITS (unified: one markup for all viewports) --- */
.benefits{ background-color: var(--bg-beige); }

/* base = mobile/tablet */
.benefits__mobile{ padding: 60px 20px; }

.benefits__icons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.benefits__icon{
  flex: 0 1 140px;           /* карточка держит ширину, но переносится */
  text-align: center;
}

.benefits__circle{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #FFF;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.benefits__icon-img{ width: 36px; height: 36px; }
.benefits__icon-text{ font-size: 16px; color: #333; font-weight: 500; }

/* --- COMPARE TABLE (better mobile + card look) --- */
.compare{ background:#ffffff; padding:100px 20px; }
.compare .section-title{ margin-bottom: 28px; }

.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;     /* плавный скролл на iOS */
  overscroll-behavior-x: contain;
}

/* сама таблица — как «карточка» */
.table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: hidden;

  /* важно для мобилы: даём «запас» по ширине, чтобы не мялось */
  min-width: 640px;
}

/* базовая типографика */
.table th, .table td{
  padding:16px;
  font-size:16px;
  white-space: nowrap;               /* для «от 200 000 ₸» и т.п. */
}
.table tbody tr{ border-top:1px solid #eee; }

.table__th{ font-size:18px; }
.table__th--gray{ background:#e9e9e9; color:var(--text); }
.table__th--brand{ background:var(--brand-red); color:#fff; }

.table__cell-left{ display:flex; align-items:center; gap:10px; }
.table__cell-center{ text-align:center; }

/* ширины колонок (в сумме ~100%) */
.table th:first-child, .table td:first-child{ width:80%; }
.table th:nth-child(2), .table td:nth-child(2){ width:22%; }
.table th:nth-child(3), .table td:nth-child(3){ width:22%; }

/* фиксируем левый столбец при горизонтальном скролле */
.table th:first-child,
.table td:first-child{
  position: sticky;
  left: 0;
  background: #fff;               /* перекрыть фон при скролле */
  z-index: 2;
  box-shadow: 8px 0 12px -8px rgba(0,0,0,.08); /* лёгкая тень справа */
}

/* мобайл-тюнинг: чуть компактнее */
@media (max-width: 480px){
  .table{ min-width: 560px; }      /* можно 540–600 по вкусу */
  .table th, .table td{ padding:12px; font-size:15px; }
  .table__th{ font-size:16px; }
}

/* мелкие экраны — ещё компактнее */
@media (max-width:360px){
  .table{ min-width: 520px; }
  .table th, .table td{ padding:10px; font-size:14px; }
  .table__th{ font-size:15px; }
}

/* подпись под таблицей */
.compare__note{
  margin-top: 12px;
  font-size: 13px;
  color: #777;
  text-align: left;
}


/* --- HOW IT WORKS --- */
.how{ background-color:#FAF9F6; padding:100px 0; }
.how .section-title{ font-size:44px; margin-bottom:60px; }
.how__row{ display:flex; gap:40px; justify-content:center; flex-wrap:wrap; }
.how__card{ width:300px; background:#fff; border-radius:24px; box-shadow:0 4px 20px rgba(0,0,0,.05); padding:40px 28px; text-align:center; }
.how__badge{ width:60px; height:60px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; }
.how__badge--pink{ background-color:#FFE1E1; }
.how__badge--peach{ background-color:#FFECD3; }
.how__badge--mint{ background-color:#DCF1E7; }
.how__plus{ font-size:28px; font-weight:700; color:var(--brand-red); }
.how__gear{ font-size:24px; color:var(--brand-red); }
.how__ai{ font-size:22px; color:var(--brand-red); }
.how__title{ font-size:20px; font-weight:700; margin:0 0 8px 0; }
.how__text{ font-size:14px; color:#555; margin:0; }

/* --- TEST-DRIVE (NEW SECTION) --- */
.test-drive {
  background-color: #fff;
  padding: 100px 20px;
  text-align: center;
}
.test-drive__icon {
  font-size: 48px;
  margin-bottom: 24px;
}
.test-drive .section-title {
  margin-bottom: 16px;
}
.test-drive__subtitle {
  font-size: 18px;
  color: var(--gray-700);
  margin: 0 auto 16px;
  max-width: 450px;
  line-height: 1.6;
}
.test-drive__text {
  font-size: 16px;
  color: var(--gray-700);
  margin: 0 auto 32px;
  max-width: 450px;
  line-height: 1.6;
}

/* --- PRICING --- */
.pricing{ background: var(--bg-beige); padding:100px 0; }
.pricing .section-title{ font-size:44px; margin-bottom:60px; }
.pricing__row{ display:flex; flex-wrap:wrap; gap:40px; justify-content:center; }
.pricing__card{ width:300px; border-radius:24px; padding:32px 28px; display: flex; flex-direction: column; }
.pricing__card--blue{ background:#E6F0FB; }
.pricing__card--yellow{ background:#FFF2D8; position:relative; }
.pricing__card--red{ background:#FFD9D1; }
.pricing__badge{ position:absolute; top:-18px; left:24px; background:var(--brand-red); color:#fff; font-size:18px; padding:6px 12px; border-radius:30px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.pricing__name{ font-size:20px; font-weight:700; margin:0 0 8px 0; }
.pricing__price{ font-size:24px; font-weight:700; margin-bottom:16px; }
.pricing__quote{ background-color:#fff; border-radius:14px; padding:14px; font-size:14px; line-height:1.4; margin-bottom:16px; }
.pricing__list{ font-size:14px; line-height:1.7; padding-left:20px; margin:0; flex-grow: 1; }
.pricing__btn { width: 100%; margin-top: 24px; }
.pricing__notes{ max-width:800px; margin:40px auto 0; font-size:12px; color:var(--text); line-height:1.6; padding:0 20px; }
.pricing__asterisk{ color:var(--brand-red); }


/* --- FAQ (NEW STYLES) --- */
.faq{ background-color: #fff; padding: 100px 20px; }

/* Mobile: single column */
.faq-list{
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* карточка */
.faq-item{
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.faq-item:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,.07);
}

/* прячем стандартный маркер summary */
.faq-summary{
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  padding: 16px 48px 16px 20px;       /* справа место под стрелку */
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.faq-summary::-webkit-details-marker{ display:none; }

/* стрелка */
.faq-summary::after{
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--brand-red);
  transition: transform .3s ease;
}

/* при открытии поворачиваем стрелку */
.faq-item[open] .faq-summary::after{
  transform: translateY(-50%) rotate(45deg);
}

/* ответ */
.faq-answer{
  color: #555;
  font-size: 15px;
  line-height: 1.6;
  padding: 0 20px;
  overflow: hidden;
}
.faq-item[open] .faq-answer{
  padding: 0 20px 20px;
}


/* --- FOOTER (unified) --- */
.site-footer{ background-color: var(--footer-accent); color:#fff; }
.footer{ padding:60px 20px; }

.footer__grid{
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:center;
  text-align:center;
}

.footer__left{ max-width: 680px; }
.footer__right{ width:100%; display:flex; justify-content:center; }

.footer__title{
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 20px 0;
  color:#fff;
}

.footer__cta{ margin: 8px 0 24px; }

.footer__subtitle{
  font-size: 18px;
  font-weight: 600;
  margin: 6px 0 12px 0;
  color: #fff;
}

/* контакты */
.footer__contacts{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.footer__email a{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* соц-иконки — размеры и выравнивание */
.footer__socials{
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:center;
}
.footer__socials img{
  width: 32px;
  height: 32px;
  display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* показываем одну CTA на мобиле, вторую — на десктопе */
.footer__cta--desktop{ display:none; }
.footer__cta--mobile{ display:inline-flex; }

/* ========================================================= */
/* ===== 6) COMPONENTS (MODAL) ===== */
/* ========================================================= */

/* Оверлей (фон) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 29, 31, 0.8); /* var(--text) с прозрачностью */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* Показываем оверлей */
.modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Контентная часть окна */
.modal-content {
  background-color: #ffffff;
  padding: 32px;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.is-visible .modal-content {
  transform: translateY(0);
}

/* Кнопка "Закрыть" */
.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 0;
}
.modal-close-btn:hover {
  color: var(--text);
}

/* Заголовок окна */
.modal-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px 0;
  text-align: center;
  color: var(--text);
}

/* Стили для элементов формы */
.form-group {
  margin-bottom: 16px;
}
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #d7d7d7; /* var(--gray-300) */
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(244, 91, 91, 0.2);
}
.form-textarea {
  resize: vertical;
  min-height: 90px;
}

/* Кнопка "Отправить" в модальном окне */
.modal-submit-btn {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  font-size: 18px;
}
.modal-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Область для вывода результата отправки */
.form-result {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  text-align: center;
  font-weight: 500;
}
.form-result--success {
  background-color: #eaf7ec; /* Светло-зеленый */
  color: #28a745; /* var(--green) */
}
.form-result--error {
  background-color: #fdecec; /* Светло-красный */
  color: #dc3545; /* Bootstrap red */
}


/* ========== 7) BREAKPOINTS ========== */

/* Desktop ≥768px (планшеты и больше) */
@media (min-width: 768px) {
  /* Делаем FAQ в две колонки */
  .faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}


/* Desktop ≥980px */
@media (min-width:980px){
  .container{ padding:0 40px; }

  .only-mobile{ display:none; }
  .only-desktop{ display:block; }

  .section-title{ font-size:32px; }

  .hero__title{ font-size:48px; }

  /* desktop top padding for brand (fix) */
  .hero__desktop .hero__brand{ padding:100px 0 20px 0; }

  /* BENEFITS: scale-up on desktop */
  .benefits__mobile{ padding: 100px 20px; }
  .benefits .section-title{ font-size:44px; margin-bottom:60px; }
  .benefits__icons{ gap:56px; }
  .benefits__icon{ flex-basis:220px; }
  .benefits__circle{ width:120px; height:120px; }
  .benefits__icon-img{ width:56px; height:56px; }
  .benefits__icon-text{ font-size:18px; }

  /* FOOTER */
  .footer{ padding: 100px 20px; }
  .footer__grid{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    gap: 40px;
  }
  .footer__left{ max-width: 600px; }
  .footer__right{ width:auto; }

  .footer__title{ font-size: 32px; margin-bottom: 16px; }
  .footer__contacts{ justify-items: start; }
  .footer__socials{ justify-content:flex-start; }
  .footer__socials img{ width:36px; height:36px; }

  .footer__cta--desktop{ display:inline-flex; }
  .footer__cta--mobile{ display:none; }
}

/* Tiny screens ≤340px (optional tweak) */
@media (max-width:340px){
  .hero__cta-group .btn{
    font-size:15px;
    padding:10px 20px;
  }
}