/* тема под mis.32top - убрать link в index если не нужна */

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

:root {
  --blue-900: #283143;
  --blue-800: #2f3a50;
  --blue-700: #0171dc;
  --blue-600: #0096eb;
  --blue-500: #00a3ff;
  --blue-400: #33b5ff;
  --blue-300: #66c7ff;
  --blue-100: #d6ebff;
  --blue-50: #f7fbff;
  --green-500: #00a3ff;
  --green-400: #33b5ff;
  --gray-900: #283143;
  --gray-700: #3d4a63;
  --gray-500: #6b7a94;
  --gray-300: #a8b4c8;
  --radius: 17px;
  --radius-sm: 12px;
  --radius-pill: 50px;
  --shadow: 0 8px 32px rgba(40, 49, 67, 0.08);
  --shadow-lg: 0 16px 48px rgba(40, 49, 67, 0.12);
  --quiz-bg: #fdfefe;
}

html, body {
  font-family: "Lato", "Segoe UI", system-ui, sans-serif;
  background: var(--blue-50);
  color: var(--gray-900);
}

/* кнопки как на сайте */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.25s, box-shadow 0.25s, transform 0.2s;
}

.btn--primary {
  background: var(--blue-500);
  box-shadow: none;
}
.btn--primary:hover:not(:disabled) {
  background: var(--blue-600);
  box-shadow: 0 6px 20px rgba(0, 163, 255, 0.35);
}

.btn--ghost {
  background: var(--white);
  color: var(--blue-500);
  border: 2px solid var(--blue-100);
}
.btn--ghost:hover:not(:disabled) {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--blue-600);
}

/* левый столбик с шагами */
.quiz-split {
  background: var(--quiz-bg);
}

.split-layout {
  border-top: 1px solid var(--blue-100);
}

.split-sidebar {
  background: var(--blue-900);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.split-sidebar__logo {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.split-nav-item.active {
  background: rgba(0, 163, 255, 0.15);
  border-left-color: var(--blue-500);
}

.split-nav-item.done .split-nav-item__num {
  background: var(--blue-500);
}

.split-nav-item__text {
  color: rgba(205, 217, 239, 0.75);
}

.split-nav-item.active .split-nav-item__text {
  color: #cdd9ef;
}

.split-main {
  background: var(--quiz-bg);
}

.split-nav {
  border-top-color: var(--blue-100);
}

/* варианты ответов */
.q-title {
  color: var(--blue-900);
  font-weight: 700;
}

.q-hint {
  color: var(--blue-500);
  font-weight: 600;
}

.q-media {
  border-radius: var(--radius);
}

.q-media__badge {
  color: var(--blue-600);
  border: 1px solid var(--blue-100);
}

.q-option {
  background: var(--blue-50);
  border: 2px solid var(--blue-100);
  border-radius: var(--radius-sm);
}

.q-option:hover {
  border-color: var(--blue-400);
  background: var(--white);
}

.q-option.selected {
  border-color: var(--blue-500);
  background: rgba(0, 163, 255, 0.06);
  box-shadow: 0 0 0 1px var(--blue-500);
}

.q-option__marker {
  border-color: var(--blue-300);
}

.q-option.selected .q-option__marker,
.q-option--multi.selected .q-option__marker--square {
  border-color: var(--blue-500);
  background: var(--blue-500);
}

/* галочки в сайдбаре */
.split-nav-item__num {
  background: rgba(255, 255, 255, 0.1);
  color: #cdd9ef;
}

/* итоговый экран */
.result-screen__story {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.result-screen__story--aurora .result-screen__story-aura::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.result-screen__story--aurora .result-screen__story-shape--a {
  background: linear-gradient(135deg, rgba(0, 163, 255, 0.32), rgba(0, 163, 255, 0.03));
}

.result-screen__story--aurora .result-screen__story-shape--b {
  background: linear-gradient(160deg, rgba(1, 113, 220, 0.24), rgba(51, 181, 255, 0.05));
}

.result-screen__story--rift .result-screen__story-aura::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.result-screen__story--rift .result-screen__story-ribbon {
  background: linear-gradient(205deg, rgba(0, 163, 255, 0.26) 0%, rgba(0, 150, 235, 0.06) 55%, transparent 100%);
}

.result-screen__icon {
  background: var(--blue-500);
  box-shadow: 0 8px 28px rgba(0, 163, 255, 0.3);
}

.result-screen__title {
  color: var(--blue-900);
}

.result-screen__list li {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.result-screen__pain {
  color: var(--blue-900);
}

.result-screen__solution {
  color: var(--gray-500);
}

.result-screen__banner {
  background: rgba(0, 163, 255, 0.08);
  border-color: var(--blue-100);
}

.result-screen__banner-icon-mark {
  background: var(--blue-500);
  box-shadow: 0 8px 24px rgba(0, 163, 255, 0.25);
}

.result-screen__banner-icon-label {
  color: var(--blue-600);
}

.result-screen__banner-text {
  color: var(--blue-900);
}

.result-screen__form {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.result-screen__brand img {
  opacity: 0.95;
  width: clamp(234px, 18vw, 286px);
}

@media (max-width: 900px) {
  .result-screen__brand img {
    width: auto !important;
    height: calc(var(--result-mobile-circle-size) * 0.88) !important;
    max-width: none !important;
  }
}

/* форма внизу */
.contact-form__title {
  color: var(--blue-900);
}

.contact-form__field input {
  border-radius: var(--radius-sm);
  border: 2px solid var(--blue-100);
}

.contact-form__field input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(0, 163, 255, 0.12);
}

.contact-form__success {
  background: rgba(0, 163, 255, 0.1);
  border-color: var(--blue-500);
}

/* сайдбар на телефоне листается */
@media (max-width: 900px) {
  .split-nav-item.active {
    border-bottom-color: var(--blue-500);
  }
}

/* welcome */
.page--welcome {
  background: #f6f6fa;
}

.page--welcome .welcome-hero__orb {
  opacity: 0.14;
}

.page--welcome .welcome-hero__orb--a {
  background: rgba(0, 163, 255, 0.12);
}

.page--welcome .welcome-hero__orb--b {
  background: rgba(1, 113, 220, 0.08);
}

.welcome-hero__brand {
  background: linear-gradient(160deg, var(--blue-900) 0%, #1f2838 100%);
}

.welcome-hero__badge {
  color: var(--blue-700);
  border-color: var(--blue-100);
}