<header class="nav">
    <div class="brand">
      <span class="brand-mark">
        <span></span>
        <span></span>
        <span></span>
      </span>
      NORTHSTAR
    </div>

<nav>
      <a href="#about">About</a>
      <a href="#platform">Platform</a>
      <a href="#impact">Impact</a>
      <a href="#contact">Contact</a>
    </nav>

<section class="hero">

<div class="eyebrow">
        INTELLIGENCE FOR WHAT'S NEXT
      </div>

<h1>
        Build what
        <em>comes next.</em>
      </h1>

<p>
        Northstar helps ambitious teams turn complex ideas,
        data and technology into products people actually want to use.
      </p>

<div class="hero-actions">
        <a href="#platform" class="primary-btn">
          Explore platform
          <span>→</span>
        </a>

<a href="#about" class="text-link">
          Discover Northstar
        </a>
      </div>

</div>

<div class="hero-visual">

<div class="floating-card card-a">
        <div class="mini-label">ACTIVE SIGNAL</div>
        <strong>98.4%</strong>
        <span>decision confidence</span>
      </div>

<div class="floating-card card-b">
        <div class="mini-label">SYSTEM</div>
        <div class="status">
          <i></i>
          Operational
        </div>
      </div>

<div class="floating-card card-c">
        <div class="mini-label">NETWORK</div>
        <div class="bars">
          <span style="height:35%"></span>
          <span style="height:58%"></span>
          <span style="height:46%"></span>
          <span style="height:82%"></span>
          <span style="height:68%"></span>
          <span style="height:94%"></span>
        </div>
      </div>

</div>

</section>

<section class="logo-strip">

<div class="strip-label">
      TRUSTED BY TEAMS BUILDING THE FUTURE
    </div>

<div class="logos">
      <span>VERTEX</span>
      <span>ARC</span>
      <span>MONUMENT</span>
      <span>ELEMENT</span>
      <span>FLOWS</span>
      <span>ORBITAL</span>
    </div>

</section>

<section class="about section" id="about">

<div class="section-kicker">01 / ABOUT</div>

<h2>
        Complexity is
        <span>the problem.</span>
        Clarity is the advantage.
      </h2>

<p class="large">
          The most important decisions are rarely
          the simplest ones.
        </p>

<p>
          We combine intelligence, technology and human-centered
          design to help organizations navigate complexity,
          move faster and build products with lasting impact.
        </p>

</div>

</section>

<section class="platform section" id="platform">

<div class="section-kicker">02 / PLATFORM</div>

<div class="platform-header">
      <h2>
        One platform.
        <br>
        <span>Endless possibilities.</span>
      </h2>

<p>
        A connected system for discovering opportunities,
        understanding signals and turning insight into action.
      </p>
    </div>

<h3>See the signal</h3>

<p>
          Bring fragmented information together and
          understand what matters in real time.
        </p>

</article>

<h3>Find the pattern</h3>

<p>
          Surface the relationships hiding
          inside your data.
        </p>

</article>

<h3>Move with confidence</h3>

<p>
          Turn insights into decisions your
          teams can act on.
        </p>

<div class="feature-visual confidence-visual">
          <div class="confidence-ring">
            <strong>94</strong>
            <span>INDEX</span>
          </div>
        </div>

</article>

</div>

</section>

<section class="impact section" id="impact">

<div class="section-kicker">03 / IMPACT</div>

<div class="impact-top">
      <h2>
        Built for measurable
        <span>momentum.</span>
      </h2>

<p>
        From first idea to scaled operation,
        Northstar is designed around outcomes.
      </p>
    </div>

<div class="stat">
        <strong class="counter" data-target="42">0</strong>
        <span>%</span>
        <p>faster decision cycles</p>
      </div>

<div class="stat">
        <strong class="counter" data-target="3.8">0</strong>
        <span>x</span>
        <p>more signal from existing data</p>
      </div>

