/* ==========================================================================
   Ленты и волны.

   Приём взят с прототипа dashamail: широкие мягкие ленты, уходящие в прозрачность
   по краям, и плавная волна вместо прямой границы между полосами страницы.
   Цвета — наши: лаймовый акцент, изумруд и голубой на обсидиановом фоне.

   Всё оформление — фон и только фон: ленты и волны не ловят курсор
   и не влияют на поток, поэтому их можно класть под любой блок.
   ========================================================================== */

/* Полоса во всю ширину окна внутри колонки с максимальной шириной. */
.band {
  position: relative;
  isolation: isolate;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px calc(50vw - var(--max-width, 1120px) / 2 + 20px) 0;
}

@media (max-width: 1180px) {
  .band { padding-left: 20px; padding-right: 20px; }
}

.band > * { position: relative; z-index: 2; }

/* --- ленты --- */

.band-ribbons {
  position: absolute;
  /* Размер задаём числами, а не через inset: svg — заменяемый элемент,
     и с одними left/right он берёт свою собственную ширину, растягивая
     страницу вбок. Ленты и так уходят за края — они нарисованы шире холста. */
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  /* Лёгкое размытие снимает пиксельную кромку у толстых кривых. */
  filter: blur(0.5px);
  opacity: 0.85;
}

/* --- волна между полосами --- */

.band-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;            /* перекрываем стык: иначе видна волосяная щель */
  width: 100%;
  height: clamp(60px, 8vw, 130px);
  z-index: 1;
  pointer-events: none;
  display: block;
}

/* Волна закрашена цветом СЛЕДУЮЩЕЙ полосы: она и есть граница между ними,
   а не линия поверх. Цвет передаётся на месте: style="--wave-fill: …". */
.band-wave path { fill: var(--wave-fill, var(--bg-color, #07090e)); }

/* Полоса под волной — та, во что волна «переливается». */
.band-under {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 40px calc(50vw - var(--max-width, 1120px) / 2 + 20px) 20px;
  background: var(--bg-color, #07090e);
}

@media (max-width: 1180px) {
  .band-under { padding-left: 20px; padding-right: 20px; }
}

/* --- тона полос --- */

/*
 * Страница собрана из полос разного тона, а волна между ними — это край
 * верхней полосы, закрашенный цветом нижней. Поэтому переход читается как
 * «одна полоса перетекает в другую», а не как линия, положенная сверху.
 */
:root {
  --tone-hero: #141c2b;
  --tone-deep: #0e2331;
}

.tone-hero {
  background:
    radial-gradient(ellipse 70% 60% at 20% 20%, rgba(185, 220, 104, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(56, 189, 248, 0.08), transparent 65%),
    linear-gradient(180deg, #171f2f 0%, var(--tone-hero) 100%);
}

.tone-deep {
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(185, 220, 104, 0.12), transparent 65%),
    linear-gradient(180deg, var(--tone-deep) 0%, #0b1a24 100%);
}

.tone-base { background: var(--bg-color, #07090e); }

/* --- первый экран --- */

.hero-band {
  padding-bottom: clamp(60px, 8vw, 130px);
}

/* Иллюстрация заходит на волну, как фигура на прототипе. */
.hero-band .hero-tilt-wrapper {
  margin-bottom: clamp(-70px, -5vw, -30px);
  z-index: 3;
}

/* --- строка доверия под кнопкой --- */

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
  margin-top: 28px;
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 210px;
}

.trust-item svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--mc-accent, #b9dc68);
}

.trust-item b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading, #fff);
  line-height: 1.2;
}

.trust-item span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-muted, #94a3b8);
}

/* --- шапка внутренних страниц --- */

.page-band {
  background:
    radial-gradient(ellipse 60% 70% at 15% 0%, rgba(185, 220, 104, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(23, 30, 44, 0.7), rgba(7, 9, 14, 0));
  padding-top: 34px;
  padding-bottom: clamp(50px, 6vw, 96px);
  margin-bottom: 26px;
}

.page-band .page-title { margin-bottom: 6px; }
.page-band .page-sub { margin-bottom: 0; }

/* ==========================================================================
   Раскладка первого экрана «как на прототипе»: текст слева, картинка справа
   и заходит за край, строка доверия под кнопками.
   ========================================================================== */
@media (min-width: 960px) {
  .hero-band .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 40px;
  }

  /* На прототипе весь текст прижат влево — так читается как обращение,
     а не как вывеска. Перебиваем общее центрирование только внутри полосы. */
  .hero-band .hero-copy-box {
    align-items: flex-start;
    text-align: left;
    max-width: none;
    margin: 0;
  }

  /* В две колонки заголовок должен помещаться в свою половину, иначе
     он уезжает под картинку. */
  .hero-band .hero-main-title {
    align-items: flex-start;
    font-size: clamp(28px, 3.4vw, 46px);
  }
  .hero-band .hero-lead-text { margin-left: 0; margin-right: 0; }

  /* Картинка уходит за правый край окна, как фигура на прототипе. */
  .hero-band .hero-tilt-wrapper {
    margin-right: calc(50% - 50vw + 20px);
  }
}

.hero-band .trust-row {
  display: grid;
  /* Ровно два ряда по двое: в половину ширины четыре колонки не встают,
     а рваная строка «три и один» выглядит случайной. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  width: 100%;
  max-width: 560px;
}

.hero-band .trust-item { max-width: none; }

/* ==========================================================================
   Витрина: средняя полоса — заголовок, большой снимок и одна кнопка,
   как на прототипе. Снимок заходит на нижнюю волну.
   ========================================================================== */
.showcase {
  text-align: center;
  padding-top: clamp(20px, 3vw, 40px);
}

.showcase-title {
  margin: 0 0 10px;
  font-family: var(--font-headings, 'Inter', sans-serif);
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-heading, #fff);
}

.showcase-sub {
  margin: 0 0 28px;
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--text-muted, #94a3b8);
}

.showcase-shot {
  margin: 0 auto;
  max-width: 900px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
  background: #0b1017;
}

.showcase-shot img { display: block; width: 100%; height: auto; }

.showcase-cta { margin-top: 28px; }

/* Галерея на базовом фоне: она уже не карточка-панель, а полоса. */
.tone-base.band { padding-top: 46px; padding-bottom: 20px; }