.hero-split { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 75vh; align-items: center; gap: 40px; padding: 20px 0; }
.hero-text { max-width: 600px; padding-left: 30px; }
.hero-text h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1rem; color: var(--text); }
.hero-text h1 span { color: var(--primary); }
.hero-text .subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2rem; line-height: 1.6; }
.hero-actions { display: flex; gap: 15px; }
.hero-visual { position: relative; width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; }
.connection-web { width: 100%; height: 100%; max-width: 500px; }
.node { fill: var(--primary); filter: drop-shadow(0 0 5px rgba(255, 94, 126, 0.5)); }
.link { stroke: var(--primary); stroke-width: 1.5; stroke-opacity: 0.3; stroke-dasharray: 4; animation: dash 10s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -100; } }
.floating { animation: float 6s ease-in-out infinite; }
.floating-delay-1 { animation-delay: -2s; }
.floating-delay-2 { animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@media (max-width: 992px) {
    .hero-split { grid-template-columns: 1fr; text-align: center; }
    .hero-text { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
    .hero-actions { justify-content: center; }
    .hero-text h1 { font-size: 2.5rem; }
    .hero-visual { height: 350px; order: -1; }
}