<div class="stat">
        <strong class="counter" data-target="91">0</strong>
        <span>%</span>
        <p>team adoption within 90 days</p>
      </div>

<div class="stat">
        <strong class="counter" data-target="24">0</strong>
        <span>/7</span>
        <p>intelligence when you need it</p>
      </div>

</div>

</section>

<section class="quote section">

<blockquote>
      The best technology doesn't add more
      complexity. It reveals the path through it.
    </blockquote>

<div class="quote-person">
      <div class="avatar">JS</div>
      <div>
        <strong>Jordan Stone</strong>
        <span>Founder & CEO, Northstar</span>
      </div>
    </div>

</section>

<section class="cta section" id="contact">

<div class="section-kicker">04 / LET'S BUILD</div>

<h2>
      What's next
      <span>starts here.</span>
    </h2>

<p>
      Tell us what you're building.
      We'll help you see what's possible.
    </p>

<a href="mailto:hello@northstar.example" class="primary-btn light">
      Start a conversation
      <span>↗</span>
    </a>

</section>

<footer>

<div class="brand">
      <span class="brand-mark">
        <span></span>
        <span></span>
        <span></span>
      </span>
      NORTHSTAR
    </div>

<div class="footer-right">
      © 2026 Northstar
      <span>Privacy</span>
      <span>Terms</span>
    </div>

</footer>

</div>

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #0a0c0f;
  color: #f4f4ef;

font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  min-height: 100vh;
}

/* ==============================
   NAVIGATION
============================== */

