/* ==========================================================================
   ГРАВИУМ Space — редизайн «глубокий космос» (v2)

   Слой поверх space.css. Основная работа делается переопределением токенов
   в :root — они уже используются по всему старому файлу, поэтому смена палитры
   перекрашивает весь сайт разом. Ниже — только то, что токенами не решается:
   глубина вместо плоских рамок, типографика, контролы формы и движение.

   Ключевые решения:
   • Акцент — фирменное золото ГРАВИУМ вместо лавандового: сайт выбивался
     из остальных сервисов, и лаванда на синем читалась «дёшево».
   • Заголовки — Playfair Display: высококонтрастная антиква из типографики
     звёздных атласов. Текст остаётся на Inter.
   • Фон — почти чёрный индиго, а не размытый синий: небо должно быть тёмным,
     иначе звёзды на превью не читаются.
   ========================================================================== */

:root {
  /* --- основа: глубина ночного неба --- */
  --bg: #05060d;
  --bg-deep: #020308;
  --surface: rgba(19, 22, 38, .72);
  --surface-2: rgba(26, 30, 50, .78);
  --surface-3: rgba(34, 39, 64, .82);
  --line: rgba(226, 214, 186, .10);
  --line-strong: rgba(226, 214, 186, .22);

  --text: #f4efe4;
  --muted: #a7a396;
  --faint: #6f6c63;

  /* --- акцент: золото ГРАВИУМ --- */
  --gold: #d7ae68;
  --gold-soft: #f0d9a6;
  --gold-deep: #a8763a;

  /* старые имена переопределены, чтобы перекрасить весь space.css разом */
  --violet: #d7ae68;
  --violet-strong: #f0d9a6;
  --cyan: #7fc7d9;
  --cyan-strong: #a5e0ee;
  --magenta: #c79ad8;
  --blue: #8fb4d0;
  --green: #7fd0a8;
  --danger: #e2726f;

  /* --- глубина --- */
  --glass: saturate(140%) blur(18px);
  --shadow-card:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 24px 60px rgba(0,0,0,.55),
    0 2px 12px rgba(0,0,0,.35);
  --shadow-lift:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 34px 80px rgba(0,0,0,.6),
    0 0 44px rgba(215,174,104,.10);

  --ease-out: cubic-bezier(.22,.68,.32,1);
  --dur: 260ms;
}

/* ==========================================================================
   Фон страницы: небо, а не заливка
   ========================================================================== */

body {
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(120, 96, 190, .16), transparent 62%),
    radial-gradient(900px 620px at 12% 4%, rgba(58, 120, 150, .13), transparent 58%),
    radial-gradient(700px 500px at 50% 108%, rgba(215, 174, 104, .07), transparent 60%),
    linear-gradient(180deg, #05060d 0%, #06070f 40%, #04050b 100%);
  background-attachment: fixed;
}

/* Общий звёздный слой под всем сайтом — рисует cosmos-v2.js */
#bgStarfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}

/* Слои над звёздным полем. Шапке нужен именно sticky — общим правилом
   position:relative я её случайно "отлепил". */
main, .site-footer { position: relative; z-index: 1; }
.site-header { position: sticky; top: 0; z-index: 50; }

/* ==========================================================================
   Типографика
   ========================================================================== */

.hero-title,
.home-shapes-head h2,
.editor-intro h1,
h1, h2 {
  font-family: "Playfair Display", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.06;
}

.hero-title {
  font-size: clamp(46px, 7vw, 92px);
  font-weight: 500;
}

/* Акцентное слово в заголовке — курсив антиквы с золотым градиентом */
.hero-title-glow {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(96deg, #f0d9a6 8%, #d7ae68 46%, #b98f47 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 26px rgba(215, 174, 104, .3));
}

.eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(215, 174, 104, .8);
}

.hero-lead,
.home-shapes-head p,
.editor-intro p {
  font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

/* ==========================================================================
   Поверхности: стекло и глубина вместо тонких рамок
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(6, 7, 14, .88), rgba(6, 7, 14, .62));
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
}

.brand small { color: rgba(215, 174, 104, .78); letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }

.home-hero-card,
.home-shape-card,
.home-note-inner,
.editor-inspector,
.sky-stage,
.control-section,
.product-option,
.style-option,
.service-band {
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, .05), transparent 52%),
    var(--surface);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow: var(--shadow-card);
}

.home-shape-card {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.home-shape-card:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 174, 104, .34);
  box-shadow: var(--shadow-lift);
}

/* Превью изделия — это товар, оно должно читаться, а не тонуть */
.home-shape-card img,
.home-hero-card img {
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6)) contrast(1.06) brightness(1.06);
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.btn,
.header-order,
.primary-action,
button[type="submit"] {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}

.btn-primary,
.header-order,
.primary-action,
button[type="submit"] {
  border: 0;
  color: #1b1408;
  background: linear-gradient(135deg, #f6e3b6 4%, #d7ae68 52%, #a8763a 100%);
  box-shadow: 0 10px 30px rgba(215, 174, 104, .26), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.btn-primary:hover,
.header-order:hover,
.primary-action:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 40px rgba(215, 174, 104, .34);
}

.btn-primary:active,
.header-order:active,
.primary-action:active { transform: translateY(0) scale(.985); }

.btn-ghost {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  border-color: rgba(215, 174, 104, .42);
  background: rgba(215, 174, 104, .10);
  transform: translateY(-2px);
}

.hero-badges span,
.home-hero-badge {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px);
  border-radius: 999px;
}

/* ==========================================================================
   Формы: нативные контролы были главной причиной «дешёвого» вида
   ========================================================================== */

