:root{
        --navy:#17133a;
        --teal:#0ab195;
        --muted:#f7f8fb;
      }
      body{
        font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
        color:#222;
      }
      .hero{
        background:linear-gradient(120deg, rgba(10,177,149,0.08), rgba(23,19,58,0.03));
        padding:80px 0;
      }
      .logo-mark{width:140px}
      .leaf-accent{color:var(--teal)}
      .cta-primary{
        background:var(--navy);
        color:#fff;
        border-radius:8px;
        padding:12px 22px;
      }
      .cta-outline{
        border:2px solid var(--navy);
        color:var(--navy);
        border-radius:8px;
        padding:10px 20px;
      }
      .product-card{
        border:0;
        border-radius:14px;
        box-shadow:0 8px 24px rgba(0,0,0,0.06);
      }
      .feature-icon{
        width:56px;
        height:56px;
        border-radius:12px;
        background:var(--muted);
        display:flex;
        align-items:center;
        justify-content:center;
      }
      .footer{
        background:#060617;
        color:#cfcfd6;
        padding:40px 0;
      }
      @media(max-width:768px){
        .hero{padding:45px 0}
        .logo-mark{width:72px}
      }

      .product-card img {
  transition: transform 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.05);
}

/* Primary Button */
.cta-primary {
  background-color: #17133a;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}

.cta-primary:hover,
.cta-primary:focus {
  background-color: #0ab195;
  color: #ffffff !important;
}

/* Outline Button */
.cta-outline {
  background-color: transparent;
  color: #17133a !important;
  border: 2px solid #17133a;
  transition: all 0.3s ease;
}

.cta-outline:hover,
.cta-outline:focus {
  background-color: #0ab195;
  border-color: #0ab195;
  color: #ffffff !important;
}

/* BUTTON STYLES */
.cta-primary{
  background:#17133a;
  color:#ffffff;
  border-radius:8px;
  padding:12px 20px;
  transition:all 0.3s ease;
  border:2px solid #17133a;
}

.cta-primary:hover{
  background:#0ab195;
  border-color:#0ab195;
  color:#ffffff;
}

.cta-outline{
  background:transparent;
  color:#17133a;
  border:2px solid #17133a;
  border-radius:8px;
  padding:10px 18px;
  transition:all 0.3s ease;
}

.cta-outline:hover{
  background:#0ab195;
  color:#ffffff;
  border-color:#0ab195;
}

/* =========================
   GLOBAL UX & READABILITY
========================= */

/* Section spacing */
section {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Headings hierarchy */
h1, h2, h3, h4, h5 {
  color: #17133a;
  line-height: 1.25;
}

h2 {
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 16px;
}

/* Paragraph readability */
p {
  line-height: 1.75;
  color: #4a4a4a;
}

/* Lists */
ul li {
  line-height: 1.6;
  margin-bottom: 6px;
}

/* Card spacing consistency */
.card {
  margin-bottom: 0;
}

.card-body {
  padding: 24px;
}

/* Section background balance */
.bg-light {
  background-color: #f7f8fb !important;
}

/* Navbar link clarity */
.nav-link {
  color: #17133a !important;
  font-weight: 500;
}

.nav-link:hover {
  color: #0ab195 !important;
}

/* Footer text clarity */
.footer p,
.footer li,
.footer small {
  color: #cfcfd6;
}

/* Mobile text alignment fix */
@media (max-width: 576px) {
  .text-center-sm {
    text-align: center;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .cta-primary,
  .cta-outline {
    width: 100%;
    text-align: center;
  }

  .feature-icon {
    margin: 0 auto;
  }

  footer .row > div {
    text-align: center;
  }
}