header {
    background-color: var(--color-primary);
  }
  

  
  header a {
    color: var(--color-on-dark);
    text-decoration: none;
    font-weight: 300;
  }
  
  header nav {
    display: flex;
    gap: 2rem;
  }
  
  header nav a {
    font-size: 1.6rem;
    transition: color 0.3s ease;
  }
  
  header nav a:hover,
  header nav a:focus-visible {
    color: var(--color-accent-coral);
  }
  
  header a img {
    height: 3rem;
    margin-inline-end: 0.5rem;
  }
  
  .logo {
   height: 4rem; 
   margin-right: 0.5rem;
  }
  .wave-divider {
    width: 25%;
    line-height: 0;
    overflow: hidden;
           /* This centers the container itself */

    margin-block: 1rem;
  }
  
  .wave-divider svg {
    display: block;
    width: 100%;
    height: auto;

  }
  
  /* Additional minimal CSS (all others come from your existing styles) */


  
  .hero {
    padding-block-end: clamp(4rem, 10vh, 8rem); /* or adjust as needed for more/less spacing */
  }
  .hero-section {
   /* min-height: 65rem;  or adjust as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-accent-green);
    color: var(--color-dark-heading);
  }
  
  .hero-section p {
    margin-block-end: 2rem;
  }

  
.hero__content {
    display: flex;
    gap: 4rem;
  
    flex-wrap: wrap; /* Allows stacking on smaller screens */
  }
  
  /* Image column */
  .hero__image {
    flex: 1 1 20rem;
    display: flex;              /* Make the container a flexbox */
    justify-content: flex-end;  /* Push the image to the right edge */
    align-items: center;        /* Center vertically */
    overflow: hidden;           /* Prevent overflow stretching */
  }
  
  .hero__image img {
    max-width: 90%;            /* Ensure it doesn’t exceed container */
    height: auto;               /* Maintain aspect ratio */
    border-radius: 0.4rem;
    object-fit: contain;        /* Prevents stretching */
  }
  
  /* Text column */
  .hero__text {
    flex: 1 1 40rem;

  }
  
  .dots {
    display: flex;
    gap: 0.5rem;
    color: var(--color-accent-yellow);
    font-size: 2rem;
    margin-block: 1rem;
  }
  

  
  /* Responsive header adjustments */
@media (max-width: 768px) {
    .header-nav {
      display: none; /* hide nav on small screens */
    }
  
    .menu-toggle {
      display: block; /* show hamburger icon */
    }
  }
  
  
  /* Fullscreen menu overlay */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-primary);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 1000;
  }
  
  

  /* Use case list styling */


  .purple-line {
    width: 0.4rem;
    background-color: var(--color-accent-purple);
    flex-shrink: 0;
  
    /* Instead of a fixed height, let it adapt to the content */
    height: auto;
    align-self: stretch; /* this makes it fill the height of the parent container */
  }
  
  
.use-cases {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-block: 3rem;
    margin-inline-start: 4rem; 
  }
  
  .use-case {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  
  .use-case__icon {
    width: 8rem;
    height: auto;
    flex-shrink: 0;
  }

  .cards-grid {
    display: flex;
    gap: 2rem; /* space between cards */
    flex-wrap: wrap;
    justify-content: center; /* center cards in row on larger screens */
  }
  
  .cards-grid > .card {
    flex: 1 1 25rem; /* grow, shrink, initial width: 25rem (fluid & responsive) */
    max-width: 32rem; /* limit max size to avoid huge cards on wide screens */
  }
  
/*
  .card {
    background:
      linear-gradient(135deg, #64f1c6 0%, #4ecfab 50%, #3ba589 100%),
      repeating-radial-gradient(circle, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 2px, transparent 2px, transparent 10px);
    background-size: cover, 50px 50px; 
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 0 0.2rem rgba(0,0,0,0.1);
    max-width: 20rem;
  }
  
  .card {
    background:
      linear-gradient(135deg, #F4EAFD 0%, #EBD9FB 50%, #C78FF1 100%),
      repeating-radial-gradient(circle, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 2px, transparent 2px, transparent 10px);
    background-size: cover, 50px 50px;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 0 0.2rem rgba(0,0,0,0.1);
    max-width: 20rem;
  }
  */
  
  /*
  .card {
    background-color: #F4EAFD; 
    border: 0.1rem solid #EBD9FB; 
    border-radius: 1rem;
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1);
    padding: 2rem;
    text-align: center;
    max-width: 20rem;
    margin: 1rem; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
  }
  
  .card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-heading); 
    margin-bottom: 0.5rem;
  }
  
  .card p {
    color: var(--color-body);
    font-size: 1.4rem;
    line-height: 1.5;
  }
*/
  .card {
    /* background-color: #EBFEF7; Aqua Deep 50 */
   

    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
    border: 0.1rem solid #FAFAFA; /* Aqua Deep 100 border */
    border-radius: 1rem;
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.05);
    padding: 2rem;
    text-align: center;
    max-width: 20rem;
    margin: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

   /* h3 {
        font-size: clamp(2.6rem, 4vw, 3.2rem);
    }*/
  }
  
  .card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
  }
  

  
  
  
  
  .card-image {
    background-image: url('../images/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    width: 100%;
    height: auto;
    border-radius: 1rem; /* same as card, or a little smaller for inner image */
    display: block;
    margin-bottom: 1rem;
    border: 0.1rem solid var(--color-accent-purple); /* optional subtle border */
  }
  

  

  
  .use-case__content p {
    margin: 0;
  }

  .line {
    display: block; /* stack lines on small screens */
  }
  

  

  /* General section style: more vertical breathing room */
section {
    padding-block: 4rem;
  }
  
  /* Subtle alternating background tint for every other section */
  .section-alt {
    background-color: #F4F6F9; /* Very light mint/grey from your palette */
  }
  
  /* Optional soft top border to further separate sections */
  .section-divider {
    border-top: 0.1rem solid #D2D2D2; /* Subtle grey border */
    padding-top: 2rem;
  }
  
  /* Or a soft gradient border for a modern touch */
  .section-divider-gradient {
    border-top: none;
    height: 1px;
    background: linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0));
    margin-top: 2rem;
  }
  

  /* Adjust styling for how-it-works section */
