/**
 * VitaCoreX Cybercore hero scene (vanilla port of the React cybercore-section-hero)
 *
 * Replaces the <video src="sky-clouds.mp4"> background inside .vcx-hero-2__bg
 * with a fully CSS + lightweight JS animated scene: grid floor, central
 * glowing column, and rising teal light beams. Colors retuned to VitaCoreX
 * brand (deep navy base + teal/emerald beams) instead of the source's
 * cyberpunk cyan/orange palette.
 *
 * Structure (built by vcx-hero-cybercore.js):
 *   .vcx-hero-2__bg
 *     └── .vcx-cybercore-scene
 *           ├── .vcx-cybercore-floor         (animated grid + radial glow)
 *           ├── .vcx-cybercore-column        (central vertical glow pillar)
 *           └── .vcx-cybercore-beams
 *                 └── .vcx-cybercore-beam.(primary|secondary) × N
 *
 * Respects prefers-reduced-motion: scene stays visible but animations freeze.
 */

:root {
  /* Mint bluish-green palette — brand teal #5BBAA7 as primary beam tone,
   * lighter mint #7ED8C3 as secondary accent, with a deep teal-navy base.
   * Reads as "minty aqua" — cooler than true green, warmer than pure cyan.
   * All highlight tones are blue-tinted mint (NOT cream) to avoid warm drift. */
  --vcx-cc-bg-top:      #051F1A;
  --vcx-cc-bg-bottom:   #0A2E28;
  --vcx-cc-grid-line:   rgba(120, 210, 190, 0.10);
  --vcx-cc-beam:        #5BBAA7;
  --vcx-cc-beam-alt:    #7ED8C3;
  --vcx-cc-glow-1:      rgba(90, 200, 175, 0.75);
  --vcx-cc-glow-2:      rgba(40, 140, 120, 0.55);
  --vcx-cc-highlight:   rgba(200, 245, 225, 0.85);
}

.vcx-cybercore-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    /* Subtle radial bottom glow (floor falloff) + deep teal-navy base.
     * Beam rays live on ::before (below) for cheaper rotate/blur compositing. */
    radial-gradient(ellipse at 50% 105%, rgba(50, 190, 160, 0.28) 0%, transparent 55%),
    linear-gradient(180deg, var(--vcx-cc-bg-top) 0%, var(--vcx-cc-bg-bottom) 100%);
  perspective: 900px;
  pointer-events: none;
  isolation: isolate;
}

/* ── Fluid-particle scene override ───────────────────────────────────
 * When vcx-hero-particles.js mounts, it injects .vcx-particles-canvas
 * and (via the idempotent sweep in initHero) removes .vcx-cybercore-scene
 * entirely. These rules make sure the canvas fills the hero bg, sits
 * flat on a pure black base, and any cybercore DOM that somehow stayed
 * is forced invisible so it can't stack on top of the particle field. */
.vcx-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__bg {
  background-color: #030507 !important;
}

/* Rays/kernel/floor/column/beams — all hidden in particle-scene mode.
 * They would otherwise paint on top of / through the canvas. */
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-cybercore-scene,
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-cybercore-scene::before,
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-cybercore-scene::after {
  display: none !important;
}

/* ── Interior-page particle host (.hero.hero-premium) ────────────────
 * Propagate the particle scene to the 24+ pages that use the premium
 * hero layout (about, solutions, careers, industries, etc.). The JS
 * (vcx-hero-particles.js: adoptPremiumHero) strips the sky-clouds
 * video + poster and adds the .vcx-hero-particles-host class. These
 * rules give the canvas the same near-black base and kill the legacy
 * .hero-video green bg + orange radial gloss that styles.css and
 * vcx-redesign.css stamp on by default. */
section.hero.hero-premium.vcx-hero-particles-host {
  background-color: #030507 !important;
}
section.hero.hero-premium.vcx-hero-particles-host > .hero-video {
  background: #030507 !important;
}
/* Kill the ::before/::after radial gloss that would otherwise paint
 * warm highlights on top of the mint particle field. */
