/*=================================
        ESTATÍSTICAS
=================================*/

.stats-section {

      padding: 90px 0 90px 0;

      background: linear-gradient(135deg, #08152d, #173caa, #295cff);

}

.stat-card {

      background: #fff;

      border-radius: 24px;

      padding: 30px 30px;

      text-align: center;

      height: 100%;

      transition: .4s;

      border: 1px solid #edf2f7;

      box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

}

.stat-card:hover {

      transform: translateY(-8px);

      box-shadow: 0 25px 60px rgba(37, 99, 235, .15);

}

.stat-card i {

      font-size: 50px;

      color: #2563eb;

      margin-bottom: 20px;

}

.stat-card h2 {

      font-size: 3rem;

      font-weight: 800;

      color: #111827;

}

.stat-card p {

      margin-top: 10px;

      color: #6b7280;

      font-size: 17px;

      font-weight: 600;

}

@media(max-width:768px) {

      .stats-section {

            padding: 70px 0;

      }

      .stat-card {

            padding: 30px 20px;

      }

      .stat-card h2 {

            font-size: 2.3rem;

      }

}


/*=================================================
        DASHBOARD INTERATIVO
==================================================*/

.dashboard-section {

      padding: 100px 0;

      background: #f7f9fc;

}

.section-title-dashboard {

      font-size: clamp(2rem, 4vw, 1rem);

      font-weight: 600;

      margin: 10px 0;

}

.section-description {

      font-size: 18px;

      color: #6b7280;

      margin-bottom: 30px;

}

.dashboard-menu {

      display: flex;

      flex-direction: column;

      gap: 15px;

}

.dash-btn {

      border: none;

      background: #fff;

      border-radius: 18px;

      padding: 18px 25px;

      text-align: left;

      font-size: 18px;

      font-weight: 700;

      transition: .35s;

      box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

}

.dash-btn i {

      margin-right: 15px;

      color: #2563eb;

}

.dash-btn:hover {

      transform: translateX(10px);

}

.dash-btn.active {

      background: #2563eb;

      color: #fff;

}

.dash-btn.active i {

      color: #fff;

}

.dashboard-preview {

      background: #fff;

      border-radius: 24px;

      padding: 20px;

      box-shadow: 0 30px 70px rgba(0, 0, 0, .12);

}

.dashboard-preview img {

      width: 100%;

      border-radius: 16px;

      transition: .4s;

}

@media(max-width:991px) {

      .dashboard-preview {

            margin-top: 50px;

      }

}


/*==================================================
        POR QUE ESCOLHER
==================================================*/

.benefits-section {

      padding: 120px 0;

      background: linear-gradient(180deg, #f4f4f5, #c3c1db);

}

.benefit-card {

      background: #fff;

      border-radius: 24px;

      padding: 40px 30px;

      text-align: center;

      height: 100%;

      position: relative;

      overflow: hidden;

      border: 1px solid #edf2f7;

      transition: .4s;

}

.benefit-card::before {

      content: "";

      position: absolute;

      top: 0;

      left: -100%;

      width: 100%;

      height: 4px;

      background: linear-gradient(90deg, #2563eb, #06b6d4);

      transition: .4s;

}

.benefit-card:hover::before {

      left: 0;

}

.benefit-card:hover {

      transform: translateY(-12px);

      box-shadow: 0 30px 70px rgba(37, 99, 235, .18);

}

.benefit-icon {

      width: 90px;

      height: 90px;

      margin: auto;

      border-radius: 22px;

      display: flex;

      justify-content: center;

      align-items: center;

      background: linear-gradient(135deg, #2563eb, #3b82f6);

      margin-bottom: 25px;

      transition: .35s;

}

.benefit-card:hover .benefit-icon {

      transform: rotate(-8deg) scale(1.08);

}

.benefit-icon i {

      color: #fff;

      font-size: 42px;

}

.benefit-card h4 {

      font-size: 22px;

      font-weight: 800;

      margin-bottom: 15px;

      color: #111827;

}

.benefit-card p {

      color: #6b7280;

      line-height: 1.8;

      margin: 0;

}

@media(max-width:768px) {

      .benefits-section {

            padding: 80px 0;

      }

}


/*====================================================
            COMO FUNCIONA
====================================================*/

.how-section {

      padding: 120px 0;

      background: #f8fbff;

      position: relative;

}

.step-card {

      position: relative;

      background: #fff;

      border-radius: 24px;

      padding: 45px 30px;

      text-align: center;

      height: 100%;

      transition: .35s;

      overflow: hidden;

      border: 1px solid #edf2f7;

}

.step-card:hover {

      transform: translateY(-12px);

      box-shadow: 0 30px 60px rgba(37, 99, 235, .15);

}

.step-number {

      position: absolute;

      top: 15px;

      right: 20px;

      font-size: 70px;

      font-weight: 900;

      color: #eef4ff;

      line-height: 1;

}

.step-icon {

      width: 90px;

      height: 90px;

      margin: auto;

      border-radius: 22px;

      display: flex;

      justify-content: center;

      align-items: center;

      background: linear-gradient(135deg, #2563eb, #3b82f6);

      margin-bottom: 30px;

}

.step-icon i {

      color: #fff;

      font-size: 42px;

}

.step-card h4 {

      font-weight: 800;

      margin-bottom: 15px;

}

.step-card p {

      color: #6b7280;

      line-height: 1.8;

}

@media(max-width:768px) {

      .how-section {

            padding: 80px 0;

      }

      .step-number {

            font-size: 55px;

      }

}




/*==================================================
        DETALHES DAS FUNCIONALIDADES
==================================================*/

.feature-detail {
      padding: 80px 0;
}

.feature-detail:nth-child(even) {
      background: #f8fafc;
}

.feature-badge {
      display: inline-block;
      background: #2563eb;
      color: #fff;
      padding: 17px 18px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 20px;
}

.feature-detail h2 {
      font-size: 42px;
      font-weight: 800;
      margin-bottom: 20px;
      color: #0f172a;
}

.feature-detail p {
      font-size: 18px;
      line-height: 1.8;
      color: #64748b;
      margin-bottom: 25px;
}

.feature-list {
      list-style: none;
      padding: 0;
      margin: 0 0 30px;
}

.feature-list li {
      margin-bottom: 12px;
      font-size: 17px;
}

.feature-list i {
      color: #22c55e;
      margin-right: 10px;
}

.feature-video {

      overflow: hidden;

      border-radius: 20px;

      box-shadow: 0 20px 50px rgba(0, 0, 0, .15);

}

.feature-buttons {

      display: flex;

      gap: 15px;

      flex-wrap: wrap;

}

@media(max-width:991px) {

      .feature-detail {

            padding: 70px 0;

      }

      .feature-detail h2 {

            font-size: 32px;

            margin-top: 30px;

      }

}


/*==================================================
                    PLANOS
==================================================*/

.pricing-section {
      padding: 120px 0;
      background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
      position: relative;
      overflow: hidden;
}

.pricing-section::before {
      content: '';
      position: absolute;
      width: 500px;
      height: 500px;
      background: #2563eb15;
      border-radius: 50%;
      top: -250px;
      left: -180px;
}

.pricing-section::after {
      content: '';
      position: absolute;
      width: 420px;
      height: 420px;
      background: #22c55e10;
      border-radius: 50%;
      bottom: -220px;
      right: -180px;
}

.pricing-card {

      position: relative;

      background: #FFF;

      border-radius: 28px;

      padding: 45px 35px;

      height: 100%;

      text-align: center;

      border: 1px solid #edf2f7;

      box-shadow: 0 20px 50px rgba(0, 0, 0, .06);

      transition: .35s;

      overflow: hidden;

}

.pricing-card:hover {

      transform: translateY(-15px);

      box-shadow: 0 35px 70px rgba(37, 99, 235, .18);

}

.pricing-card h4 {

      font-size: 28px;

      font-weight: 800;

      margin-bottom: 20px;

      color: #0f172a;

}

.price {

      font-size: 64px;

      font-weight: 900;

      color: #2563eb;

      line-height: 1;

      margin: 25px 0;

}

.price small {

      font-size: 24px;

      vertical-align: top;

}

.price span {

      display: block;

      font-size: 18px;

      color: #64748b;

      font-weight: 600;

      margin-top: 12px;

}

.saving {

      display: inline-block;

      background: #ecfdf5;

      color: #15803d;

      font-weight: 700;

      padding: 8px 18px;

      border-radius: 40px;

      margin-bottom: 30px;

}

.pricing-card ul {

      list-style: none;

      padding: 0;

      margin: 35px 0;

      text-align: left;

}

.pricing-card li {

      margin-bottom: 18px;

      font-size: 17px;

      color: #475569;

      display: flex;

      align-items: center;

}

.pricing-card li i {

      color: #22c55e;

      font-size: 20px;

      margin-right: 12px;

}

.pricing-card .btn {

      border-radius: 50px;

      padding: 15px;

      font-weight: 700;

      transition: .3s;

}

.pricing-card .btn:hover {

      transform: scale(1.04);

}

/*============================
      CARD EM DESTAQUE
=============================*/

.featured {

      background: linear-gradient(135deg, #2563eb, #1d4ed8);

      color: #FFF;

      transform: scale(1.07);

      z-index: 10;

}

.featured h4,
.featured .price,
.featured li,
.featured span {

      color: #FFF;

}

.featured .saving {

      background: #ffffff22;

      color: #FFF;

}

.featured li i {

      color: #FFD43B;

}

.featured .btn {

      background: #FFF;

      color: #2563eb;

      border: none;

}

.featured .btn:hover {

      background: #f8fafc;

}



/*============================
      SELOS
=============================*/

.featured-badge {

      position: absolute;

      top: 18px;

      right: -45px;

      background: #FFD43B;

      color: #111827;

      padding: 8px 55px;

      font-size: 13px;

      font-weight: 800;

      transform: rotate(45deg);

      box-shadow: 0 10px 20px rgba(0, 0, 0, .15);

}

/*============================
      ITENS INCLUSOS
=============================*/

.pricing-guarantee {

      margin-top: 80px;

}

.pricing-guarantee h3 {

      font-weight: 800;

      margin-bottom: 35px;

}

.included {

      display: flex;

      flex-wrap: wrap;

      justify-content: center;

      gap: 15px;

}

.included span {

      background: #FFF;

      padding: 14px 22px;

      border-radius: 50px;

      box-shadow: 0 10px 25px rgba(0, 0, 0, .05);

      font-weight: 700;

      color: #334155;

}


/*==================================================
                PLANO VITALÍCIO
==================================================*/

.lifetime {

      background: linear-gradient(135deg, #0f172a, #1e293b);

      color: #FFF;

      border: none;

}

.lifetime h4,
.lifetime .price,
.lifetime li,
.lifetime .price span {

      color: #FFF;

}

.lifetime li i {

      color: #FFD43B;

}

.lifetime .saving {

      background: rgba(255, 255, 255, .15);

      color: #FFD43B;

}

.lifetime .btn {

      background: linear-gradient(135deg, #FFD43B, #F59E0B);

      color: #111827;

      font-weight: 700;

      border: none;

}

.lifetime .btn:hover {

      transform: scale(1.04);

      box-shadow: 0 15px 35px rgba(245, 158, 11, .35);

}

.lifetime-badge {

      background: linear-gradient(135deg, #FFD43B, #F59E0B);

      color: #111827;

      font-weight: 800;

}







/*============================
      RESPONSIVO
=============================*/

@media(max-width:991px) {

      .pricing-section {

            padding: 80px 0;

      }

      .featured {

            transform: none;

      }

      .pricing-card {

            margin-bottom: 25px;

      }

      .price {

            font-size: 50px;

      }

      .featured-badge {

            right: -55px;

            font-size: 11px;

      }

}

@media(max-width:576px) {

      .pricing-card {

            padding: 35px 25px;

      }

      .price {

            font-size: 42px;

      }

      .pricing-card h4 {

            font-size: 24px;

      }

      .included {

            flex-direction: column;

            align-items: center;

      }

      .included span {

            width: 100%;

            text-align: center;

      }

}






/*==================================================
            DEPOIMENTOS
==================================================*/

.testimonials-section {

      padding: 80px 0;

      background: #f8fafc;

}

.testimonial-card {

      background: #FFF;

      border-radius: 25px;

      padding: 40px;

      text-align: center;

      box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

      transition: .35s;

      height: 100%;

      position: relative;

}

.testimonial-card:hover {

      transform: translateY(-10px);

}

.quote {

      position: absolute;

      right: 25px;

      top: 20px;

      font-size: 40px;

      color: #2563eb20;

}

.testimonial-card img {

      width: 120px;

      height: 120px;

      border-radius: 50%;

      object-fit: cover;

      margin-bottom: 20px;

      border: 5px solid #2563eb15;

}

.testimonial-card h4 {

      font-weight: 800;

      margin-bottom: 5px;

}

.testimonial-card span {

      color: #64748b;

      display: block;

      margin-bottom: 15px;

}

.stars {

      color: #fbbf24;

      font-size: 22px;

      margin-bottom: 18px;

}

.testimonial-card p {

      color: #475569;

      line-height: 1.8;

}

@media(max-width:991px) {

      .testimonials-section {

            padding: 80px 0;

      }

      .testimonial-card {

            margin-bottom: 20px;

      }

}




/*==================================================
                    FAQ
==================================================*/

.faq-section {

      padding: 110px 0;

      background: #d8def0;

}

.faq-accordion {

      max-width: 900px;

      margin: auto;

}

.accordion-item {

      border: none;

      margin-bottom: 18px;

      border-radius: 18px !important;

      overflow: hidden;

      box-shadow: 0 12px 30px rgba(0, 0, 0, .06);

}

.accordion-button {

      background: #FFF;

      padding: 25px;

      font-size: 20px;

      font-weight: 700;

      color: #1e293b;

      box-shadow: none !important;

}

.accordion-button:not(.collapsed) {

      background: #2563eb;

      color: #FFF;

}

.accordion-button::after {

      filter: brightness(0);

}

.accordion-button:not(.collapsed)::after {

      filter: brightness(0) invert(1);

}

.accordion-body {

      padding: 25px;

      font-size: 17px;

      line-height: 1.8;

      color: #475569;

}

@media(max-width:768px) {

      .faq-section {

            padding: 80px 0;

      }

      .accordion-button {

            font-size: 17px;

            padding: 20px;

      }

      .accordion-body {

            font-size: 15px;

      }

}



/*==================================================
                CLIENTES
==================================================*/

.clients-section {

      padding: 110px 0;

      background: #ffffff;

      position: relative;

}

.clients-grid {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 35px;

}

.client-item {

      background: #FFF;

      border-radius: 22px;

      padding: 40px;

      display: flex;

      justify-content: center;

      align-items: center;

      height: 180px;

      border: 1px solid #edf2f7;

      box-shadow: 0 15px 40px rgba(0, 0, 0, .05);

      transition: .35s;

}

.client-item:hover {

      transform: translateY(-8px);

      box-shadow: 0 25px 60px rgba(37, 99, 235, .15);

}

.client-item img {

      width: 100%;

      max-width: 180px;

      max-height: 90px;

      object-fit: contain;

      filter: grayscale(100%);

      opacity: .65;

      transition: .35s;

}

.client-item:hover img {

      filter: none;

      opacity: 1;

      transform: scale(1.05);

}

@media(max-width:991px) {

      .clients-grid {

            grid-template-columns: repeat(2, 1fr);

      }

}

@media(max-width:768px) {

      .clients-section {

            padding: 80px 0;

      }

      .clients-grid {

            grid-template-columns: 1fr;

      }

      .client-item {

            height: 140px;

            padding: 25px;

      }

      .client-item img {

            max-width: 150px;

      }

}


.clients-footer {

      margin-top: 70px;

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 20px;

}

.clients-number {

      background: #f8fafc;

      border-radius: 20px;

      padding: 20px;

      text-align: center;

}

.clients-number h3 {

      color: #2563eb;

      font-size: 42px;

      font-weight: 900;

      margin-bottom: 10px;

}

.clients-number span {

      color: #64748b;

      font-weight: 600;

}

@media(max-width:991px) {

      .clients-footer {

            grid-template-columns: repeat(2, 1fr);

      }

}

@media(max-width:768px) {

      .clients-footer {

            grid-template-columns: 1fr;

      }

}


/*==================================================
                    FOOTER
==================================================*/

.footer-section {

      background: #08152d;

      color: #FFF;

      padding: 90px 0 30px;

}

.footer-logo {

      width: 70px;

}

.footer-title {

      font-weight: 800;

      margin-bottom: 15px;

}

.footer-text {

      color: rgba(255, 255, 255, .75);

      line-height: 1.8;

}

.footer-heading {

      font-weight: 700;

      margin-bottom: 25px;

      color: #FFF;

}

.footer-links {

      list-style: none;

      padding: 0;

      margin: 0;

}

.footer-links li {

      margin-bottom: 12px;

}

.footer-links a {

      color: rgba(255, 255, 255, .75);

      text-decoration: none;

      transition: .3s;

}

.footer-links a:hover {

      color: #4f8cff;

      padding-left: 5px;

}

.footer-contact {

      list-style: none;

      padding: 0;

}

.footer-contact li {

      margin-bottom: 15px;

      color: rgba(255, 255, 255, .75);

}

.footer-contact i {

      color: #4f8cff;

      margin-right: 10px;

}

.footer-social {

      margin-top: 20px;

      display: flex;

      gap: 12px;

}

.footer-social a {

      width: 42px;

      height: 42px;

      border-radius: 50%;

      background: rgba(255, 255, 255, .08);

      color: #FFF;

      display: flex;

      align-items: center;

      justify-content: center;

      text-decoration: none;

      transition: .3s;

}

.footer-social a:hover {

      background: #2563eb;

      transform: translateY(-4px);

}

.footer-divider {

      margin: 50px 0 25px;

      border-color: rgba(255, 255, 255, .1);

}

.footer-bottom {

      display: flex;

      justify-content: space-between;

      align-items: center;

      flex-wrap: wrap;

      gap: 10px;

}

.footer-bottom p {

      margin: 0;

      color: rgba(255, 255, 255, .6);

}

@media(max-width:768px) {

      .footer-section {

            text-align: center;

      }

      .footer-social {

            justify-content: center;

      }

      .footer-bottom {

            flex-direction: column;

      }

}