/* ===== «Написать нам» + «Отзывы» одной секцией (#message.duo) =====
   Широкий градиент от тёмно-синего к сине-фиолетовому. Слева — текст с картинкой и цифры отзывов,
   справа — карточка с формой, под неё уезжают колонки отзывов. На телефоне: текст → форма → отзывы → цифры. */
.duo { position: relative; margin-top: 48px; color: #fff; overflow: hidden;
  background:
    radial-gradient(35% 22% at 22% 24%, rgba(74,120,240,0.5), transparent 70%),
    radial-gradient(30% 20% at 92% 6%, rgba(140,110,255,0.3), transparent 70%),
    radial-gradient(40% 25% at 10% 88%, rgba(255,255,255,0.18), transparent 70%),
    linear-gradient(180deg, #0B1530 0%, #0D1A42 22%, #233F9E 48%, #3E6BE6 68%, var(--blue) 82%, #6A5BF0 100%); }
.duo::before { content: ""; position: absolute; inset: 0 0 55% 0; pointer-events: none; opacity: 0.22;
  background-image: radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.duo__in { position: relative; width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 56px; }
.duo__left { padding: 88px 0 80px; }
.duo__eb { color: #8FB0FF; }

/* «Расскажите о задаче»: картинка на светящемся подиуме, вокруг кольца и плашки */
.v1__title { margin-top: 12px; font: 600 40px/50px var(--f-mont); color: #fff; }
.v1__sub { margin-top: 14px; max-width: 460px; font: 400 16px/26px var(--f-inter); color: rgba(255,255,255,0.7); }
.v1__stage { position: relative; height: 400px; margin-top: 24px; }
.v1__disk { position: absolute; left: 50%; bottom: 18px; width: 420px; height: 90px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143,176,255,0.9), rgba(74,120,240,0.35) 60%, transparent 100%); filter: blur(6px); }
.v1__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(143,176,255,0.28); transform: translate(-50%, -50%); }
.v1__ring--1 { width: 300px; height: 300px; border-color: rgba(143,176,255,0.45); }
.v1__ring--2 { width: 420px; height: 420px; border-style: dashed; animation: v1-spin 60s linear infinite; }
.v1__ring--3 { width: 540px; height: 540px; border-color: rgba(143,176,255,0.14); }
@keyframes v1-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.v1__art { position: absolute; left: 50%; top: 50%; width: 330px; height: auto; transform: translate(-50%, -52%); filter: drop-shadow(0 30px 40px rgba(0, 10, 60, 0.6));
  animation: v1-float 6s ease-in-out infinite; }
@keyframes v1-float { 50% { transform: translate(-50%, -56%); } }
.v1__chip { position: absolute; display: grid; grid-template-columns: 32px auto; column-gap: 10px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 16px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px rgba(0, 8, 40, 0.35); color: #fff; font: 600 14px/18px var(--f-inter); animation: v1-float2 7s ease-in-out infinite; }
.v1__chip i { grid-row: span 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); }
.v1__chip span { font-weight: 400; font-size: 12px; line-height: 16px; color: rgba(255,255,255,0.65); }
.v1__chip--tg { left: 4px; top: 36px; }
.v1__chip--mail { right: 0; top: 120px; animation-delay: -2s; }
.v1__chip--mail i { background: #7B61FF; }
.v1__chip--time { left: 40px; bottom: 30px; animation-delay: -4s; }
.v1__chip--time i { background: #22B07D; }
@keyframes v1-float2 { 50% { transform: translateY(-6px); } }

/* карточка с формой */
.v1__card { position: relative; padding: 28px; border-radius: 28px; background: #fff; box-shadow: 0 50px 90px -30px rgba(0, 10, 60, 0.7); }
.v1__card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-blue); font: 600 16px/20px var(--f-mont); color: var(--dark); }
.v1__dot { width: 10px; height: 10px; border-radius: 50%; background: #22B07D; box-shadow: 0 0 0 4px rgba(34,176,125,0.18); }
.v1__card-to { margin-left: auto; font: 400 13px/16px var(--f-inter); color: var(--dark-60); }
.msg__count { grid-column: 1 / -1; margin-top: -6px; text-align: right; font: 400 12px/16px var(--f-inter); color: var(--dark-60); } /* счётчик символов сообщения */
.msg__count.is-near { color: #E5484D; }
.v1__alt { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--border-blue); display: flex; gap: 24px; flex-wrap: wrap; font: 400 14px/20px var(--f-inter); color: var(--dark-60); }
.v1__alt li { display: flex; align-items: center; gap: 8px; }
.v1__alt svg { color: var(--blue); }
.v1__alt a { color: var(--blue); font-weight: 600; }
.duo__right { position: relative; padding-top: 120px; }
.duo__card { position: relative; z-index: 3; border: 1px solid rgba(143,176,255,0.6); }
.duo__card::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -40px; height: 40px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 12, 50, 0.45), transparent); filter: blur(6px); } /* тень, под которую «ныряют» отзывы */

/* «Что говорят о нас клиенты»: оценка, полоски с цифрами, картинка */
.duo__rev { position: relative; margin-top: 64px; display: flex; flex-direction: column; gap: 22px; }
.duo__rev .duo__eb { color: rgba(255,255,255,0.75); }
.r3__h { color: #fff; margin-top: -10px; }
.r3__score { display: flex; align-items: center; gap: 16px; }
.r3__score-num { font: 700 64px/1 var(--f-mont); }
.r3__stars { color: var(--yellow); font-size: 22px; letter-spacing: 3px; }
.r3__score-cap { font: 400 14px/20px var(--f-inter); color: rgba(255,255,255,0.75); }
.duo__kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 36px; padding: 26px 30px; border-radius: 24px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.duo__kpi .r3__stats { padding-left: 36px; border-left: 1px solid rgba(255,255,255,0.2); }
.r3__stats { display: grid; gap: 12px; }
.r3__stats div { position: relative; display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; }
.r3__stats b { font: 700 20px/24px var(--f-mont); min-width: 56px; }
.r3__stats span { font: 400 14px/20px var(--f-inter); color: rgba(255,255,255,0.8); }
.r3__stats i { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; border-radius: 2px; background: rgba(255,255,255,0.18); }
.r3__stats i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 2px; background: #fff; animation: r3-w 1.4s var(--ease-out) both; }
@keyframes r3-w { from { width: 0; } }
.duo__cards { width: 300px; height: auto; margin: 4px auto 0; filter: drop-shadow(0 30px 40px rgba(10, 20, 90, 0.4)); animation: msg-float 6s ease-in-out infinite; }

/* лента отзывов: две колонки едут навстречу, при наведении стоят */
.r3__wall { position: absolute; z-index: 1; left: 0; right: 0; top: 320px; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 6%, #000 88%, transparent); mask-image: linear-gradient(transparent 0, #000 6%, #000 88%, transparent); }
.r3__col { display: flex; flex-direction: column; gap: 16px; animation: r3-up 80s linear infinite; }
.r3__col--down { animation-name: r3-down; }
.r3__wall:hover .r3__col { animation-play-state: paused; }
@keyframes r3-up { to { transform: translateY(-50%); } }
@keyframes r3-down { from { transform: translateY(-50%); } to { transform: none; } }
.r3c { padding: 18px; border-radius: 22px; background: #fff; color: var(--dark); box-shadow: 0 20px 40px -24px rgba(10, 20, 90, 0.5); }
.r3c--glass { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.22); box-shadow: none; }
.r3c__stars { color: var(--yellow); letter-spacing: 2px; }
.r3c__q { margin-top: 10px; font: 400 14px/21px var(--f-inter); }
.r3c__tag { display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 10px; background: var(--blue-50); color: var(--blue); font: 600 13px/18px var(--f-inter); }
.r3c--glass .r3c__tag { background: rgba(255,255,255,0.18); color: #fff; }
.r3c__who { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 400 13px/18px var(--f-inter); opacity: 0.8; }
.r3c__who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #C3C3C3; }
.r3c__who b { display: block; font: 600 14px/18px var(--f-inter); }

@media (prefers-reduced-motion: reduce) { .v1__ring--2, .v1__art, .v1__chip, .duo__cards, .r3__col, .r3__stats i::after { animation: none; } }

/* --- планшет --- */
@media (max-width: 1339px) {
  .duo__in { width: auto; margin: 0 24px; grid-template-columns: minmax(0, 1fr) 520px; gap: 32px; }
  .v1__title { font-size: 32px; line-height: 42px; }
  .duo__kpi { gap: 22px; padding: 22px; }
  .duo__kpi .r3__stats { padding-left: 22px; }
  .r3__score-num { font-size: 52px; }
}
@media (max-width: 1023px) {
  .duo__in { display: flex; flex-direction: column; gap: 0; }
  .duo__left, .duo__right { display: contents; }
  .duo__msg { order: 1; padding-top: 56px; }
  .duo__card { order: 2; margin-top: 24px; }
  .r3__wall { order: 3; position: relative; top: auto; left: auto; right: auto; height: 470px; margin-top: -90px; }
  .duo__rev { order: 4; margin: 32px 0 64px; }
  .duo__cards { width: 240px; margin: 8px auto 0; }
  .v1__title { font-size: 30px; line-height: 38px; }
  .v1__stage { height: 340px; }
}
/* узкий ноутбук: колонка слева узкая — оценка над полосками */
@media (min-width: 1024px) and (max-width: 1199px) {
  .duo__kpi { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .duo__kpi .r3__stats { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.2); }
}
/* --- телефон --- */
@media (max-width: 767px) {
  .duo__in { margin: 0 16px; }
  .v1__title { font-size: 26px; line-height: 34px; }
  .v1__title br { display: none; }
  .v1__sub { font-size: 15px; line-height: 23px; }
  .v1__stage { height: 290px; margin-top: 8px; }
  .v1__art { width: 220px; }
  .v1__ring--1 { width: 220px; height: 220px; } .v1__ring--2 { width: 300px; height: 300px; } .v1__ring--3 { width: 380px; height: 380px; }
  .v1__disk { width: 280px; height: 60px; }
  .v1__chip { grid-template-columns: 26px auto; column-gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; font-size: 12px; line-height: 15px; }
  .v1__chip i { width: 26px; height: 26px; border-radius: 8px; }
  .v1__chip i svg { width: 13px; height: 13px; }
  .v1__chip span { font-size: 10px; line-height: 13px; }
  .v1__chip--tg { left: 0; top: 8px; } .v1__chip--mail { right: 0; top: 100px; } .v1__chip--time { left: 0; bottom: 10px; }
  .v1__card { padding: 20px 16px; border-radius: 22px; }
  .v1__alt { flex-direction: column; gap: 10px; }
  .r3__wall { grid-template-columns: minmax(0, 1fr); }
  .r3__col--down { display: none; } /* на телефоне одна колонка */
  .r3__score-num { font-size: 52px; }
  .duo__kpi { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .duo__kpi .r3__stats { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.2); }
}