:root {
          --font-inter: 'Lora', serif;
          --font-playfair: 'Playfair Display', serif;
          --background: 36 25% 97%;
          --foreground: 222 47% 11%;
          --primary: #131d34;
          --primary-foreground: #fffaeb;
          --secondary: 36 20% 95%;
          --muted: 36 20% 95%;
          --muted-foreground: 220 9% 46%;
          --accent: 38 72% 44%;
          --accent-foreground: 0 0% 100%;
          --border: 220 13% 91%;
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font-family: var(--font-inter);
          background: white;
          color: hsl(var(--foreground));
          line-height: 1.5;
      }

      .font-playfair {
          font-family: var(--font-playfair);
      }

      .font-inter {
          font-family: var(--font-inter);
      }

      /* Navbar */
      .navbar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 50;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(16px);
          border-bottom: 1px solid hsl(var(--border) / 0.4);
      }

      .navbar-content {
          max-width: 1280px;
          margin: 0 auto;
          padding: 0 24px;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .navbar-logo {
          display: flex;
          align-items: center;
          gap: 8px;
          text-decoration: none;
          color: hsl(var(--primary));
      }

      .navbar-logo img {
          width: 44px;
          height: 44px;
          border-radius: 8px;
          object-fit: cover;
      }

      .navbar-logo span {
          font-weight: 600;
          font-size: 20px;
          letter-spacing: -0.02em;
          color: hsl(var(--primary));
      }

      .navbar-links {
          display: flex;
          align-items: center;
          gap: 32px;
      }

      .navbar-links a {
          font-size: 14px;
          color: hsl(var(--primary) / 0.6);
          text-decoration: none;
          transition: color 0.2s;
      }

      .navbar-links a:hover {
          color: hsl(var(--primary));
      }

      .navbar-btn {
          background: white;
          color: hsl(var(--primary));
          font-weight: 600;
          padding: 8px 20px;
          border-radius: 9999px;
          text-decoration: none;
          font-size: 14px;
          transition: all 0.2s;
          border: none;
          cursor: pointer;
      }

      .navbar-btn:hover {
          background: white;
          opacity: 0.9;
      }

      .mobile-menu-btn {
          display: none;
          background: none;
          border: none;
          color: hsl(var(--primary));
          cursor: pointer;
      }

      .mobile-menu {
          display: none;
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(16px);
          border-bottom: 1px solid hsl(var(--border) / 0.4);
          padding: 24px;
      }

      .mobile-menu.active {
          display: block;
      }

      /* Hero Section */
      .hero {
          position: relative;
          padding-top: 160px;
          padding-bottom: 80px;
          overflow: hidden;
          background: #f8f6f1;
      }

      .hero::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(to bottom, hsl(var(--accent) / 0.05), transparent);
      }

      .hero-content {
          position: relative;
          max-width: 768px;
          margin: 0 auto;
          padding: 0 24px;
          text-align: center;
      }

      .hero-label {
          display: inline-block;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.3em;
          text-transform: uppercase;
          color: hsl(var(--accent));
          margin-bottom: 24px;
      }

      .hero-title {
          font-family: var(--font-playfair);
          font-size: 48px;
          font-weight: 700;
          color: hsl(var(--primary));
          margin-bottom: 24px;
      }

      .hero-title .italic {
          font-style: italic;
          color: hsl(var(--accent));
      }

      .hero-subtitle {
          color: hsl(var(--muted-foreground));
          margin-bottom: 40px;
          font-size: 16px;
      }

      .search-container {
          position: relative;
          max-width: 560px;
          margin: 0 auto;
      }

      .search-icon {
          position: absolute;
          left: 16px;
          top: 50%;
          transform: translateY(-50%);
          width: 20px;
          height: 20px;
          color: hsl(var(--muted-foreground) / 0.4);
      }

      .search-input {
          width: 100%;
          background: white;
          border: 1px solid hsl(var(--border) / 0.5);
          border-radius: 9999px;
          padding: 16px 24px 16px 48px;
          color: hsl(var(--foreground));
          font-size: 15px;
          font-family: var(--font-inter);
          transition: border-color 0.2s;
      }

      .search-input:focus {
          outline: none;
          border-color: hsl(var(--accent) / 0.6);
      }

      .search-input::placeholder {
          color: hsl(var(--muted-foreground) / 0.5);
      }

      /* Categories */
      .categories {
          max-width: 896px;
          margin: 0 auto;
          padding: 48px 24px 48px;
      }

      .categories-list {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          justify-content: center;
      }

      .category-btn {
          padding: 8px 20px;
          border-radius: 9999px;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.2s;
          border: 1px solid hsl(var(--border) / 0.4);
          background: #f8f6f1;
          color: hsl(var(--muted-foreground));
          cursor: pointer;
      }

      .category-btn:hover {
          background: hsl(var(--secondary));
          color: hsl(var(--primary));
      }

      .category-btn.active {
          background: hsl(var(--accent));
          color: hsl(var(--accent-foreground));
          border-color: hsl(var(--accent));
      }

      /* FAQ List */
      .faq-section {
          max-width: 896px;
          margin: 0 auto;
          padding: 0 24px 112px;
      }

      .no-results {
          text-align: center;
          padding: 64px 24px;
          color: hsl(var(--muted-foreground));
      }

      .no-results p:first-child {
          font-size: 18px;
          margin-bottom: 8px;
      }

      .no-results .small {
          font-size: 14px;
      }

      .faq-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .faq-item {
          border-radius: 16px;
          overflow: hidden;
          border: 1px solid;
          transition: border-color 0.3s;
      }

      .faq-item:hover {
          border-color: hsl(var(--accent) / 0.3);
      }

      .faq-item.style-0 {
          border-color: hsl(var(--border) / 0.4);
          background: #f8f6f1;
      }

      .faq-item.style-1 {
          border-color: hsl(var(--accent) / 0.15);
          background: hsl(var(--accent) / 0.04);
      }

      .faq-item.style-2 {
          border-color: hsl(var(--border) / 0.4);
          background: white;
      }

      .faq-question {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 24px;
          text-align: left;
          gap: 16px;
          background: none;
          border: none;
          cursor: pointer;
          font-family: var(--font-inter);
          font-size: 15px;
          font-weight: 500;
          color: hsl(var(--primary));
      }

      .faq-icon {
          width: 20px;
          height: 20px;
          color: hsl(var(--accent));
          flex-shrink: 0;
          transition: transform 0.3s;
      }

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

      .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease;
      }

      .faq-answer.open {
          max-height: 500px;
      }

      .faq-answer-text {
          padding: 0 24px 24px;
          color: hsl(var(--muted-foreground));
          line-height: 1.7;
          border-top: 1px solid hsl(var(--border) / 0.3);
          margin-top: 16px;
          padding-top: 16px;
      }

      /* Contact CTA */
      .contact-cta {
          margin-top: 64px;
          background: hsl(var(--accent) / 0.06);
          border: 1px solid hsl(var(--accent) / 0.2);
          border-radius: 16px;
          padding: 32px;
          text-align: center;
      }

      .contact-cta-icon {
          width: 40px;
          height: 40px;
          color: hsl(var(--accent));
          margin: 0 auto 16px;
      }

      .contact-cta-title {
          font-family: var(--font-playfair);
          font-size: 24px;
          font-weight: 700;
          color: hsl(var(--primary));
          margin-bottom: 12px;
      }

      .contact-cta-text {
          color: hsl(var(--muted-foreground));
          margin-bottom: 24px;
          font-size: 15px;
      }

      .contact-cta-buttons {
          display: flex;
          flex-direction: column;
          gap: 12px;
          justify-content: center;
      }

      .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 12px 32px;
          border-radius: 9999px;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          border: none;
          text-decoration: none;
          font-family: var(--font-inter);
      }

      .btn-accent {
          background: hsl(var(--accent));
          color: hsl(var(--accent-foreground));
      }

      .btn-accent:hover {
          background: hsl(var(--accent) / 0.9);
      }

      .btn-ghost {
          background: transparent;
          color: hsl(var(--muted-foreground));
          border: 1px solid hsl(var(--border) / 0.4);
      }

      .btn-ghost:hover {
          color: hsl(var(--primary));
          border-color: hsl(var(--border));
      }

      .btn svg {
          width: 16px;
          height: 16px;
      }

      
      /* Responsive */
      @media (max-width: 768px) {

          .navbar-links,
          .navbar-btn {
              display: none;
          }

          .mobile-menu-btn {
              display: block;
          }

          .hero-title {
              font-size: 32px;
          }

          .hero-subtitle {
              font-size: 14px;
          } 

          .contact-cta-buttons {
              flex-direction: column;
          }
      }