section.hero.hero-premium.vcx-hero-particles-host > .hero-video::before,
section.hero.hero-premium.vcx-hero-particles-host > .hero-video::after {
  display: none !important;
}

/* ── Bespoke & fallback particle hosts ────────────────────────────────
 * Cover two more hero patterns used across the site:
 *  1. .scd-hero — small-claims-documentation bespoke hero
 *  2. section.section with .section-head > h1 — private-client pages
 *     (location-analysis, turnkey-business-opening, llc-formation-
 *     florida, immigration-*, revenue-recovery-*, etc.) that lack a
 *     dedicated hero banner and instead inline the title inside the
 *     first content section.
 * Shared rules: dark bg, positional context for the canvas, content
 * z-index above canvas, light text, bright eyebrow, high-contrast
 * buttons. */
section.vcx-hero-particles-host--scd,
section.vcx-hero-particles-host--sechead {
  position: relative !important;
  overflow: hidden !important;
  background: #030507 !important;
  isolation: isolate;
  color: #F4FBF8 !important;
}

/* Canvas sits behind the inline content */
section.vcx-hero-particles-host--scd > .vcx-particles-canvas,
section.vcx-hero-particles-host--sechead > .vcx-particles-canvas {
  z-index: 0;
}
section.vcx-hero-particles-host--scd > *:not(.vcx-particles-canvas),
section.vcx-hero-particles-host--sechead > *:not(.vcx-particles-canvas) {
  position: relative;
  z-index: 2;
}

/* Section-head text on particle black: all-white title, soft body,
 * bright mint eyebrow with glow. */
section.vcx-hero-particles-host--sechead .section-head h1,
section.vcx-hero-particles-host--sechead .section-head h2 {
  color: #F4FBF8 !important;
}
section.vcx-hero-particles-host--sechead .section-head p,
section.vcx-hero-particles-host--sechead .section-head li,
section.vcx-hero-particles-host--sechead .section-head strong {
  color: rgba(244, 251, 248, 0.86) !important;
}
section.vcx-hero-particles-host--sechead .section-head .eyebrow,
section.vcx-hero-particles-host--sechead .section-head .vcx-eyebrow {
  color: #D4FBEE !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 6px  rgba(126, 216, 195, 0.95),
    0 0 14px rgba(91, 186, 167, 0.75),
    0 0 28px rgba(91, 186, 167, 0.45);
}

/* SCD hero text on particle black */
section.vcx-hero-particles-host--scd .scd-hero__title {
  color: #F4FBF8 !important;
}
section.vcx-hero-particles-host--scd .scd-hero__lede,
section.vcx-hero-particles-host--scd .scd-hero__sub {
  color: rgba(244, 251, 248, 0.86) !important;
}
section.vcx-hero-particles-host--scd .scd-hero__eyebrow {
  color: #D4FBEE !important;
  background: rgba(91, 186, 167, 0.18) !important;
  border-color: rgba(126, 216, 195, 0.45) !important;
  text-shadow:
    0 0 6px  rgba(126, 216, 195, 0.95),
    0 0 14px rgba(91, 186, 167, 0.75);
}

/* Button contrast on dark hero — brighten the mint fill + darken
 * text so CTAs stay legible against the particle field. Applies to
 * .btn, .btn-primary, .vcx-btn-2, .scd-btn, .crs-btn, .adr-btn, etc
 * inside any of the new hosts. Covers both the generic .btn family
 * and the page-scoped prefixes that several templates ship (scd-*,
 * crs-*, adr-* on small-claims / contract-review / auto-deal-review). */
