Startup Launch & Waitlist Page Template — Free Snippet
Startup Launch & Waitlist template · 6 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
Copy & paste
Source Code
<section class="st st-navbar-announcement" data-uid="smvw6s7nz8zdd">
<div class="na-bar" data-dismissable>
<p class="st-wrap na-bar-in"><span>🚀 Launching on Product Hunt, 12 November</span> <a class="na-bar-link" href="#get-started"><span>Get notified</span> <span aria-hidden="true">→</span></a></p>
<button type="button" class="na-close" data-dismiss aria-label="Dismiss announcement"><span aria-hidden="true">×</span></button>
</div>
<header class="st-wrap na">
<div class="na-left">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg></span><span>Lumina</span></span>
</a>
<nav class="na-nav" data-menu aria-label="Main">
<ul class="na-links">
<li data-menu-item><a class="na-link" href="#features"><span>Features</span></a></li>
<li data-menu-item><a class="na-link" href="#get-started"><span>Join</span></a></li>
</ul>
<div class="na-actions na-actions--menu" data-menu-item>
<a class="na-login" href="https://webdevpuneet.com/login"><span>Sign in</span></a>
<a class="st-btn" href="#get-started"><span>Join the waitlist</span></a>
</div>
</nav>
</div>
<div class="na-actions na-actions--bar">
<a class="na-login" href="https://webdevpuneet.com/login"><span>Sign in</span></a>
<a class="st-btn" href="#get-started"><span>Join the waitlist</span></a>
</div>
<button type="button" class="st-burger" data-menu-toggle aria-expanded="false" aria-label="Open menu"><span></span><span></span><span></span></button>
</header>
<i hidden data-sticky-flag></i>
</section>
<section class="st st-centered-gradient-hero" data-uid="smvw6s7o0zi7h">
<div class="cg-glow" aria-hidden="true"></div>
<div class="cg st-wrap">
<span class="st-eyebrow cg-eyebrow" data-anim="item">Coming soon</span>
<h1 class="cg-title" data-anim="item" data-anim-text>Your notes, <span class="hl">finally thinking with you</span></h1>
<p class="st-lead cg-lead" data-anim="item">Lumina turns scattered notes into answers, summaries and next steps. Join the waitlist for early access.</p>
<div class="st-btns cg-btns" data-anim="item">
<a class="st-btn" href="#get-started"><span>Join the waitlist</span></a>
<a class="st-btn st-btn--ghost" href="#features"><span>See what’s coming</span></a>
</div>
<p class="cg-note" data-anim="item">2,400 people already on the list</p>
<div class="cg-media" data-anim="media"><img width="1200" height="820" src="https://webdevpuneet.com/images/section-templates/hero-dashboard.png" alt="Acme app dashboard"></div>
</div>
</section>
<section id="features" class="st st-features-bento" data-uid="smvw6s7o0s3z8">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">What’s inside</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Built for <span class="hl">how you actually think</span></h2>
<p class="st-lead" data-anim="item"></p>
</header>
<div class="fb-grid">
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="8" height="8" x="3" y="3" rx="2" /><path d="M7 11v4a2 2 0 0 0 2 2h4" /><rect width="8" height="8" x="13" y="13" rx="2" /></svg></span>
<h3 class="fb-title">Visual automations</h3>
<p class="fb-text">Drag triggers and actions onto a canvas. No code, no scripts, no waiting on engineering.</p>
</div>
<div class="fb-media"><img loading="lazy" src="https://webdevpuneet.com/images/section-templates/feature-automation.png" alt="Workflow builder with connected trigger and action nodes"></div>
</article>
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" /><path d="M2 14h2" /><path d="M20 14h2" /><path d="M15 13v2" /><path d="M9 13v2" /></svg></span>
<h3 class="fb-title">AI assistant</h3>
<p class="fb-text">Summarise threads, draft updates and triage new requests automatically.</p>
</div>
</article>
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 14 4-4" /><path d="M3.34 19a10 10 0 1 1 17.32 0" /></svg></span>
<h3 class="fb-title">Instant search</h3>
<p class="fb-text">Find any task, doc or comment in milliseconds.</p>
</div>
</article>
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg></span>
<h3 class="fb-title">Enterprise security</h3>
<p class="fb-text">SSO, SCIM and granular roles on every workspace.</p>
</div>
</article>
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg></span>
<h3 class="fb-title">Works everywhere</h3>
<p class="fb-text">Web, desktop and mobile apps that stay in sync offline.</p>
</div>
</article>
</div>
</div>
</section>
<section id="timeline" class="st st-timeline-horizontal" data-uid="smvw6s7o0w8wc">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Roadmap</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Where Lumina is <span class="hl">heading next</span></h2>
<p class="st-lead" data-anim="item">We ship in small steps and share the plan. Keep scrolling to follow the roadmap from the beta to launch day.</p>
</header>
<div class="tlh" data-tlh data-layout="alternate" data-marker="icon" data-width="contained" data-start="1" data-mode="pin">
<button type="button" class="tlh-nav tlh-prev" data-tlh-prev disabled aria-label="Show earlier events"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
<div class="tlh-track" data-tlh-track role="region" tabindex="0" aria-label="Company timeline">
<ol class="tlh-list">
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Now</p>
<h3 class="tlh-title">Private beta</h3>
<p class="tlh-text">Notes, links and voice memos in one place, with an assistant that reads everything you save.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Private beta"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Next month</p>
<h3 class="tlh-title">Shared spaces</h3>
<p class="tlh-text">Invite a friend or a team into a notebook and think together in real time.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Shared spaces"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Spring</p>
<h3 class="tlh-title">Mobile apps</h3>
<p class="tlh-text">iOS and Android apps with offline notes and quick capture from the lock screen.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Mobile apps"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" /><path d="M12 18h.01" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Summer</p>
<h3 class="tlh-title">Public launch</h3>
<p class="tlh-text">Lumina opens to everyone, with a free plan and a Pro plan for heavy users.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Public launch"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" /><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" /><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Autumn</p>
<h3 class="tlh-title">Integrations</h3>
<p class="tlh-text">Send notes to Slack, Notion and your calendar without leaving Lumina.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Integrations"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22v-5" /><path d="M9 8V2" /><path d="M15 8V2" /><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" /></svg></span></button>
</li>
</ol>
</div>
<button type="button" class="tlh-nav tlh-next" data-tlh-next aria-label="Show later events"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
</div>
</div>
</section>
<section id="get-started" class="st st-cta-newsletter" data-uid="smvw6s7o01fly">
<div class="st-wrap">
<div class="cn" data-anim="media">
<span class="st-icon cn-icon" data-anim="item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg></span>
<h2 class="st-h2 cn-title" data-anim="item" data-anim-text>Be first in line for <span class="hl">early access</span></h2>
<p class="st-lead cn-lead" data-anim="item">We’re letting people in weekly, in the order they joined. No spam, just your invite.</p>
<form class="cn-form" data-anim="item" method="post" action="https://webdevpuneet.com/subscribe">
<input class="cn-input" type="email" required autocomplete="email" name="email" placeholder="[email protected]" aria-label="[email protected]">
<button class="st-btn cn-btn" type="submit"><span>Join the waitlist</span></button>
</form>
<p class="cn-meta" data-anim="item"><span class="cn-proof">2,400+ on the waitlist</span><span class="cn-note">We respect your inbox. Read our privacy policy.</span></p>
</div>
</div>
</section>
<section class="st st-footer-newsletter" data-uid="smvw6s7o049tr">
<footer class="st-wrap fn">
<div class="fn-top">
<div class="fn-news" data-anim="item">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg></span><span>Lumina</span></span>
</a>
<h2 class="fn-title">Launch updates</h2>
<p class="fn-text">Product news, guides and one good idea every Friday. No spam, ever.</p>
<form class="fn-form" method="post" action="https://webdevpuneet.com/subscribe">
<input class="fn-input" type="email" required autocomplete="email" name="email" placeholder="Your email address" aria-label="Your email address">
<button class="st-btn" type="submit"><span>Subscribe</span></button>
</form>
</div>
<div class="fn-cols">
<nav class="fn-col" data-anim="item" aria-label="Product">
<h2 class="fn-col-title">Product</h2>
<ul class="fn-links"><li><a href="/features/">Features</a></li><li><a href="/pricing/">Pricing</a></li><li><a href="/integrations/">Integrations</a></li><li><a href="/changelog/">Changelog</a></li></ul>
</nav>
<nav class="fn-col" data-anim="item" aria-label="Company">
<h2 class="fn-col-title">Company</h2>
<ul class="fn-links"><li><a href="/about/">About</a></li><li><a href="/careers/">Careers</a></li><li><a href="/customers/">Customers</a></li><li><a href="/contact/">Contact</a></li></ul>
</nav>
<nav class="fn-col" data-anim="item" aria-label="Resources">
<h2 class="fn-col-title">Resources</h2>
<ul class="fn-links"><li><a href="/blog/">Blog</a></li><li><a href="/guides/">Guides</a></li><li><a href="/help/">Help centre</a></li><li><a href="https://status.webdevpuneet.com">Status</a></li></ul>
</nav>
</div>
</div>
<div class="fn-bottom">
<div><ul class="st-socials">
<li><a class="st-social" href="https://x.com/" aria-label="X (Twitter)"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg></span></a></li>
<li><a class="st-social" href="https://www.linkedin.com/" aria-label="LinkedIn"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect width="4" height="12" x="2" y="9" /><circle cx="4" cy="4" r="2" /></svg></span></a></li>
<li><a class="st-social" href="https://github.com/" aria-label="GitHub"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg></span></a></li>
<li><a class="st-social" href="https://www.youtube.com/" aria-label="YouTube"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" /><path d="m10 15 5-3-5-3z" /></svg></span></a></li>
</ul></div>
<p class="fn-copy">© 2026 Lumina Labs</p>
<ul class="fn-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/terms/">Terms</a></li></ul>
</div>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#fff7f9}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#e11d48;--st-btn-text:#ffffff;--st-bg:#fff7f9;--st-surface:#fde8ee;--st-text:#2b0b14;--st-muted:#7d4d5a;--st-radius:14;--st-max:1200;--st-font-heading:"Space Grotesk", sans-serif;--st-font-body:"Inter", sans-serif}
.st{--st-pad:clamp(20px,5cqi,56px);container:st/inline-size;position:relative;overflow:hidden;background:var(--st-bg);color:var(--st-text);font-family:var(--st-font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.st) *,:where(.st) *::before,:where(.st) *::after{box-sizing:border-box;margin:0;padding:0}
:where(.st img){display:block;max-width:100%;height:auto}
:where(.st a){color:inherit}
:where(.st h1,.st h2,.st h3){font-family:var(--st-font-heading);line-height:1.08;letter-spacing:-.025em;font-weight:800;color:var(--st-text)}
.st .hl{color:var(--st-brand)}
.st [data-edit]:empty,.st [data-i-edit]:empty{display:none}
.st-wrap{width:100%;max-width:calc(var(--st-max) * 1px);margin:0 auto;padding-left:var(--st-pad);padding-right:var(--st-pad)}
.st-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.st-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand);font-size:13.5px;font-weight:700}
.st-btns{display:flex;flex-wrap:wrap;gap:12px}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:calc(var(--st-radius) * 1px);border:2px solid var(--st-brand);background:var(--st-brand);color:var(--st-btn-text);font:700 16px/1 var(--st-font-body);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.st-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px color-mix(in srgb,var(--st-brand) 35%,transparent)}
.st-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:3px}
.st-btn--ghost{background:transparent;color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 22%,transparent)}
.st-btn--ghost:hover{box-shadow:none;border-color:var(--st-text)}
.st-lead{font-size:clamp(17px,1.2cqi + 12px,20px);line-height:1.65;color:var(--st-muted)}
.st-head{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:46em;margin:0 auto clamp(36px,5cqi,64px);text-align:center}
.st-head--left{align-items:flex-start;margin-left:0;text-align:left}
.st-h2{font-size:clamp(30px,2.6cqi + 16px,48px)}
.st-icon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:calc(var(--st-radius) * .85px);background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand)}
.st-icon svg{width:24px;height:24px}
.st-icon:empty{display:none}
.st-checks{list-style:none;display:flex;flex-direction:column;gap:11px}
.st-checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5}
.st-checks li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 15%,transparent)}
.st-checks li::after{content:"";position:absolute;left:5px;top:calc(.12em + 5px);width:10px;height:10px;background:var(--st-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.st *{transition:none!important;animation:none!important}}
/* Navbar With Announcement Bar */
.st-navbar-announcement{overflow:visible;background:var(--st-bg);border-bottom:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st:has([data-sticky-flag]){position:sticky;top:0;z-index:50;transition:box-shadow .3s ease}
.st.is-scrolled{box-shadow:0 10px 30px -18px rgba(15,23,42,.35)}
.st-burger{display:none;position:relative;flex:none;width:44px;height:44px;border:0;border-radius:calc(var(--st-radius) * .7px);background:color-mix(in srgb,var(--st-text) 7%,transparent);color:var(--st-text);cursor:pointer}
.st-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.st-burger span:nth-child(1){top:15px}.st-burger span:nth-child(2){top:21px}.st-burger span:nth-child(3){top:27px}
.st-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.st-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.st-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.st-burger:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px}
.na-bar{position:relative;overflow:hidden;background:var(--st-brand);color:var(--st-btn-text)}
.na-bar-in{padding-top:10px;padding-bottom:10px;padding-right:56px;text-align:center;font-size:14.5px;font-weight:500}
.na-bar-link{color:var(--st-btn-text);font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.na-close{position:absolute;right:max(8px,calc(var(--st-pad) - 12px));top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--st-btn-text);font-size:22px;line-height:1;cursor:pointer;opacity:.8}
.na-close:hover{opacity:1;background:color-mix(in srgb,var(--st-btn-text) 14%,transparent)}
.na{position:relative;display:flex;align-items:center;gap:24px;min-height:70px}
.na-left{flex:1;display:flex;align-items:center;gap:clamp(20px,3cqi,40px);min-width:0}
.na-nav{display:flex;align-items:center}
.na-links{list-style:none;display:flex;gap:2px}
.na-link{display:block;padding:8px 12px;color:var(--st-text);font-weight:600;font-size:15px;text-decoration:none;border-radius:calc(var(--st-radius) * 1px)}
.na-link:hover{color:var(--st-brand)}
.na-link[aria-current="page"]{color:var(--st-brand);box-shadow:inset 0 -2px 0 var(--st-brand);border-radius:0}
.na-actions{display:flex;align-items:center;gap:16px}
.na-actions--menu{display:none}
.na-login{color:var(--st-text);font-weight:600;font-size:15px;text-decoration:none}
.na-login:hover{color:var(--st-brand)}
.na .st-btn{min-height:42px;padding:0 20px;font-size:15px}
@container st (max-width:900px){
.na .st-burger{display:inline-block}
.na-actions--bar{display:none}
.na-nav{position:absolute;left:var(--st-pad);right:var(--st-pad);top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:calc(var(--st-radius) * 1.4px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent);box-shadow:0 24px 60px -24px rgba(31,26,23,.4)}
.na-links{flex-direction:column}
.na-link{padding:12px 14px;font-size:16.5px}
.na-actions--menu{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 4px 4px;border-top:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.na-actions--menu .na-login{padding:8px 10px}
.na-actions--menu .st-btn{width:100%;min-height:48px}
.has-menu:not(.menu-open) .na-nav{display:none}
.st:not(.has-menu) .na-left{flex-wrap:wrap;padding:10px 0}
.st:not(.has-menu) .na-nav{position:static;flex-basis:100%;box-shadow:none}
.st:not(.has-menu) .st-burger{display:none}
.na-bar-in{font-size:13.5px;text-align:left}
}
/* Centred Gradient Hero */
.st-centered-gradient-hero{padding:clamp(64px,9cqi,128px) 0 0}
.cg-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--st-brand) 45%,transparent),transparent 70%),radial-gradient(40% 40% at 15% 30%,color-mix(in srgb,#ec4899 30%,transparent),transparent 70%),radial-gradient(40% 40% at 85% 35%,color-mix(in srgb,#22d3ee 25%,transparent),transparent 70%)}
.cg{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.cg-eyebrow{padding:6px 14px;border:1px solid color-mix(in srgb,var(--st-brand) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent)}
.cg-title{max-width:15em;font-size:clamp(40px,5.4cqi + 10px,76px)}
.cg-lead{max-width:36em}
.cg-btns{justify-content:center}
.cg-note{font-size:14px;color:var(--st-muted)}
.cg-media{width:100%;max-width:1040px;margin-top:clamp(24px,4cqi,48px);padding:10px 10px 0;border-radius:calc(var(--st-radius) * 1.6px) calc(var(--st-radius) * 1.6px) 0 0;background:color-mix(in srgb,var(--st-surface) 85%,transparent);border:1px solid color-mix(in srgb,var(--st-text) 14%,transparent);border-bottom:0;box-shadow:0 -20px 80px -20px color-mix(in srgb,var(--st-brand) 45%,transparent)}
.cg-media img{width:100%;border-radius:calc(var(--st-radius) * 1px) calc(var(--st-radius) * 1px) 0 0}
.st-centered-gradient-hero:not(:has(.cg-media)) .cg{padding-bottom:clamp(64px,9cqi,128px)}
/* Bento Grid Features */
.st-features-bento{padding:clamp(64px,8cqi,112px) 0}
.st-features-bento::before{content:"";position:absolute;inset:-20% 10% auto;height:60%;background:radial-gradient(closest-side,color-mix(in srgb,var(--st-brand) 22%,transparent),transparent);pointer-events:none}
.fb-grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6cqi,18px)}
.fb-card{grid-column:span 2;display:flex;flex-direction:column;gap:20px;overflow:hidden;padding:clamp(22px,2.4cqi,30px);border-radius:calc(var(--st-radius) * 1px);background:linear-gradient(160deg,color-mix(in srgb,var(--st-surface) 100%,var(--st-brand) 0%),color-mix(in srgb,var(--st-surface) 82%,var(--st-brand)));border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent)}
.fb-card:nth-child(5n+1){grid-column:span 4}
.fb-card:nth-child(5n+4),.fb-card:nth-child(5n+5){grid-column:span 3}
.fb-card:nth-child(5n+1):has(.fb-media){grid-row:span 2}
.fb-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fb-card .st-icon{background:color-mix(in srgb,var(--st-brand) 18%,transparent);margin-bottom:4px}
.fb-title{font-size:19px;letter-spacing:-.01em}
.fb-text{color:var(--st-muted);font-size:15.5px;max-width:34em}
.fb-media{margin-top:auto;margin-right:calc(clamp(22px,2.4cqi,30px) * -1);margin-bottom:calc(clamp(22px,2.4cqi,30px) * -1)}
.fb-media img{width:100%;border-top-left-radius:calc(var(--st-radius) * .8px);border:1px solid color-mix(in srgb,var(--st-text) 12%,transparent);border-right:0;border-bottom:0}
@container st (max-width:900px){.fb-grid{grid-template-columns:repeat(2,1fr)}.fb-card,.fb-card:nth-child(n){grid-column:span 1;grid-row:auto}.fb-card:nth-child(5n+1){grid-column:1/-1}}
@container st (max-width:560px){.fb-grid{grid-template-columns:1fr}.fb-card:nth-child(n){grid-column:auto}}
/* Horizontal Timeline */
.st-timeline-horizontal{padding:clamp(64px,8cqi,112px) 0}
.tlh{position:relative;display:flex;align-items:center;gap:8px}
.tlh-track{flex:1;min-width:0;padding-block:14px 46px;margin-block:-14px -46px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;outline:none;border-radius:calc(var(--st-radius) * 1px)}
.tlh-track::-webkit-scrollbar{display:none}
.tlh-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tlh-track:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-brand) 55%,transparent)}
.tlh-list{--tl-card-h:158px;--tl-item-w:240px;position:relative;display:flex;width:max-content;min-width:100%;margin:0;padding:0 28px;list-style:none;counter-reset:tl}
.tlh-list::before{content:"";position:absolute;left:0;right:0;top:calc(var(--tl-card-h) + 22px);height:4px;margin-top:-2px;border-radius:2px;background:color-mix(in srgb,var(--st-text) 14%,transparent)}
.tlh-list::after{content:"";position:absolute;left:0;top:calc(var(--tl-card-h) + 22px);height:4px;margin-top:-2px;border-radius:2px;width:var(--tl-fill,0px);background:linear-gradient(90deg,color-mix(in srgb,var(--st-brand) 55%,transparent),var(--st-brand));transition:width .7s cubic-bezier(.4,0,.2,1)}
.tlh-item{counter-increment:tl;position:relative;display:flex;flex:1 0 var(--tl-item-w);flex-direction:column;align-items:center;justify-content:flex-start;min-width:var(--tl-item-w);height:calc(var(--tl-card-h) * 2 + 44px);scroll-snap-align:center}
.tlh-dot{position:absolute;top:calc(var(--tl-card-h) + 22px);left:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:3px solid var(--st-bg);border-radius:50%;background:var(--st-surface);color:var(--st-brand);font:800 15px/1 var(--st-font-heading);box-shadow:0 0 0 2px color-mix(in srgb,var(--st-brand) 45%,transparent);cursor:pointer;transition:background .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease}
.tlh-dot:hover{transform:scale(1.1)}
.tlh-dot:focus-visible{outline:3px solid var(--st-brand);outline-offset:3px}
.tlh-num::before{content:counter(tl)}
.tlh-ico{display:none;width:20px;height:20px}
.tlh-dot .tlh-ico{background:none;border-radius:0;color:inherit}
.tlh-ico svg{width:20px;height:20px}
.tlh[data-marker=icon] .tlh-num{display:none}
.tlh[data-marker=icon] .tlh-ico{display:inline-grid}
.tlh-item.is-active .tlh-dot{background:var(--st-brand);color:var(--st-btn-text);transform:scale(1.18);box-shadow:0 0 0 5px color-mix(in srgb,var(--st-brand) 24%,transparent)}
.tlh-card{box-sizing:border-box;position:absolute;left:8px;right:8px;bottom:0;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;height:var(--tl-card-h);padding:14px 16px;border-radius:calc(var(--st-radius) * .8px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.tlh-card::after{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);border-bottom:0;border-right:0;transform:rotate(45deg);transition:border-color .4s ease}
@container st (min-width:641px){
.tlh[data-layout=alternate] .tlh-item:nth-child(odd) .tlh-card,.tlh[data-layout=above] .tlh-card{top:0;bottom:auto}
.tlh[data-layout=alternate] .tlh-item:nth-child(odd) .tlh-card::after,.tlh[data-layout=above] .tlh-card::after{top:auto;bottom:-7px;border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);border-top:0;border-left:0}
.tlh[data-layout=alternate] .tlh-item.is-active:nth-child(odd) .tlh-card::after,.tlh[data-layout=above] .tlh-item.is-active .tlh-card::after{border-color:color-mix(in srgb,var(--st-brand) 50%,transparent)}
}
.tlh-item.is-active .tlh-card::after{border-color:color-mix(in srgb,var(--st-brand) 50%,transparent)}
.tlh-item.is-active .tlh-card{transform:translateY(0);border-color:color-mix(in srgb,var(--st-brand) 50%,transparent);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--st-brand) 55%,transparent)}
.tlh-date{color:var(--st-brand);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tlh-title{font-size:17px;letter-spacing:-.01em}
.tlh-text{color:var(--st-muted);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tlh-text:empty{display:none}
.tlh-nav{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid color-mix(in srgb,var(--st-text) 14%,transparent);border-radius:50%;background:var(--st-bg);color:var(--st-text);cursor:pointer;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--st-text) 40%,transparent);transition:background .2s ease,color .2s ease,opacity .2s ease}
.tlh-nav:hover:not(:disabled){background:var(--st-brand);color:var(--st-btn-text);border-color:var(--st-brand)}
.tlh-nav:focus-visible{outline:3px solid var(--st-brand);outline-offset:2px}
.tlh-nav:disabled{opacity:.35;cursor:default}
.is-tl-pinned .tlh-track{overflow:hidden;cursor:default}
.is-tl-pinned .tlh-nav{display:none}
.is-tl-pinned .tlh-list{will-change:transform}
.is-tl-pinned .tlh-list::after{transition:none}
.tlh.is-fit .tlh-nav{display:none}
.tlh[data-width=full]{width:100cqi;margin-inline:calc(50% - 50cqi);gap:0}
.tlh[data-width=full] .tlh-track{border-radius:0}
.tlh[data-width=full] .tlh-list{padding-inline:max(28px,var(--st-pad))}
.tlh[data-width=full] .tlh-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%)}
.tlh[data-width=full] .tlh-prev{left:12px}
.tlh[data-width=full] .tlh-next{right:12px}
@container st (max-width:640px){
.tlh[data-width=full] .tlh-nav{top:22px}
.tlh-list{--tl-item-w:230px;--tl-card-h:172px}
.tlh-list::before,.tlh-list::after{top:22px}
.tlh-item{height:calc(var(--tl-card-h) + 44px)}
.tlh-dot{top:22px}
.tlh-nav{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.tlh-list::after,.tlh-dot,.tlh-card{transition:none}}
/* Newsletter Signup CTA */
.st-cta-newsletter{padding:clamp(56px,7cqi,104px) 0}
.cn{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:clamp(36px,5cqi,60px) clamp(22px,5cqi,60px);text-align:center;border-radius:calc(var(--st-radius) * 1.4px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);box-shadow:0 30px 70px -40px color-mix(in srgb,var(--st-brand) 50%,transparent)}
.cn-icon{width:56px;height:56px;margin-bottom:6px}
.cn-icon svg{width:28px;height:28px}
.cn .cn-title{font-size:clamp(28px,2.4cqi + 14px,42px)}
.cn-form{display:flex;gap:10px;width:100%;max-width:520px;margin-top:10px;padding:6px;border-radius:calc(var(--st-radius) * 1px + 6px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 12%,transparent)}
.cn-form:focus-within{border-color:var(--st-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.cn-input{flex:1;min-width:0;padding:0 14px;border:0;background:none;color:var(--st-text);font:500 16px/1 var(--st-font-body);outline:none}
.cn-input::placeholder{color:color-mix(in srgb,var(--st-muted) 75%,transparent)}
.cn-btn{flex:none}
.cn-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:14px;color:var(--st-muted)}
.cn-proof{font-weight:700;color:var(--st-text)}
.cn-proof:empty,.cn-note:empty{display:none}
@container st (max-width:520px){.cn-form{flex-direction:column;background:none;border:0;padding:0}.cn-form:focus-within{box-shadow:none}.cn-input{min-height:52px;border-radius:calc(var(--st-radius) * 1px);border:1px solid color-mix(in srgb,var(--st-text) 15%,transparent);background:var(--st-bg)}.cn-btn{width:100%}}
/* Footer With Newsletter */
.st-footer-newsletter{padding:clamp(56px,7cqi,96px) 0 28px}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st-socials{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.st-social{display:grid;place-items:center;width:40px;height:40px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);background:color-mix(in srgb,var(--st-text) 6%,transparent);transition:color .2s ease,background .2s ease,transform .2s ease}
.st-social:hover{color:var(--st-btn-text);background:var(--st-brand);transform:translateY(-2px)}
.st-social > span{display:block;line-height:0}
.st-social svg{display:block;width:19px;height:19px}
.fn-top{display:grid;grid-template-columns:minmax(260px,1.2fr) 2fr;gap:clamp(36px,6cqi,96px)}
.fn-news{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fn-news .st-brand{margin-bottom:10px}
.fn-title{font-size:21px;letter-spacing:-.01em}
.fn-text{color:var(--st-muted);font-size:15.5px}
.fn-text:empty{display:none}
.fn-form{display:flex;gap:8px;width:100%;max-width:420px;margin-top:4px}
.fn-input{flex:1;min-width:0;min-height:48px;padding:0 16px;border-radius:calc(var(--st-radius) * 1px);border:1px solid color-mix(in srgb,var(--st-text) 16%,transparent);background:var(--st-surface);color:var(--st-text);font:500 15px/1 var(--st-font-body);outline:none}
.fn-input:focus{border-color:var(--st-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--st-brand) 25%,transparent)}
.fn-input::placeholder{color:var(--st-muted)}
.fn-form .st-btn{min-height:48px;padding:0 20px}
.fn-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px}
.fn-col-title{font:700 14px/1.2 var(--st-font-body);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.fn-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.fn-links a,.fn-legal a{color:var(--st-muted);font-size:15px;text-decoration:none}
.fn-links a:hover,.fn-legal a:hover{color:var(--st-brand)}
.fn-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(40px,5cqi,64px);padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 10%,transparent)}
.fn-copy{color:var(--st-muted);font-size:14px;margin-left:auto}
.fn-legal{list-style:none;display:flex;gap:20px}
.fn-legal a{font-size:14px}
@container st (max-width:820px){.fn-top{grid-template-columns:1fr}}
@container st (max-width:520px){.fn-form{flex-direction:column}.fn-cols{grid-template-columns:1fr 1fr}.fn-copy{margin-left:0}}
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st').forEach(function (sec) {
var btn = sec.querySelector('[data-menu-toggle]');
var panel = sec.querySelector('[data-menu]');
if (btn && panel) {
sec.classList.add('has-menu');
var isOpen = false;
var mobile = function () { return getComputedStyle(btn).display !== 'none'; };
// The toggle and the panel's controls, in document order (the toggle may come after the panel)
var focusables = function () {
return Array.prototype.filter.call(sec.querySelectorAll('a[href], button'), function (el) { return el === btn || panel.contains(el); });
};
var open = function () {
isOpen = true;
sec.classList.add('menu-open');
btn.setAttribute('aria-expanded', 'true');
if (anim) {
G.fromTo(panel, { opacity: 0, y: -12 }, { opacity: 1, y: 0, duration: 0.35, ease: 'power3.out', clearProps: 'transform,opacity' });
G.fromTo(panel.querySelectorAll('[data-menu-item]'), { opacity: 0, y: -8 }, { opacity: 1, y: 0, duration: 0.3, stagger: 0.04, delay: 0.05, ease: 'power2.out', clearProps: 'transform,opacity' });
}
var first = panel.querySelector('a[href], button');
if (first) first.focus();
};
var close = function (returnFocus) {
if (!isOpen) return;
isOpen = false;
btn.setAttribute('aria-expanded', 'false');
var done = function () { sec.classList.remove('menu-open'); };
if (anim) G.to(panel, { opacity: 0, y: -8, duration: 0.2, ease: 'power2.in', onComplete: function () { done(); G.set(panel, { clearProps: 'transform,opacity' }); } });
else done();
if (returnFocus) btn.focus();
};
btn.addEventListener('click', function () { if (isOpen) close(false); else open(); });
document.addEventListener('keydown', function (e) {
if (!isOpen) return;
if (e.key === 'Escape') { close(true); return; }
if (e.key === 'Tab') {
var f = focusables(), first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
});
document.addEventListener('click', function (e) { if (isOpen && !sec.contains(e.target)) close(false); });
panel.addEventListener('click', function (e) { if (e.target.closest('a')) close(false); });
window.addEventListener('resize', function () { if (isOpen && !mobile()) close(false); });
}
sec.querySelectorAll('[data-dismiss]').forEach(function (x) {
x.addEventListener('click', function () {
var box = x.closest('[data-dismissable]');
if (!box) return;
if (anim) G.to(box, { height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0, duration: 0.35, ease: 'power2.inOut', onComplete: function () { box.remove(); } });
else box.remove();
});
});
if (sec.querySelector('[data-sticky-flag]')) {
var hideOn = !!sec.querySelector('[data-hide-flag]');
var last = window.scrollY, hidden = false;
var onScroll = function () {
var y = window.scrollY;
sec.classList.toggle('is-scrolled', y > 8);
if (hideOn && !sec.classList.contains('menu-open')) {
var down = y > last && y > 120;
if (down !== hidden) {
hidden = down;
if (anim) G.to(sec, { yPercent: down ? -100 : 0, duration: 0.35, ease: 'power2.out' });
else sec.style.transform = down ? 'translateY(-100%)' : '';
}
}
last = y;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
}
});
})();
(function () {
var G = window.gsap, reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var canPin = !!(G && window.ScrollTrigger && !reduce && !(window.ST_STILL && !window.ST_SCROLL_FX));
if (canPin) G.registerPlugin(ScrollTrigger);
document.querySelectorAll('.st [data-tlh]').forEach(function (root) {
if (root.getAttribute('data-tlh-ready')) return;
root.setAttribute('data-tlh-ready', '1');
var track = root.querySelector('[data-tlh-track]');
var list = root.querySelector('.tlh-list');
var prev = root.querySelector('[data-tlh-prev]'), next = root.querySelector('[data-tlh-next]');
if (!track || !list) return;
var sec = root.closest('.st');
var items = Array.prototype.slice.call(list.children).filter(function (c) { return c.classList.contains('tlh-item'); });
var active = -1, pinned = false, smooth = reduce ? 'auto' : 'smooth';
var mid = function (it) { return it.offsetLeft + it.offsetWidth / 2; };
function mark(i) {
active = i;
items.forEach(function (it, k) {
it.classList.toggle('is-active', k === i);
var d = it.querySelector('[data-tlh-dot]');
if (d) { if (k === i) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current'); }
});
}
function centre(i, behavior) {
var it = items[i]; if (!it) return;
track.scrollTo({ left: Math.max(0, mid(it) - track.clientWidth / 2), behavior: behavior || smooth });
}
function setActive(i, scroll) {
if (!items[i]) return;
mark(i);
list.style.setProperty('--tl-fill', mid(items[i]) + 'px');
if (scroll) centre(i);
}
function update() {
if (pinned) return;
var max = track.scrollWidth - track.clientWidth;
if (prev) prev.disabled = track.scrollLeft <= 2;
if (next) next.disabled = track.scrollLeft >= max - 2;
root.classList.toggle('is-fit', max <= 2);
if (active > -1) list.style.setProperty('--tl-fill', mid(items[active]) + 'px');
}
var ticking = false;
track.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; update(); }); }, { passive: true });
if (window.ResizeObserver) new ResizeObserver(update).observe(track); else window.addEventListener('resize', update);
var step = function () { var w = items[0] ? items[0].offsetWidth : 240; return Math.max(w, Math.floor(track.clientWidth * 0.8 / w) * w); };
if (prev) prev.addEventListener('click', function () { track.scrollBy({ left: -step(), behavior: smooth }); });
if (next) next.addEventListener('click', function () { track.scrollBy({ left: step(), behavior: smooth }); });
var trigger = null;
items.forEach(function (it, k) {
var d = it.querySelector('[data-tlh-dot]');
if (!d) return;
d.addEventListener('click', function () {
if (root.getAttribute('data-moved')) return;
if (pinned && trigger) {
var p = items.length > 1 ? k / (items.length - 1) : 0;
window.scrollTo({ top: trigger.start + p * (trigger.end - trigger.start), behavior: smooth });
} else setActive(k, true);
});
});
track.addEventListener('keydown', function (e) {
if (pinned) return;
var w = items[0] ? items[0].offsetWidth : 240;
if (e.key === 'ArrowRight') { e.preventDefault(); track.scrollBy({ left: w, behavior: smooth }); }
else if (e.key === 'ArrowLeft') { e.preventDefault(); track.scrollBy({ left: -w, behavior: smooth }); }
else if (e.key === 'Home') { e.preventDefault(); track.scrollTo({ left: 0, behavior: smooth }); }
else if (e.key === 'End') { e.preventDefault(); track.scrollTo({ left: track.scrollWidth, behavior: smooth }); }
});
var down = false, sx = 0, sl = 0, moved = 0;
track.addEventListener('pointerdown', function (e) {
if (pinned || e.pointerType !== 'mouse' || e.button !== 0) return;
down = true; moved = 0; sx = e.clientX; sl = track.scrollLeft; root.removeAttribute('data-moved');
});
window.addEventListener('pointermove', function (e) {
if (!down) return;
var dx = e.clientX - sx; moved = Math.max(moved, Math.abs(dx));
if (moved > 5) { track.classList.add('is-dragging'); track.scrollLeft = sl - dx; }
});
window.addEventListener('pointerup', function () {
if (!down) return;
down = false; track.classList.remove('is-dragging');
if (moved > 5) { root.setAttribute('data-moved', '1'); setTimeout(function () { root.removeAttribute('data-moved'); }, 0); }
});
var start = parseInt(root.getAttribute('data-start'), 10);
setActive(isNaN(start) ? 0 : Math.min(items.length - 1, Math.max(0, start - 1)), false);
update();
if (canPin && root.getAttribute('data-mode') !== 'free' && sec) {
G.matchMedia().add('(min-width: 768px)', function () {
var dist = function () { return Math.max(0, list.scrollWidth - track.clientWidth); };
if (dist() < 24) return;
// A sticky header stays on screen, so the section pins just below it instead of under it
var head = function () { var h = 0; document.querySelectorAll('.st').forEach(function (n) { if (n !== sec && n.querySelector('[data-sticky-flag]')) h = Math.max(h, n.offsetHeight); }); return h; };
pinned = true;
sec.classList.add('is-tl-pinned');
track.scrollLeft = 0;
var first = function () { return mid(items[0]); }, last = function () { return mid(items[items.length - 1]); };
var tw = G.timeline({
scrollTrigger: {
trigger: sec, start: function () { return 'top ' + head(); }, end: function () { return '+=' + Math.round(Math.max(dist() * 1.1, items.length * 170)); },
pin: true, scrub: 0.6, anticipatePin: 1, invalidateOnRefresh: true,
onUpdate: function (self) {
trigger = self;
var p = Math.min(1, self.progress / 0.91);
var f = first() + (last() - first()) * p;
list.style.setProperty('--tl-fill', f + 'px');
var idx = 0;
for (var k = 0; k < items.length; k++) { if (mid(items[k]) <= f + 2) idx = k; }
if (idx !== active) mark(idx);
}
}
});
// The row travels for 91% of the scroll, then rests on the last event for the last 9%
tw.to(list, { x: function () { return -dist(); }, ease: 'none', duration: 0.91 }).to({}, { duration: 0.09 });
trigger = tw.scrollTrigger;
return function () {
pinned = false; trigger = null;
if (tw.scrollTrigger) tw.scrollTrigger.kill(); tw.kill();
G.set(list, { clearProps: 'transform' });
sec.classList.remove('is-tl-pinned');
setActive(active > -1 ? active : 0, false);
update();
};
});
}
});
})();
(function () {
if (!window.gsap) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
var TEXT = window.SplitText ? {"split":"words","part":"words","mask":"words","vars":{"yPercent":110,"stagger":0.06,"duration":0.8}} : null;
if (TEXT) gsap.registerPlugin(SplitText);
function run() {
document.querySelectorAll('.st:not([data-scroll])').forEach(function (section) {
var heads = TEXT ? section.querySelectorAll('[data-anim-text]') : [];
var items = section.querySelectorAll(heads.length ? '[data-anim="item"]:not([data-anim-text])' : '[data-anim="item"]');
var media = section.querySelectorAll('[data-anim="media"]');
var tl = gsap.timeline({
defaults: { ease: 'power3.out', duration: 0.80 },
scrollTrigger: window.ScrollTrigger ? (window.ST_PREVIEW ? { trigger: section, start: 'top 80%', end: function () { var pin = ScrollTrigger.getAll().filter(function (t) { return t.pin === section; })[0]; return pin ? pin.end + section.offsetHeight : 'bottom top'; }, toggleActions: 'play reset play reset' } : { trigger: section, start: 'top 80%', once: true }) : undefined
});
Array.prototype.forEach.call(heads, function (el, i) {
var opts = { type: TEXT.split };
if (TEXT.mask) opts.mask = TEXT.mask;
var parts = SplitText.create(el, opts)[TEXT.part];
// The mask clips each line or word to its line box, which cuts off descenders (g, y, p):
// give the mask a little room below and take it back with a negative margin
if (TEXT.mask) Array.prototype.forEach.call(parts, function (p) { var m = p.parentElement; if (m && m !== el) { m.style.paddingBottom = '.22em'; m.style.marginBottom = '-.22em'; } });
tl.from(parts, Object.assign({}, TEXT.vars), i ? '<0.1' : 0);
});
if (items.length) tl.from(items, {"y":28,"opacity":0,"stagger":0.09,"clearProps":"transform,opacity"}, heads.length ? '<0.2' : 0);
if (media.length) tl.from(media, {"y":40,"opacity":0,"duration":1.1,"clearProps":"transform,opacity"}, items.length || heads.length ? '<0.15' : 0);
});
}
// Split text only after the fonts load, so lines break where they finally will
if (TEXT && document.fonts && document.fonts.ready) document.fonts.ready.then(run); else run();
})();
Extend with AI
Take This Template Further With AI
Give this prompt to an AI assistant to generate your own version of the Startup Launch & Waitlist template: swap in your business name, services and tone, add or remove sections, translate it, or turn the page into a Next.js project or a WordPress theme. Use the template above as the visual reference, so you and the AI start from a design that already works.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
text
Build a complete startup launch & waitlist website for “Lumina” as clean HTML, CSS and a little JavaScript.
Page structure, top to bottom:
1. Navbar With Announcement Bar
2. Centred Gradient Hero: “Your notes, finally thinking with you”
3. Bento Grid Features: “Built for how you actually think”
4. Horizontal Timeline: “Where Lumina is heading next”
5. Newsletter Signup CTA: “Be first in line for early access”
6. Footer With Newsletter
Look and feel:
- Colours as CSS custom properties: brand #e11d48, page background #fff7f9, cards #fde8ee, text #2b0b14, muted text #7d4d5a. Corner radius 14px, content width 1200px.
- Headings in Space Grotesk, body text in Inter (load both from Google Fonts with display=swap).
- Mobile first. Sections use CSS grid or flexbox and stack cleanly below 700px.
Content:
- Write real, believable software copy for every section instead of lorem ipsum: specific offers, numbers, names and calls to action.
- One clear primary action in the hero and again near the end.
Quality:
- Semantic HTML (header, main, section, footer) with exactly one h1, the hero headline, and one h2 per section.
- Accessible: alt text on every image, visible focus states, labelled form fields, buttons and links with clear text, and prefers-reduced-motion respected.
- SEO: title “Lumina: The Notebook That Thinks With You. Join Early Access”, a meta description of 150 to 160 characters, Open Graph tags and JSON-LD that suits a software business.
- Optional: a subtle GSAP ScrollTrigger fade-up on section headings, with content visible without JavaScript.
Also create these pages with the same navbar, footer and theme, and link them from the menu:
- FAQ (faq.html)
- About (about.html)
- Privacy (privacy.html)Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
6 ready-made website sections assembled into one finished startup launch & waitlist page: Navbar With Announcement Bar, Centred Gradient Hero, Bento Grid Features, Horizontal Timeline, Newsletter Signup CTA, Footer With Newsletter
Every section links to its own page in the Website Section Templates library, where you can edit it on its own
One theme drives the whole page (colours, fonts, corner radius, width), so changing the brand takes a minute
Container-query responsive: each section adapts to the width it is placed in, from phone to desktop
GSAP entrance animations and scroll effects load from a CDN, and switch off for visitors who prefer reduced motion
Also available as a 5-page website in the builder, sharing one navbar, footer and theme
A pinned horizontal timeline (GSAP ScrollTrigger) that slides along as you scroll, with a growing progress line
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind
About this UI Snippet
A Waitlist Page That Builds an Audience Before You Launch
A waitlist page has one metric: how many visitors leave an email address. Everything else on the page exists to remove a reason not to. The announcement bar puts the launch date in front of people, so the wait feels finite. The centred gradient hero asks for one thing and nothing else. The bento grid shows what is coming in a layout that is easy to skim and looks intentional even when you only have four ideas to show. And the newsletter form appears twice, once in the main call to action and once in the footer, because some people only decide on the way out.
The form sends to your email tool, not to this page, so the real work of the snippet is hooking it up: point the form's action at Mailchimp, ConvertKit, Buttondown or any endpoint that accepts a POST. Keep the success message short and tell people what happens next ("We will email you once, on launch day").
This is the layout of the Startup Launch & Waitlist template. Open it in the Website Builder to change the colours, rewrite the copy, add the FAQ and About pages from the multi-page version and export the site.
Interactive extras built in
Beyond the core sections, this template adds a pinned horizontal roadmap that slides along as you scroll, from the beta to launch day. Each one has its own page in the Website Section Templates library (Horizontal Timeline), where you can try its settings on their own, and you can edit, move or remove any of them in the Website Builder.
Built from website section templates
The 6 Sections Behind This Startup Launch & Waitlist Page
This page is not one big block of code: it is stacked from ready-made sections in the free Website Section Templates library, in this order. Open any of them to edit it on its own, or start with the whole page.
- Navbar With Announcement Baran announcement bar with the launch date, so the wait feels short and real
- Centred Gradient Heroa centred hero that asks for one thing: an email address
- Bento Grid Featuresa bento grid of what is coming, which looks intentional even with only a few features
- Horizontal Timelinea pinned horizontal roadmap that slides along as you scroll, from the beta to launch day
- Newsletter Signup CTAthe main sign-up form, repeated lower down for visitors who needed the whole pitch first
- Footer With Newslettera footer with a second sign-up form, for the visitor who decides on the way out
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Startup Launch & Waitlist in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Set the launch date and the promiseEdit the announcement bar with your real date, then rewrite the hero headline as the single benefit of joining the list (early access, a founding price, a free month).
- 3Connect the form to your email toolSet the newsletter form action to your provider's form endpoint and change the success message to say exactly what subscribers will receive and when.
- 4Fill the bento grid with real teasersUse each tile for a feature, a screenshot or a number you can honestly show. Remove tiles you cannot back up; four strong tiles beat eight vague ones.
- 5Export and publishDownload one HTML file or a ZIP (or one HTML file per page for the multi-page version) and upload it to Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own host. Or copy the code from this page and export it to React, Vue, Angular or Tailwind with the buttons above the editor.
Real-world uses
Common Use Cases
Build a list before a product launch
Collect emails for weeks before release and turn the list into your first customers on launch day.
Test an idea with a landing page
Publish the page, send a little traffic and count sign-ups to learn whether a product is worth building at all.
Learn bento grids and form handling
See how a responsive bento grid is built with CSS grid and how a plain HTML form can post to a third-party email service.
Got questions?
Frequently Asked Questions
A single promise, a launch date, one or two proof points of what is coming and one sign-up form. More than that gives visitors reasons to leave without subscribing.
Copy the form action URL from your provider and set it as the form's action in the snippet, keeping the email field name your provider expects.
Rarely. Every extra field lowers sign-ups. Ask for the email now and learn more about subscribers later, in the welcome email.
It adds a pinned horizontal timeline. Each is a section you can edit, move or remove in the Website Builder, and each has its own page in the Website Section Templates library.
It is assembled from 6 templates in the free Website Section Templates library: Navbar With Announcement Bar, Centred Gradient Hero, Bento Grid Features, Horizontal Timeline, Newsletter Signup CTA, Footer With Newsletter. Each one has its own page where you can edit it separately.
It is the same page. Here you read and edit the HTML, CSS and JavaScript directly with a live preview; in the Website Builder you edit it with forms, change the theme once for the whole page, add pages and export a finished site.