:root {
  --ink: #080a0c;
  --paper: #f0eee9;
  --acid: #f0eee9;
  --pink: #b7b7b7;
  --page: clamp(1.5rem, 4vw, 5.4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { color: inherit; }
a { text-decoration: none; }
button { font: inherit; }

.page-noise {
  position: fixed;
  z-index: 20;
  inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.site-header {
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 5.4rem;
  padding: 0 var(--page);
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: min-height 300ms ease, background 300ms ease, backdrop-filter 300ms ease;
}
.site-header.is-scrolled {
  min-height: 4.4rem;
  background: rgba(8,10,12,.76);
  backdrop-filter: blur(1.1rem);
}
.wordmark {
  width: fit-content;
  font-family: "Manrope", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .22em;
}
.wordmark span {
  color: var(--pink);
  font-family: "DM Mono", monospace;
  font-size: .48em;
  letter-spacing: .04em;
  vertical-align: top;
}
.site-nav {
  display: flex;
  gap: clamp(1.6rem,3vw,3.5rem);
  color: rgba(255,255,255,.72);
  font-size: .7rem;
}
.site-nav a { transition: color 180ms ease; }
.site-nav a:hover { color: #fff; }
.nav-offer {
  transition: opacity 180ms ease, visibility 180ms ease;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: "DM Mono", monospace;
  font-size: .68rem;
  text-transform: uppercase;
}
.nav-offer.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-offer b {
  padding: .45rem .6rem;
  color: var(--ink);
  background: var(--acid);
  font-weight: 500;
}

.hero,
.site-header {
  color: var(--paper);
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 8rem var(--page) 5rem;
  background: #0e1013;
}
.scene, .scene__pointer, .scene__image, .scene__shade, .scene__haze {
  position: absolute;
  inset: 0;
}
.scene { z-index: -2; overflow: hidden; }
.scene__pointer { inset: -4%; will-change: transform; }
.scene__pointer--city {
  transform: translate3d(calc(var(--scene-x,0) * -4px),calc(var(--scene-y,0) * -3px),0);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.scene__pointer--sign {
  z-index: 5;
  transform: translate3d(calc(var(--scene-x,0) * -11px),calc(var(--scene-y,0) * -8px),0);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.scene__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
.scene__image--city { animation: city-depth 7s cubic-bezier(.65,0,.35,1) infinite alternate; }
.scene__image--sign {
  z-index: 5;
  animation: sign-depth 7s cubic-bezier(.65,0,.35,1) infinite alternate;
}
.scene__shade {
  z-index: 4;
  background:
    linear-gradient(90deg,rgba(6,8,10,.92) 0%,rgba(6,8,10,.72) 30%,rgba(6,8,10,.17) 55%,rgba(6,8,10,.08) 78%),
    linear-gradient(180deg,rgba(6,8,10,.58) 0%,transparent 28%,transparent 68%,rgba(6,8,10,.7) 100%);
}
.scene__haze {
  z-index: 3;
  opacity: .24;
  background: radial-gradient(circle at 72% 45%,rgba(205,210,218,.18),transparent 31%);
  mix-blend-mode: screen;
  animation: haze-pulse 7s ease-in-out infinite alternate;
}
.hero__content {
  position: relative;
  z-index: 5;
  width: min(45rem,50vw);
}
.kicker, .overline, .section-tag, .requirement {
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
}
.kicker {
  margin: 0 0 1.6rem;
  color: rgba(255,255,255,.56);
  font-size: .62rem;
  letter-spacing: .13em;
}
.kicker span { margin-right: .8rem; color: var(--acid); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  letter-spacing: -.06em;
}
h1 {
  max-width: 10ch;
  margin-bottom: 1.65rem;
  font-size: clamp(4.2rem,6.35vw,7.5rem);
  line-height: .9;
}
h1 em {
  display: block;
  color: rgba(255,255,255,.64);
  font-family: inherit;
  font-size: .62em;
  font-style: normal;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.hero__intro {
  max-width: 38rem;
  margin-bottom: 2rem;
  color: rgba(255,255,255,.67);
  font-size: clamp(.92rem,1vw,1.05rem);
  line-height: 1.7;
}
.hero__buy { display: flex; align-items: stretch; gap: 1.25rem; }
.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  min-width: 18.6rem;
  padding: 1.15rem 1.2rem 1.15rem 1.35rem;
  border: 0;
  font-family: "DM Mono", monospace;
  font-size: .67rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  transition: transform 180ms ease;
}
.button:hover svg { transform: translateX(.25rem); }
.button--light { color: var(--ink); background: var(--paper); }
.button--acid { width: 100%; color: var(--ink); background: var(--acid); }
.hero__price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 6rem;
}
.hero__price span {
  color: rgba(255,255,255,.44);
  font-family: "DM Mono", monospace;
  font-size: .58rem;
  text-decoration: line-through;
  text-transform: uppercase;
}
.hero__price strong {
  margin-top: .25rem;
  font-family: "Manrope", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
}
.requirement {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1rem 0 0;
  color: rgba(255,255,255,.4);
  font-size: .52rem;
  letter-spacing: .08em;
}
.requirement i { width: 2px; height: 2px; border-radius: 50%; background: var(--acid); }
.hero__rail {
  position: absolute;
  z-index: 6;
  right: var(--page);
  bottom: 3rem;
  display: flex;
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(8,10,12,.22);
  backdrop-filter: blur(.6rem);
}
.hero__rail div { min-width: 8.8rem; padding: .9rem 1.1rem; border-right: 1px solid rgba(255,255,255,.14); }
.hero__rail div:last-child { border-right: 0; }
.hero__rail strong, .hero__rail span { display: block; }
.hero__rail strong { font-family: "DM Mono", monospace; font-size: .92rem; font-weight: 400; }
.hero__rail span { margin-top: .25rem; color: rgba(255,255,255,.42); font-size: .58rem; }
.hero__scroll {
  position: absolute;
  z-index: 6;
  bottom: 2.2rem;
  left: var(--page);
  display: flex;
  align-items: center;
  gap: .7rem;
  color: rgba(255,255,255,.42);
  font-family: "DM Mono", monospace;
  font-size: .53rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__scroll span { position: relative; width: 2.2rem; height: 1px; overflow: hidden; background: rgba(255,255,255,.2); }
.hero__scroll span::after { position: absolute; inset: 0; content: ""; background: #fff; animation: scroll-pulse 2.3s ease-in-out infinite; }

.section { padding: clamp(7rem,11vw,11rem) var(--page); }
.intro {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4rem;
  min-height: 86vh;
  align-items: start;
  color: #17191c;
  background: var(--paper);
}
.section-tag {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #72767d;
  font-size: .58rem;
  letter-spacing: .11em;
}
.section-tag span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.intro__copy { max-width: 64rem; }
.overline { margin-bottom: 1.35rem; color: #777b81; font-size: .62rem; letter-spacing: .11em; }
.intro h2, .section-heading h2, .spectrum h2, .compatibility h2, .offer h2, .faq h2 {
  margin-bottom: 1.6rem;
  font-size: clamp(3.3rem,6vw,7rem);
  line-height: .98;
}
.intro__copy > p:last-child {
  max-width: 43rem;
  margin: 3rem 0 0 auto;
  color: #5e6268;
  font-size: clamp(1rem,1.3vw,1.25rem);
  line-height: 1.75;
}
.ticker { overflow: hidden; border-block: 1px solid #2a2d32; background: #0d0f12; }
.ticker__track { display: flex; align-items: center; width: max-content; padding: 1.2rem 0; animation: ticker 36s linear infinite; }
.ticker span {
  margin: 0 1.5rem;
  color: rgba(255,255,255,.68);
  font-family: "DM Mono", monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ticker i { width: 4px; height: 4px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 .7rem var(--pink); }

.vault {
  background: radial-gradient(circle at 80% 25%,rgba(170,176,186,.10),transparent 28%),var(--ink);
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4rem;
  margin-bottom: 5rem;
}
.section-heading > div:last-child { max-width: 61rem; }
.section-heading h2 { margin-bottom: 0; }
.vault .overline, .value .overline { color: #6f737b; }
.filter-bar { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.filter-bar button {
  padding: .65rem 1rem;
  border: 1px solid #30343a;
  border-radius: 100vw;
  color: #777c84;
  background: transparent;
  font-family: "DM Mono", monospace;
  font-size: .58rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: 180ms ease;
}
.filter-bar button:hover, .filter-bar button.is-active { border-color: var(--paper); color: var(--ink); background: var(--paper); }
.bank-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: #2c2f35;
  border: 1px solid #2c2f35;
}
.bank-card {
  position: relative;
  isolation: isolate;
  contain: paint;
  display: flex;
  flex-direction: column;
  min-height: 25rem;
  padding: 1.5rem;
  overflow: hidden;
  background: #101318;
}

.bank-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(12, 15, 19, .08), rgba(12, 15, 19, .72) 58%, #101318 94%),
    linear-gradient(90deg, rgba(12, 15, 19, .28), transparent);
  pointer-events: none;
}

.bank-card__art {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .31;
  filter: grayscale(1) contrast(1.14) brightness(.72);
}

.bank-card > :not(.bank-card__art) {
  position: relative;
  z-index: 2;
}

.bank-card--keyscape .bank-card__meta::after {
  position: absolute;
  right: 0;
  bottom: 2rem;
  content: "Keyscape required";
  color: #b7b7b7;
  font-family: "DM Mono", monospace;
  font-size: .5rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bank-card.is-hidden { display: none; }
.bank-card__top, .bank-card__meta {
  display: flex;
  justify-content: space-between;
  font-family: "DM Mono", monospace;
  font-size: .56rem;
  text-transform: uppercase;
}
.bank-card__top { color: #6f747d; }
.bank-card__top b { color: var(--acid); font-weight: 400; }
.bank-card h3 {
  max-width: 8ch;
  margin: auto 0 1.2rem;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.1rem,3vw,3.5rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .94;
}
.bank-card p {
  max-width: 24rem;
  min-height: 4.5rem;
  margin-bottom: 2rem;
  color: #858991;
  font-size: .78rem;
  line-height: 1.65;
}
.bank-card__meta { padding-top: 1rem; border-top: 1px solid #2c3036; color: #656a72; }
.bank-card__meta span:last-child { color: #a9adb5; }
.vault__footer {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: end;
  padding-top: 2rem;
}
.vault__footer p { max-width: 51rem; margin: 0; color: #656a72; font-size: .72rem; line-height: 1.8; }
.vault__footer a {
  justify-self: end;
  padding-bottom: .35rem;
  border-bottom: 1px solid #4d525b;
  font-family: "DM Mono", monospace;
  font-size: .62rem;
  text-transform: uppercase;
}
.vault__footer a span { margin-left: 1rem; color: var(--pink); }

.spectrum { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 92vh; background: #e6e2da; }
.spectrum__visual { position: relative; min-height: 46rem; overflow: hidden; background: #111419; }
.spectrum__visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(135deg,rgba(255,255,255,.08),transparent 48%); }
.spectrum__grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(to bottom,black,transparent);
}
.waveforms {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background: #0b1015;
}
.waveforms__canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(.8) contrast(1.04);
}
.waveforms::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.018) 3px, transparent 4px),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 12%, transparent 88%, rgba(0,0,0,.16));
  mix-blend-mode: screen;
  pointer-events: none;
}.spectrum__visual p {
  position: absolute;
  z-index: 2;
  right: 2rem;
  bottom: -1.3rem;
  margin: 0;
  color: rgba(255,255,255,.08);
  font-family: "Manrope", sans-serif;
  font-size: clamp(8rem,17vw,19rem);
  font-weight: 500;
  letter-spacing: -.09em;
}
.spectrum__copy { align-self: center; padding: 7rem var(--page); color: #17191c; }
.spectrum h2, .compatibility h2 { margin-top: 3rem; font-size: clamp(3rem,5vw,6rem); }
.spectrum__copy > p { max-width: 34rem; color: #61656b; line-height: 1.75; }
.spectrum ul { margin: 3rem 0 0; padding: 0; border-top: 1px solid #c0bdb7; list-style: none; }
.spectrum li { display: flex; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid #c0bdb7; font-size: .82rem; }
.spectrum li span { color: #929087; font-family: "DM Mono", monospace; font-size: .62rem; }

.value { background: #0b0d10; }
.value__layout { display: grid; grid-template-columns: 1.4fr .6fr; gap: 8vw; align-items: center; }
.value__stack { border-top: 1px solid #363a41; }
.value-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid #2a2e34;
}
.value-row span { color: #777c85; font-size: .72rem; }
.value-row strong { font-family: "DM Mono", monospace; font-size: 1.1rem; font-weight: 400; }
.value-row--total { margin-top: 1rem; padding: 1.75rem; border: 1px solid rgba(217,255,86,.4); background: rgba(217,255,86,.04); }
.value-row--total span, .value-row--total strong { color: var(--acid); }
.value-row--total strong { font-family: "Manrope", sans-serif; font-size: 2.5rem; letter-spacing: -.05em; }
.value__number {
  display: block;
  color: var(--acid);
  font-family: "Manrope", sans-serif;
  font-size: clamp(6rem,12vw,11rem);
  font-weight: 500;
  letter-spacing: -.1em;
  line-height: .8;
}
.value__statement p { max-width: 22rem; margin: 2rem 0 0 .7rem; color: #777c85; font-size: .75rem; line-height: 1.7; }

.compatibility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  padding: clamp(7rem,11vw,11rem) var(--page);
  color: #17191c;
  background: #d8d6d1;
}
.compatibility__copy { align-self: center; }
.specs { border-top: 1px solid #a9a8a4; }
.specs div { display: grid; grid-template-columns: .75fr 1.25fr; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid #a9a8a4; }
.specs span { color: #7d7d79; font-family: "DM Mono", monospace; font-size: .57rem; text-transform: uppercase; }
.specs strong { font-size: .82rem; font-weight: 500; }

.offer {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 10vw;
  align-items: center;
  overflow: hidden;
  background: #101218;
}
.offer__ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 12% 52%,rgba(180,186,196,.18),transparent 30%),radial-gradient(circle at 82% 40%,rgba(120,126,136,.12),transparent 26%);
}
.offer__copy { max-width: 53rem; }
.offer h2 { margin-bottom: 2rem; }
.offer__copy > p:last-child { max-width: 35rem; color: #90949c; line-height: 1.7; }
.checkout-card {
  padding: clamp(1.5rem,3vw,2.5rem);
  border: 1px solid #353942;
  background: rgba(12,14,18,.72);
  box-shadow: 0 2rem 7rem rgba(0,0,0,.3);
  backdrop-filter: blur(1rem);
}
.checkout-card__head, .checkout-card__price { display: flex; justify-content: space-between; align-items: flex-start; }
.checkout-card__head span, .checkout-card__price span {
  color: #6f747d;
  font-family: "DM Mono", monospace;
  font-size: .55rem;
  text-transform: uppercase;
}
.checkout-card h3 {
  margin: .4rem 0 0;
  font-family: "Manrope", sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: -.04em;
}
.checkout-card__badge { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid #4b5059; border-radius: 50%; }
.checkout-card ul { margin: 2.5rem 0; padding: 0; border-top: 1px solid #30343b; list-style: none; }
.checkout-card li { padding: .9rem 0; border-bottom: 1px solid #30343b; color: #a3a7ae; font-size: .72rem; }
.checkout-card li span { display: inline-block; width: 4.2rem; color: var(--paper); font-family: "DM Mono", monospace; }
.checkout-card__price { align-items: end; margin-bottom: 1.5rem; }
.checkout-card__price div span { display: block; margin-bottom: .25rem; }
.checkout-card__price s { color: #7c8189; font-family: "DM Mono", monospace; font-size: .82rem; }
.checkout-card__price > strong {
  color: var(--paper);
  font-family: "Manrope", sans-serif;
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .9;
}
.checkout-card__note {
  margin: .9rem 0 0;
  color: #5f646c;
  font-family: "DM Mono", monospace;
  font-size: .5rem;
  text-align: center;
  text-transform: uppercase;
}

.faq {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 9vw;
  color: #17191c;
  background: var(--paper);
}
.faq h2 { margin-top: 3rem; font-size: clamp(3.5rem,5vw,6rem); }
.accordion { border-top: 1px solid #b7b5b0; }
.accordion article { border-bottom: 1px solid #b7b5b0; }
.accordion button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.4rem 0;
  border: 0;
  color: #222428;
  background: transparent;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
}
.accordion button i { position: relative; width: 1rem; height: 1rem; }
.accordion button i::before, .accordion button i::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: currentColor;
  transition: transform 240ms ease;
}
.accordion button i::after { transform: rotate(90deg); }
.accordion article.is-open button i::after { transform: rotate(0); }
.accordion__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; }
.accordion article.is-open .accordion__answer { grid-template-rows: 1fr; }
.accordion__answer p {
  max-width: 39rem;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: #66696e;
  font-size: .78rem;
  line-height: 1.75;
}
.accordion article.is-open .accordion__answer p { padding-bottom: 1.5rem; }

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 10rem;
  padding: 2rem var(--page) 6rem;
  border-top: 1px solid #25282e;
  background: var(--ink);
}
.site-footer p, .site-footer > a:last-child {
  margin: 0;
  color: #5d626a;
  font-family: "DM Mono", monospace;
  font-size: .55rem;
  text-transform: uppercase;
}
.site-footer > a:last-child { justify-self: end; }
.sticky-offer {
  position: fixed;
  z-index: 15;
  right: 1.2rem;
  bottom: 1.2rem;
  left: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .8rem .75rem 1.1rem;
  border: 1px solid #343841;
  background: rgba(10,12,15,.88);
  box-shadow: 0 1rem 4rem rgba(0,0,0,.3);
  backdrop-filter: blur(1rem);
  opacity: 0;
  transform: translateY(calc(100% + 2rem));
  transition: opacity 300ms ease, transform 400ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.sticky-offer.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-offer > div { display: flex; align-items: center; gap: .9rem; }
.sticky-offer > div:first-child { align-items: flex-start; flex-direction: column; gap: .2rem; }
.sticky-offer span, .sticky-offer s {
  color: #666b73;
  font-family: "DM Mono", monospace;
  font-size: .53rem;
  text-transform: uppercase;
}
.sticky-offer strong { font-size: .72rem; font-weight: 500; }
.sticky-offer b { font-family: "DM Mono", monospace; font-size: 1rem; font-weight: 400; }
.sticky-offer a { padding: .8rem 1rem; color: var(--ink); background: var(--acid); font-family: "DM Mono", monospace; font-size: .59rem; text-transform: uppercase; }
.sticky-offer a span { margin-left: 1.5rem; color: inherit; }
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

@keyframes city-depth {
  from { transform: scale(1.035) translate3d(-.3%,.2%,0); }
  to { transform: scale(1.105) translate3d(.7%,-.45%,0); }
}
@keyframes sign-depth {
  from { transform: scale(1.04) translate3d(-.35%,.2%,0); }
  to { transform: scale(1.145) translate3d(1.5%,-.9%,0); }
}
@keyframes haze-pulse {
  from { opacity: .16; transform: scale(.96); }
  to { opacity: .31; transform: scale(1.06); }
}
@keyframes scroll-pulse {
  0%, 15% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}
@keyframes ticker { to { transform: translateX(-50%); } }
  to { transform: translateX(-20%); }
}
  to { transform: translateX(-16.666%); }
}

@media (max-width: 1100px) {
  .hero__content { width: min(42rem,62vw); }
  .hero__rail { display: none; }
  .bank-grid { grid-template-columns: repeat(2,1fr); }
  .offer { gap: 5vw; }
}
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .hero { align-items: end; }
  .hero__content { width: 100%; }
  h1 { font-size: clamp(3.8rem,15vw,6rem); }
  .scene__image { object-position: 62% center; }
  .intro, .section-heading, .spectrum, .value__layout, .compatibility, .offer, .faq { grid-template-columns: 1fr; }
  .hero__buy { display: grid; }
  .hero__price { display: none; }
  .button { width: 100%; }
  .intro, .section-heading { gap: 4rem; }
  .bank-grid { grid-template-columns: 1fr; }
  .vault__footer, .site-footer { grid-template-columns: 1fr; }
  .vault__footer a, .site-footer > a:last-child { justify-self: start; }
  .spectrum__visual { min-height: 35rem; }
  .sticky-offer > div:first-child, .sticky-offer s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}