* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #fff;
  color: #111;
  padding: 20px;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.logo {
  font-weight: bold;
  font-size: 20px;
}
.cta {
  background-color: #25D366;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
}
h1 {
  font-size: 24px;
  margin-bottom: 10px;
}
.subtext {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
}
.card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.card.popular {
  border: 2px solid orange;
  background-color: #fffbe6;
}
.price {
  font-size: 18px;
  font-weight: bold;
}
ul, ol {
  margin: 12px 0;
  padding-left: 20px;
}
.faq details {
  margin-top: 12px;
}
footer {
  margin-top: 30px;
  text-align: center;
}

  /* --- Reset & Base --- */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; font-size: 16px; /* Базовый размер шрифта */ }
  body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #ffffff; /* #ffffff */
      color: #111111; /* #111111 */
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden; /* Предотвращение горизонтального скролла */
  }

  /* --- Variables & Utilities --- */
  :root {
      --color-primary: #25D366; /* WhatsApp Green #25D366 */
      --color-text: #111111;
      --color-text-secondary: #555555;
      --color-bg: #ffffff;
      --color-bg-alt: #f7f9fa; /* Slightly off-white for sections */
      --color-border: #e1e6ea;
      --border-radius: 12px; /* Consistent border radius */
      --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.05);
      --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.08);
  }
  .container {
      max-width: 700px; /* Slightly wider for better readability */
      margin: 0 auto;
      padding: 0 20px;
  }
  section {
      padding: 50px 0; /* Consistent vertical padding */
  }
  section:nth-of-type(odd) { /* Чередование фона секций */
      background-color: var(--color-bg-alt);
  }
  section:first-of-type { /* Убираем фон у первой секции */
       background-color: var(--color-bg);
       padding-top: 60px;
  }
   section:last-of-type { /* Отступ перед футером */
       padding-bottom: 60px;
   }

  h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin-bottom: 0.75em; font-weight: 700; color: var(--color-text); }
  h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); /* Responsive H1 */ text-align: center; }
  h2 { font-size: clamp(1.5rem, 4vw, 2rem); /* Responsive H2 */ text-align: center; margin-bottom: 1.5em; }
  h3 { font-size: 1.25rem; font-weight: 600; }
  p { margin-bottom: 1em; color: var(--color-text-secondary); }
  a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; }
  a:hover { color: #1DAE55; /* Darker green */ }
  ul, ol { list-style: none; padding: 0; }

  /* --- Hero Section --- */
  .hero { text-align: center; padding-bottom: 40px; }
  .hero .subheadline { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 550px; margin: 0 auto 2em; }
  .cta-button {
      display: inline-flex; /* Use flex for icon alignment */
      align-items: center;
      justify-content: center;
      background-color: var(--color-primary);
      color: #ffffff;
      padding: 16px 35px;
      border-radius: 50px; /* Fully rounded */
      font-weight: 600;
      font-size: 1.05rem;
      transition: background-color 0.3s ease, transform 0.2s ease;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3); /* Subtle green shadow */
  }
  .cta-button .icon { /* Style for icon inside button */
      margin-right: 10px;
      font-size: 1.2em; /* Adjust icon size */
      line-height: 1;
  }
  .cta-button:hover { background-color: #1DAE55; transform: translateY(-2px); }
  .cta-button:active { transform: translateY(0); }

  /* --- Benefits Section --- */
  .benefits-list { display: grid; gap: 20px; }
  /* Optional: 2 columns on wider mobile/tablet */
   @media (min-width: 550px) { 
      .benefits-list { grid-template-columns: repeat(2, 1fr); }
   }
  .benefit-item {
      background-color: var(--color-bg);
      padding: 25px;
      border-radius: var(--border-radius);
      border: 1px solid var(--color-border);
      display: flex;
      flex-direction: column; /* Stack icon and text vertically */
      align-items: center; /* Center icon */
      text-align: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
   .benefit-item:hover {
       transform: translateY(-3px);
       box-shadow: var(--shadow-light);
   }
  .benefit-item .icon {
      font-size: 2rem; /* Larger icons */
      margin-bottom: 15px;
      color: var(--color-primary);
      line-height: 1;
  }
  .benefit-item h4 { /* Title for benefit */
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--color-text);
  }
  .benefit-item p { font-size: 0.95rem; margin-bottom: 0; color: var(--color-text-secondary); }

  /* --- Pricing Section --- */
  .pricing-cards {
      display: grid;
      gap: 25px;
       /* Single column by default */
      grid-template-columns: 1fr; 
  }
   /* Two columns layout for tablets and up */
   @media (min-width: 600px) {
      .pricing-cards { grid-template-columns: repeat(2, 1fr); }
  }
  .price-card {
      background-color: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--border-radius);
      padding: 30px;
      text-align: center;
      display: flex;
      flex-direction: column; /* Ensure button is at bottom */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative; /* For the popular label */
  }
  .price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
  .price-card.popular {
      border: 2px solid var(--color-primary);
      box-shadow: 0 8px 25px rgba(37, 211, 102, 0.15); /* Highlight shadow */
  }
  .popular-label {
      position: absolute;
      top: -14px; /* Position above the card */
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--color-primary);
      color: white;
      padding: 5px 15px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
      white-space: nowrap;
  }
  .price-card .package-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: var(--color-text); }
  .price-card .package-price { font-size: 2.2rem; font-weight: 700; color: var(--color-text); margin-bottom: 20px; line-height: 1.1; }
  .price-card .package-price span { font-size: 1rem; font-weight: 400; color: var(--color-text-secondary); }
  .price-card ul {
      list-style: none; padding: 0; margin-bottom: 25px; text-align: left; color: var(--color-text-secondary); font-size: 0.95rem;
      flex-grow: 1; /* Push button down */
  }
  .price-card ul li { margin-bottom: 10px; padding-left: 25px; position: relative; }
  .price-card ul li::before {
      content: '✓'; color: var(--color-primary); position: absolute; left: 0; font-weight: bold; font-size: 1.1em;
  }
  .price-card .order-button { /* Use same style as main CTA but maybe slightly smaller */
      display: inline-flex; align-items: center; justify-content: center;
      background-color: var(--color-primary); color: #ffffff; padding: 14px 30px; border-radius: 50px;
      font-weight: 600; font-size: 1rem; transition: background-color 0.3s ease; border: none; cursor: pointer;
      margin-top: auto; /* Sticks to bottom if flex-grow is on ul */
  }
  .price-card .order-button:hover { background-color: #1DAE55; }
  /* Hidden Packages Styling */
  .hidden-packages { margin-top: 35px; text-align: center; border-top: 1px solid var(--color-border); padding-top: 25px; }
  .hidden-packages p { font-size: 0.9rem; color: var(--color-text-secondary); }
  .hidden-packages a { font-weight: 600; margin: 0 5px; }

  /* --- How It Works Section --- */
  .how-it-works ol { list-style: none; counter-reset: steps-counter; padding-left: 0; max-width: 550px; margin: 0 auto; position: relative; }
   /* Vertical connecting line */
  .how-it-works ol::before {
      content: ''; position: absolute; left: 15px; top: 15px; bottom: 15px; width: 2px;
      background: linear-gradient(to bottom, var(--color-primary), var(--color-primary) 80%, transparent);
       background-size: 2px 10px; /* Creates dashed effect */
      z-index: 0;
  }
  .how-it-works li {
      counter-increment: steps-counter; position: relative; padding-left: 50px; /* More space for number */
      margin-bottom: 30px; font-size: 1rem; z-index: 1;
  }
  .how-it-works li::before { /* Styled step number */
      content: counter(steps-counter); position: absolute; left: 0px; top: -3px;
      width: 32px; height: 32px; background-color: var(--color-primary); color: white;
      border-radius: 50%; display: flex; justify-content: center; align-items: center;
      font-weight: bold; font-size: 1rem; line-height: 32px;
       border: 3px solid var(--color-bg-alt); /* Border matching the background */
      z-index: 1;
  }
  .how-it-works li strong { display: block; font-weight: 600; margin-bottom: 5px; color: var(--color-text); font-size: 1.1rem; }
  .how-it-works li p { font-size: 0.95rem; color: var(--color-text-secondary); margin-bottom: 0; } /* Add paragraph inside li */

  /* --- FAQ Section --- */
  .faq details {
      background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius);
      margin-bottom: 15px; overflow: hidden; /* Prevents content overflow on animation */
  }
  .faq summary {
      font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
      padding: 20px; font-size: 1.1rem; color: var(--color-text); transition: background-color 0.2s ease;
  }
  .faq summary::-webkit-details-marker { display: none; }
   .faq summary:hover { background-color: #f0f0f0; }
  .faq summary::after { /* Custom icon */
      content: '+'; font-size: 1.5rem; color: var(--color-primary); font-weight: bold;
      transition: transform 0.3s ease; margin-left: 10px;
  }
  .faq details[open] summary { background-color: #e9fbf0; /* Light green background when open */ }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details .faq-answer { /* Content inside details */
      padding: 0px 20px 20px 20px; font-size: 0.95rem; color: var(--color-text-secondary);
      border-top: 1px solid var(--color-border); margin-top: 10px; padding-top: 20px;
  }
  .faq details .faq-answer p:last-child { margin-bottom: 0; }

  /* --- Blog Preview Section (New) --- */
  .blog-preview-cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
   @media (min-width: 550px) { 
       .blog-preview-cards { grid-template-columns: repeat(2, 1fr); } 
   }
  .blog-card { 
      background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius);
      overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column;
  }
  .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-light); }
  .blog-card img { /* Placeholder for image */
       display: block; width: 100%; height: 150px; background-color: #e0e0e0; /* Placeholder color */
       object-fit: cover; /* If using real images */
   }
  .blog-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
  .blog-card-content h4 { font-size: 1.1rem; margin-bottom: 10px; color: var(--color-text); }
  .blog-card-content p { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 15px; flex-grow: 1; }
  .blog-card-content .read-more { 
      color: var(--color-primary); font-weight: 600; font-size: 0.9rem; display: inline-block; margin-top: auto;
  }
   .blog-card-content .read-more:hover { text-decoration: underline; }

  /* --- Footer --- */
  .footer {
      background-color: var(--color-text); /* Dark footer */
      color: #a0a0a0; /* Light gray text */
      padding: 40px 0; text-align: center; font-size: 0.9rem; margin-top: 0; /* Remove top margin if last section has padding */
  }
  .footer .container { padding: 0 20px; }
  .footer p { margin-bottom: 10px; color: #a0a0a0; }
  .footer strong { color: #ffffff; }
  .footer a { color: #ffffff; text-decoration: none; margin: 0 10px; }
  .footer a:hover { color: var(--color-primary); }
  .footer .footer-links { margin-bottom: 15px; }

  /* --- Гео/SEO Section --- */
  .geo-seo {
      background-color: #ffffff; /* Или #f9f9f9 для легкого выделения */
      /* padding: 40px 0; уже задано для section */
  }

  .geo-seo .section-description {
      text-align: center;
      color: #555;
      margin-bottom: 30px; /* Отступ после описания */
      font-size: 15px;
  }

  .article-cards {
      display: flex;
      flex-direction: column; /* Карточки друг под другом на мобильных */
      gap: 20px; /* Отступ между карточками */
      margin-bottom: 30px; /* Отступ после карточек */
  }

  .article-card {
      background-color: #f9f9f9; /* Фон карточки */
      border: 1px solid #eee;
      border-radius: 10px; /* Закругленные углы */
      padding: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .article-card:hover {
       transform: translateY(-3px);
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  .article-card h3 {
      font-size: 18px; /* Чуть меньше основного H3 */
      margin-bottom: 10px;
      color: #111111;
  }

  .article-card p {
      font-size: 14px;
      color: #333;
      margin-bottom: 0; /* Убираем отступ у параграфа в карточке */
  }
  
  /* Опционально: стиль для ссылки "Подробнее" */
  /* .article-card .read-more {
      display: inline-block;
      margin-top: 15px;
      font-size: 14px;
      font-weight: 600;
      color: #25D366;
  } */

  .seo-text {
      margin-top: 30px; /* Отступ перед SEO-текстом */
      padding-top: 20px;
      border-top: 1px solid #eee; /* Легкий разделитель */
      font-size: 13px; /* Мелкий шрифт для SEO текста */
      color: #777; /* Серый цвет, менее заметный */
      line-height: 1.7; /* Улучшенная читаемость */
  }

  .seo-text p {
      margin-bottom: 15px;
  }
  
  /* Адаптация для десктопов (пример) */
  @media (min-width: 768px) {
      .article-cards {
          flex-direction: row; /* Карточки в ряд */
          justify-content: space-between; /* Распределение по ширине */
      }
       .article-card {
           width: calc(33.333% - 15px); /* Примерно 3 карточки в ряд с отступом */
      }
  }
  
  @media (min-width: 992px) { /* Для еще больших экранов, если нужно */
       .article-card {
           width: calc(33.333% - 20px); 
      }
      .container{
          max-width: 1000px;
      }
  }

  /* Стили для Article Cards обновленные */

  .article-cards {
      display: flex;
      flex-direction: column; /* Мобильные */
      gap: 25px; /* Увеличим отступ */
      margin-bottom: 40px; /* Отступ после карточек */
  }

  .article-card { /* Теперь это ссылка <a> */
      display: block; /* Чтобы ссылка вела себя как блок */
      text-decoration: none; /* Убираем подчеркивание ссылки */
      background-color: #f9f9f9; 
      border: 1px solid #eee;
      border-radius: 12px; /* Чуть больше скругление */
      overflow: hidden; /* Скрываем все, что выходит за рамки скругления */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .article-card:hover {
       transform: translateY(-5px); /* Эффект приподнимания */
       box-shadow: 0 6px S15px rgba(0, 0, 0, 0.08); /* Тень поярче */
  }

  .article-card img {
      display: block; /* Убираем лишние отступы под картинкой */
      width: 100%; /* Картинка на всю ширину карточки */
      height: 180px; /* Фиксированная высота для единообразия */
      object-fit: cover; /* Масштабирует картинку, сохраняя пропорции и обрезая лишнее */
      /* border-bottom: 1px solid #eee; /* Можно добавить тонкую линию под фото */
  }

  .article-card .card-content {
      padding: 20px; /* Отступы вокруг текста */
  }

  .article-card h3 {
      font-size: 18px; 
      margin-top: 0; /* Убираем верхний отступ, если есть */
      margin-bottom: 10px;
      color: #111111; /* Явный цвет заголовка (не синий ссылочный) */
  }

  .article-card p {
      font-size: 14px;
      color: #333; /* Явный цвет текста */
      margin-bottom: 0; 
      line-height: 1.5; /* Межстрочный интервал для текста */
  }
  
  /* --- Адаптация для десктопов --- */
  @media (min-width: 768px) {
      .article-cards {
          flex-direction: row; /* Карточки в ряд */
          justify-content: space-between; 
          align-items: stretch; /* Выравнивание карточек по высоте */
      }
       .article-card {
           width: calc(33.333% - 18px); /* Три карточки в ряд с отступом (gap / 1.5) */
           /* Если нужно 2 в ряд, то calc(50% - 12.5px) */
           display: flex; /* Используем flex для внутреннего выравнивания */
           flex-direction: column; /* Внутренние элементы друг под другом */
      }
       .article-card .card-content {
          flex-grow: 1; /* Позволяет текстовому блоку занять все доступное пространство по высоте */
          display: flex;
          flex-direction: column;
       }
       .article-card .card-content p {
           flex-grow: 1; /* Параграф будет растягиваться, выравнивая низ карточек */
       }
  }
  
  /* Можно добавить еще @media для больших экранов, если нужно */
  /* @media (min-width: 992px) { ... } */