/* ── MATRIX + CURSOR CANVAS ── */
#matrix-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.18;
  mix-blend-mode:screen;
}
#cursor-fx{
  position:fixed;inset:0;z-index:9996;pointer-events:none;
}
body.fx-off #matrix-bg{opacity:0;transition:opacity .5s}
body.fx-off #cursor-fx{display:none}

.fx-toggle{
  background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.35);
  color:var(--cyan);padding:7px 14px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:2px;cursor:pointer;transition:all .25s;
  display:flex;align-items:center;gap:7px;margin-left:12px;
}
.fx-toggle:hover,.fx-toggle.active{
  background:rgba(0,212,255,.15);box-shadow:0 0 20px rgba(0,212,255,.35);
  border-color:var(--cyan);
}
.fx-dot{
  width:6px;height:6px;border-radius:50%;background:var(--text3);
  transition:background .3s,box-shadow .3s;
}
.fx-toggle.active .fx-dot{
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
  animation:blink 1s infinite;
}

/* cursor particle burst */
.cursor-burst{
  position:fixed;pointer-events:none;z-index:9997;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  color:var(--cyan);text-shadow:0 0 8px var(--cyan);
  animation:burstUp .7s ease forwards;
}
@keyframes burstUp{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--bx,0),var(--by,-30px)) scale(.5)}
}

/* ── SCROLL-DRIVEN CARDS ── */
.svc-grid,.cases-grid,.pricing-grid,.process-grid,.about-grid,.team-grid{
  perspective:1600px;perspective-origin:50% 50%;
}
.scroll-card{
  --sy:0px;--sx:0px;--rx:0deg;--ry:0deg;--sc:1;
  --hx:0deg;--hy:0deg;--hl:0px;--hz:0px;--hsc:1;
  --glare-x:50%;--glare-y:50%;
  transform:perspective(1400px) translate3d(var(--sx),calc(var(--sy) - var(--hl)),var(--hz)) rotateX(calc(var(--rx) + var(--hx))) rotateY(calc(var(--ry) + var(--hy))) scale(calc(var(--sc) * var(--hsc)))!important;
  transition:transform .1s linear,box-shadow .35s ease,border-color .35s ease,filter .35s ease;
  will-change:transform;
  transform-style:preserve-3d;
  opacity:1!important;
  filter:brightness(1)!important;
}
.scroll-card.reveal,.scroll-card.reveal.visible{
  transform:perspective(1400px) translate3d(var(--sx),calc(var(--sy) - var(--hl)),var(--hz)) rotateX(calc(var(--rx) + var(--hx))) rotateY(calc(var(--ry) + var(--hy))) scale(calc(var(--sc) * var(--hsc)))!important;
  opacity:1!important;
  filter:brightness(1)!important;
}
.scroll-card:not(.scroll-active) .scroll-card-inner{
  opacity:0;
  transform:translateY(48px) translateZ(0)!important;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.scroll-card.scroll-active .scroll-card-inner{
  opacity:1;
  transform:translateZ(24px)!important;
}
.scroll-card.scroll-active{
  filter:brightness(1.05);
}
.scroll-card.scroll-focus{
  --sc:1.04;
  border-color:rgba(0,212,255,.55)!important;
  box-shadow:
    0 30px 90px rgba(124,58,237,.35),
    0 0 50px rgba(0,212,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 40px rgba(0,212,255,.04)!important;
  z-index:5;
}
.scroll-card.scroll-focus::before{opacity:1!important}
.scroll-card.scroll-passed{filter:brightness(.85) saturate(.9)}

.scroll-card.scroll-hover{
  z-index:8;
  border-color:rgba(0,212,255,.65)!important;
  box-shadow:
    0 35px 100px rgba(124,58,237,.4),
    0 0 60px rgba(0,212,255,.22),
    inset 0 1px 0 rgba(255,255,255,.1)!important;
}
.scroll-card.scroll-hover::before{
  opacity:1!important;
  background:radial-gradient(circle at var(--glare-x) var(--glare-y),rgba(255,255,255,.14),transparent 55%)!important;
}

.scroll-card-inner{
  position:relative;z-index:1;transition:transform .15s ease-out;
  transform:translateZ(20px);
  transform-style:preserve-3d;
}
.scroll-card.scroll-focus .scroll-card-inner{transform:translateZ(36px)}
.scroll-card.scroll-hover .scroll-card-inner{transform:translateZ(44px)}

.section-inner{perspective:1200px}
.sec-title,.sec-sub{transition:transform .15s linear,opacity .15s linear}

.holo-stat.scroll-card,.ts.scroll-card{--sc:1}
.holo-stat.scroll-focus,.ts.scroll-focus{--sc:1.06}

@media(max-width:768px){
  .hero-frame{inset:24px}
  .frame-corner{width:24px;height:24px}
  .hero-hud{font-size:9px;flex-wrap:wrap;justify-content:center;gap:6px}
  .hero-rings{width:min(85vw,360px);height:min(85vw,360px);left:50%}
}

@media(prefers-reduced-motion:reduce){
  .scroll-card{transform:none!important;transition:none!important}
}

.cyber-grid{
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 20%,transparent 75%);
  animation:gridDrift 20s linear infinite;
}
@keyframes gridDrift{to{background-position:60px 60px}}

.noise{
  position:fixed;inset:0;z-index:9991;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noiseShift .5s steps(2) infinite;
}
@keyframes noiseShift{0%{transform:translate(0,0)}100%{transform:translate(-2px,1px)}}

#spotlight{
  position:fixed;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(0,212,255,.07) 0%,rgba(124,58,237,.04) 30%,transparent 65%);
  transform:translate(-50%,-50%);transition:opacity .3s;opacity:0;
}
body.spotlight-on #spotlight{opacity:1}

