diff --git a/src/index.css b/src/index.css
index 3f35e5a..1ae4a3b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,15 +6,15 @@
 
 :root {
   /* @colorThemes/lightTheme/warm-luxury */
-  --background: #faf8f5;
-  --card: #ffffff;
-  --foreground: #1a1a1a;
-  --primary-cta: #1a1a1a;
-  --primary-cta-text: #faf8f5;
-  --secondary-cta: #f0ece6;
-  --secondary-cta-text: #1a1a1a;
-  --accent: #c9a96e;
-  --background-accent: #f0ece6;
+  --background: #0a0a0a;
+  --card: #141414;
+  --foreground: #f5f5f5;
+  --primary-cta: #ff3333;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #262626;
+  --secondary-cta-text: #f5f5f5;
+  --accent: #ff3333;
+  --background-accent: #1a1a1a;
 
   /* @layout/border-radius/soft */
   --radius: 0.75rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index e7bf7c5..0a047be 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,69 +1,31 @@
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in the sibling sections/ folder (one file per section).
+// Edit those section files directly. Non-block content (wrappers,
+// non-inlinable sections) is preserved inline; extracted section blocks
+// become component refs.
+
 import { StyleProvider } from "@/components/ui/StyleProvider";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
-import HeroVideoScroll from "@/components/sections/hero/HeroVideoScroll";
-import AboutTextFill from "@/components/sections/about/AboutTextFill";
-import FeaturesMediaColumns from "@/components/sections/features/FeaturesMediaColumns";
-import ContactParallaxCard from "@/components/sections/contact/ContactParallaxCard";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import PropertiesSection from './HomePage/sections/Properties';
+import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage() {
+export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
         <SiteBackgroundSlot />
 
         
 
-        <div id="hero" data-section="hero">
-          <HeroVideoScroll
-            textAnimation="fade"
-            videoSrc="https://storage.googleapis.com/webild/default/templates/marbella/hero/hero.mp4"
-            tag="Le Cercle Premium Real Estate"
-            title="Live Where the Sun Meets the Sea"
-            description="Exclusive beachfront villas and luxury apartments on the Costa del Sol. Your Mediterranean dream, delivered turnkey."
-            primaryButton={{ text: "View Properties", href: "#properties" }}
-            secondaryButton={{ text: "Book a Tour", href: "#contact" }}
-            bottomText="A premium real estate brand designed for those seeking a refined way of living on the Costa del Sol"
-          />
-        </div>
+        <HeroSection />
 
-        <div id="about" data-section="about">
-          <AboutTextFill
-            textAnimation="fade"
-            title="For those who travel like it's an art form."
-            imageSrc="https://storage.googleapis.com/webild/default/templates/marbella/about/statement.webp"
-          />
-        </div>
+        <AboutSection />
 
-        <div id="properties" data-section="properties">
-          <FeaturesMediaColumns
-            textAnimation="fade"
-            tag="Properties"
-            title="Our Villas"
-            description="Handpicked residences in Marbella's most coveted locations, each designed for effortless Mediterranean living."
-            items={[
-              { title: "Villa Serena", description: "A sunlit 5-bedroom retreat with infinity pool, panoramic sea views, and private garden terraces.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-1.webp" },
-              { title: "Casa del Sol", description: "Contemporary beachfront living with floor-to-ceiling glass, rooftop lounge, and direct beach access.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-2.webp" },
-              { title: "Villa Andalucía", description: "Traditional charm meets modern luxury — courtyard, olive grove, and a heated outdoor pool.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-3.webp" },
-              { title: "The Meridian", description: "Sleek 4-bedroom penthouse villa with smart home technology and sweeping coastal views.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-4.webp" },
-              { title: "Villa Blanca", description: "Minimalist white-washed estate with private cinema, spa suite, and landscaped Mediterranean gardens.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-5.webp" },
-              { title: "Casa Dorada", description: "Golden-hour perfection — west-facing terraces, wine cellar, and an open-plan chef's kitchen.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-6.webp" },
-            ]}
-          />
-        </div>
+        <PropertiesSection />
 
-        <div id="contact" data-section="contact">
-          <ContactParallaxCard
-            title="Get In Touch"
-            imageSrc="https://storage.googleapis.com/webild/default/templates/marbella/contact/cta-bg.webp"
-            inputs={[
-              { name: "name", type: "text", placeholder: "Your name" },
-              { name: "email", type: "email", placeholder: "Your email" },
-            ]}
-            textarea={{ name: "message", placeholder: "Tell us about your dream property...", rows: 4 }}
-            buttonText="Send Message"
-            footerText="Prefer to talk? Book a private tour."
-            footerLink={{ text: "Email Us", href: "mailto:hello@lecercle.com", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/contact/avatar.webp" }}
-          />
-        </div>
+        <ContactSection />
 
         
       </StyleProvider>
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..93b70d0
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,17 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTextFill from "@/components/sections/about/AboutTextFill";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+              <AboutTextFill
+                textAnimation="fade"
+                title="For those who travel like it's an art form."
+                imageSrc="https://storage.googleapis.com/webild/default/templates/marbella/about/statement.webp"
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..596bbd5
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactParallaxCard from "@/components/sections/contact/ContactParallaxCard";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+              <ContactParallaxCard
+                title="Get In Touch"
+                imageSrc="https://storage.googleapis.com/webild/default/templates/marbella/contact/cta-bg.webp"
+                inputs={[
+                  { name: "name", type: "text", placeholder: "Your name" },
+                  { name: "email", type: "email", placeholder: "Your email" },
+                ]}
+                textarea={{ name: "message", placeholder: "Tell us about your dream property...", rows: 4 }}
+                buttonText="Send Message"
+                footerText="Prefer to talk? Book a private tour."
+                footerLink={{ text: "Email Us", href: "mailto:hello@lecercle.com", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/contact/avatar.webp" }}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..3a352e1
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,22 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroVideoScroll from "@/components/sections/hero/HeroVideoScroll";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+              <HeroVideoScroll
+                textAnimation="fade"
+                videoSrc="https://storage.googleapis.com/webild/default/templates/marbella/hero/hero.mp4"
+                tag="Le Cercle Premium Real Estate"
+                title="Live Where the Sun Meets the Sea"
+                description="Exclusive beachfront villas and luxury apartments on the Costa del Sol. Your Mediterranean dream, delivered turnkey."
+                primaryButton={{ text: "View Properties", href: "#properties" }}
+                secondaryButton={{ text: "Book a Tour", href: "#contact" }}
+                bottomText="A premium real estate brand designed for those seeking a refined way of living on the Costa del Sol"
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Properties.tsx b/src/pages/HomePage/sections/Properties.tsx
new file mode 100644
index 0000000..03b1348
--- /dev/null
+++ b/src/pages/HomePage/sections/Properties.tsx
@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "properties" section.
+
+import React from 'react';
+import FeaturesMediaColumns from "@/components/sections/features/FeaturesMediaColumns";
+
+export default function PropertiesSection(): React.JSX.Element {
+  return (
+    <div id="properties" data-section="properties">
+              <FeaturesMediaColumns
+                textAnimation="fade"
+                tag="Properties"
+                title="Our Villas"
+                description="Handpicked residences in Marbella's most coveted locations, each designed for effortless Mediterranean living."
+                items={[
+                  { title: "Villa Serena", description: "A sunlit 5-bedroom retreat with infinity pool, panoramic sea views, and private garden terraces.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-1.webp" },
+                  { title: "Casa del Sol", description: "Contemporary beachfront living with floor-to-ceiling glass, rooftop lounge, and direct beach access.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-2.webp" },
+                  { title: "Villa Andalucía", description: "Traditional charm meets modern luxury — courtyard, olive grove, and a heated outdoor pool.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-3.webp" },
+                  { title: "The Meridian", description: "Sleek 4-bedroom penthouse villa with smart home technology and sweeping coastal views.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-4.webp" },
+                  { title: "Villa Blanca", description: "Minimalist white-washed estate with private cinema, spa suite, and landscaped Mediterranean gardens.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-5.webp" },
+                  { title: "Casa Dorada", description: "Golden-hour perfection — west-facing terraces, wine cellar, and an open-plan chef's kitchen.", imageSrc: "https://storage.googleapis.com/webild/default/templates/marbella/properties/villa-6.webp" },
+                ]}
+              />
+            </div>
+  );
+}