/* ===========================================================
   METAMORPH — AGENCY HERO
   Premium animated / cinematic / responsive system
   =========================================================== */

:root {
  --bg-0: #0f0f0e;
  --bg-1: #131313;
  --bg-2: #18181a;

  --ink-0: #f4f3ef;
  --ink-1: #a2a19c;
  --ink-2: #6c6c68;

  --line: rgba(244, 243, 239, 0.1);

  --ease: cubic-bezier(0.16, 0.8, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: clamp(20px, 4vw, 64px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  /* Lenis handles smooth scroll */
}

/* ===========================================================
   SELECTION COLOR — LIGHT GRAY
   =========================================================== */

::selection {
  background: rgba(200, 200, 200, 0.28);
  color: inherit;
}

::-moz-selection {
  background: rgba(200, 200, 200, 0.28);
  color: inherit;
}

body.light-mode ::selection {
  background: rgba(100, 100, 100, 0.18);
  color: inherit;
}

body.light-mode ::-moz-selection {
  background: rgba(100, 100, 100, 0.18);
  color: inherit;
}

body {
  background: var(--bg-0);
  color: var(--ink-0);

  font-family:
    'Manrope',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  overflow-x: hidden;

  cursor: none;

  -webkit-font-smoothing: antialiased;

  transition:
    background-color 0.75s var(--ease-smooth),
    color 0.75s var(--ease-smooth);
}

@media (hover: none) and (pointer: coarse) {

  body {
    cursor: auto;
  }

}

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

em {
  font-style: normal;
  color: var(--ink-1);
}

.mono {
  font-family:
    'Space Mono',
    monospace;
}

h1,
.hero__headline {
  font-family:
    'Unbounded',
    sans-serif;
}


/* ===========================================================
   NAVBAR — BROWSER CURSOR
   =========================================================== */

.nav {
  cursor: default;
}

.nav a,
.nav button,
.nav__brand,
.nav__cta,
.menu a,
.theme-switch,
.mobile-menu-toggle {
  cursor: pointer;
}


/* ===========================================================
   PREMIUM CURSOR — AWARD WINNING FAST
   =========================================================== */

.cursor {
  position: fixed;

  top: 0;
  left: 0;

  width: 0;
  height: 0;

  z-index: 9999;

  pointer-events: none;

  opacity: 1;

  will-change: transform;

  transition:
    opacity 0.2s ease;
}

.cursor__dot {
  position: absolute;

  left: 0;
  top: 0;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #f4f3ef;

  border: 1px solid #f4f3ef;

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

  box-shadow:
    0 0 8px rgba(244, 243, 239, 0.3),
    0 0 18px rgba(244, 243, 239, 0.06);

  transition:
    width 0.28s var(--ease-out),
    height 0.28s var(--ease-out),
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.28s ease;
}

.cursor__ring {
  position: absolute;

  left: 0;
  top: 0;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  border: 1px solid rgba(210, 210, 210, 0.55);

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

  opacity: 0.65;

  box-shadow:
    0 0 14px rgba(170, 170, 170, 0.14),
    inset 0 0 12px rgba(255, 255, 255, 0.025);

  transition:
    width 0.28s var(--ease-out),
    height 0.28s var(--ease-out),
    opacity 0.2s ease,
    border-color 0.22s ease,
    box-shadow 0.28s ease;
}


/* ===========================================================
   LARGE CIRCLE HOVER
   =========================================================== */

.cursor.is-hover .cursor__dot {
  width: 70px;
  height: 70px;

  background: transparent;

  border: 1px solid rgba(220, 220, 220, 0.22);

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

  box-shadow:
    0 0 12px rgba(220, 220, 220, 0.035),
    0 0 24px rgba(220, 220, 220, 0.018),
    inset 0 0 12px rgba(220, 220, 220, 0.015);

  opacity: 1;

  animation: none;

  transition:
    width 0.28s var(--ease-out),
    height 0.28s var(--ease-out),
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.28s ease,
    opacity 0.2s ease;
}

.cursor.is-hover .cursor__ring {
  width: 34px;
  height: 34px;

  opacity: 0.95;

  border-color: rgba(210, 210, 210, 0.8);

  background: transparent;

  box-shadow:
    0 0 18px rgba(180, 180, 180, 0.16),
    inset 0 0 10px rgba(255, 255, 255, 0.04);
}

.cursor.is-hover-lg .cursor__dot {
  width: 78px;
  height: 78px;

  background-size: 320% 320%;
}

.cursor.is-hover-lg .cursor__ring {
  width: 38px;
  height: 38px;
}


@keyframes cursorRGB {

  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 50% 0%;
  }

  50% {
    background-position: 100% 50%;
  }

  75% {
    background-position: 50% 100%;
  }

  100% {
    background-position: 0% 50%;
  }

}


.cursor.is-hidden {
  opacity: 0;
}

@media (hover: none),
(pointer: coarse) {

  .cursor {
    display: none;
  }

  body {
    cursor: auto;
  }

}


/* ===========================================================
   GRAIN
   =========================================================== */

.grain {
  position: fixed;

  inset: -100px;

  z-index: 5;

  pointer-events: none;

  opacity: 0.03;

  mix-blend-mode: overlay;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  animation: grainShift 1s steps(4) infinite;

  transition: opacity 0.8s ease;
}

@keyframes grainShift {

  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-2%, -1%);
  }

  50% {
    transform: translate(1%, -2%);
  }

  75% {
    transform: translate(-1%, 2%);
  }

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

}


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

.hero {
  position: relative;

  min-height: 100vh;

  min-height: 100svh;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  padding: 0 var(--gutter) clamp(20px, 3vw, 36px);

  transition: background-color 0.8s var(--ease-smooth);
}


/* ===========================================================
   BACKGROUND SCENE
   =========================================================== */

.bg {
  position: absolute;

  inset: 0;

  z-index: 0;

  background:
    radial-gradient(circle at 72% 12%,
      rgba(255, 255, 255, 0.025),
      transparent 34%);

  transition: background 0.8s ease;
}

.bg svg {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  transition:
    opacity 0.8s ease,
    filter 0.8s ease;
}


/* ===========================================================
   PARALLAX MOTION
   =========================================================== */

.bg .layer {
  --parallax-x: 0px;

  --parallax-y: 0px;

  --parallax-r: 0deg;

  will-change: transform;

  transform:
    translate3d(var(--parallax-x),
      var(--parallax-y),
      0) rotate(var(--parallax-r));
}

.bg__layer {
  position: absolute;

  --parallax-x: 0px;

  --parallax-y: 0px;

  --parallax-r: 0deg;

  border-radius: 50%;

  filter: blur(120px);

  will-change: transform;

  z-index: 1;

  transform:
    translate3d(var(--parallax-x),
      var(--parallax-y),
      0) rotate(var(--parallax-r));

  transition: opacity 0.8s ease;
}

.bg__layer--1 {
  width: 62vw;

  height: 62vw;

  max-width: 820px;

  max-height: 820px;

  top: -22%;

  right: -14%;

  background:
    radial-gradient(circle at 30% 30%,
      rgba(220, 215, 200, 0.07),
      rgba(220, 215, 200, 0) 70%);
}

.bg__layer--2 {
  width: 50vw;

  height: 50vw;

  max-width: 640px;

  max-height: 640px;

  bottom: -26%;

  left: -12%;

  background:
    radial-gradient(circle at 60% 40%,
      rgba(180, 175, 165, 0.06),
      rgba(180, 175, 165, 0) 70%);
}

.bg__layer--3 {
  width: 36vw;

  height: 36vw;

  max-width: 460px;

  max-height: 460px;

  top: 32%;

  left: 42%;

  background:
    radial-gradient(circle,
      rgba(244, 243, 239, 0.045),
      rgba(244, 243, 239, 0) 70%);
}

.bg__grid {
  position: absolute;

  inset: 0;

  z-index: 2;

  background-image:
    linear-gradient(rgba(244, 243, 239, 0.03) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(244, 243, 239, 0.03) 1px,
      transparent 1px);

  background-size: 64px 64px;

  mask-image:
    radial-gradient(circle at 50% 30%,
      black 0%,
      transparent 72%);

  transition:
    opacity 0.8s ease,
    background-image 0.8s ease;
}


/* ===========================================================
   NAVBAR
   =========================================================== */

.nav {
  position: fixed !important;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 100;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 74px;

  padding: 0 var(--gutter);

  background: rgba(15, 15, 14, 0.46);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border-bottom: 0 solid transparent;

  isolation: isolate;

  /* Navbar show/hide transition */
  transition:
    transform 0.72s cubic-bezier(.16, 1, .3, 1),
    opacity 0.48s ease,
    height 0.55s var(--ease),
    padding 0.55s var(--ease),
    background 0.65s var(--ease),
    backdrop-filter 0.55s var(--ease),
    box-shadow 0.55s ease;
}


/* ===========================================================
   NAV MAIN ANIMATED LINE
   =========================================================== */

.nav::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 3px;

  background:
    linear-gradient(90deg,
      rgba(15, 15, 15, 0) 0%,
      rgba(60, 60, 60, 0.25) 8%,
      rgba(110, 110, 110, 0.55) 22%,
      rgba(190, 190, 190, 0.8) 36%,
      #ffffff 50%,
      rgba(190, 190, 190, 0.8) 64%,
      rgba(110, 110, 110, 0.55) 78%,
      rgba(60, 60, 60, 0.25) 92%,
      rgba(15, 15, 15, 0) 100%);

  background-size: 200% 100%;

  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(255, 255, 255, 0.10),
    0 0 35px rgba(255, 255, 255, 0.04);

  animation: navLineMove 5s linear infinite;

  pointer-events: none;
}

@keyframes navLineMove {

  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }

}


/* ===========================================================
   EXTRA CENTER LINE
   =========================================================== */

.nav::before {
  content: "";

  position: absolute;

  left: 50%;

  bottom: -1px;

  width: 24%;

  height: 5px;

  transform: translateX(-50%);

  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.65),
      #ffffff,
      rgba(255, 255, 255, 0.65),
      transparent);

  filter: blur(1px);

  opacity: 0.85;

  pointer-events: none;

  animation: centerLinePulse 3.5s ease-in-out infinite;
}

@keyframes centerLinePulse {

  0%,
  100% {
    opacity: 0.45;

    width: 18%;
  }

  50% {
    opacity: 0.95;

    width: 30%;
  }

}


/* ===========================================================
   NAVBAR SCROLL DIRECTION — HIDE ON DOWN, SHOW ON UP
   Same as riangle.com behaviour
   =========================================================== */

.nav.nav-scroll-hidden {
  transform: translate3d(0, -118%, 0);

  opacity: 0;

  pointer-events: none;
}

.nav.nav-scroll-visible {
  transform: translate3d(0, 0, 0);

  opacity: 1;

  pointer-events: auto;
}

.nav.nav-scroll-hidden::before,
.nav.nav-scroll-hidden::after {
  opacity: 0;
}

.nav.nav-scroll-visible::before,
.nav.nav-scroll-visible::after {
  opacity: 1;
}


/* ===========================================================
   THEME SWITCH
   =========================================================== */

.nav__actions {
  display: flex;

  align-items: center;

  gap: 10px;
}

.theme-switch {
  position: relative;

  width: 68px;

  height: 34px;

  padding: 0;

  border: 1px solid rgba(244, 243, 239, 0.18);

  border-radius: 999px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(244, 243, 239, 0.035);

  color: #ffffff;

  cursor: pointer;

  overflow: hidden;

  -webkit-appearance: none;

  appearance: none;

  isolation: isolate;

  transition:
    transform 0.55s var(--ease-out),
    background 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.65s var(--ease-out);
}

.theme-switch:hover {
  border-color: rgba(244, 243, 239, 0.45);

  background: rgba(244, 243, 239, 0.075);

  transform: translateY(-2px) scale(1.045);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.13),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.theme-switch:active {
  transform: translateY(0) scale(0.96);
}

.theme-switch__thumb {
  position: absolute;

  top: 3px;

  left: 3px;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: rgba(244, 243, 239, 0.14);

  border: 1px solid rgba(244, 243, 239, 0.28);

  box-shadow:
    0 0 14px rgba(244, 243, 239, 0.08),
    inset 0 0 8px rgba(255, 255, 255, 0.04);

  pointer-events: none;

  transform: translateX(0);

  transition:
    transform 0.65s var(--ease-out),
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.theme-switch__icon {
  position: relative;

  z-index: 2;

  width: 16px;

  height: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  flex-shrink: 0;

  transition:
    opacity 0.35s ease,
    transform 0.55s var(--ease-out);
}

.theme-switch__icon svg {
  width: 100%;

  height: 100%;

  display: block;
}

.theme-switch__icon--moon {
  margin-left: 8px;

  opacity: 1;

  transform: scale(1) rotate(0deg);
}

.theme-switch__icon--sun {
  margin-right: 8px;

  opacity: 0.55;

  transform: scale(0.82) rotate(-12deg);
}


/* ===========================================================
   LIGHT THEME SWITCH STATE
   =========================================================== */

body.light-mode .theme-switch {
  background: rgba(17, 17, 17, 0.045);

  border-color: rgba(17, 17, 17, 0.18);

  color: #111111;
}

body.light-mode .theme-switch:hover {
  border: 1px solid #d40000;

  background: rgba(17, 17, 17, 0.075);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 0 12px rgba(212, 0, 0, 0.18),
    0 0 26px rgba(212, 0, 0, 0.08);
}

body.light-mode .theme-switch__thumb {
  transform: translateX(34px);

  background: #151515;

  border-color: rgba(255, 255, 255, 0.2);

  box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
}

body.light-mode .theme-switch__icon {
  color: #111111;
}

body.light-mode .theme-switch__icon--moon {
  opacity: 0.38;

  transform: scale(0.82) rotate(-12deg);
}

body.light-mode .theme-switch__icon--sun {
  color: #000000 !important;

  opacity: 1 !important;

  transform: scale(1) rotate(0deg) !important;

  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.08));
}

body.light-mode .theme-switch__icon--sun svg {
  color: #ffffff !important;
}

body.light-mode .theme-switch__icon--sun svg path,
body.light-mode .theme-switch__icon--sun svg circle {
  stroke: #ffffff !important;
}


/* ===========================================================
   NAV BRAND
   =========================================================== */

.nav__brand {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  position: relative;

  font-family: 'Unbounded', sans-serif;

  font-weight: 800;

  font-size: 17px;

  letter-spacing: 0.01em;

  color: #fff;

  transition:
    transform 0.5s var(--ease),
    font-size 0.5s var(--ease),
    gap 0.5s var(--ease),
    filter 0.45s ease;
}

.nav__brand:hover {
  transform: translateY(-2px) scale(1.015);

  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.08));
}

.nav__brand img {
  width: 25px;

  height: 25px;

  object-fit: contain;

  display: block;

  transition:
    width 0.5s var(--ease),
    height 0.5s var(--ease),
    transform 0.6s var(--ease),
    filter 0.5s var(--ease);
}

.nav__brand:hover img {
  transform: rotate(8deg) scale(1.08);
}

.nav__brand span {
  display: inline-block;

  background:
    linear-gradient(90deg,
      #111111 0%,
      #5c5c5c 20%,
      #bdbdbd 38%,
      #ffffff 50%,
      #bdbdbd 62%,
      #5c5c5c 80%,
      #111111 100%);

  background-size: 200% auto;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: metamorphRGB 4.5s linear infinite;

  transition: filter 0.4s ease;
}

@keyframes metamorphRGB {

  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }

}

.nav__brand:hover span {
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.38));
}


/* ===========================================================
   NAV MENU
   =========================================================== */

.menu {
  display: flex;

  align-items: center;

  gap: clamp(20px, 2.5vw, 40px);

  transition: gap 0.5s var(--ease);
}

.menu a {
  position: relative;

  display: inline-block;

  padding-bottom: 7px;

  font-size: 13px;

  letter-spacing: 0.02em;

  color: var(--ink-1);

  transition:
    color 0.35s var(--ease),
    transform 0.35s var(--ease),
    letter-spacing 0.35s var(--ease);
}

.menu a::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 0;

  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(90deg,
      #111111 0%,
      #5b5b5b 22%,
      #cccccc 42%,
      #ffffff 50%,
      #cccccc 58%,
      #5b5b5b 78%,
      #111111 100%);

  background-size: 200% 100%;

  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);

  transition: width 0.45s var(--ease);
}

.menu a:hover {
  color: #ffffff;

  transform: translateY(-2px);

  letter-spacing: 0.045em;
}

.menu a:hover::after {
  width: 100%;

  animation: menuRGB 1.8s linear infinite;
}

@keyframes menuRGB {

  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }

}


/* ===========================================================
   NAV START A PROJECT
   =========================================================== */

.nav__cta {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 136px;

  height: 40px;

  padding: 0 17px;

  border: 1px solid rgba(244, 243, 239, 0.22);

  border-radius: 100px;

  color: var(--ink-0);

  background: rgba(244, 243, 239, 0.045);

  overflow: hidden;

  isolation: isolate;

  transform: translateZ(0);

  transition:
    transform 0.65s var(--ease-out),
    background 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.7s var(--ease-out);
}

.nav__cta::before {
  content: "";

  position: absolute;

  top: -60%;

  left: -120%;

  width: 95%;

  height: 220%;

  background:
    linear-gradient(115deg,
      #000000 0%,
      #222222 14%,
      #555555 26%,
      #909090 38%,
      #cfcfcf 46%,
      #ffffff 50%,
      #d9d9d9 56%,
      #a0a0a0 66%,
      #5a5a5a 76%,
      #242424 88%,
      #000000 100%);

  background-size: 300% 300%;

  transform: skewX(-20deg);

  opacity: 0;

  transition:
    left 0.95s cubic-bezier(.16, 1, .3, 1),
    opacity 0.45s ease;

  z-index: -2;

  pointer-events: none;
}

.nav__cta::after {
  content: "";

  position: absolute;

  inset: 1px;

  border-radius: inherit;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.015) 48%,
      rgba(0, 0, 0, 0.07));

  opacity: 0;

  transform: scale(0.92);

  transition:
    opacity 0.45s ease,
    transform 0.65s cubic-bezier(.16, 1, .3, 1);

  z-index: -1;

  pointer-events: none;
}

.nav__cta>span {
  position: relative;

  z-index: 5;

  display: inline-block;

  transform: translateY(0);

  transition:
    transform 0.5s var(--ease-out),
    color 0.4s ease,
    letter-spacing 0.45s ease;
}

.nav__cta:hover {
  transform: translateY(-3px) scale(1.035);

  background: transparent;

  border-color: rgba(255, 255, 255, 0.68);

  color: #ffffff;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.20),
    0 0 18px rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.nav__cta:hover::before {
  left: 145%;

  opacity: 1;

  animation: navButtonRGB 2.8s linear infinite;
}

.nav__cta:hover::after {
  opacity: 1;

  transform: scale(1);
}

.nav__cta:hover>span {
  transform: translateY(-1px);

  color: #ffffff;

  letter-spacing: 0.018em;
}

@keyframes navButtonRGB {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}

.nav__cta:active {
  transform: translateY(-1px) scale(0.965);

  transition-duration: 0.16s;
}


/* ===========================================================
   MOBILE THREE-DOT TOGGLE
   =========================================================== */

.mobile-menu-toggle {
  display: none;

  position: relative;

  width: 38px;

  height: 38px;

  padding: 0;

  border: 1px solid rgba(244, 243, 239, 0.16);

  border-radius: 50%;

  background: rgba(244, 243, 239, 0.035);

  color: var(--ink-0);

  align-items: center;

  justify-content: center;

  gap: 3px;

  overflow: hidden;

  -webkit-appearance: none;

  appearance: none;

  isolation: isolate;

  transition:
    transform 0.55s var(--ease-out),
    border-color 0.45s ease,
    background 0.45s ease,
    box-shadow 0.6s var(--ease-out);
}

.mobile-menu-toggle::before {
  content: "";

  position: absolute;

  inset: -80%;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .10),
      transparent 62%);

  opacity: 0;

  transform: scale(.5);

  transition:
    opacity .45s ease,
    transform .65s var(--ease-out);

  z-index: -1;
}

.mobile-menu-toggle__dot {
  width: 3px;

  height: 3px;

  border-radius: 50%;

  background: currentColor;

  opacity: .9;

  transition:
    transform .55s var(--ease-out),
    opacity .35s ease;
}

.mobile-menu-toggle.is-open {
  transform: rotate(90deg) scale(1.04);

  border-color: rgba(244, 243, 239, .42);

  background: rgba(244, 243, 239, .075);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, .18),
    0 0 20px rgba(255, 255, 255, .045);
}

.mobile-menu-toggle.is-open::before {
  opacity: 1;

  transform: scale(1);
}

.mobile-menu-toggle.is-open .mobile-menu-toggle__dot:nth-child(1) {
  transform: translateX(4px);
}

.mobile-menu-toggle.is-open .mobile-menu-toggle__dot:nth-child(2) {
  opacity: .55;
}

.mobile-menu-toggle.is-open .mobile-menu-toggle__dot:nth-child(3) {
  transform: translateX(-4px);
}


/* ===========================================================
   MOBILE MENU PANEL
   =========================================================== */

.mobile-menu-panel {
  display: none;
}


/* ===========================================================
   SCROLLED NAV
   =========================================================== */

