Spaces:

BikoToday
/

acumullit-sa-launch-landing

Running

App Files Files Community

BikoToday commited on Dec 18, 2025

Commit

809647e

verified ·

1 Parent(s): 7093c92

## ✅ DEEPSITE MASTER PROMPT (WITH FULL CODE)

Browse files

**Prompt to Deepsite:**

Build a single full-viewport premium animated launch landing section for a health and wellness brand aligned to **APLGO / Acumullit SA®**. The experience must feel calm, premium, nature-led and science-backed — not loud, not salesy, not MLM-like. Use deep forest greens, mint/leaf greens, and soft gold accents. Use glassmorphism UI (blurred card), subtle glow, clean modern typography, and smooth calming motion.

**Critical timezone requirement:** The countdown MUST be calculated using **South African time** (IANA timezone: **Africa/Johannesburg**) regardless of the visitor’s device timezone.

**Critical launch logic:** The countdown target is **12:00 noon SAST**.

* If current SAST time is **before 12:00**, count down to **today at 12:00 SAST**.
* If current SAST time is **after 12:00** (example: 13:04 SAST), count down to **tomorrow at 12:00 SAST**.
The timer displays **Hours, Minutes, Seconds**.

**Animations required:**

* Global “breathing rhythm” motion synced across UI (gentle scale + glow pulse)
* Floating pollen / nature particles drifting in background (canvas)
* Flip-style animated digits when values change + soft ripple shimmer on each change
* Subtle moving mist/gradient background layer

**Audio required (must be user-activated only):**

* Provide a button to toggle a soft ambient wellness pulse sound
* Must not autoplay (browser compliant)
* Toggle button text: “🔊 Enable ambient pulse” ↔ “🔇 Disable ambient pulse”

**CTA required:**

* Add a large rounded CTA button under the timer that says: **“Preorder Now”**
* On click, open WhatsApp to **+27 60 758 6902** with a prefilled message:
“Hi Zanele, I’d like to preorder Acumullit SA and be notified at launch.”
* Use wa.me format and open in a new tab

**Technical requirement:** Output a single self-contained HTML block suitable for a Deepsite Custom HTML block with inline CSS + inline JS. No external libraries or assets. Fully responsive mobile + desktop.

Use the following code exactly:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Acumullit SA® Launch Countdown</title>

<style>
:root{
/* Premium wellness palette (APLGO/Acumullit SA feel) */
--bg1:#061a12;
--bg2:#0b2a1d;
--bg3:#0f3a2a;

--mint:#7ef2c2;
--leaf:#4ad07a;
--deep:#0c261c;

--gold:#d7b56d;
--fog: rgba(255,255,255,.08);

--text:#eafff5;
--muted: rgba(234,255,245,.75);
}

@keyframes breathe {
0% { transform: scale(1); filter: saturate(1) brightness(1); }
50% { transform: scale(1.018); filter: saturate(1.08) brightness(1.05); }
100% { transform: scale(1); filter: saturate(1) brightness(1); }
}

@keyframes glowPulse {
0% { box-shadow: 0 0 18px rgba(126,242,194,.22), 0 0 40px rgba(215,181,109,.10); }
50% { box-shadow: 0 0 30px rgba(126,242,194,.55), 0 0 75px rgba(215,181,109,.18); }
100% { box-shadow: 0 0 18px rgba(126,242,194,.22), 0 0 40px rgba(215,181,109,.10); }
}

@keyframes drift {
0% { transform: translate(0,0); }
50% { transform: translate(16px,-10px); }
100% { transform: translate(0,0); }
}

@keyframes shimmer {
0% { transform: translateX(-60%) rotate(8deg); opacity:0; }
20%{ opacity:.25; }
50%{ opacity:.15; }
100%{ transform: translateX(60%) rotate(8deg); opacity:0; }
}

