  <style>
    :root {
      --garden-green: #1f7a4d;
      --garden-soft-green: #e7f8ee;
      --garden-soft-yellow: #fff6d6;
      --garden-cream: #fdfbf2;
      --garden-deep: #1f2e2a;
      --radius-xl: 2rem;
      --shadow-soft: 0 18px 45px rgba(15, 67, 45, 0.22);
    }

    * {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top left, #bff2c1 0, #fdfbf2 45%, #fdf7de 100%);
      color: var(--garden-deep);
    }

    /* NAVBAR */
    .navbar {
      transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
      padding-block: 0.75rem;
      background: rgba(253, 251, 242, 0.9);
      backdrop-filter: blur(10px);
    }

    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      padding-block: 0.55rem;
    }

    .navbar-brand {
      font-weight: 700;
      letter-spacing: 0.03em;
      display: flex;
      align-items: baseline;
      gap: 0.2rem;
    }

    .navbar-brand span {
      font-family: "Playfair Display", serif;
      font-size: 1.3rem;
    }

    .navbar-brand .brand-accent {
      color: var(--garden-green);
    }

    .nav-link {
      font-weight: 500;
      position: relative;
      padding-inline: 0.75rem !important;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 4px;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, #4fb476, #f7b633);
      transition: width 0.2s ease;
    }

    .nav-link:hover::after,
    .nav-link:focus::after {
      width: 60%;
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding-top: 90px;
      padding-bottom: 80px;
      position: relative;
      overflow: hidden;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #347a4b;
      box-shadow: 0 10px 30px rgba(27, 85, 52, 0.12);
    }

    .hero-badge span {
      font-size: 1.05rem;
    }

    .hero-title {
      font-family: "Playfair Display", serif;
      font-weight: 700;
      font-size: clamp(2.8rem, 4vw, 3.4rem);
      line-height: 1.1;
      color: #1f3825;
    }

    .hero-subtitle {
      font-size: 1.1rem;
      color: #36553d;
      max-width: 32rem;
    }

    .hero-tagline {
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: #4a6f51;
      margin-top: 1.25rem;
    }

    .hero-cta-primary {
      box-shadow: 0 16px 35px rgba(23, 105, 63, 0.44);
      border-radius: 999px;
      font-weight: 600;
      padding-inline: 1.9rem;
      padding-block: 0.8rem;
    }

    .hero-cta-secondary {
      border-radius: 999px;
      font-weight: 600;
      padding-inline: 1.7rem;
      padding-block: 0.8rem;
    }

    .hero-rating {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.9rem;
      margin-top: 1.25rem;
      color: #376542;
    }

    .hero-rating-stars {
      color: #f3a81c;
      font-size: 1rem;
    }

    .hero-pill {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.75rem;
      margin-top: 1.25rem;
      font-size: 0.94rem;
      color: #476046;
    }

    .hero-pill span {
      padding: 0.25rem 0.75rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(52, 124, 79, 0.14);
    }

    .hero-illustration-wrap {
      position: relative;
    }

    .hero-floating-card {
      position: absolute;
      bottom: 5%;
      left: 5%;
      padding: 0.65rem 0.9rem;
      border-radius: 1rem;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
      font-size: 0.85rem;
      max-width: 240px;
      backdrop-filter: blur(8px);
    }

    .hero-floating-card span {
      display: block;
      font-weight: 600;
      color: #295938;
    }

    .hero-floating-badge {
      position: absolute;
      top: 5%;
      right: 6%;
      padding: 0.7rem 1rem;
      border-radius: 999px;
      background: linear-gradient(120deg, #ffdd7d, #ffa73d);
      color: #4a2b09;
      font-weight: 700;
      box-shadow: 0 16px 40px rgba(179, 123, 31, 0.5);
      font-size: 0.85rem;
    }

    .book-cover-shadow {
      border-radius: 1.2rem;
      box-shadow: var(--shadow-soft);
      max-width: 380px;
    }

    /* Sections */
    .section-label {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 0.83rem;
      color: #6f8b73;
      font-weight: 600;
    }

    .section-title {
      font-family: "Playfair Display", serif;
      font-weight: 700;
      color: #223526;
      font-size: clamp(1.9rem, 3vw, 2.3rem);
    }

    .section-lead {
      font-size: 1rem;
      color: #465a4a;
    }

    .bg-soft-green {
      background: var(--garden-soft-green);
    }

    .bg-soft-yellow {
      background: var(--garden-soft-yellow);
    }

    .pill-icon {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e2f7e8;
      margin-right: 10px;
      font-size: 1.1rem;
    }

        .pill-icon i,
.activities-dot i {
  font-size: 1.15rem;
  line-height: 1;
}


    .feature-card {
      border-radius: 1.3rem;
      border: none;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    }

    .feature-card p {
      font-size: 0.95rem;
      color: #4f6653;
    }

    .book-details-card {
      border-radius: 1.4rem;
      border: none;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    }

    .book-details-card ul {
      padding-left: 0;
      list-style: none;
      font-size: 0.95rem;
    }

    .book-details-card li + li {
      margin-top: 0.25rem;
    }

    .badge-soft {
      background: rgba(144, 198, 148, 0.14);
      border-radius: 999px;
      padding: 0.25rem 0.7rem;
      font-size: 0.8rem;
      color: #2c5940;
    }

    /* Testimonial / Quotes */
    .quote-card {
      border-radius: 1.5rem;
      border: none;
      background: white;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
      position: relative;
      overflow: hidden;
    }

    .quote-card::before {
      content: "“";
      position: absolute;
      font-family: "Playfair Display", serif;
      font-size: 5rem;
      opacity: 0.08;
      top: -1.2rem;
      left: 0.8rem;
    }

    .quote-card small {
      color: #6f7e76;
    }

    /* Author */
    .author-photo {
      width: 210px;
      height: 210px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
      border: 6px solid #ffffff;
    }

    .author-tag {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #7a8a80;
    }

    /* Contact */
    .contact-card {
      border-radius: var(--radius-xl);
      border: none;
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
      background: rgba(255, 255, 255, 0.97);
    }

    /* Footer */
    .footer {
      background: #18261f;
      color: #d5e8da;
      font-size: 0.85rem;
    }

    .footer a {
      color: #b8f3c2;
      text-decoration: none;
    }

    .footer a:hover {
      text-decoration: underline;
    }

    /* Micro animations */
    .btn {
      transition: transform 0.15s ease, box-shadow 0.15s ease, background-position 0.25s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn-success {
      background-image: linear-gradient(120deg, #1f7a4d, #32a96a);
      border: none;
      background-size: 130% 130%;
    }

    .btn-success:hover {
      background-position: 100% 0;
      box-shadow: 0 14px 32px rgba(10, 80, 45, 0.4);
    }

    /* Scroll reveal */
    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .reveal-on-scroll.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Utilities */
    .max-w-32rem {
      max-width: 32rem;
    }

    .floating-buy-mobile {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.6rem 1rem;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 40%);
      backdrop-filter: blur(10px);
      z-index: 1030;
    }

    .floating-buy-mobile .btn {
      width: 100%;
    }

    @media (min-width: 768px) {
      .floating-buy-mobile {
        display: none;
      }
    }

    @media (max-width: 991.98px) {
      .hero {
        text-align: center;
      }

      .hero-subtitle,
      .hero-tagline {
        margin-inline: auto;
      }

      .hero-illustration-wrap {
        margin-top: 1.5rem;
      }

      .hero-floating-card {
        display: none;
      }

      .hero-floating-badge {
        top: 4%;
        right: 50%;
        transform: translateX(50%);
      }
    }

    /* Follow-up Activities */
.activities-section {
  position: relative;
  overflow: hidden;
}

.activities-section::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 520px;
  background: radial-gradient(circle at top, rgba(79, 180, 118, 0.22), rgba(255, 246, 214, 0.0) 70%);
  pointer-events: none;
}

.activities-card {
  border: none;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(10px);
}

.activities-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  gap: 0.9rem;
}

