/* ============================================================================
   hero-bg.css — VX7 «CONTENT-VISUAL» · паттерн hero-фона new-sst.ru
   Светлая PT-тема: тонкая сетка + 2 radial-подсветки, без внешних файлов.

   Использование (hero главной и верхние секции хабов):
     <section class="… d2-hero-bg"> … </section>
   Варианты:
     .d2-hero-bg        — сетка + navy-подсветка слева-сверху + red-подсветка справа-снизу
     .d2-hero-bg--alt   — зеркальные подсветки (navy справа-сверху, red слева-снизу)
     .d2-hero-grid      — только сетка (лёгкие секции-цифры, футер)
   Слои: grid поверх radial; фон-цвет #F8FAFF (разрешённое исключение «без градиентов» —
   подложка hero, см. theme-light.css VD1). Radial-подсветки — им же ограничены: opacity ≤ .07.
   ========================================================================== */

.d2-hero-bg,
.d2-hero-bg--alt,
.d2-hero-grid {
  background-color: #F8FAFF;
}

/* сетка 48×48, штрих navy 5% */
.d2-hero-bg,
.d2-hero-bg--alt,
.d2-hero-grid {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M48%200H0v48%22%20fill%3D%22none%22%20stroke%3D%22%230B1F3A%22%20stroke-opacity%3D%220.05%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 48px 48px;
  background-position: 0 0;
}

/* .d2-hero-bg: + navy radial (24% 18%) и red radial (82% 86%), не повторяются */
.d2-hero-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M48%200H0v48%22%20fill%3D%22none%22%20stroke%3D%22%230B1F3A%22%20stroke-opacity%3D%220.05%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22a%22%20cx%3D%2224%25%22%20cy%3D%2218%25%22%20r%3D%2245%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230B1F3A%22%20stop-opacity%3D%220.07%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230B1F3A%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22b%22%20cx%3D%2282%25%22%20cy%3D%2286%25%22%20r%3D%2252%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E30613%22%20stop-opacity%3D%220.05%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E30613%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22800%22%20fill%3D%22url(%23a)%22%2F%3E%3Crect%20width%3D%221200%22%20height%3D%22800%22%20fill%3D%22url(%23b)%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat, no-repeat;
  background-size: 48px 48px, cover;
  background-position: 0 0, center;
}

/* .d2-hero-bg--alt: подсветки зеркально (navy 76% 20%, red 18% 84%) */
.d2-hero-bg--alt {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M48%200H0v48%22%20fill%3D%22none%22%20stroke%3D%22%230B1F3A%22%20stroke-opacity%3D%220.05%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22a%22%20cx%3D%2276%25%22%20cy%3D%2220%25%22%20r%3D%2245%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230B1F3A%22%20stop-opacity%3D%220.07%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230B1F3A%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22b%22%20cx%3D%2218%25%22%20cy%3D%2284%25%22%20r%3D%2252%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E30613%22%20stop-opacity%3D%220.05%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E30613%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22800%22%20fill%3D%22url(%23a)%22%2F%3E%3Crect%20width%3D%221200%22%20height%3D%22800%22%20fill%3D%22url(%23b)%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat, no-repeat;
  background-size: 48px 48px, cover;
  background-position: 0 0, center;
}

/* Если в секции уже есть свой фон-цвет — переопределить после подключения:
   .my-section.d2-hero-bg { background-color: …; } */