.how-it-works {
    padding-block: 4rem;
  }
  
  .how-it-works-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    max-width: 100rem;
    margin-inline: auto;
  }
  
  .how-it-works-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
/*clamp(1.8rem, 1.5vw, 2.2rem) 
clamp(2.6rem, 4vw, 3.2rem)
*/
    font-size: clamp(2.6rem, 1.5vw, 3.2rem);


    color: var(--color-body);
  }
  
  .step-number {
    display: inline-block;
    min-width: 4rem;
    min-height: 4rem;
    border-radius: 50%;
    background-color: var(--color-accent-purple);
    color: var(--color-on-dark);
    text-align: center;
    line-height: 4rem;
    font-weight: 600;
    flex-shrink: 0;
  }
  
  .small {
    font-size: 1.4rem;
  }

  
  /* Grey gradient section background */
.bg-grey-gradient {
    background: linear-gradient(135deg, #F4F6F9 0%, #E0E0E0 100%); /* very light grey gradient */
    padding-block: 4rem; /* generous vertical space */
  }
  
  /* White content container on top */
  .section-content {
    background: #FFFFFF;
    border-radius: 1rem;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.05);
    padding: 2rem;
    max-width: auto;
    margin-inline: auto;
  }
  

  .bg-yellow {
    background: linear-gradient(135deg, #fcecc9 0%, #fbe2a1 100%);
    /* #fcecc9 as starting color, with a slightly deeper warm yellow at 100% for depth */
    padding-block: 4rem; /* vertical spacing */
  }

  
  .footer {
    color: var(--color-on-dark);
    padding-block: 2rem;
  }
  
  .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  
  .footer-heading {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin: 0;
  }
  
  .footer-nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .footer-nav a {
    color: var(--color-on-dark);
    text-decoration: none;
    font-size: 1.4rem;
    transition: color 0.2s ease;
  }
  
  .footer-nav a:hover,
  .footer-nav a:focus {
    color: var(--color-accent-coral); /* a bit of color pop for hover/focus */
  }
  
  .footer-legal {
    border-top: 0.1rem solid rgba(255, 255, 255, 0.2);
    padding-top: 1rem;
    font-size: 1.2rem;
    color: var(--color-on-dark);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .highlight-underline {
    display: inline-block;
    position: relative;
  }
  
  .highlight-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.2rem; /* tweak vertical offset */
    width: 100%;
    height: 0.2rem; /* thickness of line */
    background-color: var(--color-accent-coral); /* your coral color */
  }
  
    /* Responsive: stack icons and text vertically on smaller screens */
    @media (max-width: 768px) {
        .line {
            display: inline; /* inline on larger screens */
          }
        .hero__content {
            flex-direction: column;
            text-align: center;
          }
          .hero__content p {
            text-align: left; /* override for paragraphs only */
            margin: 0 auto 1rem; /* ensure text block stays centered overall */
           
          }
        
          .hero__image,
          .hero__text {
            flex: 1 1 100%;
          }
        .use-case {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }
    
        .use-cases {
       
            margin-inline-start: 0rem;
          }
    
          .extra-margin {
            margin-block-end: 2rem;
            margin-block-start: 2rem;
           }
    
           .hero-heading {
            font-family: var(--font-display);
            font-size: clamp(5.0rem, 6vw, 4rem);
            font-weight: 400;
      
            margin-block-end: 1rem;
            line-height: 5.1rem;
          }
    
          .how-it-works-list {
        
            text-align: left;
     
          }

          .wave-divider {
            width: 35%;
         
            margin: 0 auto;          /* This centers the container itself */

            margin-block: 1rem;
          }

          .header-nav {
            a {
                font-size: 1.2rem;
                visibility: hidden;
            }
          }
         
      }

      .legal-info {
      
        color: #fafafa; /* A calm, neutral grey */
        margin-top: 0.5rem;
        text-align: center;
      }