:root {
  color-scheme: dark;
  --ink: oklch(98% 0.01 83);
  --soft: oklch(92% 0.025 82);
  --muted: oklch(80% 0.038 224);
  --dim: oklch(64% 0.044 222);
  --bg: oklch(16% 0.036 238);
  --bg-deep: oklch(10% 0.028 244);
  --bg-lift: oklch(21% 0.055 213);
  --teal: oklch(67% 0.13 184);
  --cyan: oklch(82% 0.12 211);
  --orange: oklch(74% 0.17 56);
  --amber: oklch(89% 0.105 83);
  --line: oklch(78% 0.08 200 / 0.23);
  --line-strong: oklch(84% 0.11 196 / 0.42);
  --shadow: 0 32px 90px oklch(7% 0.02 250 / 0.52);
  --max: 1160px;
  --pad: clamp(1.25rem, 3vw, 3.5rem);
  --radius: 1.35rem;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg-deep);
  color: var(--ink);
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, oklch(10% 0.028 244), oklch(18% 0.062 207) 48%, oklch(24% 0.07 181));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(90deg, oklch(78% 0.09 195 / .085) 1px, transparent 1px),
    linear-gradient(0deg, oklch(78% 0.09 195 / .06) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
}

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

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: .32rem;
}

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

p {
  color: var(--muted);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  z-index: 30;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--bg-deep);
  font-weight: 900;
}

.skip-link:focus {
  left: 1rem;
}

.hero {
  --mx: 72%;
  --my: 24%;
  position: relative;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(300px, 460px);
  column-gap: clamp(1.25rem, 3vw, 3rem);
  justify-content: center;
  align-items: end;
  overflow: hidden;
  padding: 8.4rem var(--pad) 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), oklch(86% 0.14 77 / .24), transparent 20rem),
    linear-gradient(135deg, var(--bg-deep), oklch(24% 0.078 204) 54%, oklch(62% 0.14 66) 150%);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .55;
  background-image:
    linear-gradient(116deg, transparent 0 47%, oklch(86% 0.12 203 / .18) 48%, transparent 49% 100%),
    linear-gradient(90deg, oklch(81% 0.10 204 / .14) 1px, transparent 1px);
  background-size: 180px 180px, 84px 84px;
  mask-image: linear-gradient(90deg, transparent, #000 17%, #000 82%, transparent);
  animation: grid-drift 18s linear infinite;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -12vw -10rem 44vw;
  z-index: -1;
  height: 24rem;
  background:
    linear-gradient(90deg, transparent, oklch(75% 0.14 183 / .26), transparent),
    repeating-linear-gradient(90deg, transparent 0 18px, oklch(86% 0.12 203 / .18) 19px 20px);
  transform: rotate(-8deg);
  opacity: .78;
}

.hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.data-line,
.data-node {
  position: absolute;
  display: block;
  pointer-events: none;
}

.data-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .58;
}

.data-line--one {
  --line-rotation: -16deg;
  width: min(42vw, 520px);
  right: 10vw;
  top: 25%;
  transform: rotate(-16deg);
  animation: pulse-line 4.8s ease-in-out infinite;
}

.data-line--two {
  --line-rotation: 11deg;
  width: min(36vw, 460px);
  right: 24vw;
  bottom: 23%;
  transform: rotate(11deg);
  animation: pulse-line 5.8s ease-in-out 1.2s infinite;
}

.data-node {
  width: .7rem;
  height: .7rem;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: oklch(13% 0.04 233);
  box-shadow: 0 0 28px oklch(82% 0.12 211 / .7);
}

.data-node--one {
  right: 37vw;
  top: 26%;
}

.data-node--two {
  right: 14vw;
  top: 19%;
}

.data-node--three {
  right: 32vw;
  bottom: 21%;
}

.hero__content {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 700px;
  padding-bottom: clamp(3.2rem, 11vh, 7rem);
}

.intro {
  margin-bottom: 1.1rem;
  color: var(--amber);
  font-size: clamp(.9rem, 1vw, 1rem);
  font-weight: 900;
  letter-spacing: .02em;
}

h1 {
  max-width: 12.4ch;
  margin-bottom: 2.15rem;
  color: var(--ink);
  font-size: clamp(3.7rem, 8.5vw, 7.2rem);
  font-weight: 950;
  line-height: .88;
  letter-spacing: 0;
}

.hero__tags {
  max-width: 100%;
  margin-bottom: 1.55rem;
  color: var(--cyan);
  font-size: clamp(1rem, 1.38vw, 1.24rem);
  font-weight: 900;
  line-height: 1.2;
}

.hero__copy {
  max-width: 58ch;
  color: oklch(91% 0.032 225);
  font-size: clamp(1.13rem, 1.9vw, 1.55rem);
  line-height: 1.46;
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  border: 1px solid oklch(98% 0.012 83 / .32);
  border-radius: 999px;
  padding: .84rem 1.15rem;
  background: linear-gradient(180deg, oklch(97% 0.016 82), oklch(90% 0.024 86));
  color: oklch(15% 0.035 238);
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 14px 34px oklch(7% 0.02 245 / .3);
  transition: transform .22s ease-out, filter .22s ease-out, box-shadow .22s ease-out;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.03) saturate(1.03);
  box-shadow: 0 18px 42px oklch(7% 0.02 245 / .38);
}

