/* ============================================================
   ДОПОЛНЕНИЯ К style.css ПОД НОВУЮ СТРУКТУРУ
   (модалка «С чем помочь», карточки-сценарии, статусы, фильтры).
   Использует те же переменные-токены, что и style.css — визуал единый.
   ============================================================ */

/* ---------- Кнопка в шапке ---------- */
.header-cta{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;
  font-size:.8rem;padding:8px 14px;border-radius:8px;text-decoration:none;
  background:var(--graphite);color:var(--white);white-space:nowrap;
  border:none;cursor:pointer;transition:background .15s ease;
}
.header-cta:hover{background:var(--amber-dark)}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
@media (max-width:960px){ .header-cta{display:none} }

/* ---------- Три сценария (первый экран) ---------- */
.scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.scenario{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;display:flex;flex-direction:column;text-decoration:none;color:var(--graphite);
  transition:transform .2s ease,box-shadow .2s ease;
}
.scenario:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(27,31,36,.10)}
.scenario .num{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--muted);letter-spacing:.06em}
.scenario h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.15rem;margin:12px 0 8px}
.scenario p{font-size:.9rem;color:var(--muted);flex:1}
.scenario .go{
  margin-top:16px;font-family:'Oswald',sans-serif;text-transform:uppercase;
  font-size:.85rem;letter-spacing:.03em;border-bottom:2px solid var(--graphite);
  align-self:flex-start;padding-bottom:2px;
}
.scenario:hover .go{border-bottom-color:var(--amber-dark)}
@media (max-width:960px){ .scenarios{grid-template-columns:1fr} }

/* ---------- Модалка «С чем вам помочь» ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:200;background:rgba(15,17,20,.55);
  display:flex;align-items:flex-start;justify-content:center;padding:20px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
}
.modal-backdrop.open{opacity:1;visibility:visible}
.modal{
  background:var(--white);border-radius:var(--radius);width:100%;max-width:460px;margin:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.35);border-top:5px solid var(--amber);
  padding:28px 26px;transform:translateY(12px);transition:transform .2s ease;
}
.modal-backdrop.open .modal{transform:none}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.modal-head h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.3rem;font-weight:600}
.modal-close{background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.modal-close:hover{color:var(--graphite)}
.modal .sub{font-size:.85rem;color:var(--muted);margin-bottom:16px}

.intent-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.intent-btn{
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.9rem;text-align:left;
  padding:14px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--concrete);
  cursor:pointer;transition:border-color .15s ease,background .15s ease;color:var(--graphite);
}
.intent-btn:hover{border-color:var(--graphite)}
.intent-btn.active{border-color:var(--amber-dark);background:var(--white);box-shadow:0 0 0 2px var(--amber-dark) inset}

.modal label{display:block;font-size:.78rem;font-weight:700;margin:14px 0 5px;text-transform:uppercase;letter-spacing:.05em}
.modal input:not([type=checkbox]),.modal textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;
  font:inherit;background:var(--concrete);
}
.modal input:focus,.modal textarea:focus{outline:2px solid var(--amber);border-color:var(--amber)}
.modal .btn{width:100%;text-align:center;margin-top:18px}
/* honeypot — прячем от людей, видно только ботам */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Статусы карточек (готовые дома / проверка) ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;border:1px solid var(--line);color:var(--muted);
}
.tag.checked{border-color:var(--graphite);color:var(--graphite)}
.tag.checked::before{content:"✓";font-weight:700}
.tag.status{background:var(--concrete)}

/* ---------- Чипы-фильтры (наши работы) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px}
.chip{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;
  padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);
  cursor:pointer;color:var(--graphite);transition:border-color .15s ease,background .15s ease;
}
.chip:hover{border-color:var(--graphite)}
.chip.active{background:var(--graphite);color:var(--white);border-color:var(--graphite)}

/* ---------- Чеклист (экспертиза) ---------- */
.checklist{list-style:none;display:grid;gap:10px;margin-top:14px}
.checklist li{padding-left:26px;position:relative;font-size:.95rem;color:var(--muted)}
.checklist li::before{
  content:"";position:absolute;left:0;top:7px;width:12px;height:12px;
  border:2px solid var(--graphite);border-radius:3px;
}
.dark-section .checklist li{color:#B8BDC4}
.dark-section .checklist li::before{border-color:#fff}

/* ---------- Компактная контактная строка под формой ---------- */
.alt-contact{font-size:.82rem;color:var(--muted);margin-top:14px;text-align:center}
.alt-contact a{color:var(--graphite);font-weight:600;text-decoration:underline}

/* ---------- Мелкая заметка «данные — переменные» ---------- */
.note-var{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);margin-top:10px}

/* ---------- Cookie-уведомление (компактная карточка слева снизу) ---------- */
.cookie-bar{
  position:fixed;left:18px;top:90px;z-index:190;
  width:min(280px,calc(100vw - 36px));
  background:rgba(27,31,36,.96);color:#D7DBDF;padding:12px 14px;border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:transform .28s ease,opacity .28s ease;
}
.cookie-bar.show{transform:none;opacity:1;pointer-events:auto}
.cookie-bar p{font-size:.7rem;line-height:1.4;margin:0;flex:1;min-width:150px}
.cookie-bar a{color:#fff;text-decoration:underline}
.cookie-bar .btn{padding:7px 16px;font-size:.72rem;flex-shrink:0}
@media (max-width:680px){
  .cookie-bar{left:12px;top:80px;width:min(280px,calc(100vw - 24px))}
}

/* ---------- Плавающая кнопка связи (мессенджеры) ---------- */
.chat-fab{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chat-fab-menu{display:none;flex-direction:column;gap:10px}
.chat-fab.open .chat-fab-menu{display:flex}
.chat-fab-item{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--white);color:var(--graphite);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px 9px 12px;text-decoration:none;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;
  box-shadow:0 8px 24px rgba(27,31,36,.16);transition:transform .15s ease,border-color .15s ease;
}
.chat-fab-item:hover{transform:translateY(-2px);border-color:var(--graphite)}
.chat-fab-item svg{width:20px;height:20px;flex-shrink:0}
.chat-fab-toggle{
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:var(--graphite);color:var(--white);
  box-shadow:0 10px 28px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .15s ease;
}
.chat-fab-toggle:hover{background:var(--amber-dark);transform:translateY(-2px)}
.chat-fab-toggle svg{width:28px;height:28px}
.chat-fab-toggle .ic-close{display:none}
.chat-fab.open .chat-fab-toggle .ic-chat{display:none}
.chat-fab.open .chat-fab-toggle .ic-close{display:block}
/* на мобильном поднимаем над липкой кнопкой звонка */
@media (max-width:680px){ .chat-fab{right:16px;bottom:88px} }
@media (max-width:420px){
  .intent-grid{grid-template-columns:1fr}
  .modal{padding:24px 18px}
}