/* ============================================================
   Smoke-landing — дизайн по мотивам Revision Village.
   Палитра, типографика и карточки сняты со скриншотов RV.
   ============================================================ */

:root {
  --navy-900: #0a2342;   /* база героя */
  --navy-800: #0e2d54;
  --navy-700: #123a66;   /* конец градиента */
  --blue:     #1e83e0;   /* акцент / кнопки (как у RV) */
  --blue-600: #176fc2;
  --cream:    #efeae0;   /* текст героя */
  --ink:      #0a2342;   /* текст на белом */
  --muted:    #5a6b80;
  --gold:     #e6a817;
  --maroon:   #9b2c46;
  --green:    #1fa463;
  --radius:   16px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Кнопки (pill, как у RV) ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--blue-600); }
.btn--blue:active { transform: translateY(1px); }
.btn--sm { padding: 10px 20px; font-size: .95rem; }

/* ---------- Промо-плашка (первые юзеры) ---------- */
.promo-bar {
  background: var(--blue); color: #fff; text-align: center;
  font-size: .92rem; font-weight: 500; padding: 9px 16px;
}
.promo-bar strong { font-weight: 700; }

/* ---------- Шапка ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid #eef1f5;
}
.nav__inner {
  max-width: 1120px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo__flask { width: 28px; height: 28px; display: block; }
.logo__word { font-weight: 800; font-size: 1.2rem; letter-spacing: -.5px; }
.logo__word--sm { font-size: 1rem; color: #fff; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--cream);
  padding: 72px 24px 64px;
  text-align: center;
}
.hero__inner { max-width: 880px; margin: 0 auto; }
.hero__kicker {
  display: inline-block; margin-bottom: 18px;
  font-size: .78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #8fc4f5;
  background: rgba(30,131,224,.14);
  border: 1px solid rgba(30,131,224,.4);
  padding: 7px 16px; border-radius: 999px;
}
.hero__title {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -1px;
}
.accent { position: relative; color: var(--blue); white-space: nowrap; }
.underline {
  position: absolute; left: 0; right: 0; bottom: -10px;
  width: 100%; height: 16px;
}
.hero__sub {
  margin: 26px auto 0; max-width: 620px;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  color: rgba(239, 234, 224, .82);
}

/* ---------- Форма ---------- */
.signup {
  margin: 34px auto 0; max-width: 540px;
  display: flex; gap: 10px;
}
.signup--center { margin-top: 28px; }
.signup__input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 1rem;
  padding: 14px 18px;
  border: none; border-radius: 999px;
  background: #fff; color: var(--ink);
  outline: none;
}
.signup__input:focus { box-shadow: 0 0 0 3px rgba(30,131,224,.45); }
.signup__note {
  margin-top: 14px; font-size: .9rem;
  color: rgba(239, 234, 224, .7);
}
.signup__note--light { color: rgba(239, 234, 224, .7); }
.signup__note.is-success { color: #6ee7a8; font-weight: 600; }
.signup__note.is-error { color: #ff9b9b; font-weight: 600; }

/* ---------- Карточки-функции ---------- */
.cards {
  margin-top: 52px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: left;
}
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px; margin-bottom: 16px;
}
.card__icon svg { width: 24px; height: 24px; }
.card__icon--gold   { background: var(--gold); }
.card__icon--blue   { background: var(--blue); }
.card__icon--maroon { background: var(--maroon); }
.card__icon--green  { background: var(--green); }
.card__title { color: #fff; font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.card__text  { color: rgba(239,234,224,.78); font-size: .98rem; }

/* ---------- Как это работает ---------- */
.how { background: #fff; padding: 72px 24px; text-align: center; }
.how__inner { max-width: 1000px; margin: 0 auto; position: relative; }
.section-title {
  font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800;
  letter-spacing: -.5px; color: var(--ink);
}
.how__doodle {
  display: inline-block; margin-top: 6px;
  font-family: "Caveat", cursive; font-size: 1.5rem; color: var(--blue);
  transform: rotate(-3deg);
}
.steps {
  margin-top: 40px;
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}
.step {
  background: #f6f8fb; border-radius: var(--radius);
  padding: 28px 22px; position: relative;
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--blue); color: #fff; font-weight: 800; font-size: 1.1rem;
  margin-bottom: 14px;
}
.step p { color: var(--muted); font-weight: 500; }
.step--arrow::before {
  content: "→"; position: absolute; left: -16px; top: 50%;
  transform: translateY(-50%); color: var(--blue); font-size: 1.6rem; font-weight: 700;
}

/* ---------- Финальный CTA ---------- */
.cta {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: var(--cream); padding: 72px 24px; text-align: center;
}
.cta__inner { max-width: 700px; margin: 0 auto; }
.cta__title { font-size: clamp(1.6rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -.5px; }

/* ---------- Футер ---------- */
.footer {
  background: var(--navy-900); color: rgba(239,234,224,.6);
  padding: 24px; display: flex; align-items: center; justify-content: space-between;
  max-width: 100%;
}
.footer__copy { font-size: .9rem; }

/* ---------- Адаптив ---------- */
@media (max-width: 760px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .signup { flex-direction: column; }
  .signup__input, .signup .btn { width: 100%; }
  .step--arrow::before { content: "↓"; left: 50%; top: -18px; transform: translateX(-50%); }
}