:root{
  --brand:#82D4D9;
  --title:#646997;
  --bg:#f6f7fb;
  --card:#fff;
  --text:#111;
  --muted:#6b7280;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{max-width:1200px;margin:0 auto;padding:16px}

/* ========== HERO ========== */
.hero {
  position: relative;
  text-align: center;
  margin-bottom: 6px;
  padding-top: 60px;
}

.hero-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
}


.phone-link{font-size:22px;background:#fff;padding:8px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;text-decoration:none;border-bottom:none}
/* Кнопка меню */
.menu-btn{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;       /* точное центрирование */
  background:#fff;
  border:0;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  cursor:pointer;
  padding:0;                /* важно: убираем внутренние отступы */
}

/* Внутренний символ меню */
.menu-icon{
  display:block;
  line-height:1;            /* отключаем влияние baseline */
  font-size:20px;
  transform: translateY(1px); /* лёгкая оптическая правка ↓ */
}


.main-title{margin:12px 0 4px;font-weight:900;font-size:3rem;letter-spacing:.5px;text-transform:uppercase;color:#a592f9}
.lead{margin:0 0 16px;font-size:22px;font-weight:700;color:#3c0464}
@media (max-width: 768px) {
  .lead {
    font-size: 18px;
  }
}


/* баннеры
.benefits{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:nowrap;margin:18px 0 8px;max-width:100%;overflow:hidden;padding:0 10px}
.benefits img{height:120px;object-fit:contain;width:auto;max-width:45%}
*/

.benefits {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content); /* 👈 фиксированная ширина колонок */
  gap: 14px;
  justify-content: center;  /* центрируем всю сетку */
  align-items: center;
}

.benefit-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefit-item img {
  width: 100%;
  max-width: 350px;  /* 👈 регулируй этот параметр под размер на телефоне */
  height: auto;
  object-fit: contain;
  display: block;
}

/* 📱 Можно немного увеличить на широких экранах */
@media (min-width: 600px) {
  .benefit-item img {
    max-width: 400px;
  }
}




/* надпись */
.region-line{margin-top:8px;font-weight:800;font-size:22px;text-align:center;color:#3c0464;line-height:1.3}

/* ========== GRID ========== */
.cards{margin-top:8px}
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"iphone iphone" "mac samsung" "trade trade" "watch ps";
}
.tile{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.09);cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center}
.tile:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.12)}
.tile img{width:100%;height:100%;object-fit:cover}
.square{aspect-ratio:1/1}
.wide{aspect-ratio:2/1}
.tile-iphone{grid-area:iphone}.tile-mac{grid-area:mac}.tile-samsung{grid-area:samsung}.tile-trade{grid-area:trade}.tile-watch{grid-area:watch}.tile-ps{grid-area:ps}

