<!DOCTYPE html>
<html>
<head>
<title>Tech Startup Landing Page</title>
</head>
<body>

<div class="site" id="home">
  <header class="header">
    <a class="brand" href="#home"><span class="brand-icon">✱</span> volt<span class="blue">.</span></a>
    <nav id="nav" class="nav">
      <a href="#home">Home</a>
      <a href="#solutions">Solutions</a>
      <a href="#features">Features</a>
      <a href="#stories">Stories</a>
    </nav>
    <a class="header-cta" href="#contact">Get started <span>↗</span></a>
    <button id="menuBtn" class="menu-btn" aria-label="Toggle menu" aria-expanded="false">☰</button>
  </header>

<main>
    <section class="hero">
      <div class="hero-copy">
        <div class="micro"><span class="pulse"></span> IDEAS / PEOPLE / TECHNOLOGY</div>
        <h1>Think<br><span>BIG</span><span class="period">.</span><br>Build <i>bold.</i></h1>
        <p>We help ambitious teams turn their wildest ideas into remarkable digital experiences.</p>
        <div class="hero-actions">
          <a href="#solutions" class="btn btn-black">Explore solutions <span>↗</span></a>
          <a href="#features" class="video-link"><span class="play">▶</span> Discover more</a>
        </div>
        <div class="hero-stats">
          <div><strong>10K+</strong><small>CREATIVE MINDS</small></div>
          <div><strong>99%</strong><small>HAPPY CLIENTS</small></div>
          <div><strong>150+</strong><small>PROJECTS</small></div>
        </div>
      </div>
      <div class="hero-visual">
        <div class="hero-portrait">
          <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=1100&auto=format&fit=crop&q=85" alt="Creative portrait">
          <div class="portrait-label">THE FUTURE IS<br>YOURS TO MAKE ↗</div>
        </div>
        <div class="hero-side">
          <div class="blue-card">
            <span>01 / OUR MINDSET</span>
            <p>Different<br>thinking.<br><b>Real impact.</b></p>
            <span class="card-arrow">↗</span>
          </div>
          <div class="side-image">
            <img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=700&auto=format&fit=crop" alt="Modern architecture">
          </div>
        </div>
        <div class="floating-sticker">MAKE<br>IT<br>HAPPEN! ✳</div>
      </div>
    </section>

<div class="marquee">
      <div class="marquee-track">INNOVATE ✳ CREATE ✳ COLLABORATE ✳ IMAGINE ✳ INNOVATE ✳ CREATE ✳ COLLABORATE ✳ IMAGINE ✳</div>
    </div>

<section class="partners">
      <span>BUILT FOR TEAMS WHO THINK DIFFERENTLY</span>
      <div class="partner-names"><b>orbit®</b><b>◈ prism</b><b>kinetic.</b><b>✳ spark</b><b>MONO</b></div>
    </section>

<section class="about section-pad" id="solutions">
      <div class="section-tag">01 — WHO WE ARE</div>
      <div class="about-heading">
        <h2>Ordinary is<br><span>overrated.</span> <span class="asterisk">✳</span></h2>
        <div><p>We're a new kind of creative technology studio. Part imagination, part innovation, entirely obsessed with making things better.</p><a href="#features" class="under-link">See what we do ↗</a></div>
      </div>
      <div class="about-layout">
        <div class="about-photo">
          <img loading="lazy" src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=1100&auto=format&fit=crop" alt="Contemporary creative workspace">
          <span>GOOD IDEAS NEED ROOM TO GROW.</span>
        </div>
        <div class="about-panel">
          <span>OUR APPROACH / 002</span>
          <div class="orbit-art"><div class="orbit-one"></div><div class="orbit-two"></div><div class="orbit-three"></div><span>✳</span></div>
          <h3>Less ordinary.<br><em>More extraordinary.</em></h3>
          <p>We connect strategy, creativity, and technology to unlock what's next.</p>
          <a href="#contact" class="round-arrow">↗</a>
        </div>
      </div>
    </section>

