/* ============================================================
   BananPay — bananpay.ru
   По брендбуку v2 (пакет «БП»): светлая тема, макет
   «BananPay Ekrany Partner Academy BananPay.dc.html» экран 03.
   Правка владельца: фиолетовый Signal не используется нигде.
   Янтарь — единственный акцент. Теней нет, кроме оверлеев.
   ============================================================ */

:root {
  /* поверхности */
  --paper:   #FAF7F0;
  --sand:    #F3F0E9;
  --card:    #FFFFFF;
  --card-hi: #FFFCF2;

  /* чернила и прозрачности */
  --ink:      #14120E;
  --ink-80:   rgba(20,18,14,.80);
  --ink-74:   rgba(20,18,14,.74);
  --ink-68:   rgba(20,18,14,.68);
  --ink-56:   rgba(20,18,14,.56);
  --ink-50:   rgba(20,18,14,.50);
  --ink-45:   rgba(20,18,14,.45);
  --hairline: rgba(20,18,14,.10);
  --field:    rgba(20,18,14,.18);

  /* акцент — единственный */
  --banana:       #FFC61E;
  --banana-press: #F0B60A;
  --tint:         #FFF3D0;
  --ring:         rgba(240,180,10,.70);

  /* статусы */
  --ok:    #147D5E;
  --error: #C7402B;

  --paper-70: rgba(250,247,240,.7);
  --paper-50: rgba(250,247,240,.5);

  --r-sm: 12px; --r-md: 16px; --r-lg: 18px;
  --container: 1200px;
  --pad-x: 36px;

  --ease: cubic-bezier(.3,0,.25,1);
  --t-in: 160ms;
  --t-out: 120ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* якоря не ныряют под sticky-шапку */
section[id] { scroll-margin-top: 92px; }
@media (max-width: 1023px) {
  section[id] { scroll-margin-top: 128px; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.55 'Manrope', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--banana-press); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* ---------- типографика ---------- */

.h1 {
  font: 800 54px/1.05 'Unbounded', sans-serif;
  letter-spacing: -.05em;
  hyphens: none;
  text-wrap: pretty;
}
.h2 {
  font: 800 32px/1.12 'Unbounded', sans-serif;
  letter-spacing: -.045em;
  text-wrap: pretty;
}
.lead { font: 400 17px/1.55 'Manrope', sans-serif; color: var(--ink-68); }
.small { font: 400 13px/1.5 'Manrope', sans-serif; }
.caption { font: 500 13px/1.45 'Manrope', sans-serif; }
.label {
  font: 600 10px/1.4 'Manrope', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.mono { font: 500 13px/1 'JetBrains Mono', monospace; }

/* ---------- сетка ---------- */

.container {
  max-width: calc(var(--container) + var(--pad-x) * 2);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.sec { padding: 84px 0; }
.sec--sand { background: var(--sand); }

.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin: 0 auto 40px;
  max-width: 820px;
}
.sec-head p { color: var(--ink-68); max-width: 62ch; }

/* ---------- кнопки (радиус 12, Manrope 700 15) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 0;
  font: 700 15px/1 'Manrope', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-in) var(--ease), color var(--t-in) var(--ease), transform var(--t-in) var(--ease), box-shadow var(--t-in) var(--ease);
}
.btn--banana { background: var(--banana); color: var(--ink); }
.btn--banana:hover { background: var(--banana-press); color: var(--ink); }
.btn--banana:active { transform: scale(.98); }

.btn--ghost { background: transparent; color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--field); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.btn--ghost:active { transform: scale(.98); }

.btn--sm { padding: 11px 18px; border-radius: 10px; font-size: 13.5px; }

/* ---------- шапка (по макету: маскот 32 + слово Unbounded) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid rgba(20,18,14,.09);
}
.site-header .container {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { height: 32px; width: auto; }
.wordmark {
  font: 800 20px/1 'Unbounded', sans-serif;
  letter-spacing: -.04em;
  color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: 26px; margin: 0 auto; }
.site-nav a {
  font: 500 13.5px/1 'Manrope', sans-serif;
  color: rgba(20,18,14,.66);
  transition: color var(--t-in) var(--ease);
}
.site-nav a:hover { color: var(--ink); }

.header-cta { flex: none; }

/* ---------- герой: всё по центру, маскот висит на лиане ---------- */

.hero { position: relative; padding: 0 0 64px; overflow: hidden; }
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
/* лиана свисает с самой кромки шапки */
.hero-hang { line-height: 0; margin-bottom: 4px; }
.hero-hang svg { height: 300px; width: auto; overflow: visible; display: block; }
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 980px;
}
.hero-copy .lead { max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }

/* ---------- карточки ---------- */

.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

.card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--t-in) var(--ease);
}
/* ховер — только обводка темнее, без подъёма и тени (правило ББ) */
.card:hover { box-shadow: inset 0 0 0 1.5px var(--field); }
.card h3 { font: 800 19px/1.25 'Manrope', sans-serif; letter-spacing: -.03em; }
.card p { font: 400 13.5px/1.55 'Manrope', sans-serif; color: var(--ink-68); }

