/* ==========================================================================
   premium.css — тёмная премиальная тема лендинга мини-приложений

   Подключается ПОСЛЕ ../styles.css и переопределяет его переменные:
   обсидиановый фон с мраморной фактурой, латунный акцент, другая
   шрифтовая пара. Главная страница этот файл не подключает и остаётся
   светлой — как у платформы с её разделом PRO (ADR-010): платное
   направление выглядит иначе, чтобы переход в него чувствовался.

   Шрифты: Manrope для заголовков, Onest для текста. Оба без курсива —
   у них его просто нет, так что случайно он нигде не появится.

   Акцент — латунь, а не лаймовый цвет бренда: на чёрном камне лайм
   кричит. Вернуть лайм — одна переменная --accent ниже.
   ========================================================================== */

/* ============ 1. ПЕРЕМЕННЫЕ ТЁМНОЙ ТЕМЫ ============ */

.premium {
  --bg: #0b0c0e;
  --bg-alt: #101215;
  --bg-card: #15181c;
  --ink: #f2efe9;
  --ink-soft: #b4b1aa;
  --ink-faint: #8f8d85;        /* 5,9:1 к фону — с запасом */
  --line: #24282e;
  --line-strong: #363b43;

  --accent: #c9a961;           /* латунь */
  --accent-deep: #e0c98c;      /* светлее: наведение на тёмном */
  --accent-soft: #221d12;
  --on-accent: #0b0c0e;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.45);

  --font-head: "Manrope", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Onest", "Hanken Grotesk", system-ui, sans-serif;

  color-scheme: dark;
  color: var(--ink);
}

/* ============ 2. КАМЕНЬ ============ */

/* Обсидиан с прожилками. Три слоя: зерно камня (SVG-шум), два-три
   тёплых пятна-отсвета и косые прожилки — едва видимые, иначе фон
   начинает спорить с текстом. Всё закреплено, при прокрутке стоит. */