.nav {
  height: 86px;

display: flex;
  align-items: center;
  justify-content: space-between;

padding: 0 5vw;

position: absolute;
  top: 0;
  left: 0;
  right: 0;

z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;

font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.brand-mark {
  width: 25px;
  height: 25px;

display: flex;
  align-items: flex-end;
  gap: 3px;
}

.brand-mark span {
  width: 6px;

border-radius: 5px 5px 1px 1px;

background: #d8ef67;
}

.brand-mark span:nth-child(1) {
  height: 11px;
}

.brand-mark span:nth-child(2) {
  height: 18px;
}

.brand-mark span:nth-child(3) {
  height: 25px;
}

.nav nav {
  display: flex;
  gap: 32px;

color: rgba(255,255,255,.58);

font-size: 12px;
}

.nav nav a {
  transition:
    color .2s;
}

.nav nav a:hover {
  color: white;
}

.nav-button {
  display: flex;
  gap: 14px;
  align-items: center;

padding: 11px 16px;

border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px;

font-size: 11px;

transition:
    background .2s,
    transform .2s;
}

.nav-button:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* ==============================
   HERO
============================== */

.hero {
  min-height: 900px;

padding:
    170px
    7vw
    100px;

display: grid;

grid-template-columns:
    minmax(400px, .9fr)
    minmax(420px, 1.1fr);

gap: 5vw;

align-items: center;

position: relative;

overflow: hidden;
}

.hero::before {
  content: "";

position: absolute;

width: 900px;
  height: 900px;

right: -250px;
  top: 50px;

border-radius: 50%;

background:
    radial-gradient(
      circle,
      rgba(91,137,255,.14),
      transparent 65%
    );

pointer-events: none;
}

.eyebrow,
.section-kicker {
  font-size: 9px;
  letter-spacing: 3px;

color: #a7b6c5;
}

.hero h1 {
  font-size: clamp(70px, 8vw, 128px);

line-height: .88;

letter-spacing: -7px;

max-width: 760px;

margin:
    24px 0
    35px;
}

.hero h1 em {
  display: block;

color: #d8ef67;

font-style: normal;
}

.hero-copy > p {
  max-width: 470px;

color: #8d96a3;

font-size: 17px;

line-height: 1.65;
}

.hero-actions {
  margin-top: 38px;

display: flex;
  align-items: center;

gap: 25px;
}

.primary-btn {
  display: inline-flex;

align-items: center;
  gap: 28px;

padding: 15px 18px 15px 20px;

background: #d8ef67;
  color: #11150b;

border-radius: 100px;

font-size: 11px;
  font-weight: 700;

box-shadow:
    0 12px 40px rgba(216,239,103,.15);

transition:
    transform .2s,
    box-shadow .2s;
}

.primary-btn span {
  font-size: 17px;
}

.primary-btn:hover {
  transform: translateY(-2px);

box-shadow:
    0 18px 50px rgba(216,239,103,.24);
}

.text-link {
  color: #9aa2ad;

font-size: 11px;

border-bottom:
    1px solid #46505b;

padding-bottom: 4px;
}

/* ==============================
   HERO VISUAL
============================== */

.hero-visual {
  height: 620px;

position: relative;

display: flex;
  align-items: center;
  justify-content: center;

perspective: 1000px;
}

.planet {
  width: 340px;
  height: 340px;

position: relative;

border-radius: 50%;

background:
    radial-gradient(
      circle at 35% 28%,
      #91b9ff,
      #4769b0 30%,
      #17233c 68%,
      #080d18 100%
    );

box-shadow:
    inset -40px -30px 80px rgba(0,0,0,.65),
    0 0 70px rgba(66,111,255,.15);

animation:
    planetFloat 6s ease-in-out infinite;
}

.planet-inner {
  position: absolute;
  inset: 15px;

border-radius: 50%;

background:
    radial-gradient(
      ellipse at 45% 35%,
      transparent 0 35%,
      rgba(255,255,255,.06) 36% 37%,
      transparent 38%
    );

opacity: .8;
}

.orbit {
  position: absolute;

inset: -65px;

border:
    1px solid
    rgba(133,165,255,.20);

border-radius: 50%;

transform:
    rotateX(68deg)
    rotateZ(15deg);

animation:
    rotateOrbit 13s linear infinite;
}

.orbit-b {
  inset: -110px;

transform:
    rotateX(72deg)
    rotateY(15deg);

animation-duration: 19s;
  animation-direction: reverse;
}

.orbit-c {
  inset: -150px;

transform:
    rotateX(66deg)
    rotateY(-22deg);

animation-duration: 25s;
}

.orbit span {
  width: 10px;
  height: 10px;

position: absolute;

top: 12%;
  left: 8%;

border-radius: 50%;

background: #d8ef67;

box-shadow:
    0 0 16px
    rgba(216,239,103,.8);
}

.orbit-b span {
  width: 7px;
  height: 7px;

top: 80%;
  left: 8%;

background: #8db2ff;
}

.orbit-c span {
  width: 6px;
  height: 6px;

top: 11%;
  left: 80%;

background: #ffb873;
}

.orb {
  position: absolute;

border-radius: 50%;

filter: blur(1px);
}

.orb-1 {
  width: 20px;
  height: 20px;

right: 22%;
  top: 17%;

background: #d8ef67;

box-shadow:
    0 0 24px rgba(216,239,103,.7);

animation:
    orbFloat 4s ease-in-out infinite;
}

.orb-2 {
  width: 10px;
  height: 10px;

left: 8%;
  bottom: 20%;

background: #7ca5ff;

box-shadow:
    0 0 20px rgba(124,165,255,.8);

animation:
    orbFloat 5s 1s ease-in-out infinite;
}

.floating-card {
  position: absolute;

padding: 15px 17px;

min-width: 135px;

background:
    rgba(19,23,31,.72);

border:
    1px solid
    rgba(255,255,255,.10);

border-radius: 14px;

backdrop-filter: blur(18px);

box-shadow:
    0 25px 50px rgba(0,0,0,.28);

animation:
    cardFloat 5s ease-in-out infinite;
}

.card-a {
  top: 17%;
  left: 5%;
}

.card-b {
  right: 3%;
  top: 27%;

animation-delay: 1s;
}

.card-c {
  left: 8%;
  bottom: 16%;

animation-delay: 1.7s;
}

.mini-label {
  font-size: 7px;

letter-spacing: 2px;

color: #677384;

margin-bottom: 8px;
}

.card-a strong {
  font-size: 27px;
  display: block;
}

.card-a > span {
  color: #77818f;
  font-size: 9px;
}

.status {
  font-size: 11px;

display: flex;
  gap: 7px;
  align-items: center;

color: #c5ced7;
}

.status i {
  width: 7px;
  height: 7px;

border-radius: 50%;

background: #8ee06d;

box-shadow:
    0 0 8px rgba(142,224,109,.7);
}

.bars {
  height: 42px;

display: flex;
  align-items: flex-end;

gap: 5px;
}

.bars span {
  display: block;

width: 6px;

background:
    linear-gradient(
      to top,
      #5778cf,
      #a2bcff
    );

border-radius:
    4px 4px 1px 1px;
}

/* ==============================
   LOGO STRIP
============================== */

.logo-strip {
  padding:
    25px 7vw
    40px;

border-top:
    1px solid rgba(255,255,255,.07);

border-bottom:
    1px solid rgba(255,255,255,.07);

display: flex;

align-items: center;

gap: 70px;
}

.strip-label {
  color: #535d69;

font-size: 8px;

letter-spacing: 2px;

white-space: nowrap;
}

.logos {
  display: flex;
  justify-content: space-between;

flex: 1;

color: #4f5865;

font-size: 13px;
  font-weight: 700;

letter-spacing: 2px;
}

/* ==============================
   SECTIONS
============================== */

.section {
  padding:
    140px 7vw;
}

.about {
  border-bottom:
    1px solid rgba(255,255,255,.07);
}

.section-kicker {
  color: #596372;
}

.about-grid {
  display: grid;

grid-template-columns:
    1.2fr .8fr;

gap: 12vw;

margin-top: 55px;
}

.about h2,
.platform-header h2,
.impact-top h2,
.cta h2 {

font-size:
    clamp(45px, 5.5vw, 86px);

line-height: .98;

letter-spacing: -4px;

margin: 0;
}

.about h2 span,
.platform-header h2 span,
.impact-top h2 span,
.cta h2 span {
  color: #67707d;
}

.about-copy {
  padding-top: 15px;
}

.about-copy .large {
  color: #e7e8e4;

font-size: 24px;

line-height: 1.35;

margin-top: 0;
}

.about-copy > p:not(.large) {
  max-width: 420px;

color: #737d89;

font-size: 14px;

line-height: 1.75;
}

.arrow-link {
  display: inline-flex;

gap: 18px;

margin-top: 25px;

color: #d8ef67;

font-size: 11px;

border-bottom:
    1px solid
    rgba(216,239,103,.3);

padding-bottom: 6px;
}

/* ==============================
   PLATFORM
============================== */

.platform {
  background: #0d1116;
}

.platform-header {
  margin-top: 55px;

display: flex;

justify-content: space-between;

align-items: flex-end;

gap: 40px;
}

.platform-header p {
  max-width: 380px;

color: #727c89;

line-height: 1.7;

font-size: 13px;
}

.feature-grid {
  margin-top: 80px;

display: grid;

grid-template-columns:
    1.35fr 1fr 1fr;

gap: 16px;
}

.feature {
  min-height: 460px;

padding: 26px;

position: relative;

overflow: hidden;

border-radius: 20px;

background:
    linear-gradient(
      145deg,
      #171d24,
      #11161c
    );

border:
    1px solid
    rgba(255,255,255,.07);
}

.feature-number {
  font-size: 9px;

color: #505b68;

letter-spacing: 2px;
}

.feature-icon {
  position: absolute;

top: 24px;
  right: 26px;

color: #d8ef67;

font-size: 21px;
}

.feature h3 {
  margin:
    100px 0
    13px;

font-size: 27px;

letter-spacing: -1px;
}

.feature p {
  max-width: 300px;

color: #747f8c;

line-height: 1.65;

font-size: 13px;
}

.feature-large {
  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(87,118,210,.14),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #18212c,
      #10161c
    );
}

