.faq-hero {
      background: linear-gradient(135deg, #2c5e1e, #1a3a10);
      color: white;
      padding: 3rem 2rem;
      text-align: center;
      border-radius: 0 0 50px 50px;
      margin-bottom: 3rem;
    }
    .faq-hero h1 { color: white; margin-bottom: 1rem; }
    .faq-hero p { font-size: 1.1rem; opacity: 0.9; }

    .faq-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 1.5rem 3rem;
    }

    .faq-category {
      margin-bottom: 3rem;
    }

    .faq-category h2 {
      color: #2c5e1e;
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid #e87c2a;
      display: inline-block;
    }

    .faq-item {
      background: white;
      border-radius: 16px;
      margin-bottom: 1rem;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border: 1px solid rgba(100, 128, 60, 0.15);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .faq-item:hover {
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }

    .faq-question {
      padding: 1.2rem 1.5rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: white;
      transition: background 0.3s ease;
    }

    .faq-question:hover {
      background: #f7fafc;
    }

    .faq-question h3 {
      font-size: 1.1rem;
      color: #2c5e1e;
      margin: 0;
      flex: 1;
    }

    .faq-icon {
      color: #e87c2a;
      font-size: 1.2rem;
      transition: transform 0.3s ease;
    }

    .faq-item.active .faq-icon {
      transform: rotate(180deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      background: #f8fafc;
      border-top: 1px solid transparent;
    }

    .faq-item.active .faq-answer {
      max-height: 500px;
      border-top-color: rgba(100, 128, 60, 0.2);
    }

    .faq-answer p {
      padding: 1.2rem 1.5rem;
      margin: 0;
      color: #444;
      line-height: 1.6;
    }

    .faq-answer ul, .faq-answer ol {
      padding: 0 1.5rem 1rem 2.5rem;
      margin: 0;
    }

    .faq-answer li {
      margin-bottom: 0.5rem;
      color: #444;
    }

    .no-faqs {
      text-align: center;
      padding: 3rem;
      color: #666;
    }

    .loading-state, .empty-state {
      text-align: center;
      padding: 3rem;
    }

    @media (max-width: 768px) {
      .faq-question h3 {
        font-size: 1rem;
      }
      .faq-question {
        padding: 1rem;
      }
      .faq-answer p {
        padding: 1rem;
      }
    }