@keyframes ripple {
0% { filter: drop-shadow(0 0 0 rgba(126,242,194,0)); transform: translateY(0); }
50%{ filter: drop-shadow(0 0 12px rgba(126,242,194,.45)); transform: translateY(-1px); }
100%{ filter: drop-shadow(0 0 0 rgba(126,242,194,0)); transform: translateY(0); }
}

@keyframes flipDown {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}

html, body {
margin: 0;
height: 100%;
background:
radial-gradient(1200px 700px at 20% 15%, var(--bg3), transparent 55%),
radial-gradient(900px 600px at 80% 70%, #123f2c, transparent 55%),
linear-gradient(180deg, var(--bg1), var(--bg2));
overflow: hidden;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
}

.wrap{
position: relative;
width: min(980px, 92vw);
margin: 0 auto;
height: 100vh;
display: grid;
place-items: center;
padding: 18px 0;
}

.mist{
position:absolute; inset:-40%;
background:
radial-gradient(circle at 30% 30%, rgba(126,242,194,.08), transparent 40%),
radial-gradient(circle at 70% 60%, rgba(215,181,109,.06), transparent 45%),
radial-gradient(circle at 40% 80%, rgba(74,208,122,.06), transparent 45%);
filter: blur(20px);
animation: drift 9s ease-in-out infinite;
pointer-events:none;
}

#pollen{
position:absolute; inset:0;
width:100%; height:100%;
pointer-events:none;
}

.card{
position: relative;
width: min(860px, 92vw);
border-radius: 28px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border: 1px solid rgba(126,242,194,.16);
backdrop-filter: blur(14px);
padding: clamp(18px, 3vw, 34px);
animation: breathe 5.6s ease-in-out infinite, glowPulse 4.8s ease-in-out infinite;
overflow:hidden;
}

.card::before{
content:"";
position:absolute; top:-30%; left:-40%;
width: 180%;
height: 60%;
background: linear-gradient(90deg, transparent, rgba(126,242,194,.18), rgba(215,181,109,.10), transparent);
transform: rotate(8deg);
animation: shimmer 6.5s ease-in-out infinite;
pointer-events:none;
}

.brand{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 18px;
}

.badge{
display:inline-flex;
align-items:center;
gap:10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(12,38,28,.55);
border: 1px solid rgba(126,242,194,.18);
}

.dot{
width:10px; height:10px; border-radius:50%;
background: radial-gradient(circle at 30% 30%, var(--mint), var(--leaf));
box-shadow: 0 0 16px rgba(126,242,194,.7);
animation: glowPulse 3.3s ease-in-out infinite;
}

.badge span{
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}

.title{
font-size: clamp(28px, 4vw, 48px);
line-height: 1.05;
margin: 6px 0 8px;
letter-spacing: -0.02em;
}

.subtitle{
margin: 0 0 22px;
color: var(--muted);
max-width: 60ch;
font-size: clamp(14px, 1.6vw, 16px);
}

.timer{
display:flex;
gap: clamp(10px, 2vw, 16px);
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
}

.unit{
position:relative;
width: 190px;
max-width: 44vw;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
border: 1px solid rgba(255,255,255,.10);
padding: 14px 14px 16px;
overflow:hidden;
}

.unit::after{
content:"";
position:absolute;
inset: -30%;
background:
radial-gradient(circle at 30% 40%, rgba(126,242,194,.10), transparent 42%),
radial-gradient(circle at 70% 60%, rgba(215,181,109,.07), transparent 45%);
filter: blur(14px);
animation: drift 7.2s ease-in-out infinite;
pointer-events:none;
}

.label{
position:relative;
z-index:2;
font-size: 12px;
letter-spacing:.18em;
text-transform: uppercase;
color: rgba(234,255,245,.72);
text-align:center;
margin-bottom: 10px;
}

.digits{
position:relative;
z-index:2;
display:flex;
justify-content:center;
gap: 10px;
}

.flip{
position:relative;
width: 64px;
height: 86px;
perspective: 700px;
}

