/* ================================================================
   head.css · сервис ремонта ASIC, Кемерово
   Куда вставлять: Tilda → Настройки страницы → Дополнительно →
   "HTML-код в HEAD страницы" — обернуть всё в …</style>.
   ИЛИ: Настройки сайта → "HTML-код для шапки сайта" (если стиль
   нужен на всех страницах).

   Все имена скоуплены префиксом .asic-, чтобы не конфликтовать
   с классами Tilda (.t-, .tn-, .t396-).
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* поверхности */
  --asic-bg:#0E1116;
  --asic-surface:#171B22;
  --asic-surface-2:#1F242D;
  --asic-border:#2A313B;

  /* текст */
  --asic-text:#E8EBEF;
  --asic-muted:#9AA4B2;

  /* акцент / статусы */
  --asic-accent:#F2920D;
  --asic-accent-hover:#FFA833;
  --asic-on-accent:#1A1206;
  --asic-success:#34D399;
  --asic-danger:#F87171;

  /* шрифты */
  --asic-font-display:'Saira Condensed', Impact, system-ui, sans-serif;
  --asic-font-body:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --asic-font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* радиусы */
  --asic-r-sm:6px;
  --asic-r-md:10px;
  --asic-r-lg:16px;

  /* контейнер */
  --asic-wrap-max:1120px;

  /* TODO: финальный срок гарантии не выбран (30 дн vs 3 мес).
     Меняй текст в блоках hero / utp / faq вручную — CSS-переменная
     для текста через content работает только в псевдоэлементах. */
}

/* ---- сброс только внутри наших секций ---------------------------- */
.asic-section,
.asic-section *,
.asic-section *::before,
.asic-section *::after{
  box-sizing:border-box;
}

/* ---- секция (общая обёртка блока) -------------------------------- */
.asic-section{
  background:var(--asic-bg);
  color:var(--asic-text);
  font-family:var(--asic-font-body);
  font-size:16px;
  line-height:1.6;
  padding:56px 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media (min-width:768px){ .asic-section{ padding:80px 0; } }
@media (min-width:1080px){ .asic-section{ padding:96px 0; } }

/* ---- контейнер --------------------------------------------------- */
.asic-wrap{
  max-width:var(--asic-wrap-max);
  margin:0 auto;
  padding:0 20px;
}
@media (min-width:768px){ .asic-wrap{ padding:0 32px; } }

/* ---- типографика ------------------------------------------------- */
.asic-kicker{
  font-family:var(--asic-font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--asic-accent);
  margin:0 0 12px;
}

.asic-h1{
  font-family:var(--asic-font-display);
  font-weight:700;
  font-size:clamp(36px, 6.5vw, 72px);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--asic-text);
  margin:0;
}

.asic-h2{
  font-family:var(--asic-font-display);
  font-weight:600;
  font-size:clamp(26px, 3.5vw, 34px);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--asic-text);
  margin:0 0 24px;
}

.asic-h3{
  font-family:var(--asic-font-display);
  font-weight:600;
  font-size:19px;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--asic-text);
  margin:0 0 8px;
}

.asic-lead{
  color:var(--asic-muted);
  font-size:clamp(16px, 2vw, 18px);
  line-height:1.55;
  max-width:62ch;
  margin:0;
}

.asic-mono{
  font-family:var(--asic-font-mono);
  font-feature-settings:"tnum" 1;
}

/* ---- кнопки ------------------------------------------------------ */
.asic-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--asic-font-display);
  font-weight:600;
  font-size:16px;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 26px;
  border-radius:var(--asic-r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
  user-select:none;
}
.asic-btn:focus-visible{
  outline:2px solid var(--asic-accent-hover);
  outline-offset:2px;
}

/* color помечен !important: в Tilda на  навешан глобальный цвет
   ссылок (коралловый) с высокой специфичностью — без !important он
   перебивает текст кнопок, и тот становится нечитаемым (оранжевый
   на оранжевом / коралловый вместо белого). */
.asic-btn--primary{
  background:var(--asic-accent);
  color:var(--asic-on-accent) !important;
}
.asic-btn--primary:hover{
  background:var(--asic-accent-hover);
  color:var(--asic-on-accent) !important;
}

.asic-btn--secondary{
  background:transparent;
  color:var(--asic-text) !important;
  border-color:var(--asic-border);
}
.asic-btn--secondary:hover{
  border-color:var(--asic-accent);
  color:var(--asic-accent) !important;
}

.asic-btn--ghost{
  background:transparent;
  color:var(--asic-accent) !important;
  padding-left:0;
  padding-right:0;
}
.asic-btn--ghost:hover{
  color:var(--asic-accent-hover) !important;
}

/* ---- карточка ---------------------------------------------------- */
.asic-card{
  background:var(--asic-surface);
  border:1px solid var(--asic-border);
  border-radius:var(--asic-r-lg);
  padding:24px;
}

/* ---- выноска / note --------------------------------------------- */
.asic-note{
  font-size:13.5px;
  line-height:1.5;
  color:var(--asic-muted);
  background:var(--asic-surface);
  border-left:2px solid var(--asic-accent);
  padding:14px 16px;
  border-radius:0 var(--asic-r-sm) var(--asic-r-sm) 0;
  margin:0;
}

/* ---- pill (статус) ---------------------------------------------- */
.asic-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--asic-font-mono);
  font-size:12.5px;
  padding:5px 11px;
  border-radius:100px;
  border:1px solid var(--asic-border);
  color:var(--asic-muted);
}
.asic-pill__dot{
  width:7px;
  height:7px;
  border-radius:100px;
  background:currentColor;
}
.asic-pill--ok{ color:var(--asic-success); border-color:rgba(52,211,153,.35); }
.asic-pill--down{ color:var(--asic-danger); border-color:rgba(248,113,113,.35); }