/* ============ Screen 2 · заголовок + вход в квиз ============ */
.intro {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px var(--page-x) 56px;
  overflow-x: clip;   /* по вертикали мясо может «выходить» за секцию */
  z-index: 1;
}

.intro__title { position: relative; z-index: 1; max-width: 1000px; }
.intro__title .hl { color: var(--accent-deep); transition: color var(--t-theme); }
.intro__title .hl svg { bottom: -.22em; }

.intro__sub {
  position: relative; z-index: 1;
  max-width: 540px; margin-top: 22px;
  color: var(--ink-2); font-size: 16px;
}
.intro__note { position: relative; z-index: 1; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--ink-3); }

/* ---------- Мясо на трёх планах ---------- */
.intro-f1 { width: 42px; left: 6%; top: 18px; --r0: -18deg; --dur: 9s; }
.intro-f2 { width: 92px; right: -10px; top: 6px; --r0: 14deg; --dur: 7s; --delay: -3s; }
.intro-f3 { width: 170px; left: -60px; bottom: -40px; --r0: -10deg; --dur: 11s; --delay: -5s; }

/* ---------- Строка квиза (как у референса: белая «пилюля») ---------- */
.quiz-bar {
  position: relative; z-index: 1;
  width: 100%; max-width: 1080px; margin-top: 36px;
  display: grid; gap: 10px;
  padding: 10px; border-radius: 28px;
  background: #fff; box-shadow: 0 24px 60px -30px rgba(35, 48, 30, .35);
}
.quiz-bar__field input { border-color: transparent; background: var(--page); }
.quiz-bar__field input:focus { background: #fff; }

.quiz-bar__submit {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 8px 8px 8px 24px; border-radius: var(--r-md);
  background: var(--accent-deep); color: #fff;
  font-weight: 800; font-size: 16px;
  transition: background-color var(--t-theme) var(--ease-in-out), transform .3s var(--ease-out);
}
.quiz-bar__submit:hover .btn-accent__arrow svg { transform: translateX(3px); }
.quiz-bar__submit:active { transform: scale(.98); }
.quiz-bar__submit .btn-accent__arrow { width: 46px; height: 46px; }

@media (min-width: 768px) {
  .intro { padding-top: 48px; padding-bottom: 64px; }
  .intro__sub { font-size: 18px; }
  .intro-f1 { width: 70px; left: 12%; top: 40px; }
  .intro-f2 { width: 150px; right: 6%; top: 30%; }
  .intro-f3 { width: 300px; left: -90px; bottom: -70px; }
}

@media (min-width: 1024px) {
  .intro { padding-top: 40px; padding-bottom: 72px; }
  .intro-f2 { width: 180px; right: 9%; top: 38%; }

  /* одна строка: поля через разделители + кнопка справа */
  .quiz-bar {
    grid-template-columns: 1fr 1fr 1fr auto; gap: 0;
    padding: 8px; border-radius: var(--r-pill);
  }
  .quiz-bar__field + .quiz-bar__field::before {
    content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--line);
  }
  .quiz-bar__field input { background: transparent; border-radius: var(--r-pill); padding-left: 28px; }
  .quiz-bar__field input:focus { box-shadow: none; background: var(--page); }
  .quiz-bar__field label { left: 29px; }
  .quiz-bar__submit { border-radius: var(--r-pill); padding-left: 32px; min-width: 260px; }
}