/* === Брендовые оверрайды для лендинга Finelix === */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Poppins:wght@400;500;600&display=swap');

:root {
  /* Основные цвета из брендбука */
  --brand-foundation: #0F0F0F;
  --brand-glow: #DFFF00;
  --brand-finance-sky: #106CFF;
  --brand-soft-steel: #D8D8D8;
  --brand-clear: #FFFFFF;

  /* Производные оттенки, чтобы сайт не выглядел плоским */
  --sky-05: #F4F8FF;
  --sky-10: #E8F0FF;
  --sky-20: #C4DBFF;
  --sky-40: #4D92FF;
  --sky-60: #0D5AD6;
  --sky-80: #073684;

  --steel-05: #F4F4F4;
  --steel-10: #ECECEC;
  --steel-40: #ABABAB;
  --steel-60: #6B6B6B;

  --surface-base: #0F0F0F;
  --surface-elevated: #171717;
  --surface-overlay: rgba(255, 255, 255, 0.06);
  --surface-stroke: rgba(216, 216, 216, 0.14);
  --surface-stroke-strong: rgba(216, 216, 216, 0.22);

  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.84);
  --text-muted: rgba(216, 216, 216, 0.74);

  --shadow-brand: 0 18px 48px rgba(16, 108, 255, 0.28);
  --shadow-glow: 0 0 0 1px rgba(223, 255, 0, 0.14), 0 20px 52px rgba(223, 255, 0, 0.08);
}