.cardFace{
position:absolute;
inset:0;
border-radius: 18px;
background: rgba(6,26,18,.55);
border: 1px solid rgba(126,242,194,.18);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
display:grid;
place-items:center;
font-size: 48px;
font-weight: 700;
color: var(--text);
text-shadow: 0 0 16px rgba(126,242,194,.25);
transform-style: preserve-3d;
}

.ripple{
animation: ripple .65s ease-in-out;
}

.flip.animating .cardFace{
animation: flipDown .55s cubic-bezier(.2,.9,.2,1);
}

.ctaRow{
display:flex;
justify-content:center;
margin-top: 26px;
}

.ctaBtn{
display:inline-flex;
align-items:center;
gap:12px;
padding:16px 28px;
border-radius:999px;
background: linear-gradient(135deg, var(--mint), var(--leaf));
color:#061a12;
font-weight:700;
font-size:16px;
text-decoration:none;
border:1px solid rgba(255,255,255,.35);
box-shadow: 0 0 25px rgba(126,242,194,.55), 0 0 60px rgba(215,181,109,.25);
animation: glowPulse 3.8s ease-in-out infinite, breathe 5.6s ease-in-out infinite;
transition: transform .15s ease, filter .2s ease;
user-select:none;
}

.ctaBtn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.ctaBtn:active{ transform: translateY(0px) scale(.99); }

.hintRow{
display:flex;
justify-content:space-between;
gap:10px;
margin-top: 18px;
flex-wrap: wrap;
color: rgba(234,255,245,.68);
font-size: 12px;
}

.soundBtn{
display:inline-flex;
align-items:center;
gap:10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(12,38,28,.55);
border: 1px solid rgba(215,181,109,.22);
color: rgba(234,255,245,.92);
cursor:pointer;
user-select:none;
transition: transform .15s ease, background .2s ease;
}
.soundBtn:hover{ transform: translateY(-1px); background: rgba(12,38,28,.68); }
.soundBtn:active{ transform: translateY(0px) scale(.99); }

.tiny{ opacity:.85; }
.accent{ color: var(--gold); font-weight: 700; }

@media (max-width: 520px){
.flip{ width: 56px; height: 78px; }
.cardFace{ font-size: 44px; }
.unit{ width: 160px; }
}
</style>
</head>

<body>
<div class="wrap">
<div class="mist"></div>
<canvas id="pollen"></canvas>

<div class="card

Files changed (2) hide show