.feature-visual {
  position: absolute;

left: 26px;
  right: 26px;
  bottom: 30px;

height: 130px;
}

/* SIGNAL */
.signal-line {
  position: absolute;

left: 4%;
  right: 4%;
  top: 58%;

height: 1px;

background:
    linear-gradient(
      90deg,
      transparent,
      #627fd0,
      #a9c0ff,
      transparent
    );

transform:
    rotate(-8deg);
}

.signal-dot {
  position: absolute;

width: 10px;
  height: 10px;

border-radius: 50%;

background: #d8ef67;

box-shadow:
    0 0 15px rgba(216,239,103,.6);
}

.d1 {
  left: 15%;
  top: 66%;
}

.d2 {
  left: 40%;
  top: 52%;
}

.d3 {
  left: 65%;
  top: 43%;
}

.d4 {
  left: 84%;
  top: 24%;
}

/* PATTERN */
.pattern-visual {
  display: grid;

grid-template-columns:
    repeat(3, 1fr);

grid-template-rows:
    repeat(2, 1fr);

gap: 8px;
}

.pattern-visual span {
  border-radius: 8px;

background:
    linear-gradient(
      135deg,
      #202b3c,
      #131a25
    );

border:
    1px solid
    rgba(255,255,255,.05);

position: relative;
}

