/* =====================================================================
   Нативо — фреш-слой (override, грузится последним).
   Сохраняем РОДНУЮ гамму логотипа: синий #0759c8 + зелёный #9bd928.
   Освежаем без перекраски: типографика, глубина, градиент-герой,
   состояния, моушн. Сине-зелёные акценты «рифмуются» с двумя
   пузырями логотипа. React-разметку не трогаем.
   ===================================================================== */

:root {
  --rd-blue:  #0759c8;   /* синий из вордмарка «Нативо» (nativo-blue)  */
  --rd-deep:  #083a83;   /* глубокий синий (nativo-deep)               */
  --rd-azure: #18a0e8;   /* светлый азур из левого пузыря логотипа     */
  --rd-ink:   #142033;   /* тёмные секции (nativo-ink)                 */
  --rd-cloud: #f4f9ff;   /* холодный светлый фон (nativo-cloud)        */
  --rd-lime:  #9bd928;   /* зелёный из правого пузыря логотипа (CTA)   */
  --rd-mint:  #d8f66d;   /* светло-зелёный акцент / hover              */
  --rd-line:  #dce8f5;   /* бордеры (nativo-line)                      */

  --rd-display: 'Unbounded', 'Nunito', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --rd-grad: linear-gradient(90deg, var(--rd-blue), var(--rd-lime)); /* синий→зелёный = логотип */
  --rd-shadow-card: 0 26px 60px -34px rgba(7, 89, 200, 0.34);
  --rd-shadow-pop:  0 18px 40px -18px rgba(7, 89, 200, 0.40);
}

/* ---------- База ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
::selection { background: var(--rd-blue); color: #fff; }
:focus-visible { outline: 3px solid var(--rd-azure); outline-offset: 2px; border-radius: 6px; }

/* =====================================================================
   1. ТИПОГРАФИКА — характер без смены цвета
   ===================================================================== */
.font-display { font-family: var(--rd-display) !important; letter-spacing: -.02em; }

