/* ============================================================
   Главная страница — фирменный макет (бывший вариант /design/10).

   Значения берутся из tokens.css; собственных чисел минимум
   (геометрия декоративных пятен и иллюстрации). Все селекторы под
   .home-v10: в main.css есть свои .hero/.type/.steps, и без префикса
   правила двух макетов смешивались бы.
   ============================================================ */

/* Служебные подписи для скринридера: в макете витрины класс назывался .vh,
   в main.css такого имени нет — иначе legend «Тип работы» и label «Тема работы»
   отрисовались бы поверх формы. */
.home-v10 .vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Живой счётчик под формой (реальные числа из БД) --- */
.home-v10 .live {
  list-style: none; margin: var(--sp-7) auto 0; padding: 0;
  max-width: 940px; display: grid; gap: var(--sp-4);
}
.home-v10 .live__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-2); padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-1); text-align: center;
}
.home-v10 .live__num {
  font-size: clamp(2rem, 5vw, 2.75rem); font-weight: var(--fw-black); line-height: 1;
  letter-spacing: var(--tracking-h);
  background: var(--c-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--c-brand-ink);
}
.home-v10 .live__cap { font-size: var(--fs-sm); color: var(--c-ink-soft); font-weight: var(--fw-semi); }

/* «Пишется прямо сейчас» — с пульсирующей точкой: показываем, что сервис работает в эту минуту */
.home-v10 .live__item--now { position: relative; }
.home-v10 .live__pulse {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-pill);
  background: var(--c-ok-600);
  box-shadow: 0 0 0 0 var(--c-ok-100);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Ночью и на молодом сервисе часть плиток скрыта (нулевые не рисуем). Одинокая карточка
   не должна растягиваться на всю ширину hero — иначе это пустая полоса с числом. */
.home-v10 .live:has(> :only-child) { max-width: 320px; }
.home-v10 .live:has(> :nth-child(2):last-child) { max-width: 660px; }

/* Режим высокой контрастности Windows подменяет фон, а текст с прозрачной заливкой
   исчезает вместе с градиентом — возвращаем обычный цвет. */
@media (forced-colors: active) {
  .home-v10 .live__num { -webkit-text-fill-color: currentColor; background: none; color: currentColor; }
}

/* --- Секции --- */
.home-v10 .sec { padding: var(--sp-8) 0; }
.home-v10 .sec--tint { background: var(--c-tint); }
.home-v10 .sec__head { max-width: 46ch; margin: 0 auto var(--sp-6); text-align: center; }
.home-v10 .sec__head p { color: var(--c-ink-soft); font-size: var(--fs-lg); margin: 0; }

/* --- Hero --- */
.home-v10 .hero {
  position: relative; overflow: hidden;
  /* Снизу отступ меньше верхнего: следующая секция добавляет свой padding-top,
     и вместе они давали двойной пустой блок под первым экраном. */
  padding: var(--sp-7) 0 var(--sp-6);
  background: var(--c-tint);
}
/* Еле заметные градиентные «сияния» на фоне hero — только CSS, без картинок */
.home-v10 .hero::before, .home-v10 .hero::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  filter: blur(60px); opacity: .35; pointer-events: none;
}
.home-v10 .hero::before {
  width: 560px; height: 560px; top: -260px; right: -160px;
  background: radial-gradient(circle, #B238F2, transparent 70%);
}
.home-v10 .hero::after {
  width: 480px; height: 480px; bottom: -260px; left: -180px;
  background: radial-gradient(circle, #2F6BFF, transparent 70%);
}
.home-v10 .hero__inner { position: relative; z-index: 1; text-align: center; }
.home-v10 .hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-bg); border: 1px solid var(--c-border);
  color: var(--c-ink-soft); font-size: var(--fs-xs); font-weight: 700;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  box-shadow: var(--shadow-1); margin: 0 0 var(--sp-5);
}
.home-v10 .hero h1 { max-width: 20ch; margin: 0 auto var(--sp-4); }
.home-v10 .hero h1 span { display: block; }
.home-v10 .hero__lead { font-size: var(--fs-lg); color: var(--c-ink-soft); max-width: 52ch; margin: 0 auto var(--sp-6); }

