You are an expert landing page developer and conversion copywriter.

Create a fun, clean, high-converting single-page HTML landing page for **Berse Solutions**, a Malaysian carpet cleaning service.

Goal:
Convert Meta Ads traffic into WhatsApp bookings.

Important rules:

* No menu.
* No navigation links.
* No external links except WhatsApp CTA.
* Customer does NOT need to upload carpet photo.
* Main action is WhatsApp only.
* Mobile-first.
* Fun, friendly, light, not corporate, not too serious.
* Use polite customer-facing language.
* Use “anda”, not “aku”, “kau”, or “ko”.
* Use playful rounded font style. Use Google Font such as **Baloo 2**, **Nunito**, or **Fredoka**.
* Theme colors: aqua blue, bright orange, white, soft light grey.
* Orange only for CTA buttons and important highlights.
* Make the page feel local Malaysian, friendly and trustworthy.

Brand:
Berse Solutions
Service: Cuci Karpet
Target: Homeowners, families, office, surau, homestay around Klang Valley / Gombak / Batu Caves.

WhatsApp CTA link:
Use placeholder:
https://wa.me/60123456789?text=Hi%20Berse%2C%20saya%20nak%20book%20slot%20cuci%20karpet

Assets / Reserved Media Positions:

1. Logo position:

   * Put logo in hero section top area.
   * Image path placeholder: /images/logo-berse.png

2. Team image:

   * Place after hero or inside hero section to build trust early.
   * Image path placeholder: /images/team-berse.jpg

3. Team working video:

   * Place in “How We Clean” section.
   * Use video placeholder with poster image.
   * Video path placeholder: /videos/team-cleaning.mp4
   * Poster placeholder: /images/video-poster.jpg

4. Before & after carpet slider:

   * Place before final CTA, after benefits/guarantee section.
   * Create interactive before-after image sliders.
   * Use 3 before-after slider cards.
   * Each card must have:

     * Before image
     * After image
     * Draggable slider handle
     * Labels: “Sebelum” and “Selepas”
   * Slider must work on desktop and mobile using vanilla JavaScript.
   * Placeholder paths:

Slider 1:
Before: /images/before-1.jpg
After: /images/after-1.jpg

Slider 2:
Before: /images/before-2.jpg
After: /images/after-2.jpg

Slider 3:
Before: /images/before-3.jpg
After: /images/after-3.jpg

Sales Page Structure using AIDA:

1. ATTENTION — Hero Section

Include logo at top.

Headline:
“Karpet Dah Lama Tak Basuh?”

Subheadline:
“Berbau. Berhabuk. Rasa segan bila tetamu datang rumah?”

Short trust line:
“Berse pickup, cuci, keringkan & hantar semula.”

CTA button:
“WhatsApp Untuk Book Slot”

Add fun microcopy:
“Senang je. WhatsApp, pilih slot, kami uruskan.”

Add image area beside/below hero:
Use team image placeholder /images/team-berse.jpg

2. INTEREST — Problem Section

Headline:
“Karpet nampak bersih… tapi belum tentu bersih.”

Use fun short cards:

* Habuk halus melekat lama
* Bau hapak bila rumah lembap
* Anak-anak selalu baring atas karpet
* Tetamu datang, baru perasan karpet nampak kusam

Keep copy short, punchy, easy to read.

3. DESIRE — Benefits Section

Headline:
“Kenapa pelanggan pilih Berse?”

Use benefit cards with playful icons:

* Pickup & delivery available
* Cucian lebih bersih, wangi & segar
* Sesuai untuk rumah, pejabat, surau dan homestay
* Booking mudah melalui WhatsApp
* Team local yang friendly
* Tak puas hati? Kami cuci semula percuma

4. PROMO SECTION

Headline:
“Promo Mid Year Berse”

Create pricing cards:

* Tatami — RM0.90/sqft
* Standard Carpet — RM1.90/sqft — Best Seller badge
* Shaggy Carpet — RM2.50/sqft

Add urgency:
“Slot promo minggu ini terhad.”

CTA:
“Claim Promo Di WhatsApp”

5. HOW WE CLEAN — Video Section

Headline:
“Tengok macam mana team Berse buat kerja”

Reserve video player area:
Use /videos/team-cleaning.mp4 with poster /images/video-poster.jpg

Below video, show 3 simple steps:

1. WhatsApp Berse
2. Kami arrange pickup
3. Karpet dicuci, dikeringkan & dihantar semula

Important:
Do NOT ask customer to upload carpet photo.

6. BEFORE & AFTER SLIDER SECTION

Headline:
“Sebelum kusam, selepas tu fresh balik.”

Subheadline:
“Slide untuk lihat beza karpet sebelum dan selepas dicuci.”

Show 3 before-after slider cards using:

Card 1:
Before: /images/before-1.jpg
After: /images/after-1.jpg

Card 2:
Before: /images/before-2.jpg
After: /images/after-2.jpg

Card 3:
Before: /images/before-3.jpg
After: /images/after-3.jpg

Each slider card should have:

* Rounded card design
* Label “Sebelum” on the before side
* Label “Selepas” on the after side
* Orange draggable handle
* Smooth drag interaction
* Works with mouse and touch
* Mobile responsive

7. GUARANTEE SECTION

Headline:
“Tak puas hati?”

Copy:
“Kami cuci semula. Percuma.”

Make this section bold, fun and reassuring.

8. FINAL CTA SECTION

Headline:
“Jangan tunggu sampai karpet makin berbau.”

Subheadline:
“Book slot promo minggu ini melalui WhatsApp.”

CTA:
“WhatsApp Sekarang”

Design Requirements:

* Fun, cheerful, clean design.
* Rounded cards, bubbly shapes, soft shadows.
* Use playful decorative blobs or circles in background.
* Font should feel friendly, not corporate.
* Strong mobile-first layout.
* Sticky WhatsApp CTA button at bottom on mobile.
* Desktop layout should still look premium and clean.
* Use CSS animations subtly, not too much.
* Use responsive images and video.
* All sections must have enough spacing.
* CTA buttons must be obvious.
* Avoid long paragraphs.
* Use Malay + simple English mix.
* Use “anda” when addressing customer directly.
* Do not use “aku”, “kau”, or “ko” anywhere in the customer-facing copy.

Technical Requirements:

* Output one complete `index.html` file only.
* Include HTML, CSS, and minimal JavaScript in same file.
* Use Google Font import.
* Include SEO title, meta description, and Open Graph tags.
* Include clear comments in code:

  * where to change WhatsApp number
  * where to replace logo
  * where to replace team image
  * where to replace video
  * where to replace before-after slider images
* Must be easy for beginner to upload to Hostinger `public_html`.
* Do not use React.
* Do not use Tailwind.
* Do not use external JS libraries.
* Use pure HTML, CSS, and vanilla JavaScript only.

Before-After Slider Technical Details:

* Use a container with two images stacked.
* The “after” image should be clipped using CSS width or clip-path.
* Add draggable vertical handle in orange.
* Add JavaScript to update slider position on mouse move and touch move.
* Default slider position should be 50%.
* Slider must not break page scrolling on mobile.
* Make sure images maintain same height and aspect ratio.
* Use `object-fit: cover`.
* Add accessible alt text for all images.

Final output:
Give me the complete production-ready `index.html` code only.