/* ==========================================================================
   404 AFFILIATE — ПЕРЕКРАСКА (reskin)
   Меняем ТОЛЬКО цвета и типографику. Разметка, моушен, ссылки, языки — как есть.
   Цвета уже заменены в бандле (#00ecff/#08adff -> #FF6A33/#FF4600).
   Здесь: шрифты + точечные доводки оттенков.
   ========================================================================== */

:root{
  --af-orange:#FF4600;
  --af-orange-2:#FF6A33;
  --af-font-display:'Unbounded','Montserrat',system-ui,sans-serif;
  --af-font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- ТИПОГРАФИКА ---------- */
/* базовый текст — Montserrat вместо Inter */
html, body,
body *:not(script):not(style){
  font-family:var(--af-font-body);
}

/* заголовки и крупные акцентные надписи — Unbounded */
h1, h2, h3, h4, h5,
h1 *, h2 *, h3 *, h4 *, h5 *{
  font-family:var(--af-font-display) !important;
  letter-spacing:-.015em;
}

/* кнопки и навигация — Montserrat, чуть плотнее трекинг */
button, a, input, textarea, select{
  font-family:var(--af-font-body);
}

/* Unbounded шире Inter — слегка ужимаем, чтобы не ломались строки */
h1{letter-spacing:-.025em}
h2{letter-spacing:-.02em}

/* ---------- ОТТЕНКИ ---------- */
/* Inter-серый Tailwind -> нейтральный тёплый серый под оранжевый акцент */
.text-gray-400{color:#B9B9B6 !important}
.text-gray-300{color:#DCDCDA !important}
.text-gray-500{color:#8E8E8B !important}

/* фокус/выделение — оранжевые */
::selection{background:var(--af-orange);color:#fff}
*:focus-visible{outline:2px solid var(--af-orange);outline-offset:2px}

/* скроллбар */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0A0B0F}
::-webkit-scrollbar-thumb{background:#2A2B31;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--af-orange)}

/* ---------- ЛОГОТИП В ШАПКЕ ---------- */
/* текстовый «404 AFFILIATE» -> фирменный знак (прицел + AF) */
header a[href="#hero"]{
  display:inline-flex !important;
  align-items:center;
  gap:0;
  font-size:0 !important;      /* прячем текст, оставляя ссылку кликабельной */
  line-height:0 !important;
}
header a[href="#hero"]::before{
  content:"";
  display:block;
  width:150px;height:32px;
  background:url('/assets/logo-white.png') left center / contain no-repeat;
}
@media(max-width:640px){
  header a[href="#hero"]::before{width:124px;height:26px}
}

/* ==========================================================================
   ЕДИНАЯ ДИЗАЙН-СИСТЕМА — снята с /webdev/
   Кнопки-капсулы, мелкие подписи моноширинным, карточки с тонкой рамкой.
   Разметку не трогаем: перекрываем инлайн-стили сайта.
   ========================================================================== */
:root{
  --af-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --af-pill:9999px;
}

/* ---------- КНОПКИ-КАПСУЛЫ (как на /webdev/) ---------- */
/* вторичные: прозрачные, тонкая рамка, моноширинный, широкий трекинг */
button[style*="999px"][style*="transparent"],
a[style*="999px"][style*="transparent"]{
  font-family:var(--af-mono) !important;
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  min-height:44px !important;
  padding:0 20px !important;
  border-radius:var(--af-pill) !important;
  border:1px solid rgba(217,217,217,.25) !important;
  background:transparent !important;
  transition:border-color .25s, color .25s, background .25s !important;
}
button[style*="999px"][style*="transparent"]:hover,
a[style*="999px"][style*="transparent"]:hover{
  border-color:rgba(255,70,0,.75) !important;
  color:#FF6A33 !important;
}

/* основные: сплошная заливка вместо градиента, капсула, Montserrat 600 */
button[style*="linear-gradient(90deg, rgb(255, 106, 51)"],
a[style*="linear-gradient(90deg, rgb(255, 106, 51)"],
button[style*="linear-gradient(90deg,rgb(255,106,51)"],
a[style*="linear-gradient(90deg,rgb(255,106,51)"]{
  background:var(--af-orange) !important;
  background-image:none !important;
  color:#fff !important;
  font-family:var(--af-font-body) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  min-height:48px !important;
  padding:0 28px !important;
  border-radius:var(--af-pill) !important;
  border:none !important;
  box-shadow:none !important;
  transition:background .25s, transform .25s !important;
}
button[style*="linear-gradient(90deg, rgb(255, 106, 51)"]:hover,
a[style*="linear-gradient(90deg, rgb(255, 106, 51)"]:hover{
  background:#E03E00 !important;
  transform:translateY(-1px);
}

/* ---------- МЕЛКИЕ ПОДПИСИ / МЕТКИ — моноширинный ---------- */
/* бейджи вида «404 AFFILIATE — DIGITAL MARKETING», «ОТВЕТИМ В ТЕЧЕНИИ 30 МИНУТ» */
[style*="letter-spacing: 0.2em"],
[style*="letter-spacing: 0.22em"],
[style*="letter-spacing: 0.24em"],
[style*="letter-spacing: 0.26em"]{
  font-family:var(--af-mono) !important;
  font-weight:400 !important;
}

/* ---------- КАРТОЧКИ ---------- */
/* как на /webdev/: радиус 12, чёрный фон, еле заметная рамка */
[style*="border-radius: 16px"],
[style*="border-radius: 20px"],
[style*="border-radius: 24px"]{
  border-radius:12px !important;
}
[style*="border-radius: 12px"][style*="border"],
[style*="border-radius: 16px"][style*="border"]{
  border-color:rgba(255,255,255,.10) !important;
}

/* ---------- ТАБЫ УСЛУГ ---------- */
#services button{
  font-family:var(--af-mono) !important;
  font-size:11px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

/* заливная кнопка в шапке — компактнее, чтобы не распирала строку */
header button[style*="linear-gradient(90deg, rgb(255, 106, 51)"],
header a[style*="linear-gradient(90deg, rgb(255, 106, 51)"]{
  min-height:38px !important;
  padding:0 20px !important;
  font-size:11.5px !important;
}
/* прозрачные кнопки в шапке — тоже компактнее */
header button[style*="999px"][style*="transparent"],
header a[style*="999px"][style*="transparent"]{
  min-height:38px !important;
  padding:0 18px !important;
}

/* ---------- иконки вместо эмодзи ---------- */
.af-icon{display:inline-flex !important;align-items:center;justify-content:center;
  color:#D8D8D8;line-height:0;font-size:0 !important}
.af-icon svg{width:26px;height:26px;display:block}
/* карточки: иконка мягко подсвечивается при наведении */
[style*="border-radius"]:hover .af-icon{color:#FF6A33}
.af-icon{transition:color .28s}
@media(max-width:640px){.af-icon svg{width:22px;height:22px}}

/* ---------- круглые иконочные кнопки шапки: не ломать содержимое ---------- */
header button[style*="border-radius: 50%"],
header a[style*="border-radius: 50%"],
button[style*="width: 36px"],
a[style*="width: 36px"]{
  padding:0 !important;
  min-height:0 !important;
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:0 !important;
}
header button[style*="border-radius: 50%"] svg,
header a[style*="border-radius: 50%"] svg,
button[style*="width: 36px"] svg,
a[style*="width: 36px"] svg{
  width:15px !important;height:15px !important;display:block !important;flex:0 0 auto !important;
}