.nav.is-scrolled {
  position: fixed !important;

  top: 0;

  left: 0;

  height: 64px;

  background: rgba(10, 10, 10, 0.78);

  backdrop-filter: blur(22px);

  -webkit-backdrop-filter: blur(22px);

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.nav.is-scrolled .nav__brand {
  font-size: 14px;

  gap: 7px;
}

.nav.is-scrolled .nav__brand img {
  width: 20px;

  height: 20px;
}

.nav.is-scrolled .menu {
  gap: clamp(16px, 2vw, 30px);
}

.nav.is-scrolled .menu a {
  font-size: 12px;

  padding-bottom: 5px;
}

.nav.is-scrolled .nav__cta {
  min-width: 108px;

  height: 34px;

  padding: 0 14px;

  font-size: 11px;
}

.nav.is-scrolled::after {
  height: 3px;
}

.nav.is-scrolled::before {
  height: 4px;

  width: 30%;
}

.nav.is-scrolled .theme-switch {
  width: 62px;

  height: 32px;
}

.nav.is-scrolled .theme-switch__thumb {
  width: 24px;

  height: 24px;
}

.nav.is-scrolled .theme-switch__icon {
  width: 15px;

  height: 15px;
}

body.light-mode .nav.is-scrolled {
  background: rgba(242, 241, 237, 0.88);

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
}


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

.hero__content {
  position: relative;

  z-index: 3;

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  max-width: 980px;

  padding-top: 40px;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.hero__tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  font-size: 12.5px;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: var(--ink-1);

  border: 1px solid var(--line);

  padding: 7px 14px;

  border-radius: 100px;

  margin-top: 48px;

  margin-bottom: 28px;

  transition:
    border-color 0.45s ease,
    color 0.45s ease,
    background 0.45s ease,
    transform 0.45s var(--ease);

}

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

  border-color: rgba(244, 243, 239, 0.25);

  background: rgba(244, 243, 239, 0.025);
}

.dot {
  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #9a9a94;

  box-shadow: 0 0 8px 2px rgba(150, 150, 145, 0.5);

  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

  0%,
  100% {
    transform: scale(1);

    opacity: 0.7;
  }

  50% {
    transform: scale(1.35);

    opacity: 1;
  }

}


/* ===========================================================
   HEADLINE
   =========================================================== */

.hero__headline {
  margin: 0;

  font-family: 'Unbounded', sans-serif;

  font-weight: 800;

  font-size: clamp(34px, 6.4vw, 84px);

  line-height: 1.06;

  letter-spacing: -0.045em;
}

.line-wrap {
  display: block;

  overflow: hidden;
}

.line {
  display: inline-block;
}


/* ===========================================================
   RGB WORDS — FULL SPECTRUM METAMORPH RGB
   NO HOVER EFFECTS — static animated words
   =========================================================== */

.rgb-word {
  position: relative;

  display: inline-block;

  font-style: normal;

  font-weight: inherit;

  color: transparent;

  background-image:
    linear-gradient(108deg,

      #3c5f67 0%,
      #4a8f9a 8%,
      #63c1c6 16%,
      #65a8d8 25%,
      #6e78c8 34%,
      #8270ba 42%,
      #a06fa9 50%,
      #c1779d 58%,
      #c98a79 66%,
      #d0a35f 74%,
      #b5bd75 82%,
      #69a99e 91%,
      #3c5f67 100%);

  background-size: 620% 100%;

  background-position: 0% 50%;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  will-change: transform, background-position, clip-path, opacity;

  /* Cursor: default so no special cursor on rgb words */
  cursor: default;

  opacity: 0;

  transform: translate3d(0, 105%, 0) skewY(5deg);

  clip-path: inset(100% 0 0 0);

  animation:
    metamorphRGBWordReveal 1.15s cubic-bezier(.16, 1, .3, 1) forwards,
    metamorphRGBWordFlow 7.2s cubic-bezier(.45, 0, .55, 1) 1.15s infinite;
}


/* ===========================================================
   INDIVIDUAL RGB WORD TIMING
   =========================================================== */

.rgb-design {
  animation-delay: 0.78s, 1.93s;
}

.rgb-build {
  animation-delay: 1.04s, 2.19s;
}

.rgb-trust {
  animation-delay: 1.30s, 2.45s;
}


/* ===========================================================
   RGB WORD DEPTH AURA
   =========================================================== */

.rgb-word::before {
  content: "";

  position: absolute;

  inset: 10% -5% 5%;

  background:
    linear-gradient(108deg,
      #4a8f9a 0%,
      #63c1c6 18%,
      #6e78c8 34%,
      #a06fa9 50%,
      #c1779d 64%,
      #d0a35f 80%,
      #69a99e 100%);

  background-size: 420% 100%;

  filter: blur(20px);

  opacity: 0.105;

  transform: scale(0.92);

  z-index: -1;

  pointer-events: none;

  animation: metamorphRGBWordAura 7.2s ease-in-out 1.15s infinite;
}


/* ===========================================================
   RGB WORD CINEMATIC TRACE
   =========================================================== */

.rgb-word::after {
  content: "";

  position: absolute;

  left: -10%;

  bottom: 3%;

  width: 120%;

  height: 1px;

  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(99, 193, 198, 0) 13%,
      rgba(99, 193, 198, .58) 26%,
      rgba(110, 120, 200, .72) 39%,
      rgba(161, 111, 169, .78) 50%,
      rgba(193, 119, 157, .68) 60%,
      rgba(208, 163, 95, .62) 73%,
      rgba(105, 169, 158, .20) 85%,
      transparent 100%);

  opacity: 0;

  transform: translateX(-48%) scaleX(0.35);

  filter: blur(0.4px);

  pointer-events: none;

  animation: metamorphRGBWordTrace 5.8s ease-in-out 1.8s infinite;
}


/* ===========================================================
   PREMIUM RGB WORD REVEAL
   =========================================================== */

@keyframes metamorphRGBWordReveal {

  0% {
    opacity: 0;

    transform: translate3d(0, 115%, 0) skewY(6deg);

    clip-path: inset(100% 0 0 0);
  }

  40% {
    opacity: 0.85;
  }

  55% {
    opacity: 1;
  }

  70% {
    transform: translate3d(0, -5%, 0) skewY(-1.5deg);

    clip-path: inset(0 0 0 0);
  }

  84% {
    transform: translate3d(0, 1.5%, 0) skewY(0.4deg);
  }

  100% {
    opacity: 1;

    transform: translate3d(0, 0, 0) skewY(0deg);

    clip-path: inset(0 0 0 0);
  }

}


/* ===========================================================
   FULL RGB FLOW
   =========================================================== */

@keyframes metamorphRGBWordFlow {

  0% {
    background-position: 0% 50%;
  }

  12% {
    background-position: 14% 48%;
  }

  24% {
    background-position: 30% 52%;
  }

  36% {
    background-position: 50% 49%;
  }

  48% {
    background-position: 72% 51%;
  }

  60% {
    background-position: 100% 50%;
  }

  72% {
    background-position: 78% 48%;
  }

  84% {
    background-position: 48% 52%;
  }

  92% {
    background-position: 22% 49%;
  }

  100% {
    background-position: 0% 50%;
  }

}


/* ===========================================================
   RGB AURA FLOW
   =========================================================== */

@keyframes metamorphRGBWordAura {

  0%,
  100% {
    background-position: 0% 50%;

    opacity: 0.045;
  }

  25% {
    opacity: 0.075;
  }

  50% {
    background-position: 100% 50%;

    opacity: 0.11;
  }

  75% {
    opacity: 0.065;
  }

}


/* ===========================================================
   RGB CINEMATIC TRACE
   =========================================================== */

@keyframes metamorphRGBWordTrace {

  0%,
  16% {
    opacity: 0;

    transform: translateX(-48%) scaleX(0.35);
  }

  30% {
    opacity: 0.65;
  }

  46% {
    opacity: 0.38;
  }

  58% {
    opacity: 0.12;

    transform: translateX(20%) scaleX(0.96);
  }

  68%,
  100% {
    opacity: 0;

    transform: translateX(74%) scaleX(0.35);
  }

}


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

.hero__desc {
  font-size: clamp(14px, 1.1vw, 17px);

  line-height: 1.65;

  color: var(--ink-1);

  max-width: 46ch;

  margin-bottom: 40px;

  transition: color 0.6s ease;
}


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

.hero__actions {
  display: flex;

  align-items: center;

  gap: 28px;

  margin-bottom: 60px;

  flex-wrap: wrap;
}


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

.cta {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border-radius: 100px;

  font-size: 14px;

  font-weight: 700;

  font-family: 'Manrope', sans-serif;

  overflow: hidden;

  isolation: isolate;

  transform: translateZ(0);

  will-change: transform, box-shadow;

  cursor: pointer;

  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta:not(.cta--ghost) {
  min-width: 168px;

  height: 56px;

  padding: 0 28px;

  background: var(--ink-0);

  color: var(--bg-0);

  border: 1px solid transparent;

  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

.cta:not(.cta--ghost)::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(110deg,
      transparent 20%,
      rgba(255, 255, 255, 0.18) 45%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.18) 55%,
      transparent 80%);

  transform: translateX(-120%);

  transition: transform 0.75s var(--ease-out);

  z-index: -1;
}

.cta:not(.cta--ghost):hover {
  color: black;

  transform: translateY(-5px) scale(1.035);

  background: #ffffff;

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.2),
    0 0 35px rgba(255, 255, 255, 0.08);
}

.cta:not(.cta--ghost):hover::before {
  transform: translateX(120%);
}

.cta:not(.cta--ghost):active {
  transform: translateY(-1px) scale(0.975);
}

.cta--ghost {
  background: transparent;

  color: var(--ink-0);

  border: 1px solid var(--line);

  padding: 0 27px;

  min-width: 168px;

  height: 56px;
}

.cta--ghost::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(110deg,
      transparent 20%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.04) 55%,
      transparent 80%);

  transform: translateX(-120%);

  transition: transform 0.75s var(--ease-out);

  z-index: -1;
}

.cta--ghost:hover {
  border-color: rgba(244, 243, 239, 0.5);

  background: rgba(244, 243, 239, 0.055);

  color: #ffffff;

  transform: translateY(-4px) scale(1.025);

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.12),
    0 0 25px rgba(255, 255, 255, 0.025);
}

.cta--ghost:hover .cta__text {
  color: #ffffff;
}

.cta--ghost:hover::before {
  transform: translateX(120%);
}

.cta--ghost:active {
  transform: translateY(-1px) scale(0.975);
}

.cta__text {
  position: relative;

  display: inline-block;

  white-space: nowrap;

  transform: translateY(0);

  transition:
    transform 0.58s var(--ease-out),
    color 0.4s ease,
    letter-spacing 0.45s ease;
}

.cta__arrow {
  display: inline-block;

  transition: transform 0.55s var(--ease-out);
}

.cta:hover .cta__arrow {
  transform: translate(6px, -6px) rotate(4deg);
}

.cta:active {
  transform: translateY(-1px) scale(0.975);
}


/* ===========================================================
   HERO START A PROJECT
   =========================================================== */

.hero__actions .cta:not(.cta--ghost) {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  min-width: 188px;

  height: 58px;

  padding: 0 28px;

  border-radius: 100px;

  border: 1px solid rgba(255, 255, 255, 0.34);

  color: #111111;

  background:
    linear-gradient(115deg,
      #000000 0%,
      #202020 10%,
      #464646 22%,
      #777777 34%,
      #ababab 43%,
      #d6d6d6 48%,
      #ffffff 52%,
      #d8d8d8 57%,
      #aaaaaa 66%,
      #777777 76%,
      #454545 87%,
      #202020 94%,
      #000000 100%);

  background-size: 320% 320%;

  background-position: 0% 50%;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 255, 255, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);

  transform: translateZ(0);

  will-change: transform, background-position, box-shadow;

  animation: heroStartRGB 6s cubic-bezier(.16, 1, .3, 1) infinite;

  transition:
    transform 0.65s cubic-bezier(.16, 1, .3, 1),
    border-color 0.5s ease,
    box-shadow 0.7s cubic-bezier(.16, 1, .3, 1),
    color 0.4s ease;
}

.hero__actions .cta:not(.cta--ghost)::before {
  content: "";

  position: absolute;

  top: -80%;

  left: -130%;

  width: 52%;

  height: 260%;

  background:
    linear-gradient(105deg,
      transparent 18%,
      rgba(255, 255, 255, 0.02) 35%,
      rgba(255, 255, 255, 0.20) 45%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.20) 55%,
      rgba(255, 255, 255, 0.02) 65%,
      transparent 82%);

  transform: skewX(-18deg);

  opacity: 0.72;

  z-index: 1;

  pointer-events: none;

  animation: heroStartShine 4.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.hero__actions .cta:not(.cta--ghost)::after {
  content: "";

  position: absolute;

  inset: 1px;

  border-radius: inherit;

  border: 1px solid rgba(255, 255, 255, 0.34);

  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.08);

  opacity: 0.8;

  z-index: 2;

  pointer-events: none;

  transition:
    opacity 0.5s ease,
    box-shadow 0.65s ease;
}

.hero__actions .cta:not(.cta--ghost) .cta__text {
  position: relative;

  z-index: 5;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #111111;

  transform: translateY(0);

  transition:
    transform 0.55s cubic-bezier(.16, 1, .3, 1),
    color 0.4s ease,
    letter-spacing 0.45s ease;
}

.hero__actions .cta:not(.cta--ghost) .cta__arrow {
  position: relative;

  z-index: 6;

  display: inline-block;

  transform: translate(0, 0) rotate(0deg);

  transition: transform 0.7s cubic-bezier(.16, 1, .3, 1);
}

@keyframes heroStartRGB {

  0% {
    background-position: 0% 50%;
  }

  20% {
    background-position: 40% 30%;
  }

  40% {
    background-position: 100% 50%;
  }

  60% {
    background-position: 65% 75%;
  }

  80% {
    background-position: 20% 60%;
  }

  100% {
    background-position: 0% 50%;
  }

}

@keyframes heroStartShine {

  0% {
    left: -130%;
  }

  16% {
    left: 150%;
  }

  100% {
    left: 150%;
  }

}

.hero__actions .cta:not(.cta--ghost):hover {
  transform: translateY(-8px) scale(1.05);

  border-color: rgba(255, 255, 255, 0.82);

  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 0 42px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  animation: heroStartHoverRGB 2.8s ease-in-out infinite;
}

@keyframes heroStartHoverRGB {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}

.hero__actions .cta:not(.cta--ghost):hover::after {
  opacity: 1;

  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.12),
    0 0 20px rgba(255, 255, 255, 0.06);
}

.hero__actions .cta:not(.cta--ghost):hover .cta__text {
  color: #ffffff;

  transform: translateY(-2px);

  letter-spacing: 0.018em;
}

.hero__actions .cta:not(.cta--ghost):hover .cta__arrow {
  transform: translate(9px, -8px) rotate(12deg) scale(1.12);
}

.hero__actions .cta:not(.cta--ghost):active {
  transform: translateY(-2px) scale(0.97);

  transition-duration: 0.15s;
}


/* ===========================================================
   LIGHT HERO BUTTONS
   =========================================================== */

body.light-mode .hero__actions .cta:not(.cta--ghost) {
  color: #ffffff;

  border-color: rgba(0, 0, 0, 0.16);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.15),
    0 0 18px rgba(0, 0, 0, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

body.light-mode .hero__actions .cta:not(.cta--ghost) .cta__text {
  color: #ffffff;
}

body.light-mode .hero__actions .cta:not(.cta--ghost):hover {
  border-color: rgba(0, 0, 0, 0.42);

  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.25),
    0 0 34px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.light-mode .hero__actions .cta:not(.cta--ghost):hover .cta__text {
  color: #ffffff;
}


/* ===========================================================
   VIEW OUR WORK — WHITE ON HOVER
   DARK + LIGHT MODE
   =========================================================== */

.cta.cta--ghost:hover,
.cta.cta--ghost:hover .cta__text {
  color: #ffffff !important;
}

body.light-mode .cta.cta--ghost:hover,
body.light-mode .cta.cta--ghost:hover .cta__text {
  color: #ffffff !important;
}


/* ===========================================================
   STATS
   =========================================================== */

.hero__stats {
  display: flex;

  gap: clamp(28px, 4vw, 56px);

  flex-wrap: wrap;
}

.stat {
  display: flex;

  flex-direction: column;

  gap: 4px;

  transition: transform 0.45s var(--ease);
}

.stat:hover {
  transform: translateY(-3px);
}

.stat__num {
  font-family: 'Unbounded', sans-serif;

  font-size: clamp(20px, 2.2vw, 28px);

  font-weight: 800;

  letter-spacing: -0.01em;
}

.stat__num small {
  font-size: 13px;

  color: var(--ink-2);
}

.stat__label {
  font-size: 12px;

  letter-spacing: 0.02em;

  color: var(--ink-2);

  text-transform: uppercase;
}


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

.hero__footer {
  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 30px;

  font-size: 12px;

  letter-spacing: 0.03em;

  color: var(--ink-2);
}

.hero__social {
  position: relative;

  color: var(--ink-1);

  transition:
    color 0.35s var(--ease),
    transform 0.4s var(--ease);
}

.hero__social:hover {
  color: var(--ink-0);

  transform: translateY(-2px);
}

.scroll-indicator {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  text-transform: uppercase;

  font-size: 11px;

  letter-spacing: 0.05em;
}

.scroll-indicator__line {
  width: 1px;

  height: 32px;

  background: var(--line);

  position: relative;

  overflow: hidden;
}

.scroll-indicator__line i {
  position: absolute;

  top: -100%;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--ink-0);

  animation: scrollLine 2.2s ease-in-out infinite;
}

@keyframes scrollLine {

  0% {
    top: -100%;
  }

  50% {
    top: 0%;
  }

  100% {
    top: 100%;
  }

}


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

.reveal {
  opacity: 0;

  transform: translateY(18px);
}

.hero.is-ready .reveal {
  animation: revealUp 0.9s var(--ease) forwards;
}

.hero.is-ready .reveal-line {
  animation: lineUp 0.95s var(--ease) forwards;
}

@keyframes revealUp {

  to {
    opacity: 1;

    transform: translateY(0);
  }

}

@keyframes lineUp {

  from {
    opacity: 0;

    transform: translateY(100%);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }

}

[data-reveal="1"] {
  animation-delay: 0.05s !important;
}

[data-reveal="2"] {
  animation-delay: 0.15s !important;
}

[data-reveal="3"] {
  animation-delay: 0.24s !important;
}

[data-reveal="4"] {
  animation-delay: 0.36s !important;
}

[data-reveal="5"] {
  animation-delay: 0.46s !important;
}

[data-reveal="6"] {
  animation-delay: 0.56s !important;
}

[data-reveal="7"] {
  animation-delay: 0.66s !important;
}


/* ===========================================================
   LIGHT MODE
   =========================================================== */

body.light-mode {
  --bg-0: #f2f1ed;

  --bg-1: #e9e8e3;

  --bg-2: #deddd7;

  --ink-0: #101010;

  --ink-1: #454542;

  --ink-2: #6b6b66;

  --line: rgba(16, 16, 16, 0.14);

  background:
    radial-gradient(circle at 78% 10%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.35) 22%,
      transparent 48%),
    linear-gradient(180deg,
      #f1f0ec 0%,
      #e9e8e3 52%,
      #ddddd7 100%);

  color: var(--ink-0);
}


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

body.light-mode .hero {
  background:
    radial-gradient(circle at 70% 15%,
      rgba(255, 255, 255, 0.65),
      transparent 38%);
}


/* ===========================================================
   LIGHT BACKGROUND
   =========================================================== */

body.light-mode .bg {
  background:
    radial-gradient(circle at 70% 10%,
      rgba(255, 255, 255, 0.75),
      transparent 38%);
}

body.light-mode .bg svg {
  opacity: 0.92;

  filter: none;
}

body.light-mode .bg svg rect {
  fill: #ecebe7;
}

body.light-mode .bg svg ellipse {
  opacity: 1;
}

body.light-mode .bg svg g:nth-of-type(1) {
  fill: #d4d3ce;

  opacity: 0.96;
}

body.light-mode .bg svg g:nth-of-type(2) {
  fill: #c4c3bd;

  opacity: 0.98;
}

body.light-mode .bg svg g:nth-of-type(3) {
  fill: #aaa9a2;

  opacity: 1;
}

body.light-mode .bg__layer--1 {
  opacity: 0.22;
}

body.light-mode .bg__layer--2 {
  opacity: 0.17;
}

body.light-mode .bg__layer--3 {
  opacity: 0.12;
}

body.light-mode .bg__grid {
  opacity: 0.35;

  background-image:
    linear-gradient(rgba(20, 20, 20, 0.075) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(20, 20, 20, 0.075) 1px,
      transparent 1px);
}

body.light-mode .bg::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(circle at 78% 16%,
      rgba(255, 255, 255, 0.82),
      transparent 32%);

  z-index: 2;
}


/* ===========================================================
   LIGHT NAV
   =========================================================== */

body.light-mode .nav {
  background: rgba(242, 241, 237, 0.58);

  border-bottom-color: rgba(16, 16, 16, 0.09);
}

body.light-mode .nav::after {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(15, 15, 15, 0.18) 20%,
      rgba(15, 15, 15, 0.45) 50%,
      rgba(15, 15, 15, 0.18) 80%,
      transparent 100%);
}