/* карточка-шаг (радиус 16, номер mono) */
.step-card {
  background: var(--card);
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-card .mono { color: var(--ink-45); }
.step-card h3 { font: 700 17px/1.25 'Manrope', sans-serif; letter-spacing: -.03em; }
.step-card p { font: 400 13px/1.5 'Manrope', sans-serif; color: var(--ink-68); }

/* ---------- проекты ---------- */

.project-card { gap: 12px; }
.project-lock { display: flex; flex-direction: column; gap: 5px; }
.project-name {
  display: flex;
  align-items: center;
  gap: .14em;
  font: 800 19px/1 'Manrope', sans-serif;
  letter-spacing: -.035em;
  color: var(--ink);
}
.project-name .glyph { height: .9em; width: auto; flex: none; overflow: visible; transform: translateY(-.03em); }
.project-part {
  font: 600 10px/1 'Manrope', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20,18,14,.48);
}
.project-stats {
  display: flex;
  gap: 20px;
  padding: 10px 0 4px;
  border-top: 1px solid rgba(20,18,14,.09);
  margin-top: auto;
}
.project-stats .stat { display: flex; flex-direction: column; gap: 3px; }
.project-stats b {
  font: 800 17px/1 'Manrope', sans-serif;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.project-stats span { font: 400 11.5px/1 'Manrope', sans-serif; color: var(--ink-56); }
.project-link { font: 600 12.5px/1 'Manrope', sans-serif; color: var(--ink); padding-top: 2px; }
.project-link:hover { color: var(--banana-press); }

.project-card--soon { justify-content: center; align-items: flex-start; gap: 11px; }
.pill {
  display: inline-flex;
  align-items: center;
  background: var(--sand);
  border-radius: 99px;
  padding: 7px 13px;
}
.sec--sand .pill { background: var(--paper); }
.project-card--soon h3 { font: 700 18px/1.25 'Manrope', sans-serif; letter-spacing: -.03em; }
.project-card--soon p { max-width: 340px; font: 400 13px/1.5 'Manrope', sans-serif; color: rgba(20,18,14,.66); }

/* ---------- сервисы: карточки ИИ ---------- */

.ai-card { gap: 13px; }
.ai-name { font: 800 21px/1.2 'Manrope', sans-serif; letter-spacing: -.03em; }
.ai-tagline { font: 500 13.5px/1.5 'Manrope', sans-serif; color: var(--ink-68); }

.plus-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 2px 0; }
.plus-list li {
  position: relative;
  padding-left: 17px;
  font: 400 13.5px/1.5 'Manrope', sans-serif;
  color: var(--ink-74);
}
.plus-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--banana-press);
}

.who {
  font: 500 12.5px/1.45 'Manrope', sans-serif;
  color: var(--ink-56);
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.card-link { font: 700 13.5px/1 'Manrope', sans-serif; color: var(--ink); margin-top: auto; }
.card-link:hover { color: var(--banana-press); }

/* кнопка перехода внизу карточки ИИ */
.card-go { margin-top: auto; align-self: stretch; }

.quiz-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.quiz-cta-text { display: flex; flex-direction: column; gap: 5px; max-width: 560px; }
.quiz-cta-text b { font: 700 17px/1.25 'Manrope', sans-serif; letter-spacing: -.03em; }
.quiz-cta-text span { font: 400 13.5px/1.5 'Manrope', sans-serif; color: var(--ink-68); }
.quiz-cta-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.quiz-cta-actions .caption { color: var(--ink-56); }
.quiz-cta-actions .caption:hover { color: var(--ink); }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font: 600 16px/1.4 'Manrope', sans-serif;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 20px;
  font: 400 20px/1 'Manrope', sans-serif;
  color: var(--ink-56);
  text-align: center;
}
.faq details[open] summary::after { content: "−"; }
.faq .faq-a { padding: 0 44px 20px 0; font: 400 14px/1.6 'Manrope', sans-serif; color: var(--ink-68); }

