/* ═══ Hero ═══ */

.hero { padding: 172px var(--gutter) 128px; }

/* Тонкая разлиновка по 12-колоночной сетке — вместо картинки-иллюстрации */
.hero__grid {
  position: absolute;
  inset: 0;
  max-width: var(--content-w);
  margin: 0 auto;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  background-image: repeating-linear-gradient(90deg,
    transparent 0,
    transparent calc(8.3333% - 1px),
    rgba(255, 255, 255, .035) calc(8.3333% - 1px),
    rgba(255, 255, 255, .035) 8.3333%);
}
.hero__grid.is-on { opacity: 1; }

/* Крупный призрачный знак в правом нижнем углу */
.hero__mark {
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: min(560px, 46vw);
  color: var(--fg);
  opacity: .04;
  pointer-events: none;
}

.hero__eyebrow { display: block; margin-bottom: 40px; }

.hero__title {
  position: relative;
  max-width: 16ch;
  margin: 0 0 34px;
  font-size: clamp(2.7rem, 6.2vw, 5.6rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: var(--fg);
}

/* Маска для «выезда» строки снизу. overflow снимает JS после анимации,
   чтобы длинные строки не обрезались при переносе. */
.hero__line-mask { display: block; overflow: hidden; }
.hero__line { display: block; }

/* Частицы вместо букв (CONFIG.effects.heroParticles).
   Строки остаются в DOM ради доступности и поиска — прячем только визуально. */
.hero__title-canvas {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.hero__title.is-particled .hero__line { opacity: 0; }

/* Частицы знака в углу; сам SVG прячет JS, canvas встаёт на его место */
.hero__mark-canvas {
  position: absolute;
  right: -40px;
  bottom: -60px;
  pointer-events: none;
}

.hero__sub {
  max-width: 60ch;
  margin: 0 0 44px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--sub);
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 28px;
}