/* ========== STEPS ========== */
.steps{text-align:center;margin-top:30px}
.steps h2{margin:20px 0 10px}
.chip-container{max-width:1000px;margin:0 auto 10px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.condition-block{margin:18px 0 8px}
.condition-block p{margin:0 0 8px;font-weight:600}
.option-btn,.btn{border:0;cursor:pointer;border-radius:12px;padding:10px 16px;font-size:15px;transition:filter .15s,background .15s,color .15s}
.option-btn{background:#eef3ff}
.option-btn:hover{filter:brightness(.96)}
.option-btn.selected{background:var(--brand);color:#fff}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.btn.primary.full{width:100%;padding:14px 18px;font-size:16px}
#sell-btn{margin:30px auto 0;display:block;padding:30px 60px;font-size:24px;border-radius:20px}

/* утилита */
.hidden{display:none!important}

/* ========== MODALS (общие) ========== */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px 10px;z-index:9999;overflow-y:auto;-webkit-overflow-scrolling:touch
}
.modal.hidden{display:none!important}
.modal-content{
  position:relative;background:#fff;width:100%;max-width:750px;border-radius:20px;
  padding:30px;box-shadow:0 22px 60px rgba(0,0,0,.25);text-align:left;font-size:1.2rem;
  margin:40px 0;max-height:90vh;overflow-y:auto
}
.close-btn{position:sticky;top:0;float:right;font-size:30px;font-weight:600;cursor:pointer;background:#fff;padding:4px 10px;border-bottom-left-radius:8px;z-index:2}
.close-btn:hover{color:#000}

/* ===== Форма контактов (внутри #modal) ===== */
#modal .modal-content{display:flex;flex-direction:column;align-items:stretch;gap:16px}
#modal .modal-content h2{margin:0 0 4px}
#modal .modal-content p{margin:0;font-size:.95rem;color:#444}

/* поля: только текстовые и textarea! (checkbox НЕ трогаем) */
#contact-form{display:flex;flex-direction:column;gap:12px}
#contact-form .field{display:flex;flex-direction:column;gap:6px}
#contact-form input[type="text"],
#contact-form input[type="tel"],
#contact-form textarea{
  width:100%;border:1px solid #ddd;border-radius:10px;padding:10px 12px;font-size:14px;background:#f9fafb
}
#contact-form textarea{resize:vertical;min-height:60px}

/* чекбоксы */
.checks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px;font-size:15px}
.checks span{font-weight:500;margin-right:8px}
.checks label{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;line-height:1.2}

/* кастомный checkbox */
.checks input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  display:inline-block;width:18px;height:18px;border:2px solid #3c0464;border-radius:4px;
  cursor:pointer;position:relative;vertical-align:middle;background:#fff;flex-shrink:0
}
.checks input[type="checkbox"]:checked{background-color:#3c0464;border-color:#3c0464}
.checks input[type="checkbox"]:checked::after{
  content:"";position:absolute;top:2px;left:5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)
}

/* кнопка отправки */
#contact-form button[type="submit"]{
  background:var(--brand);color:#fff;border:none;padding:12px 20px;border-radius:10px;font-size:16px;cursor:pointer;transition:background .15s
}
#contact-form button[type="submit"]:hover{background:#70c7cd}

/* ========== ABOUT modal текст ========== */
.about-text p{margin-bottom:1em;text-indent:1.5em;line-height:1.6}
.about-text ul{margin:0 0 1em 2em;padding:0}
.about-text li{margin-bottom:.5em}

/* ========== Адаптация ========== */
@media (max-width:768px){
  .main-title{font-size:2.4rem}
  .benefits-grid{max-width:420px; gap:12px;}
  .benefit-item img{width:95%; max-width:220px; height:auto;}
  .region-line{font-size:18px}

  .grid{grid-template-columns:repeat(2,1fr);grid-template-areas:"iphone iphone" "mac samsung" "trade trade" "watch ps"}
  .wide{aspect-ratio:1.8/1}

  .modal-content{max-width:95%;padding:20px;font-size:1rem;margin:20px 0}
  .close-btn{font-size:26px;padding:4px 8px}
  #modal .modal-content{gap:14px}
  #contact-form input[type="text"],
  #contact-form input[type="tel"],
  #contact-form textarea{font-size:.9rem}
  .checks{font-size:14px;gap:6px 12px}
  .checks input[type="checkbox"]{width:16px;height:16px}
  .checks input[type="checkbox"]:checked::after{top:2px;left:4px;width:3px;height:7px}
}
.subtitle-small {
  font-size: 0.85em; /* или 0.9em — подбери под себя */
  letter-spacing: 0.5px; /* чтобы смотрелось аккуратнее */
  display: inline-block;
}



/* ===== СЕКЦИЯ "Как мы работаем?" ===== */
.how-it-works {
  text-align: center;         /* выравнивание содержимого по центру */
  margin: 40px auto 20px;     /* отступы сверху и снизу */
  max-width: 700px;          /* ограничение ширины блока, чтобы на ПК не расползалось */
  padding: 0 15px;
}

.how-it-works h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #3c0464 !important;  /* одинаковый сиреневый цвет везде */
  font-weight: 700;
}

.how-it-works ol {
  text-align: left;          /* текст в списке читается лучше по левому краю */
  display: inline-block;     /* чтобы список был по центру всей секции */
  margin: 0 auto 10px;
  padding-left: 20px;
  font-size: 1rem;
  line-height: 1.5;
}

.policy-link {
  display: inline-block;
  font-size: 0.8rem;         /* в 2 раза меньше обычного */
  color: #3c0464;
  text-decoration: underline;
  opacity: 0.7;             /* полупрозрачность */
  transition: opacity 0.2s;
}

.policy-link:hover {
  opacity: 1;
}