/* home_v3.css — page-CSS для services/portal/templates/portal/homepage_v3.html.
   Джерела за readme.md UI-KIT.md порядок: design-system.css (токени, base_v3
   підключає сам) → design-motion.css (.ss-lift) → ticker_v3.css (.ss-chip/
   .ss-tag/.lnk/.tv3-signal-lead/.tv3-beam*/.exp — реюз 1:1, зареєстровано в
   UI-KIT.md) → news_v3.css (--tag-amber токен, реюз var без дублювання
   хардкоду) → цей файл, лише те, чого справді нема в жодному з джерел вище.
   Префікс hv3- (homepage) — сторінко-локальний неймспейс, як tv3-/nv3-/cc-. */

/* ---------- Hero — 3fr:2fr спліт (News/Narratives) і радар-плитка з
   розділювачами — обидва потребують media query, тому не інлайняться
   (решта розкладки сторінки — auto-fit/inline style, тих самих принципів,
   що ticker_v3.html). ---------- */
.hv3-split { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 960px) {
  .hv3-split { grid-template-columns: 3fr 2fr; }
}

/* ---------- Institutional Radar компакт-блок — 3 колонки з розділювачами
   (1:1 заміна старого sm:grid-cols-3 sm:divide-x). ---------- */
.hv3-radar-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .hv3-radar-grid { grid-template-columns: repeat(3, 1fr); }
  .hv3-radar-grid > div + div { border-inline-start: 1px solid var(--surface-rule); padding-inline-start: 18px; }
}

/* ---------- Hero headline — clamp() замість окремого брейкпойнту (закон
   середовища не заважає, це не появи/рух — просто responsive font-size). ---------- */
.hv3-hero-title { font-size: clamp(28px, 5.2vw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--text); margin: 0; }

/* ---------- AI Spotlight — верхня смуга акценту (петроль/сяйво, БЕЗ
   фіолетового — readme.md "Фіолетового немає в жодній ролі"). ---------- */
.hv3-spotlight { position: relative; overflow: hidden; isolation: isolate; }
.hv3-spotlight::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--petrol-100), var(--petrol-400) 60%, var(--petrol-700));
}

/* ---------- "How it works" картки — крапка-маркер списку, 2 accent-теми
   (сигнали: up/зелений; AI-аналіз: петроль) без фіолетового. ---------- */
.hv3-how-dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; margin-block-start: 6px; }

/* ---------- Recent Trades / How-it-works / KPI-подібні грід-групи — та сама
   auto-fit ідіома, що ticker_v3.html snapshot/dividends грідів. ---------- */
.hv3-cards-3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hv3-cards-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Intro-текст (SEO "What is StockScreener?") — proza-рітм: кожен
   наступний <p> отримує відступ, перший — ні (те саме, що about-секція
   ticker_v3.html, тут винесено в клас бо параграфів більше). ---------- */
.hv3-intro p + p { margin-block-start: 14px; }
.hv3-intro { font-size: 13.5px; line-height: 1.75; color: var(--text-2); max-width: 78ch; }
.hv3-intro a { font-weight: 600; }