.pattern-visual span::after {
  content: "";

position: absolute;

width: 6px;
  height: 6px;

border-radius: 50%;

left: 50%;
  top: 50%;

transform: translate(-50%, -50%);

background: #7f9be8;
}

/* CONFIDENCE */
.confidence-visual {
  display: flex;

align-items: center;
  justify-content: center;
}

.confidence-ring {
  width: 110px;
  height: 110px;

border-radius: 50%;

display: flex;

flex-direction: column;

justify-content: center;
  align-items: center;

background:
    radial-gradient(
      circle,
      #172231 48%,
      transparent 49%
    );

border:
    5px solid
    rgba(216,239,103,.16);

box-shadow:
    inset 0 0 30px rgba(120,150,255,.07);
}

.confidence-ring strong {
  font-size: 28px;
}

.confidence-ring span {
  font-size: 7px;
  letter-spacing: 2px;

color: #66717f;
}

/* ==============================
   IMPACT
============================== */

.impact {
  background:
    linear-gradient(
      180deg,
      #0d1116,
      #0a0c0f
    );
}

.impact-top {
  margin-top: 55px;

display: flex;

justify-content: space-between;
  align-items: flex-end;

gap: 40px;
}

.impact-top p {
  max-width: 320px;

color: #707985;

font-size: 13px;

line-height: 1.7;
}

.stats {
  margin-top: 90px;

display: grid;

grid-template-columns:
    repeat(4, 1fr);

border-top:
    1px solid rgba(255,255,255,.08);
}

.stat {
  padding:
    32px 18px 15px;

border-right:
    1px solid rgba(255,255,255,.08);
}

.stat:last-child {
  border-right: 0;
}

.stat strong {
  font-size:
    clamp(45px, 5vw, 72px);

line-height: 1;

letter-spacing: -4px;
}

.stat > span {
  color: #d8ef67;

font-size: 17px;
}

.stat p {
  margin-top: 15px;

color: #626c78;

font-size: 10px;

max-width: 150px;

line-height: 1.5;
}

/* ==============================
   QUOTE
============================== */

.quote {
  padding-top: 180px;
  padding-bottom: 180px;

text-align: center;

border-top:
    1px solid rgba(255,255,255,.06);

border-bottom:
    1px solid rgba(255,255,255,.06);
}

