:root { --bg: #f7f7ff; --primary: #1450de; --navy: #102c6d; --muted: #475569; --faint: #94a3b8; }
.svc-hero { background-color: #f7f7ff; background-image: linear-gradient(rgba(20, 80, 222, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 80, 222, 0.05) 1px, transparent 1px); background-size: 56px 56px; position: relative; overflow: hidden; padding: 50px 0 50px; }
.svc-hero-wrap { display: flex; align-items: center; flex-wrap: wrap; max-width: 1290px; margin: 0 auto; width: 100%; }
.svc-hero-content { padding-right: 32px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 80, 222, 0.07); border: 1px solid rgba(20, 80, 222, 0.22); border-radius: 50px; padding: 6px 16px; font-size: 12.5px; color: var(--primary); font-weight: 500; letter-spacing: 0.03em; margin-bottom: 1.4rem; text-transform: uppercase; }
.badge-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 7px rgba(20, 80, 222, 0.6); animation: pulse-dot 1.8s ease-in-out infinite; }
.svc-hero-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.72; max-width: 460px; margin-top: 1.2rem; margin-bottom: 0; }
.svc-hero-visual { display: flex; align-items: center; justify-content: flex-end; min-height: 340px; }
h1 { margin: auto; }
.t-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--navy) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-accent { background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } }
.svc-canvas-wrap { width: 100%; height: 420px; position: relative; }
#neural-mesh-canvas { position: absolute; top: 0; right: -10%; width: 100% !important; height: 100% !important; display: block; outline: none; }
@media (max-width: 1200px) and (min-width: 993px) { .svc-canvas-wrap { height: 380px; } }
@media (max-width: 992px) { .svc-hero-wrap { flex-direction: column; } .svc-hero-content { padding-right: 10px; width: 100%; text-align: left; } .svc-hero-visual { width: 100%; justify-content: center; min-height: unset; } .svc-canvas-wrap { margin-top: 50px; } #neural-mesh-canvas { right: 0; } }
@media (max-width: 768px) { .svc-hero { padding: 48px 16px 40px; } .svc-hero-content { margin-bottom: 20px; } }
@media (max-width: 479px) { .svc-hero { padding: 40px 12px 32px; } .svc-canvas-wrap { height: 500px; margin-block: -115px !important; } }
@media (min-width: 1310px) { .w-col { padding: 0 !important; } }