/* =========================================================
   BlinkyHost · Hero и крупные секции
   ========================================================= */

/* ============ HERO (центрированный) ============ */
.hero { min-height: 100svh; padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(28px, 4vw, 52px); position: relative; text-align: center; display: flex; flex-direction: column; }
.hero > .wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(36px, 7vh, 88px); }
.hero__copy { max-width: 900px; margin-inline: auto; position: relative; }
/* Фростед-«ореол» под заголовком: тематический паттерн размазан, как под шапкой/карточками */
.hero__copy::before {
  content: ""; position: absolute; z-index: -1;
  inset: -54px -7% -40px;
  background: radial-gradient(58% 68% at 50% 46%, rgba(255,255,255,.52), rgba(247,250,255,.22) 58%, transparent 80%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 46%, #000 42%, transparent 82%);
  mask-image: radial-gradient(60% 70% at 50% 46%, #000 42%, transparent 82%);
  border-radius: 48px;
  pointer-events: none;
}

.hero__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 6.6vw, 4.7rem); letter-spacing: -.045em; line-height: 1.04; }
.hero__brandword {
  background: linear-gradient(100deg, var(--azure), var(--cobalt) 52%, var(--signal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title .em { position: relative; color: var(--cobalt); white-space: nowrap; }

.hero__lead { margin: 26px auto 0; font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--tx-2); max-width: 580px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; justify-content: center; }

/* CTA-блок прямо под заголовком героя */
.hero__ctabox { max-width: 1040px; width: 100%; margin: 0 auto; text-align: left; padding: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 52px); }

/* Раздел услуг (главный экран) */
.services .sec-head { display: flex; align-items: flex-end; justify-content: space-between; max-width: none; gap: 24px; flex-wrap: wrap; }
.services .sec-head > div { max-width: 640px; }


/* SEO copy block */
.seo-copy { padding-top: clamp(42px, 6vw, 82px); }
.seo-copy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(122,151,220,.22);
  border-radius: var(--r-4);
  background:
    radial-gradient(circle at 12% 12%, rgba(18,214,194,.16), transparent 32%),
    linear-gradient(135deg, rgba(17,31,72,.78), rgba(8,17,45,.72));
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}
.seo-copy__main h2 {
  max-width: 780px;
  margin: 10px 0 18px;
  color: #fff;
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 3.35rem);
  line-height: 1.03;
  letter-spacing: -.055em;
}
.seo-copy__main p:not(.eyebrow) {
  max-width: 820px;
  color: var(--tx-2);
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  line-height: 1.76;
}
.seo-copy__cards { display: grid; gap: 12px; }
.seo-copy__card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(112,221,255,.18);
  border-radius: var(--r-3);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
}
.seo-copy__card strong { color: #fff; font-family: var(--f-display); font-size: 1.05rem; }
.seo-copy__card span { color: var(--tx-2); line-height: 1.55; }
@media (max-width: 840px) {
  .seo-copy__grid { grid-template-columns: 1fr; }
}