section.vcx-hero-particles-host--scd .btn-primary,
section.vcx-hero-particles-host--scd .btn,
section.vcx-hero-particles-host--sechead .btn-primary,
section.vcx-hero-particles-host--sechead .btn,
section.vcx-hero-particles-host--scd .vcx-btn-2--primary,
section.vcx-hero-particles-host--sechead .vcx-btn-2--primary,
section.vcx-hero-particles-host--scd .scd-btn--primary,
section.vcx-hero-particles-host--scd .scd-btn,
section.vcx-hero-particles-host--sechead .scd-btn--primary,
section.vcx-hero-particles-host--sechead .scd-btn,
section.vcx-hero-particles-host--scd .crs-btn--primary,
section.vcx-hero-particles-host--sechead .crs-btn--primary,
section.vcx-hero-particles-host--scd .adr-btn--primary,
section.vcx-hero-particles-host--sechead .adr-btn--primary {
  background: #7ED8C3 !important;
  color: #051812 !important;
  border: 1px solid #7ED8C3 !important;
  box-shadow: 0 0 0 1px rgba(126, 216, 195, 0.25), 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  text-shadow: none !important;
}
section.vcx-hero-particles-host--scd .btn-primary:hover,
section.vcx-hero-particles-host--sechead .btn-primary:hover,
section.vcx-hero-particles-host--scd .scd-btn--primary:hover,
section.vcx-hero-particles-host--sechead .scd-btn--primary:hover,
section.vcx-hero-particles-host--scd .crs-btn--primary:hover,
section.vcx-hero-particles-host--sechead .crs-btn--primary:hover {
  background: #9EE4D0 !important;
  border-color: #9EE4D0 !important;
  color: #051812 !important;
}
section.vcx-hero-particles-host--scd .btn-secondary,
section.vcx-hero-particles-host--scd .btn-ghost,
section.vcx-hero-particles-host--sechead .btn-secondary,
section.vcx-hero-particles-host--sechead .btn-ghost,
section.vcx-hero-particles-host--scd .vcx-btn-2--ghost,
section.vcx-hero-particles-host--sechead .vcx-btn-2--ghost,
section.vcx-hero-particles-host--scd .scd-btn--ghost,
section.vcx-hero-particles-host--scd .scd-btn--secondary,
section.vcx-hero-particles-host--sechead .scd-btn--ghost,
section.vcx-hero-particles-host--sechead .scd-btn--secondary,
section.vcx-hero-particles-host--scd .crs-btn--ghost,
section.vcx-hero-particles-host--sechead .crs-btn--ghost,
section.vcx-hero-particles-host--scd .adr-btn--ghost,
section.vcx-hero-particles-host--sechead .adr-btn--ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #E6FDF3 !important;
  border: 1px solid rgba(126, 216, 195, 0.55) !important;
  text-shadow: none !important;
}

/* ── Horizontal pricing override ─────────────────────────────────────
 * The .fit-grid helper in styles.css applies a CSS Grid with
 * `grid-template-columns: repeat(2, 1fr)`, forcing every child of
 * the grid into a 2-column track. Single-tier pricing pages
 * (turnkey-business-opening, location-analysis, business-plans)
 * now mark their wrapper as .pricing-horizontal and lay the card
 * out as a wide two-column block instead. Override the grid to a
 * block, kill the forced card padding clamp, and make the card's
 * own flex layout take over so left (price+CTA) sits next to
 * right (feature list). Collapses to stacked below ~760px.
 *
 * User feedback:
 *   "где цены одна коллонка лучше сделать горизонтально, чтобы
 *    выглядело хорошо" */
