body {
     font-family: 'Inter', system-ui, sans-serif;
 }


 .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: opacity 0.7s cubic-bezier(.22, 1, .36, 1), transform 0.7s cubic-bezier(.22, 1, .36, 1);
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0);
 }


 .card-lift {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card-lift:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 40px rgba(79, 99, 242, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
 }


 .nav-scrolled {
     box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.97);
     backdrop-filter: blur(8px);
 }


 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s cubic-bezier(.22, 1, .36, 1), padding 0.3s ease;
 }

 .faq-answer.open {
     max-height: 400px;
 }

 .faq-chevron {
     transition: transform 0.3s ease;
 }

 .faq-chevron.rotate {
     transform: rotate(180deg);
 }


 @keyframes float-slow {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 @keyframes float-medium {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-7px);
     }
 }

 .float-slow {
     animation: float-slow 4s ease-in-out infinite;
 }

 .float-medium {
     animation: float-medium 3s ease-in-out infinite;
 }


 .timeline-connector {
     position: relative;
 }

 .timeline-connector::after {
     content: '';
     position: absolute;
     top: 50%;
     right: -32px;
     width: 32px;
     height: 2px;
     background: linear-gradient(90deg, #c7d2fe, #4f63f2);
 }

 @media (max-width: 768px) {
     .timeline-connector::after {
         top: auto;
         bottom: -32px;
         right: 50%;
         width: 2px;
         height: 32px;
         background: linear-gradient(180deg, #c7d2fe, #4f63f2);
     }
 }


 @keyframes pulse-down {

     0%,
     100% {
         opacity: 1;
         transform: translateY(0);
     }

     50% {
         opacity: .6;
         transform: translateY(4px);
     }
 }

 .arrow-pulse {
     animation: pulse-down 1.8s ease-in-out infinite;
 }


 .mobile-menu {
     transform: translateX(100%);
     transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
 }

 .mobile-menu.open {
     transform: translateX(0);
 }


 .pricing-highlight {
     position: relative;
     border: 2px solid #4f63f2;
 }

 .pricing-highlight::before {
     content: 'Most Popular';
     position: absolute;
     top: -14px;
     left: 50%;
     transform: translateX(-50%);
     background: #4f63f2;
     color: #fff;
     font-size: 0.75rem;
     font-weight: 600;
     padding: 4px 16px;
     border-radius: 9999px;
 }


 .stat-orange {
     border-left: 4px solid #ff7849;
 }

 .stat-cyan {
     border-left: 4px solid #38bdf8;
 }

 .stat-amber {
     border-left: 4px solid #f5a623;
 }

 .stat-teal {
     border-left: 4px solid #2dd4bf;
 }


 .btn-floating-whatsapp {
     position: fixed;
     bottom: 84px;
     right: 24px;
     z-index: 99;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     background-color: #25d366;
     color: white;
     border-radius: 9999px;
     box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
     transition: all 0.3s ease;
 }

 .btn-floating-whatsapp:hover {
     transform: scale(1.08) translateY(-2px);
     box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
     background-color: #20ba5a;
 }

 .btn-floating-whatsapp img {
     width: 26px;
     height: 26px;
 }


 .btn-scroll-top {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 99;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     background-color: #4f63f2;
     color: white;
     border-radius: 9999px;
     box-shadow: 0 4px 14px rgba(79, 99, 242, 0.3);
     transition: all 0.3s ease;
     opacity: 0;
     pointer-events: none;
     transform: translateY(10px);
 }

 .btn-scroll-top.visible {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
 }

 .btn-scroll-top:hover {
     background-color: #4338ca;
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(79, 99, 242, 0.4);
 }


 .scroll-icon-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0px;
     line-height: 0;
 }

 .scroll-icon-top {
     opacity: 0.55;
     margin-bottom: -6px;
 }

 .scroll-icon-bottom {
     opacity: 1;
 }

 @keyframes bounce-top {

     0%,
     100% {
         transform: translateY(0);
         opacity: 0.55;
     }

     50% {
         transform: translateY(-4px);
         opacity: 0.85;
     }
 }

 .btn-scroll-top:hover .scroll-icon-top {
     animation: bounce-top 0.7s ease-in-out infinite;
 }