:root {
  color: #0b0b0b;
  background: #fff;
  font-family:
    "Inter",
    "Noto Sans SC",
    "Noto Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
}

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

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
  letter-spacing: 0;
}

.reference-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #fff;
}

.reference-page::before,
.reference-page::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: clamp(930px, 58vw, 1180px);
  content: "";
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.82) 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.82) 83%, transparent 100%);
}

.reference-page::before {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.54), transparent 38%),
    linear-gradient(to bottom, #fffbff 0%, #fffaff 66%, rgba(255, 255, 255, 0.94) 82%, #fff 100%);
}

.reference-page::after {
  display: none;
}

.top-video-field {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: clamp(930px, 58vw, 1180px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.86) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.86) 82%, transparent 100%);
}

.top-video-field::before,
.top-video-field::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.top-video-field::before {
  inset: -7% -5% -2%;
  z-index: 0;
  display: block;
  background:
    radial-gradient(ellipse at 4% 42%, rgba(44, 126, 178, 0.88) 0 7%, rgba(84, 210, 230, 0.68) 12%, transparent 24%),
    radial-gradient(ellipse at 20% 7%, rgba(96, 216, 235, 0.76) 0 7%, transparent 17%),
    radial-gradient(ellipse at 37% 0%, rgba(139, 221, 238, 0.62) 0 6%, transparent 15%),
    radial-gradient(ellipse at 45% 46%, rgba(71, 212, 232, 0.58) 0 9%, transparent 21%),
    radial-gradient(ellipse at 64% 58%, rgba(44, 116, 172, 0.7) 0 8%, transparent 21%),
    radial-gradient(ellipse at 86% 28%, rgba(238, 183, 247, 0.66) 0 9%, transparent 23%),
    radial-gradient(ellipse at 93% 72%, rgba(50, 118, 174, 0.72) 0 8%, transparent 20%),
    radial-gradient(ellipse at 17% 84%, rgba(80, 212, 230, 0.58) 0 10%, transparent 24%),
    linear-gradient(110deg, rgba(255, 250, 255, 0) 18%, rgba(239, 184, 248, 0.08) 44%, rgba(95, 212, 232, 0.09) 68%, rgba(255, 250, 255, 0) 86%);
  background-size:
    104% 102%,
    100% 98%,
    108% 98%,
    112% 98%,
    106% 100%,
    108% 100%,
    104% 104%,
    110% 104%,
    118% 104%;
  filter: saturate(1.16);
  opacity: 0.72;
  will-change: transform, background-position, mask-position, -webkit-mask-position;
  -webkit-mask-image: radial-gradient(circle, #000 0 3.45px, transparent 3.75px);
  mask-image: radial-gradient(circle, #000 0 3.45px, transparent 3.75px);
  -webkit-mask-size: 9px 9px;
  mask-size: 9px 9px;
  animation: generated-halftone-drift 3.2s linear infinite;
}

.top-video-field::after {
  inset: 0;
  z-index: 2;
  display: block;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, 0.99) 0 21%, rgba(255, 250, 255, 0.9) 28%, transparent 45%),
    radial-gradient(ellipse at 38% 61%, rgba(255, 255, 255, 0.9) 0 10%, transparent 25%),
    radial-gradient(ellipse at 74% 43%, rgba(255, 255, 255, 0.64) 0 9%, transparent 23%),
    linear-gradient(to bottom, transparent 0 55%, rgba(255, 255, 255, 0.44) 72%, #fff 92%);
  opacity: 0.96;
}

.top-video-field .petal,
.top-video-field .halftone-wave {
  display: none;
}

.halftone-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.68;
}

