:root {
  --paper: #f5f3ee;
  --paper2: #faf9f5;
  --ink: #171717;
  --mute: #5f5f5b;
  --blue: #4667e8;
  --coral: #e87966;
  --line: #d6d3cb;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --hero-ink: #f2f1eb;
  --hero-mute: #abb2b0;
  --hero-line: rgba(187, 224, 229, .58);
}

html { background: #050607; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  border-bottom: 1px solid rgba(226, 232, 228, .2);
  padding: 20px 3vw;
  color: var(--hero-ink);
  background: linear-gradient(180deg, rgba(3, 5, 6, .68), rgba(3, 5, 6, 0));
}

.site-header nav { grid-template-columns: 1fr auto 1fr; }
.brand strong { font-size: 17px; letter-spacing: -.04em; }
.brand span { color: rgba(226, 232, 228, .62); }
.nav-index { gap: 26px; color: rgba(242, 241, 235, .75); }
.nav-index a { transition: color .25s ease; }
.nav-index a:hover { color: #c4edf2; }
.nav-acquire { border-color: rgba(242, 241, 235, .82); }
.nav-acquire b, .acquire-link b, .final-cta b { color: #bdebf0; }

.hero {
  min-height: 100svh;
  height: max(720px, 100svh);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 6vw;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(130px, 17vh, 180px) 3vw clamp(62px, 8vh, 100px);
  background: #050607;
}

.hero-media,
.hero-media picture,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media { z-index: -3; overflow: hidden; }
.hero-media picture { display: block; }
.hero-media img { display: block; object-fit: cover; object-position: center center; transform: scale(1.01); animation: hero-zoom 26s ease-out both; }

.hero-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 6, 7, .96) 0%, rgba(4, 6, 7, .86) 32%, rgba(4, 6, 7, .42) 58%, rgba(4, 6, 7, .12) 100%),
    linear-gradient(0deg, rgba(4, 6, 7, .76) 0%, rgba(4, 6, 7, .04) 42%, rgba(4, 6, 7, .2) 100%),
    radial-gradient(ellipse at 75% 50%, transparent 25%, rgba(2, 3, 4, .22) 100%);
}

.hero-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(circle at 70% 48%, rgba(135, 207, 218, .08), transparent 30%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: 650px;
  padding: 0;
  color: var(--hero-ink);
  animation: hero-copy-in .9s .12s ease both;
}

