/* =======  Reset & globals  ======= */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --brand: #b894ff;
      --brand-dark: #9f76ff; 
      --gray-100:#fafafa;
      --gray-200:#f5f5f5;
      --gray-700:#444;
      --max-width:1180px;
    }
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      line-height:1.55;
      color:var(--gray-700);
      background:#fff;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    img{max-width:100%;display:block;height:auto;border-radius:.6rem;}
    a{text-decoration:none;color:inherit;}
    h1,h2{font-weight:700;line-height:1.2;color:#111}

    /* =======  Layout helpers  ======= */
    .wrapper{max-width:var(--max-width);margin:auto;padding:0 1rem}
    .btn-store img{height:55px;width:auto}
    .btn-primary{
      display:inline-block;background:var(--brand);color:#fff;font-weight:600;
      padding:.85rem 1.6rem;border-radius:50px;margin-top:1.5rem;transition:.25s;
    }
    .btn-primary:hover{background:var(--brand-dark)}

    /* =======  Header  ======= */
    .site-header{
      background:#fff;position:sticky;top:0;z-index:10;
      border-bottom:1px solid var(--gray-200);
    }
    .site-header .inner{
      display:flex;flex-direction:column;align-items:center;gap:1rem;
      padding:1rem 1rem;
    }
    .logo img{height:50px;width:auto}

    nav ul{list-style:none;display:flex;gap:1.5rem;font-weight:500;font-size:.95rem}
    nav a{padding:.25rem 0;border-bottom:2px solid transparent}
    nav a:hover{border-color:var(--brand)}

    @media(min-width:768px){
      .site-header .inner{flex-direction:row;justify-content:space-between}
    }

    /* =======  Hero  ======= */
    .hero{
      background:var(--gray-100);
      padding:5rem 0 3.5rem;
      text-align:center;
    }
    .hero h1{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1rem;}
    .hero p{font-size:1.2rem;max-width:640px;margin:.5rem auto 2rem}
    .hero .badges{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
    .hero img.hero-img{margin-top:3rem;border-radius:.8rem;object-fit:cover;max-height:500px;width:100%}

    /* =======  Sections  ======= */
    section{padding:4.5rem 0}
    .split{
      display:flex;flex-direction:column;gap:2.5rem;align-items:center;
    }
    .split .text{flex:1}
    .split h2{font-size:2rem;margin-bottom:1rem}
    .split p{font-size:1.05rem}
    @media(min-width:880px){
      .split{flex-direction:row}
      .split:nth-child(even){flex-direction:row-reverse}
      .split img{flex:0 0 46%}
    }

    .split img {
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
    }

    @media(min-width: 880px) {
    .split img {
        flex: 1;
        max-width: 50%;
        }
    .split .text {
        flex: 1;
        padding-left: 2rem;
        }
    }

    /* =======  Stats  ======= */
    .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center}
    .stat h3{font-size:2.4rem;margin-bottom:.4rem;color:var(--brand)}
    .stat p{font-weight:600}

    /* =======  Quotes  ======= */
    .quotes{display:grid;gap:2rem;margin-top:2rem}
    blockquote{background:var(--gray-200);padding:1.6rem;border-radius:.6rem;font-style:italic}
    blockquote strong{display:block;margin-top:.8rem;font-style:normal}

    /* =======  CTA banner  ======= */
    .cta{background:var(--brand);color:#fff;text-align:center;padding:4rem 1rem;border-radius:.8rem}
    .cta h2{font-size:2rem}
    .cta p{font-size:1.15rem;max-width:520px;margin:1rem auto 2rem}

    .cta .badges {
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center;     /* center vertically (if needed) */
    gap: 1rem;               /* spacing between the badges */
    flex-wrap: wrap;         /* wrap on smaller screens */
    margin-top: 1.5rem;
    }

    .btn-store img {
    height: 55px;
    width: auto;
    }

    .quotes blockquote {
      
    font-size: 1.3rem; /* increase text size */
    background: var(--gray-200);
    padding-top: 3rem;
    border-radius: 0.6rem;
    font-style: italic;
    position: relative;
    text-align: center;
    min-height: 100px; /* optional: helps with layout consistency */
    }

.quotes blockquote strong {
  display: block;
  font-style: normal;
  font-weight: 600;
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  font-size: 0.95rem;
  color: #12171c;
}

.quotes blockquote footer {
  display: block;
  margin-top: 0.75rem;
  font-weight: normal;
  font-size: 1rem;
  color: #616161;
}


    /* =======  Footer  ======= */
    footer{background:var(--gray-200);padding:3rem 1rem;font-size:.9rem;margin-top:5rem}
    .footer-cols{display:flex;flex-wrap:wrap;gap:3rem;justify-content:center}
    footer ul{list-style:none}
    footer li strong{display:block;margin-bottom:.6rem}
    footer a:hover{color:var(--brand)}
    footer small{display:block;text-align:center;margin-top:2.5rem;color:#666}