/* What block — step 1.6, mobile-first */

@import url('../_tokens.css');

@import url('../_motion.css');
.what {
  background:
    linear-gradient(180deg, #03050a 0%, #05080f 100%);
  position: relative;
  padding: clamp(50px, 10vh, 100px) clamp(16px, 5vw, 40px);
  overflow: hidden;
}

/* Тонкий световой край сверху — плавный переход от hero */
.what::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.35), transparent);
}

/* Едва заметные звёзды на фоне — связка с hero */
.what::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(0.8px 0.8px at 15% 25%, rgba(var(--white-rgb), 0.4), transparent 60%),
    radial-gradient(0.8px 0.8px at 85% 75%, rgba(var(--white-rgb), 0.4), transparent 60%),
    radial-gradient(1px 1px at 50% 50%, rgba(255,216,138,0.3), transparent 60%),
    radial-gradient(0.8px 0.8px at 30% 80%, rgba(var(--white-rgb), 0.4), transparent 60%),
    radial-gradient(0.8px 0.8px at 75% 20%, rgba(var(--white-rgb), 0.4), transparent 60%);
  pointer-events: none;
  opacity: 0.6;
}

.what__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
}

.what__kicker {
  display: inline-block;
  font-size: clamp(11px, 2.4vw, 13px);
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--accent);
  padding: 5px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 20px;
  margin-bottom: clamp(28px, 6vh, 48px);
  text-transform: uppercase;
  background: rgba(var(--accent-rgb), 0.05);
}

.what__text {
  font-size: clamp(16px, 3.6vw, 22px);
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 clamp(14px, 2.6vh, 20px);
  font-weight: 400;
}
.what__text:last-child {
  margin-bottom: 0;
}

/* Акценты в тексте — подчёркнутые ключевые слова */
.what__hl {
  color: var(--text);
  font-weight: 700;
  position: relative;
  white-space: nowrap;
}
.what__hl--gold {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(var(--gold-rgb), 0.35);
  font-weight: 800;
}
.what__hl--blue {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35);
  font-weight: 800;
}

@media (max-width: 520px) {
  .what__hl { white-space: normal; }
}