/* ============================================================
   DESKTOP — Figma «для вени», верхний ряд, артборд 1440
   Главная 1:134 (1440×960) · анкеты 1:164 / 1:258 / 1:330 (1440×1400)
   ============================================================ */

.desktop {
  display: none;
  background: #000;
}

.d-scale-wrap {
  --scale: 1;
  --frame-h: 960;
  width: 100%;
  height: calc(var(--frame-h) * 1px * var(--scale));
  margin: 0 auto;
  overflow: hidden;
}

.d-frame {
  position: relative;
  width: 1440px;
  overflow: hidden;
  transform: scale(var(--scale));
  transform-origin: top left;
  animation: fade-in 0.45s ease both;
}

/* ---------- Главная 1:134 ---------- */

/* Ручка градиента в Figma выходит за пределы фрейма: стопы пересчитаны
   по реальному рендеру макета, а не по позициям из экспорта MCP. */
.d-frame--home {
  height: 960px;
  background-image: linear-gradient(130.331deg, rgb(35, 238, 218) -33.77%, rgb(0, 0, 0) 79.43%);
}

.d-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.d-deco__glow,
.d-deco__orbit,
.d-deco__star,
.d-deco__star-sm,
.d-deco__star-xs {
  position: absolute;
}

.d-deco__glow img,
.d-deco__orbit img,
.d-deco__star-sm img,
.d-deco__star-xs img {
  position: absolute;
  display: block;
  max-width: none;
}

.d-deco__glow--deep {
  left: -180px;
  top: 520px;
  width: 620px;
  height: 420px;
}
.d-deco__glow--deep img {
  inset: -33.33% -22.58%;
}

.d-deco__glow--bright {
  left: 760px;
  top: 90px;
  width: 520px;
  height: 520px;
}
.d-deco__glow--bright img {
  inset: -25%;
}

.d-deco__glow--teal {
  left: 1030px;
  top: 120px;
  width: 280px;
  height: 280px;
}
.d-deco__glow--teal img {
  inset: -39.29%;
}

.d-deco__glow--warm {
  left: 1120px;
  top: 410px;
  width: 420px;
  height: 420px;
}
.d-deco__glow--warm img {
  inset: -26.19%;
}

.d-deco__glow--lavender {
  left: 700px;
  top: 260px;
  width: 620px;
  height: 620px;
}
.d-deco__glow--lavender img {
  inset: -25.81%;
}

.d-deco__glow--brand {
  left: 930px;
  top: -300px;
  width: 720px;
  height: 720px;
}
.d-deco__glow--brand img {
  inset: -20.14%;
}

.d-deco__ghost {
  position: absolute;
  left: 1000px;
  top: 470px;
  margin: 0;
  font-size: 168px;
  font-weight: 700;
  line-height: normal;
  color: rgba(9, 217, 193, 0.24);
  white-space: nowrap;
}

.d-deco__orbit {
  animation: float-y 8s ease-in-out infinite;
}

.d-deco__orbit--3 {
  left: 774px;
  top: 20px;
  width: 772px;
  height: 772px;
}
.d-deco__orbit--3 img {
  inset: -1.55%;
}

.d-deco__orbit--2 {
  left: 842px;
  top: 88px;
  width: 636px;
  height: 636px;
  animation-delay: -1.2s;
}
.d-deco__orbit--2 img {
  inset: -1.89%;
}

.d-deco__orbit--1 {
  left: 910px;
  top: 156px;
  width: 500px;
  height: 500px;
  animation-delay: -2.4s;
}
.d-deco__orbit--1 img {
  inset: -2.4%;
}

.d-deco__star {
  left: 1076px;
  top: 282px;
  width: 164px;
  height: 164px;
  animation: star-pulse 8s ease-in-out infinite;
}
.d-deco__star img {
  width: 100%;
  height: 100%;
  display: block;
}

.d-deco__star-sm {
  left: 1247px;
  top: 198px;
  width: 34px;
  height: 34px;
}
.d-deco__star-sm img {
  inset: -52.94%;
}

.d-deco__star-xs {
  left: 1008px;
  top: 596px;
  width: 22px;
  height: 22px;
}
.d-deco__star-xs img {
  inset: -81.82%;
}