/* ---------- чернильный CTA (один на страницу) ---------- */

.ink-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 26px 30px;
  margin-top: 48px;
  overflow: hidden;
}
.ink-cta-pattern { position: absolute; inset: 0; opacity: .08; pointer-events: none; }
.ink-cta > :not(.ink-cta-pattern) { position: relative; }
.ink-cta-mascot { flex: none; }
.ink-cta-mascot svg { height: 96px; width: auto; overflow: visible; display: block; }
.ink-cta-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ink-cta-text b { font: 700 19px/1.25 'Manrope', sans-serif; letter-spacing: -.03em; color: var(--paper); }
.ink-cta-text span { font: 400 13.5px/1.5 'Manrope', sans-serif; color: var(--paper-70); }

/* ---------- футер (песок, по макету) ---------- */

.site-footer { background: var(--sand); border-top: 1px solid var(--hairline); padding: 48px 0 36px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px 24px;
  margin-bottom: 40px;
}
.endorse { display: flex; align-items: center; gap: 11px; }
.endorse img { height: 28px; width: auto; }
.endorse-name { display: flex; flex-direction: column; gap: 3px; }
.endorse-name .wordmark { font-size: 18px; }
.endorse-name .caption { color: var(--ink-56); }

.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col .label { margin-bottom: 4px; }
.footer-col a { font: 500 13.5px/1.4 'Manrope', sans-serif; color: var(--ink-68); }
.footer-col a:hover { color: var(--ink); }

.footer-legal {
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font: 400 11.5px/1.6 'Manrope', sans-serif;
  color: var(--ink-50);
  max-width: 900px;
}

/* ---------- квиз «Помочь с выбором» ---------- */

.quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20,18,14,.45);
}
.quiz-overlay.open { display: flex; }

.quiz-wrap { position: relative; width: min(560px, 100%); }
/* полноразмерный маскот думает справа от окна квиза */
.quiz-mascot {
  position: absolute;
  right: -186px;
  bottom: 0;
  line-height: 0;
  pointer-events: none;
  animation: mIdle 3.2s ease-in-out infinite;
}
.quiz-mascot svg { height: 212px; width: auto; overflow: visible; display: block; }
.m-think-dot { animation: mDots 1.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.m-think-dot.d2 { animation-delay: .18s; }
.m-think-dot.d3 { animation-delay: .36s; }
@media (max-width: 999px) {
  .quiz-mascot { display: none; }
}

.quiz-dialog {
  width: 100%;
  max-height: calc(100vh - 90px);
  overflow: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 30px;
  /* тень разрешена только оверлеям */
  box-shadow: 0 18px 40px -18px rgba(20,18,14,.28);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  align-items: center;
}

.quiz-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.quiz-close {
  border: 0; background: transparent; cursor: pointer;
  font: 400 22px/1 'Manrope', sans-serif; color: var(--ink-56);
  width: 32px; height: 32px; border-radius: 8px;
}
.quiz-close:hover { color: var(--ink); background: rgba(20,18,14,.06); }

.quiz-pills { display: flex; gap: 8px; }
.quiz-pill {
  width: 34px; height: 6px; border-radius: 99px;
  background: var(--hairline);
  transition: background-color var(--t-in) var(--ease);
}
.quiz-pill.on { background: var(--banana); }

.quiz-step { display: flex; flex-direction: column; gap: 20px; align-items: center; width: 100%; }

.quiz-q { font: 800 21px/1.25 'Manrope', sans-serif; letter-spacing: -.03em; max-width: 24em; }

.quiz-opts { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.quiz-opt {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--field);
  font: 600 14.5px/1.35 'Manrope', sans-serif;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--t-in) var(--ease), transform var(--t-in) var(--ease);
}
.quiz-opt:hover { box-shadow: inset 0 0 0 2px var(--ring); }
.quiz-opt:active { transform: scale(.985); }

.quiz-back {
  border: 0; background: transparent; cursor: pointer;
  font: 600 13px/1 'Manrope', sans-serif; color: var(--ink-56);
}
.quiz-back:hover { color: var(--ink); }
.quiz-back[hidden] { display: none; }

