/* Stable premium mobile layer. Visual-only: no layout hijacking, no sticky overlays, no forced nav states. */
.mobile-fx-layer,.mobile-scroll-progress{display:none}

@media (max-width:760px){
  html{background:#020610;scroll-padding-top:92px}
  body{background:#020610!important}

  /* Animated background */
  body::before{opacity:.34!important;background-size:32px 32px!important;animation:mvGrid 24s linear infinite}
  .ambient{opacity:.9;z-index:-4}
  .ambient span{filter:blur(82px)!important;animation:mvAmbient 13s ease-in-out infinite alternate;will-change:transform}
  .ambient span:nth-child(2){animation-delay:-4s}.ambient span:nth-child(3){animation-delay:-8s}
  .mobile-fx-layer{display:block;position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
  .mobile-fx-layer .fx-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(81,128,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(81,128,255,.04) 1px,transparent 1px);background-size:38px 38px;transform:translate3d(0,calc(var(--mobile-scroll,0px)*-.018),0);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);opacity:.65}
  .mobile-fx-layer .fx-aurora{position:absolute;width:82vw;height:82vw;border-radius:50%;filter:blur(64px);opacity:.2;mix-blend-mode:screen;will-change:transform}
  .mobile-fx-layer .fx-a{top:-8%;right:-34%;background:radial-gradient(circle,#364cff 0,#7a2cff 40%,transparent 72%);animation:mvAuroraA 14s ease-in-out infinite alternate}
  .mobile-fx-layer .fx-b{top:43%;left:-42%;background:radial-gradient(circle,#00baff 0,#1f4cff 42%,transparent 72%);animation:mvAuroraB 17s ease-in-out infinite alternate}
  .mobile-fx-layer .fx-c{bottom:-26%;right:-35%;background:radial-gradient(circle,#c62dff 0,#344cff 42%,transparent 72%);animation:mvAuroraC 16s ease-in-out infinite alternate}
  .mobile-fx-layer .fx-beam{position:absolute;top:7%;left:-65%;width:190%;height:22%;background:linear-gradient(108deg,transparent 34%,rgba(31,195,255,.025) 40%,rgba(65,113,255,.14) 49%,rgba(163,55,255,.12) 54%,transparent 62%);transform:rotate(-18deg);animation:mvBeam 12s ease-in-out infinite alternate}
  .mobile-fx-layer .fx-ring{position:absolute;width:330px;height:330px;border:1px solid rgba(97,126,255,.1);border-radius:50%;right:-225px;top:27%;box-shadow:0 0 0 36px rgba(87,56,255,.025),0 0 0 72px rgba(0,157,255,.018);animation:mvRing 26s linear infinite}
  .fx-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:#7dcfff;box-shadow:0 0 8px #4f7cff;opacity:.28;animation:mvParticle var(--dur,12s) linear infinite;animation-delay:var(--delay,0s)}
  .fx-particle:nth-child(3n){background:#c887ff;box-shadow:0 0 8px #8f47ff}

  .mobile-scroll-progress{display:block;position:fixed;top:0;left:0;right:0;height:2px;z-index:101;background:rgba(255,255,255,.025);pointer-events:none}
  .mobile-scroll-progress i{display:block;width:100%;height:100%;transform:scaleX(var(--page-progress,0));transform-origin:left;background:linear-gradient(90deg,#25cfff,#5267ff 52%,#ce4fff);box-shadow:0 0 14px rgba(80,101,255,.75)}

  /* Header stays functional; only visual polish */
  .site-header{top:max(10px,env(safe-area-inset-top));width:calc(100% - 20px)!important;height:64px!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(6,15,35,.84),rgba(2,8,20,.8))!important;border-color:rgba(100,144,255,.2)!important;box-shadow:0 14px 38px rgba(0,0,0,.34),0 0 34px rgba(56,74,255,.07)!important}
  .brand img{filter:drop-shadow(0 0 13px rgba(66,105,255,.42))}
  .menu-btn{border:1px solid rgba(104,150,255,.13);border-radius:13px;background:rgba(8,21,47,.5)}

  /* Hero */
  .hero{padding-top:108px!important}
  .hero h1 span{background-size:220% 100%!important;animation:mvText 5.5s ease-in-out infinite alternate}
  .hero-visual{perspective:850px}
  .browser-card{animation:mvFloat 6.5s ease-in-out infinite;will-change:transform}
  .browser-card::after{content:"";position:absolute;inset:0;background:linear-gradient(108deg,transparent 20%,rgba(255,255,255,.07) 43%,transparent 62%);transform:translateX(-145%);animation:mvSweep 8s ease-in-out infinite;pointer-events:none}
  .code-card{animation:mvBob 5.8s ease-in-out infinite reverse}
  .availability{animation:mvBob 6.2s ease-in-out infinite}
  .wave-a{animation:mvWave 9s ease-in-out infinite alternate}
  .orb{animation:mvOrb 7s ease-in-out infinite alternate}
  .hero-stats div{transition:border-color .25s,box-shadow .25s,transform .25s;background:linear-gradient(145deg,rgba(8,21,46,.7),rgba(4,11,26,.6))!important;border-radius:17px!important}
  .hero-stats div:active{transform:scale(.985);border-color:rgba(86,137,255,.28)!important;box-shadow:0 0 28px rgba(55,87,255,.12)}

  /* Cards and sections: animation without changing layout */
  .glass{border-color:rgba(98,145,255,.16)!important;box-shadow:0 22px 58px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.025)!important}
  .price-card,.portfolio-card,.feature-card,.step,.request-form-v2,.project-card,.chat-card{position:relative}
  .price-card::after,.portfolio-card::after,.request-form-v2::after,.project-card::after,.chat-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,transparent 26%,rgba(59,170,255,.035) 43%,rgba(162,62,255,.035) 52%,transparent 70%);background-size:220% 100%;animation:mvSurface 9s ease-in-out infinite alternate}
  .feature-card,.step{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
  .feature-card:active,.step:active{transform:scale(.985);border-color:rgba(87,139,255,.28)!important;box-shadow:0 15px 36px rgba(0,0,0,.24),0 0 24px rgba(55,80,255,.08)}
  .step::after{animation:mvStepGlow 6s ease-in-out infinite alternate!important}
  .portfolio-visual img{animation:mvZoom 12s ease-in-out infinite alternate}
  .about-visual img{animation:mvLogo 6.5s ease-in-out infinite;will-change:transform}
  .logo-halo{animation:mvHalo 5.5s ease-in-out infinite alternate!important}
  .chips span{transition:transform .2s,border-color .2s}.chips span:active{transform:scale(.96);border-color:rgba(90,145,255,.38)}

  /* Buttons */
  .btn{position:relative;isolation:isolate;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
  .btn:active{transform:scale(.975)!important}
  .btn-primary{animation:mvButtonGlow 4.5s ease-in-out infinite alternate}

  /* Form: keep wizard dimensions controlled by request-v2.css */
  .request-form-v2 input,.request-form-v2 select,.request-form-v2 textarea{transition:border-color .2s,box-shadow .2s,transform .2s!important}
  .request-form-v2 input:focus,.request-form-v2 select:focus,.request-form-v2 textarea:focus{transform:translateY(-1px)}
  .form-orb{animation:mvPulse 2.5s ease-in-out infinite!important}

  /* Customer status + chat */
  .project-body,.chat-body{background:#020610!important}
  .status-icon,.progress-track>div.active i{animation:mvStatus 3s ease-in-out infinite}
  .live-badge span,.chat-live span{animation:mvPulse 2.2s ease-in-out infinite}
  .notification-item,.msg .bubble{transition:transform .2s,border-color .2s}.notification-item:active{transform:scale(.992);border-color:rgba(90,145,255,.22)}
  .project-toast{animation:mvToast .35s ease both!important}
}

@keyframes mvGrid{to{background-position:32px 32px}}
@keyframes mvAmbient{from{transform:translate3d(-4%,0,0) scale(.94)}to{transform:translate3d(5%,7%,0) scale(1.08)}}
@keyframes mvAuroraA{from{transform:translate3d(0,0,0) scale(.92)}to{transform:translate3d(-16%,15%,0) scale(1.16)}}
@keyframes mvAuroraB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(21%,-9%,0) scale(.88)}}
@keyframes mvAuroraC{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-17%,-15%,0) scale(1.12)}}
@keyframes mvBeam{from{opacity:.24;transform:rotate(-18deg) translateX(-5%)}to{opacity:.66;transform:rotate(-14deg) translateX(7%)}}
@keyframes mvRing{to{transform:rotate(360deg)}}
@keyframes mvParticle{0%{transform:translate3d(0,12vh,0);opacity:0}12%{opacity:.38}82%{opacity:.24}100%{transform:translate3d(var(--drift,18px),-112vh,0);opacity:0}}
@keyframes mvText{from{background-position:0 50%}to{background-position:100% 50%}}
@keyframes mvFloat{0%,100%{transform:rotateY(-4deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateY(-2deg) rotateZ(-1deg) translateY(-8px)}}
@keyframes mvBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes mvSweep{0%,22%{transform:translateX(-145%)}58%,100%{transform:translateX(150%)}}
@keyframes mvWave{from{transform:rotate(-12deg) translateX(-2%)}to{transform:rotate(-9deg) translateX(4%)}}
@keyframes mvOrb{from{transform:scale(.92)}to{transform:scale(1.08)}}
@keyframes mvSurface{from{background-position:0 50%;opacity:.5}to{background-position:100% 50%;opacity:1}}
@keyframes mvStepGlow{from{transform:scale(.85);opacity:.12}to{transform:scale(1.22);opacity:.28}}
@keyframes mvZoom{from{transform:scale(1.01)}to{transform:scale(1.055)}}
@keyframes mvLogo{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-8px) rotate(.35deg)}}
@keyframes mvHalo{from{opacity:.14;transform:scale(.88)}to{opacity:.3;transform:scale(1.1)}}
@keyframes mvButtonGlow{from{box-shadow:0 0 24px rgba(55,76,255,.13)}to{box-shadow:0 0 38px rgba(47,111,255,.24),0 0 48px rgba(137,50,255,.08)}}
@keyframes mvPulse{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.18);opacity:1}}
@keyframes mvStatus{0%,100%{transform:scale(1);box-shadow:0 0 26px rgba(58,91,255,.2)}50%{transform:scale(1.035);box-shadow:0 0 40px rgba(51,129,255,.32),0 0 58px rgba(137,51,255,.12)}}
@keyframes mvToast{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
  body::before,.ambient span,.fx-aurora,.fx-beam,.fx-ring,.fx-particle,.browser-card,.code-card,.availability,.wave-a,.orb,.portfolio-visual img,.about-visual img,.logo-halo,.btn-primary,.form-orb,.status-icon,.progress-track>div.active i,.live-badge span,.chat-live span,.price-card::after,.portfolio-card::after,.request-form-v2::after,.project-card::after,.chat-card::after{animation:none!important}
  .mobile-fx-layer .fx-particle{display:none}
}