.d-brand {
  position: absolute;
  left: 72px;
  top: 44px;
  z-index: 2;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: var(--cream);
  white-space: nowrap;
}

.d-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.d-nav > * {
  position: absolute;
  top: 47px;
  pointer-events: auto;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  color: var(--cream);
  white-space: nowrap;
  transition: color 0.2s;
}

.d-nav > *:hover {
  color: var(--teal);
}

.d-nav > *:nth-child(1) {
  left: 960px;
}
.d-nav > *:nth-child(2) {
  left: 1095px;
}
.d-nav > *:nth-child(3) {
  left: 1215px;
}

.d-line {
  position: absolute;
  left: 72px;
  top: 90px;
  width: 1296px;
  height: 1px;
  background: var(--line);
  z-index: 2;
}

.d-eyebrow {
  position: absolute;
  left: 72px;
  top: 210px;
  z-index: 2;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: var(--teal);
  white-space: pre;
}

.d-title {
  position: absolute;
  left: 66px;
  top: 252px;
  z-index: 2;
  margin: 0;
  font-size: 104px;
  font-weight: 700;
  line-height: 94px;
  color: var(--cream);
  text-shadow: 0 4px 16px rgba(9, 217, 193, 0.18);
  white-space: nowrap;
}

.d-desc {
  position: absolute;
  left: 76px;
  top: 492px;
  z-index: 2;
  margin: 0;
  width: 620px;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--cream);
}

.d-btn {
  position: absolute;
  top: 610px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: 28px;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  color: var(--cream);
  overflow: hidden;
}

.d-btn--primary {
  left: 72px;
  width: 230px;
  background: linear-gradient(90deg, #09d9c1, #05a091);
  border: 1px solid rgba(250, 248, 242, 0.14);
  box-shadow: 0 8px 26px rgba(9, 217, 193, 0.35);
}

.d-btn--ghost {
  left: 314px;
  width: 260px;
  background: rgba(0, 0, 0, 0.41);
  border: 1px solid rgba(9, 217, 193, 0.58);
  backdrop-filter: blur(9px);
  box-shadow: 0 8px 22px rgba(80, 10, 31, 0.45);
}

.d-deadline {
  position: absolute;
  top: 681px;
  z-index: 2;
  margin: 0;
  color: rgba(250, 248, 242, 0.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}

.d-deadline--participant {
  left: 72px;
  width: 230px;
}

.d-deadline--organizer {
  left: 314px;
  width: 260px;
}

.d-deadline.is-closed {
  color: rgba(250, 248, 242, 0.36);
}

.d-scroll {
  position: absolute;
  left: 76px;
  top: 790px;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  color: var(--teal);
  white-space: pre;
}

.d-support {
  position: absolute;
  left: 72px;
  top: 907px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.d-support__icon {
  width: 32px;
  height: 32px;
  display: block;
}

.d-support__text {
  width: 285.158px;
  margin-left: -0.395px;
  text-align: center;
  font-size: 9.474px;
  font-weight: 400;
  line-height: normal;
  color: #141515;
  white-space: nowrap;
}

/* ---------- Анкеты 1:164 / 1:258 / 1:330 ---------- */

.d-frame--form {
  min-height: 1400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #111;
}

.df-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.df-deco > div {
  position: absolute;
}

.df-deco img {
  position: absolute;
  display: block;
  max-width: none;
}

.df-deco__glow-ll {
  left: -120px;
  top: 900px;
  width: 520px;
  height: 520px;
}
.df-deco__glow-ll img {
  inset: -34.62%;
}

.df-deco__glow-c {
  left: 520px;
  top: 420px;
  width: 560px;
  height: 560px;
}
.df-deco__glow-c img {
  inset: -35.71%;
}

.df-deco__vignette {
  left: -240px;
  top: -240px;
  width: 1920px;
  height: 1920px;
}
.df-deco__vignette img {
  inset: -13.54%;
}

.df-header {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 44px 72px 40px;
}

.df-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 700;
  line-height: normal;
  color: var(--cream);
  white-space: nowrap;
}

/* Строка 22px из макета: браузерный `normal` даёт 23 и сдвигает шапку на 1px. */
.df-brand {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}

.df-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 14px;
}

.df-nav button,
.df-nav a {
  font-size: 14px;
  font-weight: 700;
  transition: color 0.2s;
}

.df-nav button:hover,
.df-nav a:hover {
  color: var(--teal);
}

.df-line {
  width: 100%;
  height: 1px;
  background: var(--line);
}

.df-content {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 1 0 0;
  display: flex;
  align-items: flex-start;
  padding: 80px 72px 120px;
}

.df-col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.df-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  white-space: nowrap;
}

