

@media (min-width: 1200px) {
  #section-blocks {
    background-image: linear-gradient(to bottom, #FFF 50%, #000 50%);
  }

  .section-blocks-imgs img:nth-child(1) {
    margin-left: 5%;
  }

  .section-blocks-imgs img:nth-child(2) {
    right: 5%;
  }
}

@media (min-width: 992px) {
  .section-blocks-imgs img:nth-child(2) {
    display: block;

  .intro-lead {
    font-size: 1.3125rem !important;
  }
}

@media (max-width: 1199.98px){
  .pricing-card-featured{
    transform:none;
  }
  .stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



@media (max-width: 991.98px){
  .topbar2 {
        gap: 1rem;
    }

    .topbar-right {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
  .section{
    padding:88px 0;
  }

  .stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ai-grid{
    grid-template-columns:1fr;
  }

  .logo-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .sidebar{
    min-height:auto;
  }

  .jobs-wrap{
    padding:0 28px 28px;
  }

  .jobs-scroll{
    max-height:420px;
  }

  .hero-metrics{
    margin-top:20px;
  }

  .main-area{
    padding:20px;
  }

  .jobs-wrap{
    padding:0 20px 20px;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-card{
    padding:22px;
  }

  .hero-card h2{
    font-size:1.55rem;
  }
}



@media (max-width: 980px){
  .grid{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
  
  .featured{ 
    transform: none;
  }
}


@media (max-width: 767.98px){
  .flow-card {
    padding: 1.2rem 1rem 1.1rem;
    border-radius: 18px;
  }

  .flow-optional-card {
    padding: 1.4rem;
    border-radius: 22px;
  }

  .flow-card-title {
    font-size: 1.02rem;
  }

  .flow-card-text,
  .flow-optional-text {
    font-size: .93rem;
  }

  .flow-optional-icons span {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .flow-optional-icons i {
    font-size: 1.25rem;
  }
  
  .stats-panel{
    padding: 18px;
    border-radius: 22px;
  }

  .stats-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stat-box{
    padding: 22px 18px;
    border-radius: 18px;
  }

  .stat-icon{
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
  }

  .stat-icon i{
    font-size: 1.35rem;
  }

  .stat-prefix,
  .stat-suffix{
    font-size: 1.1rem;
    margin-top: 5px;
  }
  .pricing-card{
    padding:24px 20px 22px;
    border-radius:20px;
  }

  .pricing-metrics{
    grid-template-columns:1fr 1fr;
  }

  .trial-strip{
    padding:12px;
  }

  .trial-strip-item{
    width:100%;
    justify-content:center;
  }
  .section{
    padding:66px 0;
  }

  .hero{
    padding:64px 0 84px;
  }

  .hero-title{
    max-width:none;
  }

  .hero-actions .btn{
    width:100%;
  }

  .trial-grid{
    grid-template-columns:1fr;
  }

  .stats-grid{
    grid-template-columns:1fr;
  }

  .logo-row{
    grid-template-columns:1fr;
  }

  .ai-panel,
  .cta-panel,
  .side-panel,
  .signup-body,
  .testimonial-card,
  .export-card,
  .benefit-card{
    padding:22px;
  }

  .topbar .container{
    justify-content:center !important;
  }

  .topbar-right{
    width:100%;
    justify-content:center;
  }

  #leadModal .modal-body{
    padding:18px;
  }

  #leadModal .modal-header,
  #leadModal .modal-footer{
    padding-left:18px;
    padding-right:18px;
  }

  .lead-stat-grid{
    grid-template-columns:1fr;
  }

  #detailedAiModal .modal-body{
      padding:18px;
    }

    #detailedAiModal .modal-header,
    #detailedAiModal .modal-footer{
      padding-left:18px;
      padding-right:18px;
    }

    .dai-panel{
      padding:18px;
    }

    .dai-status-badge{
      margin-top:10px;
    }
}

@media (max-width: 575.98px){
  .pricing-toggle{
    width:100%;
    flex-direction:column;
    border-radius:22px;
    padding:10px;
  }

  .pricing-toggle-btn{
    width:100%;
  }
}

@media (max-width: 560px){
  .wrap{ padding-top: 42px; }
  .grid{ grid-template-columns: 1fr; }
  .card{ padding: 16px; }
  .amount{ font-size: 32px; }
}