#scroll-progress-glow{
  position:fixed;top:0;left:0;height:6px;width:0;z-index:9998;pointer-events:none;
  background:var(--gradient-h);filter:blur(8px);opacity:.6;transition:width .08s linear;
}

/* ── HERO HUD ── */
.hero-frame{position:absolute;inset:48px;pointer-events:none;z-index:3;opacity:.5}
.frame-corner{position:absolute;width:40px;height:40px;border-color:var(--cyan);border-style:solid;animation:framePulse 3s ease-in-out infinite}
.fc-tl{top:0;left:0;border-width:2px 0 0 2px}
.fc-tr{top:0;right:0;border-width:2px 2px 0 0;animation-delay:.5s}
.fc-bl{bottom:0;left:0;border-width:0 0 2px 2px;animation-delay:1s}
.fc-br{bottom:0;right:0;border-width:0 2px 2px 0;animation-delay:1.5s}
@keyframes framePulse{0%,100%{opacity:.3;box-shadow:0 0 0 transparent}50%{opacity:1;box-shadow:0 0 20px rgba(0,212,255,.4)}}

.hero-hud{
  position:absolute;top:88px;right:48px;z-index:4;display:flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:1.5px;
  padding:8px 14px;border:1px solid rgba(0,212,255,.2);background:rgba(0,0,0,.5);
  backdrop-filter:blur(12px);animation:hudFade 1.2s ease .8s both;
}
@keyframes hudFade{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.hud-sep{color:var(--purple);font-size:8px;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hud-live{color:var(--cyan);display:flex;align-items:center;gap:6px}
.pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:blink 1.2s infinite}

/* ── HOLO STATS ── */
.holo-stat{
  padding:16px 20px;border:1px solid rgba(0,212,255,.15);background:rgba(0,212,255,.03);
  backdrop-filter:blur(8px);position:relative;overflow:hidden;transition:all .35s;
}
.holo-stat::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.08),transparent);
  animation:statSweep 4s ease-in-out infinite;
}
.holo-stat:hover{border-color:rgba(0,212,255,.4);box-shadow:0 0 30px rgba(0,212,255,.15);transform:translateY(-3px)}
@keyframes statSweep{0%,100%{left:-100%}50%{left:100%}}

/* ── HOLO CARDS ── */
.holo-card{
  position:relative;transform-style:preserve-3d;
  transition:transform .15s ease-out,box-shadow .3s,border-color .3s!important;
}
.holo-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,rgba(0,212,255,.06) 0%,transparent 40%,rgba(124,58,237,.06) 100%);
  opacity:0;transition:opacity .3s;
}
.holo-card:hover::before{opacity:1}
.holo-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),var(--magenta),transparent);
  animation:scanH 3s linear infinite;opacity:.6;
}
@keyframes scanH{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.holo-card .card-glow{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  background:var(--gradient);opacity:0;filter:blur(20px);transition:opacity .3s;
}
.holo-card:hover .card-glow{opacity:.15}

.holo-featured{
  animation:featuredPulse 3s ease-in-out infinite;
  border-color:rgba(124,58,237,.6)!important;
}
@keyframes featuredPulse{
  0%,100%{box-shadow:0 0 30px rgba(124,58,237,.35),0 0 60px rgba(0,212,255,.1),inset 0 0 40px rgba(0,212,255,.04)}
  50%{box-shadow:0 0 50px rgba(0,212,255,.45),0 0 80px rgba(124,58,237,.25),inset 0 0 60px rgba(124,58,237,.08)}
}

/* ── BUTTONS ── */
.btn-neon,.btn-outline,.price-cta,.nav-cta{position:relative;overflow:hidden}
.btn-shine{
  position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);animation:btnShine 3s ease-in-out infinite;
}
@keyframes btnShine{0%,100%{left:-100%}50%{left:150%}}

