/* ===========================
       Core design tokens
       =========================== */
    :root{
      /* Colors */
      --green-forest-1: #2D5016;   /* deep forest */
      --green-forest-2: #3A6B35;   /* lighter forest */
      --cream: #F5E6D3;            /* background cream */
      --accent-orange: #FF8C42;    /* warm orange */
      --accent-coral: #FF6B6B;     /* coral */
      --accent-gold: #FDB833;      /* golden yellow */
      --muted-dark: #2b2b2b;
      --card-bg: rgba(255,255,255,0.85);

      /* Layout */
      --radius: 12px;
      --container-max: 1200px;
      --transition: 260ms cubic-bezier(.2,.9,.3,1);
      --easing: cubic-bezier(.2,.9,.3,1);
    }

    /* Use Playfair Display for all text as requested */
    *{ box-sizing: border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:'TeX Gyre Bonum', serif;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      background: linear-gradient(180deg, rgba(45,80,22,0.02), rgba(58,107,53,0.01));
      color: var(--muted-dark);
      line-height:1.45;
      -webkit-text-size-adjust:100%;
      scroll-behavior:smooth; /* smooth scroll for anchor links */
      background-color: var(--cream);
    }

    /* Central container */
    .container{
      width: calc(100% - 32px);
      max-width: var(--container-max);
      margin: 0 auto;
    }

    /* ===========================
       Subtle SVG background patterns (very low opacity)
       We'll layer a couple of data-URL SVGs to simulate mushroom silhouettes + leaves
       =========================== */
    .bg-pattern {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.08; /* overall low opacity */
      background-image:
        /* soft wave shape */
        radial-gradient(1200px 300px at 10% 10%, rgba(58,107,53,0.04), transparent 15%),
        /* leaf silhouette (tilted) */
        radial-gradient(600px 200px at 90% 40%, rgba(45,80,22,0.03), transparent 20%),
        /* small repeating mushroom svg tile (data url) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='%232D5016' opacity='0.12'><path d='M100 20c14 0 30 18 30 36 0 18-12 30-30 30s-30-12-30-30c0-18 16-36 30-36z'/><path d='M140 110c0 15-18 30-40 30s-40-15-40-30c0-5 3-8 8-8h64c5 0 8 3 8 8z'/></g></svg>");
      background-repeat: repeat;
      background-size: 500px 500px;
      mix-blend-mode: multiply;
    }

    /* ===========================
       Header / Navigation
       =========================== */
    header{
      position: sticky;
      top:0;
      z-index: 40;
      backdrop-filter: blur(6px);
      background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.46));
      border-bottom: 1px solid rgba(45,80,22,0.05);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 16px;
    }
    /* Logo */
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:var(--green-forest-1);
    }
    .brand .logo-mark{
      width:48px;
      height:48px;
      border-radius:12px;
      display:grid;
      place-items:center;
      font-weight:900;
      font-size:18px;
      background-color: transparent;
      color: #fff;
    }
    .brand .brand-info{ line-height:1; }
    .brand .brand-name{ font-weight:900; font-size:18px; letter-spacing:0.2px; }
    .brand .brand-tag{ font-size:12px; color:rgba(43,43,43,0.6); margin-top:2px; }

    /* Nav links - hidden behind mobile menu by default */
    .nav-links{
      display:flex;
      gap:12px;
      align-items:center;
    }
    .nav-links a{
      text-decoration:none;
      color:var(--green-forest-1);
      padding:8px 10px;
      border-radius:8px;
      font-size:15px;
      transition: all var(--transition);
    }
    .nav-links a:hover{
      transform:translateY(-3px);
      color:var(--accent-orange);
    }

    /* CTA in header */
    .nav-cta{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .btn {
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 16px;
      border-radius: var(--radius);
      background: linear-gradient(90deg,var(--accent-orange),var(--accent-gold));
      color:white;
      text-decoration:none;
      border: none;
      cursor:pointer;
      font-weight:700;
      font-size:15px;
      transition: transform var(--transition), box-shadow var(--transition);
      box-shadow: 0 6px 20px rgba(253,184,51,0.12);
    }
    .btn.secondary{
      background: none;
      border: 2px solid rgba(45,80,22,0.08);
      color:var(--green-forest-1);
      font-weight:700;
      padding:8px 14px;
      box-shadow:none;
    }
    .btn:hover{ transform: translateY(-3px); }

    /* Mobile menu toggle */
    .menu-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:10px;
      background: rgba(45,80,22,0.04);
      border: none;
      cursor:pointer;
      font-size:18px;
      color:var(--green-forest-1);
    }

    /* ===========================
       Hero
       =========================== */
    .hero{
      position:relative;
      padding:48px 0 36px;
      display:grid;
      align-items:center;
      gap:24px;
    }

    .hero-inner{
      display:grid;
      gap:20px;
      z-index:2;
      grid-template-columns: 1fr;
      align-items:center;
    }

    .hero-visual{
      width:100%;
      border-radius:16px;
      overflow:hidden;
      min-height:220px;
      background: linear-gradient(180deg, rgba(58,107,53,0.04), rgba(45,80,22,0.02));
      background-size:cover;
      background-position:center;
      box-shadow: 0 12px 30px rgba(43,43,43,0.06);
      display:grid;
      grid-template-columns: 1fr;
      align-items:center;
    }

    /* Use a large hero image (replace URL with your own image for production) */
    .hero-visual .hero-img{
      width:100%;
      min-height:500px;
      background-image: url('/static/main/images/Hero_Image.webp');
      background-size:cover;
      background-position:center;
      border-radius: 12px;
      height: 100%;
      filter: contrast(1.02) saturate(1.05);
    }

    .hero-copy{
      padding: 18px;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(245,230,211,0.7));
      box-shadow: 0 8px 24px rgba(45,80,22,0.06);
    }

    .eyebrow{
      font-size:13px;
      font-weight:700;
      color: var(--green-forest-2);
      letter-spacing:0.6px;
    }

    h1{
      margin:0;
      font-size:40px;
      line-height:1.05;
      font-weight:900;
      color:var(--green-forest-1);
    }
    p.lead{
      margin:8px 0 0;
      font-size:16px;
      color: rgba(43,43,43,0.9);
    }

    .hero-actions{
      display:flex;
      gap:12px;
      margin-top:12px;
      flex-wrap:wrap;
    }

    /* ===========================
       About / Values
       =========================== */
    section{
      padding:36px 0;
      position:relative;
      z-index:2;
    }

    .section-title{
      margin:0 0 18px 0;
      display:flex;
      align-items:center;
      gap:12px;
    }
    .section-title h2{
      margin:0;
      font-size:30px;
      color:var(--green-forest-1);
      font-weight:900;
    }
    .section-sub{
      font-size:14px;
      color:rgba(43,43,43,0.7);
    }

    .cards{
      display:grid;
      gap:14px;
    }

    /* Icon card (used in About) */
    .icon-card{
      display:flex;
      gap:12px;
      align-items:flex-start;
      background: var(--card-bg);
      border-radius: var(--radius);
      padding:14px;
      box-shadow: 0 6px 18px rgba(45,80,22,0.04);
      transition: transform var(--transition), box-shadow var(--transition);
    }
    .icon-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 36px rgba(45,80,22,0.08); }
    .icon-card .ic{
      min-width:56px;
      min-height:56px;
      border-radius:10px;
      display:grid;
      place-items:center;
      font-size:20px;
      color:white;
      background: linear-gradient(135deg,var(--green-forest-2),var(--green-forest-1));
    }
    .icon-card h3{ margin:0 0 6px; font-size:16px; font-weight:700; color:var(--green-forest-1); }
    .icon-card p{ margin:0; font-size:14px; color:rgba(43,43,43,0.75); }

    /* ===========================
       Product cards grid
       =========================== */
    .products-grid{
      display:grid;
      gap:12px;
    }
    .product-card{
      border-radius: var(--radius);
      overflow:hidden;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,230,211,0.6));
      box-shadow: 0 10px 30px rgba(45,80,22,0.04);
      transition: transform var(--transition), box-shadow var(--transition);
      cursor:pointer;
      display:flex;
      flex-direction:column;
    }
    .product-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 44px rgba(45,80,22,0.08); }
    .product-media{
      height:300px;
      background-size:cover;
      background-position:center;
      border-bottom: 1px solid rgba(45,80,22,0.03);
    }
    .product-body{
      padding:12px;
    }
    .product-title{ font-size:16px; font-weight:800; color:var(--green-forest-1); margin:0 0 8px; }
    .product-desc{ font-size:14px; color:rgba(43,43,43,0.78); margin:0 0 10px; }
    .product-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .chip{
      padding:6px 10px;
      border-radius:999px;
      font-size:13px;
      font-weight:700;
      background: rgba(45,80,22,0.08);
      color:var(--green-forest-1);
    }

    /* ===========================
       Why Choose Us (benefit cards)
       =========================== */
    .benefits{
      display:grid;
      gap:12px;
    }
    .benefit-card{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      background: var(--card-bg);
      border-radius: var(--radius);
      transition: transform var(--transition);
    }
    .benefit-card .icon{
      width:56px;
      height:56px;
      border-radius:12px;
      display:grid;
      place-items:center;
      font-size:20px;
      color:white;
      background: linear-gradient(135deg,var(--accent-coral),var(--accent-orange));
    }

    /* ===========================
       CTA Section
       =========================== */
    .cta-hero{
      padding:28px;
      border-radius: 16px;
      background: linear-gradient(90deg, rgba(255,140,66,0.08), rgba(253,184,51,0.06));
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:space-between;
      box-shadow: 0 10px 36px rgba(45,80,22,0.04);
    }
    .cta-hero h3{ margin:0; font-size:20px; }
    .cta-hero p{ margin:0; font-size:14px; color:rgba(43,43,43,0.8); }

    /* ===========================
       Footer
       =========================== */
    footer{
      padding:28px 0;
      border-top: 1px solid rgba(45,80,22,0.04);
      background: linear-gradient(180deg, rgba(245,230,211,0.35), rgba(255,255,255,0.9));
    }
    .footer-grid{
      display:grid;
      gap:12px;
    }
    .social-icons a{
      display:inline-flex;
      width:40px;
      height:40px;
      align-items:center;
      justify-content:center;
      border-radius:8px;
      background: rgba(45,80,22,0.06);
      text-decoration:none;
      color: var(--green-forest-1);
      margin-right:8px;
      transition: transform var(--transition);
    }
    .social-icons a:hover{ transform: translateY(-4px); color:var(--accent-coral); }

    /* ===========================
       Animations & reveal
       =========================== */
    .reveal{
      opacity:0;
      transform: translateY(12px);
      transition: opacity 520ms var(--easing), transform 520ms var(--easing);
    }
    .reveal.in-view{
      opacity:1;
      transform: none;
    }

    /* ===========================
       Responsive / Mobile-first layout
       =========================== */
    /* default mobile layout - stacked */
    .grid-2 { display:grid; grid-template-columns:1fr; gap:12px; }
    .grid-3 { display:grid; grid-template-columns:1fr; gap:12px; }

    /* Products grid: show 1 on mobile, 2 on tablet, 3 on desktop */
    .products-grid{ grid-template-columns: 1fr; }

    /* About icon cards as 1 column mobile */
    .about-cards{ grid-template-columns: 1fr; }

    /* Benefits single column mobile */
    .benefits{ grid-template-columns: 1fr; }

    /* Header nav: hide nav links on small screens, show toggle */
    .nav-links { display:none; }
    .nav .right-group{ display:flex; align-items:center; gap:8px; }

    /* Larger screens */
    @media (min-width: 700px){
      .nav-links{ display:flex; }
      .menu-toggle{ display:none; }

      .hero-inner{ grid-template-columns: 1fr 420px; align-items:center; }
      .hero-visual{ min-height:320px; }

      .grid-2 { grid-template-columns: 1fr 1fr; }
      .grid-3 { grid-template-columns: 1fr 1fr 1fr; }

      .products-grid{ grid-template-columns: 1fr 1fr 1fr; }
      .about-cards{ grid-template-columns: 1fr 1fr; }
      .benefits{ grid-template-columns: 1fr 1fr; }

      header .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    }

    @media (min-width: 1000px){
      .hero-inner{ grid-template-columns: 1fr 520px; }
      .products-grid{ grid-template-columns: repeat(4, 1fr); }
      .benefits{ grid-template-columns: repeat(4, 1fr); }
    }

    /* Small visual improvements for large screens */
    @media (min-width:1400px){
      body{ font-size: 18px; } /* slightly larger for very wide screens */
    }

    /* Accessibility: focus outlines */
    a:focus, button:focus { outline: 3px solid rgba(45,80,22,0.12); outline-offset:3px; }
    /* TRUSTED BY */
    .trusted{
      margin-top:40px;
      text-align:center;
    }
    .trusted-logos{
      display:flex;
      justify-content:center;
      gap:30px;
      flex-wrap:wrap;
      margin-top:20px;
    }
    .trusted-logos img{
      height:60px;
      border-radius: 10px;
    }

    /* TESTIMONIALS */
    .testimonials{
      margin-top:60px;
    }
    .test-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .test-card{
      background:white;
      padding:20px;
      border-radius:12px;
      box-shadow:0 4px 14px rgba(0,0,0,0.1);
      text-align:center;
    }
    .test-card img{
      width:80px;
      height:80px;
      border-radius:50%;
      object-fit:cover;
    }
    .stars{
      color:#FDB833;
      margin:5px 0;
    }