.petal {
  position: absolute;
  display: block;
  border-radius: 0;
  filter: saturate(1.08);
  mix-blend-mode: multiply;
  opacity: 0.82;
  transform-origin: center;
  will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(circle, #000 0 2.7px, transparent 3px);
  mask-image: radial-gradient(circle, #000 0 2.7px, transparent 3px);
  -webkit-mask-size: 10px 10px;
  mask-size: 10px 10px;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.petal-left {
  top: -88px;
  left: -92px;
  width: min(820px, 44vw);
  height: 650px;
  background:
    radial-gradient(ellipse at 24% 20%, rgba(228, 174, 244, 0.55) 0 10%, transparent 22%),
    radial-gradient(ellipse at 44% 34%, rgba(38, 198, 226, 0.68) 0 17%, transparent 38%),
    radial-gradient(ellipse at 24% 72%, rgba(47, 121, 183, 0.78) 0 14%, transparent 30%),
    radial-gradient(ellipse at 55% 82%, rgba(79, 207, 233, 0.48) 0 18%, transparent 36%);
  transform: rotate(0deg) scale(1.05);
  animation:
    halftone-left-drift 9s ease-in-out infinite alternate,
    halftone-pulse 3.8s ease-in-out infinite;
}

.petal-top {
  top: -115px;
  left: 11%;
  width: min(980px, 52vw);
  height: 360px;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(235, 179, 244, 0.48) 0 9%, transparent 22%),
    radial-gradient(ellipse at 55% 36%, rgba(77, 192, 219, 0.66) 0 18%, transparent 34%),
    radial-gradient(ellipse at 82% 58%, rgba(168, 226, 244, 0.48) 0 13%, transparent 28%);
  opacity: 0.72;
  transform: rotate(0deg);
  animation:
    halftone-top-drift 10s ease-in-out infinite alternate,
    halftone-pulse 4.2s ease-in-out infinite reverse;
}

.petal-center {
  top: 230px;
  left: 21%;
  width: min(1120px, 58vw);
  height: 500px;
  background:
    radial-gradient(ellipse at 24% 42%, rgba(236, 182, 244, 0.28) 0 11%, transparent 23%),
    radial-gradient(ellipse at 48% 38%, rgba(104, 206, 225, 0.55) 0 19%, transparent 34%),
    radial-gradient(ellipse at 68% 48%, rgba(47, 116, 168, 0.68) 0 10%, transparent 22%),
    radial-gradient(ellipse at 84% 66%, rgba(151, 226, 244, 0.44) 0 15%, transparent 30%);
  opacity: 0.74;
  transform: rotate(0deg);
  animation:
    halftone-center-drift 8.5s ease-in-out infinite alternate,
    halftone-pulse 3.2s ease-in-out infinite;
}

.petal-right {
  top: 200px;
  right: -135px;
  width: min(900px, 46vw);
  height: 600px;
  background:
    radial-gradient(ellipse at 38% 24%, rgba(232, 177, 244, 0.36) 0 10%, transparent 24%),
    radial-gradient(ellipse at 54% 54%, rgba(73, 192, 221, 0.62) 0 20%, transparent 38%),
    radial-gradient(ellipse at 76% 70%, rgba(41, 91, 156, 0.76) 0 13%, transparent 30%);
  opacity: 0.82;
  transform: rotate(0deg);
  animation:
    halftone-right-drift 8s ease-in-out infinite alternate,
    halftone-pulse 3.6s ease-in-out infinite reverse;
}

.petal-bottom {
  left: -180px;
  bottom: -92px;
  width: min(980px, 54vw);
  height: 420px;
  background:
    radial-gradient(ellipse at 20% 46%, rgba(41, 102, 164, 0.72) 0 13%, transparent 28%),
    radial-gradient(ellipse at 52% 42%, rgba(70, 203, 232, 0.58) 0 18%, transparent 36%),
    radial-gradient(ellipse at 78% 54%, rgba(236, 181, 244, 0.34) 0 12%, transparent 27%);
  opacity: 0.78;
  transform: rotate(0deg);
  animation:
    halftone-bottom-drift 9.5s ease-in-out infinite alternate,
    halftone-pulse 3.4s ease-in-out infinite;
}

.halftone-wave {
  position: absolute;
  left: -8%;
  display: block;
  width: 116%;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(43, 112, 179, 0.7) 0 8%, transparent 18%),
    radial-gradient(ellipse at 25% 42%, rgba(71, 207, 231, 0.56) 0 9%, transparent 20%),
    radial-gradient(ellipse at 43% 58%, rgba(230, 175, 244, 0.4) 0 8%, transparent 18%),
    radial-gradient(ellipse at 61% 44%, rgba(60, 189, 219, 0.58) 0 10%, transparent 23%),
    radial-gradient(ellipse at 82% 55%, rgba(48, 96, 165, 0.64) 0 8%, transparent 18%);
  filter: saturate(1.12);
  mix-blend-mode: multiply;
  opacity: 0.58;
  -webkit-mask-image: radial-gradient(circle, #000 0 2.5px, transparent 2.85px);
  mask-image: radial-gradient(circle, #000 0 2.5px, transparent 2.85px);
  -webkit-mask-size: 10px 10px;
  mask-size: 10px 10px;
  will-change: transform, opacity, mask-position;
}

.wave-one {
  top: 250px;
  transform: rotate(-2deg);
  animation: wave-sweep-one 5.2s ease-in-out infinite alternate;
}

.wave-two {
  top: 430px;
  opacity: 0.42;
  transform: rotate(3deg);
  animation: wave-sweep-two 6.1s ease-in-out infinite alternate;
}

.site-header,
.hero,
.trusted,
.ways,
.feature-stack,
.pricing,
.surfaces,
.teams,
.final-cta,
.footer {
  position: relative;
  z-index: 2;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 0 42px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
}

.brand,
.nav-actions,
.nav-links {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  justify-self: start;
  font-size: 20px;
  font-weight: 650;
}

.brand-mark,
.footer-mark {
  width: 30px;
  height: 30px;
  border: 3px solid #0b0b0b;
  border-radius: 50%;
  box-shadow:
    inset 8px 0 0 #fff,
    inset -8px 0 0 #fff;
}

.nav-links {
  justify-content: center;
  gap: 34px;
  color: #4c4c4c;
  font-size: 14px;
  font-weight: 500;
}

.nav-actions {
  justify-self: end;
  gap: 10px;
}

.outline-action,
.dark-action,
.loading-action,
.dark-pill,
.light-pill,
.price-card a,
.surface-card a,
.way-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}

.outline-action {
  min-width: 140px;
  padding: 0 22px;
  border: 1px solid #d8d8d8;
}

.dark-action,
.dark-pill,
.price-card a,
.surface-card a {
  min-width: 72px;
  padding: 0 22px;
  background: #0b0b0b;
  color: #fff;
}

.hero {
  display: flex;
  min-height: 405px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 36px;
  overflow: hidden;
  background: transparent;
  text-align: center;
}

.hero::before,
.hero::after {
  display: none;
}

.codex-icon {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(39, 92, 143, 0.16), 0 0 0 12px rgba(255, 255, 255, 0.72);
}

.codex-icon img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.hero h1 {
  margin-top: 42px;
  font-size: clamp(54px, 5vw, 68px);
  font-weight: 520;
  line-height: 0.96;
}

.hero p {
  margin-top: 21px;
  font-size: 23px;
  font-weight: 650;
}

.loading-action {
  min-width: 168px;
  margin-top: 34px;
  background: #0b0b0b;
  color: #fff;
}

.trusted {
  width: min(1220px, calc(100% - 80px));
  margin: 0 auto 44px;
  text-align: center;
}

.trusted > p {
  color: rgba(0, 0, 0, 0.58);
  font-size: 17px;
}

.logo-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 34px;
}

.logo-row img,
.virgin-logo {
  width: 160px;
  height: 54px;
  margin: 0 auto;
  object-fit: contain;
  opacity: 0.68;
  filter: grayscale(1);
}

.virgin-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.68);
  font-size: 25px;
  font-weight: 560;
  letter-spacing: 0;
}