input[type="text"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  padding: 12px 14px;
  background: rgba(4, 5, 11, .62);
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

input::placeholder,
textarea::placeholder { color: var(--faint); }

input[type="text"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(215, 174, 104, .6);
  background: rgba(4, 5, 11, .82);
  box-shadow: 0 0 0 4px rgba(215, 174, 104, .12);
}

/* Календарь и часы в тёмной теме: браузерная иконка по умолчанию чёрная
   и на тёмном фоне сливается — инвертируем и подкрашиваем в золото. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(3) hue-rotate(2deg) brightness(.92);
  opacity: .75;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease-out);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Свой треугольник вместо системной стрелки селекта */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23d7ae68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

select option { background: #0b0d18; color: var(--text); }

.field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--muted);
}

.section-hint,
.field-feedback { color: var(--faint); font-size: 12.5px; line-height: 1.45; }

.style-option,
.product-option {
  border-radius: 14px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.style-option:hover,
.product-option:hover { transform: translateY(-2px); border-color: rgba(215, 174, 104, .36); }

.style-option.is-active,
.product-option.is-active,
.view-button.is-active {
  border-color: rgba(215, 174, 104, .55);
  background: rgba(215, 174, 104, .12);
  color: var(--text);
}

/* ==========================================================================
   Движение: появление секций и мягкий параллакс
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-in { opacity: 1; transform: none; }

/* Карточки в сетке появляются лесенкой — но не дольше, чем за полсекунды суммарно */
.home-shapes-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.home-shapes-grid .reveal:nth-child(2) { transition-delay: 70ms; }
.home-shapes-grid .reveal:nth-child(3) { transition-delay: 140ms; }
.home-shapes-grid .reveal:nth-child(4) { transition-delay: 210ms; }

/* Дыхание туманности в hero */
.hero-nebula {
  animation: skyDrift 26s var(--ease-out) infinite alternate;
  filter: blur(60px);
}

.hero-nebula-b { animation-duration: 34s; animation-direction: alternate-reverse; }

@keyframes skyDrift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
  to   { transform: translate3d(2.5%, -3%, 0) scale(1.12); opacity: .8; }
}

/* ==========================================================================
   Доступность: всё движение выключается по системной настройке
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-nebula { animation: none; }
  #bgStarfield { display: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Мобильные
   ========================================================================== */

@media (max-width: 720px) {
  .hero-title { font-size: clamp(34px, 10vw, 52px); }
  .home-shape-card, .editor-inspector, .sky-stage { border-radius: 16px; }
  input[type="text"], input[type="date"], input[type="time"], select, textarea { font-size: 16px; }
}

/* ==========================================================================
   Доводка: элементы, у которых цвет был записан прямо в правиле
   ========================================================================== */

/* Кнопка поиска места — второстепенное действие рядом с полем, но заметное */
.search-field button {
  border: 1px solid rgba(215, 174, 104, .40) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(240, 217, 166, .16), rgba(215, 174, 104, .10)) !important;
  color: var(--gold-soft) !important;
  font-size: 12.5px !important;
  font-weight: 600;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.search-field button:hover {
  background: linear-gradient(135deg, rgba(240, 217, 166, .28), rgba(215, 174, 104, .18)) !important;
  border-color: rgba(215, 174, 104, .62) !important;
}

/* Бейдж состояния проекта */
.project-state {
  border-radius: 999px !important;
  padding: 5px 11px !important;
  border-color: rgba(215, 174, 104, .34) !important;
  background: rgba(215, 174, 104, .12) !important;
  color: var(--gold-soft);
  font-size: 10px;
  letter-spacing: .12em;
}

/* Подписи полей приводим к одному виду. Верхний регистр НЕ используем:
   он расширяет строку, и «Часовой пояс» переносился на две строки,
   ломая ряд «дата / время / пояс». */
.editor-inspector .field-label,
.control-section > label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--muted);
}

/* Подписи внутри выборов и переключателей — обычный текст */
label.style-option,
label.product-option,
.toggle-row label,
.consent-row label {
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

/* Номера шагов 01/02/03 */
.control-section legend { color: var(--text) !important; }

/* Заметка про чёрно-белую гравировку висела одинокой строкой в пустой полосе */
.home-note-inner {
  max-width: 900px;
  margin-inline: auto;
  padding: 18px 22px;
  border-radius: 16px;
}

.home-note-dot { background: var(--gold); box-shadow: 0 0 14px rgba(215, 174, 104, .6); }

/* Полоса «все сервисы» внизу */
.service-band { border-radius: 20px; }

/* Скроллбар инспектора */
.editor-inspector { scrollbar-color: rgba(215, 174, 104, .38) transparent; }

/* ==========================================================================
   Мобильные: горизонтальное переполнение

   На узких экранах сетка героя объявлена как `1fr`, а это minmax(auto, 1fr):
   колонка не может стать уже минимальной ширины содержимого, и широкая
   карточка-превью распирала её за пределы экрана — текст и карточка
   обрезались справа. Лечится minmax(0, 1fr) и min-width:0 у детей.
   ========================================================================== */

@media (max-width: 900px) {
  .home-hero-inner,
  .space-editor,
  .service-band,
  .result-layout,
  .share-inner { grid-template-columns: minmax(0, 1fr); }

  .home-hero-copy,
  .home-hero-stage,
  .hero-inner > *,
  .home-shape-card { min-width: 0; }

  .hero-lead { max-width: 100%; }

  /* Плашки под кнопками переносятся, а не уезжают за край */
  .hero-badges,
  .home-hero-actions { flex-wrap: wrap; }
}



}