{
  "scopeId": "features-grid",
  "tailwindCss": ".features-grid .mx-auto{margin-left:auto;margin-right:auto}.features-grid .mb-12{margin-bottom:3rem}.features-grid .mb-3{margin-bottom:.75rem}.features-grid .mb-4{margin-bottom:1rem}.features-grid .mb-6{margin-bottom:1.5rem}.features-grid .flex{display:flex}.features-grid .grid{display:grid}.features-grid .h-12{height:3rem}.features-grid .h-6{height:1.5rem}.features-grid .w-12{width:3rem}.features-grid .w-6{width:1.5rem}.features-grid .max-w-2xl{max-width:42rem}.features-grid .max-w-7xl{max-width:80rem}.features-grid .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.features-grid .items-center{align-items:center}.features-grid .justify-center{justify-content:center}.features-grid .gap-8{gap:2rem}.features-grid .rounded-lg{border-radius:.5rem}.features-grid .rounded-xl{border-radius:.75rem}.features-grid .bg-brand-600{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-brand-600) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.features-grid .bg-neutral-50{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-neutral-50) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.features-grid .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.features-grid .p-8{padding:2rem}.features-grid .px-4{padding-left:1rem;padding-right:1rem}.features-grid .py-16{padding-bottom:4rem;padding-top:4rem}.features-grid .text-center{text-align:center}.features-grid .text-3xl{font-size:1.875rem;line-height:2.25rem}.features-grid .text-lg{font-size:1.125rem;line-height:1.75rem}.features-grid .text-xl{font-size:1.25rem;line-height:1.75rem}.features-grid .font-bold{font-weight:700}.features-grid .text-neutral-600{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-600) calc(var(--tw-text-opacity, 1)*100%),transparent)}.features-grid .text-neutral-900{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-900) calc(var(--tw-text-opacity, 1)*100%),transparent)}.features-grid .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.features-grid .transition-shadow{transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.features-grid .hover\\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.features-grid .sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}.features-grid .sm\\:py-20{padding-bottom:5rem;padding-top:5rem}}@media (min-width:768px){.features-grid .md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){.features-grid .lg\\:px-8{padding-left:2rem;padding-right:2rem}}",
  "dependencies": [],
  "version": "1.0",
  "processedHtml": "<div class=\"features-grid\"><section class=\"bg-white py-16 sm:py-20\">\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div class=\"text-center mb-12\">\n            <h2 class=\"text-3xl font-bold text-neutral-900 mb-4\">Why Choose Us</h2>\n            <p class=\"text-lg text-neutral-600 max-w-2xl mx-auto\">Discover the advantages that set us apart from the competition.</p>\n        </div>\n        <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            <div class=\"bg-neutral-50 rounded-xl p-8 hover:shadow-lg transition-shadow\">\n                <div class=\"w-12 h-12 bg-brand-600 rounded-lg flex items-center justify-center mb-6\">\n                    <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"/></svg>\n                </div>\n                <h3 class=\"text-xl font-bold text-neutral-900 mb-3\">Lightning Fast</h3>\n                <p class=\"text-neutral-600\">Optimized performance ensures your site loads in under 2 seconds.</p>\n            </div>\n            <div class=\"bg-neutral-50 rounded-xl p-8 hover:shadow-lg transition-shadow\">\n                <div class=\"w-12 h-12 bg-brand-600 rounded-lg flex items-center justify-center mb-6\">\n                    <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"/></svg>\n                </div>\n                <h3 class=\"text-xl font-bold text-neutral-900 mb-3\">Secure & Reliable</h3>\n                <p class=\"text-neutral-600\">Enterprise-grade security with 99.9% uptime guarantee.</p>\n            </div>\n            <div class=\"bg-neutral-50 rounded-xl p-8 hover:shadow-lg transition-shadow\">\n                <div class=\"w-12 h-12 bg-brand-600 rounded-lg flex items-center justify-center mb-6\">\n                    <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\"/></svg>\n                </div>\n                <h3 class=\"text-xl font-bold text-neutral-900 mb-3\">Built with Care</h3>\n                <p class=\"text-neutral-600\">Every detail is crafted with attention to deliver the best experience.</p>\n            </div>\n        </div>\n    </div>\n</section></div>"
}