/* ════════════════════════════════════════════════════════════
   MediaCar · Brand styles for Tilda
   Вставьте этот файл в: Настройки сайта → Ещё → HTML-код для вставки
   внутрь HEAD — через  на загруженный файл, либо целиком в
   блок T123 (HTML) обёрнутым в …</style>.
   ════════════════════════════════════════════════════════════ */

/* — Шрифты (бесплатные, с кириллицей) — */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* — Токены бренда — */
:root {
  --mc-ink:    #0F1115;   /* основа, текст, силуэт знака */
  --mc-bone:   #F2EFE8;   /* тёплый «бумажный» фон */
  --mc-signal: #FF4D14;   /* акцент: кнопки, точки, выделение */
  --mc-ice:    #E5E9EF;   /* нейтрал, разделители */
  --mc-muted:  rgba(15,17,21,0.6);

  --mc-font-display: 'Space Grotesk', system-ui, sans-serif;
  --mc-font-text:    'Inter Tight', system-ui, sans-serif;
  --mc-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --mc-radius: 0px;       /* бренд использует прямые углы */
}

/* ════════════════════════════════════════════════════════════
   БАЗОВЫЕ ПЕРЕОПРЕДЕЛЕНИЯ ТИЛЬДЫ
   Tilda по умолчанию ставит свои шрифты/цвета — перебиваем.
   ════════════════════════════════════════════════════════════ */
body,
.t-text, .t-descr, .t-name, .t-title, .t-heading {
  font-family: var(--mc-font-text);
}

/* Заголовки — геометрический гротеск */
.t-title, .t-heading,
h1.t-title, h2.t-title, h3.t-title {
  font-family: var(--mc-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Технические подписи / надзаголовки — моноширинный */
.mc-eyebrow {
  font-family: var(--mc-font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mc-signal);
}

/* ════════════════════════════════════════════════════════════
   ЦВЕТА-УТИЛИТЫ
   ════════════════════════════════════════════════════════════ */
.mc-bg-ink    { background-color: var(--mc-ink)    !important; color: var(--mc-bone); }
.mc-bg-bone   { background-color: var(--mc-bone)   !important; color: var(--mc-ink); }
.mc-bg-signal { background-color: var(--mc-signal) !important; color: var(--mc-bone); }
.mc-bg-ice    { background-color: var(--mc-ice)    !important; color: var(--mc-ink); }

.mc-text-ink    { color: var(--mc-ink)    !important; }
.mc-text-signal { color: var(--mc-signal) !important; }
.mc-text-muted  { color: var(--mc-muted)  !important; }

/* Выделение слова в заголовке */
.mc-accent { color: var(--mc-signal); }

/* ════════════════════════════════════════════════════════════
   КНОПКИ
   В Тильде класс .t-btn. Делаем два стиля: signal (основная) и
   ghost (вторичная). Назначьте классы в настройках кнопки.
   ════════════════════════════════════════════════════════════ */
.t-btn {
  font-family: var(--mc-font-text) !important;
  font-weight: 500 !important;
  border-radius: var(--mc-radius) !important;
  letter-spacing: 0;
  transition: transform .15s ease, background-color .15s ease;
}
.t-btn:hover { transform: translateY(-1px); }

/* Основная — signal */
.mc-btn-signal,
.mc-btn-signal.t-btn {
  background-color: var(--mc-signal) !important;
  color: var(--mc-bone) !important;
  border: none !important;
}
.mc-btn-signal:hover { background-color: #e63f0a !important; }

/* Вторичная — контурная */
.mc-btn-ghost,
.mc-btn-ghost.t-btn {
  background-color: transparent !important;
  color: var(--mc-ink) !important;
  border: 1px solid rgba(15,17,21,0.25) !important;
}
.mc-btn-ghost:hover { background-color: var(--mc-ink) !important; color: var(--mc-bone) !important; }

/* Тёмная — ink */
.mc-btn-ink,
.mc-btn-ink.t-btn {
  background-color: var(--mc-ink) !important;
  color: var(--mc-bone) !important;
  border: none !important;
}

/* ════════════════════════════════════════════════════════════
   ССЫЛКИ
   ════════════════════════════════════════════════════════════ */
.t-text a, a.mc-link {
  color: var(--mc-signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,77,20,0.4);
  transition: border-color .15s ease;
}
.t-text a:hover, a.mc-link:hover { border-bottom-color: var(--mc-signal); }

/* ════════════════════════════════════════════════════════════
   ВСПОМОГАТЕЛЬНЫЕ ДЕТАЛИ
   ════════════════════════════════════════════════════════════ */

/* Тонкий разделитель в фирменном стиле */
.mc-rule { height: 1px; background: rgba(15,17,21,0.1); border: none; }
.mc-bg-ink .mc-rule { background: rgba(242,239,232,0.12); }

/* Сигнальная вертикальная полоса (акцент в углу секции) */
.mc-accent-bar {
  position: absolute; top: 0; right: 0;
  width: 6px; height: 100%;
  background: var(--mc-signal);
}

/* Чип / тег моноширинный */
.mc-chip {
  display: inline-block;
  font-family: var(--mc-font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--mc-muted);
  border: 1px solid rgba(15,17,21,0.12);
  padding: 5px 10px;
  border-radius: 999px;
}

/* Числовая метрика (для блоков "4 млн контактов" и т.п.) */
.mc-metric {
  font-family: var(--mc-font-display);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--mc-ink);
}
.mc-bg-ink .mc-metric { color: var(--mc-bone); }

/* Технические данные моноширинным */
.mc-mono {
  font-family: var(--mc-font-mono);
  letter-spacing: 0.3px;
}