.hero-visual-stage{position:relative;width:100%;padding:clamp(3.5rem, 6vw, 5rem) clamp(0.5rem, 2vw, 1rem) clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);min-height:520px;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:visible;} .hero-visual-core{position:relative;z-index:1;width:100%;max-width:400px;margin:0 auto;will-change:transform;} .hero-visual-core .hero-mock, .hero-visual-core .dash-card{animation:none;} .hero-ambient{position:absolute;inset:-8% -12%;z-index:0;pointer-events:none;overflow:hidden;will-change:transform;transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);} .hero-ambient-blobs{position:absolute;inset:0;} .hero-ambient-blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:0.45;will-change:transform;} .hero-ambient-blob--1{top:8%;left:10%;width:42%;height:38%;background:radial-gradient(circle, rgba(47, 91, 255, 0.14) 0%, transparent 70%);animation:heroBlobDrift1 18s ease-in-out infinite;} .hero-ambient-blob--2{bottom:5%;right:5%;width:48%;height:42%;background:radial-gradient(circle, rgba(0, 194, 168, 0.12) 0%, transparent 72%);animation:heroBlobDrift2 22s ease-in-out infinite;} .hero-ambient-blob--3{top:35%;right:28%;width:32%;height:30%;background:radial-gradient(circle, rgba(11, 18, 32, 0.06) 0%, transparent 68%);animation:heroBlobDrift3 15s ease-in-out infinite;} .hero-ambient-map{position:absolute;inset:0;width:100%;height:100%;opacity:0.35;animation:heroMapFade 20s ease-in-out infinite;} .hero-ambient-network{position:absolute;inset:0;width:100%;height:100%;opacity:0.7;} .hero-network-node{animation:heroNodePulse 4s ease-in-out infinite;} .hero-network-node:nth-child(2){animation-delay:-0.6s;} .hero-network-node:nth-child(3){animation-delay:-1.2s;} .hero-network-node:nth-child(4){animation-delay:-1.8s;} .hero-network-node:nth-child(5){animation-delay:-2.4s;} .hero-network-node:nth-child(6){animation-delay:-0.9s;} .hero-network-node:nth-child(7){animation-delay:-1.5s;} .hero-network-node:nth-child(8){animation-delay:-2.1s;} .hero-network-node:nth-child(9){animation-delay:-2.7s;} .hero-ambient-particles{position:absolute;inset:0;} .hero-ambient-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(11, 18, 32, 0.05);opacity:0.05;will-change:transform, opacity;} .hero-ambient-particle--1{top:12%;left:18%;animation:heroParticleFloat 14s linear infinite;} .hero-ambient-particle--2{top:22%;left:72%;animation:heroParticleFloat 11s linear infinite -2s;} .hero-ambient-particle--3{top:38%;left:42%;animation:heroParticleFloat 16s linear infinite -4s;} .hero-ambient-particle--4{top:55%;left:15%;animation:heroParticleFloat 12s linear infinite -1s;} .hero-ambient-particle--5{top:68%;left:58%;animation:heroParticleFloat 18s linear infinite -6s;} .hero-ambient-particle--6{top:78%;left:82%;animation:heroParticleFloat 10s linear infinite -3s;} .hero-ambient-particle--7{top:8%;left:88%;animation:heroParticleFloat 13s linear infinite -5s;} .hero-ambient-particle--8{top:48%;left:8%;animation:heroParticleFloat 15s linear infinite -7s;} .hero-ambient-particle--9{top:62%;left:35%;animation:heroParticleFloat 9s linear infinite -2.5s;} .hero-ambient-particle--10{top:28%;left:55%;animation:heroParticleFloat 17s linear infinite -8s;} .hero-ambient-particle--11{top:85%;left:28%;animation:heroParticleFloat 11s linear infinite -1.5s;} .hero-ambient-particle--12{top:42%;left:92%;animation:heroParticleFloat 14s linear infinite -3.5s;} .hero-ambient-particle--13{top:18%;left:32%;animation:heroParticleFloat 12s linear infinite -6.5s;} .hero-ambient-particle--14{top:72%;left:68%;animation:heroParticleFloat 16s linear infinite -4.5s;} .hero-float-layer{position:absolute;inset:-4% -10% -4% -6%;z-index:5;pointer-events:none;will-change:transform;transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);} .hero-float-card{position:absolute;pointer-events:auto;cursor:default;will-change:transform;animation-duration:var(--float-dur, 10s);animation-delay:var(--float-delay, 0s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;} .hero-float-card-inner{display:inline-flex;align-items:center;gap:0.5rem;padding:0.55rem 0.8rem;max-width:168px;border-radius:18px;background:rgba(255, 255, 255, 0.9);border:1px solid rgba(255, 255, 255, 0.95);box-shadow:0 6px 28px rgba(11, 18, 32, 0.1), 0 1px 0 rgba(255, 255, 255, 0.95) inset;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text-muted);font-size:0.7rem;font-weight:600;line-height:1.25;letter-spacing:0.01em;transition:box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;} .hero-float-icon{flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:rgba(47, 91, 255, 0.08);color:var(--brand);} .hero-float-icon svg{width:15px;height:15px;display:block;} .hero-float-card:nth-child(3n) .hero-float-icon, .hero-float-card:nth-child(3n+2) .hero-float-icon{background:rgba(0, 194, 168, 0.1);color:var(--accent);} .hero-float-card:hover{z-index:10;} .hero-float-card:hover .hero-float-card-inner{transform:translate3d(0, -6px, 0) scale(1.03);border-color:rgba(47, 91, 255, 0.22);box-shadow:0 12px 36px rgba(11, 18, 32, 0.1), 0 0 0 1px rgba(47, 91, 255, 0.08), 0 0 28px rgba(47, 91, 255, 0.12);} .hero-float-anim-1{animation-name:heroFloat1;} .hero-float-anim-2{animation-name:heroFloat2;} .hero-float-anim-3{animation-name:heroFloat3;} .hero-float-anim-4{animation-name:heroFloat4;} .hero-float-anim-5{animation-name:heroFloat5;} .hero-float-anim-6{animation-name:heroFloat6;} .hero-float-anim-7{animation-name:heroFloat7;} .hero-float-anim-8{animation-name:heroFloat8;} .hero-float-anim-9{animation-name:heroFloat9;} .hero-float-anim-10{animation-name:heroFloat10;} @keyframes heroFloat1{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 33%{transform:translate3d(6px, -12px, 0) rotate(1.5deg) scale(1.02);} 66%{transform:translate3d(-5px, 8px, 0) rotate(-1deg) scale(0.99);} } @keyframes heroFloat2{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 40%{transform:translate3d(-8px, -10px, 0) rotate(-2deg) scale(1.01);} 70%{transform:translate3d(7px, 6px, 0) rotate(1.2deg) scale(0.98);} } @keyframes heroFloat3{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 25%{transform:translate3d(10px, 4px, 0) rotate(2deg) scale(1.03);} 75%{transform:translate3d(-6px, -14px, 0) rotate(-1.5deg) scale(0.97);} } @keyframes heroFloat4{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 50%{transform:translate3d(-10px, -8px, 0) rotate(-2.5deg) scale(1.02);} } @keyframes heroFloat5{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 35%{transform:translate3d(5px, 12px, 0) rotate(1deg) scale(0.98);} 65%{transform:translate3d(-9px, -6px, 0) rotate(-1.8deg) scale(1.01);} } @keyframes heroFloat6{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 45%{transform:translate3d(8px, -14px, 0) rotate(2.2deg) scale(1.02);} 80%{transform:translate3d(-4px, 10px, 0) rotate(-1deg) scale(0.99);} } @keyframes heroFloat7{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 30%{transform:translate3d(-7px, 8px, 0) rotate(-1.5deg) scale(1.01);} 60%{transform:translate3d(6px, -10px, 0) rotate(1.8deg) scale(0.98);} } @keyframes heroFloat8{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 55%{transform:translate3d(12px, -6px, 0) rotate(2.5deg) scale(1.03);} } @keyframes heroFloat9{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 40%{transform:translate3d(-11px, 5px, 0) rotate(-2deg) scale(0.97);} 70%{transform:translate3d(5px, -12px, 0) rotate(1.5deg) scale(1.02);} } @keyframes heroFloat10{0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);} 33%{transform:translate3d(4px, 14px, 0) rotate(1.2deg) scale(1.01);} 66%{transform:translate3d(-8px, -8px, 0) rotate(-2deg) scale(0.99);} } @keyframes heroBlobDrift1{0%, 100%{transform:translate3d(0, 0, 0) scale(1);} 50%{transform:translate3d(18px, -14px, 0) scale(1.06);} } @keyframes heroBlobDrift2{0%, 100%{transform:translate3d(0, 0, 0) scale(1);} 50%{transform:translate3d(-16px, 12px, 0) scale(1.04);} } @keyframes heroBlobDrift3{0%, 100%{transform:translate3d(0, 0, 0) scale(1);} 50%{transform:translate3d(10px, 16px, 0) scale(0.96);} } @keyframes heroMapFade{0%, 100%{opacity:0.28;transform:translate3d(0, 0, 0);} 50%{opacity:0.42;transform:translate3d(-6px, 4px, 0);} } @keyframes heroNodePulse{0%, 100%{opacity:0.35;transform:scale(1);} 50%{opacity:0.75;transform:scale(1.35);} } @keyframes heroParticleFloat{0%{transform:translate3d(0, 0, 0);opacity:0.03;} 50%{transform:translate3d(12px, -28px, 0);opacity:0.06;} 100%{transform:translate3d(-8px, -56px, 0);opacity:0.03;} } .hero, .solution-hero{overflow:visible;} .hero-mesh{overflow:hidden;} .solution-dashboard .hero-visual-stage{min-height:540px;} .hero .hero-visual .hero-visual-stage{min-height:560px;} .hero-visual, .solution-dashboard{width:100%;max-width:660px;margin-left:auto;margin-right:auto;overflow:visible;} @media (max-width:1024px){.hero-visual-stage{min-height:460px;padding:3rem 0.25rem;} .hero-float-layer{inset:-2% -6% -2% -4%;} .hero-float-card-inner{font-size:0.65rem;padding:0.45rem 0.65rem;max-width:148px;} .hero-float-icon{width:24px;height:24px;} } @media (max-width:768px){.hero-visual-stage{min-height:380px;padding:2.5rem 0.15rem;} .hero-float-layer{inset:0;} .hero-float-card:nth-child(1){top:-2% !important;left:-2% !important;right:auto !important;bottom:auto !important;} .hero-float-card:nth-child(2){top:-3% !important;right:-4% !important;left:auto !important;bottom:auto !important;} .hero-float-card:nth-child(3){top:14% !important;left:-4% !important;right:auto !important;bottom:auto !important;} .hero-float-card:nth-child(4){top:8% !important;right:-6% !important;left:auto !important;bottom:auto !important;} .hero-float-card:nth-child(5){bottom:8% !important;left:-2% !important;top:auto !important;right:auto !important;} .hero-float-card--mobile-hide{display:none;} .hero-float-card, .hero-ambient-blob, .hero-ambient-map, .hero-network-node, .hero-ambient-particle{animation-play-state:paused !important;} .hero-float-card:hover .hero-float-card-inner{transform:none;box-shadow:0 4px 24px rgba(11, 18, 32, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;} .hero-ambient{inset:-4% -6%;} } @media (max-width:480px){.hero-visual-stage{min-height:340px;} .hero-float-card-inner{max-width:130px;font-size:0.6rem;} } @media (prefers-reduced-motion:reduce){.hero-float-card, .hero-ambient-blob, .hero-ambient-map, .hero-network-node, .hero-ambient-particle{animation:none !important;} .hero-ambient, .hero-float-layer{transition:none;} }