/* ═══════════════════════════════════════════════════════
 ZONEPH.COM — App Version Page Styles
═══════════════════════════════════════════════════════ */
.gradient-text{background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#9400d3,#ff0000);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow 4s linear infinite}
/* Phone Animation */
@keyframes phone-float{0%{transform:translateY(0) rotate(-2deg) scale(1)}25%{transform:translateY(-10px) rotate(-1deg) scale(1.01)}50%{transform:translateY(-18px) rotate(0deg) scale(1.02)}75%{transform:translateY(-10px) rotate(1deg) scale(1.01)}100%{transform:translateY(0) rotate(-2deg) scale(1)}}
.phone-animated{animation:phone-float 6s ease-in-out infinite;transition:transform .4s ease,box-shadow .4s ease}
.phone-animated:hover{animation-play-state:paused;transform:rotate(0deg) scale(1.05) translateY(-10px);box-shadow:30px 30px 60px rgba(0,0,0,0.25)!important}
/* Float Animations */
@keyframes float-straight{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.animate-float-straight{animation:float-straight 5s ease-in-out infinite}
.animate-float-delayed{animation:float-straight 5s ease-in-out 2s infinite}
/* Reveals */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.active{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease}
.reveal-left.active{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease}
.reveal-right.active{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .7s ease,transform .7s ease}
.reveal-scale.active{opacity:1;transform:scale(1)}
/* Scrollbar Hide */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
/* Step Numbers */
.step-num{transition:all .3s ease}
.step-num:hover{transform:scale(1.2);box-shadow:0 0 20px rgba(255,86,48,0.4)}