.ways {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 150px;
  text-align: center;
}

.ways h2 {
  font-size: 20px;
  font-weight: 600;
}

.ways-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.way-card {
  min-height: 214px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 54px rgba(37, 53, 137, 0.08);
  text-align: left;
}

.way-card img {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
}

.way-card h3 {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.35;
}

.way-card p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
}

.way-card a {
  width: 100%;
  margin-top: 28px;
  border: 1px solid #d9d9d9;
}

.feature-stack {
  width: min(1370px, calc(100% - 96px));
  margin: 0 auto;
}

.feature-stack > h2,
.pricing > h2,
.center-heading h2 {
  text-align: center;
  font-size: clamp(42px, 5.2vw, 66px);
  font-weight: 620;
  line-height: 1.06;
}

.feature {
  display: grid;
  grid-template-columns: minmax(240px, 0.74fr) minmax(580px, 1.56fr);
  gap: 72px;
  align-items: center;
  margin-top: 110px;
}

.feature-right {
  grid-template-columns: minmax(580px, 1.56fr) minmax(240px, 0.74fr);
}

.feature img {
  width: 100%;
  border-radius: 8px;
}

.feature-copy {
  max-width: 360px;
}

.feature-copy h3 {
  font-size: clamp(30px, 2.8vw, 42px);
  font-weight: 650;
  line-height: 1.15;
}