.fit-grid.pricing-horizontal {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.fit-grid.pricing-horizontal > article.card {
  padding: 36px 40px !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .fit-grid.pricing-horizontal > article.card {
    padding: 28px 22px !important;
  }
}

/* ── Breadcrumb reset + dark-scene colouring ─────────────────────────
 * .vcx-breadcrumb wraps an <ol> which otherwise renders decimal
 * markers ("1. Home, 2. Private Client Services, 3. ..."). None of
 * the legacy CSS targets .vcx-breadcrumb, so we reset it here and
 * add a › separator so the chain reads naturally. Light on dark
 * when inside a particle-host section (the breadcrumb is not inside
 * the host element, but on several of these pages it visually sits
 * immediately above the hero; keep its default look light on soft
 * bg, and provide the readable mint colour when it lands on the
 * dark particle background). */
nav.vcx-breadcrumb {
  padding: 14px 0;
  background: transparent;
  position: relative;
  z-index: 3;
}
nav.vcx-breadcrumb ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  font-size: .88rem;
  color: #4A6B66;
}
nav.vcx-breadcrumb li {
  display: inline-flex;
  align-items: center;
}
nav.vcx-breadcrumb li + li::before {
  content: "›";
  margin: 0 10px;
  opacity: 0.55;
  font-size: 1rem;
  line-height: 1;
}
nav.vcx-breadcrumb a {
  color: #2D8A82;
  text-decoration: none;
  transition: color .15s ease;
}
nav.vcx-breadcrumb a:hover {
  color: #5BBAA7;
  text-decoration: underline;
}
/* Dark-scene variant: if the page sets a dark background adjacent to
 * the breadcrumb (sechead/scd hosts render the entire section dark),
 * recolour the breadcrumb chain so its text + separator stay legible. */
body:has(section.vcx-hero-particles-host--scd) nav.vcx-breadcrumb ol,
body:has(section.vcx-hero-particles-host--sechead) nav.vcx-breadcrumb ol {
  color: rgba(230, 253, 243, 0.72);
}
body:has(section.vcx-hero-particles-host--scd) nav.vcx-breadcrumb a,
body:has(section.vcx-hero-particles-host--sechead) nav.vcx-breadcrumb a {
  color: #9EE4D0;
}
body:has(section.vcx-hero-particles-host--scd) nav.vcx-breadcrumb a:hover,
body:has(section.vcx-hero-particles-host--sechead) nav.vcx-breadcrumb a:hover {
  color: #D4FBEE;
}

/* ── Light-ray fan (TuringLanding reference) ─────────────────────────
 * Crepuscular-ray effect: a conic-gradient with alternating mint-teal
 * and transparent angular stops, origin anchored just above the hero
 * near the left third, then blurred and slowly swayed. The narrow
 * angular band (from ~130deg through ~215deg) keeps the rays fanning
 * DOWN-RIGHT across the hero instead of filling all 360deg. Second
 * pseudo-element (::after) is a soft bright kernel at the ray origin
 * so the fan looks like it's emitting from a point of light. */
.vcx-cybercore-scene::before {
  content: "";
  position: absolute;
  inset: -15% -15% -15% -15%;
  background: conic-gradient(
    from 128deg at 22% -4%,
    transparent 0deg,
    rgba(91, 186, 167, 0.28)  3deg,
    transparent 6deg,
    transparent 12deg,
    rgba(126, 216, 195, 0.22) 15deg,
    transparent 19deg,
    transparent 26deg,
    rgba(91, 186, 167, 0.34)  30deg,
    transparent 34deg,
    transparent 42deg,
    rgba(126, 216, 195, 0.26) 46deg,
    transparent 50deg,
    transparent 58deg,
    rgba(91, 186, 167, 0.22)  62deg,
    transparent 66deg,
    transparent 75deg,
    rgba(126, 216, 195, 0.2)  78deg,
    transparent 82deg,
    transparent 360deg
  );
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: vcxCcRaysSway 22s ease-in-out infinite;
  transform-origin: 22% 0%;
  will-change: transform, opacity;
  z-index: 1;
}

.vcx-cybercore-scene::after {
  content: "";
  position: absolute;
  top: -8%;
  left: 14%;
  width: 24%;
  height: 30%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(180, 240, 220, 0.35) 0%,
    rgba(91, 186, 167, 0.2)  35%,
    transparent 70%);
  filter: blur(30px);
  animation: vcxCcRaysKernel 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
}

@keyframes vcxCcRaysSway {
  0%, 100% { transform: rotate(-1.6deg); opacity: 0.88; }
  50%      { transform: rotate(1.6deg);  opacity: 1;    }
}
@keyframes vcxCcRaysKernel {
  from { opacity: 0.7; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.08); }
}