/* Плитки типов работ */
.home-v10 .types { border: 0; margin: 0 auto var(--sp-4); padding: 0; max-width: 760px; }
.home-v10 .types__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.home-v10 .type {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3); min-height: var(--tap-min);
  background: var(--c-card); border: 1.5px solid var(--c-border);
  border-radius: var(--r-2); cursor: pointer; text-align: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.home-v10 .type:hover { border-color: var(--c-brand); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.home-v10 .type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.home-v10 .type__name { font-weight: 700; font-size: var(--fs-sm); }
.home-v10 .type__size { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.home-v10 .type.is-active {
  border-color: var(--c-brand); box-shadow: 0 0 0 2px var(--c-brand), var(--shadow-2);
}
.home-v10 .type:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Строка «тема + Создать» */
.home-v10 .topic-row {
  display: flex; flex-direction: column; gap: var(--sp-3);
  max-width: 760px; margin: 0 auto;
}
.home-v10 .topic {
  position: relative; flex: 1; display: flex; align-items: center;
  background: var(--c-card); border: 1.5px solid var(--c-border); border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
}
.home-v10 .topic__ico { position: absolute; left: var(--sp-4); font-size: 1.0625rem; pointer-events: none; }
.home-v10 .topic__input {
  width: 100%; min-height: var(--tap-min);
  /* слева оставляем место под иконку ✨, иначе она наезжает на плейсхолдер */
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) * 2 + 18px);
  font: inherit; color: var(--c-ink);
  background: transparent; border: 0; border-radius: var(--r-2);
}
.home-v10 .topic__input::placeholder { color: var(--c-ink-soft); }
.home-v10 .topic:has(.topic__input:focus) { border-color: var(--c-brand); box-shadow: var(--focus-ring); }
.home-v10 .topic__input:focus { outline: none; }
.home-v10 .topic-row .btn { flex: none; }
.home-v10 .hero__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-ink-soft); text-align: center; }

/* Уведомления / ошибки / спиннер */
.home-v10 .notice { display: none; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2); margin-bottom: var(--sp-4); font-size: var(--fs-sm); text-align: left; max-width: 760px; margin-inline: auto; }
.home-v10 .notice.is-visible { display: block; }
.home-v10 .notice--error { background: var(--c-err-100); color: var(--c-err-600); }
.home-v10 .field-error { display: none; margin: var(--sp-2) 0 0; color: var(--c-err-600); font-size: var(--fs-sm); text-align: center; }
.home-v10 .field-error.is-visible { display: block; }
.home-v10 .spinner {
  width: var(--sp-4); height: var(--sp-4); flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: var(--r-pill); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Преимущества под формой */

/* --- Шаги --- */
.home-v10 .steps { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.home-v10 .step {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-3);
  padding: var(--sp-5); box-shadow: var(--shadow-1);
}
.home-v10 .step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-6); height: var(--sp-6); margin-bottom: var(--sp-3);
  border-radius: var(--r-pill); background: var(--c-cta); color: var(--c-inverse);
  font-weight: 800; font-size: var(--fs-sm);
}
.home-v10 .step p { margin: 0; color: var(--c-ink-soft); }

/* --- Возможности --- */
.home-v10 .feats { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.home-v10 .feat {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-3); padding: var(--sp-5);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.home-v10 .feat:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.home-v10 .feat__ico {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-1);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand-soft); font-size: 1.375rem; line-height: 1;
}
.home-v10 .feat h3 { margin: 0 0 var(--sp-1); }
.home-v10 .feat p { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* --- Цены --- */
.home-v10 .price {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-4);
  padding: var(--sp-6); box-shadow: var(--shadow-2); max-width: 560px; margin: 0 auto;
}
.home-v10 .price__amount { font-size: clamp(2.25rem, 8vw, 3rem); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.home-v10 .price__amount span { background: var(--c-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-v10 .price__sub { color: var(--c-ink-soft); margin: var(--sp-2) 0 var(--sp-5); }
.home-v10 .price__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.home-v10 .price__list li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); font-size: var(--fs-sm);
}
.home-v10 .price__addon { font-weight: 700; color: var(--c-brand); white-space: nowrap; }

/* --- Отзывы --- */
.home-v10 .reviews { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.home-v10 .review {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-3); padding: var(--sp-5); box-shadow: var(--shadow-1);
}
/* Длинные слова в теме работы не должны распирать карточку на узком экране */
.home-v10 .work__title, .home-v10 .work__excerpt, .home-v10 .review__text { overflow-wrap: anywhere; }

/* wrap: при крупном шрифте звёзды и бейдж типа работы не помещались в строку и распирали карточку */
.home-v10 .review__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.home-v10 .review__stars { color: #F5A623; letter-spacing: .08em; font-size: var(--fs-sm); }
.home-v10 .review__badge {
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-brand);
  background: var(--c-brand-soft); border-radius: var(--r-pill); padding: 2px var(--sp-3);
}
.home-v10 .review__text { margin: 0 0 var(--sp-4); }
.home-v10 .review__who {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--c-ink-soft); font-weight: 600; margin: 0;
}
.home-v10 .review__ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--c-cta); color: #fff; font-weight: 700;
}
.home-v10 .review__time { margin-left: auto; font-weight: 500; }

