.hero { isolation: isolate; overflow: hidden; }
.hero-photo { position: absolute; inset: 0 0 0 auto; width: 61%; z-index: 0; pointer-events: none; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #081329 0%, rgba(8,19,41,.90) 14%, rgba(8,19,41,.28) 57%, rgba(8,19,41,.07) 100%); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .80; }
.hero-copy, .hero .stats { position: relative; z-index: 3; }
.hero .network { z-index: 2; opacity: .84; }
.visual-story { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(300px, .96fr); gap: clamp(32px, 6vw, 90px); align-items: center; padding: 58px 0 88px; }
.visual-story-image { position: relative; min-height: 360px; overflow: hidden; border: 1px solid rgba(153,187,255,.22); border-radius: 24px; background: #e9f1fa; box-shadow: 0 24px 70px rgba(16,44,88,.15); }
.visual-story-image::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(8,19,41,.22)); }
.visual-story-image img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.visual-story-copy .eyebrow { margin-bottom: 16px; }
.visual-story-copy h2 { max-width: 610px; margin: 0 0 18px; color: #11213e; font-size: clamp(30px, 3vw, 48px); line-height: 1.15; letter-spacing: -.04em; }
.visual-story-copy p { max-width: 550px; margin: 0; color: #65738d; font-size: 17px; line-height: 1.8; }
.visual-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.visual-points div { padding: 14px; border: 1px solid #e1e9f5; border-radius: 14px; background: #f8fbff; color: #364966; font-size: 13px; line-height: 1.45; }
.visual-points b { display: block; margin-bottom: 5px; color: #117c70; font-size: 15px; }
@media (max-width: 760px) { .hero-photo { width: 100%; opacity: .45; } .hero-photo::after { background: linear-gradient(90deg, rgba(8,19,41,.93), rgba(8,19,41,.66)); } .hero .network { opacity: .28; } .visual-story { grid-template-columns: 1fr; padding: 46px 0 64px; } .visual-story-image, .visual-story-image img { min-height: 280px; } .visual-points { grid-template-columns: 1fr; } }