.df-title {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cream);
  text-shadow: 0 4px 16px rgba(9, 217, 193, 0.18);
}

.df-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

/* Stepper */
.df-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.df-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.df-step__dot {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--step-border);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  color: var(--muted);
}

.df-step__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  white-space: nowrap;
}

.df-step.is-active .df-step__dot {
  background: var(--teal);
  color: #000;
}

.df-step.is-active .df-step__label {
  font-weight: 700;
  color: var(--teal);
}

.df-step.is-done .df-step__dot {
  border-color: #a0a5a4;
  color: #a0a5a5;
}

.df-step__line {
  width: 40px;
  height: 1px;
  background: var(--step-border);
}

/* Form grid */
.df-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.df-grid--questions {
  gap: 64px;
}

.df-grid--questions .question-group__fields {
  gap: 28px;
  margin-top: 24px;
}

.df-grid--questions .question-field {
  gap: 12px;
}

.df-grid--questions .question-field__label {
  max-width: 1050px;
  font-size: 14px;
}

.df-grid--questions .df-input--question {
  height: 112px;
  min-height: 112px;
  align-items: flex-start;
  padding: 18px 20px;
}

.df-input--question textarea {
  height: 100%;
  color: var(--cream);
  font-size: 14px;
  line-height: 1.5;
}

.df-input--question textarea::placeholder {
  color: var(--muted);
}

.df-input--upload {
  height: 56px;
}

.df-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.df-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  min-width: 0;
}

.df-field--fixed {
  flex: 0 0 696px;
}

.df-field--spacer {
  flex: 0 0 576px;
}

/* Строка 15px из макета: без явного значения строки набегает дробный сдвиг сетки. */
.df-field__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}

.df-field__label--wrap {
  white-space: normal;
}

.df-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.df-input input,
.df-input select {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--cream);
}

.df-input input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.df-input img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
}

.df-input:focus-within,
.df-input.is-active {
  border-color: var(--teal);
  box-shadow: 0 0 20px rgba(9, 217, 193, 0.25);
}

.df-input:has(input:user-invalid),
.df-input:has(select:user-invalid) {
  border-color: #ff6f7d;
  box-shadow: 0 0 16px rgba(255, 74, 94, 0.2);
}

.df-input.is-active input {
  color: #fff;
}

.df-input--area {
  height: 222px;
  align-items: flex-start;
  padding: 20px;
}

.df-input--area textarea {
  height: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cream);
}

.df-input--area textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.df-footer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 24px;
  width: 100%;
}

.df-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 56px;
  border-radius: 28px;
  background: linear-gradient(90deg, #09d9c1, #05a091);
  border: 1px solid rgba(250, 248, 242, 0.14);
  filter: drop-shadow(0 8px 13px rgba(9, 217, 193, 0.35));
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  color: var(--cream);
}

.df-next:disabled {
  cursor: wait;
  opacity: 0.7;
}

.consent-section--desktop {
  margin-top: 8px;
}

.consent-card--desktop {
  max-width: 1050px;
}

.legal-content--desktop {
  width: 980px;
  margin-left: 300px;
  padding: 72px 0 100px;
}

.legal-content--desktop .legal-eyebrow {
  font-size: 12px;
}

.legal-content--desktop .legal-title {
  font-size: 46px;
  line-height: 52px;
}

.legal-content--desktop .legal-body {
  font-size: 14px;
  line-height: 22px;
}