.feature-copy p {
  margin-top: 30px;
  color: #222;
  font-size: 20px;
  line-height: 1.65;
}

.pricing {
  width: min(1350px, calc(100% - 96px));
  margin: 150px auto 0;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 84px;
}

.price-card {
  display: flex;
  min-height: 396px;
  flex-direction: column;
  padding: 30px 30px 34px;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.price-card h3 {
  font-size: 34px;
  font-weight: 560;
}

.price-card p {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.6;
}

.price-card strong {
  margin-top: auto;
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 540;
  line-height: 1;
}

.price-card strong span {
  margin-left: 6px;
  font-size: 16px;
  font-weight: 400;
}

.price-card a {
  width: 100%;
  margin-top: 22px;
}

.surfaces,
.teams {
  width: min(1280px, calc(100% - 96px));
  margin: 150px auto 0;
}

.center-heading {
  text-align: center;
}

.center-heading p {
  margin-top: 28px;
  font-size: 20px;
}

.dark-pill {
  margin-top: 32px;
}

.surface-grid,
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 96px;
}

.surface-card {
  padding: 14px 14px 24px;
  border-radius: 6px;
  background: #f1f1f1;
}

.surface-card img {
  width: 100%;
  border-radius: 7px;
}

.surface-card h3 {
  margin: 24px 12px 20px;
  font-size: 31px;
  line-height: 1.12;
}

.surface-card a {
  width: calc(100% - 24px);
  margin: 0 12px;
}

.teams {
  margin-top: 160px;
}

.light-pill {
  margin-top: 34px;
  padding: 0 28px;
  background: #e9e9e9;
}

.team-grid article {
  min-height: 276px;
  padding: 36px 30px;
  border-radius: 18px;
  background: #f4f4f6;
}

.team-grid span {
  font-size: 28px;
  font-family: "SFMono-Regular", Consolas, monospace;
}

.team-grid h3 {
  margin-top: 46px;
  font-size: 31px;
  line-height: 1.16;
}

.team-grid p {
  margin-top: 24px;
  color: #4d4d4d;
  font-size: 17px;
  line-height: 1.55;
}

.final-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 350px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 160px;
  overflow: hidden;
  background: #fffaff;
  text-align: center;
}

