{
  "scopeId": "cta-centered-dark-panel",
  "tailwindCss": ".cta-centered-dark-panel .absolute{position:absolute}.cta-centered-dark-panel .relative{position:relative}.cta-centered-dark-panel .left-1\\/2{left:50%}.cta-centered-dark-panel .top-1\\/2{top:50%}.cta-centered-dark-panel .isolate{isolation:isolate}.cta-centered-dark-panel .-z-10{z-index:-10}.cta-centered-dark-panel .mx-auto{margin-left:auto;margin-right:auto}.cta-centered-dark-panel .mt-10{margin-top:2.5rem}.cta-centered-dark-panel .mt-6{margin-top:1.5rem}.cta-centered-dark-panel .flex{display:flex}.cta-centered-dark-panel .size-256{height:64rem;width:64rem}.cta-centered-dark-panel .max-w-7xl{max-width:80rem}.cta-centered-dark-panel .max-w-xl{max-width:36rem}.cta-centered-dark-panel .-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cta-centered-dark-panel .items-center{align-items:center}.cta-centered-dark-panel .justify-center{justify-content:center}.cta-centered-dark-panel .gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.cta-centered-dark-panel .overflow-hidden{overflow:hidden}.cta-centered-dark-panel .text-balance{text-wrap:balance}.cta-centered-dark-panel .text-pretty{text-wrap:pretty}.cta-centered-dark-panel .rounded-md{border-radius:.375rem}.cta-centered-dark-panel .bg-neutral-900{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-neutral-900) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.cta-centered-dark-panel .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.cta-centered-dark-panel .px-3\\.5{padding-left:.875rem;padding-right:.875rem}.cta-centered-dark-panel .px-6{padding-left:1.5rem;padding-right:1.5rem}.cta-centered-dark-panel .py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.cta-centered-dark-panel .py-24{padding-bottom:6rem;padding-top:6rem}.cta-centered-dark-panel .text-center{text-align:center}.cta-centered-dark-panel .text-4xl{font-size:2.25rem;line-height:2.5rem}.cta-centered-dark-panel .text-lg\\/8{font-size:1.125rem;line-height:2rem}.cta-centered-dark-panel .text-sm{font-size:.875rem;line-height:1.25rem}.cta-centered-dark-panel .text-sm\\/6{font-size:.875rem;line-height:1.5rem}.cta-centered-dark-panel .font-semibold{font-weight:600}.cta-centered-dark-panel .tracking-tight{letter-spacing:-.025em}.cta-centered-dark-panel .text-neutral-300{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-300) calc(var(--tw-text-opacity, 1)*100%),transparent)}.cta-centered-dark-panel .text-neutral-900{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-900) calc(var(--tw-text-opacity, 1)*100%),transparent)}.cta-centered-dark-panel .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.cta-centered-dark-panel .shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.cta-centered-dark-panel .hover\\:bg-neutral-100:hover{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-neutral-100) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.cta-centered-dark-panel .focus-visible\\:outline-2:focus-visible{outline-width:2px}.cta-centered-dark-panel .focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.cta-centered-dark-panel .focus-visible\\:outline-white:focus-visible{outline-color:#fff}@media (min-width:640px){.cta-centered-dark-panel .sm\\:rounded-3xl{border-radius:1.5rem}.cta-centered-dark-panel .sm\\:px-16{padding-left:4rem;padding-right:4rem}.cta-centered-dark-panel .sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}.cta-centered-dark-panel .sm\\:py-32{padding-bottom:8rem;padding-top:8rem}.cta-centered-dark-panel .sm\\:text-5xl{font-size:3rem;line-height:1}}@media (min-width:1024px){.cta-centered-dark-panel .lg\\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.cta-centered-dark-panel .dark\\:bg-neutral-800{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-neutral-800) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.cta-centered-dark-panel .dark\\:bg-neutral-900{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-neutral-900) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.cta-centered-dark-panel .dark\\:bg-white\\/10{background-color:hsla(0,0%,100%,.1)}.cta-centered-dark-panel .dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.cta-centered-dark-panel .dark\\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.cta-centered-dark-panel .dark\\:after\\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.cta-centered-dark-panel .dark\\:after\\:absolute:after{content:var(--tw-content);position:absolute}.cta-centered-dark-panel .dark\\:after\\:inset-0:after{content:var(--tw-content);inset:0}.cta-centered-dark-panel .dark\\:hover\\:bg-white\\/15:hover{background-color:hsla(0,0%,100%,.15)}.cta-centered-dark-panel .dark\\:focus-visible\\:outline-white:focus-visible{outline-color:#fff}@media (min-width:640px){.cta-centered-dark-panel .dark\\:after\\:sm\\:rounded-3xl:after{border-radius:1.5rem;content:var(--tw-content)}}}",
  "dependencies": [],
  "version": "1.0",
  "processedHtml": "<div class=\"cta-centered-dark-panel\"><!-- CTA Section: Centered on dark panel -->\n<!-- Paste the HTML content here -->\n<div class=\"bg-white dark:bg-neutral-900\">\n    <div class=\"mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8\">\n      <div class=\"relative isolate overflow-hidden bg-neutral-900 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16 dark:bg-neutral-800 dark:shadow-none dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:inset-ring dark:after:inset-ring-white/10 dark:after:sm:rounded-3xl\">\n        <h2 class=\"text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl\">Boost your productivity today</h2>\n        <p class=\"mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-neutral-300\">Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur commodo do ea.</p>\n        <div class=\"mt-10 flex items-center justify-center gap-x-6\">\n          <a href=\"#\" class=\"rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-neutral-900 shadow-xs hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring dark:inset-ring-white/5 dark:hover:bg-white/15 dark:focus-visible:outline-white\"> Get started </a>\n          <a href=\"#\" class=\"text-sm/6 font-semibold text-white\">\n            Learn more\n            <span aria-hidden=\"true\">→</span>\n          </a>\n        </div>\n        <svg viewBox=\"0 0 1024 1024\" aria-hidden=\"true\" class=\"absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2\" style=\"mask-image: radial-gradient(closest-side,white,transparent)\">\n          <circle r=\"512\" cx=\"512\" cy=\"512\" fill=\"url(#827591b1-ce8c-4110-b064-7cb85a0b1217)\" fill-opacity=\"0.7\" />\n          <defs>\n            <radialGradient id=\"827591b1-ce8c-4110-b064-7cb85a0b1217\">\n              <stop stop-color=\"#7775D6\" />\n              <stop offset=\"1\" stop-color=\"#E935C1\" />\n            </radialGradient>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  </div></div>"
}