/* Retired cybercore layers — beams, grid floor, central column. DOM
 * nodes stay (JS idempotent), just hidden. Replaced by the light-ray
 * fan above which matches the TuringLanding reference. */
.vcx-cybercore-floor,
.vcx-cybercore-column,
.vcx-cybercore-beams {
  display: none !important;
}

/* Grid floor — perspective-tilted, animated scroll toward the viewer.
 * Uses two linear-gradients for a crossed grid. Very cheap to animate
 * because only background-position changes. */
.vcx-cybercore-floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -10%;
  height: 65%;
  background:
    linear-gradient(var(--vcx-cc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vcx-cc-grid-line) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  transform: rotateX(68deg) translateZ(0);
  transform-origin: 50% 100%;
  animation: vcxCcMoveGrid 9s linear infinite;
  opacity: 0.9;
  mask-image: linear-gradient(to top, #000 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}

/* Subtle glow pulsing at the vanishing point where the floor meets
 * the horizon — makes the column appear to emit light downward. */
.vcx-cybercore-floor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6%;
  width: 50%;
  height: 90%;
  transform: translateX(-50%) rotateX(-68deg);
  background: radial-gradient(ellipse at 50% 50%, var(--vcx-cc-glow-1) 0%, transparent 65%);
  filter: blur(40px);
  animation: vcxCcFloorGlow 5s ease-in-out infinite;
  opacity: 0.8;
}

/* Central vertical light pillar — a soft vertical gradient that
 * pulses faintly to anchor the composition. */
.vcx-cybercore-column {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 28%;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--vcx-cc-glow-2) 40%,
    var(--vcx-cc-glow-1) 75%,
    transparent 100%
  );
  filter: blur(24px);
  opacity: 0.6;
  animation: vcxCcMainGlow 6s ease-in-out infinite alternate;
}

/* Beam container — fills the scene, beams are absolute-positioned
 * inside it with randomized `left` from JS. */
.vcx-cybercore-beams {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vcx-cybercore-beam {
  position: absolute;
  bottom: 0;
  height: 90%;
  width: 1px;
  background: linear-gradient(
    to top,
    transparent 0%,
    var(--vcx-cc-beam) 40%,
    var(--vcx-cc-beam) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 6px var(--vcx-cc-glow-1),
    0 0 12px var(--vcx-cc-glow-2);
  opacity: 0;
  animation:
    vcxCcRise  var(--vcx-cc-rise, 6s) linear infinite,
    vcxCcFade  var(--vcx-cc-fade, 6s) linear infinite;
  will-change: transform, opacity;
}

/* Secondary beams — warmer mint highlight, ~15% of total.
 * Slightly wider + brighter glow to draw the eye. */
.vcx-cybercore-beam.secondary {
  background: linear-gradient(
    to top,
    transparent 0%,
    var(--vcx-cc-beam-alt) 30%,
    var(--vcx-cc-highlight) 70%,
    transparent 100%
  );
  box-shadow:
    0 0 8px var(--vcx-cc-highlight),
    0 0 16px rgba(200, 230, 210, 0.5);
}

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes vcxCcRise {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(-5%); }
}

@keyframes vcxCcFade {
  0%, 100% { opacity: 0; }
  5%, 85%  { opacity: 0.85; }
}

@keyframes vcxCcFloorGlow {
  0%, 100% { transform: translateX(-50%) rotateX(-68deg) scale(0.95); opacity: 0.65; }
  50%      { transform: translateX(-50%) rotateX(-68deg) scale(1.05); opacity: 0.95; }
}

@keyframes vcxCcMainGlow {
  from { opacity: 0.5; filter: blur(28px); }
  to   { opacity: 0.7; filter: blur(20px); }
}

@keyframes vcxCcMoveGrid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: -60px -30px, -60px -30px; }
}

