/*
 * Brand design system shared by the solution pages rendered by SolutionView —
 * was an inline <style> (SolutionView.renderBrandStyles). Static, no tenant data.
 */
.hero-mesh { position: relative; background: #fafaf9; overflow: hidden; }
.hero-mesh::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 10% 90%, rgba(102,126,234,0.12), transparent 60%),
        radial-gradient(ellipse 40% 50% at 90% 20%, rgba(139,92,246,0.09), transparent 55%),
        radial-gradient(ellipse 35% 40% at 50% 50%, rgba(118,75,162,0.04), transparent 50%);
}
.hero-mesh::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, #d6d3d1 0.75px, transparent 0.75px);
    background-size: 1.5rem 1.5rem; opacity: 0.3;
    mask-image: radial-gradient(ellipse 55% 65% at 70% 35%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 55% 65% at 70% 35%, black, transparent);
}
.hero-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end), var(--gradient-start)); z-index: 5; }
.brand-card {
    background: white; border: 1px solid #e7e5e4; border-radius: 0.875rem;
    padding: 1.75rem; transition: all 0.15s; position: relative; overflow: visible; }
.brand-card:hover {
    border-color: var(--brand-200); box-shadow: 0 4px 20px rgba(118,75,162,0.06);
    transform: translateY(-2px); }
.brand-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    opacity: 0; transition: opacity 0.15s; border-radius: 0.875rem 0.875rem 0 0; }
.brand-card:hover::before { opacity: 1; }
.brand-cta {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white; position: relative; overflow: hidden; }
.brand-cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 30% 100%, rgba(102,126,234,0.15), transparent 70%);
    pointer-events: none; }