body.light-mode .nav::before {
  background:
    linear-gradient(90deg,
      transparent,
      rgba(15, 15, 15, 0.35),
      #111111,
      rgba(15, 15, 15, 0.35),
      transparent);
}


/* ===========================================================
   LIGHT BRAND
   =========================================================== */

body.light-mode .nav__brand {
  color: #111111;
}

body.light-mode .nav__brand span {
  background:
    linear-gradient(90deg,
      #111111,
      #444444,
      #888888,
      #111111,
      #777777,
      #111111);

  background-size: 200% auto;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}

body.light-mode .nav__brand:hover {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}


/* ===========================================================
   LIGHT MENU
   =========================================================== */

body.light-mode .menu a {
  color: #161616;
}

body.light-mode .menu a:hover {
  color: #000000;
}

body.light-mode .menu a::after {
  background:
    linear-gradient(90deg,
      transparent,
      #555,
      #111,
      #555,
      transparent);
}


/* ===========================================================
   LIGHT NAV CTA
   =========================================================== */

body.light-mode .nav__cta {
  background: rgba(17, 17, 17, 0.025);

  border-color: rgba(17, 17, 17, 0.18);

  color: #111111;
}

body.light-mode .nav__cta::before {
  background:
    linear-gradient(115deg,
      #000000 0%,
      #222222 14%,
      #555555 26%,
      #909090 38%,
      #d5d5d5 46%,
      #ffffff 50%,
      #d9d9d9 56%,
      #a0a0a0 66%,
      #5a5a5a 76%,
      #242424 88%,
      #000000 100%);

  background-size: 300% 300%;
}

body.light-mode .nav__cta::after {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.025) 48%,
      rgba(0, 0, 0, 0.10));
}

body.light-mode .nav__cta:hover {
  background: transparent;

  border-color: rgba(0, 0, 0, 0.55);

  color: #ffffff;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(0, 0, 0, 0.025),
    0 0 24px rgba(0, 0, 0, 0.045);
}

body.light-mode .nav__cta:hover>span {
  color: #ffffff;
}


/* ===========================================================
   LIGHT HERO TEXT
   =========================================================== */

body.light-mode .hero__desc {
  color: #555550;
}

body.light-mode .hero__tag {
  color: #555550;
}

body.light-mode .hero__footer {
  color: #555550;
}

body.light-mode .hero__social {
  color: #5f5f5b;
}

body.light-mode .hero__social:hover {
  color: #111111;
}

body.light-mode .stat__label {
  color: #666660;
}

body.light-mode .stat__num small {
  color: #777770;
}


/* ===========================================================
   LIGHT HERO BUTTONS
   =========================================================== */

body.light-mode .cta:not(.cta--ghost) {
  background: #111111;

  color: #f4f3ef;

  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

body.light-mode .cta:not(.cta--ghost):hover {
  background: #000000;

  color: #ffffff;

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.16),
    0 0 30px rgba(0, 0, 0, 0.05);
}

body.light-mode .cta--ghost {
  color: #111111;

  border-color: rgba(17, 17, 17, 0.14);
}

/* IMPORTANT:
   View Our Work remains WHITE on hover in light mode. */

body.light-mode .cta--ghost:hover {
  background: #111111;

  border-color: rgba(17, 17, 17, 0.38);

  color: #ffffff !important;
}

body.light-mode .cta--ghost:hover .cta__text {
  color: #ffffff !important;
}


/* ===========================================================
   LIGHT SCROLL INDICATOR
   =========================================================== */

body.light-mode .scroll-indicator__line {
  background: rgba(17, 17, 17, 0.12);
}

body.light-mode .scroll-indicator__line i {
  background: #111111;
}


/* ===========================================================
   LIGHT GRAIN
   =========================================================== */

body.light-mode .grain {
  opacity: 0.018;

  mix-blend-mode: multiply;
}


/* ===========================================================
   LIGHT THEME CURSOR
   =========================================================== */

body.light-mode .cursor {
  color: #080808;
}

body.light-mode .cursor__dot {
  background: #080808;

  border-color: #080808;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 0 10px rgba(0, 0, 0, 0.12);
}

body.light-mode .cursor__ring {
  border-color: rgba(8, 8, 8, 0.62);

  background: transparent;

  box-shadow: 0 0 16px rgba(0, 0, 0, 0.07);
}

body.light-mode .cursor.is-hover .cursor__dot {
  width: 70px;

  height: 70px;

  background: transparent;

  border: 1px solid rgba(120, 120, 120, 0.22);

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

  box-shadow:
    0 0 12px rgba(80, 80, 80, 0.035),
    0 0 24px rgba(80, 80, 80, 0.018),
    inset 0 0 12px rgba(80, 80, 80, 0.015);

  opacity: 1;

  animation: none;

  transition:
    width 0.28s var(--ease-out),
    height 0.28s var(--ease-out),
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.28s ease,
    opacity 0.2s ease;
}

body.light-mode .cursor.is-hover .cursor__ring {
  border-color: rgba(8, 8, 8, 0.82);

  background: transparent;

  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.09),
    inset 0 0 10px rgba(0, 0, 0, 0.025);
}

body.light-mode .cursor.is-hover-lg .cursor__dot {
  background-size: 320% 320%;
}

body.light-mode .cursor.is-hover-lg .cursor__ring {
  border-color: #080808;

  box-shadow: 0 0 25px rgba(0, 0, 0, 0.12);
}


/* ===========================================================
   COMPACT PARALLAX MARQUEE
   =========================================================== */

.proof-marquee {
  --pm-bg: #0b0b0a;

  --pm-bg-deep: #050505;

  --pm-ink: #f4f3ef;

  --pm-line: rgba(244, 243, 239, 0.10);

  position: relative;

  isolation: isolate;

  width: 100%;

  height: 72px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    radial-gradient(circle at 72% 35%,
      rgba(255, 255, 255, .045) 0%,
      rgba(255, 255, 255, .012) 24%,
      transparent 58%),
    linear-gradient(180deg,
      var(--pm-bg) 0%,
      var(--pm-bg-deep) 100%);

  border-top: 1px solid var(--pm-line);

  border-bottom: 1px solid var(--pm-line);

  color: var(--pm-ink);
}


/* ===========================================================
   DEEP PARALLAX BACKGROUND
   =========================================================== */

.proof-marquee__bg {
  position: absolute;

  top: -105%;

  right: -24%;

  bottom: -145%;

  left: -24%;

  min-width: 148%;

  min-height: 360%;

  z-index: -2;

  pointer-events: none;

  opacity: .96;

  transform:
    translate3d(var(--pm-scene-x, 0px),
      calc(var(--pm-scene-y, 0px) + var(--pm-transition-y, 0px)),
      0) scale(1.02);

  transform-origin: center center;

  will-change: transform;

  animation: proofMarqueeSceneDrift 18s ease-in-out infinite alternate;
}


/* ===========================================================
   GLOWS
   =========================================================== */

.proof-marquee__glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  will-change: transform;
}

.proof-marquee__glow--1 {
  width: 520px;

  height: 520px;

  top: -285px;

  right: -55px;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .075) 0%,
      rgba(255, 255, 255, .028) 27%,
      rgba(255, 255, 255, .008) 43%,
      transparent 72%);

  filter: blur(8px);

  transform:
    translate3d(var(--pm-g1-x, 0px),
      var(--pm-g1-y, 0px),
      0) scale(1.13);

  animation: proofMarqueeGlowOne 11s ease-in-out infinite alternate;
}

.proof-marquee__glow--2 {
  width: 460px;

  height: 460px;

  left: -220px;

  bottom: -270px;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .042) 0%,
      rgba(255, 255, 255, .014) 31%,
      transparent 73%);

  filter: blur(14px);

  transform:
    translate3d(var(--pm-g2-x, 0px),
      var(--pm-g2-y, 0px),
      0) scale(1.18);

  animation: proofMarqueeGlowTwo 13s ease-in-out infinite alternate;
}


/* ===========================================================
   ORBS
   =========================================================== */

.proof-marquee__orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  will-change: transform;
}

.proof-marquee__orb--1 {
  width: 190px;

  height: 190px;

  left: 17%;

  top: -52px;

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

  box-shadow:
    0 0 58px rgba(255, 255, 255, .018),
    inset 0 0 50px rgba(255, 255, 255, .012);

  transform:
    translate3d(var(--pm-o1-x, 0px),
      var(--pm-o1-y, 0px),
      0);

  animation: proofMarqueeOrbOne 14s ease-in-out infinite alternate;
}

.proof-marquee__orb--2 {
  width: 310px;

  height: 310px;

  right: 10%;

  top: -190px;

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

  box-shadow:
    0 0 100px rgba(255, 255, 255, .012),
    inset 0 0 80px rgba(255, 255, 255, .008);

  transform:
    translate3d(var(--pm-o2-x, 0px),
      var(--pm-o2-y, 0px),
      0);

  animation: proofMarqueeOrbTwo 17s ease-in-out infinite alternate;
}


/* ===========================================================
   TERRAIN
   =========================================================== */

.proof-marquee__mountain {
  position: absolute;

  left: -10%;

  width: 120%;

  pointer-events: none;

  will-change: transform;
}

.proof-marquee__mountain--back {
  height: 120%;

  bottom: -105%;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .042) 0%,
      rgba(255, 255, 255, .012) 45%,
      rgba(0, 0, 0, .08) 100%);

  opacity: .78;

  clip-path:
    polygon(0 72%,
      9% 57%,
      17% 65%,
      25% 43%,
      34% 63%,
      43% 49%,
      52% 68%,
      61% 41%,
      71% 64%,
      80% 46%,
      89% 67%,
      100% 51%,
      100% 100%,
      0 100%);

  transform:
    translate3d(var(--pm-m1-x, 0px),
      var(--pm-m1-y, 0px),
      0) scale(1.08);

  animation: proofMarqueeMountainBack 15s ease-in-out infinite alternate;
}

.proof-marquee__mountain--mid {
  height: 108%;

  bottom: -92%;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .025) 0%,
      rgba(255, 255, 255, .007) 38%,
      rgba(0, 0, 0, .17) 100%);

  opacity: .92;

  clip-path:
    polygon(0 77%,
      8% 64%,
      17% 74%,
      27% 53%,
      37% 70%,
      46% 50%,
      55% 73%,
      64% 56%,
      74% 74%,
      84% 52%,
      93% 71%,
      100% 59%,
      100% 100%,
      0 100%);

  transform:
    translate3d(var(--pm-m2-x, 0px),
      var(--pm-m2-y, 0px),
      0) scale(1.13);

  animation: proofMarqueeMountainMid 12s ease-in-out infinite alternate;
}

.proof-marquee__mountain--front {
  height: 95%;

  bottom: -75%;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .012) 0%,
      rgba(0, 0, 0, .20) 45%,
      rgba(0, 0, 0, .40) 100%);

  clip-path:
    polygon(0 83%,
      10% 70%,
      20% 79%,
      30% 63%,
      40% 79%,
      50% 66%,
      60% 82%,
      70% 62%,
      80% 78%,
      90% 65%,
      100% 77%,
      100% 100%,
      0 100%);

  transform:
    translate3d(var(--pm-m3-x, 0px),
      var(--pm-m3-y, 0px),
      0) scale(1.18);

  animation: proofMarqueeMountainFront 10s ease-in-out infinite alternate;
}


/* ===========================================================
   PERSPECTIVE FLOOR GRID
   =========================================================== */

.proof-marquee__grid {
  position: absolute;

  left: -30%;

  bottom: -225%;

  width: 160%;

  height: 340%;

  background-image:
    linear-gradient(rgba(244, 243, 239, .060) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(244, 243, 239, .060) 1px,
      transparent 1px);

  background-size: 60px 60px;

  opacity: .40;

  transform:
    perspective(650px) rotateX(70deg) translate3d(var(--pm-grid-x, 0px),
      var(--pm-grid-y, 0px),
      0) scale(1.38);

  transform-origin: center top;

  will-change: transform;

  animation: proofMarqueeFloorGrid 9s ease-in-out infinite alternate;
}


/* ===========================================================
   DIAGONAL LINES
   =========================================================== */

.proof-marquee__line {
  position: absolute;

  height: 1px;

  pointer-events: none;

  transform-origin: center;

  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .012) 10%,
      rgba(255, 255, 255, .085) 50%,
      rgba(255, 255, 255, .012) 90%,
      transparent 100%);

  will-change: transform;
}

.proof-marquee__line--1 {
  width: 145%;

  left: -22%;

  top: 35%;

  transform:
    translate3d(var(--pm-l1-x, 0px),
      var(--pm-l1-y, 0px),
      0) rotate(-7deg);

  opacity: .48;

  animation: proofMarqueeLineOne 11s ease-in-out infinite alternate;
}

.proof-marquee__line--2 {
  width: 135%;

  left: -17%;

  top: 70%;

  transform:
    translate3d(var(--pm-l2-x, 0px),
      var(--pm-l2-y, 0px),
      0) rotate(6deg);

  opacity: .29;

  animation: proofMarqueeLineTwo 13s ease-in-out infinite alternate;
}

.proof-marquee__line--3 {
  width: 150%;

  left: -25%;

  top: 92%;

  transform:
    translate3d(var(--pm-l3-x, 0px),
      var(--pm-l3-y, 0px),
      0) rotate(-4deg);

  opacity: .18;

  animation: proofMarqueeLineThree 15s ease-in-out infinite alternate;
}


/* ===========================================================
   NOISE
   =========================================================== */

.proof-marquee__noise {
  position: absolute;

  inset: -20%;

  opacity: .065;

  background-image:
    radial-gradient(rgba(255, 255, 255, .60) .6px,
      transparent .7px);

  background-size: 5px 5px;

  transform:
    translate3d(var(--pm-noise-x, 0px),
      var(--pm-noise-y, 0px),
      0);

  will-change: transform;

  animation: proofMarqueeNoise 5s steps(6) infinite;
}


/* ===========================================================
   MARQUEE TEXT
   =========================================================== */

.proof-marquee__viewport {
  position: relative;

  z-index: 5;

  width: 100%;

  overflow: hidden;

  display: flex;

  align-items: center;

  height: 100%;

  transform: translateY(-1px);

  -webkit-mask-image:
    linear-gradient(90deg,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%);

  mask-image:
    linear-gradient(90deg,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%);
}

.proof-marquee__track {
  display: flex;

  align-items: center;

  width: max-content;

  animation: proofMarqueeMove 30s linear infinite;

  will-change: transform;
}

.proof-marquee__set {
  display: flex;

  align-items: center;

  flex-shrink: 0;

  gap: 23px;

  padding-right: 23px;
}

.proof-marquee__item {
  flex-shrink: 0;

  white-space: nowrap;

  font-family: "Space Mono", monospace;

  font-size: clamp(13px, 1.15vw, 18px);

  font-weight: 400;

  line-height: 1;

  letter-spacing: -.035em;

  text-transform: uppercase;

  color: rgba(244, 243, 239, .60);
}

.proof-marquee__item--strong {
  font-weight: 700;

  color: rgba(244, 243, 239, .92);
}

.proof-marquee__item--proof {
  color: rgba(244, 243, 239, .40);
}

.proof-marquee__dot {
  flex-shrink: 0;

  font-family: "Space Mono", monospace;

  font-size: 11px;

  line-height: 1;

  color: rgba(244, 243, 239, .24);
}

@keyframes proofMarqueeMove {

  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }

}


/* ===========================================================
   LIGHT MARQUEE
   =========================================================== */

body.light-mode .proof-marquee {
  --pm-bg: #ecebe7;

  --pm-bg-deep: #d9d8d2;

  --pm-ink: #101010;

  --pm-line: rgba(16, 16, 16, .12);

  background:
    radial-gradient(circle at 72% 35%,
      rgba(255, 255, 255, .68) 0%,
      rgba(255, 255, 255, .20) 28%,
      transparent 58%),
    linear-gradient(180deg,
      #efeee9,
      #dad9d3);
}

body.light-mode .proof-marquee__glow--1 {
  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .72) 0%,
      rgba(255, 255, 255, .26) 28%,
      rgba(255, 255, 255, .04) 46%,
      transparent 72%);
}

body.light-mode .proof-marquee__glow--2 {
  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .46) 0%,
      rgba(255, 255, 255, .12) 32%,
      transparent 73%);
}

body.light-mode .proof-marquee__mountain--back {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .40),
      rgba(213, 212, 206, .65));
}

body.light-mode .proof-marquee__mountain--mid {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .24),
      rgba(181, 180, 174, .70));
}

body.light-mode .proof-marquee__mountain--front {
  background:
    linear-gradient(180deg,
      rgba(120, 119, 113, .12),
      rgba(66, 65, 60, .38));
}

body.light-mode .proof-marquee__grid {
  background-image:
    linear-gradient(rgba(16, 16, 16, .065) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(16, 16, 16, .065) 1px,
      transparent 1px);

  opacity: .30;
}

body.light-mode .proof-marquee__line {
  background:
    linear-gradient(90deg,
      transparent,
      rgba(16, 16, 16, .10),
      transparent);
}

body.light-mode .proof-marquee__orb {
  border-color: rgba(16, 16, 16, .075);

  box-shadow:
    0 0 60px rgba(0, 0, 0, .025),
    inset 0 0 50px rgba(0, 0, 0, .016);
}

body.light-mode .proof-marquee__item {
  color: rgba(16, 16, 16, .58);
}

body.light-mode .proof-marquee__item--strong {
  color: rgba(16, 16, 16, .90);
}

body.light-mode .proof-marquee__item--proof {
  color: rgba(16, 16, 16, .39);
}

body.light-mode .proof-marquee__dot {
  color: rgba(16, 16, 16, .23);
}


/* ===========================================================
   TABLET
   =========================================================== */

