/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(8, 133, 67, 0.15), rgba(210, 149, 97, 0.1), rgba(8, 133, 67, 0.15));
    background-size: 200% 100%;
    animation: gradientAnimation 8s ease infinite;
  }
  
  @keyframes gradientAnimation {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 0%;
    }
    100% {
      background-position: 0% 0%;
    }
  }
  
  .floating-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 1;
  }
  
  .hero-text {
    text-align: center;
    max-width: 36rem;
  }
  
  .hero-text h1 {
    margin-bottom: 1.5rem;
  }
  
  .hero-text p {
    font-size: 1.125rem;
    color: var(--dark-light);
    margin-bottom: 2rem;
  }
  
  .hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .hero-image {
    position: relative;
    width: 100%;
    max-width: 30rem;
  }
  
  .image-wrapper {
    position: relative;
  }
  
  .image-glow {
    position: absolute;
    inset: -1rem;
    background: radial-gradient(circle, rgba(8, 133, 67, 0.2), rgba(210, 149, 97, 0.2));
    border-radius: 50%;
    filter: blur(2rem);
  }
  
  .image-container {
    position: relative;
    background-color: var(--light);
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
  }
  
  .image-container img {
    border-radius: var(--border-radius);
    width: 100%;
    height: auto;
  }
  
  .stat-card {
    position: absolute;
    background-color: var(--light);
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .stat-card-top-left {
    top: -1.5rem;
    left: -1.5rem;
  }
  
  .stat-card-bottom-right {
    bottom: -1.5rem;
    right: -1.5rem;
  }
  
  .stat-card-top-right {
    top: -1.5rem;
    right: -1.5rem;
  }

  .stat-card-bottom-middle {
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    }


  .stat-icon {
    background-color: var(--primary-light);
    color: var(--primary);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
  }
  
  .stat-title {
    font-weight: 600;
    font-size: 0.875rem;
  }
  
  .stat-subtitle {
    font-size: 0.75rem;
    color: var(--dark-light);
  }
  
  .trusted-by {
    margin-top: 5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(15, 3, 38, 0.1);
    text-align: center;
  }
  
  .trusted-by p {
    font-size: 0.875rem;
    color: var(--dark-light);
    margin-bottom: 1.5rem;
  }
  
  /* Features Section */
  .features {
    background-color: var(--light);
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .feature-card {
    background-color: var(--light);
    border: 1px solid var(--secondary);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
  }
  
  .feature-card:hover {
    box-shadow: var(--shadow-lg);
  }
  
  .feature-icon {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  .feature-card p {
    color: var(--dark-light);
  }
  
  /* How It Works Section */
  .how-it-works {
    background-color: var(--background);
  }
  
  .workflow-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  
  .workflow-image {
    position: relative;
    order: 1;
  }
  
  .workflow-steps {
    order: 2;
  }
  
  .step {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .step-number {
    width: 3rem;
    height: 3rem;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
  }
  
  .step-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  .step-content p {
    color: var(--dark-light);
  }
  
  .workflow-cta {
    margin-top: 1.5rem;
  }
  
  /* Comparison Section */
  .comparison {
    background-color: var(--light);
  }
  
  .comparison-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    order: 2;
  }
  
  .stat-box {
    background-color: var(--light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
  }
  
  .highlight-box {
    background-color: var(--primary-light);
  }
  
  .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
  }
  
  .stat-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dark-light);
  }
  
  .comparison-benefits {
    grid-column: span 2;
    background-color: var(--light);
    border: 1px solid rgba(210, 149, 97, 0.3);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-top: 1.5rem;
  }
  
  .comparison-benefits h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .comparison-benefits ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .comparison-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .comparison-benefits li::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23088543' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .comparison-image {
    position: relative;
    order: 1;
  }
  
  /* Testimonial Section */
  .testimonial {
    background-color: var(--background);
  }
  
  .testimonial-card {
    max-width: 64rem;
    margin: 0 auto;
    background-color: var(--light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
  }
  
  .testimonial-company {
    background-color: var(--primary-light);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .company-logo {
    background-color: var(--light);
    border-radius: 50%;
    padding: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .company-logo img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .testimonial-company h3 {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .company-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
  }
  
  .company-stat {
    background-color: var(--light);
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
  }
  
  .company-stat .stat-value {
    font-size: 1.5rem;
  }
  
  .company-stat .stat-label {
    font-size: 0.75rem;
  }
  
  .testimonial-quote {
    padding: 2rem;
  }
  
  .quote-icon {
    color: var(--primary);
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .testimonial-quote blockquote {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  
  .testimonial-quote footer {
    color: var(--dark-light);
  }
  
  .testimonial-quote footer div:first-child {
    font-weight: 600;
  }
  
  /* Benefits Section */
  .benefits {
    background-color: var(--light);
  }
  
  .benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
  
  .benefit-card {
    background-color: var(--light);
    border: 1px solid var(--secondary);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .benefit-icon {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .benefit-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  .benefit-card p {
    color: var(--dark-light);
    flex-grow: 1;
  }
  
  .banks-compatibility {
    background-color: var(--background);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .banks-text h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .banks-text p {
    color: var(--dark-light);
    margin-bottom: 1.5rem;
  }
  
  .banks-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .banks-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .banks-list li::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23088543' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .banks-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  .bank-logo {
    background-color: var(--light);
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .bank-logo img {
    height: 2rem;
    width: auto;
  }
  
  /* Media Queries */
  @media (min-width: 768px) {
    .hero-content {
      flex-direction: row;
      align-items: center;
      text-align: left;
    }
  
    .hero-text {
      text-align: left;
    }
  
    .hero-cta {
      justify-content: flex-start;
    }
  
    .features-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .workflow-content {
      flex-direction: row;
    }
  
    .workflow-image {
      order: 0;
      width: 50%;
    }
  
    .workflow-steps {
      order: 1;
      width: 50%;
    }
  
    .comparison-content {
      flex-direction: row;
    }
  
    .stats-grid {
      order: 0;
      width: 50%;
    }
  
    .comparison-image {
      order: 1;
      width: 50%;
    }
  
    .testimonial-card {
      flex-direction: row;
    }
  
    .testimonial-company {
      width: 40%;
    }
  
    .testimonial-quote {
      width: 60%;
    }
  
    .benefits-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .banks-compatibility {
      flex-direction: row;
    }
  
    .banks-text {
      width: 50%;
    }
  
    .banks-logos {
      width: 50%;
    }
  
    .comparison-benefits ul {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (min-width: 1024px) {
    .benefits-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .banks-list {
      grid-template-columns: repeat(2, 1fr);
    }
  }