main h1, main h2, .proof-title, .proof-section-title {
  font-family: var(--rd-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
main h1 { font-weight: 700 !important; line-height: 1.02 !important; }
main h1.font-display { font-size: clamp(2.1rem, 6.2vw, 4.4rem) !important; max-width: 18ch !important; }
main h2, .proof-title, .proof-section-title { font-weight: 700 !important; }

/* эйброу: капс + сине-зелёный маркер-полоса (эхо логотипа) */
p.text-nativo-blue.font-extrabold,
.proof-eyebrow, .proof-card-label,
p.text-nativo-mint.font-bold {
  display: inline-flex; align-items: center;
  text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
}
p.text-nativo-blue.font-extrabold::before,
.proof-eyebrow::before, .proof-card-label::before,
p.text-nativo-mint.font-bold::before {
  content: ""; width: 1.6rem; height: .2rem; margin-right: .6rem;
  border-radius: 999px; background: var(--rd-grad); flex: 0 0 auto;
}
p.text-nativo-mint.font-bold::before { background: var(--rd-mint); }

main p.leading-7, main p.leading-8 { max-width: 64ch; }

/* =====================================================================
   2. ГЕРОЙ — объёмный синий градиент вместо плоской заливки
   ===================================================================== */
main > section:first-of-type > div:nth-child(2) {
  background:
    radial-gradient(55% 70% at 88% 90%, rgba(24, 160, 232, .30), transparent 60%),
    radial-gradient(48% 56% at 10% 12%, rgba(155, 217, 40, .16), transparent 60%),
    linear-gradient(102deg, rgba(8, 26, 64, .95) 0%, rgba(7, 89, 200, .80) 42%, rgba(7, 89, 200, .30) 72%, rgba(8, 26, 64, .08) 100%)
    !important;
}
/* лёгкое зерно поверх героя */
main > section:first-of-type > div:nth-child(2)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* подчёркивание H1 — сине-зелёный градиент */
main > section:first-of-type h1.font-display::after {
  content: ""; display: block; width: 4.5rem; height: .42rem; margin-top: 1.1rem;
  border-radius: 999px; background: var(--rd-grad);
}

/* «живая» точка в бейдже — зелёная (родная), с пульсом */
.size-2.rounded-full.bg-nativo-lime {
  box-shadow: 0 0 0 0 rgba(155, 217, 40, .7);
  animation: rdPulse 2s ease-out infinite;
}
@keyframes rdPulse {
  0%   { box-shadow: 0 0 0 0 rgba(155, 217, 40, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(155, 217, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(155, 217, 40, 0); }
}

/* главные CTA — объём и подъём (цвета родные) */
a.bg-nativo-lime, a.bg-nativo-blue {
  border-radius: 14px !important;
  box-shadow: var(--rd-shadow-pop);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background-color .18s ease !important;
}
a.bg-nativo-lime:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -16px rgba(155, 217, 40, .5); }
a.bg-nativo-blue:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -18px rgba(7, 89, 200, .5); }

/* =====================================================================
   3. КАРТОЧКИ, ТОГГЛЫ, ШАГИ, ЦЕНЫ
   ===================================================================== */
.rounded-lg { border-radius: 14px; }
article.rounded-lg { border-radius: 20px !important; }

main article { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
main article:hover { transform: translateY(-3px); box-shadow: var(--rd-shadow-card); }

#formats button.group { border-radius: 16px !important; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
#formats button.group:hover { transform: translateY(-2px); box-shadow: var(--rd-shadow-card); }
#formats button.border-nativo-blue { box-shadow: var(--rd-shadow-card); }

/* крупные игривые номера в «Методике» — родной синий */
#method p.text-nativo-blue.font-bold {
  font-family: var(--rd-display);
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -.03em;
}
#method p.text-nativo-blue.font-bold::before { display: none; }
#method .border-nativo-line { border-radius: 18px !important; }

/* крупные цены — выразительный дисплей-шрифт */
.text-4xl.text-nativo-deep, .text-3xl.text-nativo-deep {
  font-family: var(--rd-display); letter-spacing: -.03em;
}

/* выделенный тариф — зелёная лента «Выбирают чаще» (родной акцент) */
#prices article.border-nativo-blue { position: relative; overflow: visible; }
#prices article.border-nativo-blue::before {
  content: "Выбирают чаще";
  position: absolute; top: -.85rem; left: 1.5rem;
  background: var(--rd-lime); color: var(--rd-ink);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  padding: .35rem .7rem; border-radius: 999px;
  box-shadow: 0 12px 26px -12px rgba(155, 217, 40, .6);
}

.rounded.border.border-nativo-line { border-radius: 10px !important; }

/* =====================================================================
   4. PROOF — преподаватели/сертификаты (цвета родные, чуть мягче формы)
   ===================================================================== */
.proof-teacher-card, .proof-cert { border-radius: 16px !important; }
.proof-screen { border-radius: 16px !important; }
.proof-teacher-card:hover, .proof-cert:hover { box-shadow: var(--rd-shadow-card) !important; }

/* карточка-тизер «ещё преподаватели» — синяя, с зелёным акцентом = логотип */
.proof-teacher-more {
  display: flex !important;
  border: 1px solid rgba(7, 89, 200, .35) !important;
  background: linear-gradient(158deg, #0a63d6 0%, #073a83 100%) !important;
  box-shadow: 0 30px 72px -50px rgba(7, 89, 200, .6) !important;
}
.proof-more-inner {
  display: flex; flex-direction: column; gap: .95rem;
  justify-content: center; height: 100%; padding: 1.6rem;
}
.proof-more-badge {
  align-self: flex-start;
  background: var(--rd-lime); color: var(--rd-ink);
  font-size: .76rem; font-weight: 800; letter-spacing: .04em;
  padding: .35rem .7rem; border-radius: 999px;
}
.proof-teacher-more .proof-teacher-name { color: #fff !important; margin: 0; }
.proof-teacher-more .proof-teacher-text { color: rgba(255, 255, 255, .82) !important; min-height: 0; }
.proof-more-cta {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem;
  align-self: flex-start; color: var(--rd-ink); text-decoration: none;
  background: var(--rd-lime); font-weight: 800;
  padding: .7rem 1.1rem; border-radius: 12px;
  transition: transform .18s ease, background-color .18s ease;
}
.proof-more-cta:hover { background: var(--rd-mint); transform: translateY(-2px); }
.proof-more-cta:active { transform: translateY(1px); }
.proof-teacher-more .proof-more-cta span { transition: transform .18s ease; }
.proof-more-cta:hover span { transform: translateX(3px); }

@media (max-width: 760px) {
  .proof-teacher-more { min-width: min(82%, 24rem); scroll-snap-align: start; }
}

/* =====================================================================
   5. ФОРМЫ — синие фокус-кольца
   ===================================================================== */
.field-control:focus, #lead input:focus, #lead select:focus, #lead textarea:focus,
#quiz select:focus {
  border-color: var(--rd-blue) !important;
  box-shadow: 0 0 0 4px rgba(7, 89, 200, .14) !important;
  outline: none !important;
}

/* согласие на обработку ПДн под формами */
.rd-consent {
  margin: .85rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: #64748b;
  max-width: 42rem;
}
.rd-consent a { color: var(--rd-blue); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.rd-consent a:hover { color: var(--rd-deep); }

/* =====================================================================
   6. МОУШН — скролл-ревил там, где поддерживается (иначе видно сразу)
   ===================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section > div > h2,
    main article,
    #method .border-nativo-line,
    #prices article,
    .proof-teacher-card, .proof-cert {
      animation: rdRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}
@keyframes rdRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .size-2.rounded-full.bg-nativo-lime { animation: none; }
}