@media (max-width: 800px) {

  .menu {
    display: none;
  }

  .nav {
    position: fixed !important;

    top: 0;

    left: 0;

    height: 72px;

    padding-left: 20px;

    padding-right: 20px;
  }

  .nav.is-scrolled {
    position: fixed !important;

    top: 0;

    left: 0;

    height: 58px;
  }

  .nav__brand {
    font-size: 15px;
  }

  .nav__brand img {
    width: 22px;

    height: 22px;
  }

  .nav__cta {
    min-width: 120px;

    height: 38px;

    padding: 0 15px;

    font-size: 11px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .nav__actions {
    gap: 9px;
  }

  .hero__content {
    padding-top: 20px;
  }

  .proof-marquee {
    height: 68px;
  }

  .proof-marquee__viewport {
    height: 100%;

    margin-top: 0;

    transform: translateY(-1px);
  }

  .proof-marquee__track {
    animation-duration: 27s;
  }

  .proof-marquee__set {
    gap: 20px;

    padding-right: 20px;
  }

  .proof-marquee__item {
    font-size: 13px;
  }

}


/* ===========================================================
   MOBILE NAV PANEL
   =========================================================== */

@media (max-width: 600px) {

  .hero {
    padding: 0 20px 20px;
  }

  .nav {
    padding-top: 18px;
  }

  .nav__cta {
    display: none;
  }

  .theme-switch {
    width: 60px;

    height: 32px;

    margin-right: 1px;
  }

  .mobile-menu-toggle {
    width: 36px;

    height: 36px;
  }

  .nav__actions {
    gap: 8px;
  }

  .nav__brand {
    font-size: 14px;
  }

  .nav__brand img {
    width: 20px;

    height: 20px;
  }

  .nav::after {
    height: 2px;
  }

  .nav::before {
    height: 3px;

    width: 42%;
  }

  .theme-switch__thumb {
    width: 24px;

    height: 24px;
  }

  .theme-switch__icon {
    width: 15px;

    height: 15px;
  }

  .theme-switch__icon--moon {
    margin-left: 7px;
  }

  .theme-switch__icon--sun {
    margin-right: 7px;
  }

  body.light-mode .theme-switch__thumb {
    transform: translateX(28px);
  }


  /* =======================================================
     MOBILE NAV PANEL
     ======================================================= */

  .mobile-menu-panel {
    position: fixed;

    display: flex;

    flex-direction: column;

    justify-content: center;

    top: 0;

    left: 0;

    width: 100%;

    height: 100svh;

    padding: 110px 24px 40px;

    z-index: 95;

    background: rgba(10, 10, 9, .92);

    backdrop-filter: blur(28px);

    -webkit-backdrop-filter: blur(28px);

    border: 1px solid rgba(244, 243, 239, .08);

    visibility: hidden;

    opacity: 0;

    clip-path: inset(0 0 100% 0);

    transform: translateY(-12px);

    pointer-events: none;

    transition:
      opacity .45s ease,
      visibility .45s ease,
      clip-path .8s var(--ease-out),
      transform .8s var(--ease-out);
  }

  .mobile-menu-panel::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
      radial-gradient(circle at 82% 18%,
        rgba(255, 255, 255, .075),
        transparent 32%),
      radial-gradient(circle at 12% 78%,
        rgba(255, 255, 255, .035),
        transparent 28%);

    opacity: .8;
  }

  .mobile-menu-panel::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 88px;

    height: 1px;

    background:
      linear-gradient(90deg,
        transparent,
        rgba(244, 243, 239, .18),
        transparent);

    transform: scaleX(.2);

    transform-origin: center;

    transition: transform .8s var(--ease-out);
  }

  .mobile-menu-panel.is-open {
    visibility: visible;

    opacity: 1;

    clip-path: inset(0 0 0 0);

    transform: translateY(0);

    pointer-events: auto;
  }

  .mobile-menu-panel.is-open::after {
    transform: scaleX(1);
  }

  .mobile-menu-panel__meta {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 36px;

    font-family: "Space Mono", monospace;

    font-size: 9px;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: rgba(244, 243, 239, .42);

    opacity: 0;

    transform: translateY(18px);

    transition:
      opacity .45s ease .12s,
      transform .7s var(--ease-out) .12s;
  }

  .mobile-menu-panel.is-open .mobile-menu-panel__meta {
    opacity: 1;

    transform: translateY(0);
  }

  .mobile-menu-panel__nav {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;
  }

  .mobile-menu-panel__link {
    position: relative;

    display: inline-block;

    width: fit-content;

    padding: 7px 0;

    font-family: "Unbounded", sans-serif;

    font-size: clamp(27px, 8.5vw, 42px);

    font-weight: 800;

    letter-spacing: -.045em;

    color: rgba(244, 243, 239, .90);

    opacity: 0;

    transform: translateY(40px) skewY(3deg);

    clip-path: inset(100% 0 0 0);

    transition:
      color .35s ease,
      opacity .6s ease,
      transform .75s var(--ease-out),
      clip-path .8s var(--ease-out);
  }

  .mobile-menu-panel.is-open .mobile-menu-panel__link {
    opacity: 1;

    transform: translateY(0) skewY(0);

    clip-path: inset(0 0 0 0);
  }

  .mobile-menu-panel.is-open .mobile-menu-panel__link:nth-child(1) {
    transition-delay: .14s;
  }

  .mobile-menu-panel.is-open .mobile-menu-panel__link:nth-child(2) {
    transition-delay: .22s;
  }

  .mobile-menu-panel.is-open .mobile-menu-panel__link:nth-child(3) {
    transition-delay: .30s;
  }

  .mobile-menu-panel.is-open .mobile-menu-panel__link:nth-child(4) {
    transition-delay: .38s;
  }

  .mobile-menu-panel__link::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0;

    height: 1px;

    background:
      linear-gradient(90deg,
        #8d8e8b,
        #e0e1dc,
        #a8d4d6,
        #e0c2c7,
        #d2be96,
        #8d8e8b);

    background-size: 300% 100%;

    transition: width .65s var(--ease-out);
  }

  .mobile-menu-panel__link:hover {
    color: #ffffff;

    transform: translateX(7px);
  }

  .mobile-menu-panel__link:hover::after {
    width: 100%;

    animation: mobileMenuLineRGB 2.4s linear infinite;
  }

  @keyframes mobileMenuLineRGB {

    0% {
      background-position: 0% 50%;
    }

    100% {
      background-position: 300% 50%;
    }

  }

  .mobile-menu-panel__footer {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: auto;

    padding-top: 30px;

    border-top: 1px solid rgba(244, 243, 239, .08);

    font-family: "Space Mono", monospace;

    font-size: 8px;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: rgba(244, 243, 239, .40);

    opacity: 0;

    transform: translateY(14px);

    transition:
      opacity .55s ease .48s,
      transform .7s var(--ease-out) .48s;
  }

  .mobile-menu-panel.is-open .mobile-menu-panel__footer {
    opacity: 1;

    transform: translateY(0);
  }


  /* Hero */

  .hero__content {
    padding-top: 20px;
  }

  .hero__headline {
    font-size: clamp(30px, 10vw, 46px);
  }

  .hero__actions {
    gap: 16px;
  }

  .cta,
  .cta--ghost {
    min-width: 0;

    height: 48px;

    padding: 0 22px;

    font-size: 13px;
  }

  .hero__stats {
    gap: 24px;
  }

  .bg__layer {
    filter: blur(80px);
  }

  .hero__footer {
    flex-wrap: wrap;

    gap: 16px;

    justify-content: center;

    text-align: center;
  }


  /* Marquee */

  .proof-marquee {
    height: 58px;
  }

  .proof-marquee__viewport {
    height: 100%;

    margin-top: 0;

    transform: translateY(-1px);
  }

  .proof-marquee__track {
    animation-duration: 23s;
  }

  .proof-marquee__set {
    gap: 16px;

    padding-right: 16px;
  }

  .proof-marquee__item {
    font-size: 11px;
  }

  .proof-marquee__dot {
    font-size: 9px;
  }

  .proof-marquee__grid {
    background-size: 42px 42px;
  }

}


/* ===========================================================
   SMALL MOBILE
   =========================================================== */

@media (max-width: 420px) {

  .nav {
    padding-left: 16px;

    padding-right: 16px;
  }

  .nav__brand {
    font-size: 12px;
  }

  .nav__brand img {
    width: 18px;

    height: 18px;
  }

  .theme-switch {
    width: 56px;

    height: 30px;
  }

  .mobile-menu-toggle {
    width: 34px;

    height: 34px;
  }

  .hero__actions {
    width: 100%;

    flex-direction: column;

    align-items: stretch;
  }

  .cta,
  .cta--ghost {
    width: 100%;
  }

  .hero__stats {
    width: 100%;

    justify-content: space-between;

    gap: 14px;
  }

  .stat__num {
    font-size: clamp(17px, 5vw, 22px);
  }

  .stat__label {
    font-size: 9px;
  }

  .proof-marquee {
    height: 55px;
  }

  .proof-marquee__item {
    font-size: 10px;
  }

}


/* ===========================================================
   MOBILE LIGHT MENU
   =========================================================== */

body.light-mode .mobile-menu-toggle {
  background: rgba(17, 17, 17, .035);

  border-color: rgba(17, 17, 17, .15);

  color: #111111;
}

body.light-mode .mobile-menu-toggle.is-open {
  background: rgba(17, 17, 17, .07);

  border-color: rgba(17, 17, 17, .36);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, .09),
    0 0 20px rgba(0, 0, 0, .035);
}

body.light-mode .mobile-menu-panel {
  background: rgba(238, 237, 232, .95);

  border-color: rgba(17, 17, 17, .08);
}

body.light-mode .mobile-menu-panel::before {
  background:
    radial-gradient(circle at 82% 18%,
      rgba(255, 255, 255, .80),
      transparent 34%),
    radial-gradient(circle at 12% 78%,
      rgba(255, 255, 255, .44),
      transparent 30%);
}

body.light-mode .mobile-menu-panel::after {
  background:
    linear-gradient(90deg,
      transparent,
      rgba(17, 17, 17, .16),
      transparent);
}

body.light-mode .mobile-menu-panel__meta,
body.light-mode .mobile-menu-panel__footer {
  color: rgba(17, 17, 17, .44);
}

body.light-mode .mobile-menu-panel__footer {
  border-top-color: rgba(17, 17, 17, .08);
}

body.light-mode .mobile-menu-panel__link {
  color: rgba(17, 17, 17, .88);
}

body.light-mode .mobile-menu-panel__link:hover {
  color: #000000;
}

body.light-mode .mobile-menu-panel__link::after {
  background:
    linear-gradient(90deg,
      #555,
      #111,
      #888,
      #111,
      #555);
}


/* ===========================================================
   REDUCED MOTION
   =========================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .grain {
    animation: none;

    opacity: 0.02;
  }

  .bg__layer,
  .bg .layer {
    transition: none !important;
  }

  .nav,
  .nav *,
  .nav::before,
  .nav::after,
  .cta,
  .cta *,
  .theme-switch,
  .theme-switch *,
  .rgb-word,
  .menu a,
  .hero__tag,
  .stat,
  .mobile-menu-panel,
  .mobile-menu-panel *,
  .mobile-menu-toggle,
  .mobile-menu-toggle * {
    animation: none !important;

    transition: none !important;
  }

  .rgb-word {
    opacity: 1 !important;

    transform: none !important;

    clip-path: none !important;
  }

  .cursor.is-hover .cursor__dot {
    animation: none !important;
  }

  .reveal,
  .line {
    opacity: 1 !important;

    transform: none !important;

    animation: none !important;
  }

  .scroll-indicator__line i {
    animation: none;
  }

  .proof-marquee__track {
    animation: none !important;
  }

  .proof-marquee__bg,
  .proof-marquee__glow,
  .proof-marquee__orb,
  .proof-marquee__mountain,
  .proof-marquee__grid,
  .proof-marquee__line,
  .proof-marquee__noise {
    transform: none !important;
  }

  body {
    cursor: auto;
  }

  .cursor {
    display: none;
  }

  .nav.nav-scroll-hidden,
  .nav.nav-scroll-visible {
    transform: none !important;

    opacity: 1 !important;
  }

}


/* ===========================================================
   HERO → MARQUEE CINEMATIC SCROLL TRANSITION
=========================================================== */

.hero {
  position: relative;

  z-index: 2;

  will-change: auto;
}

.proof-marquee {
  position: relative;

  z-index: 1;

  overflow: hidden;

  isolation: isolate;

  will-change: transform, opacity;

  transform: translate3d(0, var(--pm-enter-y, 0px), 0);

  opacity: var(--pm-enter-opacity, 1);

  transform-origin: center bottom;
}


/* ===========================================================
   LIGHT THEME — MATHEMATICAL NOTEBOOK GRID
   =========================================================== */

body.light-mode .bg__grid {
  z-index: 4;

  opacity: .72;

  background-image:
    linear-gradient(rgba(20, 20, 20, .085) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(20, 20, 20, .085) 1px,
      transparent 1px);

  background-size: 52px 52px;

  background-position: center center;

  mask-image:
    linear-gradient(180deg,
      rgba(0, 0, 0, .96) 0%,
      rgba(0, 0, 0, .88) 58%,
      rgba(0, 0, 0, .38) 100%);

  -webkit-mask-image:
    linear-gradient(180deg,
      rgba(0, 0, 0, .96) 0%,
      rgba(0, 0, 0, .88) 58%,
      rgba(0, 0, 0, .38) 100%);

  mix-blend-mode: multiply;

  pointer-events: none;
}

body.light-mode .bg::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 4;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(25, 25, 25, .032) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(25, 25, 25, .032) 1px,
      transparent 1px);

  background-size: 13px 13px;

  background-position: center center;

  opacity: .58;

  mix-blend-mode: multiply;

  mask-image:
    radial-gradient(circle at 50% 42%,
      #000 0%,
      rgba(0, 0, 0, .92) 46%,
      transparent 86%);

  -webkit-mask-image:
    radial-gradient(circle at 50% 42%,
      #000 0%,
      rgba(0, 0, 0, .92) 46%,
      transparent 86%);
}

body.light-mode .bg svg {
  position: relative;

  z-index: 1;
}

body.light-mode .bg__layer {
  z-index: 2;
}


/* ===========================================================
   DARK NOTEBOOK DEPTH
   =========================================================== */

.bg::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: .18;

  background-image:
    linear-gradient(rgba(244, 243, 239, .018) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(244, 243, 239, .018) 1px,
      transparent 1px);

  background-size: 72px 72px;

  background-position: center center;

  mask-image:
    radial-gradient(circle at 50% 35%,
      #000 0%,
      rgba(0, 0, 0, .86) 48%,
      transparent 86%);

  -webkit-mask-image:
    radial-gradient(circle at 50% 35%,
      #000 0%,
      rgba(0, 0, 0, .86) 48%,
      transparent 86%);
}


/* ===========================================================
   MARQUEE — CINEMATIC SCENE
   =========================================================== */

.proof-marquee__bg {
  top: -105%;

  right: -24%;

  bottom: -145%;

  left: -24%;

  min-width: 148%;

  min-height: 360%;

  opacity: .96;

  transform:
    translate3d(var(--pm-scene-x, 0px),
      calc(var(--pm-scene-y, 0px) + var(--pm-transition-y, 0px)),
      0) scale(1.02);

  transform-origin: center center;

  will-change: transform;
}


/* ===========================================================
   MARQUEE SCENE ANIMATIONS
   =========================================================== */

@keyframes proofMarqueeSceneDrift {

  0% {
    transform:
      translate3d(var(--pm-scene-x, 0px),
        calc(var(--pm-scene-y, 0px) + var(--pm-transition-y, 0px)),
        0) scale(1.02);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-scene-x, 0px) + 24px),
        calc(var(--pm-scene-y, 0px) + var(--pm-transition-y, 0px) - 16px),
        0) scale(1.045);
  }

}

@keyframes proofMarqueeGlowOne {

  0% {
    transform:
      translate3d(var(--pm-g1-x, 0px),
        var(--pm-g1-y, 0px),
        0) scale(1.13);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-g1-x, 0px) + 28px),
        calc(var(--pm-g1-y, 0px) + 18px),
        0) scale(1.18);
  }

}

@keyframes proofMarqueeGlowTwo {

  0% {
    transform:
      translate3d(var(--pm-g2-x, 0px),
        var(--pm-g2-y, 0px),
        0) scale(1.18);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-g2-x, 0px) - 26px),
        calc(var(--pm-g2-y, 0px) - 14px),
        0) scale(1.11);
  }

}

@keyframes proofMarqueeOrbOne {

  0% {
    transform:
      translate3d(var(--pm-o1-x, 0px),
        var(--pm-o1-y, 0px),
        0);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-o1-x, 0px) + 20px),
        calc(var(--pm-o1-y, 0px) - 12px),
        0);
  }

}

@keyframes proofMarqueeOrbTwo {

  0% {
    transform:
      translate3d(var(--pm-o2-x, 0px),
        var(--pm-o2-y, 0px),
        0);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-o2-x, 0px) - 18px),
        calc(var(--pm-o2-y, 0px) + 16px),
        0);
  }

}

@keyframes proofMarqueeMountainBack {

  0% {
    transform:
      translate3d(var(--pm-m1-x, 0px),
        var(--pm-m1-y, 0px),
        0) scale(1.08);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-m1-x, 0px) + 20px),
        calc(var(--pm-m1-y, 0px) - 8px),
        0) scale(1.10);
  }

}

@keyframes proofMarqueeMountainMid {

  0% {
    transform:
      translate3d(var(--pm-m2-x, 0px),
        var(--pm-m2-y, 0px),
        0) scale(1.13);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-m2-x, 0px) - 15px),
        calc(var(--pm-m2-y, 0px) - 10px),
        0) scale(1.15);
  }

}

@keyframes proofMarqueeMountainFront {

  0% {
    transform:
      translate3d(var(--pm-m3-x, 0px),
        var(--pm-m3-y, 0px),
        0) scale(1.18);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-m3-x, 0px) + 12px),
        calc(var(--pm-m3-y, 0px) - 7px),
        0) scale(1.205);
  }

}

@keyframes proofMarqueeFloorGrid {

  0% {
    transform:
      perspective(650px) rotateX(70deg) translate3d(var(--pm-grid-x, 0px),
        var(--pm-grid-y, 0px),
        0) scale(1.38);
  }

  100% {
    transform:
      perspective(650px) rotateX(70deg) translate3d(calc(var(--pm-grid-x, 0px) + 18px),
        calc(var(--pm-grid-y, 0px) - 12px),
        0) scale(1.43);
  }

}

@keyframes proofMarqueeLineOne {

  0% {
    transform:
      translate3d(var(--pm-l1-x, 0px),
        var(--pm-l1-y, 0px),
        0) rotate(-7deg);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-l1-x, 0px) - 16px),
        calc(var(--pm-l1-y, 0px) - 9px),
        0) rotate(-7.8deg);
  }

}

@keyframes proofMarqueeLineTwo {

  0% {
    transform:
      translate3d(var(--pm-l2-x, 0px),
        var(--pm-l2-y, 0px),
        0) rotate(6deg);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-l2-x, 0px) + 18px),
        calc(var(--pm-l2-y, 0px) - 7px),
        0) rotate(5.4deg);
  }

}

@keyframes proofMarqueeLineThree {

  0% {
    transform:
      translate3d(var(--pm-l3-x, 0px),
        var(--pm-l3-y, 0px),
        0) rotate(-4deg);
  }

  100% {
    transform:
      translate3d(calc(var(--pm-l3-x, 0px) - 12px),
        calc(var(--pm-l3-y, 0px) - 5px),
        0) rotate(-3.3deg);
  }

}

@keyframes proofMarqueeNoise {

  0% {
    transform:
      translate3d(var(--pm-noise-x, 0px),
        var(--pm-noise-y, 0px),
        0);
  }

  25% {
    transform:
      translate3d(calc(var(--pm-noise-x, 0px) - 9px),
        calc(var(--pm-noise-y, 0px) + 6px),
        0);
  }

  50% {
    transform:
      translate3d(calc(var(--pm-noise-x, 0px) + 8px),
        calc(var(--pm-noise-y, 0px) - 7px),
        0);
  }

  75% {
    transform:
      translate3d(calc(var(--pm-noise-x, 0px) - 5px),
        calc(var(--pm-noise-y, 0px) - 4px),
        0);
  }

  100% {
    transform:
      translate3d(var(--pm-noise-x, 0px),
        var(--pm-noise-y, 0px),
        0);
  }

}


/* ===========================================================
   STRONGER LIGHT MARQUEE
   =========================================================== */

body.light-mode .proof-marquee__bg {
  opacity: .88;

  mix-blend-mode: multiply;
}

body.light-mode .proof-marquee__grid {
  opacity: .38;
}


/* ===========================================================
   NAVBAR — ONLY SMALL DOT INSIDE NAVBAR
   =========================================================== */

body:has(.nav:hover) .cursor {
  opacity: 1 !important;
}

body:has(.nav:hover) .cursor__dot {
  width: 6px;

  height: 6px;

  background: currentColor;

  border: 1px solid currentColor;

  box-shadow: none;

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

  transition:
    width .22s ease,
    height .22s ease,
    background .22s ease,
    border-color .22s ease;
}

body:has(.nav:hover) .cursor__ring {
  display: none !important;
}

body.light-mode:has(.nav:hover) .cursor {
  color: #080808;
}

body.light-mode:has(.nav:hover) .cursor__dot {
  width: 6px;

  height: 6px;

  background: #080808;

  border-color: #080808;

  box-shadow: none;
}


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

@media (max-width: 800px) {

  body.light-mode .bg__grid {
    background-size: 44px 44px;

    opacity: .62;
  }

  .proof-marquee__bg {
    top: -82%;

    right: -34%;

    bottom: -120%;

    left: -34%;

    min-width: 168%;
  }

}

@media (max-width: 600px) {

  body.light-mode .bg__grid {
    background-size: 38px 38px;

    opacity: .54;
  }

  body.light-mode .bg::after {
    background-size: 11px 11px;

    opacity: .46;
  }

  .proof-marquee__bg {
    top: -74%;

    right: -48%;

    bottom: -112%;

    left: -48%;

    min-width: 196%;

    min-height: 330%;
  }

}

@media (max-width: 420px) {

  body.light-mode .bg__grid {
    background-size: 34px 34px;

    opacity: .48;
  }

  .proof-marquee__bg {
    min-width: 218%;
  }

}

/* ===========================================================
   REMOVE HOVER EFFECTS FROM HERO BUTTONS
   =========================================================== */

.hero__actions .cta:hover,
.hero__actions .cta:not(.cta--ghost):hover,
.hero__actions .cta--ghost:hover {
  transform: none !important;
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
  color: inherit !important;
  animation: none !important;
}

.hero__actions .cta:hover::before,
.hero__actions .cta:hover::after,
.hero__actions .cta:not(.cta--ghost):hover::before,
.hero__actions .cta:not(.cta--ghost):hover::after,
.hero__actions .cta--ghost:hover::before,
.hero__actions .cta--ghost:hover::after {
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
}

