/* ==========================================================================
           1. Root Variables & Reset
           ========================================================================== */
        :root {
          --brand-50: #f2f8f7;
          --brand-100: #deeeeb;
          --brand-200: #c0ded9;
          --brand-300: #97c7bf;
          --brand-400: #68a99f;
          --brand-500: #307c6f;
          --brand-600: #29675d;
          --brand-700: #23534c;
          --brand-800: #20433e;
          --brand-900: #1e3834;
          --brand-950: #0e1f1d;
          --bg-main: #FAF8F2;
          --bg-alt: #F3EDE0;
        }

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

        html {
          scroll-behavior: smooth;
        }

        body {
          font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
          background-color: var(--bg-main);
          color: var(--brand-950);
          -webkit-font-smoothing: antialiased;
        }

        a {
          color: inherit;
          text-decoration: none;
        }

        button {
          background: none;
          border: none;
          cursor: pointer;
          font: inherit;
        }

        [x-cloak] {
          display: none !important;
        }

        /* Base Container & Grid Utilities */
        .container {
          width: 100%;
          margin-left: auto;
          margin-right: auto;
          padding-left: 1rem;
          padding-right: 1rem;
        }
        .max-w-4xl { max-width: 56rem; }
        .max-w-6xl { max-width: 72rem; }
        .max-w-3xl { max-width: 48rem; }
        .max-w-2xl { max-width: 42rem; }

        /* ==========================================================================
           2. Header & Navigation
           ========================================================================== */
        header {
          position: sticky;
          top: 0;
          z-index: 50;
          background-color: rgba(250, 248, 242, 0.9);
          backdrop-filter: blur(8px);
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .header-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 4rem;
        }

        .logo {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-weight: 900;
          font-size: 1.5rem;
          letter-spacing: -0.025em;
          color: var(--brand-950);
        }

        .logo-icon {
          width: 2rem;
          height: 2rem;
          border-radius: 0.5rem;
          background-color: var(--brand-500);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.125rem;
        }

        .desktop-nav {
          display: none;
          align-items: center;
          gap: 2rem;
          font-size: 0.875rem;
          font-weight: 600;
          color: rgba(14, 31, 29, 0.7);
        }

        .desktop-nav a:hover {
          color: var(--brand-500);
          transition: color 0.15s ease;
        }

        .desktop-auth {
          display: none;
          align-items: center;
          gap: 0.75rem;
        }

        .btn-signin {
          padding: 0.5rem 1.25rem;
          border-radius: 9999px;
          border: 1px solid rgba(0, 0, 0, 0.15);
          font-size: 0.875rem;
          font-weight: 600;
          transition: all 0.15s ease;
        }

        .btn-signin:hover {
          border-color: var(--brand-500);
          color: var(--brand-500);
        }

        .btn-signup {
          padding: 0.5rem 1.25rem;
          border-radius: 9999px;
          background-color: var(--brand-500);
          color: #fff;
          font-size: 0.875rem;
          font-weight: 700;
          box-shadow: 0 4px 6px -1px rgba(48, 124, 111, 0.25);
          transition: background-color 0.15s ease;
        }

        .btn-signup:hover {
          background-color: var(--brand-600);
        }

        .menu-toggle {
          display: block;
          padding: 0.5rem;
          color: var(--brand-950);
        }

        .mobile-menu {
          position: absolute;
          top: 4rem;
          left: 0;
          right: 0;
          background-color: var(--bg-main);
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .mobile-nav {
          padding: 1rem 1.5rem;
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
          font-size: 0.875rem;
          font-weight: 600;
        }

        .mobile-nav a.py-1-5 {
          padding-top: 0.375rem;
          padding-bottom: 0.375rem;
        }

        .mobile-auth {
          display: flex;
          gap: 0.75rem;
          padding-top: 0.75rem;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .mobile-auth a {
          flex: 1;
          text-align: center;
          padding: 0.625rem 1rem;
          border-radius: 9999px;
        }

        @media (min-width: 768px) {
          .desktop-nav, .desktop-auth { display: flex; }
          .menu-toggle, .mobile-menu { display: none !important; }
        }

        /* ==========================================================================
           3. Hero Section
           ========================================================================== */
        .hero-section {
          position: relative;
          overflow: hidden;
          padding-top: 3.5rem;
          padding-bottom: 5rem;
          text-align: center;
        }

        .hero-social-proof {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.625rem;
          margin-bottom: 1.75rem;
        }

        .avatar-group {
          display: flex;
          margin-left: 0.5rem;
        }

        .avatar {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          height: 2rem;
          width: 2rem;
          border-radius: 9999px;
          box-shadow: 0 0 0 2px #fff;
          font-weight: 700;
          font-size: 0.75rem;
          margin-left: -0.5rem;
        }

        .avatar-ig { background-color: var(--brand-200); color: var(--brand-800); }
        .avatar-tk { background-color: var(--brand-300); color: var(--brand-800); }
        .avatar-yt { background-color: var(--brand-400); color: #fff; }

        .social-proof-text {
          font-size: 0.75rem;
          color: rgba(14, 31, 29, 0.6);
          font-weight: 500;
          text-align: left;
          line-height: 1.375;
          max-width: 220px;
        }

        .hero-title {
          font-weight: 900;
          line-height: 1.04;
          letter-spacing: -0.025em;
          font-size: 2.6rem;
        }

        .hero-sticker {
          background: var(--brand-500);
          transform: rotate(-2.5deg);
          box-shadow: 0 10px 30px rgba(48, 124, 111, .30);
          display: inline-block;
          color: #fff;
          padding: 0.25rem 1.25rem;
          border-radius: 1rem;
          margin-top: 0.375rem;
          margin-bottom: 0.375rem;
        }

        .hero-subtitle {
          margin-top: 1.75rem;
          font-size: 1rem;
          color: rgba(14, 31, 29, 0.6);
          max-width: 36rem;
          margin-left: auto;
          margin-right: auto;
          line-height: 1.625;
        }

        .hero-cta {
          margin-top: 2.25rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.875rem;
        }

        .btn-hero-primary {
          width: 100%;
          padding: 0.875rem 2rem;
          border-radius: 9999px;
          background-color: var(--brand-950);
          color: #fff;
          font-weight: 700;
          font-size: 0.875rem;
          box-shadow: 0 20px 25px -5px rgba(14, 31, 29, 0.2);
          transition: background-color 0.15s ease;
        }

        .btn-hero-primary:hover { background-color: var(--brand-800); }

        .btn-hero-secondary {
          width: 100%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 0.625rem;
          padding: 0.875rem 2rem;
          border-radius: 9999px;
          background-color: #fff;
          border: 1px solid rgba(0, 0, 0, 0.15);
          font-weight: 700;
          font-size: 0.875rem;
          transition: border-color 0.15s ease;
        }

        .btn-hero-secondary:hover { border-color: var(--brand-500); }

        .hero-caption {
          margin-top: 1rem;
          font-size: 0.75rem;
          color: rgba(14, 31, 29, 0.45);
          font-weight: 600;
        }

        @media (min-width: 640px) {
          .social-proof-text { font-size: 0.875rem; }
          .hero-title { font-size: 3.75rem; }
          .hero-sticker { padding: 0.5rem 2rem; }
          .hero-subtitle { font-size: 1.125rem; }
          .hero-cta { flex-direction: row; }
          .btn-hero-primary, .btn-hero-secondary { width: auto; }
        }

        @media (min-width: 1024px) {
          .hero-title { font-size: 4.5rem; }
        }

        /* ==========================================================================
           4. Marquee Section
           ========================================================================== */
        .marquee-container {
          background-color: #fff;
          border-top: 1px solid rgba(0, 0, 0, 0.05);
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          overflow: hidden;
          padding-top: 1rem;
          padding-bottom: 1rem;
        }

        .marquee-wrapper {
          position: relative;
          display: flex;
          overflow: hidden;
          white-space: nowrap;
        }

        .marquee-fade-left, .marquee-fade-right {
          pointer-events: none;
          position: absolute;
          top: 0;
          z-index: 10;
          height: 100%;
          width: 5rem;
        }

        .marquee-fade-left { left: 0; background: linear-gradient(to right, #fff, transparent); }
        .marquee-fade-right { right: 0; background: linear-gradient(to left, #fff, transparent); }

        @keyframes marquee {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }

        .marquee-track {
          animation: marquee 24s linear infinite;
          display: flex;
          min-width: max-content;
          align-items: center;
          column-gap: 2rem;
          font-size: 0.875rem;
          font-weight: 500;
          color: rgba(14, 31, 29, 0.5);
        }

        .marquee-track:hover { animation-play-state: paused; }
        .marquee-bold { color: var(--brand-950); font-weight: 700; }
        .marquee-dot { color: rgba(14, 31, 29, 0.2); }

        /* ==========================================================================
           5. Sections & Cards
           ========================================================================== */
        .section-padding {
          padding-top: 4rem;
          padding-bottom: 4rem;
        }

        @media (min-width: 640px) {
          .section-padding {
            padding-top: 5rem;
            padding-bottom: 5rem;
          }
        }

        .text-center { text-align: center; }
        .section-tag {
          font-size: 0.625rem;
          font-weight: 900;
          letter-spacing: 0.1em;
          color: var(--brand-500);
          text-transform: uppercase;
          background-color: rgba(48, 124, 111, 0.1);
          padding: 0.25rem 0.75rem;
          border-radius: 9999px;
        }

        .section-title {
          font-weight: 900;
          font-size: 1.5rem;
          letter-spacing: -0.025em;
          text-transform: uppercase;
          margin-top: 0.75rem;
        }

        .section-subtitle {
          font-size: 1.125rem;
          font-weight: 700;
          color: var(--brand-950);
          line-height: 1.375;
          margin-top: 0.75rem;
        }

        .card-white {
          background-color: #fff;
          border-radius: 1.5rem;
          padding: 1.5rem;
          border: 1px solid rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }

        @media (min-width: 640px) {
          .section-title { font-size: 2.25rem; }
          .section-subtitle { font-size: 1.25rem; }
          .card-white { padding: 2.5rem; }
        }

        /* Services Grid */
        .services-grid {
          display: grid;
          gap: 1.25rem;
          grid-template-columns: 1fr;
        }

        @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(5, 1fr); } }

        .service-card {
          border-radius: 1.5rem;
          background-color: var(--bg-main);
          padding: 1.5rem;
          display: flex;
          flex-direction: column;
          transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .service-card:hover { transform: translateY(-0.25rem); }

        .service-icon {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 0.75rem;
          background-color: rgba(48, 124, 111, 0.1);
          color: var(--brand-500);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.125rem;
        }

        .service-card-link:hover .service-icon {
          background-color: var(--brand-500);
          color: #fff;
        }

        /* Why Choose Us Cards */
        .why-grid {
          display: grid;
          gap: 1.25rem;
          grid-template-columns: 1fr;
        }

        @media (min-width: 768px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

        .why-card {
          border-radius: 1.5rem;
          background-color: var(--bg-alt);
          padding: 1.5rem;
          display: flex;
          flex-direction: column;
        }

        .why-card-brand {
          background-color: var(--brand-500);
          color: #fff;
        }

        .stat-box {
          padding: 1rem;
          border-radius: 1rem;
          margin-top: 1.25rem;
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }

        .stat-box-light { background-color: rgba(48, 124, 111, 0.1); }
        .stat-box-dark { background-color: rgba(255, 255, 255, 0.1); }

        /* How It Works Section */
        .steps-grid {
          display: grid;
          gap: 1.5rem;
          grid-template-columns: 1fr;
        }

        @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }

        .step-card {
          border-radius: 1.5rem;
          background-color: var(--bg-main);
          padding: 1.75rem;
          border: 1px solid rgba(0, 0, 0, 0.05);
          display: flex;
          flex-direction: column;
          position: relative;
          overflow: hidden;
        }

        .step-num {
          font-size: 2.25rem;
          font-weight: 900;
          color: rgba(48, 124, 111, 0.2);
          position: absolute;
          top: 1rem;
          right: 1.5rem;
        }

        .step-icon {
          width: 3rem;
          height: 3rem;
          border-radius: 1rem;
          background-color: var(--brand-500);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.25rem;
          font-weight: 700;
          margin-bottom: 1.25rem;
        }

        /* Pricing Section */
        .pricing-section {
          background-color: var(--brand-950);
          color: #fff;
        }

        .pricing-grid {
          display: grid;
          gap: 1.25rem;
          grid-template-columns: 1fr;
        }

        @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

        .pricing-card {
          border-radius: 1.5rem;
          padding: 1.75rem;
          display: flex;
          flex-direction: column;
        }

        .pricing-card-white { background-color: #fff; color: var(--brand-950); }
        .pricing-card-dark { background-color: var(--brand-900); outline: 2px solid var(--brand-500); }

        .badge {
          font-size: 0.625rem;
          font-weight: 900;
          text-transform: uppercase;
          padding: 0.25rem 0.75rem;
          border-radius: 9999px;
          align-self: flex-start;
        }

        .badge-orange { background-color: #f97316; color: #fff; }
        .badge-brand { background-color: var(--brand-500); color: #fff; }

        .pricing-btn-outline {
          margin-top: 1.75rem;
          text-align: center;
          padding: 0.75rem;
          border-radius: 9999px;
          border: 2px solid var(--brand-950);
          font-weight: 700;
          transition: all 0.15s ease;
        }

        .pricing-btn-outline:hover {
          background-color: var(--brand-950);
          color: #fff;
        }

        .pricing-btn-fill {
          margin-top: 1.75rem;
          text-align: center;
          padding: 0.75rem;
          border-radius: 9999px;
          background-color: var(--brand-500);
          color: #fff;
          font-weight: 900;
          transition: background-color 0.15s ease;
        }

        .pricing-btn-fill:hover { background-color: var(--brand-400); }

        /* FAQ Section */
        .faq-item {
          margin-bottom: 0.75rem;
          border-radius: 1rem;
          border: 1px solid rgba(0, 0, 0, 0.1);
          transition: border-color 0.15s ease;
        }

        .faq-item.active { border-color: var(--brand-500); }

        .faq-button {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 1.25rem;
          font-weight: 700;
          text-align: left;
          border-radius: 1rem;
        }

        .faq-button.active {
          background-color: var(--brand-500);
          color: #fff;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }

        .faq-button.inactive { background-color: #fff; }

        .faq-answer {
          padding: 1.25rem;
          background-color: #fff;
          font-size: 0.875rem;
          color: rgba(14, 31, 29, 0.7);
          border-bottom-left-radius: 1rem;
          border-bottom-right-radius: 1rem;
        }

        /* ==========================================================================
           6. Footer Styles
           ========================================================================== */
        footer {
          background-color: var(--brand-950);
          color: #fff;
          padding-top: 3.5rem;
        }

        .footer-grid {
          display: grid;
          gap: 2.5rem;
          grid-template-columns: 1fr;
          padding-bottom: 3rem;
        }

        @media (min-width: 768px) {
          .footer-grid { grid-template-columns: repeat(4, 1fr); }
        }

        .footer-title {
          font-size: 0.75rem;
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: rgba(255, 255, 255, 0.4);
          margin-bottom: 1rem;
        }

        .footer-links {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 0.625rem;
          font-size: 0.875rem;
          color: rgba(255, 255, 255, 0.7);
        }

        .footer-links a:hover {
          color: #fff;
          transition: color 0.15s ease;
        }

        .footer-bottom {
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          padding: 1rem 0;
          text-align: center;
          font-size: 0.75rem;
          color: rgba(255, 255, 255, 0.4);
        }