<section class="features section-pad" id="features">
      <div class="section-tag">02 — WHAT WE DO</div>
      <div class="section-title"><h2>Big ideas.<br><span>Real solutions.</span></h2><p>Everything you need to go from “what if” to “what's next.”</p></div>
      <div class="feature-grid">
        <article class="feature-card yellow-card">
          <div class="feature-top"><span>01 / STRATEGY</span><span>↗</span></div>
          <div class="feature-symbol">✳</div>
          <h3>Think<br>different.</h3>
          <p>Turn your biggest challenges into your most exciting opportunities.</p>
        </article>
        <article class="feature-card blue-feature">
          <div class="feature-top"><span>02 / DESIGN</span><span>↗</span></div>
          <div class="feature-symbol">◈</div>
          <h3>Design<br>better.</h3>
          <p>Bold visual identities and digital products people genuinely love.</p>
        </article>
        <article class="feature-card dark-feature">
          <div class="feature-top"><span>03 / TECHNOLOGY</span><span>↗</span></div>
          <div class="feature-symbol">◎</div>
          <h3>Build<br>smarter.</h3>
          <p>Modern technology that turns ambitious thinking into reality.</p>
        </article>
      </div>
    </section>

<section class="showcase">
      <div class="showcase-image"><img loading="lazy" src="https://images.unsplash.com/photo-1531058020387-3be344556be6?w=1400&auto=format&fit=crop" alt="Immersive creative event"></div>
      <div class="showcase-content"><span>IDEAS WITHOUT LIMITS / 003</span><h2>Make some<br><em>noise.</em></h2><p>Break patterns. Challenge expectations. Create something people can't ignore.</p><a href="#stories" class="btn btn-yellow">Explore our world ↗</a></div>
    </section>

<section class="stories section-pad" id="stories">
      <div class="section-tag">03 — FRESH PERSPECTIVES</div>
      <div class="section-title"><h2>Worth a <span>look.</span></h2><p>Creative thinking from every angle.</p></div>
      <div class="story-grid">
        <article class="story">
          <div class="story-image"><img loading="lazy" src="https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=800&auto=format&fit=crop" alt="Vibrant abstract art"><span>↗</span></div>
          <div class="story-meta">CREATIVITY / 01</div><h3>Why the best ideas break the rules.</h3>
        </article>
        <article class="story">
          <div class="story-image"><img loading="lazy" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&auto=format&fit=crop" alt="Digital team collaboration"><span>↗</span></div>
          <div class="story-meta">TECHNOLOGY / 02</div><h3>The future belongs to the curious.</h3>
        </article>
        <article class="story">
          <div class="story-image"><img loading="lazy" src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=800&auto=format&fit=crop" alt="Modern workspace"><span>↗</span></div>
          <div class="story-meta">CULTURE / 03</div><h3>Making space for extraordinary thinking.</h3>
        </article>
      </div>
    </section>

<section class="numbers">
      <div><strong data-count="150">0</strong><span>PROJECTS LAUNCHED</span></div>
      <div><strong data-count="24">0</strong><span>CREATIVE PARTNERS</span></div>
      <div><strong data-count="12">0</strong><span>GLOBAL MARKETS</span></div>
      <div><strong data-count="98">0</strong><span>% GOOD ENERGY</span></div>
    </section>

<section class="contact" id="contact">
      <div class="contact-head"><span>04 — LET'S CONNECT</span><span>GREAT THINGS START HERE ↘</span></div>
      <h2>Got a big<br><em>idea?</em> <span>✳</span></h2>
      <div class="contact-bottom"><p>We'd love to hear about it.<br>Let's build something extraordinary.</p><a href="mailto:hello@example.com?subject=Let's%20create" class="contact-button">LET'S TALK ↗</a></div>
    </section>
  </main>

<footer>
    <div class="footer-top"><a class="footer-logo" href="#home">volt<span>.</span></a><div><a href="#solutions">About</a><a href="#features">Services</a><a href="#stories">Stories</a><a href="#contact">Contact</a></div></div>
    <div class="footer-bottom"><span>© 2026 VOLT — CONCEPT WEBSITE</span><span>MADE FOR THE BOLD ✳</span><a href="#home">BACK TO TOP ↑</a></div>
  </footer>
