/* =====================================================================
   sitehub.md — фирменные дизайн-токены (единственный источник цветов)
   Подключить ПЕРВЫМ CSS-файлом на всех страницах.
   Во всём остальном CSS использовать ТОЛЬКО var(--sh-…), без «голых» HEX.
   ===================================================================== */
:root {
  /* ---- Палитра бренда (из брендбука) ---- */
  --sh-orange: #FF8A00;        /* основной оранжевый */
  --sh-red:    #FF3B30;        /* акцентный красный */
  --sh-pink:   #FF2D55;        /* дополнительный розовый (в брендбуке #FF2D95, на сайте используем #FF2D55 — ближе к лого) */
  --sh-black:  #0B0B0B;        /* фон */
  --sh-gray:   #1F1F1F;        /* элементы, рамки */
  --sh-white:  #F5F5F5;        /* текст на тёмном */

  /* ---- Градиенты (только из цветов бренда) ---- */
  --sh-grad:        linear-gradient(90deg, #FF8A00 0%, #FF3B30 55%, #FF2D55 100%);
  --sh-grad-diag:   linear-gradient(135deg, #FF8A00 0%, #FF3B30 55%, #FF2D55 100%);
  --sh-grad-soft:   linear-gradient(135deg, rgba(255,138,0,.14), rgba(255,45,85,.10));
  --sh-grad-text:   linear-gradient(90deg, #FF8A00 0%, #FF4A26 45%, #FF2848 100%);
  --sh-glow:        radial-gradient(closest-side, rgba(255,74,30,.28), rgba(255,59,48,.08) 55%, transparent);

  /* ---- Поверхности (тёмная тема — единственная тема сайта) ---- */
  --sh-bg:          #0B0B0B;   /* фон страницы */
  --sh-bg-2:        #101010;   /* чередующиеся секции */
  --sh-surface:     #141414;   /* карточки */
  --sh-surface-2:   #1A1A1A;   /* карточки при hover, поля ввода */
  --sh-border:      #1F1F1F;   /* рамки */
  --sh-border-2:    #2A2A2A;   /* рамки hover / разделители поярче */
  --sh-border-accent: rgba(255,90,40,.45);

  /* ---- Текст (контраст ≥ 4.5:1 на --sh-bg) ---- */
  --sh-text:        #F5F5F5;   /* заголовки и основной текст */
  --sh-text-2:      #B3B3B3;   /* второстепенный текст, описания */
  --sh-text-3:      #8A8A8A;   /* подписи, мелкие метки (не меньше 13px) */
  --sh-text-accent: #FF8A00;   /* надзаголовки «01 / …», ссылки */
  --sh-on-accent:   #FFFFFF;   /* текст на оранжевых кнопках */

  /* ---- Состояния ---- */
  --sh-success: #34C759;       /* только для статусов «готово/онлайн», не для декора */
  --sh-warning: #FF8A00;
  --sh-danger:  #FF3B30;
  --sh-focus:   0 0 0 3px rgba(255,138,0,.45);

  /* ---- Форма ---- */
  --sh-radius-sm: 10px;
  --sh-radius:    16px;
  --sh-radius-lg: 24px;
  --sh-shadow:    0 10px 30px rgba(0,0,0,.45);
  --sh-shadow-accent: 0 10px 30px rgba(255,59,48,.28);

  /* ---- Типографика ---- */
  --sh-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sh-ease: cubic-bezier(.2,.8,.2,1);
}

/* =====================================================================
   Базовые компоненты — использовать эти классы (или их стили) везде
   ===================================================================== */
body { background: var(--sh-bg); color: var(--sh-text); font-family: var(--sh-font); }
::selection { background: rgba(255,138,0,.35); color: #fff; }

/* Надзаголовок секции: «01 / УСЛУГИ» */
.sh-eyebrow { color: var(--sh-text-accent); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* Акцентное слово в заголовке */
.sh-accent { background: var(--sh-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Кнопки */
.sh-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: var(--sh-radius-sm);
  font: 600 15px/1 var(--sh-font); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s var(--sh-ease), box-shadow .2s var(--sh-ease), background-color .2s, border-color .2s; }
.sh-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.sh-btn--primary { background: var(--sh-grad); color: var(--sh-on-accent); box-shadow: var(--sh-shadow-accent); }
.sh-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(255,59,48,.38); }
.sh-btn--ghost { background: transparent; color: var(--sh-text); border-color: var(--sh-border-2); }
.sh-btn--ghost:hover { border-color: var(--sh-border-accent); background: var(--sh-surface); }

/* Карточки */
.sh-card { background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); padding: 28px;
  transition: border-color .25s, transform .25s var(--sh-ease), background-color .25s; }
.sh-card:hover { border-color: var(--sh-border-accent); background: var(--sh-surface-2); transform: translateY(-2px); }
.sh-card h3 { color: var(--sh-text); }
.sh-card p  { color: var(--sh-text-2); }

/* Иконка в карточке (Lucide, stroke) */
.sh-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--sh-grad-soft); border: 1px solid rgba(255,138,0,.22); color: var(--sh-orange); }
.sh-icon svg { width: 22px; height: 22px; stroke-width: 1.75; }

/* Ссылки */
a { color: inherit; }
.sh-link { color: var(--sh-text-accent); text-decoration: none; font-weight: 600; }
.sh-link:hover { color: var(--sh-red); }

/* Теги / чипы */
.sh-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--sh-surface-2); border: 1px solid var(--sh-border-2); color: var(--sh-text-2); font-size: 13px; }

/* Поля ввода */
.sh-input { height: 48px; padding: 0 16px; border-radius: var(--sh-radius-sm); background: var(--sh-surface-2);
  border: 1px solid var(--sh-border-2); color: var(--sh-text); font: 500 15px var(--sh-font); }
.sh-input::placeholder { color: var(--sh-text-3); }
.sh-input:focus { outline: none; border-color: var(--sh-orange); box-shadow: var(--sh-focus); }

/* Логотип в шапке */
.sh-logo img { display: block; height: 40px; width: auto; }
@media (max-width: 768px) { .sh-logo img { height: 34px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}