.final-cta::before,
.final-cta::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.final-cta::before {
  inset: -28% -8%;
  display: block;
  background:
    radial-gradient(ellipse at 10% 44%, rgba(50, 122, 176, 0.78) 0 12%, transparent 30%),
    radial-gradient(ellipse at 34% 22%, rgba(84, 212, 231, 0.66) 0 12%, transparent 27%),
    radial-gradient(ellipse at 58% 50%, rgba(236, 184, 247, 0.58) 0 13%, transparent 28%),
    radial-gradient(ellipse at 82% 62%, rgba(65, 190, 224, 0.7) 0 13%, transparent 31%);
  opacity: 0.72;
  will-change: transform, background-position, mask-position, -webkit-mask-position;
  -webkit-mask-image: radial-gradient(circle, #000 0 3.15px, transparent 3.45px);
  mask-image: radial-gradient(circle, #000 0 3.15px, transparent 3.45px);
  -webkit-mask-size: 9px 9px;
  mask-size: 9px 9px;
  animation: generated-halftone-drift 3.6s linear infinite reverse;
}

.final-cta::after {
  inset: -35%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.9), transparent 30%),
    linear-gradient(to right, rgba(255, 255, 255, 0.48), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.48));
  opacity: 0.88;
}

.final-cta > :not(.halftone-canvas) {
  position: relative;
  z-index: 1;
}

.final-cta .cta-halftone {
  z-index: 0;
  opacity: 0.52;
}

.final-cta h2 {
  font-size: clamp(42px, 5vw, 66px);
  font-weight: 590;
}

.final-cta p {
  margin-top: 26px;
  font-size: 20px;
}

.final-cta .dark-action {
  margin-top: 32px;
}

