nextworks 0.2.0-alpha.13 → 0.2.0-alpha.15

package/dist/kits/blocks/app/templates/aiworkflow/components/Navbar.tsx

@@ -9,10 +9,16 @@ type PresetOverrides = Partial<SharedNavbarProps>;
 const defaultProps: SharedNavbarProps = {
   brand: "FlowPilot AI",
   brandNode: (
-    <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-400 via-sky-500 to-violet-500 font-bold text-slate-950 shadow-sm ring-1 ring-white/40">
-      FP
+    <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--navbar-border)] bg-[var(--navbar-accent)] text-[var(--navbar-toggle-bg)] shadow-sm ring-1 ring-white/20 dark:ring-white/10">
+      <span className="grid grid-cols-2 gap-[2px]">
+        <span className="h-[4px] w-[4px] rounded-[1px] bg-current/95" />
+        <span className="h-[4px] w-[4px] rounded-[1px] bg-current/55" />
+        <span className="h-[4px] w-[4px] rounded-[1px] bg-current/55" />
+        <span className="h-[4px] w-[4px] rounded-[1px] bg-current/95" />
+      </span>
     </div>
   ),
+
   menuItems: [
     { label: "Home", href: "#home" },
     { label: "Features", href: "#features" },
@@ -28,21 +34,14 @@ const defaultProps: SharedNavbarProps = {
   className: "",
   nav: {
     className:
-      "border-b border-slate-200/80 bg-white/80 text-slate-900 backdrop-blur supports-[backdrop-filter]:bg-white/80 " +
-      "dark:border-slate-800 dark:bg-slate-950/75 dark:text-white supports-[backdrop-filter]:dark:bg-slate-950/75 " +
-      "[--navbar-accent:theme(colors.cyan.600)] dark:[--navbar-accent:theme(colors.cyan.400)] " +
-      "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.slate.950)] " +
-      "[--navbar-hover-bg:theme(colors.cyan.50)] dark:[--navbar-hover-bg:color-mix(in_oklab,oklch(0.24_0.06_230)_24%,transparent)] " +
-      "[--navbar-ring:theme(colors.cyan.500)] dark:[--navbar-ring:theme(colors.cyan.400)] " +
-      "[--navbar-border:theme(colors.slate.200)] dark:[--navbar-border:theme(colors.slate.800)]",
+      "border-b border-[var(--navbar-border)] bg-[var(--navbar-bg)] text-[var(--navbar-fg)] backdrop-blur supports-[backdrop-filter]:bg-[var(--navbar-bg)] supports-[backdrop-filter]:dark:bg-[var(--navbar-bg)]",
   },
   brandText: {
-    className:
-      "text-xl font-semibold font-outfit text-slate-950 dark:text-white",
+    className: "text-xl font-semibold font-outfit text-[var(--navbar-accent)]",
   },
   links: {
     className:
-      "text-sm font-medium font-inter text-slate-700 hover:text-cyan-700 focus:ring-[var(--navbar-ring)] dark:text-slate-200 dark:hover:text-cyan-300",
+      "text-sm font-medium font-inter text-[var(--navbar-link-fg)] hover:text-[var(--navbar-link-hover-fg)] focus:ring-[var(--navbar-ring)]",
   },
   ctaButtonStyle: {
     variant: "default",
@@ -51,20 +50,20 @@ const defaultProps: SharedNavbarProps = {
       "shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg",
   },
   mobileMenu: {
-    className: "border-t border-slate-200 dark:border-slate-800",
+    className: "border-t border-[var(--navbar-border)]",
   },
   container: {
     className: "max-w-7xl mx-auto",
   },
   brandWrapper: {
-    className: "",
+    className: "-ml-2",
   },
   desktopMenu: {
     className: "hidden items-center space-x-1 md:flex lg:space-x-6",
   },
   toggleButton: {
     className:
-      "md:hidden flex items-center justify-center rounded-md p-2 transition-colors hover:bg-cyan-50 dark:hover:bg-cyan-950/30 focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-cyan-400",
+      "md:hidden flex items-center justify-center rounded-md border border-[var(--navbar-border)] bg-[var(--navbar-toggle-bg)] p-2 transition-colors hover:bg-[var(--navbar-hover-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--navbar-ring)]",
   },
   colorModeWrapper: {
     className: "ml-2",

package/dist/kits/blocks/app/templates/aiworkflow/components/Pricing.tsx

@@ -6,16 +6,16 @@ export function Pricing() {
   return (
     <SharedPricing
       id="pricing"
-      pricingHeadingText="Pricing for teams automating real operational work"
+      pricingHeadingText="Pricing for teams shipping with coding agents"
       pricingPlans={[
         {
           pricingPlanHeaderText: "Starter",
           pricingPlanPrice: "$49/mo",
           pricingPlanFeatures: [
-            "3 active workflows",
-            "Slack and email intake",
-            "Shared approval inbox",
-            "Core analytics",
+            "3 active repos",
+            "GitHub and docs intake",
+            "Shared review queue",
+            "Patch analytics",
           ],
           pricingPlanCTALabel: "Start free",
           pricingPlanCTAHref: "#contact",
@@ -24,11 +24,11 @@ export function Pricing() {
           pricingPlanHeaderText: "Growth",
           pricingPlanPrice: "$149/mo",
           pricingPlanFeatures: [
-            "Unlimited workflows",
-            "CRM and project tool sync",
-            "Advanced approval routing",
-            "Live execution dashboards",
-            "Role-based governance",
+            "Unlimited agent runs",
+            "Repo, issue tracker, and CI sync",
+            "Review gates and approvals",
+            "Live diff dashboards",
+            "Role-based code governance",
           ],
           pricingPlanCTALabel: "Book a demo",
           pricingPlanCTAHref: "#contact",
@@ -38,23 +38,27 @@ export function Pricing() {
           pricingPlanHeaderText: "Enterprise",
           pricingPlanPrice: "Custom",
           pricingPlanFeatures: [
-            "Private deployment options",
-            "Custom policy and knowledge connectors",
-            "SSO and audit exports",
-            "Dedicated onboarding",
-            "Priority support",
+            "Private agent deployment options",
+            "Custom repo and context connectors",
+            "SSO and change exports",
+            "Dedicated rollout support",
+            "Priority agent support",
           ],
-          pricingPlanCTALabel: "Talk to sales",
+          pricingPlanCTALabel: "Talk to the team",
           pricingPlanCTAHref: "#contact",
         },
       ]}
-      section={{ className: "bg-background pt-18 pb-16" }}
+      section={{
+        className: "bg-[var(--section-bg)] pt-18 pb-16",
+      }}
       container={{ className: "max-w-7xl mx-auto px-6" }}
       heading={{
         className:
           "mb-4 text-center font-outfit text-3xl font-semibold text-[var(--heading-fg)] md:text-4xl lg:text-5xl",
       }}
-      grid={{ className: "mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" }}
+      grid={{
+        className: "mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3",
+      }}
       card={{
         className:
           "relative rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] text-[var(--card-fg)] shadow-[var(--card-shadow)] transition-all duration-300 hover:-translate-y-1 hover:shadow-xl",
@@ -68,19 +72,20 @@ export function Pricing() {
           "font-outfit text-3xl font-semibold text-[var(--card-title-fg)]",
       }}
       featureItem={{
-        className: "font-inter text-sm text-[var(--card-muted-fg)] md:text-base",
+        className:
+          "font-inter text-sm text-[var(--card-muted-fg)] md:text-base",
       }}
       cta={{
         variant: "default",
         size: "lg",
         className:
-          "w-full font-inter font-semibold [--btn-bg:theme(colors.cyan.500)] [--btn-fg:theme(colors.slate.950)] [--btn-border:transparent] hover:[--btn-hover-bg:theme(colors.cyan.400)] hover:[--btn-hover-fg:theme(colors.slate.950)]",
+          "w-full font-inter font-semibold [--btn-bg:var(--hero-cta-primary-bg)] [--btn-fg:var(--hero-cta-primary-fg)] [--btn-border:var(--hero-cta-primary-border)] hover:[--btn-hover-bg:var(--hero-cta-primary-hover-bg)] hover:[--btn-hover-fg:var(--hero-cta-primary-hover-fg)]",
       }}
       popularBadge={{
         className:
-          "absolute -top-3 left-1/2 -translate-x-1/2 rounded-full border border-[var(--badge-active-border)] bg-[var(--badge-active-bg)] px-4 py-1 text-xs font-semibold text-[var(--badge-active-fg)]",
+          "absolute -top-3 left-1/2 -translate-x-1/2 rounded-full border border-[var(--badge-active-border)] bg-[var(--badge-active-bg)] px-4 py-1 text-xs font-semibold text-[var(--badge-active-fg)] shadow-sm shadow-black/5",
       }}
-      ariaLabel="AI workflow pricing"
+      ariaLabel="AI coding agent pricing"
     />
   );
 }

package/dist/kits/blocks/app/templates/aiworkflow/components/ProcessTimeline.tsx

@@ -8,38 +8,38 @@ export function ProcessTimeline() {
       steps={[
         {
           stepNumber: 1,
-          title: "Capture the request",
+          title: "Capture the issue",
           description:
-            "AI turns messages, tickets, and forms into structured workflow inputs with clear intent and metadata.",
+            "A plain-language report becomes a structured task with intent, files, and context.",
           icon: "✉️",
         },
         {
           stepNumber: 2,
-          title: "Ground the decision",
+          title: "Read the codebase",
           description:
-            "Policies, playbooks, and account context are pulled in before the workflow takes action.",
+            "The agent inspects the relevant files, notes patterns, and checks surrounding context before editing.",
           icon: "🧠",
         },
         {
           stepNumber: 3,
-          title: "Route approvals and actions",
+          title: "Patch and preview",
           description:
-            "Human review appears only when thresholds or policy require it, while approved actions continue automatically.",
+            "Edits land in the diff, and the preview updates once the patch is applied.",
           icon: "✅",
         },
         {
           stepNumber: 4,
-          title: "Sync every tool",
+          title: "Validate and ship",
           description:
-            "CRM records, project tasks, team updates, and audit logs stay aligned from one execution graph.",
+            "Checks, reviews, and logs stay aligned before the change is ready to merge.",
           icon: "🔄",
         },
       ]}
-      heading="From request to completed workflow in four clear stages"
-      subheading="Keep AI automation visible, governed, and operational across the systems your team already uses."
+      heading="From issue to merged fix in four clear stages"
+      subheading="Keep the coding agent visible, governed, and steady across the tools your team already uses."
       section={{
         className:
-          "bg-[linear-gradient(180deg,rgba(248,250,252,1)_0%,rgba(240,249,255,0.7)_100%)] py-18 md:py-22 dark:bg-[linear-gradient(180deg,rgba(2,6,23,1)_0%,rgba(8,47,73,0.4)_100%)]",
+          "bg-[linear-gradient(180deg,#eef3f8_0%,#f6f8fb_48%,#eef3f8_100%)] py-18 md:py-22 dark:bg-[linear-gradient(180deg,#171717_0%,#121212_18%,#1d1d1d_46%,#131313_76%,#1b1b1b_100%)]",
       }}
       container={{ className: "max-w-6xl mx-auto px-6 md:px-10" }}
       header={{ className: "mb-16 text-center" }}
@@ -57,14 +57,15 @@ export function ProcessTimeline() {
       }}
       connectingLine={{
         className:
-          "absolute left-16 right-16 top-8 h-px bg-gradient-to-r from-cyan-200 via-sky-400 to-violet-400 dark:from-cyan-900 dark:via-cyan-500 dark:to-violet-500",
+          "absolute left-16 right-16 top-8 h-px bg-gradient-to-r from-slate-200 via-slate-300 to-slate-200 dark:from-slate-800 dark:via-slate-700 dark:to-slate-800",
       }}
       stepContainer={{
-        className: "relative z-10 flex max-w-56 flex-1 flex-col items-center gap-5",
+        className:
+          "relative z-10 flex max-w-56 flex-1 flex-col items-center gap-5",
       }}
       stepCircle={{
         className:
-          "flex h-16 w-16 items-center justify-center rounded-full bg-slate-950 text-white shadow-lg shadow-cyan-500/10 dark:bg-cyan-400 dark:text-slate-950",
+          "flex h-16 w-16 items-center justify-center rounded-full bg-[var(--process-step-bg)] text-[var(--process-step-fg)] shadow-lg shadow-black/10",
       }}
       stepNumber={{ className: "font-outfit text-2xl font-bold" }}
       stepIcon={{ className: "text-3xl" }}
@@ -74,18 +75,17 @@ export function ProcessTimeline() {
           "font-inter text-lg font-semibold text-[var(--card-title-fg)]",
       }}
       stepDescription={{
-        className:
-          "font-inter text-sm leading-6 text-[var(--card-muted-fg)]",
+        className: "font-inter text-sm leading-6 text-[var(--card-muted-fg)]",
       }}
       mobileTimeline={{ className: "flex w-full flex-col gap-8 lg:hidden" }}
       mobileStep={{ className: "relative flex items-start" }}
       mobileVerticalLine={{
         className:
-          "absolute bottom-[-2rem] left-8 top-16 w-px bg-cyan-300 dark:bg-cyan-700",
+          "absolute bottom-[-2rem] left-8 top-16 w-px bg-[var(--process-connector)]",
       }}
       mobileStepCircle={{
         className:
-          "mr-6 flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-slate-950 text-white shadow-lg dark:bg-cyan-400 dark:text-slate-950",
+          "mr-6 flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-[var(--process-step-bg)] text-[var(--process-step-fg)] shadow-lg shadow-black/10",
       }}
       mobileStepContent={{ className: "flex-1 space-y-3 pt-2" }}
       mobileStepIcon={{ className: "text-3xl" }}
@@ -94,10 +94,9 @@ export function ProcessTimeline() {
           "font-inter text-lg font-semibold text-[var(--card-title-fg)]",
       }}
       mobileStepDescription={{
-        className:
-          "font-inter text-sm leading-6 text-[var(--card-muted-fg)]",
+        className: "font-inter text-sm leading-6 text-[var(--card-muted-fg)]",
       }}
-      ariaLabel="AI workflow process timeline"
+      ariaLabel="AI coding agent process timeline"
     />
   );
 }

package/dist/kits/blocks/app/templates/aiworkflow/components/Testimonials.tsx

@@ -5,52 +5,56 @@ import { Testimonials as SharedTestimonials } from "@/components/sections/Testim
 export function Testimonials() {
   return (
     <SharedTestimonials
-      testimonialSectionHeader="Operators, RevOps, and IT teams keep the loop closed"
+      testimonialSectionHeader="Engineers keep the loop closed"
       testimonials={[
         {
           testimonialText:
-            "We replaced manual intake, Slack follow-up, and CRM updates with one workflow that now runs end-to-end in minutes.",
-          testimonialAuthor: "- Maya Chen, RevOps Lead at Northstar",
+            "We replaced ticket triage, hand-written follow-up, and repetitive patching with one agent flow that now lands fixes in minutes.",
+          testimonialAuthor: "- Maya Chen, Platform Lead at Northstar",
           testimonialAuthorInitials: "MC",
         },
         {
           testimonialText:
-            "Approvals used to stall launches for hours. Now legal only sees the exceptions and everyone else gets live status automatically.",
-          testimonialAuthor: "- Daniel Ruiz, GTM Systems Manager",
+            "Reviews used to stall merges for hours. Now the team only sees the exceptions and everyone else gets live status automatically.",
+          testimonialAuthor: "- Daniel Ruiz, Engineering Manager",
           testimonialAuthorInitials: "DR",
         },
         {
           testimonialText:
-            "The audit trail made adoption easy. Teams trust the automations because every action is grounded, visible, and recoverable.",
-          testimonialAuthor: "- Priya Patel, Director of Operations",
+            "The audit trail made adoption easy. Teams trust the agent because every read, edit, and review is grounded, visible, and recoverable.",
+          testimonialAuthor: "- Priya Patel, Head of Developer Experience",
           testimonialAuthorInitials: "PP",
         },
       ]}
-      section={{ className: "bg-background py-18 px-6 md:py-22" }}
+      section={{
+        className: "bg-[var(--section-bg)] py-18 px-6 md:py-22",
+      }}
       container={{ className: "max-w-7xl mx-auto" }}
       header={{ className: "mb-12 text-center" }}
       heading={{
         className:
           "font-outfit text-3xl font-semibold text-[var(--heading-fg)] md:text-4xl",
       }}
-      grid={{ className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" }}
+      grid={{
+        className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3",
+      }}
       card={{
         className:
           "rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-6 text-[var(--card-fg)] shadow-[var(--card-shadow)] transition-transform duration-200 hover:-translate-y-1",
       }}
       text={{
-        className: "font-inter text-base italic leading-7 text-[var(--card-fg)]",
+        className:
+          "font-inter text-base italic leading-7 text-[var(--card-fg)]",
       }}
       author={{
-        className:
-          "font-inter text-sm font-medium text-[var(--card-muted-fg)]",
+        className: "font-inter text-sm font-medium text-[var(--card-muted-fg)]",
       }}
       avatar={{
         className:
           "flex h-12 w-12 items-center justify-center rounded-full border border-[var(--badge-border)] bg-[var(--badge-bg)] text-[var(--badge-fg)]",
       }}
       avatarText={{ className: "font-inter text-sm font-bold" }}
-      ariaLabel="AI workflow customer testimonials"
+      ariaLabel="AI coding agent customer testimonials"
     />
   );
 }

package/dist/kits/blocks/app/templates/aiworkflow/components/TrustBadges.tsx

@@ -6,32 +6,32 @@ export function TrustBadges() {
   return (
     <SharedTrustBadges
       id="trust-badges"
-      trustBadgesSectionHeader="Teams replacing manual ops with AI workflows"
+      trustBadgesSectionHeader="Teams shipping code with agents in the loop"
       badges={[
         {
-          badgeText: "72% faster routing",
-          badgeDescription: "Workflow handoffs",
+          badgeText: "Faster fixes, fewer handoffs",
+          badgeDescription: "Code handoffs",
           badgeIcon: "⚡",
         },
         {
-          badgeText: "40+ integrations",
-          badgeDescription: "Connected systems",
+          badgeText: "GitHub-native",
+          badgeDescription: "Repo + CI aware",
           badgeIcon: "🔌",
         },
         {
-          badgeText: "SOC 2 ready",
-          badgeDescription: "Security posture",
+          badgeText: "Review gates ready",
+          badgeDescription: "Approval posture",
           badgeIcon: "🔒",
         },
         {
-          badgeText: "Full audit trail",
-          badgeDescription: "Approvals + logs",
+          badgeText: "Full change trail",
+          badgeDescription: "Reads + edits + reviews",
           badgeIcon: "🧾",
         },
       ]}
       section={{
         className:
-          "border-y border-slate-200/80 bg-white/70 py-10 dark:border-slate-800 dark:bg-slate-950/60",
+          "border-y border-[var(--section-border)] bg-[var(--section-bg)] py-10",
       }}
       container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }}
       header={{ className: "mb-10 text-center" }}
@@ -42,7 +42,10 @@ export function TrustBadges() {
       badgesContainer={{
         className: "flex flex-wrap items-center justify-center gap-8 md:gap-12",
       }}
-      badge={{ className: "min-w-[170px] text-center" }}
+      badge={{
+        className:
+          "min-w-[170px] rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] px-4 py-5 text-center shadow-[var(--card-shadow)]",
+      }}
       badgeContent={{ className: "flex flex-col items-center gap-3" }}
       icon={{ className: "text-3xl" }}
       description={{
@@ -53,7 +56,7 @@ export function TrustBadges() {
           "font-inter text-base font-semibold text-[var(--card-title-fg)]",
       }}
       layout="horizontal"
-      ariaLabel="AI workflow trust badges"
+      ariaLabel="AI coding agent trust badges"
     />
   );
 }

package/dist/kits/blocks/app/templates/aiworkflow/themes/animation.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+export function PresetThemeVars({ className, children }: Props) {
+  return (
+    <div
+      className={cn(
+        "[--btn-ring:theme(colors.amber.300)] dark:[--btn-ring:theme(colors.amber.200)]",
+
+        "[--navbar-bg:rgba(255,255,255,0.92)] dark:[--navbar-bg:linear-gradient(135deg,rgba(2,6,23,0.99)_0%,rgba(15,23,42,0.98)_32%,rgba(29,78,216,0.9)_66%,rgba(146,64,14,0.92)_100%)]",
+        "[--navbar-fg:theme(colors.slate.900)] dark:[--navbar-fg:theme(colors.white)]",
+        "[--navbar-accent:theme(colors.amber.300)] dark:[--navbar-accent:theme(colors.cyan.200)]",
+        "[--navbar-link-fg:rgba(71,85,105,0.95)] dark:[--navbar-link-fg:rgba(226,232,240,0.88)]",
+        "[--navbar-link-hover-fg:theme(colors.slate.950)] dark:[--navbar-link-hover-fg:theme(colors.white)]",
+        "[--navbar-toggle-bg:rgba(15,23,42,0.06)] dark:[--navbar-toggle-bg:rgba(255,255,255,0.06)]",
+        "[--navbar-hover-bg:rgba(59,130,246,0.08)] dark:[--navbar-hover-bg:rgba(34,211,238,0.12)]",
+        "[--navbar-ring:theme(colors.blue.400)] dark:[--navbar-ring:theme(colors.amber.300)]",
+        "[--navbar-border:rgba(148,163,184,0.18)] dark:[--navbar-border:rgba(255,255,255,0.1)]",
+
+        "[--input-bg:rgba(255,255,255,0.94)] dark:[--input-bg:linear-gradient(180deg,rgba(2,6,23,0.98)_0%,rgba(15,23,42,0.96)_52%,rgba(30,41,59,0.94)_100%)]",
+        "[--input-fg:theme(colors.slate.900)] dark:[--input-fg:theme(colors.white)]",
+        "[--input-placeholder:rgba(100,116,139,0.82)] dark:[--input-placeholder:rgba(148,163,184,0.68)]",
+        "[--input-border:rgba(148,163,184,0.3)] dark:[--input-border:rgba(148,163,184,0.18)]",
+        "[--input-focus-ring:theme(colors.amber.300)] dark:[--input-focus-ring:theme(colors.cyan.300)]",
+        "[--input-ring-offset:theme(colors.slate.950)] dark:[--input-ring-offset:theme(colors.slate.950)]",
+
+        "[--card-bg:rgba(255,255,255,0.96)] dark:[--card-bg:linear-gradient(180deg,rgba(2,6,23,0.98)_0%,rgba(15,23,42,0.96)_52%,rgba(30,41,59,0.94)_100%)]",
+        "[--card-fg:theme(colors.slate.900)] dark:[--card-fg:theme(colors.white)]",
+        "[--card-title-fg:theme(colors.slate.900)] dark:[--card-title-fg:theme(colors.white)]",
+        "[--card-muted-fg:rgba(71,85,105,0.9)] dark:[--card-muted-fg:rgba(203,213,225,0.82)]",
+        "[--card-border:rgba(148,163,184,0.24)] dark:[--card-border:rgba(148,163,184,0.14)]",
+        "[--card-shadow:0_28px_90px_rgba(2,6,23,0.48)] dark:[--card-shadow:0_34px_120px_rgba(0,0,0,0.72)]",
+
+        "[--badge-bg:rgba(255,255,255,0.9)] dark:[--badge-bg:linear-gradient(180deg,rgba(15,23,42,0.86)_0%,rgba(30,41,59,0.8)_100%)]",
+        "[--badge-fg:theme(colors.slate.900)] dark:[--badge-fg:rgba(255,255,255,0.95)]",
+        "[--badge-border:rgba(148,163,184,0.24)] dark:[--badge-border:rgba(148,163,184,0.16)]",
+        "[--badge-active-bg:linear-gradient(135deg,theme(colors.blue.500)_0%,theme(colors.amber.300)_52%,theme(colors.cyan.400)_100%)] dark:[--badge-active-bg:linear-gradient(135deg,theme(colors.blue.400)_0%,theme(colors.amber.200)_52%,theme(colors.cyan.300)_100%)]",
+        "[--badge-active-fg:theme(colors.slate.950)] dark:[--badge-active-fg:theme(colors.slate.950)]",
+        "[--badge-active-border:rgba(255,255,255,0.14)] dark:[--badge-active-border:rgba(255,255,255,0.12)]",
+
+        "[--heading-fg:theme(colors.slate.950)] dark:[--heading-fg:theme(colors.white)]",
+        "[--subheading-fg:rgba(37,99,235,0.92)] dark:[--subheading-fg:rgba(125,211,252,0.94)]",
+        "[--description-fg:rgba(71,85,105,0.92)] dark:[--description-fg:rgba(226,232,240,0.86)]",
+
+        "[--hero-cta-primary-bg:linear-gradient(135deg,theme(colors.blue.600)_0%,theme(colors.amber.400)_52%,theme(colors.slate.900)_100%)] dark:[--hero-cta-primary-bg:linear-gradient(135deg,theme(colors.blue.500)_0%,theme(colors.amber.300)_52%,theme(colors.slate.900)_100%)]",
+        "[--hero-cta-primary-hover-bg:linear-gradient(135deg,theme(colors.amber.400)_0%,theme(colors.blue.600)_36%,theme(colors.cyan.400)_70%,theme(colors.slate.900)_100%)] dark:[--hero-cta-primary-hover-bg:linear-gradient(135deg,theme(colors.amber.300)_0%,theme(colors.blue.500)_36%,theme(colors.cyan.300)_70%,theme(colors.slate.900)_100%)]",
+        "[--hero-cta-primary-fg:theme(colors.slate.950)] dark:[--hero-cta-primary-fg:theme(colors.slate.950)]",
+        "[--hero-cta-primary-hover-fg:theme(colors.slate.950)] dark:[--hero-cta-primary-hover-fg:theme(colors.slate.950)]",
+        "[--hero-cta-secondary-bg:rgba(255,255,255,0.86)] dark:[--hero-cta-secondary-bg:rgba(15,23,42,0.8)]",
+        "[--hero-cta-secondary-fg:theme(colors.slate.900)] dark:[--hero-cta-secondary-fg:theme(colors.white)]",
+        "[--hero-cta-secondary-border:rgba(148,163,184,0.28)] dark:[--hero-cta-secondary-border:rgba(148,163,184,0.18)]",
+        "[--hero-cta-secondary-hover-bg:rgba(255,255,255,0.98)] dark:[--hero-cta-secondary-hover-bg:rgba(30,41,59,0.9)]",
+        "[--hero-cta-secondary-hover-fg:theme(colors.white)] dark:[--hero-cta-secondary-hover-fg:theme(colors.white)]",
+
+        "[--demo-shell-bg:linear-gradient(180deg,#020617_0%,#0f172a_26%,#1e3a8a_64%,#78350f_100%)] dark:[--demo-shell-bg:linear-gradient(180deg,#020617_0%,#0f172a_30%,#1e3a8a_64%,#78350f_100%)]",
+        "[--demo-shell-muted-bg:#020617] dark:[--demo-shell-muted-bg:#020617]",
+        "[--demo-shell-strong-bg:rgba(255,255,255,0.08)] dark:[--demo-shell-strong-bg:rgba(255,255,255,0.06)]",
+        "[--demo-panel-bg:linear-gradient(180deg,rgba(2,6,23,0.98)_0%,rgba(15,23,42,0.96)_100%)] dark:[--demo-panel-bg:linear-gradient(180deg,rgba(2,6,23,0.98)_0%,rgba(15,23,42,0.96)_100%)]",
+        "[--demo-panel-muted-bg:linear-gradient(180deg,rgba(30,64,175,0.34)_0%,rgba(180,83,9,0.36)_100%)] dark:[--demo-panel-muted-bg:linear-gradient(180deg,rgba(15,23,42,0.92)_0%,rgba(30,41,59,0.9)_100%)]",
+        "[--demo-panel-subtle-bg:linear-gradient(180deg,rgba(30,41,59,0.94)_0%,rgba(15,23,42,0.96)_100%)] dark:[--demo-panel-subtle-bg:linear-gradient(180deg,rgba(51,65,85,0.9)_0%,rgba(30,64,175,0.84)_100%)]",
+        "[--demo-panel-strong-bg:rgba(255,255,255,0.08)] dark:[--demo-panel-strong-bg:rgba(255,255,255,0.06)]",
+        "[--demo-code-bg:linear-gradient(180deg,rgba(2,6,23,0.98)_0%,rgba(15,23,42,0.96)_100%)] dark:[--demo-code-bg:linear-gradient(180deg,rgba(2,6,23,0.99)_0%,rgba(15,23,42,0.98)_100%)]",
+        "[--demo-code-gutter-bg:linear-gradient(180deg,rgba(15,23,42,0.98)_0%,rgba(30,64,175,0.9)_100%)] dark:[--demo-code-gutter-bg:linear-gradient(180deg,rgba(2,6,23,0.98)_0%,rgba(30,41,59,0.96)_100%)]",
+        "[--demo-border:rgba(148,163,184,0.22)] dark:[--demo-border:rgba(148,163,184,0.12)]",
+        "[--demo-border-strong:rgba(251,191,36,0.18)] dark:[--demo-border-strong:rgba(96,165,250,0.2)]",
+        "[--demo-fg:rgba(255,255,255,0.98)] dark:[--demo-fg:rgba(255,255,255,0.98)]",
+        "[--demo-muted-fg:rgba(226,232,240,0.9)] dark:[--demo-muted-fg:rgba(226,232,240,0.86)]",
+        "[--demo-subtle-fg:rgba(191,219,254,0.94)] dark:[--demo-subtle-fg:rgba(147,197,253,0.9)]",
+        "[--demo-accent:theme(colors.amber.300)] dark:[--demo-accent:theme(colors.cyan.200)]",
+        "[--demo-accent-soft-bg:rgba(251,191,36,0.1)] dark:[--demo-accent-soft-bg:rgba(34,211,238,0.12)]",
+        "[--demo-info:theme(colors.blue.300)] dark:[--demo-info:theme(colors.cyan.200)]",
+        "[--demo-info-border:rgba(96,165,250,0.28)] dark:[--demo-info-border:rgba(103,232,249,0.22)]",
+        "[--demo-info-soft-bg:rgba(59,130,246,0.1)] dark:[--demo-info-soft-bg:rgba(34,211,238,0.08)]",
+        "[--demo-success:theme(colors.green.300)] dark:[--demo-success:theme(colors.green.300)]",
+        "[--demo-success-border:rgba(74,222,128,0.24)] dark:[--demo-success-border:rgba(110,231,183,0.18)]",
+        "[--demo-success-soft-bg:rgba(34,197,94,0.1)] dark:[--demo-success-soft-bg:rgba(16,185,129,0.08)]",
+        "[--demo-warning:theme(colors.amber.300)] dark:[--demo-warning:theme(colors.amber.300)]",
+        "[--demo-warning-border:rgba(251,191,36,0.28)] dark:[--demo-warning-border:rgba(251,191,36,0.2)]",
+        "[--demo-warning-soft-bg:rgba(245,158,11,0.1)] dark:[--demo-warning-soft-bg:rgba(245,158,11,0.08)]",
+        "[--demo-danger:theme(colors.red.300)] dark:[--demo-danger:theme(colors.red.300)]",
+        "[--demo-danger-border:rgba(248,113,113,0.28)] dark:[--demo-danger-border:rgba(251,113,133,0.2)]",
+        "[--demo-danger-soft-bg:rgba(239,68,68,0.1)] dark:[--demo-danger-soft-bg:rgba(244,63,94,0.08)]",
+        "[--demo-scroll-track:rgba(148,163,184,0.14)] dark:[--demo-scroll-track:rgba(148,163,184,0.08)]",
+        "[--demo-scroll-thumb:linear-gradient(180deg,rgba(59,130,246,0.82),rgba(251,191,36,0.82),rgba(34,211,238,0.82))] dark:[--demo-scroll-thumb:linear-gradient(180deg,rgba(59,130,246,0.64),rgba(251,191,36,0.64),rgba(34,211,238,0.64))]",
+        "[--demo-shell-shadow:0_34px_120px_-48px_rgba(2,6,23,0.75)] dark:[--demo-shell-shadow:0_40px_140px_-56px_rgba(0,0,0,0.92)]",
+        "[--demo-shell-ring:rgba(251,191,36,0.18)] dark:[--demo-shell-ring:rgba(96,165,250,0.14)]",
+
+        "[--section-bg:radial-gradient(circle_at_top,rgba(59,130,246,0.08)_0%,rgba(14,165,233,0.06)_18%,rgba(251,191,36,0.06)_34%,rgba(248,250,252,1)_62%,rgba(241,245,249,1)_100%)] dark:[--section-bg:radial-gradient(circle_at_top,rgba(59,130,246,0.14)_0%,rgba(14,165,233,0.08)_18%,rgba(251,191,36,0.1)_34%,rgba(2,6,23,0.72)_62%,rgba(2,6,23,1)_100%)]",
+
+        "[--section-border:rgba(148,163,184,0.18)] dark:[--section-border:rgba(148,163,184,0.1)]",
+
+        "[--contact-section-bg:radial-gradient(circle_at_top,rgba(59,130,246,0.06)_0%,rgba(251,191,36,0.06)_24%,rgba(239,68,68,0.05)_46%,rgba(248,250,252,1)_74%,rgba(241,245,249,1)_100%)] dark:[--contact-section-bg:radial-gradient(circle_at_top,rgba(59,130,246,0.1)_0%,rgba(251,191,36,0.08)_24%,rgba(239,68,68,0.08)_46%,rgba(2,6,23,0.94)_74%,rgba(2,6,23,1)_100%)]",
+
+        "[--contact-submit-bg:linear-gradient(135deg,theme(colors.blue.600)_0%,theme(colors.amber.400)_28%,theme(colors.cyan.400)_58%,theme(colors.slate.900)_100%)] dark:[--contact-submit-bg:linear-gradient(135deg,theme(colors.blue.500)_0%,theme(colors.amber.300)_28%,theme(colors.cyan.300)_58%,theme(colors.slate.900)_100%)]",
+        "[--contact-submit-fg:theme(colors.slate.950)] dark:[--contact-submit-fg:theme(colors.slate.950)]",
+        "[--contact-submit-hover-bg:linear-gradient(135deg,theme(colors.amber.400)_0%,theme(colors.blue.600)_28%,theme(colors.cyan.400)_58%,theme(colors.slate.900)_100%)] dark:[--contact-submit-hover-bg:linear-gradient(135deg,theme(colors.amber.300)_0%,theme(colors.blue.500)_28%,theme(colors.cyan.300)_58%,theme(colors.slate.900)_100%)]",
+        "[--contact-submit-hover-fg:theme(colors.slate.950)] dark:[--contact-submit-hover-fg:theme(colors.slate.950)]",
+        "[--contact-submit-border:transparent]",
+
+        "[--cta-section-bg:radial-gradient(circle_at_top,rgba(59,130,246,0.06)_0%,rgba(251,191,36,0.06)_18%,rgba(14,165,233,0.05)_36%,rgba(99,102,241,0.06)_56%,rgba(248,250,252,1)_78%,rgba(241,245,249,1)_100%)] dark:[--cta-section-bg:radial-gradient(circle_at_top,rgba(59,130,246,0.1)_0%,rgba(251,191,36,0.08)_18%,rgba(14,165,233,0.08)_36%,rgba(99,102,241,0.1)_56%,rgba(2,6,23,0.98)_78%,rgba(2,6,23,1)_100%)]",
+        "[--cta-heading-fg:theme(colors.slate.950)] dark:[--cta-heading-fg:theme(colors.white)]",
+        "[--cta-subheading-fg:rgba(37,99,235,0.9)] dark:[--cta-subheading-fg:rgba(125,211,252,0.88)]",
+        "[--cta-description-fg:rgba(71,85,105,0.92)] dark:[--cta-description-fg:rgba(226,232,240,0.86)]",
+        "[--cta-primary-bg:linear-gradient(135deg,theme(colors.blue.600)_0%,theme(colors.amber.400)_50%,theme(colors.slate.900)_100%)] dark:[--cta-primary-bg:linear-gradient(135deg,theme(colors.blue.500)_0%,theme(colors.amber.300)_50%,theme(colors.slate.900)_100%)]",
+        "[--cta-primary-fg:theme(colors.slate.950)] dark:[--cta-primary-fg:theme(colors.slate.950)]",
+        "[--cta-primary-hover-bg:linear-gradient(135deg,theme(colors.amber.400)_0%,theme(colors.blue.600)_34%,theme(colors.cyan.400)_68%,theme(colors.slate.900)_100%)] dark:[--cta-primary-hover-bg:linear-gradient(135deg,theme(colors.amber.300)_0%,theme(colors.blue.500)_34%,theme(colors.cyan.300)_68%,theme(colors.slate.900)_100%)]",
+        "[--cta-primary-hover-fg:theme(colors.slate.950)] dark:[--cta-primary-hover-fg:theme(colors.slate.950)]",
+        "[--cta-primary-border:transparent]",
+        "[--cta-secondary-bg:rgba(255,255,255,0.86)]",
+        "[--cta-secondary-fg:theme(colors.slate.900)] dark:[--cta-secondary-fg:theme(colors.white)]",
+        "[--cta-secondary-border:rgba(148,163,184,0.26)] dark:[--cta-secondary-border:rgba(148,163,184,0.16)]",
+        "[--cta-secondary-hover-bg:rgba(255,255,255,0.98)] dark:[--cta-secondary-hover-bg:rgba(30,41,59,0.86)]",
+        "[--cta-secondary-hover-fg:theme(colors.slate.900)] dark:[--cta-secondary-hover-fg:theme(colors.white)]",
+
+        "[--process-step-bg:linear-gradient(135deg,theme(colors.blue.600)_0%,theme(colors.amber.400)_48%,theme(colors.cyan.400)_100%)] dark:[--process-step-bg:linear-gradient(135deg,theme(colors.blue.500)_0%,theme(colors.amber.300)_48%,theme(colors.cyan.300)_100%)]",
+        "[--process-step-fg:theme(colors.slate.950)] dark:[--process-step-fg:theme(colors.slate.950)]",
+        "[--process-connector:rgba(148,163,184,0.24)] dark:[--process-connector:rgba(148,163,184,0.22)]",
+
+        "[--footer-bg:linear-gradient(180deg,rgba(248,250,252,1)_0%,rgba(241,245,249,1)_34%,rgba(226,232,240,1)_68%,rgba(248,250,252,1)_100%)] dark:[--footer-bg:linear-gradient(180deg,rgba(2,6,23,0.9)_0%,rgba(15,23,42,0.92)_34%,rgba(30,41,59,0.88)_68%,rgba(2,6,23,0.98)_100%)]",
+
+        "[--footer-fg:rgba(71,85,105,0.92)] dark:[--footer-fg:rgba(226,232,240,0.88)]",
+        "[--footer-heading-fg:theme(colors.slate.900)] dark:[--footer-heading-fg:theme(colors.white)]",
+        "[--footer-link-fg:rgba(51,65,85,0.9)] dark:[--footer-link-fg:rgba(203,213,225,0.86)]",
+        "[--footer-link-hover-fg:theme(colors.slate.950)] dark:[--footer-link-hover-fg:theme(colors.white)]",
+        "[--footer-link-hover-bg:rgba(59,130,246,0.06)] dark:[--footer-link-hover-bg:rgba(255,255,255,0.06)]",
+        "[--footer-muted-fg:rgba(37,99,235,0.76)] dark:[--footer-muted-fg:rgba(148,163,184,0.76)]",
+        "[--footer-border:rgba(148,163,184,0.18)] dark:[--footer-border:rgba(148,163,184,0.08)]",
+
+        "[--table-fg:theme(colors.slate.900)]",
+        "[--table-muted-fg:rgba(71,85,105,0.88)] dark:[--table-muted-fg:rgba(148,163,184,0.8)]",
+        "[--table-head-fg:theme(colors.slate.900)] dark:[--table-head-fg:rgba(191,219,254,0.96)]",
+        "[--table-border:rgba(148,163,184,0.18)] dark:[--table-border:rgba(148,163,184,0.1)]",
+        "[--table-row-hover-bg:rgba(59,130,246,0.1)] dark:[--table-row-hover-bg:rgba(34,211,238,0.06)]",
+
+        "[--faq-btn-bg:rgba(255,255,255,0.88)] dark:[--faq-btn-bg:rgba(15,23,42,0.72)]",
+        "[--faq-btn-fg:theme(colors.slate.900)] dark:[--faq-btn-fg:theme(colors.white)]",
+        "[--faq-btn-hover-bg:rgba(255,255,255,0.98)] dark:[--faq-btn-hover-bg:rgba(30,41,59,0.86)]",
+        "[--faq-btn-hover-fg:theme(colors.slate.900)] dark:[--faq-btn-hover-fg:theme(colors.white)]",
+        "[--faq-answer-bg:rgba(255,255,255,0.96)] dark:[--faq-answer-bg:linear-gradient(180deg,rgba(2,6,23,0.98)_0%,rgba(15,23,42,0.96)_100%)]",
+        "[--faq-answer-fg:theme(colors.slate.900)] dark:[--faq-answer-fg:rgba(241,245,249,0.92)]",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}