.button:not(.button--primary):hover,
.button:not(.button--primary):focus-visible {
  background: linear-gradient(180deg, oklch(97% 0.018 88), oklch(90% 0.035 126));
}

.button--primary {
  border-color: transparent;
  background: var(--amber);
  color: oklch(17% 0.04 245);
}

.hero__visual {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: end;
  width: 100%;
  min-width: 300px;
  pointer-events: none;
}

.character-stage {
  position: relative;
  filter: drop-shadow(0 36px 72px oklch(8% 0.02 245 / .47));
}

.character-stage::before {
  content: "";
  position: absolute;
  left: 10%;
  right: -2%;
  bottom: 2%;
  height: 20%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, oklch(12% 0.04 245 / .7), transparent);
  transform: skewX(-18deg);
}

.hero__visual img {
  width: 100%;
  transform-origin: 50% 100%;
  animation: grounded-breathe 6s ease-in-out infinite;
}

@keyframes grid-drift {
  to {
    background-position: 180px 180px, 84px 0;
  }
}

@keyframes pulse-line {
  50% {
    opacity: .95;
    transform: translateY(-.35rem) rotate(var(--line-rotation, -16deg));
  }
}

@keyframes grounded-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scaleX(1.004) scaleY(1.01);
  }
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    column-gap: 0;
    height: 100svh;
    padding-top: 7rem;
  }

  .hero__content {
    padding-bottom: 1rem;
  }

  .hero__visual {
    width: min(82vw, 420px);
    min-width: 0;
    justify-self: center;
  }

}

@media (max-width: 680px) {
  .hero {
    padding-right: 1rem;
    padding-left: 1rem;
    height: 100svh;
    padding-bottom: 1.5rem;
  }

  .hero__content {
    padding-bottom: 0;
  }

  h1 {
    max-width: 11.5ch;
    margin-bottom: 1.45rem;
    font-size: clamp(2.95rem, 12.5vw, 4.1rem);
  }

  .hero__tags {
    font-size: .94rem;
    margin-bottom: 1.15rem;
  }

  .hero__copy {
    font-size: 1.02rem;
  }

  .hero__links {
    align-items: stretch;
  }

  .hero__links {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 1.55rem;
  }

  .hero__links .button--primary {
    grid-column: 1 / -1;
  }

  .hero__visual {
    position: absolute;
    right: 1rem;
    bottom: 0;
    z-index: 2;
    justify-self: end;
    width: min(35.4vw, 138px);
    margin-top: 0;
  }

}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 32vw);
    column-gap: clamp(1rem, 3vw, 2rem);
    align-items: end;
    height: 100svh;
    padding-top: clamp(1rem, 4vh, 2rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-bottom: 0;
  }

  .hero__content {
    align-self: center;
    max-width: min(62vw, 650px);
    padding-bottom: clamp(.8rem, 3vh, 1.6rem);
  }

  .intro {
    margin-bottom: clamp(.45rem, 1.6vh, .8rem);
    font-size: clamp(.78rem, 1.7vw, .94rem);
  }

  h1 {
    max-width: 12.6ch;
    margin-bottom: clamp(.75rem, 2.3vh, 1.15rem);
    font-size: clamp(2.55rem, 7vw, 5rem);
    line-height: .88;
  }

  .hero__tags {
    margin-bottom: clamp(.55rem, 1.8vh, .95rem);
    font-size: clamp(.82rem, 1.9vw, 1.05rem);
    line-height: 1.15;
  }

  .hero__copy {
    max-width: 46ch;
    font-size: clamp(.88rem, 2vw, 1.12rem);
    line-height: 1.35;
  }

  .hero__links {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: clamp(.75rem, 2.4vh, 1.2rem);
  }

  .hero__links .button--primary {
    grid-column: auto;
  }

  .button {
    min-height: 2.45rem;
    padding: .62rem .98rem;
    font-size: .9rem;
  }

  .hero__visual {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: end;
    justify-self: end;
    width: min(32vw, 360px);
    min-width: 150px;
    margin-top: 0;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 24vw);
    column-gap: clamp(.75rem, 2.6vw, 1.4rem);
    padding-top: .75rem;
  }

  .hero__content {
    max-width: 70vw;
    padding-bottom: .55rem;
  }

  h1 {
    max-width: 13.2ch;
    margin-bottom: .72rem;
    font-size: clamp(2.25rem, 6.2vw, 3.35rem);
  }

  .hero__tags {
    margin-bottom: .55rem;
    font-size: clamp(.76rem, 1.8vw, .9rem);
  }

  .hero__copy {
    max-width: 48ch;
    font-size: clamp(.82rem, 1.75vw, .92rem);
    line-height: 1.32;
  }

  .hero__links {
    margin-top: .65rem;
  }

  .button {
    min-height: 2.25rem;
    padding: .55rem .86rem;
    font-size: .84rem;
  }

  .hero__visual {
    width: min(24vw, 190px);
    min-width: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}