.hero__actions .cta:hover .cta__text,
.hero__actions .cta:hover .cta__arrow {
  transform: none !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

/* ===========================================================
   HERO BUTTONS — REMOVE ALL HOVER EFFECTS
   =========================================================== */

.hero__actions .cta,
.hero__actions .cta:hover,
.hero__actions .cta:active {
  transform: none !important;
  box-shadow: none !important;
}

.hero__actions .cta:hover .cta__text,
.hero__actions .cta:hover .cta__arrow {
  transform: none !important;
  letter-spacing: inherit !important;
}

.hero__actions .cta:hover::before,
.hero__actions .cta:hover::after {
  transform: none !important;
  opacity: 0 !important;
}

/* ===========================================================
   VIEW OUR WORK — SIRF TEXT WHITE ON HOVER
   =========================================================== */

.hero__actions .cta--ghost:hover {
  background: inherit !important;
  border-color: inherit !important;
  color: #ffffff !important;
  box-shadow: none !important;
  animation: none !important;
}

.hero__actions .cta--ghost:hover .cta__text {
  color: #ffffff !important;
  transform: none !important;
}

body.light-mode .hero__actions .cta--ghost:hover,
body.light-mode .hero__actions .cta--ghost:hover .cta__text {
  color: #ffffff !important;
  background: inherit !important;
  border-color: inherit !important;
}

/* ===========================================================
   RGB WORDS — KEEP CURSOR SMALL
   Cursor must NOT become large over RGB words
   =========================================================== */

.rgb-word,
.rgb-word:hover {
  cursor: none !important;
}

/* Disable the large cursor state ONLY over RGB words */
body:has(.rgb-word:hover) .cursor.is-hover .cursor__dot,
body:has(.rgb-word:hover) .cursor.is-hover-lg .cursor__dot {
  width: 8px !important;
  height: 8px !important;

  background: #f4f3ef !important;

  border: 1px solid #f4f3ef !important;

  box-shadow:
    0 0 8px rgba(244, 243, 239, .3),
    0 0 18px rgba(244, 243, 239, .06) !important;

  transform: translate(-50%, -50%) !important;
}

body:has(.rgb-word:hover) .cursor.is-hover .cursor__ring,
body:has(.rgb-word:hover) .cursor.is-hover-lg .cursor__ring {
  display: none !important;
}

/* Light mode */
body.light-mode:has(.rgb-word:hover) .cursor.is-hover .cursor__dot,
body.light-mode:has(.rgb-word:hover) .cursor.is-hover-lg .cursor__dot {
  width: 8px !important;
  height: 8px !important;

  background: #080808 !important;

  border-color: #080808 !important;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .05),
    0 0 10px rgba(0, 0, 0, .12) !important;
}

body.light-mode:has(.rgb-word:hover) .cursor.is-hover .cursor__ring,
body.light-mode:has(.rgb-word:hover) .cursor.is-hover-lg .cursor__ring {
  display: none !important;
}

/* ===========================================================
   PREMIUM HOVER CURSOR — VISIBLE TRANSPARENT GRAY FILL
   =========================================================== */

/* ===========================================================
   DARK MODE
   =========================================================== */

.cursor.is-hover .cursor__dot {
  background:
    radial-gradient(circle,
      rgba(185, 185, 185, 0.125) 0%,
      rgba(175, 175, 175, 0.105) 38%,
      rgba(160, 160, 160, 0.075) 62%,
      rgba(145, 145, 145, 0.040) 82%,
      rgba(130, 130, 130, 0.020) 100%) !important;

  border:
    1px solid rgba(220, 220, 220, 0.30) !important;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.028),
    0 0 22px rgba(180, 180, 180, 0.065),
    inset 0 0 22px rgba(255, 255, 255, 0.038) !important;
}


/* ===========================================================
   INNER RING
   =========================================================== */

.cursor.is-hover .cursor__ring {
  background:
    transparent !important;

  border-color:
    rgba(220, 220, 220, 0.74) !important;

  box-shadow:
    0 0 15px rgba(190, 190, 190, 0.11),
    inset 0 0 9px rgba(255, 255, 255, 0.028) !important;
}


/* ===========================================================
   LARGE HOVER CURSOR
   =========================================================== */

.cursor.is-hover-lg .cursor__dot {
  background:
    radial-gradient(circle,
      rgba(185, 185, 185, 0.140) 0%,
      rgba(175, 175, 175, 0.118) 38%,
      rgba(160, 160, 160, 0.082) 62%,
      rgba(145, 145, 145, 0.045) 82%,
      rgba(130, 130, 130, 0.022) 100%) !important;

  border-color:
    rgba(225, 225, 225, 0.33) !important;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.032),
    0 0 26px rgba(180, 180, 180, 0.075),
    inset 0 0 26px rgba(255, 255, 255, 0.042) !important;
}


/* ===========================================================
   LIGHT MODE
   =========================================================== */

body.light-mode .cursor.is-hover .cursor__dot {
  background:
    radial-gradient(circle,
      rgba(80, 80, 80, 0.085) 0%,
      rgba(90, 90, 90, 0.068) 40%,
      rgba(100, 100, 100, 0.045) 64%,
      rgba(110, 110, 110, 0.025) 84%,
      rgba(120, 120, 120, 0.012) 100%) !important;

  border-color:
    rgba(50, 50, 50, 0.26) !important;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.020),
    0 0 20px rgba(0, 0, 0, 0.055),
    inset 0 0 20px rgba(0, 0, 0, 0.022) !important;
}


/* ===========================================================
   LIGHT MODE — INNER RING
   =========================================================== */

body.light-mode .cursor.is-hover .cursor__ring {
  background:
    transparent !important;

  border-color:
    rgba(20, 20, 20, 0.72) !important;

  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.075),
    inset 0 0 9px rgba(0, 0, 0, 0.020) !important;
}


/* ===========================================================
   LIGHT MODE — LARGE HOVER CURSOR
   =========================================================== */

body.light-mode .cursor.is-hover-lg .cursor__dot {
  background:
    radial-gradient(circle,
      rgba(80, 80, 80, 0.095) 0%,
      rgba(90, 90, 90, 0.075) 40%,
      rgba(100, 100, 100, 0.050) 64%,
      rgba(110, 110, 110, 0.028) 84%,
      rgba(120, 120, 120, 0.014) 100%) !important;

  border-color:
    rgba(30, 30, 30, 0.30) !important;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.022),
    0 0 24px rgba(0, 0, 0, 0.06),
    inset 0 0 24px rgba(0, 0, 0, 0.024) !important;
}

/* =========================================================
   METAMORPH — WORK / SELECTED WORK
   MONOCHROME / GEOMETRIC / MINIMAL
   RGB INTERACTIONS / DEEP PARALLAX MARQUEE
   ========================================================= */

.work {
  --work-bg: #090909;
  --work-bg-deep: #050505;

  --work-white: #f2f2ef;
  --work-light: #bdbdb9;
  --work-gray: #777774;
  --work-dark-gray: #4b4b49;
  --work-muted: #8a8a85;

  /* subtle RGB accents */
  --work-cyan: #42ddff;
  --work-blue: #6888ff;
  --work-purple: #9a72ff;
  --work-pink: #ff638f;

  --work-line: rgba(242, 242, 239, .085);
  --work-line-soft: rgba(242, 242, 239, .040);

  --work-gutter-local:
    max(var(--gutter, 28px),
      calc((100vw - 1380px) / 2));

  position: relative;
  isolation: isolate;

  min-height: 100vh;

  overflow: hidden;

  padding:
    clamp(82px, 9vw, 140px) 0 clamp(48px, 6vw, 90px);

  color: var(--work-white);

  background:
    radial-gradient(circle at 76% 10%,
      rgba(255, 255, 255, .026),
      transparent 28%),
    linear-gradient(180deg,
      var(--work-bg),
      var(--work-bg-deep));
}


/* =========================================================
   SECTION EDGES
   ========================================================= */

.work::before,
.work::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  pointer-events: none;

  z-index: 30;
}

.work::before {
  top: 0;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(242, 242, 239, .08) 25%,
      rgba(242, 242, 239, .18) 50%,
      rgba(242, 242, 239, .08) 75%,
      transparent);

  animation:
    workEdgePulse 8s ease-in-out infinite;
}

.work::after {
  bottom: 0;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(242, 242, 239, .06),
      transparent);
}


/* =========================================================
   BACKGROUND SCENE
   ========================================================= */

.work__scene {
  position: absolute;

  inset: 0;

  z-index: -4;

  overflow: hidden;

  pointer-events: none;

  perspective: 1800px;

  transform-style: preserve-3d;
}

.work__scene-layer {
  position: absolute;

  inset: -9%;

  transform-style: preserve-3d;

  pointer-events: none;

  will-change: transform;
}

.work__scene-layer--far {
  opacity: .34;

  transform:
    translate3d(0,
      0,
      -170px) scale(1.10);
}

.work__scene-layer--mid {
  opacity: .24;

  transform:
    translate3d(0,
      0,
      -70px) scale(1.05);
}

.work__scene-layer--near {
  opacity: .17;

  transform:
    translate3d(0,
      0,
      25px) scale(1.015);
}


/* =========================================================
   NOTEBOOK GRID
   ========================================================= */

.work__grid {
  position: absolute;

  inset: -10%;

  background-image:
    linear-gradient(to right,
      rgba(242, 242, 239, .020) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      rgba(242, 242, 239, .020) 1px,
      transparent 1px);

  background-size:
    29px 29px,
    29px 29px;

  transform:
    perspective(1100px) rotateX(70deg) scale(1.18);

  mask-image:
    radial-gradient(ellipse at center,
      black 18%,
      rgba(0, 0, 0, .68) 55%,
      transparent 88%);

  -webkit-mask-image:
    radial-gradient(ellipse at center,
      black 18%,
      rgba(0, 0, 0, .68) 55%,
      transparent 88%);
}

.work__grid--far {
  background-size:
    46px 46px,
    46px 46px;

  opacity: .15;

  transform:
    perspective(1220px) rotateX(76deg) translateY(12%) translateZ(-130px) scale(1.30);
}

.work__grid--mid {
  background-size:
    29px 29px,
    29px 29px;

  opacity: .20;

  transform:
    perspective(1100px) rotateX(72deg) translateY(5%) translateZ(-56px) scale(1.20);
}

.work__grid--near {
  background-size:
    23px 23px,
    23px 23px;

  opacity: .13;

  transform:
    perspective(1040px) rotateX(68deg) translateZ(18px) scale(1.12);
}


/* =========================================================
   MONOCHROME LIGHT
   ========================================================= */

.work__glow {
  position: absolute;

  width:
    clamp(260px, 36vw, 560px);

  aspect-ratio: 1;

  border-radius: 50%;

  filter: blur(74px);

  pointer-events: none;
}

.work__glow--far {
  right: -10%;
  top: 3%;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .034),
      transparent 70%);
}

.work__glow--mid {
  left: -10%;
  bottom: -15%;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .016),
      transparent 70%);
}


/* =========================================================
   SCENE LINES
   ========================================================= */

.work__line {
  position: absolute;

  pointer-events: none;

  opacity: .075;
}

.work__line--v1,
.work__line--v2 {
  top: -12%;
  bottom: -12%;

  width: 1px;

  background:
    linear-gradient(180deg,
      transparent,
      rgba(242, 242, 239, .22),
      transparent);
}

.work__line--v1 {
  left: 27%;
}

.work__line--v2 {
  right: 22%;

  opacity: .05;
}

.work__line--h1,
.work__line--h2 {
  left: -10%;
  right: -10%;

  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(242, 242, 239, .16),
      transparent);
}

.work__line--h1 {
  top: 31%;
}

.work__line--h2 {
  bottom: 29%;

  opacity: .04;
}


/* =========================================================
   VIGNETTE
   ========================================================= */

.work__vignette {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(ellipse at center,
      transparent 28%,
      rgba(0, 0, 0, .10) 58%,
      rgba(0, 0, 0, .52) 100%);
}


/* =========================================================
   INNER
   ========================================================= */

.work__inner {
  position: relative;

  z-index: 3;

  width: 100%;

  max-width: 1500px;

  margin: 0 auto;

  padding:
    0 var(--work-gutter-local);
}


/* =========================================================
   HEADER
   ========================================================= */

.work__header {
  position: relative;

  margin-bottom:
    clamp(44px, 5vw, 70px);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.work__eyebrow {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom:
    clamp(24px, 2.6vw, 37px);

  color: var(--work-gray);

  font-size: 10px;

  letter-spacing: .14em;
}

.work__eyebrow-line {
  position: relative;

  width:
    clamp(30px, 3.6vw, 55px);

  height: 1px;

  overflow: hidden;

  background:
    rgba(242, 242, 239, .14);
}

.work__eyebrow-line::after {
  content: "";

  position: absolute;

  left: -100%;
  top: 0;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(242, 242, 239, .70),
      transparent);

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

.work__eyebrow-year {
  margin-left: auto;

  opacity: .40;

  transition:
    opacity .35s ease,
    letter-spacing .35s ease,
    color .35s ease,
    text-shadow .35s ease;
}

.work__eyebrow:hover .work__eyebrow-year {
  opacity: .72;

  letter-spacing: .17em;

  color:
    var(--work-cyan);

  text-shadow:
    0 0 12px rgba(66, 221, 255, .12);
}


/* =========================================================
   HEADER ROW
   ========================================================= */

.work__header-row {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.02fr) minmax(390px, .82fr);

  align-items: center;

  gap:
    clamp(35px, 5vw, 88px);
}


/* =========================================================
   HEADING COPY
   ========================================================= */

.work__heading-copy {
  position: relative;

  z-index: 4;

  max-width: 850px;
}


/* =========================================================
   HEADING GRID
   ========================================================= */

.work__heading-copy::before {
  content: "";

  position: absolute;

  left: -60px;
  top: -65px;

  width:
    calc(100% + 120px);

  height:
    calc(100% + 130px);

  z-index: -2;

  background-image:
    linear-gradient(to right,
      rgba(242, 242, 239, .026) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      rgba(242, 242, 239, .026) 1px,
      transparent 1px);

  background-size:
    23px 23px,
    23px 23px;

  mask-image:
    radial-gradient(ellipse at center,
      black 5%,
      rgba(0, 0, 0, .82) 47%,
      transparent 94%);

  -webkit-mask-image:
    radial-gradient(ellipse at center,
      black 5%,
      rgba(0, 0, 0, .82) 47%,
      transparent 94%);

  transform:
    translate3d(calc(var(--heading-mx, 0px) * .18),
      calc(var(--heading-my, 0px) * .18),
      0);

  opacity: .64;

  pointer-events: none;

  animation:
    headingGridDrift 18s linear infinite;
}


/* =========================================================
   TITLE
   ========================================================= */

.work__title {
  display: flex;

  flex-direction: column;

  margin: 0;

  font-family:
    'Unbounded',
    sans-serif;

  font-size:
    clamp(40px, 6.45vw, 105px);

  font-weight: 800;

  line-height: .90;

  letter-spacing: -.075em;

  text-transform: uppercase;
}

.work__title>span {
  position: relative;

  display: block;

  width: fit-content;

  animation:
    titleReveal 1.05s cubic-bezier(.16, 1, .3, 1) both;
}

.work__title>span:first-child {
  animation-delay: .04s;
}

.work__title>span:last-child {
  animation-delay: .13s;
}


/* =========================================================
   MONOCHROME TITLE
   ========================================================= */

.work__title>span:first-child::before {
  content: "FROM VISION";

  position: absolute;

  inset: 0;

  z-index: -1;

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

  opacity: .07;

  transform:
    translate3d(1px, 0, 0);
}


/* =========================================================
   TO CREATION — SUBTLE RGB
   ========================================================= */

.work__title-accent {
  color:
    transparent;

  background:
    linear-gradient(100deg,
      #f2f2ef 0%,
      #f2f2ef 16%,
      var(--work-cyan) 32%,
      var(--work-blue) 46%,
      var(--work-purple) 61%,
      var(--work-pink) 77%,
      #f2f2ef 94%);

  background-size:
    240% 100%;

  background-position:
    100% 50%;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation:
    titleReveal 1.05s cubic-bezier(.16, 1, .3, 1) both,
    titleRGBShift 9s ease-in-out infinite;
}

.work__title>span::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -8px;

  width: 0;

  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(242, 242, 239, .68),
      transparent);

  opacity: .38;

  transition:
    width .65s cubic-bezier(.16, 1, .3, 1),
    background .45s ease,
    box-shadow .45s ease;
}

.work__title:hover>span::after {
  width: 82%;

  background:
    linear-gradient(90deg,
      transparent,
      var(--work-cyan),
      var(--work-purple),
      var(--work-pink),
      transparent);

  box-shadow:
    0 0 14px rgba(117, 111, 255, .10);
}


/* =========================================================
   INTRO
   ========================================================= */

.work__intro {
  max-width: 510px;

  margin: 23px 0 0;

  color: var(--work-muted);

  font-family:
    'Manrope',
    sans-serif;

  font-size:
    clamp(13px, 1.08vw, 16px);

  line-height: 1.7;

  transition:
    color .35s ease;
}

.work__heading-copy:hover .work__intro {
  color:
    var(--work-light);
}


/* =========================================================
   TRIANGLE ZONE
   IMPORTANT:
   NO BOX
   NO BORDER
   NO PANEL
   ========================================================= */

.work__visual {
  position: relative;

  width: 100%;

  height:
    clamp(340px, 33vw, 470px);

  min-height: 320px;

  overflow: visible;

  isolation: isolate;

  perspective: 1500px;

  transform-style: preserve-3d;

  border: 0 !important;

  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  pointer-events: none;
}


/* =========================================================
   VISUAL GRID
   ========================================================= */

.work__visual-grid {
  position: absolute;

  inset: -26%;

  z-index: -4;

  background-image:
    linear-gradient(to right,
      rgba(242, 242, 239, .022) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      rgba(242, 242, 239, .022) 1px,
      transparent 1px);

  background-size:
    21px 21px,
    21px 21px;

  transform:
    translate3d(calc(var(--visual-mx, 0px) * .13),
      calc(var(--visual-my, 0px) * .13),
      -120px) perspective(950px) rotateX(61deg) rotateZ(-7deg) scale(1.38);

  opacity: .22;

  mask-image:
    radial-gradient(ellipse at center,
      black 4%,
      rgba(0, 0, 0, .55) 45%,
      transparent 90%);

  -webkit-mask-image:
    radial-gradient(ellipse at center,
      black 4%,
      rgba(0, 0, 0, .55) 45%,
      transparent 90%);

  animation:
    visualGridDrift 22s linear infinite;
}


/* =========================================================
   DEPTH PLANES
   ========================================================= */

.work__visual-grid-plane {
  position: absolute;

  inset: -20%;

  pointer-events: none;

  background-image:
    linear-gradient(to right,
      rgba(242, 242, 239, .013) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      rgba(242, 242, 239, .013) 1px,
      transparent 1px);

  background-size:
    18px 18px,
    18px 18px;
}

.work__visual-grid-plane--back {
  opacity: .12;

  transform:
    perspective(1100px) rotateX(74deg) translate3d(calc(var(--visual-mx, 0px) * .09),
      calc(var(--visual-my, 0px) * .09),
      -150px) scale(1.52);
}

.work__visual-grid-plane--mid {
  opacity: .07;

  transform:
    perspective(1050px) rotateX(68deg) rotateZ(4deg) translate3d(calc(var(--visual-mx, 0px) * .18),
      calc(var(--visual-my, 0px) * .18),
      -65px) scale(1.30);
}

.work__visual-grid-plane--front {
  opacity: .035;

  transform:
    perspective(1000px) rotateX(63deg) rotateZ(-3deg) translate3d(calc(var(--visual-mx, 0px) * .28),
      calc(var(--visual-my, 0px) * .28),
      0) scale(1.18);
}


/* =========================================================
   SUBTLE CENTER ATMOSPHERE
   ========================================================= */

.work__visual::before {
  content: "";

  position: absolute;

  inset: -25%;

  z-index: -5;

  pointer-events: none;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, .036),
      transparent 30%),
    radial-gradient(circle at 30% 50%,
      rgba(255, 255, 255, .012),
      transparent 24%),
    radial-gradient(circle at 70% 50%,
      rgba(255, 255, 255, .010),
      transparent 24%);

  filter: blur(30px);

  transform:
    translate3d(calc(var(--visual-mx, 0px) * .08),
      calc(var(--visual-my, 0px) * .08),
      0);
}


/* =========================================================
   OPTIONAL CONSTRUCTION LINES
   ========================================================= */

.work__visual-line {
  position: absolute;

  pointer-events: none;

  background:
    rgba(242, 242, 239, .32);

  opacity: .055;
}

.work__visual-line--vertical-1,
.work__visual-line--vertical-2,
.work__visual-line--vertical-3 {
  top: -12%;

  bottom: -12%;

  width: 1px;
}

.work__visual-line--vertical-1 {
  left: 16%;
}

.work__visual-line--vertical-2 {
  left: 50%;

  opacity: .075;
}

.work__visual-line--vertical-3 {
  right: 15%;

  opacity: .035;
}

.work__visual-line--horizontal-1,
.work__visual-line--horizontal-2,
.work__visual-line--horizontal-3 {
  left: -10%;

  right: -10%;

  height: 1px;
}

.work__visual-line--horizontal-1 {
  top: 23%;
}

.work__visual-line--horizontal-2 {
  top: 50%;

  opacity: .045;
}

.work__visual-line--horizontal-3 {
  bottom: 21%;

  opacity: .028;
}


/* =========================================================
   MAIN TRIANGLE
   CLEAN GEOMETRIC FORM
   ========================================================= */

.work__visual-triangle {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    clamp(190px, 19vw, 285px);

  aspect-ratio: 1;

  pointer-events: none;

  transform-style: preserve-3d;

  will-change: transform;

  background: transparent;
}


/* =========================================================
   BACK TRIANGLE — VERY SUBTLE DEPTH
   ========================================================= */

.work__visual-triangle--back {
  transform:
    translate3d(calc(-50% + var(--visual-mx, 0px) * .66),
      calc(-50% + var(--visual-my, 0px) * .66),
      -50px) rotateZ(-6deg) scale(1.045);

  opacity: .075;

  animation: none;
}


/* =========================================================
   MAIN TRIANGLE
   ========================================================= */

.work__visual-triangle--mid {
  transform:
    translate3d(calc(-50% + var(--visual-mx, 0px) * .92),
      calc(-50% + var(--visual-my, 0px) * .92),
      0) rotateZ(0deg) scale(1);

  opacity: .76;

  animation: none;
}


/* =========================================================
   TRIANGLE EDGES
   ========================================================= */

.work__triangle-edge {
  position: absolute;

  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(242, 242, 239, .78),
      transparent);

  opacity: .70;

  transform-origin: left center;

  pointer-events: none;

  transition:
    background .45s ease,
    opacity .35s ease,
    box-shadow .45s ease;
}


/* subtle RGB reaction */