/* Left column star motif */
.df-leftcol {
  position: absolute;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.df-leftcol--s1 {
  top: 1102px;
  width: 214.91px;
  height: 298px;
}

.df-leftcol--s2 {
  top: 1017.29px;
  width: 276px;
  height: 382.71px;
}

.df-leftcol--s3 {
  top: 906px;
  width: 379.09px;
  height: 525.65px;
}

.df-motif {
  position: relative;
  animation: float-y 9s ease-in-out infinite;
}

.df-leftcol--s1 .df-motif {
  width: 149.937px;
  height: 149.937px;
}

.df-leftcol--s2 .df-motif {
  width: 192.558px;
  height: 192.558px;
}

.df-leftcol--s3 .df-motif {
  width: 264.479px;
  height: 264.479px;
}

.df-motif img {
  position: absolute;
  display: block;
  max-width: none;
  inset: -70.83% -70.83% -125% -70.83%;
}

/* ---------- Выбор структуры организатора ---------- */

.d-frame--role {
  height: 960px;
  background: #111;
}

.d-frame--role .df-deco__glow-ll {
  top: 540px;
}

.d-frame--role .df-deco__glow-c {
  left: 760px;
  top: 180px;
}

.dr-content {
  position: relative;
  z-index: 2;
  padding: 72px;
}

.dr-head {
  width: 760px;
}

.dr-eyebrow {
  margin: 0 0 16px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.dr-title {
  margin: 0;
  color: var(--cream);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.04;
  text-shadow: 0 4px 16px rgba(9, 217, 193, 0.18);
}

.dr-sub {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
}

.dr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.dr-role-card {
  position: relative;
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--field-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--cream);
  text-align: left;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.dr-role-card:hover {
  border-color: rgba(9, 217, 193, 0.5);
  transform: translateY(-3px);
}

.dr-role-card.is-selected {
  border-color: var(--teal);
  background: linear-gradient(145deg, rgba(9, 217, 193, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 28px rgba(9, 217, 193, 0.2);
}

.dr-role-card__number {
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.dr-role-card__title {
  margin-top: 28px;
  font-size: 28px;
  font-weight: 700;
}

.dr-role-card__desc {
  max-width: 310px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.dr-role-card__mark {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--step-border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dr-role-card:not(.is-selected) .dr-role-card__mark {
  display: none;
}

.dr-role-card.is-selected .dr-role-card__mark {
  border-color: var(--teal);
  background: var(--teal);
  color: #111;
}

.dr-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.dr-next {
  width: 240px;
  height: 56px;
  border: 1px solid rgba(250, 248, 242, 0.14);
  border-radius: 28px;
  background: linear-gradient(90deg, var(--teal), var(--teal-deep));
  box-shadow: 0 8px 26px rgba(9, 217, 193, 0.3);
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  transition: opacity 0.2s, filter 0.2s;
}

.dr-next:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.32;
}

/* ---------- Успешная отправка ---------- */

.d-frame--success {
  min-height: 960px;
}

.d-frame--success .df-deco__glow-ll {
  left: -110px;
  top: 360px;
}

.d-frame--success .df-deco__glow-c {
  left: 720px;
  top: 120px;
}

.ds-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 810px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 72px 96px;
  text-align: center;
}

.ds-mark {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  background: rgba(9, 217, 193, 0.12);
  box-shadow: 0 0 42px rgba(9, 217, 193, 0.3);
  color: var(--teal);
  font-size: 38px;
  font-weight: 700;
}

.ds-eyebrow {
  margin: 34px 0 0;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ds-title {
  margin: 18px 0 0;
  color: var(--cream);
  font-size: 76px;
  line-height: 1;
  text-shadow: 0 6px 24px rgba(9, 217, 193, 0.28);
}

.ds-title--closed {
  font-size: 64px;
}

.ds-mark--closed {
  border-color: rgba(250, 248, 242, 0.32);
  background: rgba(250, 248, 242, 0.06);
  box-shadow: 0 0 34px rgba(250, 248, 242, 0.1);
  color: var(--cream);
}

.ds-sub {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.ds-actions {
  display: flex;
  gap: 18px;
  margin-top: 42px;
}

.ds-home,
.ds-vk {
  display: flex;
  width: 240px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ds-home {
  border: 1px solid rgba(250, 248, 242, 0.14);
  background: linear-gradient(90deg, var(--teal), var(--teal-deep));
  box-shadow: 0 8px 26px rgba(9, 217, 193, 0.3);
}

.ds-vk {
  border: 1px solid var(--field-border);
  background: rgba(255, 255, 255, 0.05);
}