.premium {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(60% 50% at 78% 12%, rgba(201, 169, 97, 0.10), transparent 70%),
    radial-gradient(45% 40% at 12% 85%, rgba(201, 169, 97, 0.05), transparent 70%),
    linear-gradient(112deg, transparent 38%, rgba(242, 239, 233, 0.028) 40%, transparent 41.5%),
    linear-gradient(118deg, transparent 63%, rgba(242, 239, 233, 0.02) 64.5%, transparent 65.5%),
    linear-gradient(180deg, #0b0c0e 0%, #0d0f12 100%);
  background-attachment: fixed;
}

/* Чередующиеся секции — не плоский серый, а чуть другой камень */
.premium .section--alt {
  background:
    linear-gradient(180deg, rgba(242, 239, 233, 0.025), transparent 18%, transparent 82%, rgba(242, 239, 233, 0.025)),
    rgba(16, 18, 21, 0.6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ============ 3. ШАПКА И ПОДВАЛ ============ */

.premium .site-header { padding-block: var(--space-3); }
.premium .logo__text { font-weight: 700; letter-spacing: -0.01em; }
.premium .site-footer { border-top-color: var(--line); }
.premium .footer__nav a { color: var(--ink-soft); }
.premium .footer__nav a:hover { color: var(--accent-deep); }

/* ============ 4. ТИПОГРАФИКА ============ */

.premium h1, .premium h2, .premium h3 { font-weight: 700; letter-spacing: -0.02em; }
.premium h1 { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.06; }
.premium h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.premium body, .premium p { font-weight: 400; }
.premium a { color: var(--accent-deep); }

/* ============ 5. КНОПКИ ============ */

.premium .btn { font-weight: 700; letter-spacing: 0.01em; }

.premium .btn--primary {
  background: linear-gradient(180deg, #d9bd78, var(--accent));
  color: var(--on-accent);
  box-shadow: 0 8px 24px rgba(201, 169, 97, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.premium .btn--primary:hover {
  background: linear-gradient(180deg, #e4cb8e, #d2b36c);
  box-shadow: 0 12px 30px rgba(201, 169, 97, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Рамка латунная с прозрачностью: читается как кнопка и не кричит */
.premium .btn--outline {
  border-color: rgba(201, 169, 97, 0.55);
  color: var(--ink);
  background: rgba(242, 239, 233, 0.03);
}
.premium .btn--outline:hover {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
  background: rgba(201, 169, 97, 0.08);
}

/* ============ 6. ПЕРВЫЙ ЭКРАН ============ */

.premium .hero {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 6vw, 4rem);
  overflow: hidden;
}

/* Две колонки: слева текст, справа анимация. На узком — друг под другом. */
.premium .hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

.premium .hero__inner { max-width: 40rem; }

/* Над заголовком — тонкая надпись-метка, как клеймо на камне */
.premium .hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.premium .hero__eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--accent);
}

/* Подпись под заголовком: мелко, спокойно, с разрядкой */
.premium .hero__sub {
  margin-top: var(--space-3);
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  max-width: 34rem;
}
.premium .hero__sub b { color: var(--ink); font-weight: 500; }

.premium .hero__actions { margin-top: var(--space-4); }

/* Правая колонка: анимация стоит на своём месте, а не на фоне всего */
.premium .hero__visual { position: relative; min-height: 220px; }
.premium .hero__visual .hero-anim { width: 100%; height: auto; }

/* Старая сеть из точек на этом экране не нужна */
.premium .hero__net { display: none; }

/* ============ 7. КАРТОЧКИ ============ */

.premium .card {
  background: linear-gradient(180deg, rgba(242, 239, 233, 0.035), transparent 60%), var(--bg-card);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.premium .card:hover {
  border-color: rgba(201, 169, 97, 0.45);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.premium .card h3 { color: var(--ink); }
.premium .card p { color: var(--ink-soft); }

.premium .card__where { color: var(--accent); }
.premium .card__lead { color: var(--ink); }
.premium .ticks li::before { background: var(--accent); }

.premium .note {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(201, 169, 97, 0.12), rgba(201, 169, 97, 0.03));
}

/* Номера шагов — латунные кружки на камне */
.premium .step__num {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 1px solid rgba(201, 169, 97, 0.35);
}

/* ============ 7a. ЦЕПОЧКА ПРЕИМУЩЕСТВ ============ */

/* Четыре карточки зигзагом на одной латунной нити: первая и третья
   чуть ниже середины, вторая и четвёртая — чуть выше. На узком экране
   нить не нужна — обычный столбик. */
.premium .chain {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  position: relative;
  counter-reset: none;
}
.premium .chain__item { position: relative; display: flex; }
.premium .chain__card { flex: 1; position: relative; padding-top: var(--space-4); }

/* Номер — крупный, латунный, полупрозрачный, в углу карточки */
.premium .chain__num {
  position: absolute; top: 0.6rem; right: 1rem;
  font-family: var(--font-head); font-weight: 800;
  font-size: 2.6rem; letter-spacing: -0.04em; line-height: 1;
  color: var(--accent); opacity: 0.22;
  pointer-events: none;
}

@media (min-width: 900px) {
  .premium .chain {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    padding-block: 3.2rem;          /* место под сдвиг вверх и вниз */
  }
  /* Нить через середину ряда, к краям гаснет */
  .premium .chain::before {
    content: ""; position: absolute; left: 2%; right: 2%; top: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.55) 12%, rgba(201, 169, 97, 0.55) 88%, transparent);
  }
  .premium .chain__item--low  { transform: translateY(2.6rem); }
  .premium .chain__item--high { transform: translateY(-2.6rem); }

  /* Бусины — в зазорах между карточками, на нити. Карточки нить
     перекрывают, поэтому бусина внутри карточки легла бы на текст.
     Карточка сдвинута вверх или вниз, бусина сдвигается обратно —
     и попадает точно на общую линию. */
  .premium .chain__item:not(:last-child)::after {
    content: ""; position: absolute; width: 10px; height: 10px;
    left: calc(100% + (var(--space-3) / 2) - 5px); margin-top: -5px;
    border-radius: 999px;
    background: var(--bg); border: 2px solid var(--accent);
    box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgba(201, 169, 97, 0.45);
    z-index: 1;
  }
  .premium .chain__item--low::after  { top: calc(50% - 2.6rem); }
  .premium .chain__item--high::after { top: calc(50% + 2.6rem); }
}

/* ============ 8. ПРИЗЫВ ============ */

.premium .cta {
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(201, 169, 97, 0.14), transparent 70%),
    var(--bg-card);
  border-color: var(--line-strong);
}

/* ============ 9. ШИРОКИЕ ЭКРАНЫ ============ */

@media (min-width: 900px) {
  .premium .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); }
  .premium .hero__visual { min-height: 420px; }
}

/* На узком экране анимацию убираем: там она мешает чтению и греет телефон */
@media (max-width: 599px) {
  .premium .hero__visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .premium .card:hover { transform: none; }
}