.hero .eyebrow { color: var(--hero-mute); }
.hero .eyebrow i { color: #bdebf0; }

h1, h2 {
  font-family: "Arial Narrow", "Aptos Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
}

.hero h1 {
  max-width: none;
  font-size: clamp(52px, 5vw, 88px);
  line-height: .88;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.domain-name { margin: 30px 0 10px; color: #fff; font-size: 21px; letter-spacing: -.04em; }
.hero-lede { max-width: 385px; margin: 0; color: #c1c6c3; line-height: 1.55; }
.hero-actions { margin-top: 32px; }
.acquire-link { background: var(--hero-ink); color: #080a0a; transition: background .25s ease, color .25s ease, transform .25s ease; }
.acquire-link:hover { background: #c4edf2; color: #080a0a; transform: translateY(-2px); }
.text-link { border-color: rgba(242, 241, 235, .72); color: var(--hero-ink); transition: border-color .25s ease, color .25s ease; }
.text-link:hover { border-color: #bdebf0; color: #bdebf0; }

.hero-perception-layer {
  position: absolute;
  z-index: 1;
  inset: 14% 4% 13% 35%;
  pointer-events: none;
  opacity: .48;
}

.hero-perception-layer::before {
  content: "";
  position: absolute;
  top: 36%;
  left: 2%;
  width: 43%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hero-line), transparent);
  transform: rotate(-7deg);
  animation: perception-scan 22s ease-in-out infinite;
}

.perception-ray { position: absolute; display: block; height: 1px; transform-origin: left center; background: var(--hero-line); }
.ray-one { top: 47%; left: 25%; width: 28%; transform: rotate(-14deg); }
.ray-two { top: 61%; left: 38%; width: 18%; transform: rotate(15deg); opacity: .62; }
.ray-three { top: 30%; left: 61%; width: 15%; transform: rotate(90deg); opacity: .42; }
.perception-node { position: absolute; width: 5px; height: 5px; border: 1px solid #bdebf0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(189, 235, 240, .08); }
.node-one { top: 46%; left: 24.4%; }
.node-two { top: 60.3%; left: 55.5%; }

.hero-annotations {
  position: absolute;
  z-index: 4;
  inset: 112px 3vw 30px;
  pointer-events: none;
  color: rgba(218, 233, 229, .76);
  font: 10px/1.35 var(--mono);
  letter-spacing: .08em;
}

.annotation-top, .annotation-mid, .annotation-bottom { display: flex; gap: 24px; justify-content: space-between; }
.annotation-top { position: absolute; top: 0; right: 0; }
.annotation-mid { position: absolute; top: 56%; right: 5%; flex-direction: column; gap: 8px; align-items: flex-end; color: rgba(189, 235, 240, .84); }
.annotation-bottom { position: absolute; bottom: 0; right: 0; gap: 40px; color: rgba(218, 233, 229, .54); }
.annotation-top span:first-child, .annotation-mid span:first-child { color: #c4edf2; }

.decomposition { border-top: 1px solid rgba(23, 23, 23, .18); }
.meaning-section .statement i { color: #3048a9; border-color: #3048a9; }
.applications b { color: #3048a9; }
.physical-ai .index { color: #fff; }

@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.02); }
}

@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes perception-scan {
  0%, 100% { opacity: .25; transform: translateX(-3%) rotate(-7deg); }
  50% { opacity: .8; transform: translateX(9%) rotate(-7deg); }
}

@media (max-width: 850px) {
  .site-header { padding: 16px 20px; }
  .site-header nav { grid-template-columns: 1fr auto; }
  .nav-acquire { font-size: 12px; }
  .hero {
    height: max(680px, 100svh);
    min-height: 680px;
    display: flex;
    align-items: flex-end;
    padding: 126px 20px 54px;
  }
  .hero-media img { object-position: 63% center; }
  .hero-media::before {
    background:
      linear-gradient(180deg, rgba(4, 6, 7, .3) 0%, rgba(4, 6, 7, .58) 38%, rgba(4, 6, 7, .94) 78%, rgba(4, 6, 7, .98) 100%),
      linear-gradient(90deg, rgba(4, 6, 7, .7), rgba(4, 6, 7, .1));
  }
  .hero-copy { width: min(100%, 650px); }
  .hero h1 { max-width: none; font-size: clamp(39px, 10.4vw, 68px); white-space: normal; }
  .hero-lede { max-width: 330px; }
  .hero-perception-layer { inset: 17% -10% 27% 22%; opacity: .28; }
  .hero-annotations { inset: 96px 20px 22px; font-size: 9px; }
  .annotation-top { right: 0; gap: 12px; }
  .annotation-top span:last-child { display: none; }
  .annotation-mid { top: 32%; right: 1%; }
  .annotation-bottom { display: none; }
}

@media (max-width: 420px) {
  .brand strong { font-size: 15px; }
  .brand span { font-size: 8px; }
  .nav-acquire { font-size: 11px; }
  .hero { padding-bottom: 40px; }
  .hero h1 { font-size: clamp(38px, 10.2vw, 58px); }
  .domain-name { margin-top: 24px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-annotations { top: 84px; }
  .hero-perception-layer { inset: 13% -20% 36% 15%; }
}

@media (max-width: 480px) {
  .annotation-mid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img, .hero-copy, .hero-perception-layer::before { animation: none; }
}