/* ============================================================================
   SAHLIX OS — поверх landing.css
   ----------------------------------------------------------------------------
   Сайт скопирован с tewris.ai (тёмный «неон»). Цвета перекрашены скриптом в
   палитру sahlix.io; здесь — то, что заменой цвета не решается: элементы
   sahlix.io (кнопка-градиент, плашки-«пилюли», белые карточки с тёплой
   рамкой и мягкой тенью), логотип и места, где неон держался на свечении.
   ============================================================================ */

/* ── Логотип: перо + «sahlix» (PNG с sahlix.io) и «OS» текстом ─────────────── */
.sx-logo { display: inline-flex; align-items: center; gap: 7px; line-height: 1; }
.sx-logo__img { height: 30px; width: auto; max-width: none; display: block; }
.sx-logo__os {
  font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.02em;
  color: #FF8A2A; transform: translateY(1px);
}
.tw-footer .sx-logo__img { height: 34px; }
.tw-footer .sx-logo__os { font-size: 24px; }
@media (max-width: 640px) {
  .sx-logo__img { height: 24px; }
  .sx-logo__os { font-size: 17px; }
}

/* ── Кнопки: главная — градиент sahlix.io, вторичная — светлая плашка ────── */
.tw-landing .tw-btn--primary {
  background: var(--grad-cta);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(201, 42, 200, 0.30), 0 2px 8px rgba(255, 154, 61, 0.22);
  transition: box-shadow .2s, transform .15s;
}
.tw-landing .tw-btn--primary:hover {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 6px 28px rgba(201, 42, 200, 0.45), 0 3px 12px rgba(255, 154, 61, 0.32);
  transform: translateY(-1px);
}

/* ── Заголовки: вес и трекинг как на sahlix.io, акцент — коралловый градиент ─ */
.tw-landing .tw-grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── Моноширинный шрифт Tewris на sahlix.io не встречается: подписи, метрики
   и служебные строки набираем тем же Gilroy ──────────────────────────────── */
.tw-landing { --font-mono: var(--font-ui); }

/* ── Кикеры секций → «пилюля» sahlix.io (.eyebrow / .section-label) ──────── */
.tw-landing .tw-kicker {
  display: inline-flex; width: fit-content; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--cyan); background: var(--surface-2); border: 1px solid var(--surface-3);
  border-radius: 100px; padding: 5px 14px; margin-bottom: 18px;
}
.tw-landing .tw-kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; opacity: 1;
  background: var(--grad-cta);
}

/* ── Плитки «контроль и прослеживаемость» — белые карточки, как остальные ── */
.tw-landing .tw-sectile {
  background: #fff; border-color: var(--surface-3);
  box-shadow: var(--l-card-shadow);
}
.tw-landing .tw-sectile__wm { opacity: 0.5; }

/* ── Плашка NDA: коралловый градиент, белые буквы ──────────────────────── */
.tw-landing .nda {
  border: none;
  background: linear-gradient(135deg, #e8450a 0%, #f77254 55%, #FF9A3D 100%);
  box-shadow: 0 6px 16px -6px rgba(247, 114, 84, 0.55);
}
.tw-landing .nda text { fill: #fff; }
.tw-landing .nda::after { background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.22) 47%, transparent 58%); }

/* ── Переключатели согласий: включённый — сплошной коралл ──────────────── */
.tw-landing .tw-switch:checked { background: var(--cyan); border-color: var(--cyan); }
.tw-landing .tw-switch:checked::after { background: #fff; box-shadow: 0 1px 3px rgba(31, 20, 16, 0.25); }

/* ── Схема в герое: белые плашки направлений с тёплой рамкой ────────────── */
.tw-landing .tw-hs-plate { fill: #fff; stroke: var(--surface-3); }
.tw-landing .tw-hs-title { font-weight: 600; fill: var(--text); }

/* ── Подвал: контакты — ссылками в цвет текста ──────────────────────────── */
.tw-landing .tw-footer__hours { font-size: 14px; line-height: 1.7; }
.tw-landing .tw-footer__hours a { color: var(--text); text-decoration: none; }
.tw-landing .tw-footer__hours a:hover { color: var(--cyan); }
