.hero2 {
    background: var(--ce-color-bg-subtle);
    padding: 96px 0 72px;
    overflow: hidden;
}

.hero2 h1 {
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.15;
    color: var(--ce-color-navy);
    margin-bottom: 24px;
}

.hero2 .lead {
    color: var(--ce-color-text-muted);
    max-width: 560px;
    margin-bottom: 32px;
}

.hero2 .trust-row {
    display: flex;
    gap: 28px;
    margin: 28px 0;
    font-size: 0.9rem;
    color: #33394a;
}

.hero2 .trust-row span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero2 .trust-row i {
    color: var(--ce-color-primary);
}

.hero2 .soc2-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ce-color-soc2-bg);
    border: 1px solid var(--ce-color-soc2-border);
    border-radius: var(--ce-radius-md);
    padding: 16px 18px;
    max-width: 460px;
}

.hero2 .soc2-box strong {
    display: block;
    color: var(--ce-color-navy);
    font-size: 0.95rem;
}

.hero2 .soc2-box span {
    font-size: 0.85rem;
    color: var(--ce-color-text-muted);
}

/* Right-hand visual — single exported image (blob + photo + brand
   bubbles + rating graphic are all one Figma export, not separate
   elements). See PLACEHOLDER comment in _LandingFragment.cshtml. */
.hero2-visual {
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.hero2-visual img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .hero2 { padding: 56px 0; text-align: center; }
    .hero2 .lead { margin-left: auto; margin-right: auto; }
    .hero2 .trust-row { justify-content: center; }
    .hero2 .soc2-box { margin: 0 auto; }
    .hero2-visual { margin-top: 48px; }
}