/* ── Legacy animation takeover ──────────────────────────────────────
 * When cybercore scene is active (marked by vcx-hero-cybercore.js), hide
 * every legacy hero animation layer that other scripts inject:
 *   - .vcx-leaf-container / .vcx-hero-canvas (from vcx-redesign.js,
 *     bokeh-orbs + aurora canvas, siblings of .vcx-hero-2__bg)
 *   - .hero-cloud-layer (from site.js injectHeroClouds, parallax cloud
 *     dots inside .vcx-hero-2__bg)
 * Without these guards the old animations stack on top of the new scene
 * (their z-index is 1/4, cybercore lives at z:0). Also strip the dark-
 * teal base colour on .vcx-hero-2__bg that used to sit behind the old
 * video — left in, it bleeds through the cybercore radial glow and
 * warms the palette back toward green. */
/* Hero eyebrow on particle scene: near-white mint (#C8FBE9) with a
 * heavier three-layer teal-cyan glow so the tiny caps line actually
 * jumps off the particle-black bg. Also force-bold + slightly bigger
 * font-size so it reads as a confident accent line rather than a
 * faint label. Overrides the default #5BBAA7 from vcx-premium-2.css
 * for this scene only. */
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-eyebrow {
  color: #D4FBEE !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  text-shadow:
    0 0 6px  rgba(126, 216, 195, 0.95),
    0 0 14px rgba(91, 186, 167, 0.75),
    0 0 28px rgba(91, 186, 167, 0.45);
}

.vcx-hero-2[data-hero-scene="cybercore"] > .vcx-leaf-container,
.vcx-hero-2[data-hero-scene="cybercore"] > .vcx-hero-canvas,
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__bg .hero-cloud-layer {
  display: none !important;
}
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__bg {
  background-color: transparent !important;
}

/* ── Hero content fade-slide-in entrance ───────────────────────────
 * Ported from the React ResponsiveHeroBanner animate-fade-slide-in-{1..4}
 * pattern. Each child of .vcx-hero-2__content fades up from 20px with a
 * stepped delay so the eyebrow → title → body → actions cascade in.
 * Scoped to [data-hero-scene="cybercore"] so it only affects the new hero. */
@keyframes vcxHeroFadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-eyebrow,
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__title,
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__subtitle,
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__actions,
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__trust {
  opacity: 0;
  animation: vcxHeroFadeSlideIn 0.7s ease-out forwards;
}
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-eyebrow        { animation-delay: 0.1s; }
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__title  { animation-delay: 0.25s; }
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__subtitle { animation-delay: 0.4s; }
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__subtitle--scope { animation-delay: 0.5s; }
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__actions  { animation-delay: 0.6s; }
.vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > .vcx-hero-2__trust    { animation-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  .vcx-hero-2[data-hero-scene="cybercore"] .vcx-hero-2__content > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Stats block rules retired — the aside.vcx-hero-2__stats element was
 * removed from index.html (user feedback: "2025 юса надо убрать"). The
 * .vcx-hero-stat / .vcx-hero-2__stats classes are no longer emitted by
 * any template, so no scoped rules remain. */

/* ── Motion reduction: freeze beam rise + grid scroll + rays, keep static look ── */
@media (prefers-reduced-motion: reduce) {
  .vcx-cybercore-floor,
  .vcx-cybercore-floor::after,
  .vcx-cybercore-column,
  .vcx-cybercore-beam,
  .vcx-cybercore-scene::before,
  .vcx-cybercore-scene::after {
    animation: none !important;
  }
  .vcx-cybercore-beam {
    opacity: 0.5;
    transform: translateY(-20%);
  }
  .vcx-cybercore-scene::before {
    transform: rotate(0deg);
    opacity: 0.9;
  }
}

/* ── Mobile tuning: fewer visual layers, less blur cost ─────────── */
@media (max-width: 720px) {
  .vcx-cybercore-floor {
    height: 55%;
    background-size: 40px 40px, 40px 40px;
  }
  .vcx-cybercore-column {
    width: 45%;
    filter: blur(18px);
  }
}