.quote-mark {
  color: #d8ef67;

font-family: Georgia, serif;

font-size: 70px;

line-height: .5;
}

blockquote {
  max-width: 900px;

margin:
    40px auto;

font-family:
    Georgia,
    serif;

font-size:
    clamp(32px, 4vw, 61px);

line-height: 1.12;

letter-spacing: -2px;
}

.quote-person {
  display: inline-flex;

align-items: center;

gap: 12px;

text-align: left;
}

.avatar {
  width: 34px;
  height: 34px;

display: grid;
  place-items: center;

border-radius: 50%;

background: #252c36;

color: #cad1da;

font-size: 9px;
}

.quote-person strong,
.quote-person span {
  display: block;
}

.quote-person strong {
  font-size: 10px;
}

.quote-person span {
  margin-top: 3px;

color: #626c79;

font-size: 9px;
}

/* ==============================
   CTA
============================== */

.cta {
  text-align: center;

position: relative;

overflow: hidden;

background:
    radial-gradient(
      circle at 50% 50%,
      #17202b 0%,
      #0a0c0f 62%
    );
}

.cta-glow {
  width: 700px;
  height: 300px;

position: absolute;

left: 50%;
  top: 50%;

transform:
    translate(-50%, -50%);

background:
    radial-gradient(
      ellipse,
      rgba(104,136,255,.10),
      transparent 70%
    );

pointer-events: none;
}

.cta h2 {
  margin:
    35px auto
    25px;

max-width: 850px;

position: relative;
}

.cta > p {
  color: #707985;

font-size: 14px;

margin-bottom: 35px;

position: relative;
}

.cta .primary-btn {
  position: relative;
}

.primary-btn.light {
  background: #f4f4ef;

color: #111;
}

/* ==============================
   FOOTER
============================== */

footer {
  min-height: 100px;

padding:
    30px 7vw;

display: flex;

align-items: center;
  justify-content: space-between;

color: #4e5865;

font-size: 9px;

border-top:
    1px solid rgba(255,255,255,.07);
}

.footer-right {
  display: flex;

gap: 25px;
}

/* ==============================
   ANIMATIONS
============================== */

@keyframes planetFloat {

0%,
  100% {
    transform:
      translateY(0)
      rotateZ(0deg);
  }

50% {
    transform:
      translateY(-12px)
      rotateZ(2deg);
  }
}

@keyframes cardFloat {

0%,
  100% {
    transform:
      translateY(0);
  }

50% {
    transform:
      translateY(-10px);
  }
}

@keyframes orbFloat {

0%,
  100% {
    transform:
      translateY(0);
  }

50% {
    transform:
      translateY(-15px);
  }
}

@keyframes rotateOrbit {

from {
    transform:
      rotateX(68deg)
      rotateZ(0deg);
  }

to {
    transform:
      rotateX(68deg)
      rotateZ(360deg);
  }
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 900px) {

.nav nav {
    display: none;
  }

.hero {
    grid-template-columns: 1fr;

min-height: auto;

padding-top: 140px;
  }

.hero-visual {
    height: 480px;
  }

.about-grid,
  .feature-grid {
    grid-template-columns: 1fr;
  }

.platform-header,
  .impact-top {
    display: block;
  }

.platform-header p,
  .impact-top p {
    margin-top: 25px;
  }

.feature {
    min-height: 400px;
  }

.stats {
    grid-template-columns:
      repeat(2, 1fr);
  }

.stat:nth-child(2) {
    border-right: 0;
  }

.stat:nth-child(-n+2) {
    border-bottom:
      1px solid rgba(255,255,255,.08);
  }

.logo-strip {
    display: block;
  }

.logos {
    margin-top: 30px;

flex-wrap: wrap;

gap: 20px;
  }
}

