/* Reset & Base */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-style: solid; border-width: 0; border-color: #dde1da; }
        html { scroll-behavior: smooth; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #23292a; background: #fff; }
        img { max-width: 100%; height: auto; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }

        /* Colors */
        .text-primary-600 { color: #2e3a3e; }
        .bg-primary-600 { background-color: #2e3a3e; }
        .bg-primary-700 { background-color: #232b2e; }
        .text-gray-700 { color: #333a38; }
        .text-gray-900 { color: #14181a; }
        .text-gray-600 { color: #4a5350; }
        .text-gray-400 { color: #8a9289; }
        .bg-white { background-color: #fff; }
        .bg-gray-50 { background-color: #f4f6f2; }
        .bg-gray-900 { background-color: #14181a; }
        .bg-blue-50 { background-color: #f2f4f0; }
        .bg-blue-700 { background-color: #232b2e; }
        .text-white { color: #fff; }
        .text-blue-100 { color: #e3e7e2; }
        .text-blue-200 { color: #c9d2ce; }
        .text-blue-300 { color: #a9b4b2; }
        .text-blue-600 { color: #2e3a3e; }
        .text-blue-700 { color: #232b2e; }

        /* Layout */
        .max-w-7xl { max-width: 80rem; }
        .max-w-3xl { max-width: 48rem; }
        .max-w-4xl { max-width: 56rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
        .px-8 { padding-left: 2rem; padding-right: 2rem; }
        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .p-4 { padding: 1rem; }
        .p-6 { padding: 1.5rem; }
        .pt-24 { padding-top: 6rem; }
        .pb-12 { padding-bottom: 3rem; }
        .pt-8 { padding-top: 2rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-8 { margin-top: 2rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mr-2 { margin-right: 0.5rem; }
        .mr-3 { margin-right: 0.75rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .gap-8 { gap: 2rem; }
        .space-x-2 > * + * { margin-left: 0.5rem; }
        .space-x-8 > * + * { margin-left: 2rem; }
        .space-y-2 > * + * { margin-top: 0.5rem; }
        .space-y-4 > * + * { margin-top: 1rem; }
        .space-y-1 > * + * { margin-top: 0.25rem; }

        /* Flexbox & Grid */
        .flex { display: flex; }
        .inline-flex { display: inline-flex; }
        .grid { display: grid; }
        .hidden { display: none; }
        .block { display: block; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .flex-wrap { flex-wrap: wrap; }
        .flex-shrink-0 { flex-shrink: 0; }
        .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

        /* Typography */
        .text-sm { font-size: 0.875rem; }
        .text-lg { font-size: 1.125rem; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; }
        .text-3xl { font-size: 1.875rem; }
        .text-4xl { font-size: 2.25rem; }
        .font-bold { font-weight: 700; }
        .font-semibold { font-weight: 600; }
        .font-medium { font-weight: 500; }
        .font-normal { font-weight: 400; }
        .text-center { text-align: center; }
        .leading-relaxed { line-height: 1.625; }

        /* Components */
        .rounded-lg { border-radius: 0.5rem; }
        .rounded-full { border-radius: 9999px; }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .border-2 { border-width: 2px; }
        .border { border-width: 1px; }
        .border-white { border-color: #fff; }
        .border-t { border-top-width: 1px; }
        .border-gray-800 { border-color: #23292a; }
        .border-gray-200 { border-color: #dde1da; }
        .fixed { position: fixed; }
        .w-full { width: 100%; }
        .w-5 { width: 1.25rem; }
        .w-6 { width: 1.5rem; }
        .w-8 { width: 2rem; }
        .w-12 { width: 3rem; }
        .w-16 { width: 4rem; }
        .h-16 { height: 4rem; }
        .h-5 { height: 1.25rem; }
        .h-6 { height: 1.5rem; }
        .h-8 { height: 2rem; }
        .h-12 { height: 3rem; }
        .z-50 { z-index: 50; }
        .transition { transition: all 0.2s ease; }
        .overflow-hidden { overflow: hidden; }

        /* Hover states */
        .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
        .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .hover\:bg-blue-50:hover { background-color: #f2f4f0; }
        .hover\:bg-primary-700:hover { background-color: #232b2e; }
        .hover\:text-primary-600:hover { color: #2e3a3e; }
        .hover\:text-white:hover { color: #fff; }
        .hover\:text-blue-700:hover { color: #232b2e; }
        .hover\:bg-white:hover { background-color: #fff; }
        .hover\:bg-blue-100:hover { background-color: #e3e7e2; }

        /* Floating CTA */
        .floating-cta {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            z-index: 999;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .floating-btn {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s;
        }

        .floating-btn:hover {
            transform: scale(1.1);
        }

        .floating-btn.phone {
            background: #2e3a3e;
            color: #fff;
        }

        .floating-btn.whatsapp {
            background: #25d366;
            color: #fff;
        }

        .floating-btn svg {
            width: 24px;
            height: 24px;
        }

        /* Section padding */
        section { padding: 3rem 0; }

        /* Responsive */
        @media (min-width: 640px) {
            .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
            .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
        }

        @media (min-width: 768px) {
            .md\:flex { display: flex; }
            .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
            .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
            .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
            .md\:text-5xl { font-size: 3rem; }
            .md\:text-3xl { font-size: 1.875rem; }
        }

        @media (min-width: 1024px) {
            .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
            .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
            .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
            section { padding: 5rem 0; }
        }

        /* Navigation */
        :root {
            --primary-600: #2e3a3e;
            --primary-700: #232b2e;
            --gray-50: #f4f6f2;
            --gray-700: #333a38;
        }

        .nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px;
            max-width: 80rem;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        .nav-logo {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--primary-600);
        }

        .nav-links {
            display: none;
            gap: 2rem;
            align-items: center;
        }

        @media (min-width: 768px) {
            .nav-links { display: flex; }
        }

        .nav-link {
            color: var(--gray-700);
            font-weight: 600;
            transition: color 0.2s;
        }

        .nav-link:hover { color: var(--primary-600); }

        .nav-cta {
            background: var(--primary-600);
            color: #fff;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
        }

        .nav-cta:hover { background: var(--primary-700); }

        /* Mobile Menu */
        .mobile-menu-btn {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 0.75rem;
            min-width: 48px;
            min-height: 48px;
            justify-content: center;
            align-items: center;
            background: none;
            border: none;
            cursor: pointer;
        }

        .mobile-menu-btn span {
            width: 24px;
            height: 2px;
            background: var(--gray-700);
            transition: all 0.3s;
        }

        @media (min-width: 768px) {
            .mobile-menu-btn { display: none; }
        }

        .mobile-nav {
            display: none;
            position: fixed;
            top: 64px;
            left: 0;
            right: 0;
            background: #fff;
            padding: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

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

        .mobile-nav a {
            display: block;
            padding: 0.75rem 1rem;
            color: var(--gray-700);
            font-weight: 600;
            border-radius: 0.5rem;
            min-height: 48px;
            display: flex;
            align-items: center;
        }

        .mobile-nav a:hover { background: var(--gray-50); }