:root{--fx-x:50%;--fx-y:30%}

/* Living aurora background */
.fx-aurora{position:fixed;inset:-20%;z-index:-3;pointer-events:none;overflow:hidden;filter:blur(80px) saturate(130%);opacity:.55}
.fx-aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.fx-aurora span:nth-child(1){width:46vw;height:46vw;left:5%;top:0;background:radial-gradient(circle,rgba(82,124,255,.55),transparent 65%);animation:fxDrift1 22s ease-in-out infinite alternate}
.fx-aurora span:nth-child(2){width:40vw;height:40vw;right:0;top:15%;background:radial-gradient(circle,rgba(114,89,238,.5),transparent 65%);animation:fxDrift2 26s ease-in-out infinite alternate}
.fx-aurora span:nth-child(3){width:34vw;height:34vw;left:35%;top:55%;background:radial-gradient(circle,rgba(91,234,255,.3),transparent 65%);animation:fxDrift3 30s ease-in-out infinite alternate}
@keyframes fxDrift1{to{transform:translate(18vw,22vh) scale(1.2)}}
@keyframes fxDrift2{to{transform:translate(-22vw,30vh) scale(.85)}}
@keyframes fxDrift3{to{transform:translate(-14vw,-35vh) scale(1.15)}}

/* Cursor spotlight */
.fx-spot{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(600px circle at var(--fx-x) var(--fx-y),rgba(104,130,255,.09),transparent 45%);transition:opacity .4s}

/* Starfield canvas */
.fx-stars{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.7}

/* Hero entrance */
.hero-copy>*{opacity:0;transform:translateY(22px);animation:fxRise .9s cubic-bezier(.2,.75,.2,1) forwards}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.15s}
.hero-copy>*:nth-child(3){animation-delay:.28s}
.hero-copy>*:nth-child(4){animation-delay:.4s}
.hero-copy>*:nth-child(5){animation-delay:.5s}
.hero-copy>*:nth-child(6){animation-delay:.6s}
.hero-visual{opacity:0;animation:fxZoom 1.2s .25s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes fxRise{to{opacity:1;transform:none}}
@keyframes fxZoom{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}

/* Animated gradient text */
.gradient{background:linear-gradient(100deg,#7897ff 0%,#5beaff 25%,#9b85ff 50%,#7897ff 75%,#5beaff 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShine 7s linear infinite}
@keyframes fxShine{to{background-position:-250% 0}}

/* 3D tilt screen */
.screen-frame{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .5s;will-change:transform}
.screen-frame.fx-tilting{transition:transform .08s linear,box-shadow .3s}
.screen-frame:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.12),transparent 40%);opacity:0;transition:opacity .3s}
.screen-frame.fx-tilting:after{opacity:1}
.visual-badge{animation:fxFloat 6s ease-in-out infinite}
.visual-badge.two{animation-delay:-3s}
@keyframes fxFloat{50%{transform:translateY(-10px)}}
.orbit{animation:fxOrbit 40s linear infinite}
@keyframes fxOrbit{from{transform:rotate(-21deg) scaleY(.57)}to{transform:rotate(339deg) scaleY(.57)}}

/* Buttons: shimmer + magnetic */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary{background:linear-gradient(110deg,#527cff,#7259ee,#4fb8ff,#527cff) 0 0/300% 100%;animation:fxBtnFlow 8s ease infinite}
.btn-primary:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:fxSweep 3.6s ease-in-out infinite}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(160,180,255,.4),0 18px 45px rgba(87,99,255,.5),0 0 60px rgba(91,234,255,.2)}
@keyframes fxBtnFlow{50%{background-position:100% 0}}
@keyframes fxSweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn-secondary:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,148,18,.22),transparent 70%);opacity:0;transition:opacity .25s}
.btn-secondary:hover:after{opacity:1}
.btn:active{transform:scale(.97)}

/* Card spotlight border + glow */
.feature-card,.workflow,.faq-item,.download-panel,.requirements,.gallery-card,.warning-panel{--mx:50%;--my:50%}
.feature-card:after,.workflow:after,.download-panel:after,.gallery-card:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(124,160,255,.75),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.feature-card:hover:after,.workflow:hover:after,.download-panel:hover:after,.gallery-card:hover:after{opacity:1}
.workflow,.download-panel,.gallery-card{position:relative}
.feature-card:hover{box-shadow:0 20px 60px rgba(40,60,160,.35)}
.feature-icon{transition:transform .4s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.feature-card:hover .feature-icon{transform:translateY(-3px) rotate(-6deg) scale(1.08);box-shadow:0 0 30px rgba(91,234,255,.35)}

/* Reveal: richer motion */
.reveal{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.75,.2,1),filter .9s ease}
.reveal.visible{opacity:1;transform:none;filter:none}
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.3s}

/* Download panel animated border */
.download-panel{overflow:hidden}
.download-panel:before{content:"";position:absolute;inset:-60%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 70%,rgba(91,234,255,.25) 80%,rgba(120,151,255,.4) 85%,transparent 95%);animation:fxSpin 8s linear infinite}
.download-panel>*{position:relative;z-index:1}
.download-icon{animation:fxBounce 2.4s ease-in-out infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxBounce{50%{transform:translateY(6px)}}

/* Stats + header polish */
.stat-num{background:linear-gradient(180deg,#fff,#7897ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-header.scrolled{box-shadow:0 10px 40px rgba(0,0,0,.35)}
.top-line{background:linear-gradient(90deg,var(--cyan),#9b85ff,var(--blue2));height:2px}
.nav-links a{position:relative}
.nav-links a:after{content:"";position:absolute;left:12%;right:12%;bottom:4px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--blue));transform:scaleX(0);transition:transform .3s}
.nav-links a:hover:after{transform:scaleX(1)}
.gallery-card img{transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.gallery-card:hover img{transform:scale(1.03)}
.faq-item{transition:border-color .3s,background .3s,transform .3s}
.faq-item:hover{transform:translateX(4px)}
.faq-answer:not([hidden]){animation:fxRise .45s ease forwards;opacity:0;transform:translateY(-6px)}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .hero-copy>*,.hero-visual,.reveal{opacity:1!important;transform:none!important;filter:none!important}
  .fx-stars,.fx-spot{display:none}
}
@media (hover:none){.fx-spot{display:none}}