/* V4 keeps its full-bleed layout with the original dark hero surface. */
.hero { background: var(--solu-color-surface-hero); color: var(--solu-color-text-on-hero); }
.hero::before { background: none; }
.hero h1 span { color: inherit; }
.hero .eyebrow { color: var(--solu-color-text-on-hero-eyebrow); }
.hero-description, .hero-compatibility { color: var(--solu-color-text-on-hero-muted); }
.hero-bottom .button { background: var(--solu-color-action-light); color: var(--solu-color-action-on-light); }
.hero-bottom .button:hover { background: var(--solu-color-action-light-hover); }
.hero-art { opacity: 1; mix-blend-mode: normal; }
.site-header { color: var(--solu-color-text-on-hero); }
.site-header nav { color: var(--solu-color-text-on-hero-muted); }
.site-header .header-cta { border-color: color-mix(in srgb, var(--solu-color-text-on-hero-muted) 40%, transparent); }
.site-header .header-cta:hover { background: var(--solu-color-action-dark-hover); }