.magnetic{transition:transform .2s cubic-bezier(.16,1,.3,1)!important}

/* ── NAV LINKS ACTIVE ── */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;bottom:2px;left:14px;right:14px;height:1px;
  background:var(--gradient-h);transform:scaleX(0);transition:transform .3s;
  box-shadow:0 0 8px rgba(0,212,255,.6);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--cyan)!important;text-shadow:0 0 12px rgba(0,212,255,.5)}

.logo-hex{animation:logoSpin 12s linear infinite}
@keyframes logoSpin{0%,90%{transform:rotate(0)}95%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}

/* ── SECTIONS ── */
.section{position:relative}
.section::before{
  content:'';position:absolute;top:0;left:48px;right:48px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.3),rgba(124,58,237,.3),transparent);
}
.section-inner{position:relative}
.section-inner::after{
  content:attr(data-section-id);position:absolute;top:-8px;right:0;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(0,212,255,.15);
  letter-spacing:3px;pointer-events:none;
}

.sec-title.gradient{
  background-size:200% auto;
  animation:gradientText 4s linear infinite;
}
@keyframes gradientText{0%{background-position:0% center}100%{background-position:200% center}}

/* ── CASE SCAN ── */
.case-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(transparent 40%,rgba(0,212,255,.06) 50%,transparent 60%);
  animation:caseScan 4s ease-in-out infinite;pointer-events:none;
}
@keyframes caseScan{0%,100%{transform:translateY(-100%)}50%{transform:translateY(100%)}}

.case-status-live{animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 15px rgba(0,212,255,.2)}50%{box-shadow:0 0 25px rgba(0,212,255,.5)}}

/* ── PROCESS ── */
.process-grid::after{
  content:'';position:absolute;top:22px;left:0;width:30px;height:2px;
  background:var(--cyan);box-shadow:0 0 15px var(--cyan);
  animation:processDot 6s ease-in-out infinite;
}
@keyframes processDot{0%{left:0;opacity:1}25%{left:25%;opacity:.8}50%{left:50%;opacity:1}75%{left:75%;opacity:.8}100%{left:calc(100% - 30px);opacity:1}}

.proc-num{animation:procFloat 3s ease-in-out infinite}
.proc-step:nth-child(2) .proc-num{animation-delay:.5s}
.proc-step:nth-child(3) .proc-num{animation-delay:1s}
.proc-step:nth-child(4) .proc-num{animation-delay:1.5s}
@keyframes procFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ── MARQUEE GLOW ── */
/* ── MARQUEE 3D ── */
.marquee-wrap::before,.marquee-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:140px;z-index:3;pointer-events:none;
}
.marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--bg2) 30%,transparent)}
.marquee-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg2) 30%,transparent)}

/* ── TEAM CARD ── */
.team-card.holo-card::after{display:none}

/* ── CTA ── */
.cta-bg-text{animation:ctaDrift 8s ease-in-out infinite}
@keyframes ctaDrift{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-48%,-52%) scale(1.02)}}
.cta-check{transition:transform .2s,padding-left .2s}
.cta-check:hover{transform:translateX(8px);padding-left:4px}

/* ── FOOTER ── */
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--gradient-h);background-size:200% auto;
  animation:gradientText 3s linear infinite;
}

/* ── REVEAL UPGRADES ── */
.reveal{transform:translateY(50px) scale(.97);filter:blur(6px)}
.reveal.visible{transform:translateY(0) scale(1);filter:blur(0)}
.reveal-scale{transform:scale(.9);opacity:0;transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal-scale.visible{transform:scale(1);opacity:1}

/* ── CURSOR TRAIL ── */
.cursor-trail{
  position:fixed;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:9997;
  background:var(--cyan);opacity:.6;animation:trailFade .8s ease forwards;
}
@keyframes trailFade{to{opacity:0;transform:scale(0)}}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .holo-card{transform:none!important}
}