/* ── VORTEX ULTRA — camada futurista extra ── */

.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%);
}

.cyber-grid{
  opacity:1;
  background-image:
    linear-gradient(rgba(0,212,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.06) 1px,transparent 1px);
  background-size:48px 48px;
}

#nav{
  border-bottom:1px solid transparent!important;
  background:rgba(0,0,0,.72)!important;
}
#nav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#00D4FF,#7C3AED,#D946EF,transparent);
  background-size:200% auto;animation:navLine 4s linear infinite;
}
@keyframes navLine{0%{background-position:0% center}100%{background-position:200% center}}
#nav.scrolled{
  box-shadow:0 8px 40px rgba(0,212,255,.12),0 0 0 1px rgba(0,212,255,.08)!important;
}

.nav-logo::before{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.12),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.nav-logo{position:relative}
.nav-logo:hover::before{opacity:1}

/* ── HERO RINGS ── */
.hero-rings{
  position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
  width:500px;height:500px;pointer-events:none;z-index:1;
  transform-style:preserve-3d;
}
.hero-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(0,212,255,.12);
  animation:ringSpin linear infinite;
}
.ring-1{animation-duration:18s;border-color:rgba(0,212,255,.2);transform:rotateX(72deg)}
.ring-2{animation-duration:24s;inset:40px;border-color:rgba(124,58,237,.25);transform:rotateX(65deg) rotateY(20deg);animation-direction:reverse}
.ring-3{animation-duration:30s;inset:80px;border-color:rgba(217,70,239,.15);transform:rotateX(60deg) rotateY(-15deg)}
@keyframes ringSpin{to{transform:rotateX(72deg) rotateZ(360deg)}}

.hero-glow{
  width:900px;height:900px;
  background:radial-gradient(circle,rgba(0,212,255,.14) 0%,rgba(124,58,237,.1) 35%,transparent 65%);
  animation:glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

.hero-h1 .line1{text-shadow:0 0 40px rgba(255,255,255,.15),0 0 80px rgba(0,212,255,.1)}
.hero-h1 .line3{
  animation:lineShimmer 3s ease-in-out infinite;
  filter:drop-shadow(0 0 25px rgba(124,58,237,.6));
}
@keyframes lineShimmer{0%,100%{filter:drop-shadow(0 0 20px rgba(0,212,255,.5))}50%{filter:drop-shadow(0 0 35px rgba(217,70,239,.7))}}

.hero-content{transform-style:preserve-3d;transition:transform .1s linear}

.hero-status{
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  animation:statusGlow 2.5s ease-in-out infinite;
}
@keyframes statusGlow{0%,100%{box-shadow:0 0 20px rgba(0,212,255,.15)}50%{box-shadow:0 0 35px rgba(0,212,255,.35)}}

/* ── SECTION HUD ── */
.section{position:relative}
.section-hud{
  position:absolute;inset:24px 48px;pointer-events:none;z-index:1;
}
.section-hud span{
  position:absolute;width:20px;height:20px;border-color:rgba(0,212,255,.25);border-style:solid;
}
.section-hud .sh-tl{top:0;left:0;border-width:1px 0 0 1px}
.section-hud .sh-tr{top:0;right:0;border-width:1px 1px 0 0}
.section-hud .sh-bl{bottom:0;left:0;border-width:0 0 1px 1px}
.section-hud .sh-br{bottom:0;right:0;border-width:0 1px 1px 0}

.sec-label{
  text-shadow:0 0 20px rgba(0,212,255,.4);
  animation:labelPulse 3s ease-in-out infinite;
}
@keyframes labelPulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ── CARDS ULTRA ── */
.scroll-card.scroll-focus{
  --sc:1.06!important;
  box-shadow:
    0 40px 100px rgba(124,58,237,.4),
    0 0 60px rgba(0,212,255,.25),
    inset 0 0 0 1px rgba(0,212,255,.2),
    inset 0 0 50px rgba(0,212,255,.06)!important;
}
.holo-card{
  border:1px solid rgba(0,212,255,.12)!important;
}
.holo-card::after{
  height:2px;opacity:.8;
  animation:scanH 2s linear infinite;
}

.svc-icon-wrap,.proc-num{
  box-shadow:inset 0 0 15px rgba(0,212,255,.05);
}

.price-card.featured{
  animation:featuredPulse 3s ease-in-out infinite;
}

/* ── BUTTONS ULTRA ── */
.btn-neon{
  box-shadow:0 0 30px rgba(124,58,237,.4),0 0 60px rgba(0,212,255,.15)!important;
  animation:btnPulse 2.5s ease-in-out infinite;
}
@keyframes btnPulse{0%,100%{box-shadow:0 0 30px rgba(124,58,237,.4),0 0 60px rgba(0,212,255,.15)}50%{box-shadow:0 0 45px rgba(0,212,255,.5),0 0 80px rgba(124,58,237,.35)}}
.btn-neon:hover{animation:none}

.btn-outline:hover{
  background:rgba(0,212,255,.08)!important;
  text-shadow:0 0 12px rgba(0,212,255,.5);
}

/* ── MARQUEE ── */
.marquee-wrap{
  background:linear-gradient(180deg,rgba(0,212,255,.03),var(--bg2),rgba(124,58,237,.03));
}

/* ── CTA ── */
.cta-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(0,212,255,.06),transparent 50%),
             radial-gradient(ellipse at 70% 50%,rgba(124,58,237,.08),transparent 50%);
  pointer-events:none;
}
.cta-bg-text{
  -webkit-text-stroke:1px rgba(0,212,255,.1);
  animation:ctaDrift 8s ease-in-out infinite, ctaGlow 4s ease-in-out infinite;
}
@keyframes ctaGlow{0%,100%{opacity:1}50%{opacity:.6}}

/* ── CLICK RIPPLE ── */
.click-ripple{
  position:fixed;border-radius:50%;pointer-events:none;z-index:9995;
  border:1px solid rgba(0,212,255,.6);
  animation:rippleOut .7s ease-out forwards;
}
@keyframes rippleOut{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.8}
  100%{transform:translate(-50%,-50%) scale(4);opacity:0}
}

/* ── FLOATING PARTICLES (sections) ── */
.float-particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--cyan);opacity:.4;pointer-events:none;
  animation:floatUp var(--dur,6s) ease-in-out infinite;
  box-shadow:0 0 8px var(--cyan);
}
@keyframes floatUp{
  0%,100%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.5}50%{transform:translateY(-60px) translateX(10px);opacity:.3}
  90%{opacity:0}
}

#matrix-bg{opacity:.22}

@media(max-width:768px){
  .hero-rings{width:min(85vw,360px);height:min(85vw,360px);left:50%}
  .section-hud{inset:16px 20px}
  .vignette{background:radial-gradient(ellipse at 50% 30%,transparent 30%,rgba(0,0,0,.6) 100%)}
}

@media(prefers-reduced-motion:reduce){
  .hero-ring,.btn-neon,.hero-glow,.sec-label{animation:none!important}
}