.quiz-result { display: none; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.quiz-result.on { display: flex; }
.quiz-reco {
  width: 100%;
  background: var(--card-hi);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1.5px var(--ring);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.quiz-reco .label { color: var(--banana-press); }
.quiz-reco-name { font: 800 25px/1.15 'Manrope', sans-serif; letter-spacing: -.03em; }
.quiz-reco-price {
  font: 800 30px/1 'Manrope', sans-serif;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  width: 100%;
}
.quiz-why { list-style: none; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.quiz-why li {
  position: relative;
  padding-left: 17px;
  font: 400 13.5px/1.5 'Manrope', sans-serif;
  color: var(--ink-74);
  text-align: left;
}
.quiz-why li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--banana-press);
}
.quiz-note { color: var(--ink-56); }

body.quiz-lock { overflow: hidden; }

/* ---------- анимации маскота (эталон BananPay Maskot.dc.html + доработки) ---------- */

@keyframes mIdle { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes mPointArm { 0%,52% { transform: rotate(0deg) } 62% { transform: rotate(-13deg) } 72% { transform: rotate(4deg) } 82%,100% { transform: rotate(0deg) } }
@keyframes mCheer {
  0%,100% { transform: translateY(0) rotate(0deg) }
  22% { transform: translateY(-13px) rotate(-3deg) }
  44% { transform: translateY(0) }
  62% { transform: translateY(-7px) rotate(2deg) }
  80% { transform: translateY(0) }
}
/* качание на лиане: ±7° от точки хвата, 4.2s (тайминг из спеки) */
@keyframes mSwing { 0%,100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }
/* лиана подыгрывает телу лёгким изгибом */
@keyframes mVineSway { 0%,100% { transform: rotate(-1.6deg) } 50% { transform: rotate(1.6deg) } }
/* моргание: редкое, быстрое */
@keyframes mBlink { 0%,91.5%,95.5%,100% { transform: scaleY(1) } 93.5% { transform: scaleY(.08) } }
/* хвост живёт своей жизнью */
@keyframes mTail { 0%,100% { transform: rotate(0deg) } 50% { transform: rotate(9deg) } }
/* поза think: лёгкий наклон и пузырьки мыслей (тайминги из спеки) */
@keyframes mThink { 0%,100% { transform: rotate(0deg) } 50% { transform: rotate(-4deg) } }
@keyframes mDots { 0%,66% { opacity: .15; transform: scale(.75) } 80% { opacity: 1; transform: scale(1) } 100% { opacity: .15; transform: scale(.75) } }
/* пульс главной кнопки в кадр с маскотом (из спеки point) */
@keyframes mBtnPulse {
  0%,54% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240,180,10,.5) }
  68% { transform: scale(1.045); box-shadow: 0 0 0 12px rgba(240,180,10,0) }
  80%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240,180,10,0) }
}

.m-eye { transform-box: fill-box; transform-origin: center; animation: mBlink 4.8s linear infinite; }
.m-eye--slow { animation-duration: 6.2s; }

.btn--pulse { animation: mBtnPulse 3.6s var(--ease) infinite; }

/* ---------- появление секций при прокрутке ---------- */

html.js .rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
html.js .rv.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; }
}

/* ---------- адаптив ---------- */

@media (max-width: 1023px) {
  .cards-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-hang svg { height: 250px; }
  /* шапка в две строки: бренд + кнопка, ниже — прокручиваемая навигация */
  .site-header .container { height: auto; flex-wrap: wrap; padding-top: 12px; row-gap: 2px; column-gap: 12px; }
  .header-cta { margin-left: auto; }
  .site-nav {
    order: 3;
    width: 100%;
    margin: 0;
    padding: 4px 0 12px;
    gap: 12px;
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; padding: 8px 0; white-space: nowrap; }
}

/* ручной разрыв H1 живёт только на широких экранах */
@media (max-width: 919px) {
  .h1 br { display: none; }
}

@media (max-width: 767px) {
  :root { --pad-x: 20px; }
  .sec { padding: 56px 0; }
  .h1 { font-size: 34px; line-height: 1.1; }
  .h2 { font-size: 26px; line-height: 1.15; }
  .lead { font-size: 15px; }
  .hero { padding: 0 0 48px; }
  .hero-hang svg { height: 190px; }
  .cards-2 { grid-template-columns: 1fr; }
  .brand img { height: 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-actions .btn { flex: 1; }
  .ink-cta { flex-direction: column; text-align: center; padding: 24px 20px; }
  .quiz-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .quiz-cta-actions { align-items: center; }
  .quiz-dialog { padding: 24px 20px; }
}