/* ═══════════════════════════════════════════════════════════
   OneTouch Express — Premium Animations & Mobile Polish
   ═══════════════════════════════════════════════════════════ */

/* ── Page Entry ─────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideLeft{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse-ring{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(106,27,154,.35)}70%{transform:scale(1);box-shadow:0 0 0 14px rgba(106,27,154,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(106,27,154,0)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes gradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes popIn{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes lineGrow{from{width:0}to{width:100%}}
@keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Scroll Reveal (add via JS) ─────────────────────────── */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.22,.68,0,1.2),transform .65s cubic-bezier(.22,.68,0,1.2);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .65s cubic-bezier(.22,.68,0,1.2),transform .65s cubic-bezier(.22,.68,0,1.2);}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity .65s cubic-bezier(.22,.68,0,1.2),transform .65s cubic-bezier(.22,.68,0,1.2);}
.reveal-right.visible{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1);}
.reveal-scale.visible{opacity:1;transform:scale(1);}

/* Stagger delays */
.delay-1{transition-delay:.08s!important}
.delay-2{transition-delay:.16s!important}
.delay-3{transition-delay:.24s!important}
.delay-4{transition-delay:.32s!important}
.delay-5{transition-delay:.40s!important}
.delay-6{transition-delay:.48s!important}

/* ── Hero Entrance ──────────────────────────────────────── */
.hero-animate-title{animation:fadeUp .8s cubic-bezier(.22,.68,0,1.2) both;}
.hero-animate-sub{animation:fadeUp .8s .15s cubic-bezier(.22,.68,0,1.2) both;}
.hero-animate-cta{animation:fadeUp .8s .28s cubic-bezier(.22,.68,0,1.2) both;}
.hero-animate-img{animation:slideLeft .9s .1s cubic-bezier(.22,.68,0,1.2) both;}
.hero-animate-badge{animation:popIn .6s .4s cubic-bezier(.34,1.56,.64,1) both;}

/* ── Card Hover Effects ─────────────────────────────────── */
.card-hover{transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease;}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(106,27,154,.15)!important;}

.card-hover-lift{transition:transform .22s ease,box-shadow .22s ease;}
.card-hover-lift:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 14px 36px rgba(106,27,154,.12)!important;}

.card-hover-glow{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.card-hover-glow:hover{transform:translateY(-3px);box-shadow:0 0 0 2px rgba(106,27,154,.3),0 16px 40px rgba(106,27,154,.14)!important;border-color:rgba(106,27,154,.3)!important;}

/* ── Button Animations ──────────────────────────────────── */
.btn-animate{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease!important;}
.btn-animate::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.12);transform:translateX(-100%) skewX(-15deg);transition:.4s ease;}
.btn-animate:hover::before{transform:translateX(120%) skewX(-15deg);}
.btn-animate:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)!important;}
.btn-animate:active{transform:translateY(0) scale(.97);}

/* ── Floating elements ──────────────────────────────────── */
.float-slow{animation:float 4s ease-in-out infinite;}
.float-med{animation:float 3s ease-in-out infinite;}
.float-fast{animation:float 2s ease-in-out infinite;}

/* ── Gradient text animation ────────────────────────────── */
.gradient-animate{background:linear-gradient(90deg,#4A148C,#E91E63,#7B1FA2,#F97316,#4A148C);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite;}

/* ── Stats counter ──────────────────────────────────────── */
.stat-counter{animation:countUp .6s ease both;}

/* ── Section divider line ───────────────────────────────── */
.section-line{height:3px;background:linear-gradient(90deg,transparent,#6A1B9A,#E91E63,transparent);animation:lineGrow .8s ease both;}

/* ── Nav link underline ─────────────────────────────────── */
.nav-link-hover{position:relative;}
.nav-link-hover::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#6A1B9A,#E91E63);border-radius:2px;transition:width .3s ease;}
.nav-link-hover:hover::after{width:100%;}

/* ── Image zoom ─────────────────────────────────────────── */
.img-zoom{overflow:hidden;border-radius:inherit;}
.img-zoom img{transition:transform .5s ease;}
.img-zoom:hover img{transform:scale(1.06);}

/* ── Pulse badge ────────────────────────────────────────── */
.pulse-badge{animation:pulse-ring 2s cubic-bezier(.455,.03,.515,.955) infinite;}

/* ── Loading skeleton ───────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}

/* ── Spin ───────────────────────────────────────────────── */
.spin-slow{animation:spinSlow 8s linear infinite;}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES — Universal
   ══════════════════════════════════════════════════════════ */

/* Smooth scroll globally */
html{scroll-behavior:smooth;}

/* Touch-friendly tap targets */
@media(max-width:768px){
  a,button,[role=button]{min-height:44px;min-width:44px;}

  /* Typography scale */
  h1{font-size:clamp(1.6rem,6vw,2.8rem)!important;}
  h2{font-size:clamp(1.3rem,5vw,2rem)!important;}
  h3{font-size:clamp(1.1rem,4vw,1.5rem)!important;}

  /* Container padding */
  .container{padding-left:16px!important;padding-right:16px!important;}

  /* Section padding */
  section,.section{padding:48px 0!important;}

  /* Grid collapses */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important;gap:14px!important;}
  .grid-2-md{grid-template-columns:1fr 1fr!important;}

  /* CTA buttons stack */
  .hero-cta,.cta-buttons{flex-direction:column!important;align-items:stretch!important;}
  .hero-cta a,.hero-cta button,.cta-buttons a,.cta-buttons button{width:100%!important;justify-content:center!important;text-align:center!important;}

  /* Cards */
  .plan-card,.ll-plan,.portal-card{padding:20px 16px!important;}

  /* Reduce animations on mobile for performance */
  .float-slow,.float-med,.float-fast{animation:none!important;}

  /* Hide decorative blobs on mobile */
  .blob,.decor-circle,.decor-shape{display:none!important;}

  /* Table overflow */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Navbar improvements */
  .nav-logo span{font-size:1rem!important;}

  /* Form inputs full width */
  input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{font-size:16px!important;} /* Prevents zoom on iOS */
}

@media(max-width:480px){
  .container{padding-left:12px!important;padding-right:12px!important;}
  section,.section{padding:36px 0!important;}
  .card-hover:hover,.card-hover-lift:hover,.card-hover-glow:hover{transform:none!important;} /* No hover on small touch screens */
}

/* Reduce motion for accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}