</div>

</body>
</html>

:root{--yellow:#f8e500;--blue:#214dff;--black:#121316;--white:#f7f7f3;--muted:#777}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:"DM Sans",sans-serif}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font:inherit}
img{width:100%;height:100%;object-fit:cover;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;letter-spacing:-.065em}
.site{overflow:hidden}
.header{height:88px;background:var(--yellow);display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:20px}
.brand,.footer-logo{font-family:"Space Grotesk";font-size:33px;font-weight:700;letter-spacing:-2px}
.brand-icon{font-size:36px;margin-right:6px}
.blue{color:var(--blue)}
.nav{display:flex;gap:36px;font-size:13px;font-weight:700}
.nav a:hover{color:var(--blue)}
.header-cta{background:var(--black);color:white;border-radius:40px;padding:15px 24px;font-size:13px;font-weight:700}
.header-cta span{margin-left:25px}
.menu-btn{display:none;background:none;border:0;font-size:26px}
.hero{background:var(--yellow);display:grid;grid-template-columns:49% 51%;min-height:650px;padding:35px 0 0 5%}
.hero-copy{padding:30px 20px 30px 0;display:flex;flex-direction:column;align-items:flex-start}
.micro,.section-tag{font-size:11px;letter-spacing:.14em;font-weight:800}
.pulse{display:inline-block;width:8px;height:8px;background:var(--blue);border-radius:50%;margin-right:8px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.4}}
.hero h1{font-size:clamp(70px,9.2vw,145px);line-height:.93;font-weight:700;margin:36px 0 28px}
.hero h1>span:not(.period){color:var(--blue)}
.hero h1 i{font-family:Georgia,serif;font-weight:400}
.period{color:var(--black)}
.hero-copy>p{font-size:17px;line-height:1.65;max-width:440px}
.hero-actions{display:flex;align-items:center;gap:28px;margin:30px 0 55px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:25px;border-radius:35px;padding:17px 25px;font-size:13px;font-weight:700;transition:transform .25s}
.btn:hover{transform:translateY(-4px)}
.btn-black{background:var(--black);color:white}
.video-link{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700}
.play{display:grid;place-items:center;border:1px solid var(--black);border-radius:50%;width:40px;height:40px;font-size:11px}
.hero-stats{display:flex;gap:28px;margin-top:auto;padding-bottom:35px}
.hero-stats>div{padding-right:25px;border-right:1px solid #b3a900}
.hero-stats>div:last-child{border:0}
.hero-stats strong{font-family:"Space Grotesk";font-size:32px;display:block;letter-spacing:-.06em}
.hero-stats small{font-size:9px;letter-spacing:.1em;font-weight:700}
.hero-visual{display:grid;grid-template-columns:65% 35%;position:relative;min-height:620px}
.hero-portrait{overflow:hidden;position:relative;border-radius:220px 220px 0 0;background:var(--blue)}
.hero-portrait img{mix-blend-mode:normal;filter:saturate(1.2)}
.portrait-label{position:absolute;bottom:35px;left:25px;background:var(--yellow);padding:14px;font-size:11px;font-weight:800;line-height:1.5;transform:rotate(-5deg)}
.hero-side{display:flex;flex-direction:column;padding-top:65px}
.blue-card{background:var(--blue);color:white;border-radius:65px 0 0 0;flex:1;padding:30px 22px;position:relative}
.blue-card>span:first-child{font-size:10px;letter-spacing:.08em}
.blue-card p{font-family:"Space Grotesk";font-size:clamp(20px,2.5vw,38px);line-height:1.15;margin-top:55px}
.blue-card p b{color:var(--yellow)}
.card-arrow{position:absolute;right:25px;bottom:20px;font-size:42px}
.side-image{height:40%;overflow:hidden}
.floating-sticker{position:absolute;right:22%;bottom:12%;background:var(--yellow);border:2px solid var(--black);border-radius:50%;width:115px;height:115px;display:grid;place-items:center;text-align:center;font-size:16px;font-weight:800;line-height:1.1;transform:rotate(16deg);box-shadow:6px 6px 0 var(--black)}
.marquee{background:var(--black);color:var(--yellow);overflow:hidden;padding:20px 0;white-space:nowrap}
.marquee-track{font-size:17px;font-weight:800;letter-spacing:.12em;width:max-content;animation:slide 24s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.partners{padding:40px 5%;display:flex;align-items:center;gap:55px;border-bottom:1px solid #ddd}
.partners>span{font-size:10px;font-weight:800;letter-spacing:.1em;max-width:160px}
.partner-names{flex:1;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.partner-names b{font-family:"Space Grotesk";font-size:clamp(18px,2vw,28px);letter-spacing:-.06em}
.section-pad{padding:110px 5%}
.section-tag{padding-bottom:22px;border-bottom:1px solid #ccc}
.about-heading{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:end;margin:55px 0 65px}
.about-heading h2,.section-title h2{font-size:clamp(55px,7.5vw,115px);line-height:1.05}
.about-heading h2>span:first-child,.section-title h2 span{color:var(--blue)}
.asterisk{font-size:.55em;color:var(--yellow);-webkit-text-stroke:2px var(--black)}
.about-heading p{font-size:18px;line-height:1.7;margin-bottom:30px}
.under-link{font-weight:800;font-size:13px;border-bottom:2px solid var(--black);padding-bottom:12px}
.about-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;min-height:520px}
.about-photo{position:relative;overflow:hidden;border-radius:22px}
.about-photo img{transition:transform .6s}
.about-photo:hover img{transform:scale(1.05)}
.about-photo>span{position:absolute;bottom:25px;left:25px;background:var(--yellow);padding:14px 20px;font-size:11px;font-weight:800}
.about-panel{background:var(--black);color:white;border-radius:22px;padding:35px;position:relative;overflow:hidden}
.about-panel>span{font-size:10px;letter-spacing:.1em}
.orbit-art{height:210px;position:relative;margin-top:15px}
.orbit-one,.orbit-two,.orbit-three{position:absolute;left:50%;top:50%;width:170px;height:170px;border:2px solid var(--yellow);border-radius:50%;transform:translate(-50%,-50%) rotate(30deg) scaleX(.5)}
.orbit-two{transform:translate(-50%,-50%) rotate(90deg) scaleX(.5)}
.orbit-three{transform:translate(-50%,-50%) rotate(150deg) scaleX(.5)}
.orbit-art span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:65px;color:var(--yellow)}
.about-panel h3{font-size:clamp(30px,3.2vw,49px);line-height:1.1}
.about-panel h3 em{color:var(--yellow);font-family:Georgia,serif;font-weight:400}
.about-panel p{color:#aaa;line-height:1.6;margin-top:18px;max-width:320px;font-size:14px}
.round-arrow{position:absolute;right:25px;bottom:25px;background:var(--yellow);color:var(--black);width:55px;height:55px;border-radius:50%;display:grid;place-items:center;font-size:25px}
.features{background:#ecece7}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:55px 0}
.section-title p{max-width:260px;font-size:17px;line-height:1.5}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{min-height:490px;padding:30px;border-radius:20px;display:flex;flex-direction:column;transition:transform .3s}
.feature-card:hover{transform:translateY(-8px)}
.yellow-card{background:var(--yellow)}
.blue-feature{background:var(--blue);color:white}
.dark-feature{background:var(--black);color:white}
.feature-top{display:flex;justify-content:space-between;font-size:11px;font-weight:800}
.feature-top span:last-child{font-size:26px}
.feature-symbol{font-size:125px;line-height:1.3;text-align:center;margin:auto}
.blue-feature .feature-symbol{color:var(--yellow)}
.dark-feature .feature-symbol{color:var(--yellow)}
.feature-card h3{font-size:clamp(35px,4vw,60px);line-height:1}
.feature-card p{font-size:14px;line-height:1.6;margin-top:20px;max-width:300px}
.showcase{background:var(--blue);display:grid;grid-template-columns:1fr 1fr;min-height:580px;color:white}
.showcase-image{overflow:hidden}
.showcase-content{padding:75px 9%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.showcase-content>span{font-size:11px;letter-spacing:.12em}
.showcase h2{font-size:clamp(65px,7vw,110px);line-height:1;margin:55px 0 25px}
.showcase h2 em{font-family:Georgia,serif;color:var(--yellow);font-weight:400}
.showcase p{font-size:18px;line-height:1.6;max-width:350px}
.btn-yellow{background:var(--yellow);color:var(--black);margin-top:35px}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.story-image{height:310px;position:relative;overflow:hidden;border-radius:15px}
.story-image img{transition:transform .5s}
.story:hover img{transform:scale(1.07)}
.story-image span{position:absolute;top:15px;right:15px;background:var(--yellow);width:45px;height:45px;border-radius:50%;display:grid;place-items:center;font-size:23px}
.story-meta{font-size:10px;letter-spacing:.1em;font-weight:800;color:var(--blue);margin:25px 0 12px}
.story h3{font-size:clamp(22px,2.4vw,33px);line-height:1.25}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);background:var(--yellow);padding:65px 5%;gap:30px}
.numbers>div{border-right:1px solid #b5aa00}
.numbers>div:last-child{border:0}
.numbers strong{font-family:"Space Grotesk";font-size:clamp(45px,6vw,90px);letter-spacing:-.08em;display:block}
.numbers span{font-size:11px;font-weight:800;letter-spacing:.08em}
.contact{background:var(--black);color:white;padding:85px 5%}
.contact-head{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em}
.contact h2{font-size:clamp(90px,14vw,220px);line-height:.95;margin:75px 0;letter-spacing:-.09em}
.contact h2 em{font-family:Georgia,serif;color:var(--yellow);font-weight:400}
.contact h2 span{color:var(--blue);font-size:.65em}
.contact-bottom{display:flex;align-items:end;justify-content:space-between;gap:30px}
.contact-bottom p{font-size:20px;line-height:1.5}
.contact-button{width:160px;height:160px;background:var(--yellow);color:var(--black);border-radius:50%;display:grid;place-items:center;font-weight:800;transition:.3s}
.contact-button:hover{transform:rotate(15deg) scale(1.07);background:var(--blue);color:white}
footer{background:#090a0c;color:white;padding:60px 5% 25px}
.footer-top{display:flex;justify-content:space-between;align-items:center}
.footer-logo{font-size:85px}
.footer-logo span{color:var(--yellow)}
.footer-top>div{display:flex;gap:25px;font-size:13px}
.footer-bottom{border-top:1px solid #333;padding-top:25px;margin-top:70px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#aaa}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:1000px){
.hero{grid-template-columns:1fr 1fr}
.hero h1{font-size:8.5vw}
.hero-visual{min-height:570px}
.hero-stats{gap:12px}
.hero-stats>div{padding-right:12px}
.partners{flex-direction:column;align-items:flex-start}
.about-layout{min-height:460px}
}
@media(max-width:700px){
.header{height:72px}
.brand{font-size:28px}
.nav{display:none;position:absolute;z-index:50;top:72px;left:0;right:0;background:var(--yellow);padding:25px 5%;flex-direction:column;box-shadow:0 15px 20px #0002}
.nav.open{display:flex}
.header-cta{margin-left:auto;padding:12px 16px}
.header-cta span{margin-left:6px}
.menu-btn{display:block}
.hero{grid-template-columns:1fr;padding:35px 5% 0}
.hero h1{font-size:clamp(65px,15vw,105px)}
.hero-copy{padding-right:0}
.hero-stats{width:100%;justify-content:space-between}
.hero-stats strong{font-size:26px}
.hero-stats small{font-size:8px}
.hero-visual{min-height:430px;margin:10px -5.55% 0}
.hero-portrait{border-radius:150px 150px 0 0}
.hero-side{padding-top:45px}
.blue-card{padding:20px 12px}
.blue-card p{font-size:20px;margin-top:40px}
.floating-sticker{width:85px;height:85px;font-size:12px}
.section-pad{padding:75px 5%}
.about-heading{grid-template-columns:1fr;gap:25px}
.about-heading h2,.section-title h2{font-size:clamp(50px,11vw,80px)}
.about-layout{grid-template-columns:1fr}
.about-photo{height:340px}
.about-panel{min-height:460px}
.section-title{flex-direction:column;align-items:flex-start}
.feature-grid{grid-template-columns:1fr}
.feature-card{min-height:410px}
.feature-symbol{font-size:95px}
.showcase{grid-template-columns:1fr}
.showcase-image{height:350px}
.showcase-content{padding:65px 5%}
.story-grid{grid-template-columns:1fr;gap:45px}
.story-image{height:340px}
.numbers{grid-template-columns:1fr 1fr}
.numbers>div:nth-child(2){border:0}
.numbers strong{font-size:55px}
.contact h2{font-size:15vw}
.contact-bottom{align-items:flex-start}
.contact-bottom p{font-size:15px}
.contact-button{width:110px;height:110px;font-size:12px;flex-shrink:0}
.footer-top{align-items:flex-start;flex-direction:column;gap:25px}
.footer-top>div{flex-wrap:wrap}
.footer-bottom{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.marquee-track,.pulse{animation:none}
.reveal{opacity:1;transform:none;transition:none}
}

(function () {
  "use strict";

var menuBtn = document.getElementById("menuBtn");
  var nav = document.getElementById("nav");

if (menuBtn && nav) {
    menuBtn.addEventListener("click", function () {
      var opened = nav.classList.toggle("open");
      menuBtn.textContent = opened ? "✕" : "☰";
      menuBtn.setAttribute("aria-expanded", String(opened));
    });

nav.querySelectorAll("a").forEach(function (link) {
      link.addEventListener("click", function () {
        nav.classList.remove("open");
        menuBtn.textContent = "☰";
        menuBtn.setAttribute("aria-expanded", "false");
      });
    });
  }

var reducedMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

if (!reducedMotion && "IntersectionObserver" in window) {
    var targets = document.querySelectorAll(
      ".about-heading, .about-layout, .section-title, .feature-card, .story, .showcase-content"
    );

targets.forEach(function (element) {
      element.classList.add("reveal");
      revealObserver.observe(element);
    });
  }

var counters = document.querySelectorAll("[data-count]");

function animateCounter(element) {
    var target = Number(element.getAttribute("data-count"));
    var duration = 1300;
    var startTime = null;

function update(timestamp) {
      if (startTime === null) startTime = timestamp;

var progress = Math.min((timestamp - startTime) / duration, 1);
      var eased = 1 - Math.pow(1 - progress, 3);
      element.textContent = String(Math.round(target * eased));

if (progress < 1) {
        requestAnimationFrame(update);
      }
    }

requestAnimationFrame(update);
  }

if (!reducedMotion && "IntersectionObserver" in window) {
    var counterObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          animateCounter(entry.target);
          counterObserver.unobserve(entry.target);
        }
      });
    }, { threshold: 0.3 });

counters.forEach(function (counter) {
      counterObserver.observe(counter);
    });
  } else {
    counters.forEach(function (counter) {
      counter.textContent = counter.getAttribute("data-count");
    });
  }

var cards = document.querySelectorAll(".feature-card");

if (!reducedMotion) {
    cards.forEach(function (card) {
      card.addEventListener("mousemove", function (event) {
        if (window.innerWidth < 701) return;

var bounds = card.getBoundingClientRect();
        var x = (event.clientX - bounds.left) / bounds.width;
        var y = (event.clientY - bounds.top) / bounds.height;

var rotationX = (0.5 - y) * 4;
        var rotationY = (x - 0.5) * 4;

card.style.transform =
          "perspective(900px) rotateX(" + rotationX +
          "deg) rotateY(" + rotationY + "deg)";
      });

card.addEventListener("mouseleave", function () {
        card.style.transform = "";
      });
    });
  }
})();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground