/* Additional visual effects on top of the compiled base CSS */
:root{--section-space:var(--sec-v,clamp(80px,10vw,120px))}

/* Card hover lift */
.capability,.price-card,.build-item{transition:background .25s,transform .25s,box-shadow .25s}
.capability:hover{box-shadow:0 12px 40px rgba(32,96,232,.12)}
.price-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(32,96,232,.2)}
.price-card.featured:hover{box-shadow:0 20px 60px rgba(32,96,232,.2),0 0 0 1px rgba(32,96,232,.4)}

/* Hero glow overlay */
#top{isolation:isolate}
#top::after{content:'SS';position:absolute;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(32,96,232,.025);font-family:'Space Grotesk',sans-serif;font-size:clamp(12rem,30vw,28rem);font-weight:700;letter-spacing:-.14em;line-height:.8;pointer-events:none;user-select:none}

/* Floating WhatsApp pulse ring */
.floating-whatsapp::before{content:'';position:absolute;inset:0;border-radius:9999px;background:#25d366;animation:waRing 2.4s cubic-bezier(.2,.6,.4,1) infinite;z-index:-1}
@keyframes waRing{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}

/* Nav underline hover + active */
.desktop-nav a{position:relative}
.desktop-nav a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--blue-400);transition:width .25s ease}
.desktop-nav a:hover::after,.desktop-nav a.nav-active::after{width:100%}

/* Solution card glow */
.solution{transition:border-color .25s,box-shadow .25s}
.solution:hover{border-color:var(--edge-2);box-shadow:0 16px 50px rgba(0,0,0,.35)}

/* System visual sweep animation */
.system-visual{position:relative;overflow:hidden}
.system-visual::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(32,96,232,.06) 50%,transparent 80%);transform:translateX(-100%);animation:visSweep 8s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes visSweep{0%,50%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}

/* Active flow node pulse */
.flow-node.active{animation:nodeGlow 2.8s ease-in-out infinite}
@keyframes nodeGlow{0%,100%{border-color:var(--blue-500);box-shadow:none}50%{border-color:var(--blue-400);box-shadow:0 0 16px rgba(32,96,232,.25)}}

/* Focus indicator */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;border-radius:4px}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--edge-2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--blue-600)}

/* ── STAGGER ANIMATION SUPPORT */
.pricing-grid .price-card,.capability-grid .capability,.testimonials-grid .testimonial-card{transition-delay:calc(var(--i,0)*0.09s)}

/* ── HERO GRADIENT TEXT FALLBACK */
@supports not (-webkit-background-clip:text){.hero h1 em{color:var(--blue-400);-webkit-text-fill-color:unset}}

/* ── FEATURED PRICE CARD AMBIENT */
.price-card.featured{animation:featuredPulse 4s ease-in-out infinite}
@keyframes featuredPulse{0%,100%{box-shadow:0 20px 64px rgba(36,98,240,.18)}50%{box-shadow:0 24px 72px rgba(36,98,240,.28),0 0 0 1px rgba(36,98,240,.25)}}

/* ── PROCESS STAGE HOVER LIFT */
.stage{transition:background .3s,transform .25s}.stage:hover{transform:translateY(-3px)}

/* ── SECTION SEPARATOR */
.section-light{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}

/* ── TECH GRID HOVER */
.tech-group{transition:background .25s}.tech-group:hover{background:var(--surface-3)}

/* ── TESTIMONIAL CARD DEPTH */
.testimonial-card{transition:border-color .3s,box-shadow .3s,transform .3s}
.testimonial-card:hover{transform:translateY(-4px);border-color:rgba(36,98,240,.35);box-shadow:0 20px 56px rgba(0,0,0,.4),0 0 0 1px rgba(36,98,240,.08)}

/* ── CALLOUT CARD UPGRADE */
.callout{border:1px solid rgba(36,98,240,.3);background:linear-gradient(135deg,rgba(36,98,240,.1),rgba(36,98,240,.04))}

/* ── FOOTER SUBTLE GRADIENT */
.footer{background:linear-gradient(to bottom,var(--bg),#010915)}