/* --- Последние работы из каталога --- */
.home-v10 .works { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.home-v10 .work {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-3); padding: var(--sp-5); box-shadow: var(--shadow-1);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-v10 .work:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.home-v10 .work__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.home-v10 .work__title { margin: 0; font-size: var(--fs-base); font-weight: 700; line-height: 1.35; }
.home-v10 .work__title a { color: var(--c-ink); text-decoration: none; }
.home-v10 .work__title a:hover { color: var(--c-brand); text-decoration: underline; }
.home-v10 .work__badge {
  flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--c-brand);
  background: var(--c-brand-soft); border-radius: var(--r-pill); padding: 2px var(--sp-3);
}
.home-v10 .work__excerpt { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.home-v10 .work__more { margin: 0; font-size: var(--fs-sm); }
.home-v10 .work__more a { color: var(--c-brand); font-weight: 600; text-decoration: none; }
.home-v10 .work__more a:hover { text-decoration: underline; }
.home-v10 .works__all { margin: var(--sp-6) 0 0; text-align: center; }

/* --- Витрина результата: человек + плитки (mobile-first: одна колонка) --- */
.home-v10 .showcase { display: grid; gap: var(--sp-4); }
.home-v10 .showcase__col { display: grid; gap: var(--sp-4); align-content: start; }
.home-v10 .showcase__hero {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-3); box-shadow: var(--shadow-1); overflow: hidden;
  display: flex; flex-direction: column;
}
.home-v10 .showcase__hero img { width: 100%; height: auto; flex: 1; object-fit: cover; }
.home-v10 .showcase__quote {
  margin: 0; padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); text-align: center;
}