@media (max-width: 600px) {

.nav {
    padding: 0 20px;
  }

.nav-button {
    display: none;
  }

.hero {
    padding:
      125px 24px
      60px;
  }

.hero h1 {
    font-size: 64px;

letter-spacing: -4px;
  }

.hero-copy > p {
    font-size: 15px;
  }

.hero-visual {
    height: 390px;
  }

.planet {
    width: 230px;
    height: 230px;
  }

.floating-card {
    transform: scale(.82);
  }

.card-a {
    left: -5%;
  }

.card-b {
    right: -8%;
  }

.section {
    padding:
      90px 24px;
  }

.about h2,
  .platform-header h2,
  .impact-top h2,
  .cta h2 {
    font-size: 48px;
    letter-spacing: -3px;
  }

.stats {
    grid-template-columns: 1fr;
  }

.stat,
  .stat:nth-child(2) {
    border-right: 0;

border-bottom:
      1px solid rgba(255,255,255,.08);
  }

.stat:last-child {
    border-bottom: 0;
  }

blockquote {
    font-size: 34px;
  }

footer {
    display: block;
  }

.footer-right {
    margin-top: 25px;
  }
}

/* =========================================
   COUNTERS
========================================= */

var counters =
  document.querySelectorAll(".counter");

var observer =
  new IntersectionObserver(
    function(entries) {

entries.forEach(
        function(entry) {

if (
            !entry.isIntersecting
          ) {
            return;
          }

animateCounter(
            entry.target
          );

observer.unobserve(
            entry.target
          );
        }
      );

},
    {
      threshold: .5
    }
  );

counters.forEach(
  function(counter) {
    observer.observe(counter);
  }
);

/* =========================================
   COUNTER ANIMATION
========================================= */

function animateCounter(
  element
) {

var target =
    parseFloat(
      element.dataset.target
    );

var duration = 1400;

var start =
    performance.now();

function update(now) {

var progress =
      Math.min(
        (now - start) /
        duration,
        1
      );

/*
     * Ease-out
     */

var eased =
      1 -
      Math.pow(
        1 - progress,
        3
      );

var value =
      target * eased;

/*
     * Keep decimal for 3.8
     */

if (
      target % 1 !== 0
    ) {

element.textContent =
        value.toFixed(1);

} else {

element.textContent =
        Math.round(value);
    }

if (
      progress < 1
    ) {

requestAnimationFrame(
        update
      );
    }
  }

requestAnimationFrame(
    update
  );
}

/* =========================================
   NAVIGATION
========================================= */

document
  .querySelectorAll(
    'a[href^="#"]'
  )
  .forEach(
    function(link) {

link.addEventListener(
        "click",
        function(event) {

var target =
            document.querySelector(
              link.getAttribute(
                "href"
              )
            );

if (!target) {
            return;
          }

event.preventDefault();

target.scrollIntoView({
            behavior: "smooth"
          });
        }
      );

}
  );

/* =========================================
   PARALLAX HERO
========================================= */

var heroVisual =
  document.querySelector(
    ".hero-visual"
  );

window.addEventListener(
  "mousemove",
  function(event) {

if (
      window.innerWidth < 800
    ) {
      return;
    }

var x =
      (
        event.clientX /
        window.innerWidth -
        .5
      );

var y =
      (
        event.clientY /
        window.innerHeight -
        .5
      );

heroVisual.style.transform =
      "translate(" +
      x * 12 +
      "px," +
      y * 8 +
      "px)";
  }
);

/* =========================================
   HEADER SCROLL EFFECT
========================================= */

var header =
  document.querySelector(
    ".nav"
  );

window.addEventListener(
  "scroll",
  function() {

if (
      window.scrollY > 30
    ) {

header.style.background =
        "rgba(10,12,15,.72)";

header.style.backdropFilter =
        "blur(18px)";

} else {

header.style.background =
        "transparent";

header.style.backdropFilter =
        "none";
    }
  }
);

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