Personal Portfolio Website HTML Template — Free Snippet
Personal Portfolio Website template · 12 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
Copy & paste
Source Code
Requires
<section class="st st-navbar-floating" data-uid="smvw6s7oya1h9">
<div class="st-wrap">
<header class="nf">
<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"><circle cx="12" cy="8" r="5" /><path d="M20 21a8 8 0 0 0-16 0" /></svg></span><span>Alex Rivera</span></span>
</a>
<nav class="nf-nav" data-menu aria-label="Main">
<ul class="nf-links">
<li data-menu-item><a class="nf-link" href="#features"><span>Services</span></a></li>
<li data-menu-item><a class="nf-link" href="#customers"><span>Reviews</span></a></li>
<li data-menu-item><a class="nf-link" href="#blog"><span>Writing</span></a></li>
<li data-menu-item><a class="nf-link" href="#contact"><span>Contact</span></a></li>
</ul>
<a class="st-btn nf-cta" data-menu-item href="#contact"><span>Hire me</span></a>
</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>
</div>
<i hidden data-sticky-flag></i>
</section>
<section class="st st-portfolio-hero" data-uid="smvw6s7oyuzjx">
<div class="pf st-wrap">
<div class="pf-copy">
<span class="pf-status" data-anim="item"><i aria-hidden="true"></i><span>Available for freelance work</span></span>
<p class="pf-hello" data-anim="item">Hi, I’m Alex 👋</p>
<h1 class="pf-title" data-anim="item" data-anim-text>I design and build <span class="hl">websites people love to use</span></h1>
<p class="st-lead" data-anim="item">Product designer and front-end developer with 8 years of experience helping startups launch fast, accessible and beautiful products.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#blog"><span>See my work</span></a>
<a class="st-btn st-btn--ghost" href="mailto:[email protected]"><span>Get in touch</span></a>
</div>
<nav class="pf-social" data-anim="item" aria-label="Social links">
<a href="https://github.com/yourname"><span>GitHub</span></a>
<a href="https://www.linkedin.com/in/yourname"><span>LinkedIn</span></a>
<a href="https://dribbble.com/yourname"><span>Dribbble</span></a>
</nav>
</div>
<div class="pf-media" data-anim="media">
<div class="pf-ring" aria-hidden="true"></div>
<img class="pf-photo" width="900" height="1000" src="https://webdevpuneet.com/images/section-templates/hero-portrait.jpg" alt="Portrait of Alex">
</div>
</div>
</section>
<section id="features" class="st st-features-icon-grid" data-uid="smvw6s7oyzbm9">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Services</p>
<h2 class="st-h2" data-anim="item" data-anim-text>How I can <span class="hl">help</span></h2>
<p class="st-lead" data-anim="item">From the first sketch to launch day, I work with small teams who care about the details.</p>
</header>
<div class="fg-grid">
<article class="fg-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"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" /><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" /><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" /><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg></span>
<h3 class="fg-title">Brand & UI design</h3>
<p class="fg-text">Logos, design systems and interfaces that feel like you.</p>
</article>
<article class="fg-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"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg></span>
<h3 class="fg-title">Web development</h3>
<p class="fg-text">Fast, accessible websites built with modern tools.</p>
</article>
<article class="fg-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="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>
<h3 class="fg-title">Launch support</h3>
<p class="fg-text">Analytics, SEO basics and a smooth go-live.</p>
</article>
</div>
</div>
</section>
<section id="customers" class="st st-case-study-showcase" data-uid="smvw6s7oyaf0g">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Case studies</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Projects <span class="hl">and their results</span></h2>
<p class="st-lead" data-anim="item">Two recent projects with the numbers that mattered to the client.</p>
</header>
<ul class="cs-list">
<li class="cs-card" data-anim="item">
<div class="cs-media"><img class="cs-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/hero-dashboard.png" alt="A redesigned analytics dashboard on a laptop"></div>
<div class="cs-body">
<p class="cs-meta"><strong class="cs-client">Fieldnote</strong><span class="cs-tag">Product design</span></p>
<h3 class="cs-headline">Redesigning onboarding to <span class="hl">cut drop-off by a third</span></h3>
<p class="cs-summary">Six weeks of research, prototypes and tests to make a notes app’s first ten minutes clearer.</p>
<dl class="cs-stats">
<div class="cs-stat"><dt>drop-off</dt><dd>-34%</dd></div>
<div class="cs-stat"><dt>week-one activation</dt><dd>+22%</dd></div>
</dl>
<figure class="cs-quote">
<blockquote>Alex asked better questions than anyone else we had worked with.</blockquote>
<figcaption><strong>Mina Park</strong><span>CEO, Fieldnote</span></figcaption>
</figure>
<a class="cs-link" href="#"><span>Read the case study</span> <span aria-hidden="true">→</span></a>
</div>
</li>
<li class="cs-card" data-anim="item">
<div class="cs-media"><img class="cs-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-course.png" alt="A course website with a lesson list"></div>
<div class="cs-body">
<p class="cs-meta"><strong class="cs-client">Design Academy</strong><span class="cs-tag">Website</span></p>
<h3 class="cs-headline">A course site that <span class="hl">tripled enrolments</span></h3>
<p class="cs-summary">A new structure, clearer pricing and a lighter page for a design school’s main course.</p>
<dl class="cs-stats">
<div class="cs-stat"><dt>enrolments</dt><dd>3×</dd></div>
<div class="cs-stat"><dt>load time</dt><dd>-1.4 s</dd></div>
</dl>
<a class="cs-link" href="#"><span>Read the case study</span> <span aria-hidden="true">→</span></a>
</div>
</li>
</ul>
</div>
</section>
<section id="showcase" class="st st-scroll-ring" data-uid="smvw6s7oyn6lg">
<div class="st-wrap rg-head">
<p class="st-eyebrow" data-anim="item">More projects</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Recent work, <span class="hl">up close</span></h2>
<p class="st-lead" data-anim="item">Drag or scroll through a few more projects. Each one links to the full story.</p>
</div>
<div class="rg-row" data-style="coverflow" data-tilt="on" data-reflect="on" data-details="below" data-cta="View the project" data-ring role="region" aria-roledescription="carousel" aria-label="Featured cards">
<a class="rg-card" href="#features">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-course.png" alt="A course website with a lesson list">
<span class="rg-body">
<span class="rg-tag">Website</span>
<span class="rg-title">Design Academy</span>
<span class="rg-text">A clearer structure and pricing for a design school.</span>
</span>
</a>
<a class="rg-card" href="#features">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/hero-dashboard.png" alt="An analytics dashboard on a laptop">
<span class="rg-body">
<span class="rg-tag">Product design</span>
<span class="rg-title">Fieldnote</span>
<span class="rg-text">Onboarding that cut drop-off by a third.</span>
</span>
</a>
<a class="rg-card" href="#features">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-realestate.jpg" alt="A property listing page">
<span class="rg-body">
<span class="rg-tag">Website</span>
<span class="rg-title">Casa Nova</span>
<span class="rg-text">A calm, photo-first site for a small estate agent.</span>
</span>
</a>
<a class="rg-card" href="#features">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-booking.png" alt="A booking calendar">
<span class="rg-body">
<span class="rg-tag">Product</span>
<span class="rg-title">Slotwise</span>
<span class="rg-text">A booking flow that fits on one screen.</span>
</span>
</a>
<a class="rg-card" href="#features">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-restaurant.jpg" alt="A restaurant menu page">
<span class="rg-body">
<span class="rg-tag">Brand</span>
<span class="rg-title">Brasa</span>
<span class="rg-text">Identity and menu design for a wood-fired restaurant.</span>
</span>
</a>
</div>
</section>
<section id="customers-2" class="st st-testimonials-carousel" data-uid="smvw6s7ozz6kj">
<div class="st-wrap">
<div class="tc-top">
<header class="st-head st-head--left tc-head">
<p class="st-eyebrow" data-anim="item">Kind words</p>
<h2 class="st-h2" data-anim="item" data-anim-text>What clients <span class="hl">say</span></h2>
<p class="st-lead" data-anim="item">Thousands of teams plan and ship with us every day. Here is what a few of them say.</p>
</header>
<div class="tc-arrows" data-anim="item">
<button type="button" class="tc-arrow" data-carousel-prev><span class="tc-sr">Previous testimonials</span><svg width="20" height="20" viewBox="0 0 24 24" 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>
<button type="button" class="tc-arrow" data-carousel-next><span class="tc-sr">Next testimonials</span><svg width="20" height="20" viewBox="0 0 24 24" 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>
<div class="tc-track" data-carousel tabindex="0" role="region" aria-label="Testimonials">
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>Our launch checklist used to live in five places. Now it lives in one, and we haven’t missed a step since.</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">Priya Raman</p><p class="st-person-role">Product Marketing, Orbit</p></div>
</div></figcaption>
</figure>
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>The best onboarding I’ve seen. Our whole team was productive on day one without a single training session.</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">Marcus Webb</p><p class="st-person-role">COO, Fernhill</p></div>
</div></figcaption>
</figure>
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>Reports that used to take me Friday afternoon now build themselves. I got my Fridays back.</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">Lena Fischer</p><p class="st-person-role">Project Lead, Alder & Co</p></div>
</div></figcaption>
</figure>
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>It scales with us. Twelve people last year, ninety this year, and it still feels fast and simple.</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">Tom Alvarez</p><p class="st-person-role">VP Engineering, Quill</p></div>
</div></figcaption>
</figure>
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>Clients can follow progress with a view-only link. Fewer status emails, happier 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-8.jpg" alt="">
<div><p class="st-person-name">Grace Kim</p><p class="st-person-role">Agency Owner, Studio Kim</p></div>
</div></figcaption>
</figure>
</div>
</div>
</section>
<section id="blog" class="st st-blog-cards" data-uid="smvw6s7ozcesy">
<div class="st-wrap">
<div class="bc-top">
<header class="st-head st-head--left bc-head">
<p class="st-eyebrow" data-anim="item">Writing</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Notes on <span class="hl">design and code</span></h2>
</header>
<a class="bc-all" data-anim="item" href="/blog/"><span>View all posts</span> <span aria-hidden="true">→</span></a>
</div>
<ul class="bc-grid">
<li class="bc-card" data-anim="item">
<a class="bc-cover" tabindex="-1" aria-hidden="true" href="/blog/faster-pages/"><img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-4.jpg" alt=""></a>
<p class="bc-meta"><span class="bc-cat">Engineering</span><span>Oct 14, 2026</span><span class="bc-sep" aria-hidden="true">·</span><span>8 min read</span></p>
<h3 class="bc-title"><a href="/blog/faster-pages/"><span>How we cut page load time in half</span></a></h3>
<p class="bc-excerpt">Lazy hydration, smarter caching and one surprising database index: the full story of our performance sprint.</p>
<p class="bc-author"><img width="64" height="64" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt=""><span>Leo Martins</span></p>
</li>
<li class="bc-card" data-anim="item">
<a class="bc-cover" tabindex="-1" aria-hidden="true" href="/blog/live-reports/"><img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-6.jpg" alt=""></a>
<p class="bc-meta"><span class="bc-cat">Product</span><span>Oct 9, 2026</span><span class="bc-sep" aria-hidden="true">·</span><span>5 min read</span></p>
<h3 class="bc-title"><a href="/blog/live-reports/"><span>Introducing live reports</span></a></h3>
<p class="bc-excerpt">Dashboards that update as your team works, with no spreadsheets and no Friday afternoon status updates.</p>
<p class="bc-author"><img width="64" height="64" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt=""><span>Nora Quinn</span></p>
</li>
<li class="bc-card" data-anim="item">
<a class="bc-cover" tabindex="-1" aria-hidden="true" href="/blog/four-day-sprints/"><img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-1.jpg" alt=""></a>
<p class="bc-meta"><span class="bc-cat">Culture</span><span>Oct 2, 2026</span><span class="bc-sep" aria-hidden="true">·</span><span>6 min read</span></p>
<h3 class="bc-title"><a href="/blog/four-day-sprints/"><span>What four-day sprints taught us</span></a></h3>
<p class="bc-excerpt">A year of shorter weeks: what changed in our output, our planning and how the team feels.</p>
<p class="bc-author"><img width="64" height="64" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt=""><span>Aisha Bello</span></p>
</li>
</ul>
</div>
</section>
<section id="contact" class="st st-contact-split-form" data-uid="smvw6s7ozdg7v">
<div class="st-wrap cs2">
<div class="cs2-info">
<header class="st-head st-head--left cs2-head">
<p class="st-eyebrow" data-anim="item">Contact</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Let’s work <span class="hl">together</span></h2>
<p class="st-lead" data-anim="item">Tell me about your project and timeline. I reply within one working day.</p>
</header>
<ul class="cs2-methods">
<li class="cs2-method" 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"><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>
<div><p class="cs2-label">Email us</p><a class="cs2-value" href="mailto:[email protected]"><span>[email protected]</span></a></div>
</li>
<li class="cs2-method" 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="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg></span>
<div><p class="cs2-label">Call us</p><a class="cs2-value" href="tel:+442079460958"><span>+44 20 7946 0958</span></a></div>
</li>
<li class="cs2-method" 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="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" /></svg></span>
<div><p class="cs2-label">Visit us</p><a class="cs2-value" href="https://www.openstreetmap.org/search?query=Clerkenwell%20Road%20London"><span>12 Clerkenwell Road, London</span></a></div>
</li>
<li class="cs2-method" 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" /><polyline points="12 6 12 12 16 14" /></svg></span>
<div><p class="cs2-label">Office hours</p><p class="cs2-value">Mon–Fri, 9am–6pm GMT</p></div>
</li>
</ul>
</div>
<div class="cs2-card" data-anim="media">
<form class="st-form" method="post" data-form action="https://formspree.io/f/your-form-id">
<div class="st-form-fields" data-form-fields>
<div class="st-form-row">
<label class="st-field"><span>Your name</span><input name="name" type="text" required autocomplete="name"></label>
<label class="st-field"><span>Email</span><input name="email" type="email" required autocomplete="email"></label>
</div>
<label class="st-field"><span>How can we help?</span><textarea name="message" rows="5" required></textarea></label>
<input class="st-hp" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
<button class="st-btn st-form-btn" type="submit"><span>Send message</span></button>
<p class="st-form-note">We reply within one business day.</p>
<p class="st-form-error" data-form-error hidden role="alert">Sorry, something went wrong. Please try again or email us directly.</p>
</div>
<div class="st-form-success" data-form-success hidden tabindex="-1" role="status">
<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.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span>
<h3>Thanks, message sent!</h3>
<p>We’ll get back to you within one business day.</p>
</div>
</form>
</div>
</div>
</section>
<section class="st st-floating-social-share" data-uid="smvw6s7oza9ew">
<div class="ss" data-ss data-side="right" data-align="center" style="--ss-top:50%" data-mobile="bar" data-look="network" data-shape="attached" data-size="default" data-tips="on" data-start="open" data-copied="Link copied">
<div class="ss-panel" role="group" aria-label="Share this page">
<ul class="ss-list"><li class="ss-item"><a class="ss-btn" data-net="linkedin" data-share="https://www.linkedin.com/sharing/share-offsite/?url={url}" href="https://www.linkedin.com/sharing/share-offsite/" target="_blank" rel="noopener noreferrer" style="--c:#0A66C2" aria-label="Share on LinkedIn (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="ss-tip" aria-hidden="true">LinkedIn</span></a></li><li class="ss-item"><a class="ss-btn" data-net="x" data-share="https://x.com/intent/post?url={url}&text={title}&via={via}&hashtags={tags}" href="https://x.com/intent/post" target="_blank" rel="noopener noreferrer" style="--c:#111111" aria-label="Share on X (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg><span class="ss-tip" aria-hidden="true">X</span></a></li><li class="ss-item"><a class="ss-btn" data-net="email" data-share="mailto:?subject={title}&body={text}" href="mailto:" style="--c:#6B7280" aria-label="Share on Email"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.970 5.700a1.940 1.940 0 0 1-2.060 0L2 7"/></svg><span class="ss-tip" aria-hidden="true">Email</span></a></li><li class="ss-item"><button type="button" class="ss-btn" data-net="copy" style="--c:#0F7B3F" aria-label="Copy link"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="13" x="8" y="8" rx="2.500"/><path d="M16 8V6.500A2.500 2.500 0 0 0 13.500 4h-7A2.500 2.500 0 0 0 4 6.500v7A2.500 2.500 0 0 0 6.500 16H8"/></svg><svg class="ss-ic ss-ic--done" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span class="ss-tip" aria-hidden="true">Copy link</span></button></li><li class="ss-item ss-item--hide"><button type="button" class="ss-hide" data-ss-hide aria-expanded="true" aria-label="Hide share buttons"><svg class="ss-ic ss-ic--hide" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></button></li></ul>
</div>
<button type="button" class="ss-tab" data-ss-show aria-expanded="true" aria-label="Show share buttons"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.600 13.500 6.800 4M15.400 6.500l-6.800 4"/></svg><span class="ss-tab-text" aria-hidden="true">Share</span></button>
<span class="ss-live" role="status" aria-live="polite"></span>
</div>
</section>
<section class="st st-footer-minimal" data-uid="smvw6s7ozmj7l">
<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"><circle cx="12" cy="8" r="5" /><path d="M20 21a8 8 0 0 0-16 0" /></svg></span><span>Alex Rivera</span></span>
</a>
<nav aria-label="Footer"><ul class="fm-links"><li><a href="#features">Services</a></li><li><a href="#customers">Reviews</a></li><li><a href="#blog">Writing</a></li><li><a href="#contact">Contact</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 Alex Rivera</p>
</footer>
</section>
<section class="st st-back-to-top" data-uid="smvw6s7ozyb9c">
<div class="btt" data-btt data-enabled="on" data-distance="500" data-pos="right" data-appear="fade" data-speed="0.8" data-mobile="on" data-shadow="on" style="--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:0.8s">
<div class="btt-demo" aria-hidden="true">
<span class="btt-bar btt-bar--lg"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--md"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--sm"></span>
<span class="btt-note">The button appears here once the page has scrolled</span>
</div><!--/btt-demo-->
<button type="button" class="btt-btn" aria-label="Back to top" title="Back to top"><svg class="btt-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.400" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
</div>
</section>
<section class="st st-cursor-follower" data-uid="smvw6s7ozoqj7">
<div class="cf" data-cf data-enabled="on" data-size="80" data-color="#ffffff" data-blend="difference" data-speed="0.18" data-border="0" data-border-style="solid" data-fill="on" data-grow="on" data-hide="off">
<div class="cf-stage" aria-hidden="true">
<p class="cf-word">Cur<b>sors</b></p>
<p class="cf-sub">Move your mouse over this box</p>
<div class="cf-art"></div>
<p class="cf-word cf-word--2">in <b>motion</b></p>
</div><!--/cf-stage-->
<span class="cf-dot" aria-hidden="true"></span>
</div>
</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:#fbf8f1}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#a16207;--st-btn-text:#ffffff;--st-bg:#fbf8f1;--st-surface:#f1eadb;--st-text:#2a2110;--st-muted:#6f6450;--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}}
/* Floating Pill Navbar */
.st-navbar-floating{overflow:visible;background:transparent;padding:14px 0}
.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}
.nf{position:relative;display:flex;align-items:center;gap:24px;max-width:1040px;margin:0 auto;padding:8px 8px 8px 18px;border-radius:999px;background:color-mix(in srgb,var(--st-surface) 82%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--st-text) 12%,transparent);box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.nf .st-brand{color:var(--st-text)}
.nf .st-brand-mark{font-size:19px}
.nf .st-brand-icon{width:30px;height:30px}
.nf-nav{flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nf-links{list-style:none;display:flex;gap:2px;margin:0 auto}
.nf-link{display:block;padding:9px 16px;border-radius:999px;color:var(--st-muted);font-weight:600;font-size:15px;text-decoration:none;transition:color .2s ease,background .2s ease}
.nf-link:hover{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 9%,transparent)}
.nf-link[aria-current="page"]{color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 13%,transparent)}
.nf .nf-cta{min-height:44px;padding:0 22px;border-radius:999px;font-size:15px}
.nf .st-burger{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 10%,transparent);border-radius:999px}
@container st (max-width:860px){
.nf .st-burger{display:inline-block;margin-left:auto;position:relative;z-index:2}
.nf .st-brand{position:relative;z-index:2}
.nf-nav{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:96px var(--st-pad) 48px;background:color-mix(in srgb,var(--st-surface) 97%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.nf-links{flex-direction:column;align-items:flex-start;gap:6px;margin:0}
.nf-link{padding:6px 0;font:800 clamp(30px,8cqi,44px)/1.15 var(--st-font-heading);letter-spacing:-.03em;color:var(--st-text);background:none!important}
.nf-link:hover{color:var(--st-brand)}
.nf .nf-cta{min-height:54px;padding:0 30px;font-size:17px}
.has-menu:not(.menu-open) .nf-nav{display:none}
.menu-open .nf{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--st-surface)}
.st:not(.has-menu) .nf{flex-wrap:wrap;border-radius:calc(var(--st-radius) * 1.4px)}
.st:not(.has-menu) .nf-nav{position:static;flex-basis:100%;padding:8px;background:none}
.st:not(.has-menu) .nf-link{font-size:18px}
.st:not(.has-menu) .st-burger{display:none}
}
/* Personal Portfolio Hero */
.st-portfolio-hero{padding:clamp(56px,7cqi,104px) 0}
.pf{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:clamp(32px,5cqi,72px)}
.pf-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.pf-status{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--st-surface);font-size:13.5px;font-weight:700}
.pf-status i{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px color-mix(in srgb,#16a34a 25%,transparent)}
.pf-hello{font-family:var(--st-font-heading);font-size:clamp(20px,1.6cqi + 12px,26px);font-weight:700;color:var(--st-brand)}
.pf-title{font-size:clamp(36px,4.4cqi + 10px,62px)}
.pf-social{display:flex;flex-wrap:wrap;gap:18px;padding-top:8px}
.pf-social a{font-weight:700;font-size:15px;text-decoration:none;color:var(--st-muted);border-bottom:2px solid color-mix(in srgb,var(--st-brand) 35%,transparent);padding-bottom:2px}
.pf-social a:hover{color:var(--st-text);border-color:var(--st-brand)}
.pf-media{position:relative;justify-self:center;width:min(420px,100%)}
.pf-ring{position:absolute;inset:-6%;border-radius:60% 40% 55% 45%/50% 55% 45% 50%;border:2px dashed color-mix(in srgb,var(--st-brand) 55%,transparent)}
.pf-photo{position:relative;width:100%;aspect-ratio:9/10;object-fit:cover;border-radius:58% 42% 50% 50%/48% 52% 48% 52%;box-shadow:0 30px 60px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
@container st (max-width:760px){.pf{grid-template-columns:1fr}.pf-media{grid-row:1;width:min(260px,70%)}}
/* Icon Grid Features */
.st-features-icon-grid{padding:clamp(64px,8cqi,112px) 0}
.fg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2cqi,24px)}
.fg-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.4cqi,30px);border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.fg-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.fg-card .st-icon{margin-bottom:6px}
.fg-title{font-size:19px;letter-spacing:-.01em}
.fg-text{color:var(--st-muted);font-size:16px}
.fg-link{margin-top:auto;padding-top:4px;color:var(--st-brand);font-weight:700;font-size:15px;text-decoration:none}
.fg-link:hover{text-decoration:underline}
@container st (max-width:960px){.fg-grid{grid-template-columns:repeat(2,1fr)}}
@container st (max-width:600px){.fg-grid{grid-template-columns:1fr}}
/* Case Study Showcase */
.st-case-study-showcase{padding:clamp(56px,7cqi,104px) 0}
.cs-list{list-style:none;display:flex;flex-direction:column;gap:clamp(28px,3.6cqi,48px)}
.cs-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);overflow:hidden;border-radius:calc(var(--st-radius) * 1.4px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent)}
.cs-card:nth-child(even) .cs-media{order:2}
.cs-media{position:relative;min-height:320px;background:color-mix(in srgb,var(--st-brand) 10%,var(--st-surface))}
.cs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(24px,3.6cqi,48px)}
.cs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14.5px}
.cs-client{font-weight:800}
.cs-tag{padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand);font-weight:700;font-size:12.5px}
.cs-headline{font-size:clamp(24px,1.8cqi + 14px,34px);line-height:1.15;letter-spacing:-.025em}
.cs-summary{color:var(--st-muted);font-size:16.5px;line-height:1.6}
.cs-stats{display:flex;flex-wrap:wrap;gap:12px clamp(20px,3cqi,40px);padding:16px 0;border-block:1px solid color-mix(in srgb,var(--st-text) 10%,transparent);width:100%}
.cs-stat{display:flex;flex-direction:column-reverse;gap:2px}
.cs-stat dd{margin:0;font:800 clamp(26px,2cqi + 14px,36px)/1 var(--st-font-heading);letter-spacing:-.03em;color:var(--st-brand)}
.cs-stat dt{color:var(--st-muted);font-size:14px}
.cs-quote{margin:0;padding-left:16px;border-left:3px solid var(--st-brand)}
.cs-quote blockquote{font-size:16.5px;line-height:1.55;font-style:italic}
.cs-quote figcaption{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:8px;font-size:14px}
.cs-quote figcaption span{color:var(--st-muted)}
.cs-quote figcaption span::before{content:"· "}
.cs-link{color:var(--st-brand);font-weight:700;text-decoration:none}
.cs-link:hover{text-decoration:underline}
@container st (max-width:860px){.cs-card{grid-template-columns:1fr}.cs-card:nth-child(even) .cs-media{order:0}.cs-media{min-height:0;aspect-ratio:16/10}}
/* 3D Scroll Carousel */
.st-scroll-ring{padding:clamp(64px,8cqi,112px) 0;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 50% 72%,color-mix(in srgb,var(--st-brand) 20%,var(--st-bg)),var(--st-bg) 72%)}
.rg-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:clamp(28px,4cqi,52px)}
.rg-head .st-lead{max-width:34em}
.rg-row{display:flex;gap:clamp(16px,2cqi,28px);overflow-x:auto;scroll-snap-type:x mandatory;--rg-in:max(var(--st-pad),calc((100% - var(--st-max) * 1px) / 2 + var(--st-pad)));padding:18px var(--rg-in) 28px;scroll-padding-inline:var(--rg-in);scrollbar-width:none}
.rg-row::-webkit-scrollbar{display:none}
.rg-card{flex:none;width:clamp(240px,72cqi,320px);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;color:inherit;text-decoration:none;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-brand) 35%,transparent);box-shadow:0 0 32px -6px color-mix(in srgb,var(--st-brand) 45%,transparent)}
.rg-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:color-mix(in srgb,var(--st-text) 8%,transparent);-webkit-user-drag:none;user-select:none}
.rg-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px}
.rg-tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.rg-title{font:700 clamp(18px,.7cqi + 14px,21px)/1.25 var(--st-font-heading)}
.rg-text{color:var(--st-muted);font-size:15px;line-height:1.5}
.rg-card:focus-visible{outline:3px solid var(--st-brand);outline-offset:4px}
.st-scroll-ring.is-ring .rg-img{aspect-ratio:3/2}
.st-scroll-ring.is-ring .rg-row{position:relative;display:block;overflow:visible;scroll-snap-type:none;padding:0;height:clamp(330px,64cqi,420px);perspective:1500px;perspective-origin:50% 40%;touch-action:pan-y;cursor:grab}
.st-scroll-ring.is-ring .rg-row.is-drag{cursor:grabbing}
.st-scroll-ring.is-ring .rg-card{position:absolute;left:50%;top:50%;width:clamp(210px,62cqi,320px);will-change:transform,opacity;backface-visibility:hidden;transition:box-shadow .4s}
.st-scroll-ring.is-ring .rg-card.is-active{border-color:var(--st-brand);box-shadow:0 0 0 1px var(--st-brand),0 0 70px -4px color-mix(in srgb,var(--st-brand) 65%,transparent)}
.st-scroll-ring.is-pin{padding-block:clamp(24px,4vh,56px);min-height:calc(100vh - var(--rg-head,0px));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.st-scroll-ring.is-pin .rg-head{margin-bottom:clamp(8px,2vh,28px);gap:8px}
.st-scroll-ring.is-pin .rg-row{height:clamp(300px,calc(100vh - var(--rg-head,0px) - 420px),540px)}
.st-scroll-ring.is-pin .rg-card{width:clamp(220px,calc((100vh - var(--rg-head,0px) - 420px) * .85),340px)}
.st-scroll-ring.is-ring .rg-row::after{content:"";position:absolute;left:50%;bottom:-4px;width:min(820px,84%);height:90px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--st-brand) 50%,transparent),transparent 70%);filter:blur(16px);pointer-events:none;z-index:0}
.st-scroll-ring.rg-reflect .rg-card{-webkit-box-reflect:below 4px linear-gradient(transparent 80%,rgba(255,255,255,.16))}
.st-scroll-ring.rg-reflect .rg-nav{margin-top:clamp(36px,6vh,56px)}
.st-scroll-ring.rg-below .rg-body{display:none}
.st-scroll-ring.rg-below .rg-img{aspect-ratio:16/10}
.st-scroll-ring.rg-below .rg-row{height:clamp(240px,48cqi,340px)}
.st-scroll-ring.rg-below.is-pin .rg-row{height:clamp(220px,calc(100vh - var(--rg-head,0px) - 600px),420px)}
.st-scroll-ring.rg-below.is-pin .rg-card{width:clamp(200px,calc((100vh - var(--rg-head,0px) - 600px) * 1.5),400px)}
.rg-cap{position:relative;z-index:200;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:34em;margin:clamp(24px,5vh,44px) auto 0;padding:0 24px}
.st-scroll-ring.rg-below .rg-cap{margin-top:clamp(4px,1.5vh,14px)}
.st-scroll-ring.rg-below.rg-reflect .rg-cap{margin-top:clamp(10px,2.5vh,24px)}
.rg-cap-tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.rg-cap-title{font:700 clamp(22px,1.2cqi + 15px,30px)/1.2 var(--st-font-heading)}
.rg-cap-text{color:var(--st-muted);font-size:16px;line-height:1.5}
.rg-cap-btn{margin-top:8px;display:inline-flex;align-items:center;padding:10px 22px;border-radius:999px;background:var(--st-brand);color:var(--st-brandText);font-weight:700;font-size:15px;text-decoration:none}
.rg-cap-btn:focus-visible{outline:3px solid var(--st-text);outline-offset:3px}
.rg-nav{position:relative;z-index:200;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(16px,2.5cqi,28px)}
.rg-arrow{width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--st-brand) 55%,transparent);background:transparent;color:var(--st-text);font-size:18px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.rg-arrow:hover{background:var(--st-brand);color:var(--st-brandText)}
.rg-arrow:focus-visible,.rg-dot:focus-visible{outline:3px solid var(--st-brand);outline-offset:3px}
.rg-dots{display:flex;gap:8px}
.rg-dot{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:color-mix(in srgb,var(--st-text) 28%,transparent);cursor:pointer;transition:background .2s,transform .2s}
.rg-dot[aria-current="true"]{background:var(--st-brand);transform:scale(1.35)}
.rg-progress{position:relative;z-index:200;width:min(180px,40%);height:3px;margin:14px auto 0;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--st-text) 16%,transparent)}
.rg-progress i{display:block;height:100%;transform-origin:0 50%;background:var(--st-brand)}
/* Testimonial Carousel */
.st-testimonials-carousel{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}
.tc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.4cqi,44px)}
.tc-head{margin:0}
.tc-arrows{display:flex;gap:10px;flex:none}
.tc-arrow{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,var(--st-text) 16%,transparent);background:var(--st-bg);color:var(--st-text);cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease}
.tc-arrow:hover:not(:disabled){background:var(--st-brand);border-color:var(--st-brand);color:var(--st-btn-text)}
.tc-arrow:disabled{opacity:.35;cursor:default}
.tc-arrow:focus-visible,.tc-track:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:3px}
.tc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tc-track{display:flex;gap:clamp(14px,1.8cqi,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 16px;margin:0 -2px;overscroll-behavior-x:contain}
.tc-track::-webkit-scrollbar{display:none}
.tc-track.is-draggable{scroll-snap-type:none;cursor:grab}
.tc-track.is-draggable:active{cursor:grabbing}
.tc-card{flex:0 0 clamp(280px,32%,400px);scroll-snap-align:start;display:flex;flex-direction:column;gap:16px;margin:0;padding:clamp(24px,2.6cqi,32px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);user-select:none}
.tc-quote{flex:1;font-size:17px;line-height:1.65}
@container st (max-width:700px){.tc-top{flex-direction:column;align-items:flex-start}.tc-card{flex-basis:85%}}
/* Blog Post Cards */
.st-blog-cards{padding:clamp(64px,8cqi,112px) 0}
.bc-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:clamp(28px,3.4cqi,44px)}
.bc-head{margin:0}
.bc-all{color:var(--st-brand);font-weight:700;text-decoration:none;white-space:nowrap}
.bc-all:hover{text-decoration:underline}
.bc-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6cqi,32px)}
.bc-card{display:flex;flex-direction:column;gap:10px}
.bc-cover{display:block;overflow:hidden;margin-bottom:8px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);aspect-ratio:16/10}
.bc-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.bc-card:hover .bc-cover img{transform:scale(1.06)}
.bc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--st-muted);font-size:13.5px}
.bc-cat{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 11%,transparent);color:var(--st-brand);font-weight:700;font-size:12.5px}
.bc-title{font-size:20px;line-height:1.3;letter-spacing:-.015em}
.bc-title a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .35s ease}
.bc-card:hover .bc-title a{background-size:100% 2px}
.bc-excerpt{color:var(--st-muted);font-size:15.5px}
.bc-author{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:14.5px;font-weight:600}
.bc-author img{width:32px;height:32px;border-radius:50%;object-fit:cover}
@container st (max-width:960px){.bc-grid{grid-template-columns:repeat(2,1fr)}}
@container st (max-width:620px){.bc-grid{grid-template-columns:1fr}}
/* Contact Form With Details */
.st-contact-split-form{padding:clamp(64px,8cqi,112px) 0}
.st-form{display:block}
.st-form-fields{display:flex;flex-direction:column;gap:16px}
.st-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.st-field{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:600;color:var(--st-text)}
.st-field input,.st-field textarea{width:100%;padding:13px 15px;border-radius:calc(var(--st-radius) * .8px);border:1px solid color-mix(in srgb,var(--st-text) 16%,transparent);background:var(--st-bg);color:var(--st-text);font:400 16px/1.5 var(--st-font-body);outline:none;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}
.st-field input:focus,.st-field textarea:focus{border-color:var(--st-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.st-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.st-form-btn{align-self:flex-start;min-width:180px}
.st-form-btn[aria-busy="true"]{opacity:.7;cursor:progress}
.st-form-note{font-size:13.5px;color:var(--st-muted)}
.st-form-error{padding:12px 14px;border-radius:calc(var(--st-radius) * .8px);background:#fef2f2;color:#b91c1c;font-size:14.5px}
.st-form-success{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0;outline:none}
.st-form-success[hidden],.st-form-error[hidden]{display:none}
.st-form-success h3{font-size:22px}
.st-form-success p{color:var(--st-muted)}
@container st (max-width:560px){.st-form-row{grid-template-columns:1fr}.st-form-btn{width:100%}}
.cs2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:clamp(36px,5cqi,80px)}
.cs2-info{display:flex;flex-direction:column;gap:32px}
.cs2-head{margin:0}
.cs2-methods{list-style:none;display:flex;flex-direction:column;gap:20px}
.cs2-method{display:flex;align-items:center;gap:16px}
.cs2-label{color:var(--st-muted);font-size:14px}
.cs2-value{display:block;color:var(--st-text);font-weight:700;font-size:16.5px;text-decoration:none}
a.cs2-value:hover{color:var(--st-brand)}
.cs2-card{padding:clamp(24px,3.4cqi,40px);border-radius:calc(var(--st-radius) * 1.3px);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) 45%,transparent)}
@container st (max-width:860px){.cs2{grid-template-columns:1fr}}
/* Floating Social Share Bar */
.st-floating-social-share{overflow:visible;container-type:normal;height:0;min-height:0;background:transparent}
.ss{--ss-base:44px;--ss-size:var(--ss-base);--ss-r:min(calc(var(--st-radius) * 1px),14px);--ss-nudge:12px;position:fixed;z-index:900;top:var(--ss-top,50%);display:grid;pointer-events:none;font-family:var(--st-font-body)}
.ss[data-size=compact]{--ss-base:38px}
.ss[data-size=large]{--ss-base:52px}
.ss[data-side=left]{left:0}
.ss[data-side=right]{right:0;--ss-nudge:-12px}
.ss[data-align=center]{top:0;bottom:0;height:max-content;margin:auto 0}
.ss-panel,.ss-tab{grid-area:1/1;pointer-events:auto}
.ss-panel{transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s}
.ss-list{list-style:none;display:flex;flex-direction:column;flex-wrap:wrap;align-items:stretch;align-content:flex-start;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);filter:drop-shadow(0 10px 18px rgba(15,23,42,.22))}
.ss[data-align=custom] .ss-list{max-height:calc(100vh - var(--ss-top) - 12px);max-height:calc(100dvh - var(--ss-top) - 12px)}
.ss-item[hidden]{display:none}
.ss-btn{position:relative;flex:none;display:grid;place-items:center;width:var(--ss-size);height:var(--ss-size);border:0;background:var(--c,var(--st-brand));color:#fff;cursor:pointer;text-decoration:none;font:inherit;transition:width .25s cubic-bezier(.2,.8,.2,1),padding .25s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1),filter .25s ease,background .25s ease,color .25s ease,border-radius .25s ease}
.ss-item{display:flex;width:var(--ss-size)}
.ss-btn:hover,.ss-btn:focus-visible{filter:brightness(1.1)}
.ss:not([data-shape=attached]) .ss-btn:hover,.ss:not([data-shape=attached]) .ss-btn:focus-visible{transform:translateX(var(--ss-nudge))}
.ss[data-shape=attached] .ss-btn:hover,.ss[data-shape=attached] .ss-btn:focus-visible{width:calc(var(--ss-size) + 12px)}
.ss[data-side=left] .ss-item{justify-content:flex-start}
.ss[data-side=right] .ss-item{justify-content:flex-end}
.ss[data-side=left] .ss-btn:hover,.ss[data-side=left] .ss-btn:focus-visible{border-top-right-radius:var(--ss-r);border-bottom-right-radius:var(--ss-r)}
.ss[data-side=right] .ss-btn:hover,.ss[data-side=right] .ss-btn:focus-visible{border-top-left-radius:var(--ss-r);border-bottom-left-radius:var(--ss-r)}
.ss[data-shape=attached] .ss-list{gap:0}
.ss-btn:focus-visible,.ss-hide:focus-visible,.ss-tab:focus-visible{outline:3px solid var(--st-text);outline-offset:2px;z-index:2}
.ss-ic{display:block;width:calc(var(--ss-size) * .5);height:calc(var(--ss-size) * .5)}
.ss-ic--done{position:absolute;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease}
.ss-btn.is-done .ss-ic:not(.ss-ic--done){opacity:0}
.ss-btn.is-done .ss-ic--done{opacity:1;transform:none}
.ss[data-look=theme] .ss-btn{background:var(--st-brand);color:var(--st-btn-text)}
.ss[data-look=subtle] .ss-btn{background:var(--st-bg);color:var(--st-text)}
.ss[data-look=subtle] .ss-btn:hover,.ss[data-look=subtle] .ss-btn:focus-visible{background:var(--c,var(--st-brand));color:#fff;filter:none}
.ss[data-shape=attached][data-side=left] .ss-item:first-child .ss-btn{border-top-right-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=left] .ss-item:last-child .ss-btn{border-bottom-right-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=right] .ss-item:first-child .ss-btn{border-top-left-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=right] .ss-item:last-child .ss-btn{border-bottom-left-radius:var(--ss-r)}
.ss:not([data-shape=attached]) .ss-list{gap:8px;margin:0 8px}
.ss[data-shape=rounded] .ss-btn{border-radius:var(--ss-r)}
.ss[data-shape=circle] .ss-btn{border-radius:50%}
.ss[data-shape=circle] .ss-btn,.ss[data-shape=rounded] .ss-btn{box-shadow:none}
.ss-item--hide{display:block}
.ss-hide{display:grid;place-items:center;width:100%;height:calc(var(--ss-size) - 12px);border:0;background:#d4d7dd;color:#475569;cursor:pointer;transition:filter .2s ease}
.ss-hide:hover{filter:brightness(.94)}
.ss-hide .ss-ic{width:20px;height:20px}
.ss[data-side=right] .ss-ic--hide{transform:scaleX(-1)}
.ss[data-shape=rounded] .ss-hide{border-radius:var(--ss-r)}
.ss[data-shape=circle] .ss-hide{border-radius:999px}
.ss-tip{position:absolute;top:50%;display:block;padding:7px 11px;border-radius:8px;background:var(--st-text);color:var(--st-bg);font:600 13px/1 var(--st-font-body);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%);transition:opacity .15s ease,visibility 0s .15s}
.ss[data-side=left] .ss-tip{left:calc(100% + 10px)}
.ss[data-side=right] .ss-tip{right:calc(100% + 10px)}
.ss-btn.is-done .ss-tip{opacity:1;visibility:visible;transition:opacity .15s ease}
@media (hover:hover){.ss[data-tips=on] .ss-btn:hover .ss-tip,.ss[data-tips=on] .ss-btn:focus-visible .ss-tip{opacity:1;visibility:visible;transition:opacity .15s ease}}
.ss-tab{display:flex;flex-direction:column;align-items:center;gap:8px;align-self:center;width:var(--ss-size);padding:14px 0;border:0;background:var(--st-brand);color:var(--st-btn-text);cursor:pointer;font:700 12.5px/1 var(--st-font-body);letter-spacing:.08em;text-transform:uppercase;filter:drop-shadow(0 10px 18px rgba(15,23,42,.22));opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .4s}
.ss-tab .ss-ic{width:calc(var(--ss-size) * .46);height:calc(var(--ss-size) * .46)}
.ss-tab-text{writing-mode:vertical-rl}
.ss-tab-text:empty{display:none}
.ss[data-side=left] .ss-tab{justify-self:start;border-radius:0 var(--ss-r) var(--ss-r) 0;transform:translateX(-100%)}
.ss[data-side=right] .ss-tab{justify-self:end;border-radius:var(--ss-r) 0 0 var(--ss-r);transform:translateX(100%)}
.ss.is-collapsed .ss-tab{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:.12s,.12s,0s}
.ss.is-collapsed .ss-panel{opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .4s}
.ss[data-side=left].is-collapsed .ss-panel{transform:translateX(-110%)}
.ss[data-side=right].is-collapsed .ss-panel{transform:translateX(110%)}
.ss-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:1024px){.ss{--ss-size:min(var(--ss-base),42px)}}
@media (max-width:640px){
.ss[data-mobile=side]{--ss-size:min(var(--ss-base),40px)}
.ss[data-mobile=side] .ss-tip{display:none}
.ss[data-mobile=bar]{top:auto!important;bottom:0;left:0;right:0;display:block;height:0;margin:0;transform:none!important}
.ss[data-mobile=bar] .ss-panel{position:absolute;left:0;right:0;bottom:0;background:var(--st-bg);box-shadow:0 -6px 20px rgba(15,23,42,.18);padding-bottom:env(safe-area-inset-bottom)}
.ss[data-mobile=bar] .ss-list{flex-direction:row;margin:0;gap:0;filter:none}
.ss[data-mobile=bar] .ss-item{flex:1 1 0;min-width:0;width:auto}
.ss[data-mobile=bar] .ss-btn,.ss[data-mobile=bar] .ss-btn:hover,.ss[data-mobile=bar] .ss-btn:focus-visible{width:100%;height:48px;border-radius:0!important;transform:none}
.ss[data-mobile=bar] .ss-item--hide{flex:0 0 48px}
.ss[data-mobile=bar] .ss-hide{height:48px;border-radius:0}
.ss[data-mobile=bar] .ss-ic--hide{transform:rotate(-90deg)!important}
.ss[data-mobile=bar] .ss-tip{display:none}
.ss[data-mobile=bar] .ss-tab{position:absolute;align-self:auto;bottom:calc(16px + env(safe-area-inset-bottom));flex-direction:row;width:auto;height:44px;padding:0 16px;gap:8px;border-radius:999px;transform:translateY(24px)}
.ss[data-mobile=bar][data-side=left] .ss-tab{left:12px;border-radius:999px}
.ss[data-mobile=bar][data-side=right] .ss-tab{right:12px;border-radius:999px}
.ss[data-mobile=bar] .ss-tab-text{writing-mode:horizontal-tb}
.ss[data-mobile=bar].is-collapsed .ss-tab{transform:none}
.ss[data-mobile=bar][data-side=left].is-collapsed .ss-panel,.ss[data-mobile=bar][data-side=right].is-collapsed .ss-panel{transform:translateY(110%)}
}
@media print{.ss{display:none}}
/* 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}}
/* Back to Top Button */
.st-back-to-top{overflow:visible;container-type:normal;height:0;min-height:0;padding:0;background:transparent}
.st-back-to-top:has(.btt.is-preview){height:auto;padding:clamp(20px,3vw,40px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 6%,var(--st-bg))}
.btt{--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:.8s;--btt-bg:var(--st-brand);--btt-fg:var(--st-btn-text)}
.btt-btn{position:fixed;bottom:var(--btt-off);z-index:2147482500;display:grid;place-items:center;width:var(--btt-size);height:var(--btt-size);padding:0;border:0;border-radius:var(--btt-radius);background:var(--btt-bg);color:var(--btt-fg);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s,box-shadow .2s ease,background .2s ease}
.btt[data-pos=right] .btt-btn{right:var(--btt-off)}
.btt[data-pos=left] .btt-btn{left:var(--btt-off)}
.btt[data-appear=slide] .btt-btn{transform:translateY(28px)}
.btt[data-appear=zoom] .btt-btn{transform:scale(.5)}
.btt[data-shadow=on] .btt-btn{box-shadow:0 12px 28px -8px rgba(15,23,42,.45)}
.btt.is-visible .btt-btn{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s,box-shadow .2s ease,background .2s ease}
.btt.is-visible .btt-btn:hover{transform:translateY(-3px)}
.btt.is-visible .btt-btn:active{transform:translateY(0) scale(.96)}
.btt-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--btt-bg) 55%,#fff);outline-offset:3px}
.btt-svg{width:calc(var(--btt-size) * .46);height:calc(var(--btt-size) * .46)}
@media (max-width:899px){.btt[data-mobile=off] .btt-btn{display:none}}
.btt[data-enabled=off] .btt-btn{display:none}
.btt-demo{display:none}
.btt.is-preview .btt-demo{position:relative;display:flex;flex-direction:column;gap:14px;min-height:320px;padding:34px 30px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);box-shadow:0 20px 50px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.btt-bar{display:block;height:14px;width:100%;border-radius:7px;background:color-mix(in srgb,var(--st-text) 12%,transparent)}
.btt-bar--lg{height:22px;width:62%;background:color-mix(in srgb,var(--st-text) 22%,transparent)}
.btt-bar--md{width:84%}.btt-bar--sm{width:46%}
.btt-note{margin-top:auto;font-size:13px;color:var(--st-muted)}
.btt.is-preview .btt-btn{position:absolute;right:calc(var(--st-pad) + 18px);bottom:calc(clamp(20px,3vw,40px) + 18px);opacity:1;visibility:visible;pointer-events:auto;transform:none}
.btt.is-preview[data-pos=left] .btt-btn{right:auto;left:calc(var(--st-pad) + 18px)}
@media (prefers-reduced-motion:reduce){.btt-btn{transition:none}}
@media print{.btt{display:none}}
/* Cursor Follower (Blend Mode Circle) */
.st-cursor-follower{overflow:visible;container-type:normal;height:0;min-height:0;padding:0;background:transparent}
.st-cursor-follower:has(.cf.is-preview){height:auto;padding:clamp(20px,3vw,40px) var(--st-pad);background:var(--st-bg)}
.cf-stage{display:none}
.cf.is-preview .cf-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;min-height:clamp(340px,40cqi,480px);border-radius:calc(var(--st-radius) * 1.2px);background:linear-gradient(135deg,#1f1b3a,#3b1d5a 55%,#0f2a4a);color:#f4f4f6;cursor:none}
.cf-word{margin:0;font:900 clamp(56px,11cqi,128px)/.95 var(--st-font-heading);letter-spacing:-.04em;text-transform:lowercase;color:#f4f4f6}
.cf-word b{font-weight:900;background:linear-gradient(90deg,#f472b6,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.cf-word--2{color:rgba(244,244,246,.9)}
.cf-sub{margin:0;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,246,.7)}
.cf-art{width:min(280px,60%);height:70px;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#f59e0b,#f472b6)}
.cf-dot{position:absolute;left:0;top:0;z-index:5;display:none;box-sizing:border-box;border-radius:50%;pointer-events:none;will-change:transform}
.cf.is-preview .cf-dot{display:block}
@media (hover:none){.cf:not(.is-preview) .cf-dot{display:none}}
@media print{.cf-dot{display:none}}
(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;
if (!G || reduce) return;
if (window.ScrollTrigger) G.registerPlugin(ScrollTrigger);
var still = window.ST_STILL && !window.ST_SCROLL_FX;
var hover = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;
var clamp = function (v, a, b) { return Math.max(a, Math.min(b, v)); };
function build(row, pinned) {
var sec = row.closest('.st');
var cards = Array.prototype.slice.call(row.children).filter(function (c) { return c.classList.contains('rg-card'); });
var n = cards.length;
if (n < 3) return null;
var style = row.getAttribute('data-style') || 'ring';
var tiltOn = hover && row.getAttribute('data-tilt') !== 'off';
var reflect = row.getAttribute('data-reflect') !== 'off';
var below = row.getAttribute('data-details') === 'below';
var ctaText = row.getAttribute('data-cta') || 'View details';
var imgs = cards.map(function (c) { return c.querySelector('.rg-img'); });
var step = Math.min(48, 360 / n), rad = Math.PI / 180, R = 300, W = 300, active = -1, st = null;
var obj = { pos: pinned ? 0 : Math.floor((n - 1) / 2) }; // free mode: a middle card in front, cards on both sides
var T = { nx: 0, ny: 0 };
sec.classList.add('is-ring');
sec.classList.toggle('is-pin', pinned);
sec.classList.toggle('rg-reflect', reflect);
sec.classList.toggle('rg-below', below);
var nav = document.createElement('div');
nav.className = 'rg-nav';
var prev = document.createElement('button'), next = document.createElement('button'), dots = document.createElement('div');
prev.type = next.type = 'button';
prev.className = next.className = 'rg-arrow';
prev.textContent = String.fromCharCode(8592); next.textContent = String.fromCharCode(8594);
prev.setAttribute('aria-label', 'Previous card'); next.setAttribute('aria-label', 'Next card');
dots.className = 'rg-dots';
var dotEls = cards.map(function (c, i) {
var d = document.createElement('button');
d.type = 'button'; d.className = 'rg-dot'; d.setAttribute('aria-label', 'Show card ' + (i + 1) + ' of ' + n);
d.addEventListener('click', function () { go(i); });
dots.appendChild(d);
return d;
});
nav.appendChild(prev); nav.appendChild(dots); nav.appendChild(next);
var bar = document.createElement('div');
bar.className = 'rg-progress'; bar.setAttribute('aria-hidden', 'true');
var fill = document.createElement('i');
bar.appendChild(fill);
var extra = [nav, bar], cap = null, capTag, capTitle, capText, capBtn;
if (below) {
cap = document.createElement('div');
cap.className = 'rg-cap';
cap.setAttribute('aria-live', 'polite');
capTag = document.createElement('span'); capTag.className = 'rg-cap-tag';
capTitle = document.createElement('span'); capTitle.className = 'rg-cap-title';
capText = document.createElement('span'); capText.className = 'rg-cap-text';
capBtn = document.createElement('a'); capBtn.className = 'rg-cap-btn';
cap.appendChild(capTag); cap.appendChild(capTitle); cap.appendChild(capText); cap.appendChild(capBtn);
extra.unshift(cap);
}
var anchor = row;
extra.forEach(function (el) { anchor.insertAdjacentElement('afterend', el); anchor = el; });
var go = function (i) {
i = clamp(i, 0, n - 1);
if (pinned) { if (st) window.scrollTo({ top: st.start + (i / (n - 1)) * (st.end - st.start), behavior: 'smooth' }); }
else G.to(obj, { pos: i, duration: 0.6, ease: 'power2.inOut', overwrite: true, onUpdate: render });
};
prev.addEventListener('click', function () { go(Math.max(0, active) - 1); });
next.addEventListener('click', function () { go(Math.max(0, active) + 1); });
var onClick = [], onFocus = [];
if (!still) cards.forEach(function (c, i) {
var click = function (e) { if (i !== active) { e.preventDefault(); go(i); } };
var focus = function () { if (i !== active) go(i); };
c.addEventListener('click', click); c.addEventListener('focus', focus);
onClick.push(click); onFocus.push(focus);
});
var measure = function () {
W = cards[0].offsetWidth || 300;
R = (W * 1.1) / (2 * Math.sin(step * rad / 2));
};
// Where a card sits when it is "off" places from the front (negative = left)
var place = function (off) {
var abs = Math.abs(off), sg = off < 0 ? -1 : 1, c = Math.min(abs, 1), p;
if (style === 'coverflow') {
p = { x: sg * (c * W * 0.62 + Math.max(0, abs - 1) * W * 0.3), y: 0, z: -c * W * 0.55 - Math.max(0, abs - 1) * W * 0.12, ry: sg * c * 52, rz: 0, o: 1 - Math.max(0, abs - 1.1) * 0.5, s: 1 - Math.min(abs, 2) * 0.05 };
} else if (style === 'stack') {
if (off >= 0) p = { x: off * W * 0.13, y: -off * 12, z: -off * W * 0.35, ry: -Math.min(off, 3) * 5, rz: 0, o: 1 - off * 0.24, s: 1 - off * 0.04 };
else p = { x: off * W * 0.7, y: 0, z: 0, ry: off * 40, rz: off * 4, o: 1 + off * 1.3, s: 1 };
} else if (style === 'arc') {
p = { x: off * W * 0.95, y: off * off * W * 0.07, z: -off * off * W * 0.2, ry: off * 22, rz: off * 2.5, o: 1 - Math.max(0, abs - 1.2) * 0.6, s: 1 - Math.min(abs, 2) * 0.04 };
} else {
var a = off * step, aa = Math.abs(a);
p = { x: Math.sin(a * rad) * R, y: 0, z: Math.cos(a * rad) * R - R, ry: a, rz: 0, o: 1 - Math.max(0, aa - 30) / 75, s: 1 - Math.min(aa, 90) / 450 };
}
p.abs = abs;
return p;
};
var showCaption = function (c) {
var t = function (sel) { var e = c.querySelector(sel); return e ? e.textContent : ''; };
capTag.textContent = t('.rg-tag'); capTitle.textContent = t('.rg-title'); capText.textContent = t('.rg-text');
capBtn.textContent = ctaText; capBtn.setAttribute('href', c.getAttribute('href') || '#');
capBtn.setAttribute('aria-label', ctaText + ': ' + t('.rg-title'));
G.fromTo(cap.children, { autoAlpha: 0, y: 10 }, { autoAlpha: 1, y: 0, duration: 0.45, stagger: 0.05, ease: 'power3.out', overwrite: true });
};
var render = function () {
var pos = obj.pos, near = Math.round(pos);
cards.forEach(function (c, i) {
var p = place(i - pos), w = Math.max(0, 1 - p.abs * 1.6);
var o = clamp(p.o, 0, 1);
G.set(c, {
xPercent: -50, yPercent: reflect ? -58 : -50,
x: p.x, y: p.y, z: p.z,
rotationY: p.ry + (tiltOn ? T.nx * 9 * w : 0), rotationX: tiltOn ? T.ny * -7 * w : 0, rotationZ: p.rz,
scale: p.s,
autoAlpha: o < 0.04 ? 0 : o,
filter: p.abs < 0.17 ? 'none' : 'blur(' + Math.min(3, p.abs * 2 - 0.3).toFixed(2) + 'px)',
zIndex: 100 - Math.round(p.abs * 10)
});
if (tiltOn && imgs[i]) G.set(imgs[i], { x: -T.nx * 10 * w, y: -T.ny * 7 * w, scale: 1 + 0.06 * w });
});
G.set(fill, { scaleX: n > 1 ? clamp(pos / (n - 1), 0, 1) : 1 });
if (near !== active) {
active = near;
cards.forEach(function (c, i) { c.classList.toggle('is-active', i === near); });
dotEls.forEach(function (d, i) { if (i === near) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current'); });
if (cap) showCaption(cards[near]);
}
};
// Mouse tilt
var onMove, onLeave;
if (tiltOn) {
var aim = function (nx, ny) { G.to(T, { nx: nx, ny: ny, duration: 0.6, ease: 'power3.out', overwrite: 'auto', onUpdate: render }); };
onMove = function (e) { var r = row.getBoundingClientRect(); aim(clamp((e.clientX - r.left - r.width / 2) / (r.width / 2), -1, 1), clamp((e.clientY - r.top - r.height / 2) / (r.height / 2), -1, 1)); };
onLeave = function () { aim(0, 0); };
sec.addEventListener('pointermove', onMove); sec.addEventListener('pointerleave', onLeave);
}
// Drag or swipe: free mode follows the finger and settles on a card; pinned mode moves one card per swipe
var drag = null, suppress = false;
var onDown = function (e) { if (e.button > 0) return; drag = { x: e.clientX, y: e.clientY, pos: obj.pos, on: false }; };
var onDrag = function (e) {
if (!drag) return;
var dx = e.clientX - drag.x;
if (!drag.on) {
if (Math.abs(dx) < 10 || Math.abs(dx) < Math.abs(e.clientY - drag.y)) return;
drag.on = true;
try { row.setPointerCapture(e.pointerId); } catch (err) { /* not supported */ }
row.classList.add('is-drag');
if (!pinned) G.killTweensOf(obj);
}
if (!pinned) { obj.pos = clamp(drag.pos - dx / (W * 0.6), 0, n - 1); render(); }
};
var onUp = function (e) {
var d = drag; drag = null;
if (!d || !d.on) return;
row.classList.remove('is-drag');
suppress = true; setTimeout(function () { suppress = false; }, 60);
var dx = e.clientX - d.x;
if (pinned) { if (Math.abs(dx) > 50) go(Math.max(0, active) + (dx < 0 ? 1 : -1)); return; }
var target = Math.round(d.pos - dx / (W * 0.6));
if (target === Math.round(d.pos) && Math.abs(dx) > 40) target += dx < 0 ? 1 : -1;
go(target);
};
var onSwallow = function (e) { if (suppress) { e.preventDefault(); e.stopPropagation(); } };
row.addEventListener('pointerdown', onDown); row.addEventListener('pointermove', onDrag);
row.addEventListener('pointerup', onUp); row.addEventListener('pointercancel', onUp);
row.addEventListener('click', onSwallow, true);
var cleanup = function () {
if (onMove) { sec.removeEventListener('pointermove', onMove); sec.removeEventListener('pointerleave', onLeave); }
row.removeEventListener('pointerdown', onDown); row.removeEventListener('pointermove', onDrag);
row.removeEventListener('pointerup', onUp); row.removeEventListener('pointercancel', onUp);
row.removeEventListener('click', onSwallow, true);
G.killTweensOf(T); G.killTweensOf(obj);
cards.forEach(function (c, i) { c.removeEventListener('click', onClick[i]); c.removeEventListener('focus', onFocus[i]); c.classList.remove('is-active'); G.set(c, { clearProps: 'all' }); if (imgs[i]) G.set(imgs[i], { clearProps: 'all' }); });
extra.forEach(function (el) { el.remove(); });
row.classList.remove('is-drag');
sec.style.removeProperty('--rg-head');
sec.classList.remove('is-ring', 'is-pin', 'rg-reflect', 'rg-below');
};
// A sticky header stays on screen, so the section pins just below it and is that much shorter
var head = function () { var h = 0; document.querySelectorAll('.st').forEach(function (m) { if (m !== sec && m.querySelector('[data-sticky-flag]')) h = Math.max(h, m.offsetHeight); }); return h; };
var setHead = function () { sec.style.setProperty('--rg-head', (pinned ? head() : 0) + 'px'); };
setHead(); measure(); render();
if (!pinned) return cleanup;
var tw = G.to(obj, {
pos: n - 1, ease: 'none', onUpdate: render,
scrollTrigger: {
trigger: sec, start: function () { return 'top ' + head(); }, end: function () { return '+=' + Math.round((n - 1) * window.innerHeight * 0.55); },
pin: true, scrub: 0.5, anticipatePin: 1, invalidateOnRefresh: true,
snap: { snapTo: 1 / (n - 1), inertia: false, duration: { min: 0.2, max: 0.6 }, delay: 0.08, ease: 'power2.inOut' },
onRefresh: function () { setHead(); measure(); render(); }
}
});
st = tw.scrollTrigger;
return function () { st.kill(); tw.kill(); cleanup(); };
}
var mm = G.matchMedia();
var run = function (pinned) {
return function () {
var made = [];
document.querySelectorAll('.st [data-ring]').forEach(function (row) { var c = build(row, pinned); if (c) made.push(c); });
return function () { made.forEach(function (f) { f(); }); };
};
};
mm.add('(min-width: 900px)', run(!still && !!window.ScrollTrigger));
mm.add('(max-width: 899px)', run(false));
})();
(function () {
var G = window.gsap;
if (G && window.Draggable) G.registerPlugin(Draggable);
if (G && window.InertiaPlugin) G.registerPlugin(InertiaPlugin);
if (G && window.ScrollToPlugin) G.registerPlugin(ScrollToPlugin);
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
document.querySelectorAll('.st').forEach(function (sec) {
var track = sec.querySelector('[data-carousel]');
if (!track) return;
var prev = sec.querySelector('[data-carousel-prev]');
var next = sec.querySelector('[data-carousel-next]');
var max = function () { return Math.max(0, track.scrollWidth - track.clientWidth); };
var points = function () {
var first = track.children[0];
if (!first) return [0];
return Array.prototype.map.call(track.children, function (c) { return Math.min(max(), c.offsetLeft - first.offsetLeft); });
};
var nearest = function (x) { return points().reduce(function (a, p) { return Math.abs(p - x) < Math.abs(a - x) ? p : a; }, 0); };
var update = function () {
var x = track.scrollLeft;
if (prev) prev.disabled = x <= 2;
if (next) next.disabled = x >= max() - 2;
};
var go = function (dir) {
var ps = points(), x = track.scrollLeft, target = x;
if (dir > 0) { for (var i = 0; i < ps.length; i++) if (ps[i] > x + 4) { target = ps[i]; break; } }
else { for (var j = ps.length - 1; j >= 0; j--) if (ps[j] < x - 4) { target = ps[j]; break; } }
if (G && window.ScrollToPlugin && !reduce) G.to(track, { scrollTo: { x: target }, duration: 0.6, ease: 'power3.out', onUpdate: update });
else track.scrollTo({ left: target, behavior: reduce ? 'auto' : 'smooth' });
};
if (prev) prev.addEventListener('click', function () { go(-1); });
if (next) next.addEventListener('click', function () { go(1); });
track.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
update();
// Mouse drag with momentum on desktop; touch keeps native scrolling and snap.
// An invisible proxy is dragged and its x is mapped onto the track's native scrollLeft,
// so the slides' markup and layout never change.
if (G && window.Draggable && fine) {
track.classList.add('is-draggable');
var proxy = document.createElement('div');
var start = 0;
var apply = function () { track.scrollLeft = start - this.x; update(); };
Draggable.create(proxy, {
type: 'x',
trigger: track,
inertia: !!window.InertiaPlugin && !reduce,
dragClickables: false,
onPress: function () { G.killTweensOf(track); start = track.scrollLeft; G.set(proxy, { x: 0 }); this.update(); },
onDrag: apply,
onThrowUpdate: apply,
snap: { x: function (v) { return start - nearest(Math.max(0, Math.min(max(), start - v))); } },
onRelease: function () { if (!this.tween) { G.to(track, { scrollTo: window.ScrollToPlugin ? { x: nearest(track.scrollLeft) } : undefined, duration: 0.4, ease: 'power3.out', onUpdate: update }); } }
});
}
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st form[data-form]').forEach(function (form) {
var ok = form.querySelector('[data-form-success]');
var bad = form.querySelector('[data-form-error]');
var btn = form.querySelector('[type="submit"]');
var done = function () {
var fields = form.querySelectorAll('[data-form-fields]');
var show = function () {
Array.prototype.forEach.call(fields, function (f) { f.hidden = true; });
if (ok) { ok.hidden = false; ok.focus && ok.focus(); if (G && !reduce) G.from(ok, { y: 16, opacity: 0, duration: 0.5, ease: 'power3.out', clearProps: 'transform,opacity' }); }
};
if (G && !reduce && fields.length) G.to(fields, { opacity: 0, y: -10, duration: 0.25, onComplete: show }); else show();
};
form.addEventListener('submit', function (e) {
if (!window.fetch) return;
e.preventDefault();
if (bad) bad.hidden = true;
if (btn) { btn.disabled = true; btn.setAttribute('aria-busy', 'true'); }
var finish = function () { if (btn) { btn.disabled = false; btn.removeAttribute('aria-busy'); } };
if (window.ST_PREVIEW) { setTimeout(function () { finish(); done(); }, 600); return; }
fetch(form.action, { method: 'POST', body: new FormData(form), headers: { Accept: 'application/json' } })
.then(function (r) { finish(); if (r.ok) done(); else if (bad) bad.hidden = false; })
.catch(function () { finish(); if (bad) bad.hidden = false; });
});
});
})();
(function () {
var editing = window.ST_STILL || window.ST_PREVIEW;
var enc = encodeURIComponent;
function meta(sel) { var m = document.querySelector(sel); return m ? (m.getAttribute('content') || m.getAttribute('href') || '') : ''; }
function absolute(u) { try { return new URL(u, location.href).href; } catch (e) { return u; } }
document.querySelectorAll('.st [data-ss]').forEach(function (root) {
if (root.getAttribute('data-ss-ready')) return;
root.setAttribute('data-ss-ready', '1');
function vars() {
var url = root.getAttribute('data-url') || location.href.split('#')[0];
var title = root.getAttribute('data-title') || meta('meta[property="og:title"]') || document.title || '';
return {
url: url, title: title, text: (title ? title + ' ' : '') + url,
image: root.getAttribute('data-pin-image') || meta('meta[property="og:image"]'),
via: root.getAttribute('data-via') || '', tags: root.getAttribute('data-tags') || ''
};
}
function fill(tpl, v) {
var out = tpl.replace(/[{]([a-z]+)[}]/g, function (m, k) { return enc(v[k] || ''); });
var i = out.indexOf('?');
if (i < 1) return out;
var q = out.slice(i + 1).split('&').filter(function (p) { var e = p.indexOf('='); return e < 0 || p.slice(e + 1) !== ''; }).join('&');
return q ? out.slice(0, i) + '?' + q : out.slice(0, i);
}
function update() {
var v = vars();
root.querySelectorAll('a[data-share]').forEach(function (a) { a.href = fill(a.getAttribute('data-share'), v); });
}
update();
['pointerenter', 'focusin', 'touchstart'].forEach(function (ev) { root.addEventListener(ev, update, { passive: true }); });
var live = root.querySelector('.ss-live');
function flash(btn, msg) {
var tip = btn.querySelector('.ss-tip');
if (live) live.textContent = msg;
if (tip && !btn.classList.contains('is-done')) tip.setAttribute('data-was', tip.textContent);
btn.classList.add('is-done');
if (tip) tip.textContent = msg;
clearTimeout(btn._ssTimer);
btn._ssTimer = setTimeout(function () {
btn.classList.remove('is-done');
if (tip) tip.textContent = tip.getAttribute('data-was') || '';
if (live) live.textContent = '';
}, 2000);
}
root.querySelectorAll('[data-net="copy"]').forEach(function (btn) {
btn.addEventListener('click', function () {
var u = vars().url;
var msg = root.getAttribute('data-copied') || 'Link copied';
function fallback() {
var t = document.createElement('textarea');
t.value = u; t.setAttribute('readonly', ''); t.style.cssText = 'position:fixed;top:0;left:0;opacity:0';
document.body.appendChild(t); t.select();
try { if (document.execCommand('copy')) flash(btn, msg); } catch (e) {}
t.remove();
}
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(u).then(function () { flash(btn, msg); }, fallback);
else fallback();
});
});
var hide = root.querySelector('[data-ss-hide]'), tab = root.querySelector('[data-ss-show]');
if (!hide || !tab) return;
var KEY = 'ss-collapsed';
function store(v) { if (editing) return; try { sessionStorage.setItem(KEY, v ? '1' : '0'); } catch (e) {} }
function read() { if (editing) return null; try { return sessionStorage.getItem(KEY); } catch (e) { return null; } }
function set(collapsed, focus) {
root.classList.toggle('is-collapsed', collapsed);
hide.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
tab.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
if (focus) (collapsed ? tab : root.querySelector('.ss-btn')).focus({ preventScroll: true });
}
var saved = read();
set(saved === null ? root.getAttribute('data-start') === 'collapsed' : saved === '1', false);
hide.addEventListener('click', function () { set(true, true); store(true); });
tab.addEventListener('click', function () { set(false, true); store(false); });
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st [data-btt]').forEach(function (root) {
if (root.getAttribute('data-btt-ready')) return;
root.setAttribute('data-btt-ready', '1');
var btn = root.querySelector('.btt-btn');
var demo = root.querySelector('.btt-demo');
if (!btn || root.getAttribute('data-enabled') === 'off') { if (demo && !inline) demo.parentNode.removeChild(demo); return; }
if (!inline && demo) demo.parentNode.removeChild(demo);
if (inline) {
root.classList.add('is-preview', 'is-visible');
btn.addEventListener('click', function (e) { e.preventDefault(); });
return;
}
var dist = parseFloat(root.getAttribute('data-distance')) || 0;
var secs = parseFloat(root.getAttribute('data-speed'));
if (isNaN(secs)) secs = 0.8;
var ticking = false;
function check() { ticking = false; root.classList.toggle('is-visible', (window.pageYOffset || document.documentElement.scrollTop) > dist); }
window.addEventListener('scroll', function () { if (!ticking) { ticking = true; requestAnimationFrame(check); } }, { passive: true });
check();
var stopped = false;
['wheel', 'touchstart', 'keydown'].forEach(function (ev) { window.addEventListener(ev, function () { stopped = true; }, { passive: true }); });
btn.addEventListener('click', function () {
var from = window.pageYOffset || document.documentElement.scrollTop;
if (reduce || secs <= 0 || from < 2) { window.scrollTo({ top: 0, left: 0, behavior: 'instant' }); return; }
stopped = false;
var t0 = performance.now(), dur = secs * 1000;
(function step(t) {
var p = Math.min(1, (t - t0) / dur);
var e = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
window.scrollTo({ top: from * (1 - e), left: 0, behavior: 'instant' });
if (p < 1 && !stopped) requestAnimationFrame(step);
})(t0);
});
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
var fine = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var GROW = 'a,button,[role=button],input,select,textarea,label,summary,[data-cursor-grow]';
document.querySelectorAll('.st [data-cf]').forEach(function (root) {
if (root.getAttribute('data-cf-ready')) return;
root.setAttribute('data-cf-ready', '1');
var dot = root.querySelector('.cf-dot');
if (!dot) return;
var stage = root.querySelector('.cf-stage');
var preview = inline && stage;
if (root.getAttribute('data-enabled') === 'off' || (!preview && !fine)) { dot.parentNode.removeChild(dot); return; }
var num = function (name, d) { var v = parseFloat(root.getAttribute(name)); return isNaN(v) ? d : v; };
var size = num('data-size', 80), color = root.getAttribute('data-color') || '#ffffff';
var blend = root.getAttribute('data-blend') || 'difference', speed = reduce ? 1 : Math.min(1, Math.max(0.02, num('data-speed', 0.18)));
var fill = root.getAttribute('data-fill') !== 'off', grow = root.getAttribute('data-grow') !== 'off';
var bw = num('data-border', 0); if (!fill && bw < 2) bw = 2;
var s = dot.style;
s.width = s.height = size + 'px';
s.marginLeft = s.marginTop = (-size / 2) + 'px';
s.background = fill ? color : 'transparent';
s.mixBlendMode = blend;
s.border = bw ? bw + 'px ' + (root.getAttribute('data-border-style') || 'solid') + ' ' + color : '0';
s.opacity = '0';
s.transition = 'opacity .25s ease';
var host = null;
if (preview) { root.classList.add('is-preview'); stage.appendChild(dot); host = stage; }
else {
if (stage) stage.parentNode.removeChild(stage);
document.body.appendChild(dot);
s.position = 'fixed'; s.zIndex = '2147483000'; s.display = 'block';
if (root.getAttribute('data-hide') === 'on') {
var st = document.createElement('style');
st.setAttribute('data-cf-css', '');
st.textContent = 'html,html *{cursor:none!important}';
document.head.appendChild(st);
}
}
var tx = 0, ty = 0, x = 0, y = 0, sc = 1, tsc = 1, raf = 0, seen = false;
function frame() {
x += (tx - x) * speed; y += (ty - y) * speed; sc += (tsc - sc) * 0.2;
s.transform = 'translate3d(' + x.toFixed(2) + 'px,' + y.toFixed(2) + 'px,0) scale(' + sc.toFixed(3) + ')';
raf = (Math.abs(tx - x) > 0.15 || Math.abs(ty - y) > 0.15 || Math.abs(tsc - sc) > 0.004) ? requestAnimationFrame(frame) : 0;
}
function kick() { if (!raf) raf = requestAnimationFrame(frame); }
function move(e) {
var px = e.clientX, py = e.clientY;
if (host) { var r = host.getBoundingClientRect(); px -= r.left; py -= r.top; }
tx = px; ty = py;
if (!seen) { seen = true; x = tx; y = ty; s.opacity = '1'; }
s.opacity = '1';
if (grow && !host) tsc = (e.target && e.target.closest && e.target.closest(GROW)) ? 1.6 : 1;
kick();
}
var area = host || document;
area.addEventListener('mousemove', move, { passive: true });
area.addEventListener('mouseleave', function () { s.opacity = '0'; });
if (!host) { document.documentElement.addEventListener('mouseleave', function () { s.opacity = '0'; }); document.addEventListener('mouseenter', function () { if (seen) s.opacity = '1'; }); }
});
})();
(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 Personal Portfolio Website 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 personal portfolio website for “Alex Rivera” as clean HTML, CSS and a little JavaScript.
Page structure, top to bottom:
1. Floating Pill Navbar
2. Personal Portfolio Hero: “I design and build websites people love to use”
3. Icon Grid Features: “How I can help”
4. Case Study Showcase: “Projects and their results”
5. 3D Scroll Carousel: “Recent work, up close”
6. Testimonial Carousel: “What clients say”
7. Blog Post Cards: “Notes on design and code”
8. Contact Form With Details: “Let’s work together”
9. Floating Social Share Bar
10. Minimal Footer
11. Back to Top Button
12. Cursor Follower (Blend Mode Circle)
Look and feel:
- Colours as CSS custom properties: brand #a16207, page background #fbf8f1, cards #f1eadb, text #2a2110, muted text #6f6450. Corner radius 14px, content width 1200px.
- Headings in Plus Jakarta Sans, 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 creative 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 “Personal Portfolio Website Template — Free HTML Template”, a meta description of 150 to 160 characters, Open Graph tags and JSON-LD that suits a creative 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:
- Blog (blog.html)
- Contact (contact.html)
- Article (article.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
12 ready-made website sections assembled into one finished personal portfolio website page: Floating Pill Navbar, Personal Portfolio Hero, Icon Grid Features, Case Study Showcase, 3D Scroll Carousel, Testimonial Carousel, Blog Post Cards, Contact Form With Details, Floating Social Share Bar, Minimal Footer, Back to Top Button, Cursor Follower (Blend Mode Circle)
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
A floating back to top button that appears as visitors scroll, on every page of the multi-page version
A cursor follower circle that inverts the text and images under it with a blend mode
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind
About this UI Snippet
A One-Page Freelancer Portfolio That Answers the Client's Questions in Order
A prospective client scanning a freelancer's site wants three answers fast: who are you, can you do my job, and are you free? This layout is arranged around those. The hero has a real photo and an availability badge, so the "are you free" question is answered before it is asked. Services come next in a short icon grid, then a case study with a result, which is stronger proof than a gallery of screenshots.
Testimonials come after the work, where they confirm what the client has just seen. Writing and contact finish the page: blog cards show you think about your craft in public, and the contact form with details (email, location, response time) makes the final step easy. A floating share bar keeps the page easy to pass between people, which is how freelance work often spreads.
Swap the sample details for yours and keep the order. It is the one-page layout from the Personal Portfolio Website template; open it in the Website Builder to change the theme, add your own images and export.
Interactive extras built in
Beyond the core sections, this template adds a floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return; and a circle that follows the cursor and inverts the page beneath it with a blend mode, adding a bold, playful touch. Each one has its own page in the Website Section Templates library (Back to Top Button, Cursor Follower), 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 12 Sections Behind This Personal Portfolio Website 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.
- Floating Pill Navbara floating pill navbar with short anchor links, enough for a one-page site
- Personal Portfolio Heroa real photo, one sentence on what you do and a badge showing whether you are taking work
- Icon Grid Featureswhat you do in six short blocks, so a client can see at once whether you cover their need
- Case Study Showcaseone project told with its result, the strongest proof a freelancer can show
- 3D Scroll Carouselan extra row of recent projects as a draggable carousel, so a client can browse more work after the two featured case studies
- Testimonial Carouselclient quotes in a carousel, placed after the work they are vouching for
- Blog Post Cardsrecent writing as cards, which shows you think about your craft outside paid work
- Contact Form With Detailsa contact form beside your email, location and usual response time, so reaching out is easy
- Floating Social Share Bara floating bar that makes the page easy to share between clients and collaborators
- Minimal Footera minimal footer with your social links and a copyright line
- Back to Top Buttona floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return
- Cursor Follower (Blend Mode Circle)a circle that follows the cursor and inverts the page beneath it with a blend mode, adding a bold, playful touch
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Personal Portfolio Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Set your availability honestlyEdit the badge in the hero to your real status, such as "Booking for March" or "Fully booked, join the waitlist", and update it as it changes.
- 3Pick one case study with a resultRewrite the case study around a single project and one measurable outcome: sales up, time saved, launch on schedule.
- 4Make contact effortlessPoint the form at your email handler or Formspree, and fill in your real email, timezone and typical reply time beside it.
- 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 freelancer's home on the web
Give clients one link that shows who you are, what you do, proof and how to reach you.
A job-hunting portfolio
Present selected projects and writing to employers with a hero that states your role and availability.
Learn container queries in a real layout
See how each section adapts to its own width, so the page works inside any container.
Got questions?
Frequently Asked Questions
Who you are, what you do, one or two projects with results, quotes from clients and a clear way to get in touch, with your availability stated.
One or two well-told ones beat a long list. Tell each as problem, work and result so a client can picture working with you.
The page already shows blog cards. Link each card to your own posts, or to articles you have published elsewhere.
It adds a floating back to top button and a cursor follower circle. 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 12 templates in the free Website Section Templates library: Floating Pill Navbar, Personal Portfolio Hero, Icon Grid Features, Case Study Showcase, 3D Scroll Carousel, Testimonial Carousel, Blog Post Cards, Contact Form With Details, Floating Social Share Bar, Minimal Footer, Back to Top Button, Cursor Follower (Blend Mode Circle). 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.