.work__visual:hover .work__triangle-edge {
  background:
    linear-gradient(90deg,
      transparent,
      var(--work-cyan),
      var(--work-purple),
      var(--work-pink),
      transparent);

  opacity: .84;

  box-shadow:
    0 0 9px rgba(112, 112, 255, .10);
}


/* left edge */

.work__triangle-edge:nth-child(1) {
  width: 86%;

  left: 50%;

  top: 0;

  transform:
    rotate(120deg);
}


/* right edge */

.work__triangle-edge:nth-child(2) {
  width: 86%;

  left: 50%;

  top: 0;

  transform:
    rotate(60deg);
}


/* bottom edge */

.work__triangle-edge:nth-child(3) {
  left: 7%;

  top: 74%;

  width: 86%;

  height: 1px;

  transform: rotate(0deg);

  opacity: .56;
}


/* =========================================================
   REMOVE OLD HEAVY 3D SYSTEM
   ========================================================= */

.work__visual-prism,
.work__visual-wire,
.work__visual-orbit,
.work__visual-axis,
.work__visual-block,
.work__visual-node {
  display: none !important;
}


/* =========================================================
   CORE
   ========================================================= */

.work__prism-core {
  position: absolute;

  left: 50%;
  top: 47%;

  width:
    clamp(7px, .55vw, 10px);

  aspect-ratio: 1;

  border-radius: 50%;

  transform:
    translate3d(calc(-50% + var(--core-x, 0px)),
      calc(-50% + var(--core-y, 0px)),
      0);

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .35) 32%,
      transparent 76%);

  box-shadow:
    0 0 12px rgba(255, 255, 255, .12);

  pointer-events: none;

  animation: none;

  transition:
    background .45s ease,
    box-shadow .45s ease;
}

.work__visual:hover .work__prism-core {
  background:
    radial-gradient(circle,
      #ffffff 0%,
      var(--work-cyan) 26%,
      var(--work-purple) 52%,
      var(--work-pink) 72%,
      transparent 78%);

  box-shadow:
    0 0 13px rgba(66, 221, 255, .20),
    0 0 25px rgba(154, 114, 255, .13),
    0 0 35px rgba(255, 99, 143, .07);
}


/* =========================================================
   LABELS
   ========================================================= */

.work__visual-label {
  position: absolute;

  z-index: 8;

  color:
    rgba(242, 242, 239, .20);

  font-size: 8px;

  letter-spacing: .15em;

  white-space: nowrap;

  transition:
    color .35s ease,
    letter-spacing .35s ease,
    text-shadow .35s ease;
}

.work__visual-label--top {
  top: 16px;
  left: 18px;
}

.work__visual-label--bottom {
  left: 18px;
  bottom: 16px;
}

.work__visual-label--left {
  left: 10px;
  top: 50%;

  transform:
    rotate(-90deg) translateX(-50%);

  transform-origin:
    left center;
}

.work__visual-label--right {
  right: 10px;
  top: 50%;

  transform:
    rotate(90deg) translateX(50%);

  transform-origin:
    right center;
}

.work__visual:hover .work__visual-label {
  color:
    rgba(151, 220, 255, .54);

  letter-spacing: .17em;

  text-shadow:
    0 0 10px rgba(66, 221, 255, .08);
}


/* =========================================================
   HORIZONTAL WORK VIEWPORT
   ========================================================= */

.work__viewport {
  position: relative;

  width: 100%;

  height:
    clamp(445px, 43vw, 545px);

  overflow: hidden;

  border-top:
    1px solid var(--work-line);

  border-bottom:
    1px solid var(--work-line);

  overscroll-behavior: none;

  scrollbar-width: none;

  -ms-overflow-style: none;

  cursor: none !important;

  background:
    rgba(255, 255, 255, .001);

  transition:
    border-color .4s ease;
}

.work__viewport::-webkit-scrollbar {
  display: none;
}

.work__viewport.is-horizontal-lock {
  border-color:
    rgba(126, 133, 255, .18);
}


/* =========================================================
   TRACK
   ========================================================= */

.work__track {
  position: absolute;

  left: 0;
  top: 0;

  display: flex;

  align-items: stretch;

  gap:
    clamp(14px, 1.6vw, 22px);

  width: max-content;

  height: 100%;

  padding:
    18px var(--work-gutter-local) 24px;

  transform:
    translate3d(var(--work-track-x, 0px),
      0,
      0);

  will-change: transform;

  backface-visibility: hidden;
}


/* =========================================================
   CARDS
   ========================================================= */

.work-card {
  position: relative;

  flex:
    0 0 clamp(295px, 29vw, 410px);

  height:
    calc(100% - 16px);

  min-height: 400px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  padding:
    clamp(22px, 2.2vw, 32px);

  color:
    var(--work-white);

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .029),
      rgba(255, 255, 255, .005));

  border:
    1px solid rgba(242, 242, 239, .075);

  box-shadow:
    0 22px 48px rgba(0, 0, 0, .075);

  transform:
    translate3d(var(--card-stack-x, 0px),
      var(--card-stack-y, 0px),
      var(--card-stack-z, 0px)) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) scale(var(--card-scale, .94));

  transform-style:
    preserve-3d;

  opacity:
    var(--card-opacity, .38);

  filter:
    blur(var(--card-blur, 0px));

  transition:
    border-color .35s ease,
    background .35s ease,
    box-shadow .45s ease,
    filter .38s ease;

  will-change:
    transform,
    opacity,
    filter;

  backface-visibility: hidden;
}


/* =========================================================
   CARD INTERNAL GRID
   ========================================================= */

.work-card::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background-image:
    linear-gradient(to right,
      rgba(242, 242, 239, .012) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      rgba(242, 242, 239, .012) 1px,
      transparent 1px);

  background-size:
    24px 24px;

  opacity: .34;

  pointer-events: none;
}


/* subtle RGB card edge */

.work-card::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      var(--work-cyan) 26%,
      var(--work-purple) 55%,
      var(--work-pink) 78%,
      transparent);

  opacity: .08;

  transform:
    scaleX(.42);

  transform-origin: center;

  transition:
    opacity .45s ease,
    transform .55s cubic-bezier(.16, 1, .3, 1);

  pointer-events: none;
}

.work-card:hover::after,
.work-card.is-active::after {
  opacity: .72;

  transform:
    scaleX(1);
}


/* =========================================================
   CARD TOP MONOCHROME
   ========================================================= */

.work-card__top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding-bottom: 18px;

  border-bottom:
    1px solid rgba(242, 242, 239, .058);

  color:
    var(--work-dark-gray);

  font-size: 9px;

  letter-spacing: .14em;

  transition:
    color .3s ease,
    border-color .3s ease;
}

.work-card.is-active .work-card__top,
.work-card:hover .work-card__top {
  color:
    rgba(242, 242, 239, .58);

  border-color:
    rgba(117, 125, 255, .14);
}

.work-card__index {
  transition:
    color .3s ease,
    letter-spacing .3s ease,
    text-shadow .3s ease;
}

.work-card:hover .work-card__index {
  color:
    var(--work-cyan);

  letter-spacing: .17em;

  text-shadow:
    0 0 12px rgba(66, 221, 255, .10);
}


/* =========================================================
   ICON
   ========================================================= */

.work-card__icon {
  display: grid;

  place-items: center;

  width: 54px;
  height: 54px;

  margin:
    21px 0 18px;

  border:
    1px solid rgba(242, 242, 239, .08);

  background:
    rgba(255, 255, 255, .005);

  transform:
    translateZ(12px);

  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.work-card:hover .work-card__icon {
  transform:
    translate3d(3px, -3px, 17px);

  border-color:
    rgba(83, 211, 255, .30);

  background:
    linear-gradient(145deg,
      rgba(66, 221, 255, .025),
      rgba(154, 114, 255, .025));

  box-shadow:
    0 0 16px rgba(74, 177, 255, .035);
}

.work-card__icon svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.35;

  color:
    rgba(242, 242, 239, .58);

  transition:
    color .3s ease,
    transform .4s ease,
    filter .35s ease;
}

.work-card:hover .work-card__icon svg {
  color:
    var(--work-cyan);

  transform:
    scale(1.045);

  filter:
    drop-shadow(0 0 5px rgba(66, 221, 255, .10));
}


/* =========================================================
   CARD BODY
   ========================================================= */

.work-card__body {
  flex: 1;

  transform:
    translateZ(8px);
}

.work-card__eyebrow {
  display: block;

  margin-bottom: 11px;

  color:
    rgba(242, 242, 239, .30);

  font-size: 9px;

  letter-spacing: .14em;

  transition:
    color .3s ease;
}

.work-card:hover .work-card__eyebrow {
  color:
    rgba(127, 222, 255, .62);
}

.work-card h3 {
  margin: 0;

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size:
    clamp(27px, 2.4vw, 37px);

  line-height: 1.03;

  letter-spacing: -.045em;

  font-weight: 700;

  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    color .35s ease,
    text-shadow .35s ease;
}

.work-card h3 span {
  display: block;

  margin-top: 3px;

  color:
    rgba(242, 242, 239, .30);

  font-weight: 500;

  transition:
    color .3s ease,
    transform .4s ease;
}

.work-card:hover h3 {
  transform:
    translate3d(4px, -2px, 7px);

  text-shadow:
    0 0 18px rgba(113, 122, 255, .06);
}

.work-card:hover h3 span {
  color:
    rgba(162, 180, 255, .62);

  transform:
    translateX(4px);
}

.work-card__body p {
  max-width: 34em;

  margin:
    17px 0 0;

  color:
    rgba(242, 242, 239, .40);

  font-size: 13px;

  line-height: 1.68;

  transition:
    color .3s ease;
}

.work-card:hover .work-card__body p {
  color:
    rgba(242, 242, 239, .54);
}


/* =========================================================
   META
   ========================================================= */

.work-card__meta {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 17px;
}

.work-card__meta span {
  display: inline-flex;

  align-items: center;

  min-height: 24px;

  padding:
    5px 8px;

  border:
    1px solid rgba(242, 242, 239, .052);

  background:
    rgba(255, 255, 255, .004);

  color:
    rgba(242, 242, 239, .33);

  font-size: 9px;

  transition:
    color .3s ease,
    border-color .3s ease,
    transform .3s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.work-card__meta span:hover {
  color:
    #e8ecff;

  border-color:
    rgba(118, 131, 255, .29);

  background:
    linear-gradient(135deg,
      rgba(66, 221, 255, .035),
      rgba(154, 114, 255, .04),
      rgba(255, 99, 143, .02));

  transform:
    translateY(-2px);

  box-shadow:
    0 0 14px rgba(101, 115, 255, .035);
}


/* =========================================================
   RATING
   ========================================================= */

.work-card__rating {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 15px;

  padding-top: 13px;

  border-top:
    1px solid rgba(242, 242, 239, .04);
}

.work-card__rating span {
  color:
    rgba(242, 242, 239, .25);

  font-size: 9px;

  letter-spacing: .11em;
}

.work-card__rating strong {
  color:
    rgba(242, 242, 239, .70);

  font-family:
    'Space Mono',
    monospace;

  font-size: 13px;

  font-weight: 400;

  transition:
    color .3s ease,
    text-shadow .35s ease;
}

.work-card:hover .work-card__rating strong {
  color:
    var(--work-purple);

  text-shadow:
    0 0 12px rgba(154, 114, 255, .12);
}


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

.work-card__footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: auto;

  padding-top: 18px;

  border-top:
    1px solid rgba(242, 242, 239, .058);

  transform:
    translateZ(13px);

  transition:
    border-color .3s ease;
}

.work-card:hover .work-card__footer {
  border-color:
    rgba(116, 128, 255, .16);
}

.work-card__footer .mono {
  color:
    rgba(242, 242, 239, .34);

  font-size: 9px;

  letter-spacing: .14em;

  transition:
    color .3s ease,
    text-shadow .3s ease;
}

.work-card:hover .work-card__footer .mono {
  color:
    rgba(159, 220, 255, .62);

  text-shadow:
    0 0 11px rgba(66, 221, 255, .08);
}

.work-card__arrow {
  display: grid;

  place-items: center;

  width: 33px;
  height: 33px;

  border:
    1px solid rgba(242, 242, 239, .08);

  color:
    rgba(242, 242, 239, .48);

  font-size: 17px;

  transition:
    transform .4s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease,
    color .3s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.work-card:hover .work-card__arrow {
  transform:
    translate3d(3px, -3px, 0);

  border-color:
    rgba(154, 114, 255, .34);

  color:
    #ffffff;

  background:
    linear-gradient(135deg,
      rgba(66, 221, 255, .05),
      rgba(154, 114, 255, .06),
      rgba(255, 99, 143, .035));

  box-shadow:
    0 0 15px rgba(118, 112, 255, .045);
}


/* =========================================================
   EDGE FADES
   ========================================================= */

.work__edge-fade {
  position: absolute;

  top: 0;
  bottom: 0;

  width:
    clamp(35px, 6vw, 100px);

  z-index: 10;

  pointer-events: none;
}

.work__edge-fade--left {
  left: 0;

  background:
    linear-gradient(90deg,
      var(--work-bg),
      transparent);
}

.work__edge-fade--right {
  right: 0;

  background:
    linear-gradient(270deg,
      var(--work-bg),
      transparent);
}


/* =========================================================
   HORIZONTAL HINT
   ========================================================= */

.work__horizontal-hint {
  position: absolute;

  left: 50%;
  bottom: 10px;

  z-index: 12;

  display: flex;

  align-items: center;

  gap: 12px;

  padding:
    6px 12px;

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

  background:
    rgba(8, 8, 8, .34);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  transform:
    translateX(-50%);

  color:
    rgba(242, 242, 239, .29);

  font-size: 8px;

  letter-spacing: .13em;

  transition:
    color .3s ease,
    border-color .3s ease,
    box-shadow .35s ease;
}

.work__viewport:hover .work__horizontal-hint {
  color:
    rgba(174, 215, 255, .68);

  border-color:
    rgba(103, 126, 255, .19);

  box-shadow:
    0 0 16px rgba(104, 117, 255, .035);
}

.work__hint-arrow {
  color:
    rgba(242, 242, 239, .62);

  animation:
    hintArrow 2s ease-in-out infinite;

  transition:
    color .3s ease,
    filter .3s ease;
}

.work__viewport:hover .work__hint-arrow {
  color:
    var(--work-cyan);

  filter:
    drop-shadow(0 0 5px rgba(66, 221, 255, .12));
}

.work__hint-arrow:last-child {
  animation-delay: -1s;
}


/* =========================================================
   PROOF
   ========================================================= */

.work__proof {
  position: relative;

  margin-top:
    clamp(68px, 8vw, 115px);

  padding-top:
    clamp(23px, 2.5vw, 35px);

  border-top:
    1px solid var(--work-line);
}

.work__proof-heading {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom:
    clamp(24px, 2.8vw, 38px);

  color:
    rgba(242, 242, 239, .31);

  font-size: 9px;

  letter-spacing: .14em;
}

.work__proof-grid {
  display: grid;

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

  border:
    1px solid rgba(242, 242, 239, .06);

  border-right: 0;
  border-bottom: 0;
}

.work-stat {
  position: relative;

  min-height: 150px;

  padding:
    clamp(21px, 2.5vw, 34px);

  border-right:
    1px solid rgba(242, 242, 239, .06);

  border-bottom:
    1px solid rgba(242, 242, 239, .06);

  background:
    rgba(255, 255, 255, .002);

  overflow: hidden;

  transition:
    background .35s ease,
    transform .4s cubic-bezier(.16, 1, .3, 1),
    border-color .35s ease,
    box-shadow .4s ease;
}

.work-stat::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 0;
  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(242, 242, 239, .58),
      transparent);

  transition:
    width .55s cubic-bezier(.16, 1, .3, 1),
    background .45s ease;
}

.work-stat:hover {
  background:
    linear-gradient(145deg,
      rgba(66, 221, 255, .012),
      rgba(154, 114, 255, .012),
      rgba(255, 99, 143, .006));

  transform:
    translateY(-3px);

  border-color:
    rgba(112, 123, 255, .14);

  box-shadow:
    0 0 24px rgba(105, 118, 255, .025);
}

.work-stat:hover::before {
  width: 100%;

  background:
    linear-gradient(90deg,
      transparent,
      var(--work-cyan),
      var(--work-purple),
      var(--work-pink),
      transparent);
}

.work-stat__value {
  display: flex;

  align-items: baseline;

  font-family:
    'Unbounded',
    sans-serif;

  font-size:
    clamp(32px, 4.5vw, 62px);

  font-weight: 600;

  line-height: 1;

  letter-spacing: -.06em;

  transition:
    color .35s ease,
    text-shadow .35s ease;
}

.work-stat:hover .work-stat__value {
  color:
    #f7f7ff;

  text-shadow:
    0 0 20px rgba(109, 114, 255, .055);
}

.work-stat__label {
  display: block;

  margin-top: 14px;

  color:
    rgba(242, 242, 239, .28);

  font-size: 9px;

  letter-spacing: .14em;

  transition:
    color .3s ease;
}

.work-stat:hover .work-stat__label {
  color:
    rgba(113, 216, 255, .57);
}


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

.work__proof-footer {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 18px;

  padding-top: 20px;
}

.work__proof-badge {
  display: inline-flex;

  align-items: center;

  min-height: 27px;

  padding:
    6px 10px;

  border:
    1px solid rgba(242, 242, 239, .09);

  color:
    rgba(242, 242, 239, .47);

  font-size: 9px;

  letter-spacing: .10em;

  transition:
    color .3s ease,
    border-color .3s ease,
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.work__proof-badge:hover {
  color:
    #ebedff;

  border-color:
    rgba(111, 126, 255, .28);

  background:
    linear-gradient(135deg,
      rgba(66, 221, 255, .03),
      rgba(154, 114, 255, .035),
      rgba(255, 99, 143, .015));

  transform:
    translateY(-2px);

  box-shadow:
    0 0 15px rgba(107, 119, 255, .035);
}

.work__proof-copy,
.work__proof-link {
  font-size: 9px;

  letter-spacing: .13em;

  color:
    rgba(242, 242, 239, .28);
}

.work__proof-link {
  transition:
    color .3s ease,
    transform .35s ease,
    text-shadow .35s ease;
}

.work__proof-link:hover {
  color:
    var(--work-purple);

  transform:
    translateX(3px);

  text-shadow:
    0 0 11px rgba(154, 114, 255, .12);
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.work__capabilities {
  position: relative;

  margin-top:
    clamp(68px, 8vw, 112px);

  overflow: hidden;
}


/* deep layer behind capabilities */

.work__capabilities::before {
  content: "";

  position: absolute;

  left: -20%;
  right: -20%;
  top: -90%;
  bottom: -90%;

  z-index: -3;

  background:
    radial-gradient(ellipse at 18% 50%,
      rgba(66, 221, 255, .035),
      transparent 28%),
    radial-gradient(ellipse at 50% 50%,
      rgba(154, 114, 255, .032),
      transparent 30%),
    radial-gradient(ellipse at 82% 50%,
      rgba(255, 99, 143, .025),
      transparent 28%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .012),
      transparent 38%,
      rgba(255, 255, 255, .008));

  transform:
    translate3d(calc(var(--heading-mx, 0px) * -.12),
      calc(var(--heading-my, 0px) * -.08),
      -180px) scale(1.16);

  filter:
    blur(1px);

  pointer-events: none;
}


/* =========================================================
   CAPABILITIES HEADER
   ========================================================= */

.work__capabilities-head {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;

  color:
    rgba(242, 242, 239, .31);

  font-size: 9px;

  letter-spacing: .14em;
}

.work__capabilities-rule {
  position: relative;

  height: 1px;

  overflow: hidden;

  background:
    linear-gradient(90deg,
      rgba(242, 242, 239, .08),
      transparent);
}

.work__capabilities-rule::after {
  content: "";

  position: absolute;

  inset: 0;

  width: 28%;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(85, 203, 255, .42),
      rgba(154, 114, 255, .30),
      transparent);

  animation:
    capabilitiesRuleSweep 5.5s ease-in-out infinite;
}


/* =========================================================
   WORK MARQUEE
   DEEP PARALLAX BACKGROUND
   ========================================================= */

.work__marquee {
  position: relative;

  height:
    clamp(52px, 4.8vw, 68px);

  overflow: hidden;

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

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

  background:
    rgba(255, 255, 255, .002);

  isolation: isolate;

  perspective: 1000px;

  transform-style: preserve-3d;

  -webkit-mask-image:
    linear-gradient(90deg,
      transparent,
      black 3%,
      black 97%,
      transparent);

  mask-image:
    linear-gradient(90deg,
      transparent,
      black 3%,
      black 97%,
      transparent);
}


/* deep moving grid */

.work__marquee::before {
  content: "";

  position: absolute;

  inset: -180%;

  z-index: -3;

  background-image:
    linear-gradient(90deg,
      rgba(66, 221, 255, .026) 1px,
      transparent 1px),
    linear-gradient(0deg,
      rgba(154, 114, 255, .022) 1px,
      transparent 1px);

  background-size:
    34px 34px,
    34px 34px;

  transform:
    perspective(900px) rotateX(68deg) rotateZ(-4deg) translate3d(calc(var(--marquee-mx, 0px) * .55),
      calc(var(--marquee-my, 0px) * .42),
      -220px) scale(1.45);

  opacity: .48;

  animation:
    marqueeGridDeep 22s linear infinite;

  will-change:
    transform;
}


