Mobile App Landing Page HTML Template — Free Snippet
Mobile App Landing Page template · 8 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
What's included
Features
8 ready-made website sections assembled into one finished mobile app landing page page: Simple Sticky Navbar, App Product Hero, Split Features With Image, How It Works Steps, Testimonial Marquee, Split CTA With Image, Split FAQ With Contact Card, Minimal Footer
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 6-page website in the builder, sharing one navbar, footer and theme
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind
About this UI Snippet
A Mobile App Landing Page in Eight Sections: From Store Badge to Download
An app page has a different job from a SaaS page: it has to move a visitor, usually on a phone, from curiosity to the App Store or Google Play in a few scrolls. That is why this layout is short. The hero puts the phone mockup and both store buttons above the fold, the features sit beside a real screenshot, three numbered steps remove the fear that the app is hard to start, and the reviews scroll past in a marquee so social proof is moving rather than something to read.
The dark theme is a deliberate choice for apps: screenshots of a dark UI blend into the page, which makes the product look like part of the site instead of a picture pasted on it. If your app is light, switch the theme in the builder and the whole page, including the glow behind the mockup, follows from one set of colour variables.
Swap in your own screenshots and store links and the page is done. It is the code behind the Mobile App Landing Page template, so you can also open it in the Website Builder, restyle it with the theme panel and export clean HTML.
Built from website section templates
The 8 Sections Behind This Mobile App Landing Page 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.
- Simple Sticky Navbara slim sticky bar with a Download button, which matters most on a phone where the hero scrolls away fast
- App Product Herothe phone mockup with App Store and Google Play buttons, above the fold where installs are won
- Split Features With Imagebeside a real screenshot, the single feature that sets the app apart from the others
- How It Works Stepsthree numbered steps that answer "is it hard to get started?" before anyone has to ask
- Testimonial Marqueereviews that keep moving, so social proof is seen even by visitors who never stop to read
- Split CTA With Imagea closing prompt with the store badges again, for visitors who scrolled all the way down
- Split FAQ With Contact Cardquestions about price, privacy and device support, beside a contact card for anything else
- Minimal Footera quiet footer with the legal links the app stores require you to have
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Mobile App Landing Page in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Put your real screenshots in the mockupUpload a screenshot of your app in the hero and the split sections. Use the actual first screen a new user sees, because that is what the download will deliver.
- 3Link the store buttonsPoint the App Store and Google Play buttons at your listing URLs. If you only ship on one platform, remove the other button so nobody taps a dead end.
- 4Write the three steps from your onboardingRewrite the how-it-works steps to match your real first-run flow (for example "Sign up, connect your account, see your first result") so the page promises exactly what the app does.
- 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
A home page for an app store listing
Give your App Store and Google Play listing a destination of your own, with a URL you control for ads, QR codes and social bios.
Pre-launch interest page
Show the mockup and features before the app is live, and swap the store buttons for a waitlist link until release day.
Learn a marquee and a device mockup in CSS
Study the looping review marquee and the CSS-only phone frame to reuse in your own pages.
Got questions?
Frequently Asked Questions
The app on a phone, one sentence on what it does and the store buttons. Anything that is not helping a visitor reach the download should wait lower down.
No. The dark look suits dark UIs, but the colours are variables, so you can switch to any preset or your own palette without touching the markup.
Add an image to the hero or download banner pointing at your store listing; desktop visitors can scan it with their phone to install straight away.
It is assembled from 8 templates in the free Website Section Templates library: Simple Sticky Navbar, App Product Hero, Split Features With Image, How It Works Steps, Testimonial Marquee, Split CTA With Image, Split FAQ With Contact Card, Minimal Footer. 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.
Source Code
<section class="st st-navbar-simple" data-uid="smvnkxd74ktcl">
<header class="st-wrap nb">
<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"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" /><path d="M12 18h.01" /></svg></span><span>Pocketly</span></span>
</a>
<nav class="nb-nav" data-menu aria-label="Main">
<ul class="nb-links">
<li data-menu-item><a class="nb-link" href="#features"><span>Features</span></a></li>
<li data-menu-item><a class="nb-link" href="#how-it-works"><span>How it works</span></a></li>
<li data-menu-item><a class="nb-link" href="#customers"><span>Reviews</span></a></li>
<li data-menu-item><a class="nb-link" href="#faq"><span>FAQ</span></a></li>
</ul>
<div class="nb-actions" data-menu-item>
<a class="nb-login" href="https://webdevpuneet.com/login"><span>Log in</span></a>
<a class="st-btn nb-cta" href="#get-started"><span>Get the app</span></a>
</div>
</nav>
<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-app-product-hero" data-uid="smvnkxd74h0d6">
<div class="ap st-wrap">
<div class="ap-copy">
<span class="st-eyebrow" data-anim="item">iPhone & Android</span>
<h1 class="ap-title" data-anim="item" data-anim-text>Your money, <span class="hl">finally organised</span></h1>
<p class="st-lead" data-anim="item">Track spending, split bills and grow your savings automatically. Acme Wallet turns money admin into a two-minute habit.</p>
<div class="ap-stores" data-anim="item">
<a class="ap-store" href="https://apps.apple.com/app/id000000000"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M16.4 12.6c0-2.4 2-3.6 2.1-3.7-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.2 1-4 2.5-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.8 1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.5-1-2.5-4M14 5.4c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1 .1 2.1-.6 2.8-1.4"/></svg><span>Download on the App Store</span></a>
<a class="ap-store" href="https://play.google.com/store/apps/details?id=com.yourapp"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M3.6 2.3 13.4 12l-9.8 9.7c-.4-.2-.6-.6-.6-1.1V3.4c0-.5.2-.9.6-1.1m11 10.9 2.4 2.4-11.2 6.4 8.8-8.8m3.5-3.5 2.7 1.5c.8.5.8 1.2 0 1.7l-2.8 1.6-2.6-2.5 2.7-2.3M5.8 2l11.2 6.4-2.4 2.4L5.8 2Z"/></svg><span>Get it on Google Play</span></a>
</div>
<p class="ap-rating" data-anim="item">★★★★★ 4.8 from 12,000+ reviews</p>
</div>
<div class="ap-media" data-anim="media">
<div class="ap-blob" aria-hidden="true"></div>
<img class="ap-phone" width="720" height="1440" src="https://webdevpuneet.com/images/section-templates/hero-phone.png" alt="Acme Wallet app home screen">
<div class="ap-card ap-card1"><strong>+$420 saved</strong><span>this month</span></div>
<div class="ap-card ap-card2"><strong>Bills split</strong><span>in 3 taps</span></div>
</div>
</div>
</section>
<section id="features" class="st st-features-split-image" data-uid="smvnkxd743vca">
<div class="st-wrap fs">
<div class="fs-copy">
<header class="st-head st-head--left fs-head">
<p class="st-eyebrow" data-anim="item">Smart budgets</p>
<h2 class="st-h2" data-anim="item" data-anim-text>See where your money <span class="hl">really goes</span></h2>
<p class="st-lead" data-anim="item">Pocketly sorts every payment for you and shows exactly what you can still spend this month.</p>
</header>
<ul class="fs-list">
<li class="fs-point" data-anim="item">
<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"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></svg></span>
<div><h3 class="fs-title">Live progress</h3><p class="fs-text">Charts update as tasks move, with no spreadsheets to keep in sync.</p></div>
</li>
<li class="fs-point" data-anim="item">
<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" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></svg></span>
<div><h3 class="fs-title">Goals that track themselves</h3><p class="fs-text">Link goals to projects and watch them fill in automatically.</p></div>
</li>
<li class="fs-point" data-anim="item">
<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="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" /></svg></span>
<div><h3 class="fs-title">One-click updates</h3><p class="fs-text">Share a polished weekly report with stakeholders in seconds.</p></div>
</li>
</ul>
<div class="st-btns" data-anim="item"><a class="st-btn" href="https://webdevpuneet.com/reporting"><span>Download free</span></a></div>
</div>
<div class="fs-media" data-anim="media">
<div class="fs-frame"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/feature-analytics.png" alt="Analytics dashboard with a rising line chart and four KPI tiles"></div>
</div>
</div>
</section>
<section id="how-it-works" class="st st-features-steps" data-uid="smvnkxd74e1zs">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">How it works</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Set up in <span class="hl">two minutes</span></h2>
<p class="st-lead" data-anim="item">Connect your bank, set your goals and let Pocketly do the rest.</p>
</header>
<ol class="fp-steps">
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><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="8" r="5" /><path d="M20 21a8 8 0 0 0-16 0" /></svg></span></div>
<h3 class="fp-title">Create your account</h3>
<p class="fp-text">Sign up with Google or email in under a minute. No credit card needed.</p>
</li>
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><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 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></div>
<h3 class="fp-title">Connect your tools</h3>
<p class="fp-text">Import from your old tracker and connect Slack, GitHub and your calendar.</p>
</li>
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><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="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></div>
<h3 class="fp-title">Invite the team and ship</h3>
<p class="fp-text">Share a link, assign the first tasks and watch progress fill in automatically.</p>
</li>
</ol>
<div class="fp-cta" data-anim="item">
<a class="st-btn" href="https://webdevpuneet.com/signup"><span>Get started free</span></a>
<p class="fp-note">Free for teams up to 10 people</p>
</div>
</div>
</section>
<section id="customers" class="st st-testimonials-marquee" data-uid="smvnkxd74ujsy">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Reviews</p>
<h2 class="st-h2" data-anim="item" data-anim-text>People are <span class="hl">talking</span></h2>
<p class="st-lead" data-anim="item">Over 10,000 creators use it to plan, publish and grow.</p>
</header>
</div>
<div class="tm-rows" data-anim="media">
<div class="tm-row" role="region" aria-label="Testimonials" tabindex="0">
<div class="tm-track" data-marquee data-speed="38">
<figure class="tm-card">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tm-quote"><p>Finally a tool that gets out of my way. I plan a month of content in an hour.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="">
<div><p class="st-person-name">Nora Quinn</p><p class="st-person-role">Creator, 120k followers</p></div>
</div></figcaption>
</figure>
<figure class="tm-card">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tm-quote"><p>The scheduling alone saves me a full day every week.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="">
<div><p class="st-person-name">Leo Martins</p><p class="st-person-role">Podcaster</p></div>
</div></figcaption>
</figure>
<figure class="tm-card">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tm-quote"><p>Gorgeous, fast and the support team is incredible.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-2.jpg" alt="">
<div><p class="st-person-name">Zara Ahmed</p><p class="st-person-role">Designer & educator</p></div>
</div></figcaption>
</figure>
<figure class="tm-card">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tm-quote"><p>My newsletter grew 3× after I started using the templates.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-7.jpg" alt="">
<div><p class="st-person-name">Ben Carter</p><p class="st-person-role">Writer, The Weekly Brief</p></div>
</div></figcaption>
</figure>
</div>
</div>
<div class="tm-row" role="region" aria-label="More testimonials" tabindex="0">
<div class="tm-track" data-marquee="reverse" data-speed="32">
<figure class="tm-card">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tm-quote"><p>I recommended it to my whole community. Nobody has asked for a refund.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-8.jpg" alt="">
<div><p class="st-person-name">Hana Sato</p><p class="st-person-role">Course creator</p></div>
</div></figcaption>
</figure>
<figure class="tm-card">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tm-quote"><p>It replaced three subscriptions for me. Cheaper and better.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt="">
<div><p class="st-person-name">Omar Haddad</p><p class="st-person-role">YouTuber</p></div>
</div></figcaption>
</figure>
<figure class="tm-card">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tm-quote"><p>The analytics finally make sense. I know what to post next.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="">
<div><p class="st-person-name">Chloe Dubois</p><p class="st-person-role">Brand strategist</p></div>
</div></figcaption>
</figure>
<figure class="tm-card">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tm-quote"><p>Simple enough for my team of one, powerful enough for my agency clients.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
<div><p class="st-person-name">Ravi Shah</p><p class="st-person-role">Freelance marketer</p></div>
</div></figcaption>
</figure>
</div>
</div>
</div>
</section>
<section id="get-started" class="st st-cta-split-image" data-uid="smvnkxd74mit8">
<div class="st-wrap">
<div class="cs">
<div class="cs-copy">
<p class="st-eyebrow" data-anim="item">Get the app</p>
<h2 class="st-h2 cs-title" data-anim="item" data-anim-text>Your budget, <span class="hl">in your pocket</span></h2>
<ul class="st-checks cs-list" data-anim="item"><li>Smart spending insights every week</li><li>Bank-level security and Face ID</li><li>Free on iPhone and Android</li></ul>
<div class="st-btns" data-anim="item">
<a class="st-btn" data-magnetic href="https://apps.apple.com/"><span>Download for iPhone</span></a>
<a class="st-btn st-btn--ghost" data-magnetic href="https://play.google.com/"><span>Get it on Android</span></a>
</div>
</div>
<div class="cs-media" data-anim="media"><img width="720" height="1440" loading="lazy" src="https://webdevpuneet.com/images/section-templates/hero-phone.png" alt="The app’s spending dashboard on a phone"></div>
</div>
</div>
</section>
<section id="faq" class="st st-faq-split" data-uid="smvnkxd74banl">
<div class="st-wrap fs2">
<div class="fs2-side">
<header class="st-head st-head--left fs2-head">
<p class="st-eyebrow" data-anim="item">Support</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Frequently asked <span class="hl">questions</span></h2>
<p class="st-lead" data-anim="item">Quick answers to the questions we hear most. Can’t find yours? We reply within a few hours.</p>
</header>
<div class="fs2-card" data-anim="item">
<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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg></span>
<h3 class="fs2-card-title">Still need help?</h3>
<p class="fs2-card-text">Chat with a real person on our support team, Monday to Friday.</p>
<a class="st-btn" href="https://webdevpuneet.com/support"><span>Contact support</span></a>
</div>
</div>
<div class="fs2-list" data-accordion>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>How long does delivery take?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Orders ship within one business day. Standard delivery takes 2–4 days and express delivery arrives the next working day.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>What is your returns policy?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Return anything within 30 days for a full refund. Returns are free: print the label from your account and drop the parcel at any collection point.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Do you ship internationally?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes, to over 40 countries. Duties and taxes are calculated at checkout, so there are no surprise fees on delivery.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>How do I track my order?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>You’ll get a tracking link by email as soon as your order ships. You can also follow it from the Orders page in your account.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Can I change or cancel my order?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>You can change or cancel an order within one hour of placing it from your account. After that, contact support and we’ll do our best.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Which payment methods do you accept?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>All major cards, Apple Pay, Google Pay and PayPal. Payments are processed securely and we never store your card details.</p></div>
</details>
</div>
</div>
</section>
<section class="st st-footer-minimal" data-uid="smvnkxd74w8gm">
<footer class="st-wrap fm">
<div class="fm-row" 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"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" /><path d="M12 18h.01" /></svg></span><span>Pocketly</span></span>
</a>
<nav aria-label="Footer"><ul class="fm-links"><li><a href="#features">Features</a></li><li><a href="#how-it-works">How it works</a></li><li><a href="#customers">Reviews</a></li><li><a href="#faq">FAQ</a></li></ul></nav>
<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>
</ul></div>
</div>
<p class="fm-copy">© 2026 Pocketly Ltd.</p>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#04131f}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#38bdf8;--st-btn-text:#04131f;--st-bg:#04131f;--st-surface:#0c2234;--st-text:#e0f2fe;--st-muted:#93b4c9;--st-radius:14;--st-max:1200;--st-font-heading:"Plus Jakarta Sans", 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}}
/* Simple Sticky Navbar */
.st-navbar-simple{overflow:visible;background:color-mix(in srgb,var(--st-bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--st-text) 8%,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}
.nb{position:relative;display:flex;align-items:center;gap:clamp(20px,3cqi,40px);min-height:72px}
.nb-nav{flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nb-links{list-style:none;display:flex;align-items:center;gap:4px;margin:0 auto}
.nb-link{display:block;padding:8px 14px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);font-weight:600;font-size:15.5px;text-decoration:none;transition:color .2s ease,background .2s ease}
.nb-link:hover{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 6%,transparent)}
.nb-link[aria-current="page"]{color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 11%,transparent)}
.nb-actions{display:flex;align-items:center;gap:18px}
.nb-login{color:var(--st-text);font-weight:600;font-size:15.5px;text-decoration:none}
.nb-login:hover{color:var(--st-brand)}
.nb .nb-cta{min-height:44px;padding:0 20px;font-size:15px}
@container st (max-width:900px){
.nb .st-burger{display:inline-block;margin-left:auto}
.nb-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.2px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 24px 60px -24px rgba(15,23,42,.35)}
.nb-links{flex-direction:column;align-items:stretch;gap:2px;margin:0}
.nb-link{padding:12px 14px;font-size:16.5px;color:var(--st-text)}
.nb-actions{flex-direction:column;align-items:stretch;gap:10px;padding:12px 4px 4px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.nb-login{padding:8px 10px}
.nb .nb-cta{width:100%;min-height:48px}
.has-menu:not(.menu-open) .nb-nav{display:none}
.st:not(.has-menu) .nb{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.st:not(.has-menu) .nb-nav{position:static;flex-basis:100%;box-shadow:none}
.st:not(.has-menu) .st-burger{display:none}
}
/* App Product Hero */
.st-app-product-hero{padding:clamp(56px,7cqi,104px) 0;background:radial-gradient(70% 80% at 85% 40%,color-mix(in srgb,var(--st-brand) 14%,transparent),transparent 70%),var(--st-bg)}
.ap{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(32px,5cqi,72px)}
.ap-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ap-title{font-size:clamp(38px,4.8cqi + 10px,68px)}
.ap-stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.ap-store{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 20px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-text);color:var(--st-bg);font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s ease}
.ap-store:hover{transform:translateY(-1px)}
.ap-store:focus-visible{outline:3px solid var(--st-brand);outline-offset:3px}
.ap-rating{font-size:14.5px;color:var(--st-muted)}
.ap-media{position:relative;display:flex;justify-content:center}
.ap-blob{position:absolute;width:78%;aspect-ratio:1;top:12%;border-radius:42% 58% 55% 45%/48% 42% 58% 52%;background:linear-gradient(135deg,var(--st-brand),color-mix(in srgb,var(--st-brand) 40%,#ec4899));opacity:.9}
.ap-phone{position:relative;width:min(300px,62cqi);filter:drop-shadow(0 30px 40px color-mix(in srgb,var(--st-text) 30%,transparent))}
.ap-card{position:absolute;display:flex;flex-direction:column;padding:12px 16px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-bg);box-shadow:0 18px 40px -12px color-mix(in srgb,var(--st-text) 30%,transparent);font-size:13px;color:var(--st-muted)}
.ap-card strong{font-family:var(--st-font-heading);font-size:18px;color:var(--st-text)}
.ap-card1{left:2%;top:26%}
.ap-card2{right:0;bottom:18%}
@container st (max-width:820px){.ap{grid-template-columns:1fr}.ap-copy{align-items:center;text-align:center}.ap-stores{justify-content:center}.ap-card1{left:4%}.ap-card2{right:4%}}
/* Split Features With Image */
.st-features-split-image{padding:clamp(64px,8cqi,112px) 0}
.fs{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:clamp(36px,5cqi,80px)}
.fs-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.fs-head{margin-bottom:0}
.fs-list{list-style:none;display:flex;flex-direction:column;gap:20px}
.fs-point{display:flex;gap:16px;align-items:flex-start}
.fs-point .st-icon{width:42px;height:42px}
.fs-point .st-icon svg{width:21px;height:21px}
.fs-title{font-size:18px;letter-spacing:-.01em;margin-bottom:2px}
.fs-text{color:var(--st-muted);font-size:16px}
.fs-media{position:relative}
.fs-media::before{content:"";position:absolute;inset:10% 6% -6% -6%;border-radius:calc(var(--st-radius) * 2px);background:color-mix(in srgb,var(--st-brand) 14%,var(--st-surface))}
.fs-frame{position:relative;padding:10px;border-radius:calc(var(--st-radius) * 1.5px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 30px 70px -34px color-mix(in srgb,var(--st-text) 40%,transparent)}
.fs-frame img{width:100%;border-radius:calc(var(--st-radius) * 1px)}
@container st (max-width:860px){.fs{grid-template-columns:1fr}.fs-media{order:-1}.fs-media::before{inset:8% -3% -4% 3%}}
/* How It Works Steps */
.st-features-steps{padding:clamp(64px,8cqi,112px) 0}
.fp-steps{list-style:none;counter-reset:fp;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:clamp(20px,3cqi,40px);position:relative}
.fp-step{counter-increment:fp;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 6px}
.fp-step:not(:last-child)::after{content:"";position:absolute;top:36px;left:calc(50% + 52px);right:calc(-50% + 52px - clamp(20px,3cqi,40px));border-top:2px dashed color-mix(in srgb,var(--st-brand) 45%,transparent)}
.fp-badge{position:relative;display:grid;place-items:center;width:72px;height:72px;margin-bottom:8px;border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);box-shadow:0 14px 34px -18px color-mix(in srgb,var(--st-brand) 60%,transparent)}
.fp-badge .st-icon{background:none;width:40px;height:40px}
.fp-badge .st-icon svg{width:28px;height:28px}
.fp-num{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--st-brand);color:var(--st-btn-text);font:800 13px/1 var(--st-font-heading);box-shadow:0 0 0 4px var(--st-bg)}
.fp-num::before{content:counter(fp)}
.fp-title{font-size:20px;letter-spacing:-.01em}
.fp-text{color:var(--st-muted);font-size:16px;max-width:22em}
.fp-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(40px,5cqi,64px);text-align:center}
.fp-note{font-size:14px;color:var(--st-muted)}
@container st (max-width:760px){.fp-steps{grid-auto-flow:row;gap:36px}.fp-step:not(:last-child)::after{top:auto;bottom:-30px;left:50%;right:auto;height:24px;border-top:0;border-left:2px dashed color-mix(in srgb,var(--st-brand) 45%,transparent)}}
/* Testimonial Marquee */
.st-testimonials-marquee{padding:clamp(64px,8cqi,112px) 0}
.st-stars{color:#f59e0b;font-size:16px;letter-spacing:2px;line-height:1}
.st-person{display:flex;align-items:center;gap:12px}
.st-avatar{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;background:var(--st-surface)}
.st-person-name{font-weight:700;font-size:15.5px;line-height:1.3}
.st-person-role{color:var(--st-muted);font-size:14px;line-height:1.4}
.st-person-role:empty{display:none}
.tm-rows{display:flex;flex-direction:column;gap:18px}
.tm-row{overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tm-row::-webkit-scrollbar{display:none}
.tm-row.is-looping{overflow:hidden}
.tm-row:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:-3px}
.tm-track{display:flex;gap:18px;padding:0 18px 0 0;width:max-content}
.tm-row:not(.is-looping) .tm-track{padding-left:var(--st-pad)}
.tm-card{flex:none;width:340px;display:flex;flex-direction:column;gap:14px;margin:0;padding:22px 24px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.tm-quote{flex:1;font-size:16px;line-height:1.6}
.tm-card .st-stars{color:var(--st-brand)}
@container st (max-width:600px){.tm-card{width:280px}}
/* Split CTA With Image */
.st-cta-split-image{padding:clamp(48px,7cqi,96px) 0}
.cs{position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(24px,4cqi,56px);padding:clamp(36px,5cqi,72px) clamp(28px,5cqi,72px) 0;border-radius:calc(var(--st-radius) * 1px);background:radial-gradient(600px circle at 85% 20%,color-mix(in srgb,var(--st-brand) 22%,transparent),transparent 60%),var(--st-surface);color:#f1f5f9}
.cs-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:clamp(36px,5cqi,72px)}
.cs .cs-title{color:#fff;font-size:clamp(30px,3cqi + 14px,50px)}
.cs-list li{color:#cbd5e1}
.cs .st-btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.cs .st-btn--ghost:hover{border-color:#fff}
.cs-media{align-self:end;display:flex;justify-content:center}
.cs-media img{width:min(320px,100%);margin-bottom:-18%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
@container st (max-width:760px){.cs{grid-template-columns:1fr}.cs-media img{width:min(260px,70%)}}
/* Split FAQ With Contact Card */
.st-faq-split{padding:clamp(64px,8cqi,112px) 0}
.st-acc{border-bottom:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.st-acc-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font:700 clamp(17px,.6cqi + 14px,19px)/1.4 var(--st-font-heading);letter-spacing:-.01em}
.st-acc-q::-webkit-details-marker{display:none}
.st-acc-q:hover{color:var(--st-brand)}
.st-acc-q:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px;border-radius:6px}
.st-acc-icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 11%,transparent);transition:transform .3s ease,background .3s ease}
.st-acc-icon::before,.st-acc-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--st-brand);transform:translate(-50%,-50%)}
.st-acc-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s ease}
.st-acc[open]:not(.is-closing) .st-acc-icon{transform:rotate(180deg);background:var(--st-brand)}
.st-acc[open]:not(.is-closing) .st-acc-icon::before,.st-acc[open]:not(.is-closing) .st-acc-icon::after{background:var(--st-btn-text)}
.st-acc[open]:not(.is-closing) .st-acc-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.st-acc-a{overflow:hidden}
.st-acc-a p{padding:0 48px 24px 2px;color:var(--st-muted);font-size:16.5px;line-height:1.7}
.fs2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6cqi,96px);align-items:start}
.fs2-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:28px}
.fs2-head{margin:0}
.fs2-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(22px,2.6cqi,30px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface)}
.fs2-card .st-icon{margin-bottom:6px}
.fs2-card-title{font-size:19px}
.fs2-card-text{color:var(--st-muted);font-size:15.5px;margin-bottom:6px}
.fs2-list{border-top:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
@container st (max-width:860px){.fs2{grid-template-columns:1fr}.fs2-side{position:static}.fs2-card{order:2}}
/* Minimal Footer */
.st-footer-minimal{padding:36px 0 28px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,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-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}
.fm .st-brand-mark{font-size:19px}
.fm .st-brand-icon{width:30px;height:30px}
.fm-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;padding-bottom:24px;border-bottom:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.fm-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px}
.fm-links a{color:var(--st-muted);font-size:15px;font-weight:500;text-decoration:none}
.fm-links a:hover{color:var(--st-brand)}
.fm .st-social{width:36px;height:36px;background:none}
.fm .st-social:hover{background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand)}
.fm-copy{padding-top:20px;color:var(--st-muted);font-size:14px;text-align:center}
@container st (max-width:760px){.fm-row{flex-direction:column;text-align:center}.fm-links{justify-content:center}.fm .st-socials{justify-content:center}}
(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;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || reduce || window.ST_STILL) return;
document.querySelectorAll('.st [data-marquee]').forEach(function (track) {
var items = Array.prototype.slice.call(track.children);
if (!items.length) return;
items.forEach(function (el) {
var c = el.cloneNode(true);
c.setAttribute('aria-hidden', 'true');
c.querySelectorAll('a, button').forEach(function (a) { a.setAttribute('tabindex', '-1'); });
track.appendChild(c);
});
track.parentElement.classList.add('is-looping');
var rev = track.getAttribute('data-marquee') === 'reverse';
var speed = parseFloat(track.getAttribute('data-speed')) || 40; // pixels per second
var tween = G.fromTo(track, { xPercent: rev ? -50 : 0 }, { xPercent: rev ? 0 : -50, ease: 'none', repeat: -1, duration: (track.scrollWidth / 2) / speed });
var slow = function (to) { G.to(tween, { timeScale: to, duration: 0.6, ease: 'power2.out', overwrite: true }); };
var row = track.parentElement;
row.addEventListener('mouseenter', function () { slow(0); });
row.addEventListener('mouseleave', function () { slow(1); });
row.addEventListener('focusin', function () { slow(0); });
row.addEventListener('focusout', function () { slow(1); });
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
if (!G || reduce || !fine) return;
document.querySelectorAll('.st [data-magnetic]').forEach(function (el) {
var x = G.quickTo(el, 'x', { duration: 0.5, ease: 'power3.out' });
var y = G.quickTo(el, 'y', { duration: 0.5, ease: 'power3.out' });
el.addEventListener('pointermove', function (e) {
var r = el.getBoundingClientRect();
x((e.clientX - r.left - r.width / 2) * 0.3);
y((e.clientY - r.top - r.height / 2) * 0.4);
});
el.addEventListener('pointerleave', function () { x(0); y(0); });
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st [data-accordion]').forEach(function (list) {
var mode = list.getAttribute('data-accordion') || '';
var items = Array.prototype.slice.call(list.querySelectorAll('details'));
var body = function (d) { return d.querySelector('.st-acc-a'); };
var close = function (d) {
if (!d.open || d.classList.contains('is-closing')) return;
if (!anim) { d.open = false; return; }
d.classList.add('is-closing');
G.to(body(d), { height: 0, duration: 0.32, ease: 'power2.inOut', onComplete: function () {
d.open = false; d.classList.remove('is-closing'); G.set(body(d), { clearProps: 'height' });
} });
};
var open = function (d) {
d.open = true;
if (!anim) return;
var b = body(d);
G.fromTo(b, { height: 0 }, { height: 'auto', duration: 0.4, ease: 'power2.out', clearProps: 'height' });
G.fromTo(b.children, { y: -8, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, delay: 0.06, ease: 'power2.out', clearProps: 'transform,opacity' });
};
items.forEach(function (d) {
d.querySelector('summary').addEventListener('click', function (e) {
e.preventDefault();
if (d.open && !d.classList.contains('is-closing')) { close(d); return; }
if (/single/.test(mode)) items.forEach(function (o) { if (o !== d) close(o); });
open(d);
});
});
if (/first/.test(mode) && items[0]) items[0].open = true;
});
})();
(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%', 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();
})();