@keyframes generated-halftone-drift {
  0% {
    transform: translate3d(-2.4%, -1.2%, 0) scale(1.035) skewX(-0.6deg);
    background-position:
      -4% 44%,
      12% -2%,
      30% 1%,
      42% 47%,
      68% 54%,
      92% 24%,
      99% 72%,
      14% 86%,
      25% 48%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  25% {
    transform: translate3d(1.1%, 0.8%, 0) scale(1.06) skewX(0.35deg);
    background-position:
      6% 39%,
      21% 6%,
      35% -3%,
      51% 41%,
      60% 62%,
      82% 34%,
      89% 77%,
      24% 80%,
      58% 52%;
    -webkit-mask-position: 8px 3px;
    mask-position: 8px 3px;
  }

  50% {
    transform: translate3d(2.8%, -0.6%, 0) scale(1.045) skewX(0.8deg);
    background-position:
      11% 47%,
      18% 10%,
      42% 4%,
      40% 51%,
      72% 56%,
      88% 31%,
      84% 70%,
      18% 88%,
      78% 49%;
    -webkit-mask-position: 17px 8px;
    mask-position: 17px 8px;
  }

  75% {
    transform: translate3d(-0.9%, 1.4%, 0) scale(1.065) skewX(-0.25deg);
    background-position:
      2% 36%,
      14% 5%,
      38% -2%,
      48% 44%,
      63% 61%,
      94% 29%,
      91% 80%,
      20% 82%,
      48% 55%;
    -webkit-mask-position: 25px 12px;
    mask-position: 25px 12px;
  }

  100% {
    transform: translate3d(-2.4%, -1.2%, 0) scale(1.035) skewX(-0.6deg);
    background-position:
      -4% 44%,
      12% -2%,
      30% 1%,
      42% 47%,
      68% 54%,
      92% 24%,
      99% 72%,
      14% 86%,
      25% 48%;
    -webkit-mask-position: 36px 18px;
    mask-position: 36px 18px;
  }
}

@keyframes gradient-drift {
  0% {
    background-position:
      0% 50%,
      46% 28%,
      84% 46%,
      28% 80%,
      0% 50%;
    transform: translate3d(-5%, -1%, 0) scale(1.09) rotate(0deg);
  }

  48% {
    background-position:
      18% 44%,
      55% 34%,
      73% 55%,
      39% 66%,
      50% 50%;
    transform: translate3d(3%, 2%, 0) scale(1.13) rotate(3deg);
  }

  100% {
    background-position:
      34% 60%,
      42% 46%,
      92% 38%,
      22% 72%,
      100% 50%;
    transform: translate3d(5%, -2%, 0) scale(1.11) rotate(-2deg);
  }
}

@keyframes light-sweep {
  0% {
    opacity: 0.62;
    transform: translate3d(12%, -8%, 0) rotate(-8deg) scale(1.08);
  }

  50% {
    opacity: 0.9;
    transform: translate3d(-2%, 4%, 0) rotate(2deg) scale(1.18);
  }

  100% {
    opacity: 0.72;
    transform: translate3d(-10%, -1%, 0) rotate(7deg) scale(1.1);
  }
}

@keyframes gif-halftone-source {
  0% {
    background-position: 46% 0%;
    transform: translate3d(-2%, -1%, 0) scale(1.04);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  45% {
    background-position: 54% 5%;
    transform: translate3d(2%, 1.5%, 0) scale(1.08);
    -webkit-mask-position: 16px 8px;
    mask-position: 16px 8px;
  }

  100% {
    background-position: 50% 10%;
    transform: translate3d(3%, -1%, 0) scale(1.05);
    -webkit-mask-position: 30px 18px;
    mask-position: 30px 18px;
  }
}

@keyframes halftone-left-drift {
  0% {
    opacity: 0.72;
    transform: translate3d(-7%, -5%, 0) scale(1.02) skewY(-2deg);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  45% {
    opacity: 0.94;
    transform: translate3d(7%, 4%, 0) scale(1.16) skewY(3deg);
    -webkit-mask-position: 16px 8px;
    mask-position: 16px 8px;
  }

  100% {
    opacity: 0.9;
    transform: translate3d(13%, -1%, 0) scale(1.1) skewY(-1deg);
    -webkit-mask-position: 27px 17px;
    mask-position: 27px 17px;
  }
}

@keyframes halftone-top-drift {
  0% {
    transform: translate3d(-8%, -5%, 0) scale(1.02) skewX(2deg);
    -webkit-mask-position: 3px 0;
    mask-position: 3px 0;
  }

  50% {
    transform: translate3d(7%, 8%, 0) scale(1.18) skewX(-3deg);
    -webkit-mask-position: 18px 9px;
    mask-position: 18px 9px;
  }

  100% {
    transform: translate3d(15%, 2%, 0) scale(1.12) skewX(1deg);
    -webkit-mask-position: 30px 21px;
    mask-position: 30px 21px;
  }
}

@keyframes halftone-center-drift {
  0% {
    opacity: 0.62;
    transform: translate3d(-10%, 4%, 0) scale(0.98) skewY(2deg);
    -webkit-mask-position: 0 6px;
    mask-position: 0 6px;
  }

  42% {
    opacity: 0.9;
    transform: translate3d(4%, -7%, 0) scale(1.15) skewY(-3deg);
    -webkit-mask-position: 20px 0;
    mask-position: 20px 0;
  }

  100% {
    opacity: 0.82;
    transform: translate3d(12%, 3%, 0) scale(1.08) skewY(2deg);
    -webkit-mask-position: 31px 15px;
    mask-position: 31px 15px;
  }
}

@keyframes halftone-right-drift {
  0% {
    transform: translate3d(8%, -4%, 0) scale(1.02) skewY(-2deg);
    -webkit-mask-position: 6px 3px;
    mask-position: 6px 3px;
  }

  48% {
    transform: translate3d(-8%, 6%, 0) scale(1.18) skewY(3deg);
    -webkit-mask-position: 22px 11px;
    mask-position: 22px 11px;
  }

  100% {
    transform: translate3d(-14%, -1%, 0) scale(1.09) skewY(-1deg);
    -webkit-mask-position: 31px 24px;
    mask-position: 31px 24px;
  }
}

@keyframes halftone-bottom-drift {
  0% {
    opacity: 0.68;
    transform: translate3d(-8%, 4%, 0) scale(1.02) skewX(-2deg);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  52% {
    opacity: 0.9;
    transform: translate3d(7%, -5%, 0) scale(1.18) skewX(3deg);
    -webkit-mask-position: 18px 13px;
    mask-position: 18px 13px;
  }

  100% {
    opacity: 0.84;
    transform: translate3d(14%, 2%, 0) scale(1.08) skewX(-1deg);
    -webkit-mask-position: 29px 20px;
    mask-position: 29px 20px;
  }
}

@keyframes halftone-pulse {
  0%,
  100% {
    filter: saturate(0.98) contrast(0.98);
  }

  50% {
    filter: saturate(1.35) contrast(1.12);
  }
}

@keyframes wave-sweep-one {
  0% {
    opacity: 0.34;
    transform: translate3d(-8%, 22px, 0) rotate(-3deg) scaleY(0.72);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  40% {
    opacity: 0.68;
    transform: translate3d(0%, -28px, 0) rotate(2deg) scaleY(1.2);
    -webkit-mask-position: 18px 8px;
    mask-position: 18px 8px;
  }

  100% {
    opacity: 0.46;
    transform: translate3d(9%, 18px, 0) rotate(-1deg) scaleY(0.86);
    -webkit-mask-position: 34px 19px;
    mask-position: 34px 19px;
  }
}

@keyframes wave-sweep-two {
  0% {
    opacity: 0.26;
    transform: translate3d(9%, -16px, 0) rotate(4deg) scaleY(0.78);
    -webkit-mask-position: 7px 3px;
    mask-position: 7px 3px;
  }

  55% {
    opacity: 0.58;
    transform: translate3d(0%, 34px, 0) rotate(-2deg) scaleY(1.28);
    -webkit-mask-position: 22px 15px;
    mask-position: 22px 15px;
  }

  100% {
    opacity: 0.34;
    transform: translate3d(-10%, -12px, 0) rotate(3deg) scaleY(0.84);
    -webkit-mask-position: 36px 26px;
    mask-position: 36px 26px;
  }
}

@keyframes final-halftone-drift {
  0% {
    transform: translate3d(-12%, -5%, 0) scale(1.04) skewY(-2deg);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  45% {
    transform: translate3d(3%, 6%, 0) scale(1.18) skewY(3deg);
    -webkit-mask-position: 20px 11px;
    mask-position: 20px 11px;
  }

  100% {
    transform: translate3d(12%, -2%, 0) scale(1.1) skewY(-1deg);
    -webkit-mask-position: 35px 23px;
    mask-position: 35px 23px;
  }
}

@keyframes page-gradient-drift {
  0% {
    background-position:
      0% 0%,
      76% 0%,
      100% 48%,
      46% 64%,
      7% 78%,
      0% 50%;
    transform: translate3d(-2%, -1%, 0) scale(1.02);
  }

  48% {
    background-position:
      10% 7%,
      67% 8%,
      93% 42%,
      54% 58%,
      13% 70%,
      50% 50%;
    transform: translate3d(2%, 1%, 0) scale(1.06);
  }

  100% {
    background-position:
      17% 2%,
      82% 4%,
      88% 53%,
      42% 70%,
      21% 74%,
      100% 50%;
    transform: translate3d(3%, -2%, 0) scale(1.04);
  }
}

@keyframes page-sheen-drift {
  0% {
    opacity: 0.64;
    transform: translate3d(6%, -6%, 0) rotate(-7deg) scale(1.08);
  }

  50% {
    opacity: 0.9;
    transform: translate3d(-4%, 2%, 0) rotate(2deg) scale(1.16);
  }

  100% {
    opacity: 0.76;
    transform: translate3d(-10%, -1%, 0) rotate(7deg) scale(1.12);
  }
}

@keyframes petal-left-drift {
  0% {
    opacity: 0.7;
    transform: translate3d(-3%, -2%, 0) rotate(26deg) scale(1.04);
  }

  100% {
    opacity: 0.88;
    transform: translate3d(4%, 6%, 0) rotate(32deg) scale(1.13);
  }
}

@keyframes petal-top-drift {
  0% {
    transform: translate3d(-5%, -4%, 0) rotate(5deg) scale(1.08);
  }

  100% {
    transform: translate3d(4%, 8%, 0) rotate(12deg) scale(1.18);
  }
}

@keyframes petal-center-drift {
  0% {
    opacity: 0.54;
    transform: translate3d(-4%, 0, 0) rotate(-20deg) scale(1);
  }

  100% {
    opacity: 0.78;
    transform: translate3d(4%, -3%, 0) rotate(-13deg) scale(1.12);
  }
}

@keyframes petal-right-drift {
  0% {
    transform: translate3d(4%, -2%, 0) rotate(14deg) scale(1.04);
  }

  100% {
    transform: translate3d(-5%, 4%, 0) rotate(20deg) scale(1.12);
  }
}

@keyframes petal-bottom-drift {
  0% {
    opacity: 0.66;
    transform: translate3d(-4%, 2%, 0) rotate(-10deg) scale(1.04);
  }

  100% {
    opacity: 0.82;
    transform: translate3d(6%, -3%, 0) rotate(-4deg) scale(1.12);
  }
}

@keyframes hero-gradient-drift {
  0% {
    background-position:
      0% 36%,
      52% 16%,
      82% 44%,
      38% 72%,
      0% 50%;
    transform: translate3d(-4%, -2%, 0) scale(1.08) rotate(0deg);
  }

  52% {
    background-position:
      18% 28%,
      45% 27%,
      72% 52%,
      48% 64%,
      50% 50%;
    transform: translate3d(4%, 1%, 0) scale(1.13) rotate(3deg);
  }

  100% {
    background-position:
      34% 42%,
      60% 20%,
      90% 34%,
      28% 78%,
      100% 50%;
    transform: translate3d(5%, -3%, 0) scale(1.1) rotate(-2deg);
  }
}

@keyframes hero-light-sweep {
  0% {
    opacity: 0.58;
    transform: translate3d(9%, -8%, 0) rotate(-8deg) scale(1.08);
  }

  50% {
    opacity: 0.9;
    transform: translate3d(-3%, 2%, 0) rotate(3deg) scale(1.18);
  }

  100% {
    opacity: 0.64;
    transform: translate3d(-9%, -2%, 0) rotate(6deg) scale(1.1);
  }
}

.footer {
  display: grid;
  grid-template-columns: 1fr 200px 260px;
  gap: 56px;
  min-height: 300px;
  padding: 62px 96px;
  border-top: 1px solid #e4e4e4;
}

.footer-mark {
  width: 34px;
  height: 34px;
}

.footer h4 {
  margin: 0 0 22px;
  color: #777;
  font-size: 15px;
  font-weight: 500;
}

.footer a {
  display: block;
  margin-top: 18px;
  font-size: 16px;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
    padding: 0 22px;
  }

  .nav-links {
    display: none;
  }

  .outline-action {
    display: none;
  }

  .logo-row,
  .ways-grid,
  .feature,
  .feature-right,
  .price-grid,
  .surface-grid,
  .team-grid,
  .footer {
    grid-template-columns: 1fr;
  }

  .feature-stack,
  .pricing,
  .surfaces,
  .teams {
    width: min(100% - 40px, 760px);
  }

  .feature-copy {
    max-width: none;
  }

  .footer {
    padding: 42px 28px;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 470px;
  }

  .trusted {
    width: min(100% - 40px, 520px);
  }

  .logo-row {
    gap: 24px;
  }

  .price-card,
  .team-grid article {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .final-cta::after,
  .reference-page::before,
  .reference-page::after,
  .top-video-field::after,
  .hero::before,
  .hero::after,
  .petal {
    animation: none;
  }
}