/* secondary depth field */

.work__marquee::after {
  content: "";

  position: absolute;

  inset: -100%;

  z-index: -2;

  background:
    radial-gradient(ellipse at 22% 50%,
      rgba(66, 221, 255, .038),
      transparent 26%),
    radial-gradient(ellipse at 50% 50%,
      rgba(154, 114, 255, .034),
      transparent 28%),
    radial-gradient(ellipse at 78% 50%,
      rgba(255, 99, 143, .026),
      transparent 26%);

  transform:
    translate3d(calc(var(--marquee-mx, 0px) * -.26),
      calc(var(--marquee-my, 0px) * -.20),
      -110px) scale(1.12);

  filter:
    blur(22px);

  opacity: .55;

  pointer-events: none;
}


/* =========================================================
   GAPLESS MARQUEE
   ========================================================= */

.work__marquee-track {
  position: absolute;

  left: 0;
  top: 0;

  display: flex;

  align-items: center;

  width: max-content;

  height: 100%;

  gap: 0;

  padding: 0;

  will-change: transform;

  animation:
    workMarquee 31s linear infinite;
}

.work__marquee-set {
  display: flex;

  align-items: center;

  flex: 0 0 auto;

  width: max-content;

  height: 100%;

  gap: 0;

  padding: 0;
}


/* =========================================================
   MARQUEE WORDS
   SMALLER / CLEANER
   ========================================================= */

.work__marquee-set span {
  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  height: 100%;

  margin: 0;

  padding:
    0 clamp(16px, 1.7vw, 26px);

  font-family:
    'Unbounded',
    sans-serif;

  font-size:
    clamp(10px, .92vw, 14px);

  font-weight: 700;

  line-height: 1;

  letter-spacing: -.028em;

  text-transform: uppercase;

  white-space: nowrap;

  color:
    rgba(242, 242, 239, .54);

  transition:
    color .3s ease,
    text-shadow .35s ease;
}

.work__marquee-set span:nth-of-type(1) {
  color:
    rgba(242, 242, 239, .70);
}

.work__marquee-set span:nth-of-type(2) {
  color:
    rgba(242, 242, 239, .50);
}

.work__marquee-set span:nth-of-type(3) {
  color:
    rgba(242, 242, 239, .64);
}

.work__marquee-set span:nth-of-type(4) {
  color:
    rgba(242, 242, 239, .48);
}

.work__marquee-set span:nth-of-type(5) {
  color:
    rgba(242, 242, 239, .63);
}

.work__marquee-set span:nth-of-type(6) {
  color:
    rgba(242, 242, 239, .48);
}

.work__marquee-set span:nth-of-type(7) {
  color:
    rgba(242, 242, 239, .58);
}

.work__marquee-set span:nth-of-type(8) {
  color:
    rgba(242, 242, 239, .61);
}

.work__marquee-set span:nth-of-type(9) {
  color:
    rgba(242, 242, 239, .56);
}

.work__marquee-set span:nth-of-type(10) {
  color:
    rgba(242, 242, 239, .46);
}


/* subtle hover color, no distortion */

.work__marquee-set span:hover {
  color:
    #dbeeff;

  transform: none;

  text-shadow:
    0 0 14px rgba(90, 169, 255, .12);
}


/* =========================================================
   MARQUEE SEPARATORS
   ========================================================= */

.work__marquee-set svg {
  flex: 0 0 auto;

  width: 10px;
  height: 10px;

  fill: none;

  stroke:
    rgba(242, 242, 239, .23);

  stroke-width: 1.15;

  transition:
    stroke .3s ease,
    filter .3s ease;
}

.work__marquee-set svg:hover {
  stroke:
    var(--work-purple);

  transform:
    none;

  filter:
    drop-shadow(0 0 5px rgba(154, 114, 255, .12));
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

body.light-mode .work {
  --work-bg: #efeee9;
  --work-bg-deep: #e6e5df;

  --work-white: #171717;
  --work-light: #555555;
  --work-gray: #757575;
  --work-dark-gray: #999995;
  --work-muted: #62625e;

  --work-line:
    rgba(20, 20, 20, .105);

  --work-line-soft:
    rgba(20, 20, 20, .045);

  background:
    radial-gradient(circle at 76% 10%,
      rgba(0, 0, 0, .018),
      transparent 28%),
    linear-gradient(180deg,
      var(--work-bg),
      var(--work-bg-deep));
}

body.light-mode .work__grid,
body.light-mode .work__visual-grid,
body.light-mode .work__visual-grid-plane,
body.light-mode .work__heading-copy::before,
body.light-mode .work__marquee::before {
  background-image:
    linear-gradient(to right,
      rgba(20, 20, 20, .031) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      rgba(20, 20, 20, .031) 1px,
      transparent 1px);
}


/* =========================================================
   LIGHT TRIANGLE
   ========================================================= */

body.light-mode .work__visual::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, .022),
      transparent 30%),
    radial-gradient(circle at 30% 50%,
      rgba(0, 0, 0, .010),
      transparent 24%),
    radial-gradient(circle at 70% 50%,
      rgba(0, 0, 0, .008),
      transparent 24%);
}

body.light-mode .work__triangle-edge {
  background:
    linear-gradient(90deg,
      transparent,
      rgba(20, 20, 20, .68),
      transparent);
}

body.light-mode .work__visual:hover .work__triangle-edge {
  background:
    linear-gradient(90deg,
      transparent,
      #51bfd5,
      #8170c9,
      #db728f,
      transparent);
}

body.light-mode .work__prism-core {
  background:
    radial-gradient(circle,
      rgba(20, 20, 20, .90) 0%,
      rgba(20, 20, 20, .28) 32%,
      transparent 76%);

  box-shadow:
    0 0 12px rgba(0, 0, 0, .08);
}


/* =========================================================
   LIGHT CARD
   ========================================================= */

body.light-mode .work-card {
  color:
    #171717;

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .45),
      rgba(255, 255, 255, .13));

  border-color:
    rgba(20, 20, 20, .08);

  box-shadow:
    0 20px 48px rgba(20, 20, 20, .042);
}

body.light-mode .work-card::before {
  background-image:
    linear-gradient(to right,
      rgba(20, 20, 20, .010) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      rgba(20, 20, 20, .010) 1px,
      transparent 1px);
}

body.light-mode .work-card__top,
body.light-mode .work-card__footer,
body.light-mode .work-card__rating {
  border-color:
    rgba(20, 20, 20, .06);
}

body.light-mode .work-card__icon,
body.light-mode .work-card__meta span,
body.light-mode .work-card__arrow {
  border-color:
    rgba(20, 20, 20, .075);
}

body.light-mode .work-card:hover {
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .58),
      rgba(255, 255, 255, .18));

  border-color:
    rgba(20, 20, 20, .14);

  box-shadow:
    0 24px 52px rgba(20, 20, 20, .06);
}


/* =========================================================
   LIGHT EDGE FADES
   ========================================================= */

body.light-mode .work__edge-fade--left {
  background:
    linear-gradient(90deg,
      var(--work-bg),
      transparent);
}

body.light-mode .work__edge-fade--right {
  background:
    linear-gradient(270deg,
      var(--work-bg),
      transparent);
}


/* =========================================================
   LIGHT HINT
   ========================================================= */

body.light-mode .work__horizontal-hint {
  background:
    rgba(239, 238, 233, .50);

  border-color:
    rgba(20, 20, 20, .06);

  color:
    rgba(20, 20, 20, .34);
}

body.light-mode .work__viewport:hover .work__horizontal-hint {
  color:
    rgba(20, 20, 20, .57);

  border-color:
    rgba(20, 20, 20, .12);
}

body.light-mode .work__hint-arrow {
  color:
    rgba(20, 20, 20, .60);
}


/* =========================================================
   LIGHT MARQUEE
   ========================================================= */

body.light-mode .work__marquee {
  background:
    rgba(255, 255, 255, .18);

  border-top-color:
    rgba(20, 20, 20, .08);

  border-bottom-color:
    rgba(20, 20, 20, .08);
}

body.light-mode .work__marquee::after {
  background:
    radial-gradient(ellipse at 20% 50%,
      rgba(66, 180, 210, .035),
      transparent 26%),
    radial-gradient(ellipse at 50% 50%,
      rgba(126, 105, 205, .03),
      transparent 28%),
    radial-gradient(ellipse at 80% 50%,
      rgba(219, 114, 143, .025),
      transparent 26%);
}

body.light-mode .work__marquee-set span:nth-of-type(1) {
  color:
    rgba(20, 20, 20, .72);
}

body.light-mode .work__marquee-set span:nth-of-type(2) {
  color:
    rgba(20, 20, 20, .50);
}

body.light-mode .work__marquee-set span:nth-of-type(3) {
  color:
    rgba(20, 20, 20, .64);
}

body.light-mode .work__marquee-set span:nth-of-type(4) {
  color:
    rgba(20, 20, 20, .48);
}

body.light-mode .work__marquee-set span:nth-of-type(5) {
  color:
    rgba(20, 20, 20, .62);
}

body.light-mode .work__marquee-set span:nth-of-type(6) {
  color:
    rgba(20, 20, 20, .48);
}

body.light-mode .work__marquee-set span:nth-of-type(7),
body.light-mode .work__marquee-set span:nth-of-type(8),
body.light-mode .work__marquee-set span:nth-of-type(9) {
  color:
    rgba(20, 20, 20, .56);
}

body.light-mode .work__marquee-set span:nth-of-type(10) {
  color:
    rgba(20, 20, 20, .45);
}

body.light-mode .work__marquee-set svg {
  stroke:
    rgba(20, 20, 20, .23);
}

body.light-mode .work__marquee-set span:hover {
  color:
    #587da8;

  text-shadow:
    0 0 11px rgba(88, 125, 168, .08);
}

body.light-mode .work__marquee-set svg:hover {
  stroke:
    #786bb5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .work__header-row {
    grid-template-columns:
      minmax(0, 1fr) minmax(300px, .68fr);
  }

  .work__title {
    font-size:
      clamp(37px, 6vw, 76px);
  }

  .work__visual {
    height: 350px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .work {
    padding:
      72px 0 76px;
  }

  .work__inner {
    padding:
      0 20px;
  }

  .work__header-row {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .work__title {
    font-size:
      clamp(34px, 10.8vw, 62px);
  }

  .work__heading-copy::before {
    left: -35px;

    top: -45px;

    width:
      calc(100% + 70px);

    height:
      calc(100% + 90px);

    background-size:
      21px 21px;
  }

  .work__visual {
    height:
      min(82vw, 390px);

    min-height: 295px;
  }

  .work__visual-triangle {
    width:
      clamp(180px, 50vw, 250px);
  }

  .work__viewport {
    height: 465px;
  }

  .work-card {
    flex-basis:
      min(78vw, 355px);

    min-height: 410px;
  }

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

  .work__proof-footer {
    grid-template-columns: 1fr;

    align-items: start;
  }

  .work__capabilities-head {
    grid-template-columns:
      1fr auto;
  }

  .work__capabilities-rule {
    display: none;
  }

  .work__marquee {
    height: 58px;
  }

  .work__marquee-set span {
    padding:
      0 15px;

    font-size: 10px;
  }

  .work__marquee-set svg {
    width: 9px;
    height: 9px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

  .work__inner {
    padding:
      0 18px;
  }

  .work__title {
    font-size:
      clamp(29px, 10.7vw, 50px);
  }

  .work__visual {
    height: 300px;
  }

  .work__visual-triangle {
    width: 205px;
  }

  .work__visual-label--left,
  .work__visual-label--right {
    display: none;
  }

  .work__viewport {
    height: 450px;
  }

  .work-card {
    flex-basis:
      calc(100vw - 40px);

    min-height: 400px;

    padding: 20px;
  }

  .work-card h3 {
    font-size: 28px;
  }

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

  .work-stat {
    min-height: 125px;
  }

  .work__marquee {
    height: 55px;
  }

  .work__marquee-set span {
    padding:
      0 12px;

    font-size: 9px;
  }

  .work__marquee-set svg {
    width: 8px;
    height: 8px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .work *,
  .work *::before,
  .work *::after {
    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes workEdgePulse {

  0%,
  100% {
    opacity: .32;
  }

  50% {
    opacity: .62;
  }
}

@keyframes eyebrowSweep {

  0%,
  45% {
    transform:
      translateX(-120%);
  }

  72%,
  100% {
    transform:
      translateX(250%);
  }
}

@keyframes headingGridDrift {

  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      23px 23px,
      -23px 23px;
  }
}

@keyframes titleReveal {

  from {
    opacity: 0;

    transform:
      translate3d(0,
        32px,
        0) rotateX(10deg);
  }

  to {
    opacity: 1;

    transform:
      translate3d(0,
        0,
        0) rotateX(0);
  }
}

@keyframes titleMonoShift {

  0% {
    background-position: 100% 50%;
  }

  50% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@keyframes titleRGBShift {

  0% {
    background-position: 100% 50%;
  }

  50% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@keyframes visualGridDrift {

  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      21px 21px,
      -21px 21px;
  }
}

@keyframes hintArrow {

  0%,
  100% {
    translate: 0;

    opacity: .30;
  }

  50% {
    translate: 4px;

    opacity: .72;
  }
}

@keyframes marqueeGrid {

  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      24px 24px,
      -24px 24px;
  }
}

@keyframes marqueeGridDeep {

  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      34px 34px,
      -34px 34px;
  }
}

@keyframes capabilitiesRuleSweep {

  0%,
  20% {
    transform:
      translateX(-150%);
  }

  55% {
    transform:
      translateX(380%);
  }

  100% {
    transform:
      translateX(380%);
  }
}

@keyframes workMarquee {

  from {
    transform:
      translate3d(0,
        0,
        0);
  }

  to {
    transform:
      translate3d(-50%,
        0,
        0);
  }
}

/* =========================================================
   METAMORPH — WORK / COMPLETE LIGHT THEME
   APPEND ONLY
   DARK THEME RULES ABOVE REMAIN UNTOUCHED
   ========================================================= */


/* =========================================================
   WORK ROOT
   ========================================================= */

body.light-mode .work {

  --work-bg: #f1f0eb;

  --work-bg-deep: #e8e7e1;

  --work-white: #171717;

  --work-light: #51514d;

  --work-gray: #73736e;

  --work-dark-gray: #969691;

  --work-muted: #60605b;

  --work-line:
    rgba(18, 18, 17, .105);

  --work-line-soft:
    rgba(18, 18, 17, .045);

  background:
    radial-gradient(circle at 76% 10%,
      rgba(20, 20, 18, .035),
      transparent 28%),
    radial-gradient(circle at 18% 76%,
      rgba(20, 20, 18, .018),
      transparent 31%),
    linear-gradient(180deg,
      var(--work-bg),
      var(--work-bg-deep));

  color:
    var(--work-white);

}


/* =========================================================
   SECTION EDGES
   ========================================================= */

body.light-mode .work::before {

  background:
    linear-gradient(90deg,
      transparent,
      rgba(18, 18, 17, .055) 25%,
      rgba(18, 18, 17, .16) 50%,
      rgba(18, 18, 17, .055) 75%,
      transparent);

}


body.light-mode .work::after {

  background:
    linear-gradient(90deg,
      transparent,
      rgba(18, 18, 17, .075),
      transparent);

}


/* =========================================================
   PARALLAX SCENE
   The JS transforms remain exactly the same.
   These are light-mode visual layers only.
   ========================================================= */

body.light-mode .work__scene {

  opacity: 1;

}


body.light-mode .work__scene-layer--far {

  opacity: .42;

}


body.light-mode .work__scene-layer--mid {

  opacity: .32;

}


body.light-mode .work__scene-layer--near {

  opacity: .24;

}


/* =========================================================
   PARALLAX NOTEBOOK GRIDS
   ========================================================= */

body.light-mode .work__grid {

  background-image:

    linear-gradient(to right,
      rgba(20, 20, 18, .035) 1px,
      transparent 1px),

    linear-gradient(to bottom,
      rgba(20, 20, 18, .035) 1px,
      transparent 1px);

}


body.light-mode .work__grid--far {

  opacity: .20;

}


body.light-mode .work__grid--mid {

  opacity: .26;

}


body.light-mode .work__grid--near {

  opacity: .19;

}


/* =========================================================
   PARALLAX LIGHT FIELDS
   ========================================================= */

body.light-mode .work__glow--far {

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .72),
      rgba(255, 255, 255, 0));

  opacity: .20;

}


body.light-mode .work__glow--mid {

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .50),
      rgba(255, 255, 255, 0));

  opacity: .16;

}


/* =========================================================
   PARALLAX CONSTRUCTION LINES
   ========================================================= */

body.light-mode .work__line {

  opacity: .10;

}


body.light-mode .work__line--v1,
body.light-mode .work__line--v2 {

  background:
    linear-gradient(180deg,
      transparent,
      rgba(20, 20, 18, .20),
      transparent);

}


body.light-mode .work__line--h1,
body.light-mode .work__line--h2 {

  background:
    linear-gradient(90deg,
      transparent,
      rgba(20, 20, 18, .15),
      transparent);

}


body.light-mode .work__line--v2 {

  opacity: .075;

}


body.light-mode .work__line--h2 {

  opacity: .065;

}


/* =========================================================
   LIGHT VIGNETTE
   ========================================================= */

body.light-mode .work__vignette {

  background:
    radial-gradient(ellipse at center,
      transparent 26%,
      rgba(15, 15, 14, .025) 59%,
      rgba(15, 15, 14, .10) 100%);

}


/* =========================================================
   HEADER
   ========================================================= */

body.light-mode .work__eyebrow {

  color:
    rgba(25, 25, 24, .62);

}


body.light-mode .work__eyebrow-line {

  background:
    rgba(20, 20, 18, .15);

}


body.light-mode .work__eyebrow-line::after {

  background:
    linear-gradient(90deg,
      transparent,
      rgba(20, 20, 18, .60),
      transparent);

}


body.light-mode .work__eyebrow-year {

  color:
    rgba(20, 20, 18, .42);

}


body.light-mode .work__eyebrow:hover .work__eyebrow-year {

  color:
    #3b9daf;

  text-shadow:
    0 0 12px rgba(59, 157, 175, .11);

}


/* =========================================================
   HEADING GRID
   ========================================================= */

body.light-mode .work__heading-copy::before {

  background-image:

    linear-gradient(to right,
      rgba(20, 20, 18, .034) 1px,
      transparent 1px),

    linear-gradient(to bottom,
      rgba(20, 20, 18, .034) 1px,
      transparent 1px);

  opacity: .48;

}


/* =========================================================
   TITLE
   ========================================================= */

body.light-mode .work__title {

  color:
    #121211;

}


body.light-mode .work__title>span:first-child::before {

  color:
    rgba(0, 0, 0, .18);

}


body.light-mode .work__title-accent {

  background:
    linear-gradient(100deg,
      #171717 0%,
      #171717 16%,
      #3aa7bc 32%,
      #6679d4 46%,
      #8f70d2 61%,
      #d36f8d 77%,
      #171717 94%);

  background-size:
    240% 100%;

  background-position:
    100% 50%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

}


body.light-mode .work__title>span::after {

  background:
    linear-gradient(90deg,
      transparent,
      rgba(20, 20, 18, .50),
      transparent);

}


body.light-mode .work__title:hover>span::after {

  background:
    linear-gradient(90deg,
      transparent,
      #42b5ca,
      #8672d0,
      #d67591,
      transparent);

}


/* =========================================================
   INTRO
   ========================================================= */

body.light-mode .work__intro {

  color:
    rgba(25, 25, 24, .57);

}


body.light-mode .work__heading-copy:hover .work__intro {

  color:
    rgba(25, 25, 24, .74);

}


/* =========================================================
   3D VISUAL — LIGHT
   ========================================================= */

body.light-mode .work__visual {

  color:
    #181817;

}


body.light-mode .work__visual-grid {

  background-image:

    linear-gradient(to right,
      rgba(20, 20, 18, .028) 1px,
      transparent 1px),

    linear-gradient(to bottom,
      rgba(20, 20, 18, .028) 1px,
      transparent 1px);

  opacity: .18;

}


body.light-mode .work__visual-grid-plane {

  background-image:

    linear-gradient(to right,
      rgba(20, 20, 18, .022) 1px,
      transparent 1px),

    linear-gradient(to bottom,
      rgba(20, 20, 18, .022) 1px,
      transparent 1px);

}


body.light-mode .work__visual-grid-plane--back {

  opacity: .14;

}


body.light-mode .work__visual-grid-plane--mid {

  opacity: .10;

}


body.light-mode .work__visual-grid-plane--front {

  opacity: .055;

}


body.light-mode .work__visual::before {

  background:

    radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, .018),
      transparent 30%),

    radial-gradient(circle at 30% 50%,
      rgba(0, 0, 0, .008),
      transparent 24%),

    radial-gradient(circle at 70% 50%,
      rgba(0, 0, 0, .006),
      transparent 24%);

}


/* =========================================================
   VISUAL CONSTRUCTION LINES
   ========================================================= */

body.light-mode .work__visual-line {

  background:
    rgba(20, 20, 18, .30);

  opacity: .085;

}


/* =========================================================
   TRIANGLE
   ========================================================= */

body.light-mode .work__visual-triangle--back {

  opacity: .12;

}


body.light-mode .work__visual-triangle--mid {

  opacity: .88;

}