README.md +8 -5
index.html +485 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Acumullit Sa Launch Landing
-emoji: 📊
-colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Acumullit SA Launch Landing
+colorFrom: pink
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,485 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Acumullit SA® Launch Countdown</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        :root {
+            --bg1: #061a12;
+            --bg2: #0b2a1d;
+            --bg3: #0f3a2a;
+            --mint: #7ef2c2;
+            --leaf: #4ad07a;
+            --deep: #0c261c;
+            --gold: #d7b56d;
+            --text: #eafff5;
+            --muted: rgba(234,255,245,.75);
+        }
+        @keyframes breathe {
+            0%   { transform: scale(1); filter: saturate(1) brightness(1); }
+            50%  { transform: scale(1.018); filter: saturate(1.08) brightness(1.05); }
+            100% { transform: scale(1); filter: saturate(1) brightness(1); }
+        }
+        @keyframes glowPulse {
+            0%   { box-shadow: 0 0 18px rgba(126,242,194,.22), 0 0 40px rgba(215,181,109,.10); }
+            50%  { box-shadow: 0 0 30px rgba(126,242,194,.55), 0 0 75px rgba(215,181,109,.18); }
+            100% { box-shadow: 0 0 18px rgba(126,242,194,.22), 0 0 40px rgba(215,181,109,.10); }
+        }
+        @keyframes drift {
+            0%   { transform: translate(0,0); }
+            50%  { transform: translate(16px,-10px); }
+            100% { transform: translate(0,0); }
+        }
+        @keyframes shimmer {
+            0% { transform: translateX(-60%) rotate(8deg); opacity:0; }
+            20%{ opacity:.25; }
+            50%{ opacity:.15; }
+            100%{ transform: translateX(60%) rotate(8deg); opacity:0; }
+        }
+        @keyframes ripple {
+            0% { filter: drop-shadow(0 0 0 rgba(126,242,194,0)); transform: translateY(0); }
+            50%{ filter: drop-shadow(0 0 12px rgba(126,242,194,.45)); transform: translateY(-1px); }
+            100%{ filter: drop-shadow(0 0 0 rgba(126,242,194,0)); transform: translateY(0); }
+        }
+        @keyframes flipDown {
+            0% { transform: rotateX(0deg); }
+            100% { transform: rotateX(-180deg); }
+        }
+        .breathing {
+            animation: breathe 5.6s ease-in-out infinite;
+        }
+        .glow-pulse {
+            animation: glowPulse 4.8s ease-in-out infinite;
+        }
+        .drift {
+            animation: drift 9s ease-in-out infinite;
+        }
+        .shimmer {
+            animation: shimmer 6.5s ease-in-out infinite;
+        }
+        .flip.animating .cardFace {
+            animation: flipDown .55s cubic-bezier(.2,.9,.2,1);
+        }
+        .ripple {
+            animation: ripple .65s ease-in-out;
+        }
+        .pollen-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body class="min-h-screen overflow-hidden" style="background: radial-gradient(1200px 700px at 20% 15%, var(--bg3), transparent 55%), radial-gradient(900px 600px at 80% 70%, #123f2c, transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg2)); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text);">
+    <div class="relative w-full min-h-screen flex items-center justify-center px-4 py-4">
+        <!-- Moving mist background -->
+        <div class="absolute inset-0 -m-40" style="background: radial-gradient(circle at 30% 30%, rgba(126,242,194,.08), transparent 40%), radial-gradient(circle at 70% 60%, rgba(215,181,109,.06), transparent 45%), radial-gradient(circle at 40% 80%, rgba(74,208,122,.06), transparent 45%); filter: blur(20px); animation: drift 9s ease-in-out infinite;"></div>
+        <!-- Pollen particles canvas -->
+        <canvas id="pollen" class="pollen-canvas"></canvas>
+        <!-- Main glassmorphism card -->
+        <div class="relative w-full max-w-5xl rounded-3xl backdrop-blur-xl bg-white/6 border border-emerald-400/20 p-6 md:p-8 breathing glow-pulse overflow-hidden" id="card">
+            <!-- Shimmer effect -->
+            <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
+                <div class="absolute -top-1/3 -left-2/5 w-[180%] h-3/5" style="background: linear-gradient(90deg, transparent, rgba(126,242,194,.18), rgba(215,181,109,.10), transparent); transform: rotate(8deg); animation: shimmer 6.5s ease-in-out infinite;"></div>
+            </div>
+            <!-- Header with badges -->
+            <div class="flex items-center justify-between gap-3 mb-6 flex-wrap">
+                <div class="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-emerald-900/60 border border-emerald-400/20">
+                    <div class="w-2.5 h-2.5 rounded-full" style="background: radial-gradient(circle at 30% 30%, var(--mint), var(--leaf)); box-shadow: 0 0 16px rgba(126,242,194,.7); animation: glowPulse 3.3s ease-in-out infinite;"></div>
+                    <span class="text-xs font-semibold tracking-widest uppercase" style="color: var(--muted);">Acumullit SA® • APLGO Wellness Launch</span>
+                </div>
+                <div class="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-emerald-900/60 border border-amber-400/20">
+                    <span class="text-xs font-semibold tracking-widest uppercase" style="color: var(--muted);">Countdown uses <span class="text-amber-400 font-bold">SAST</span> • Next <span class="text-amber-400 font-bold">12:00</span></span>
+                </div>
+            </div>
+            <!-- Main content -->
+            <div class="text-center mb-8">
+                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight tracking-tight">Your wellness journey goes live in…</h1>
+                <p class="text-base md:text-lg max-w-3xl mx-auto leading-relaxed" style="color: var(--muted);">
+                    A premium, nature-led wellness experience — with a clean, science-backed feel.
+                    Preorder now and get notified the moment we go live.
+                </p>
+            </div>
+            <!-- Countdown timer -->
+            <div class="flex flex-wrap gap-4 justify-center mt-6">
+                <!-- Hours -->
+                <div class="relative w-48 md:w-56 rounded-2xl bg-white/7 border border-white/10 p-4 overflow-hidden">
+                    <div class="absolute inset-0 -m-20" style="background: radial-gradient(circle at 30% 40%, rgba(126,242,194,.10), transparent 42%), radial-gradient(circle at 70% 60%, rgba(215,181,109,.07), transparent 45%); filter: blur(14px); animation: drift 7.2s ease-in-out infinite;"></div>
+                    <div class="relative z-10 text-center mb-3">
+                        <div class="text-xs font-semibold tracking-widest uppercase" style="color: rgba(234,255,245,.72);">Hours</div>
+                    </div>
+                    <div class="relative z-10 flex justify-center gap-3">
+                        <div class="flip relative w-16 h-20 md:w-16 md:h-24 perspective-700" id="h1">
+                            <div class="cardFace absolute inset-0 rounded-xl bg-emerald-950/60 border border-emerald-400/20 flex items-center justify-center text-4xl md:text-5xl font-bold text-white shadow-lg">
+                                0
+                            </div>
+                        </div>
+                        <div class="flip relative w-16 h-20 md:w-16 md:h-24 perspective-700" id="h2">
+                            <div class="cardFace absolute inset-0 rounded-xl bg-emerald-950/60 border border-emerald-400/20 flex items-center justify-center text-4xl md:text-5xl font-bold text-white shadow-lg">
+                                0
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Minutes -->
+                <div class="relative w-48 md:w-56 rounded-2xl bg-white/7 border border-white/10 p-4 overflow-hidden">
+                    <div class="absolute inset-0 -m-20" style="background: radial-gradient(circle at 30% 40%, rgba(126,242,194,.10), transparent 42%), radial-gradient(circle at 70% 60%, rgba(215,181,109,.07), transparent 45%); filter: blur(14px); animation: drift 7.2s ease-in-out infinite;"></div>
+                    <div class="relative z-10 text-center mb-3">
+                        <div class="text-xs font-semibold tracking-widest uppercase" style="color: rgba(234,255,245,.72);">Minutes</div>
+                    </div>
+                    <div class="relative z-10 flex justify-center gap-3">
+                        <div class="flip relative w-16 h-20 md:w-16 md:h-24 perspective-700" id="m1">
+                            <div class="cardFace absolute inset-0 rounded-xl bg-emerald-950/60 border border-emerald-400/20 flex items-center justify-center text-4xl md:text-5xl font-bold text-white shadow-lg">
+                                0
+                            </div>
+                        </div>
+                        <div class="flip relative w-16 h-20 md:w-16 md:h-24 perspective-700" id="m2">
+                            <div class="cardFace absolute inset-0 rounded-xl bg-emerald-950/60 border border-emerald-400/20 flex items-center justify-center text-4xl md:text-5xl font-bold text-white shadow-lg">
+                                0
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Seconds -->
+                <div class="relative w-48 md:w-56 rounded-2xl bg-white/7 border border-white/10 p-4 overflow-hidden">
+                    <div class="absolute inset-0 -m-20" style="background: radial-gradient(circle at 30% 40%, rgba(126,242,194,.10), transparent 42%), radial-gradient(circle at 70% 60%, rgba(215,181,109,.07), transparent 45%); filter: blur(14px); animation: drift 7.2s ease-in-out infinite;"></div>
+                    <div class="relative z-10 text-center mb-3">
+                        <div class="text-xs font-semibold tracking-widest uppercase" style="color: rgba(234,255,245,.72);">Seconds</div>
+                    </div>
+                    <div class="relative z-10 flex justify-center gap-3">
+                        <div class="flip relative w-16 h-20 md:w-16 md:h-24 perspective-700" id="s1">
+                            <div class="cardFace absolute inset-0 rounded-xl bg-emerald-950/60 border border-emerald-400/20 flex items-center justify-center text-4xl md:text-5xl font-bold text-white shadow-lg">
+                                0
+                            </div>
+                        </div>
+                        <div class="flip relative w-16 h-20 md:w-16 md:h-24 perspective-700" id="s2">
+                            <div class="cardFace absolute inset-0 rounded-xl bg-emerald-950/60 border border-emerald-400/20 flex items-center justify-center text-4xl md:text-5xl font-bold text-white shadow-lg">
+                                0
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- CTA Button -->
+            <div class="flex justify-center mt-8">
+                <a class="inline-flex items-center gap-3 px-8 py-4 rounded-full bg-gradient-to-r from-emerald-300 to-emerald-400 text-emerald-950 font-bold text-lg no-underline border border-white/35 shadow-lg breathing glow-pulse transition-all duration-200 hover:transform hover:-translate-y-0.5 hover:brightness-105 active:transform active:translate-y-0 active:scale-95"
+                   href="https://wa.me/27607586902?text=Hi%20Zanele%2C%20I%27d%20like%20to%20preorder%20Acumullit%20SA%20and%20be%20notified%20at%20launch."
+                   target="_blank" rel="noopener">
+                    💬 Preorder Now
+                </a>
+            </div>
+            <!-- Footer hints -->
+            <div class="flex justify-between items-center gap-3 mt-6 flex-wrap text-sm" style="color: rgba(234,255,245,.68);">
+                <div class="opacity-85">Tip: Keep this tab open — the countdown stays live.</div>
+                <button id="soundBtn" class="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-emerald-900/60 border border-amber-400/25 text-emerald-50 cursor-pointer transition-all duration-200 hover:transform hover:-translate-y-0.5 hover:bg-emerald-900/70 active:transform active:translate-y-0 active:scale-95">
+                    🔊 Enable ambient pulse
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        /* ==========================
+           SAST (Africa/Johannesburg) time helpers
+           Ensures countdown is in South African time regardless of device timezone.
+           ========================== */
+        const TZ = "Africa/Johannesburg";
+        /** Get current date/time parts in SAST using Intl.formatToParts */
+        function getSASTParts(date = new Date()){
+          const parts = new Intl.DateTimeFormat("en-ZA", {
+            timeZone: TZ,
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            hour12: false
+          }).formatToParts(date);
+          const map = {};
+          for (const p of parts){
+            if (p.type !== "literal") map[p.type] = p.value;
+          }
+          return {
+            year: Number(map.year),
+            month: Number(map.month),
+            day: Number(map.day),
+            hour: Number(map.hour),
+            minute: Number(map.minute),
+            second: Number(map.second)
+          };
+        }
+        /** Convert a "SAST local" datetime,h,m,s) (Y,M,D to a UTC timestamp (ms) */
+        function sastLocalToUTCMs(y, mo, d, h, mi, s){
+          // Johannesburg is UTC+2 and has no DST currently.
+          // Convert SAST local time to UTC by subtracting 2 hours.
+          return Date.UTC(y, mo - 1, d, h - 2, mi, s);
+        }
+        /** Get next target timestamp for 12:00 noon in SAST:
+            - if now (SAST) < 12:00 => today 12:00
+            - else => tomorrow 12:00
+        */
+        function getNextNoonSASTTargetMs(){
+          const nowParts = getSASTParts(new Date());
+          const isBeforeNoon = (nowParts.hour < 12) || (nowParts.hour === 12 && nowParts.minute === 0 && nowParts.second === 0);
+          // Note: If it's exactly 12:00:00, we treat it as "before" so diff = 0 and then rolls next tick.
+          let ty = nowParts.year, tm = nowParts.month, td = nowParts.day;
+          if (!isBeforeNoon && !(nowParts.hour === 12 && nowParts.minute === 0 && nowParts.second === 0)){
+            // Move to tomorrow in SAST by using UTC Date object carefully.
+            // We'll construct today's SAST midnight as UTC then add one day.
+            const todayMidnightUTC = sastLocalToUTCMs(ty, tm, td, 0, 0, 0);
+            const tomorrowUTCDate = new Date(todayMidnightUTC + 24*60*60*1000);
+            const tParts = getSASTParts(tomorrowUTCDate);
+            ty = tParts.year; tm = tParts.month; td = tParts.day;
+          }
+          // Target is 12:00:00 SAST on (ty,tm,td)
+          return sastLocalToUTCMs(ty, tm, td, 12, 0, 0);
+        }
+        /* --- Flip digit helper --- */
+        function setFlipDigit(el, newDigit){
+          const face = el.querySelector(".cardFace");
+          const old = face.textContent;
+          if (old === String(newDigit)) return;
+          el.classList.add("animating");
+          face.classList.remove("ripple");
+          setTimeout(() => { face.textContent = String(newDigit); }, 260);
+          setTimeout(() => { face.classList.add("ripple"); }, 360);
+          setTimeout(() => { el.classList.remove("animating"); }, 560);
+        }
+        function updateCountdown(){
+          const targetMs = getNextNoonSASTTargetMs();
+          const nowMs = Date.now();
+          let diff = targetMs - nowMs;
+          if (diff < 0) diff = 0;
+          const totalSeconds = Math.floor(diff / 1000);
+          const hours = Math.floor(totalSeconds / 3600);
+          const minutes = Math.floor((totalSeconds % 3600) / 60);
+          const seconds = totalSeconds % 60;
+          const hh = String(hours).padStart(2, "0").slice(-2);
+          const mm = String(minutes).padStart(2, "0");
+          const ss = String(seconds).padStart(2, "0");
+          setFlipDigit(document.getElementById("h1"), hh[0]);
+          setFlipDigit(document.getElementById("h2"), hh[1]);
+          setFlipDigit(document.getElementById("m1"), mm[0]);
+          setFlipDigit(document.getElementById("m2"), mm[1]);
+          setFlipDigit(document.getElementById("s1"), ss[0]);
+          setFlipDigit(document.getElementById("s2"), ss[1]);
+          // breathing sync variation
+          const card = document.getElementById("card");
+          card.style.animationDuration = (5.2 + (seconds % 4) * 0.15) + "s, 4.8s";
+        }
+        setInterval(updateCountdown, 1000);
+        updateCountdown();
+        /* ==========================
+           Pollen particles (Canvas)
+           ========================== */
+        const canvas = document.getElementById("pollen");
+        const ctx = canvas.getContext("2d");
+        let W, H, particles;
+        function resize(){
+          const rect = canvas.getBoundingClientRect();
+          W = canvas.width = Math.floor(rect.width * devicePixelRatio);
+          H = canvas.height = Math.floor(rect.height * devicePixelRatio);
+          ctx.setTransform(1,0,0,1,0,0);
+          particles = makeParticles(80);
+        }
+        window.addEventListener("resize", resize);
+        function makeParticles(n){
+          const arr = [];
+          for(let i=0;i<n;i++){
+            arr.push({
+              x: Math.random()*W,
+              y: Math.random()*H,
+              r: (Math.random()*2.4 + 0.6) * devicePixelRatio,
+              vx: (Math.random()*0.35 + 0.05) * devicePixelRatio,
+              vy: (Math.random()*0.25 + 0.02) * devicePixelRatio,
+              wobble: Math.random()*Math.PI*2,
+              hue: Math.random() < 0.78 ? 140 : 40,
+              a: Math.random()*0.35 + 0.10
+            });
+          }
+          return arr;
+        }
+        function draw(){
+          if(!particles) return;
+          ctx.clearRect(0,0,W,H);
+          for(const p of particles){
+            p.wobble += 0.02;
+            p.x += p.vx + Math.sin(p.wobble)*0.22*devicePixelRatio;
+            p.y += p.vy + Math.cos(p.wobble)*0.16*devicePixelRatio;
+            if(p.x > W+20) p.x = -20;
+            if(p.y > H+20) p.y = -20;
+            ctx.beginPath();
+            ctx.fillStyle = `hsla(${p.hue}, 65%, 65%, ${p.a})`;
+            ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
+            ctx.fill();
+          }
+          requestAnimationFrame(draw);
+        }
+        resize();
+        draw();
+        /* ==========================
+           Ambient Sound Pulse (WebAudio) - user gesture required
+           ========================== */
+        let audioOn = false;
+        let audioCtx, gainNode, oscA, oscB, lfo, lfoGain, noiseNode, noiseGain, biquad;
+        function startAmbient(){
+          if (audioOn) return;
+          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+          gainNode = audioCtx.createGain();
+          gainNode.gain.value = 0.0001;
+          gainNode.connect(audioCtx.destination);
+          oscA = audioCtx.createOscillator();
+          oscA.type = "sine";
+          oscA.frequency.value = 174;
+          oscB = audioCtx.createOscillator();
+          oscB.type = "sine";
+          oscB.frequency.value = 261.63;
+          // noise buffer
+          const bufferSize = 2 * audioCtx.sampleRate;
+          const noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
+          const output = noiseBuffer.getChannelData(0);
+          for (let i=0; i<bufferSize; i++){
+            output[i] = (Math.random() * 2 - 1) * 0.25;
+          }
+          noiseNode = audioCtx.createBufferSource();
+          noiseNode.buffer = noiseBuffer;
+          noiseNode.loop = true;
+          biquad = audioCtx.createBiquadFilter();
+          biquad.type = "lowpass";
+          biquad.frequency.value = 420;
+          noiseGain = audioCtx.createGain();
+          noiseGain.gain.value = 0.02;
+          // breathing LFO
+          lfo = audioCtx.createOscillator();
+          lfo.type = "sine";
+          lfo.frequency.value = 0.16;
+          lfoGain = audioCtx.createGain();
+          lfoGain.gain.value = 0.08;
+          lfo.connect(lfoGain);
+          lfoGain.connect(gainNode.gain);
+          const toneGain = audioCtx.createGain();
+          toneGain.gain.value = 0.06;
+          oscA.connect(toneGain);
+          oscB.connect(toneGain);
+          toneGain.connect(gainNode);
+          noiseNode.connect(biquad);
+          biquad.connect(noiseGain);
+          noiseGain.connect(gainNode);
+          oscA.start();
+          oscB.start();
+          noiseNode.start();
+          lfo.start();
+          const now = audioCtx.currentTime;
+          gainNode.gain.setValueAtTime(0.0001, now);
+          gainNode.gain.exponentialRampToValueAtTime(0.06, now + 1.2);
+          audioOn = true;
+        }
+        function stopAmbient(){
+          if (!audioOn) return;
+          const now = audioCtx.currentTime;
+          gainNode.gain.exponentialRampToValueAtTime(0.0001, now + 0.8);
+          setTimeout(() => {
+            try{
+              oscA.stop(); oscB.stop(); noiseNode.stop(); lfo.stop();
+              audioCtx.close();
+            }catch(e){}
+            audioOn = false;
+          }, 900);
+        }
+        const soundBtn = document.getElementById("soundBtn");
+        soundBtn.addEventListener("click", () => {
+          if(!audioOn){
+            try{
+              startAmbient();
+              soundBtn.textContent = "🔇 Disable ambient pulse";
+            }catch(e){
+              soundBtn.textContent = "⚠️ Sound blocked (tap again)";
+            }
+          } else {
+            stopAmbient();
+            soundBtn.textContent = "🔊 Enable ambient pulse";
+          }
+        });
+        // Initialize icons if needed
+        if (typeof feather !== 'undefined') {
+            feather.replace();
+        }
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>