.home-v10 .tile {
  border-radius: var(--r-3); padding: var(--sp-5);
  box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--sp-2);
}
.home-v10 .tile--tall { flex: 1; }
.home-v10 .tile--green { background: #1BA05A; color: #fff; }
.home-v10 .tile--brand { background: var(--c-cta); color: #fff; }
.home-v10 .tile--yellow { background: #F5B301; color: #2B1D00; }
.home-v10 .tile--white { background: var(--c-card); border: 1px solid var(--c-border); color: var(--c-ink); }
.home-v10 .tile__num { margin: 0; font-family: var(--font-sans); font-size: clamp(2.5rem, 7vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.home-v10 .tile__cap { margin: 0; font-size: var(--fs-base); font-weight: 600; line-height: 1.3; }
.home-v10 .tile__sub { opacity: .75; font-weight: 500; }
.home-v10 .tile__title { margin: 0; font-weight: 700; line-height: 1.35; }
.home-v10 .tile__text { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.home-v10 .tile__files { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; }

/* Галочки-преимущества внутри плитки */
.home-v10 .ticks { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.home-v10 .ticks li { position: relative; padding-left: 24px; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.home-v10 .ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #1BA05A; font-weight: 800;
}

/* «Файловые» бейджи форматов */
.home-v10 .file {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: #fff; color: var(--c-ink); border-radius: var(--r-1);
  padding: var(--sp-2) var(--sp-3); font-weight: 700; font-size: var(--fs-sm);
  box-shadow: 0 2px 8px rgba(10, 16, 48, .08);
}
.home-v10 .file__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; font-size: .75rem; color: #fff;
}
.home-v10 .file--doc  .file__ico { background: #2B5CE6; }
.home-v10 .file--pdf  .file__ico { background: #D9342B; }
.home-v10 .file--pptx .file__ico { background: #D2600F; }

/* --- FAQ --- */
.home-v10 .faq { max-width: 720px; margin: 0 auto; }
.home-v10 .faq details {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
}
.home-v10 .faq summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: var(--sp-4); min-height: var(--sp-6);
  align-items: center;
}
.home-v10 .faq summary::-webkit-details-marker { display: none; }
.home-v10 .faq summary::after { content: "+"; font-weight: 700; color: var(--c-brand); font-size: var(--fs-lg); }
.home-v10 .faq details[open] summary::after { content: "\2013"; }
.home-v10 .faq details p { margin: var(--sp-3) 0 0; color: var(--c-ink-soft); }

/* --- Финальный CTA --- */
.home-v10 .cta {
  position: relative; overflow: hidden;
  background: var(--c-cta); border-radius: var(--r-4);
  padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--c-inverse);
  box-shadow: var(--sh-3);
}
.home-v10 .cta h2 { color: var(--c-inverse); max-width: 24ch; margin: 0 auto var(--sp-3); }
.home-v10 .cta p { color: rgba(255,255,255,.9); max-width: 48ch; margin: 0 auto var(--sp-5); }
.home-v10 .cta .btn--brand { background: var(--c-inverse); color: var(--c-ink); background-image: none; }
.home-v10 .cta .btn--brand:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0,0,0,.22); }

/* --- Планшет --- */
@media (min-width: 768px) {
  /* Все типы работ — в один ряд: колонки создаются по числу плиток,
     поэтому добавление нового типа работы не ломает раскладку */
  .home-v10 .types__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .home-v10 .topic-row { flex-direction: row; align-items: stretch; }
  .home-v10 .topic-row .btn { min-width: 200px; }
  .home-v10 .steps { grid-template-columns: repeat(3, 1fr); }
  .home-v10 .feats { grid-template-columns: repeat(2, 1fr); }
  /* На планшете 3 колонки слишком узкие: при крупном шрифте содержимое распирало карточку */
  .home-v10 .reviews { grid-template-columns: repeat(2, 1fr); }
  .home-v10 .works { grid-template-columns: repeat(2, 1fr); }
  /* Витрина результата: человек по центру, плитки по краям */
  .home-v10 .showcase { grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; }
  /* Счётчик: колонки по числу показанных карточек (третья появляется, только если
     прямо сейчас что-то пишется) — поэтому не фиксируем количество жёстко */
  .home-v10 .live { grid-auto-flow: column; grid-auto-columns: 1fr; }
}

/* --- Десктоп --- */
@media (min-width: 1024px) {
  .home-v10 .feats { grid-template-columns: repeat(3, 1fr); }
  .home-v10 .reviews { grid-template-columns: repeat(3, 1fr); }   /* на десктопе места хватает */

  /* Hero — по левому краю (как в фирменном макете): заголовок, форма и плашки
     идут от одной вертикали, а не по центру. Остальные секции остаются центрованными. */
  /* main.css зажимает hero старого макета в 780px. Здесь классы .container и .hero__inner
     висят на ОДНОМ элементе, поэтому возвращаем ширину контейнера явно (не none — иначе
     первый экран растянулся бы во всю страницу). */
  .home-v10 .hero__inner { max-width: var(--container-max); margin-left: auto; margin-right: auto; text-align: left; }
  /* Заголовок — ровно две строки: снимаем ограничение по ширине и запрещаем
     перенос внутри каждой строки (сами строки разделены <br> в разметке) */
  .home-v10 .hero h1 { max-width: none; margin-left: 0; margin-right: 0; }
  .home-v10 .hero h1, .home-v10 .hero h1 span { white-space: nowrap; }
  .home-v10 .hero__lead { margin-left: 0; margin-right: 0; }
  .home-v10 .hero__note, .home-v10 .field-error { text-align: left; }
  /* Плитки и строка формы — от той же левой вертикали, что и заголовок, во всю ширину */
  .home-v10 .types, .home-v10 .topic-row, .home-v10 .live { max-width: none; margin-left: 0; margin-right: 0; }
  .home-v10 .topic-row .btn { min-width: 240px; }
  .home-v10 .type { padding: var(--sp-5) var(--sp-3); }
  .home-v10 .works { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .home-v10 *, .home-v10 *::before, .home-v10 *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}