/* Базовая типографика: заголовки Manrope, основной текст Poppins */
* {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
[class*="text-[52px]"],
[class*="text-5xl"],
[class*="text-4xl"],
[class*="text-3xl"],
[class*="text-2xl"],
[class*="font-bold"],
[class*="font-extrabold"],
[class*="font-semibold"] {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Держим весь сайт в одной тёмной базе */
html,
body,
body.background-primary,
#__next,
main {
  background: var(--surface-base) !important;
  color: var(--text-primary) !important;
}

.ticker-tape-container {
  background: var(--surface-base) !important;
  border-bottom-color: rgba(216, 216, 216, 0.1) !important;
}

#navbar,
[class*="border-gray-800"],
[class*="border-[#1A1A1A]"] {
  border-color: rgba(216, 216, 216, 0.12) !important;
}

/* Карточки на тёмном фоне делаем собраннее и чище */
[class*="rounded-2xl"][class*="bg-[#0F0F0F]"],
[class*="rounded-2xl"][class*="bg-[#1A1A1A]"],
[class*="rounded-xl"][class*="bg-[#0F0F0F]"],
[class*="rounded-xl"][class*="bg-[#1A1A1A]"],
[class*="rounded-[21px]"][class*="bg-[#0F0F0F]"],
[class*="rounded-[21px]"][class*="bg-[#1A1A1A]"],
[class*="rounded-[32px]"][class*="bg-[#0F0F0F]"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    var(--surface-base) !important;
  border: 1px solid var(--surface-stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[class*="bg-[#1A1A1Acc]"] {
  background: rgba(15, 15, 15, 0.78) !important;
  border: 1px solid rgba(216, 216, 216, 0.1);
}

/* Синий — главный акцент бренда */
[class*="bg-[#106CFF]"],
[class*="bg-[#5653FE]"],
[class*="bg-[#5853ff]"],
[class*="bg-[#777ef7]"],
[class*="bg-indigo-400"],
[class*="bg-indigo-500"] {
  background-color: var(--brand-finance-sky) !important;
}

[class*="rounded-2xl"][class*="bg-[#106CFF]"],
[class*="rounded-2xl"][class*="bg-[#5653FE]"],
[class*="rounded-2xl"][class*="bg-[#5853ff]"],
[class*="rounded-2xl"][class*="bg-[#777ef7]"],
[class*="rounded-[21px]"][class*="bg-[#106CFF]"],
[class*="rounded-[21px]"][class*="bg-[#5653FE]"],
[class*="rounded-[21px]"][class*="bg-[#5853ff]"],
[class*="rounded-[21px]"][class*="bg-[#777ef7]"],
[class*="rounded-2xl"][class*="bg-indigo-500"],
[class*="rounded-[21px]"][class*="bg-indigo-500"] {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(180deg, #2D85FF 0%, var(--brand-finance-sky) 58%, var(--sky-60) 100%) !important;
  box-shadow: var(--shadow-brand);
}

/* Светлые поверхности привязываем к Soft Steel / Clear */
[class*="bg-[#C4DBFF]"] {
  background: linear-gradient(180deg, var(--brand-clear) 0%, var(--brand-soft-steel) 100%) !important;
}

[class*="bg-[#E8F0FF]"] {
  background: linear-gradient(180deg, var(--brand-clear) 0%, var(--steel-10) 100%) !important;
}

/* Glow оставляем как второй акцент для маленьких деталей */
[class*="bg-[#DFFF00]"],
[class*="bg-[#E5FF33]"],
[class*="bg-[#F5FFB3]"] {
  background: var(--brand-glow) !important;
  box-shadow: 0 0 24px rgba(223, 255, 0, 0.34) !important;
}

/* Текстовые акценты выравниваем под Finance Sky */
[class*="text-indigo-400"],
[class*="text-indigo-500"],
[class*="text-[#7f76ff]"],
[class*="text-[#777ef7]"],
[class*="text-[#9796ff]"],
[class*="text-[#4D92FF]"],
[class*="text-[#106CFF]"] {
  color: var(--brand-finance-sky) !important;
}

/* Плашку с шагами чуть сильнее связываем с Glow */
span[class*="rounded-xl"][class*="text-[#4D92FF]"],
span[class*="rounded-xl"][class*="text-indigo-400"] {
  color: var(--brand-glow) !important;
  border: 1px solid rgba(223, 255, 0, 0.18);
  box-shadow: var(--shadow-glow);
}

/* Маркеры в списках хорошо работают как неоновый вторичный акцент */
ul li span[class*="bg-[#106CFF]"] {
  background: var(--brand-glow) !important;
  box-shadow: 0 0 12px rgba(223, 255, 0, 0.32) !important;
}

[class*="uppercase"][class*="tracking-[0.12em]"] {
  color: var(--brand-glow) !important;
}

/* Кнопки собираем в единый брендовый стиль */
a[class*="bg-[#106CFF]"],
a[class*="bg-[#5653FE]"],
a[class*="bg-[#5853ff]"],
a[class*="bg-[#777ef7]"],
a[class*="bg-indigo-400"],
a[class*="bg-indigo-500"] {
  background: linear-gradient(180deg, #2D85FF 0%, var(--brand-finance-sky) 58%, var(--sky-60) 100%) !important;
  border-radius: 24px !important;
  border: none !important;
  border-bottom: 4px solid var(--sky-80) !important;
  border-right: 2px solid var(--sky-60) !important;
  color: var(--brand-clear) !important;
  font-weight: 700 !important;
  letter-spacing: 0.012em !important;
  box-shadow: var(--shadow-brand);
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

a[class*="bg-[#106CFF]"]:hover,
a[class*="bg-[#5653FE]"]:hover,
a[class*="bg-[#5853ff]"]:hover,
a[class*="bg-[#777ef7]"]:hover,
a[class*="bg-indigo-400"]:hover,
a[class*="bg-indigo-500"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 54px rgba(16, 108, 255, 0.34) !important;
}

a[class*="bg-[#106CFF]"]:active,
a[class*="bg-[#5653FE]"]:active,
a[class*="bg-[#5853ff]"]:active,
a[class*="bg-[#777ef7]"]:active,
a[class*="bg-indigo-400"]:active,
a[class*="bg-indigo-500"]:active {
  transform: translateY(0) !important;
  border-bottom-width: 2px !important;
  padding-bottom: calc(14px + 2px) !important;
}

/* Белая CTA-кнопка тоже должна говорить на языке брендбука, а не старого indigo */
a[class*="bg-white"][class*="text-indigo-500"] {
  background: var(--brand-clear) !important;
  color: var(--brand-finance-sky) !important;
  border-radius: 24px !important;
  border: none !important;
  border-bottom: 4px solid rgba(216, 216, 216, 0.82) !important;
  border-right: 2px solid rgba(216, 216, 216, 0.62) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important;
}

[class*="border-[#0D5AD6]"] {
  border-color: var(--sky-60) !important;
}

[class*="border-[#463fd9]"],
[class*="border-[#5652fe]"],
[class*="border-[#5653fe]"],
[class*="border-[#777ef7]"] {
  border-color: var(--sky-60) !important;
}

/* Рамки и радиусы держим единообразными */
[class*="rounded-2xl"] {
  border-radius: 14px !important;
}

[class*="rounded-3xl"] {
  border-radius: 20px !important;
}

[class*="rounded-xl"] {
  border-radius: 10px !important;
}

/* Ховер и фокус без фиолетовых следов */
a:hover {
  color: var(--brand-finance-sky);
}

footer a:hover,
[class*="hover:text-white"]:hover {
  color: var(--brand-glow) !important;
}

.brand-footer-shell {
  padding-top: 18px !important;
}

.brand-footer {
  width: 100%;
  border-top: 1px solid rgba(216, 216, 216, 0.14);
  padding-top: 28px;
}

.brand-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.brand-footer__brand,
.brand-footer__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brand-footer__logo {
  width: auto;
  height: 30px;
  max-width: min(220px, 100%);
}

.brand-footer__eyebrow {
  margin: 0;
  color: var(--brand-clear);
  font-family: 'Manrope', sans-serif !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-footer__description,
.brand-footer__risk,
.brand-footer__meta {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

.brand-footer__risk {
  color: var(--text-muted);
}

.brand-footer__links,
.brand-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand-footer__text-link {
  color: var(--text-secondary) !important;
  font-size: 0.95rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.brand-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-footer__legal-link,
.brand-footer__legal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(16, 108, 255, 0.32) !important;
  background: rgba(16, 108, 255, 0.12) !important;
  color: var(--brand-clear) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.brand-footer__legal-link:hover,
.brand-footer__legal-button:hover {
  transform: translateY(-1px);
  border-color: rgba(223, 255, 0, 0.42) !important;
  background: rgba(223, 255, 0, 0.12) !important;
  color: var(--brand-glow) !important;
}

.brand-footer__legal-button {
  -webkit-appearance: none;
  appearance: none;
}

.brand-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(216, 216, 216, 0.1);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .brand-footer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .brand-footer,
  .brand-footer__brand,
  .brand-footer__section {
    text-align: center;
    align-items: center;
  }

  .brand-footer__legal-links {
    justify-content: center;
  }

  .brand-footer__bottom {
    justify-content: center;
    text-align: center;
  }
}

nav a[class*="hover:text-[#106CFF]"]:hover,
nav a[class*="hover:text-[#5853ff]"]:hover,
nav a[class*="hover:text-[#777ef7]"]:hover,
[class*="hover:text-[#777ef7]"]:hover,
[class*="hover:text-[#9796ff]"]:hover {
  color: var(--brand-finance-sky) !important;
}

[class*="focus-visible:ring"] {
  --tw-ring-color: var(--brand-finance-sky) !important;
}

[class*="focus-visible:ring-[#7f76ff]"],
[class*="focus-visible:ring-[#777ef7]"],
[class*="focus-visible:ring-[#9796ff]"] {
  --tw-ring-color: var(--brand-finance-sky) !important;
}

[class*="focus-visible:outline-[#106CFF]"] {
  outline-color: var(--brand-finance-sky) !important;
}

[class*="focus-visible:outline-[#777ef7]"] {
  outline-color: var(--brand-finance-sky) !important;
}

/* FAQ и мелкие интерактивные элементы не должны возвращать старую типографику */
.rounded-xl[class*="bg-[#1A1A1A]"] button,
.rounded-xl[class*="bg-[#2A2A2A]"] button,
.rounded-xl[class*="bg-[#3c3838]"] button {
  font-family: 'Manrope', sans-serif !important;
}

.rounded-xl[class*="bg-[#3c3838]"],
.rounded-xl[class*="bg-[#33313A]"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
    var(--surface-elevated) !important;
  border: 1px solid var(--surface-stroke) !important;
}

/* На случай, если JS не успел, прячем видеосекцию и через CSS */
section:has(button[aria-label="previous videos"]),
section:has(button[aria-label="next videos"]) {
  display: none !important;
}

/* В секции social proof теперь используется один цельный блок-иллюстрация */
.brand-social-proof__wrap {
  display: block;
  width: 100%;
}

.brand-social-proof__card {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(216, 216, 216, 0.14);
  background: var(--brand-clear);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18);
}

.brand-social-proof__image {
  display: block;
  width: 100%;
  height: auto;
}

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: none;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-banner__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(216, 216, 216, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(15, 15, 15, 0.96);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
}

.cookie-banner__text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  flex: 1;
}

.cookie-banner__text a {
  color: var(--brand-finance-sky);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(216, 216, 216, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--brand-clear);
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.cookie-banner__btn--accept {
  border-color: rgba(16, 108, 255, 0.36);
  background: linear-gradient(180deg, #2D85FF 0%, var(--brand-finance-sky) 58%, var(--sky-60) 100%);
}

@media (max-width: 720px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__btn {
    flex: 1;
  }
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Выделение текста тоже приводим к палитре */
::selection {
  background: var(--brand-glow);
  color: var(--brand-foundation);
}