body.light-mode .work__triangle-edge {

  background:
    linear-gradient(90deg,
      transparent,
      rgba(25, 25, 24, .74),
      transparent);

  opacity: .74;

}


body.light-mode .work__visual:hover .work__triangle-edge {

  background:
    linear-gradient(90deg,
      transparent,
      #37aebe,
      #7c70cb,
      #d56e8e,
      transparent);

  opacity: .90;

  box-shadow:
    0 0 9px rgba(110, 115, 190, .10);

}


/* =========================================================
   CORE
   ========================================================= */

body.light-mode .work__prism-core {

  background:
    radial-gradient(circle,
      rgba(20, 20, 19, .92) 0%,
      rgba(20, 20, 19, .30) 34%,
      transparent 78%);

  box-shadow:
    0 0 12px rgba(0, 0, 0, .07);

}


body.light-mode .work__visual:hover .work__prism-core {

  background:
    radial-gradient(circle,
      #171717 0%,
      #3db6c9 26%,
      #8c72cf 52%,
      #d87490 72%,
      transparent 78%);

  box-shadow:
    0 0 13px rgba(61, 182, 201, .16),
    0 0 25px rgba(140, 114, 207, .10),
    0 0 35px rgba(216, 116, 144, .06);

}


/* =========================================================
   VISUAL LABELS
   ========================================================= */

body.light-mode .work__visual-label {

  color:
    rgba(20, 20, 18, .38);

}


body.light-mode .work__visual:hover .work__visual-label {

  color:
    rgba(45, 125, 150, .70);

  text-shadow:
    0 0 10px rgba(59, 157, 175, .07);

}


/* =========================================================
   WORK VIEWPORT
   ========================================================= */

body.light-mode .work__viewport {

  background:
    rgba(255, 255, 255, .12);

  border-top-color:
    rgba(20, 20, 18, .10);

  border-bottom-color:
    rgba(20, 20, 18, .10);

}


body.light-mode .work__viewport.is-horizontal-lock {

  border-color:
    rgba(103, 111, 205, .18);

}


/* =========================================================
   CARDS
   ========================================================= */

body.light-mode .work-card {

  color:
    #171716;

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .76),
      rgba(255, 255, 255, .34));

  border-color:
    rgba(20, 20, 18, .09);

  box-shadow:
    0 22px 50px rgba(20, 20, 18, .045);

}


body.light-mode .work-card::before {

  background-image:

    linear-gradient(to right,
      rgba(20, 20, 18, .012) 1px,
      transparent 1px),

    linear-gradient(to bottom,
      rgba(20, 20, 18, .012) 1px,
      transparent 1px);

}


body.light-mode .work-card::after {

  opacity: .10;

}


body.light-mode .work-card:hover,
body.light-mode .work-card.is-active {

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .90),
      rgba(255, 255, 255, .46));

  border-color:
    rgba(35, 35, 33, .14);

  box-shadow:
    0 25px 55px rgba(20, 20, 18, .065);

}


body.light-mode .work-card:hover::after,
body.light-mode .work-card.is-active::after {

  opacity: .78;

}


/* =========================================================
   CARD TOP
   ========================================================= */

body.light-mode .work-card__top {

  color:
    rgba(20, 20, 18, .43);

  border-bottom-color:
    rgba(20, 20, 18, .075);

}


body.light-mode .work-card.is-active .work-card__top,
body.light-mode .work-card:hover .work-card__top {

  color:
    rgba(20, 20, 18, .67);

  border-color:
    rgba(102, 110, 202, .15);

}


body.light-mode .work-card:hover .work-card__index {

  color:
    #3b9daf;

  text-shadow:
    0 0 12px rgba(59, 157, 175, .10);

}


/* =========================================================
   CARD ICON
   ========================================================= */

body.light-mode .work-card__icon {

  border-color:
    rgba(20, 20, 18, .09);

  background:
    rgba(255, 255, 255, .19);

}


body.light-mode .work-card__icon svg {

  color:
    rgba(20, 20, 18, .58);

}


body.light-mode .work-card:hover .work-card__icon {

  border-color:
    rgba(61, 174, 195, .29);

  background:
    linear-gradient(145deg,
      rgba(61, 174, 195, .035),
      rgba(140, 114, 207, .035));

  box-shadow:
    0 0 16px rgba(74, 150, 180, .035);

}


body.light-mode .work-card:hover .work-card__icon svg {

  color:
    #3aa7ba;

  filter:
    drop-shadow(0 0 5px rgba(61, 174, 195, .09));

}


/* =========================================================
   CARD BODY
   ========================================================= */

body.light-mode .work-card__eyebrow {

  color:
    rgba(20, 20, 18, .42);

}


body.light-mode .work-card:hover .work-card__eyebrow {

  color:
    rgba(48, 137, 158, .72);

}


body.light-mode .work-card h3 {

  color:
    #151514;

}


body.light-mode .work-card h3 span {

  color:
    rgba(20, 20, 18, .43);

}


body.light-mode .work-card:hover h3 {

  text-shadow:
    0 0 18px rgba(90, 105, 170, .055);

}


body.light-mode .work-card:hover h3 span {

  color:
    rgba(78, 90, 148, .68);

}


body.light-mode .work-card__body p {

  color:
    rgba(20, 20, 18, .53);

}


body.light-mode .work-card:hover .work-card__body p {

  color:
    rgba(20, 20, 18, .68);

}


/* =========================================================
   CARD META
   ========================================================= */

body.light-mode .work-card__meta span {

  border-color:
    rgba(20, 20, 18, .075);

  background:
    rgba(255, 255, 255, .17);

  color:
    rgba(20, 20, 18, .47);

}


body.light-mode .work-card__meta span:hover {

  color:
    #35445c;

  border-color:
    rgba(100, 110, 194, .28);

  background:
    linear-gradient(135deg,
      rgba(61, 174, 195, .035),
      rgba(140, 114, 207, .04),
      rgba(214, 116, 144, .02));

  box-shadow:
    0 0 14px rgba(101, 115, 180, .032);

}


/* =========================================================
   RATING
   ========================================================= */

body.light-mode .work-card__rating {

  border-top-color:
    rgba(20, 20, 18, .065);

}


body.light-mode .work-card__rating span {

  color:
    rgba(20, 20, 18, .41);

}


body.light-mode .work-card__rating strong {

  color:
    rgba(20, 20, 18, .70);

}


body.light-mode .work-card:hover .work-card__rating strong {

  color:
    #8069bb;

  text-shadow:
    0 0 12px rgba(128, 105, 187, .11);

}


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

body.light-mode .work-card__footer {

  border-top-color:
    rgba(20, 20, 18, .075);

}


body.light-mode .work-card:hover .work-card__footer {

  border-color:
    rgba(105, 111, 195, .15);

}


body.light-mode .work-card__footer .mono {

  color:
    rgba(20, 20, 18, .45);

}


body.light-mode .work-card:hover .work-card__footer .mono {

  color:
    rgba(48, 137, 158, .72);

  text-shadow:
    0 0 11px rgba(59, 157, 175, .07);

}


body.light-mode .work-card__arrow {

  border-color:
    rgba(20, 20, 18, .09);

  color:
    rgba(20, 20, 18, .52);

}


body.light-mode .work-card:hover .work-card__arrow {

  border-color:
    rgba(128, 105, 187, .32);

  color:
    #181817;

  background:
    linear-gradient(135deg,
      rgba(61, 174, 195, .045),
      rgba(140, 114, 207, .055),
      rgba(214, 116, 144, .028));

  box-shadow:
    0 0 15px rgba(118, 112, 180, .035);

}


/* =========================================================
   EDGE FADES
   ========================================================= */

body.light-mode .work__edge-fade--left {

  background:
    linear-gradient(90deg,
      var(--work-bg),
      rgba(241, 240, 235, 0));

}


body.light-mode .work__edge-fade--right {

  background:
    linear-gradient(270deg,
      var(--work-bg),
      rgba(241, 240, 235, 0));

}


/* =========================================================
   HORIZONTAL HINT
   ========================================================= */

body.light-mode .work__horizontal-hint {

  background:
    rgba(242, 241, 236, .62);

  border-color:
    rgba(20, 20, 18, .075);

  color:
    rgba(20, 20, 18, .43);

  box-shadow:
    0 8px 25px rgba(20, 20, 18, .025);

}


body.light-mode .work__viewport:hover .work__horizontal-hint {

  color:
    rgba(20, 20, 18, .68);

  border-color:
    rgba(95, 105, 180, .17);

  box-shadow:
    0 0 18px rgba(100, 110, 180, .035);

}


body.light-mode .work__hint-arrow {

  color:
    rgba(20, 20, 18, .60);

}


body.light-mode .work__viewport:hover .work__hint-arrow {

  color:
    #3aa7ba;

  filter:
    drop-shadow(0 0 5px rgba(58, 167, 186, .10));

}


/* =========================================================
   PROOF
   ========================================================= */

body.light-mode .work__proof {

  border-top-color:
    var(--work-line);

}


body.light-mode .work__proof-heading {

  color:
    rgba(20, 20, 18, .43);

}


body.light-mode .work__proof-grid {

  border-color:
    rgba(20, 20, 18, .075);

}


body.light-mode .work-stat {

  border-right-color:
    rgba(20, 20, 18, .075);

  border-bottom-color:
    rgba(20, 20, 18, .075);

  background:
    rgba(255, 255, 255, .10);

}


body.light-mode .work-stat:hover {

  background:
    linear-gradient(145deg,
      rgba(61, 174, 195, .025),
      rgba(140, 114, 207, .022),
      rgba(214, 116, 144, .014));

  border-color:
    rgba(100, 110, 190, .14);

  box-shadow:
    0 0 24px rgba(105, 118, 180, .022);

}


body.light-mode .work-stat::before {

  background:
    linear-gradient(90deg,
      transparent,
      rgba(20, 20, 18, .45),
      transparent);

}


body.light-mode .work-stat:hover::before {

  background:
    linear-gradient(90deg,
      transparent,
      #3aaebe,
      #8a71cf,
      #d67390,
      transparent);

}


body.light-mode .work-stat__value {

  color:
    #171716;

}


body.light-mode .work-stat:hover .work-stat__value {

  color:
    #171716;

  text-shadow:
    0 0 20px rgba(105, 110, 175, .04);

}


body.light-mode .work-stat__label {

  color:
    rgba(20, 20, 18, .40);

}


body.light-mode .work-stat:hover .work-stat__label {

  color:
    rgba(48, 137, 158, .70);

}


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

body.light-mode .work__proof-badge {

  border-color:
    rgba(20, 20, 18, .10);

  color:
    rgba(20, 20, 18, .53);

}


body.light-mode .work__proof-badge:hover {

  color:
    #263044;

  border-color:
    rgba(103, 111, 190, .25);

  background:
    linear-gradient(135deg,
      rgba(61, 174, 195, .032),
      rgba(140, 114, 207, .035),
      rgba(214, 116, 144, .018));

  box-shadow:
    0 0 15px rgba(107, 119, 180, .03);

}


body.light-mode .work__proof-copy,
body.light-mode .work__proof-link {

  color:
    rgba(20, 20, 18, .42);

}


body.light-mode .work__proof-link:hover {

  color:
    #8069bb;

  text-shadow:
    0 0 11px rgba(128, 105, 187, .10);

}


/* =========================================================
   CAPABILITIES
   ========================================================= */

body.light-mode .work__capabilities-head {

  color:
    rgba(20, 20, 18, .43);

}


body.light-mode .work__capabilities::before {

  background:

    radial-gradient(ellipse at 18% 50%,
      rgba(61, 174, 195, .035),
      transparent 28%),

    radial-gradient(ellipse at 50% 50%,
      rgba(140, 114, 207, .032),
      transparent 30%),

    radial-gradient(ellipse at 82% 50%,
      rgba(214, 116, 144, .024),
      transparent 28%),

    linear-gradient(180deg,
      rgba(0, 0, 0, .012),
      transparent 38%,
      rgba(0, 0, 0, .008));

}


body.light-mode .work__capabilities-rule {

  background:
    linear-gradient(90deg,
      rgba(20, 20, 18, .085),
      transparent);

}


body.light-mode .work__capabilities-rule::after {

  background:
    linear-gradient(90deg,
      transparent,
      rgba(61, 174, 195, .42),
      rgba(140, 114, 207, .30),
      transparent);

}


/* =========================================================
   CAPABILITIES MARQUEE
   ========================================================= */

body.light-mode .work__marquee {

  border-top-color:
    rgba(20, 20, 18, .085);

  border-bottom-color:
    rgba(20, 20, 18, .085);

  background:
    rgba(255, 255, 255, .12);

}


body.light-mode .work__marquee::before {

  background-image:

    linear-gradient(90deg,
      rgba(61, 174, 195, .030) 1px,
      transparent 1px),

    linear-gradient(0deg,
      rgba(140, 114, 207, .025) 1px,
      transparent 1px);

  opacity: .38;

}


body.light-mode .work__marquee::after {

  background:

    radial-gradient(ellipse at 22% 50%,
      rgba(61, 174, 195, .038),
      transparent 26%),

    radial-gradient(ellipse at 50% 50%,
      rgba(140, 114, 207, .032),
      transparent 28%),

    radial-gradient(ellipse at 78% 50%,
      rgba(214, 116, 144, .024),
      transparent 26%);

}


/* =========================================================
   MARQUEE WORD COLORS
   ========================================================= */

body.light-mode .work__marquee-set span {

  color:
    rgba(20, 20, 18, .54);

}


body.light-mode .work__marquee-set span:nth-of-type(1) {

  color:
    rgba(20, 20, 18, .72);

}


body.light-mode .work__marquee-set span:nth-of-type(2) {

  color:
    rgba(20, 20, 18, .48);

}


body.light-mode .work__marquee-set span:nth-of-type(3) {

  color:
    rgba(20, 20, 18, .62);

}


body.light-mode .work__marquee-set span:nth-of-type(4) {

  color:
    rgba(20, 20, 18, .46);

}


body.light-mode .work__marquee-set span:nth-of-type(5) {

  color:
    rgba(20, 20, 18, .60);

}


body.light-mode .work__marquee-set span:nth-of-type(6) {

  color:
    rgba(20, 20, 18, .46);

}


body.light-mode .work__marquee-set span:nth-of-type(7) {

  color:
    rgba(20, 20, 18, .56);

}


body.light-mode .work__marquee-set span:nth-of-type(8) {

  color:
    rgba(20, 20, 18, .59);

}


body.light-mode .work__marquee-set span:nth-of-type(9) {

  color:
    rgba(20, 20, 18, .54);

}


body.light-mode .work__marquee-set span:nth-of-type(10) {

  color:
    rgba(20, 20, 18, .44);

}


body.light-mode .work__marquee-set span:hover {

  color:
    #537da0;

  text-shadow:
    0 0 14px rgba(83, 125, 160, .09);

}


/* =========================================================
   MARQUEE SEPARATORS
   ========================================================= */

body.light-mode .work__marquee-set svg {

  stroke:
    rgba(20, 20, 18, .25);

}


body.light-mode .work__marquee-set svg:hover {

  stroke:
    #7b6eb5;

  filter:
    drop-shadow(0 0 5px rgba(123, 110, 181, .10));

}


/* =========================================================
   LIGHT THEME — PARALLAX EMPHASIS
   Keeps every existing JS-driven transform active.
   ========================================================= */

body.light-mode .work__scene-layer,
body.light-mode .work__grid,
body.light-mode .work__glow,
body.light-mode .work__line,
body.light-mode .work__visual,
body.light-mode .work__visual-grid,
body.light-mode .work__visual-grid-plane,
body.light-mode .work__visual-triangle,
body.light-mode .work__visual-line {

  will-change:
    transform;

}


/* =========================================================
   MOBILE LIGHT THEME
   ========================================================= */

@media (max-width: 800px) {

  body.light-mode .work {

    background:
      radial-gradient(circle at 75% 10%,
        rgba(20, 20, 18, .028),
        transparent 32%),
      linear-gradient(180deg,
        #f1f0eb,
        #e8e7e1);

  }


  body.light-mode .work__scene-layer--far {

    opacity: .38;

  }


  body.light-mode .work__scene-layer--mid {

    opacity: .28;

  }


  body.light-mode .work__scene-layer--near {

    opacity: .20;

  }


  body.light-mode .work-card {

    background:
      linear-gradient(145deg,
        rgba(255, 255, 255, .80),
        rgba(255, 255, 255, .38));

  }


  body.light-mode .work__horizontal-hint {

    background:
      rgba(242, 241, 236, .68);

  }

}


/* =========================================================
   SMALL MOBILE LIGHT THEME
   ========================================================= */

@media (max-width: 520px) {

  body.light-mode .work__scene-layer--far {

    opacity: .34;

  }


  body.light-mode .work__scene-layer--mid {

    opacity: .24;

  }


  body.light-mode .work__scene-layer--near {

    opacity: .17;

  }


  body.light-mode .work-card {

    background:
      linear-gradient(145deg,
        rgba(255, 255, 255, .84),
        rgba(255, 255, 255, .40));

  }

}
css
/* ===========================================================
   NAVBAR — BROWSER DEFAULT CURSOR (RESTORE)
   Only the nav and everything inside it uses the OS cursor.
   The rest of the site keeps the custom cursor untouched.
   =========================================================== */

.nav,
.nav *,
.nav a,
.nav button,
.nav__brand,
.nav__brand *,
.nav__cta,
.nav__cta *,
.menu,
.menu a,
.theme-switch,
.theme-switch *,
.mobile-menu-toggle,
.mobile-menu-toggle * {

  cursor: default !important;

}

.nav a,
.nav button,
.nav__cta,
.nav__brand,
.menu a,
.theme-switch,
.mobile-menu-toggle {

  cursor: pointer !important;

}


/* ===========================================================
   NAVBAR CUSTOM RING CURSOR
   A soft white ring that trails the pointer, visible ONLY
   inside the navbar. Shadow + border, short delay.
   =========================================================== */

.nav-cursor-ring {

  position: fixed;

  top: 0;

  left: 0;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 99999;

  border: 1.2px solid rgba(255, 255, 255, 0.72);

  background: rgba(255, 255, 255, 0.055);

  box-shadow:
    0 0 7px rgba(255, 255, 255, 0.16),
    0 0 15px rgba(255, 255, 255, 0.06),
    inset 0 0 6px rgba(255, 255, 255, 0.05);

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

  opacity: 0;

  transition:
    opacity 0.22s ease,
    width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.22s ease,
    box-shadow 0.28s ease;

  will-change: transform, opacity;

}


.nav-cursor-ring.is-visible {

  opacity: 1;

}


.nav-cursor-ring.is-hover {

  width: 44px;

  height: 44px;

  border-color: rgba(255, 255, 255, 0.55);

  background: rgba(255, 255, 255, 0.035);

  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.12),
    0 0 21px rgba(255, 255, 255, 0.05),
    inset 0 0 9px rgba(255, 255, 255, 0.035);

}


/* Light mode nav ring */

body.light-mode .nav-cursor-ring {

  border-color: rgba(0, 0, 0, 0.45);

  background: rgba(0, 0, 0, 0.04);

  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.10),
    0 0 20px rgba(0, 0, 0, 0.04),
    inset 0 0 8px rgba(0, 0, 0, 0.03);

}


body.light-mode .nav-cursor-ring.is-hover {

  border-color: rgba(0, 0, 0, 0.35);

  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.08),
    0 0 24px rgba(0, 0, 0, 0.04),
    inset 0 0 10px rgba(0, 0, 0, 0.025);

}


/* ===========================================================
   SCROLL REVEAL — MEDIUM SPEED
   Elements with [data-sr] animate in when they enter the
   viewport. No library. Pure IntersectionObserver + CSS.
   =========================================================== */

[data-sr] {

  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);

}


[data-sr].sr-visible {

  opacity: 1;

  transform: translateY(0);

}


/* Fade up variant (default) */

[data-sr="fade-up"] {

  opacity: 0;

  transform: translateY(32px);

}


/* Fade in — no movement */

[data-sr="fade"] {

  opacity: 0;

  transform: none;

}


/* Fade from left */

[data-sr="fade-left"] {

  opacity: 0;

  transform: translateX(-28px);

}


/* Fade from right */

[data-sr="fade-right"] {

  opacity: 0;

  transform: translateX(28px);

}


/* Scale up */

[data-sr="scale"] {

  opacity: 0;

  transform: scale(0.94);

}


/* All visible states */

[data-sr="fade-up"].sr-visible,
[data-sr="fade"].sr-visible,
[data-sr="fade-left"].sr-visible,
[data-sr="fade-right"].sr-visible,
[data-sr="scale"].sr-visible {

  opacity: 1;

  transform: none;

}


/* Stagger delays via data-sr-delay */

[data-sr-delay="1"] {

  transition-delay: 0.08s;

}


[data-sr-delay="2"] {

  transition-delay: 0.16s;

}


[data-sr-delay="3"] {

  transition-delay: 0.24s;

}


[data-sr-delay="4"] {

  transition-delay: 0.32s;

}


[data-sr-delay="5"] {

  transition-delay: 0.40s;

}


[data-sr-delay="6"] {

  transition-delay: 0.48s;

}


/* Reduced motion — disable everything */

@media (prefers-reduced-motion: reduce) {

  [data-sr] {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }

  .nav-cursor-ring {

    display: none !important;

  }

}