.activities-list li {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 1.1rem;
  background: rgba(231, 248, 238, 0.55);
  border: 1px solid rgba(52, 124, 79, 0.12);
}

.activities-dot {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 246, 214, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  font-size: 1.05rem;
}

.activities-list strong {
  color: #223526;
}

.activities-note {
  border-radius: 1.3rem;
  background: rgba(255, 246, 214, 0.85);
  border: 1px solid rgba(179, 123, 31, 0.18);
}

        /* Make the Activities card look like a premium centerpiece */
.activities-card {
  border: none;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(10px);
}

/* Reduce “wall of text” feel and improve rhythm */
.activities-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  gap: 1rem;
}

.activities-list li {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border-radius: 1.2rem;
  background: rgba(231, 248, 238, 0.55);
  border: 1px solid rgba(52, 124, 79, 0.12);
}

.activities-dot {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 246, 214, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  font-size: 1.05rem;
}

/* Slightly larger emphasis on the bold titles inside each item */
.activities-list strong {
  color: #223526;
}

        .activities-section {
  position: relative;
  overflow: hidden;
}

.activities-section::before {
  content: "";
  position: absolute;
  inset: -45% -15% auto -15%;
  height: 560px;
  background: radial-gradient(circle at top, rgba(79, 180, 118, 0.22), rgba(255, 246, 214, 0) 70%);
  pointer-events: none;
}

@media (min-width: 992px) {
  .activities-list {
    grid-template-columns: 1fr 1fr;
  }
}


    
  </style>
