/* ---- Reset + base ---- */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
      color: #1a1a1a;
      line-height: 1.6;
      -webkit-tap-highlight-color: transparent;
      -webkit-overflow-scrolling: touch;
    }

    /* ---- HERO SECTION - 50VH ---- */
    .faq-hero {
      background: #f5f5f5;
      min-height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      padding: 120px 20px;
      will-change: transform;
      transform: translateZ(0);
    }

    .faq-hero-container { max-width: 1200px; margin: 0 auto; text-align: center; }
    .faq-hero-title {
      font-family: 'Inter', sans-serif;
      font-size: 48px;
      font-weight: 600;
      color: #1e1f21;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
      
    }
    .faq-hero-subtitle { font-size: 18px; color: #666; font-weight: 400; max-width: 600px; margin: 0 auto; line-height: 1.6; }

    /* ---- LAYOUT ---- */
    .faq-wrapper { max-width: 1200px; margin: 0 auto; padding: 80px 20px; }
    .faq-layout { display: grid; grid-template-columns: 200px 1fr; gap: 60px; align-items: start; }

    /* Sidebar */
    .faq-sidebar { position: sticky; top: 100px; }
    .faq-sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .faq-sidebar-item {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 500;
      color: #666;
      padding: 10px 16px;
      cursor: pointer;
      border-radius: 6px;
      transition: background 220ms cubic-bezier(.4,0,.2,1), color 220ms;
      background: transparent;
      user-select: none;
    }
    .faq-sidebar-item:hover { background: #f5f5f5; color: #1a1a1a; }
    .faq-sidebar-item.active { background: #f5f5f5; color: #1a1a1a; font-weight: 600; }

    /* Content */
    .faq-content { width: 100%; }
    .faq-category-section { display: none; }
    .faq-category-section.active { display: block; animation: fadeIn 320ms ease both; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    .faq-category-title {
      font-family: 'Poppins', sans-serif;
      font-size: 32px; font-weight: 600; color: #1a1a1a; margin-bottom: 32px; letter-spacing: -0.3px;
    }

    /* FAQ card (visual) */
    .faq-item {
      background: #ffffff;
      border-bottom: 1px solid #e5e5e5;
      border-radius: 10px;
      margin-bottom: 14px;
      overflow: visible; /* answers animate via explicit height */
      transition: box-shadow 220ms, border-color 220ms;
      will-change: transform;
    }
    .faq-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-color: #d0d0d0; }

    /* Question as button for accessibility */
    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 22px 24px;
      cursor: pointer;
      user-select: none;
      background: transparent;
      border: 0;
      text-align: left;
      font: inherit;
    }
    .faq-item.active .faq-question { background: #fafafa; }
    .faq-question:focus { outline: 3px solid rgba(26,26,26,0.06); border-radius: 8px; }

    .faq-question-text {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
      flex: 1;
      padding-right: 20px;
      line-height: 1.5;
    }

    .faq-icon {
      width: 20px; height: 20px; flex-shrink: 0;
      transition: transform 320ms cubic-bezier(.4,0,.2,1);
      opacity: 0.7; display: inline-flex; align-items:center; justify-content:center;
    }
    .faq-item.active .faq-icon { transform: rotate(180deg); opacity: 0.95; }

    /* Answer: we'll animate height/padding/opacity via JS for smooth results */
    .faq-answer {
      height: 0;
      overflow: hidden;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
      transition: none; /* transitioned in-line via JS for predictable timing */
    }
    .faq-answer-content {
      font-size: 15px; line-height: 1.7; color: #666;
      padding: 0 24px 20px;
      /* border-top: 1px solid #f0f0f0; */
      will-change: opacity;
    }

    /* Scroll-to-top */
    .scroll-top-btn {
      position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px;
      background: #1a1a1a; color: #fff; border: none; border-radius: 50%; cursor: pointer;
      display: none; align-items: center; justify-content: center; font-size: 20px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: transform 220ms, opacity 220ms;
      z-index: 1000; opacity: 0;
    }
    .scroll-top-btn.show { display: flex; opacity: 1; transform: translateY(0); }
    .scroll-top-btn:hover { background: #333; transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

    /* Responsive */
    @media (max-width: 991px) {
      .faq-hero { min-height: 40vh; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-sidebar { position: static; width: 100%; }
      .faq-sidebar-list { flex-direction: row; overflow-x: auto; gap: 12px; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
      .faq-sidebar-item { white-space: nowrap; flex-shrink: 0; }
    }
    @media (max-width: 768px) {
      .faq-hero { min-height: 35vh; padding: 32px 16px; }
      .faq-hero-title { font-size: 32px ;line-height: 44px; }
      .faq-hero-subtitle { font-size: 15px; }
      .faq-wrapper { padding: 50px 16px; }
      .faq-category-title { font-size: 26px; margin-bottom: 24px; }
      .faq-question { padding: 20px; }
      .faq-question-text { font-size: 15px; }
      .faq-answer-content { font-size: 14px; padding: 0 20px 18px; padding-top: 0; }
      .faq-icon { width: 18px; height: 18px; }
      .scroll-top-btn { bottom: 20px; right: 20px; width: 44px; height: 44px; font-size: 18px; }
    }
    .menu-link {
        color: #1a1a1a !important;
      }
      
      .menu-link:hover {
        color: #2d7a3e !important; /* Change this to whatever color you want */
      }