:root {
  --bg: #04070a;
  --bg-soft: #0b1117;
  --surface: rgba(9, 15, 20, 0.58);
  --surface-strong: rgba(12, 22, 29, 0.82);
  --line: rgba(104, 190, 184, 0.24);
  --line-strong: rgba(104, 190, 184, 0.44);
  --text: #edf7f1;
  --muted: rgba(237, 247, 241, 0.72);
  --accent: #7ecfca;
  --accent-strong: #4ea7a5;
  --accent-gold: #d8d196;
  --shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  width: 100%;
}

html {
  background: #05080b;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  position: relative;
  background:
    radial-gradient(circle at top, rgba(41, 86, 86, 0.2), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(72, 98, 110, 0.12), transparent 20%),
    linear-gradient(180deg, #020405 0%, #05080d 48%, #05080b 100%);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

.hero-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

.hero-noise,
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-noise {
  opacity: 0.58;
  mix-blend-mode: screen;
}

.aurora {
  filter: blur(80px);
  opacity: 0.72;
  inset: -8%;
}

.aurora-one {
  background: radial-gradient(circle, rgba(78, 167, 165, 0.42), transparent 56%);
  transform: translate(-20%, -15%);
  animation: drift 10s ease-in-out infinite alternate;
}

.aurora-two {
  background: radial-gradient(circle, rgba(216, 209, 150, 0.24), transparent 58%);
  transform: translate(45%, 20%);
  animation: drift 12s ease-in-out infinite alternate-reverse;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 2.25rem;
  align-items: center;
  padding: clamp(2rem, 4vh, 3.25rem) min(6vw, 4.5rem);
}

.hero-copy {
  max-width: 40rem;
}

.eyebrow {
  width: fit-content;
  margin: 0 0 1rem;
  padding: 0.5rem 0.82rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 18, 23, 0.7);
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3.35rem, 7vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  max-width: 9ch;
}

.lede {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.55vw, 1.15rem);
  line-height: 1.58;
  max-width: 34rem;
}

.signal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.35rem 0 1.5rem;
}

.signal-strip span {
  padding: 0.58rem 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(237, 247, 241, 0.86);
  font-size: 0.84rem;
}

.newsletter {
  display: flex;
  gap: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(11, 17, 23, 0.88), rgba(9, 14, 18, 0.7));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.newsletter input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 0.9rem 1rem;
  font: inherit;
}

.newsletter input::placeholder {
  color: rgba(237, 247, 241, 0.44);
}

.newsletter button {
  border: 0;
  border-radius: 0.95rem;
  padding: 0.9rem 1.15rem;
  font: inherit;
  font-weight: 700;
  color: #06100d;
  background:
    linear-gradient(135deg, var(--accent) 0%, #bdf9df 55%, var(--accent-gold) 100%);
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
  white-space: nowrap;
}

.newsletter button:hover,
.newsletter button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(148, 249, 207, 0.18);
}

.form-note {
  margin: 0.7rem 0 0;
  min-height: 1.5rem;
  color: rgba(237, 247, 241, 0.68);
  font-size: 0.88rem;
}

.hero-visual {
  justify-self: end;
  width: min(100%, 28rem);
}

.biosphere {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(153, 220, 215, 0.14), transparent 26%),
    radial-gradient(circle at 68% 66%, rgba(216, 209, 150, 0.1), transparent 30%),
    radial-gradient(circle at center, rgba(33, 84, 69, 0.72), rgba(7, 14, 18, 0.98) 70%);
  border: 1px solid rgba(110, 189, 184, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 0 80px rgba(96, 255, 195, 0.07),
    0 30px 120px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  isolation: isolate;
  animation: biosphere-breathe 10.2s ease-in-out infinite;
}

.biosphere::before,
.biosphere::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(104, 190, 184, 0.1);
}

.biosphere::after {
  inset: 10%;
  border-color: rgba(255, 255, 255, 0.04);
}

.biosphere-shell,
.biosphere-grid,
.biosphere-halo,
.continent,
.current,
.signal-cluster,
.pulse-ring,
.scanline {
  position: absolute;
}

.biosphere-shell {
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(111, 191, 187, 0.18), transparent 24%),
    radial-gradient(circle at 55% 65%, rgba(0, 0, 0, 0.22), transparent 38%);
  border: 1px solid rgba(120, 195, 191, 0.12);
  animation: shell-drift 8.4s ease-in-out infinite;
}

.biosphere-shell::before,
.biosphere-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.biosphere-shell::before {
  inset: 8%;
  background:
    radial-gradient(circle at 25% 35%, rgba(126, 209, 202, 0.2), transparent 18%),
    radial-gradient(circle at 72% 54%, rgba(216, 209, 150, 0.14), transparent 16%),
    radial-gradient(circle at 48% 72%, rgba(73, 154, 149, 0.18), transparent 14%);
  mix-blend-mode: screen;
  animation: glow-drift 5.4s ease-in-out infinite alternate;
}

.biosphere-shell::after {
  inset: 16%;
  border: 1px dashed rgba(117, 190, 186, 0.08);
  opacity: 0.8;
  animation: rotate-slow 12.6s linear infinite;
}

.biosphere-grid {
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 20px,
      rgba(144, 214, 209, 0.035) 20px 21px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 22px,
      rgba(144, 214, 209, 0.028) 22px 23px
    );
  mix-blend-mode: screen;
  opacity: 0.45;
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 58%, transparent 74%);
  animation:
    grid-drift 9.6s linear infinite,
    grid-flicker 3.6s ease-in-out infinite;
}

.biosphere-halo {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 161, 157, 0.18), transparent 65%);
  animation:
    pulse 5.4s ease-in-out infinite,
    halo-shift 7.8s ease-in-out infinite alternate;
}

.biosphere-halo::before,
.biosphere-halo::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.biosphere-halo::before {
  background:
    radial-gradient(circle at 18% 42%, rgba(163, 225, 220, 0.72) 0 0.45rem, transparent 0.55rem),
    radial-gradient(circle at 34% 26%, rgba(163, 225, 220, 0.48) 0 0.26rem, transparent 0.38rem),
    radial-gradient(circle at 52% 68%, rgba(216, 209, 150, 0.45) 0 0.34rem, transparent 0.48rem),
    radial-gradient(circle at 72% 38%, rgba(163, 225, 220, 0.58) 0 0.4rem, transparent 0.54rem),
    radial-gradient(circle at 64% 18%, rgba(163, 225, 220, 0.38) 0 0.22rem, transparent 0.35rem),
    radial-gradient(circle at 30% 76%, rgba(216, 209, 150, 0.42) 0 0.28rem, transparent 0.4rem);
  opacity: 0.72;
  animation: organism-drift 6.6s linear infinite;
}

.biosphere-halo::after {
  inset: 16%;
  background:
    radial-gradient(circle at 26% 58%, rgba(163, 225, 220, 0.44) 0 0.28rem, transparent 0.42rem),
    radial-gradient(circle at 44% 22%, rgba(216, 209, 150, 0.35) 0 0.18rem, transparent 0.3rem),
    radial-gradient(circle at 70% 62%, rgba(163, 225, 220, 0.46) 0 0.24rem, transparent 0.36rem),
    radial-gradient(circle at 58% 36%, rgba(163, 225, 220, 0.56) 0 0.32rem, transparent 0.46rem);
  opacity: 0.65;
  animation: organism-drift 4.8s linear infinite reverse;
}

.continent {
  border-radius: 44% 56% 48% 52% / 49% 38% 62% 51%;
  background:
    radial-gradient(circle at 30% 30%, rgba(230, 255, 244, 0.28), transparent 18%),
    radial-gradient(circle at 60% 60%, rgba(0, 0, 0, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(128, 207, 202, 0.82), rgba(56, 132, 128, 0.62));
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.08),
    0 0 20px rgba(97, 177, 172, 0.16);
  transform-origin: center;
  will-change: transform, border-radius, filter;
}

.continent-one {
  width: 40%;
  height: 28%;
  top: 24%;
  left: 18%;
  transform: rotate(-18deg);
  animation:
    sway-one 7.2s ease-in-out infinite,
    continent-morph 5.4s ease-in-out infinite,
    continent-shimmer 3s ease-in-out infinite;
}

.continent-two {
  width: 33%;
  height: 22%;
  top: 50%;
  right: 18%;
  transform: rotate(22deg);
  animation:
    sway-two 8.4s ease-in-out infinite,
    continent-morph 6s ease-in-out 0.6s infinite,
    continent-shimmer 3.6s ease-in-out 0.3s infinite;
}

.continent-three {
  width: 20%;
  height: 14%;
  bottom: 22%;
  left: 32%;
  transform: rotate(4deg);
  animation:
    sway-three 6s ease-in-out infinite,
    continent-morph 4.5s ease-in-out 0.45s infinite,
    continent-shimmer 2.7s ease-in-out 0.6s infinite;
}

.current {
  inset: auto;
  border-radius: 999px;
  border: 1px dashed rgba(216, 209, 150, 0.22);
  opacity: 0.8;
  transform-origin: center;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(126, 207, 202, 0.12),
    rgba(216, 209, 150, 0.12),
    transparent
  );
}

.current-one {
  width: 74%;
  height: 74%;
  top: 13%;
  left: 13%;
  border-color: rgba(154, 248, 213, 0.24);
  clip-path: ellipse(50% 30% at 50% 50%);
  animation:
    rotate-slow 7.8s linear infinite,
    current-wobble 2.85s ease-in-out infinite;
}

.current-two {
  width: 58%;
  height: 58%;
  top: 21%;
  left: 21%;
  border-color: rgba(216, 209, 150, 0.18);
  clip-path: ellipse(50% 26% at 50% 50%);
  animation:
    rotate-slow 5.4s linear infinite reverse,
    current-wobble 2.4s ease-in-out infinite reverse;
}

.signal-cluster {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(247, 255, 251, 0.72), rgba(120, 255, 203, 0.26) 42%, rgba(18, 53, 40, 0.2) 72%, transparent 100%);
  box-shadow:
    0 0 24px rgba(99, 178, 173, 0.14),
    inset 0 0 18px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(3px);
  animation-name: spore-pulse;
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.signal-cluster::before,
.signal-cluster::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.signal-cluster::before {
  inset: -0.45rem;
  border: 1px solid rgba(163, 225, 220, 0.18);
  opacity: 0.7;
}

.signal-cluster::after {
  inset: 45%;
  background:
    linear-gradient(90deg, rgba(163, 225, 220, 0.3) 0 42%, transparent 42% 58%, rgba(216, 209, 150, 0.24) 58% 100%);
  opacity: 0.85;
}

.cluster-one {
  width: 4rem;
  height: 4rem;
  top: 18%;
  right: 21%;
  animation:
    float-one 3.6s ease-in-out infinite,
    spore-pulse 1.95s ease-in-out infinite;
}

.cluster-two {
  width: 2.6rem;
  height: 2.6rem;
  bottom: 18%;
  right: 26%;
  animation:
    float-two 3s ease-in-out infinite,
    spore-pulse 1.65s ease-in-out 0.24s infinite;
}

.cluster-three {
  width: 1.8rem;
  height: 1.8rem;
  top: 58%;
  left: 20%;
  animation:
    float-three 3.3s ease-in-out infinite,
    spore-pulse 2.1s ease-in-out 0.36s infinite;
}

.cluster-four {
  width: 1.2rem;
  height: 1.2rem;
  top: 30%;
  left: 60%;
  animation:
    float-two 2.7s ease-in-out infinite reverse,
    spore-pulse 1.5s ease-in-out 0.3s infinite;
}

.pulse-ring {
  inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(154, 248, 213, 0.16);
}

.pulse-ring-one {
  animation: radiate 3.3s ease-out infinite;
}

.pulse-ring-two {
  inset: 24%;
  border-color: rgba(216, 209, 150, 0.12);
  animation: radiate 3.3s ease-out 1.05s infinite;
}

.scanline {
  inset: 7%;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 120deg,
      rgba(163, 225, 220, 0.18) 148deg,
      rgba(255, 255, 255, 0.08) 162deg,
      rgba(216, 209, 150, 0.16) 176deg,
      transparent 206deg 360deg
    );
  mix-blend-mode: screen;
  filter: blur(10px);
  opacity: 0.9;
  animation: sweep 4.2s linear infinite;
}

.scanline::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background:
    radial-gradient(circle at 62% 34%, rgba(255, 255, 255, 0.22), transparent 9%),
    radial-gradient(circle at 64% 36%, rgba(163, 225, 220, 0.2), transparent 18%);
  filter: blur(6px);
  animation: sweep-glow 4.2s linear infinite;
}

.visual-caption {
  margin: 1rem 0.75rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  background: var(--surface);
  backdrop-filter: blur(18px);
}

.caption-label {
  display: inline-block;
  color: var(--accent);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.visual-caption p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.95rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes drift {
  from {
    transform: translate(-20%, -15%) scale(1);
  }
  to {
    transform: translate(8%, 10%) scale(1.16);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes biosphere-breathe {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
      inset 0 0 80px rgba(78, 167, 165, 0.1),
      0 30px 120px rgba(0, 0, 0, 0.45);
  }
  50% {
    transform: scale(1.018) rotate(-1deg);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.03),
      inset 0 0 100px rgba(78, 167, 165, 0.14),
      0 36px 130px rgba(0, 0, 0, 0.5);
  }
}

@keyframes shell-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(6px, -4px, 0) scale(1.02);
  }
}

@keyframes glow-drift {
  0% {
    transform: translate3d(-8px, 6px, 0) scale(0.96);
    opacity: 0.65;
  }
  100% {
    transform: translate3d(10px, -8px, 0) scale(1.08);
    opacity: 1;
  }
}

@keyframes grid-drift {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1.02);
  }
}

@keyframes grid-flicker {
  0%,
  100% {
    opacity: 0.34;
  }
  50% {
    opacity: 0.52;
  }
}

@keyframes halo-shift {
  0% {
    transform: scale(0.94) translate3d(-4px, 4px, 0);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.08) translate3d(6px, -6px, 0);
    opacity: 1;
  }
}

@keyframes radiate {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@keyframes current-wobble {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.92;
    transform: scale(1.05);
  }
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes float-one {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, -14px, 0) scale(1.08);
  }
}

@keyframes float-two {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-18px, 16px, 0) scale(0.96);
  }
}

@keyframes float-three {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(10px, -18px, 0) scale(1.04);
  }
}

@keyframes sway-one {
  0%,
  100% {
    transform: rotate(-18deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(-12deg) translate3d(10px, -10px, 0);
  }
}

@keyframes sway-two {
  0%,
  100% {
    transform: rotate(22deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(16deg) translate3d(-8px, 8px, 0);
  }
}

@keyframes sway-three {
  0%,
  100% {
    transform: rotate(4deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(8deg) translate3d(8px, -4px, 0);
  }
}

@keyframes continent-shimmer {
  0%,
  100% {
    filter: saturate(1.1) brightness(0.98);
  }
  50% {
    filter: saturate(1.28) brightness(1.08);
  }
}

@keyframes continent-morph {
  0%,
  100% {
    border-radius: 44% 56% 48% 52% / 49% 38% 62% 51%;
  }
  33% {
    border-radius: 52% 48% 58% 42% / 40% 49% 51% 60%;
  }
  66% {
    border-radius: 39% 61% 46% 54% / 57% 44% 56% 43%;
  }
}

@keyframes spore-pulse {
  0%,
  100% {
    box-shadow:
      0 0 24px rgba(99, 178, 173, 0.14),
      inset 0 0 18px rgba(255, 255, 255, 0.1);
    opacity: 0.82;
  }
  50% {
    box-shadow:
      0 0 34px rgba(99, 178, 173, 0.28),
      inset 0 0 24px rgba(255, 255, 255, 0.18);
    opacity: 1;
  }
}

@keyframes organism-drift {
  from {
    transform: rotate(0deg) scale(0.98);
  }
  to {
    transform: rotate(360deg) scale(1.04);
  }
}

@keyframes sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes sweep-glow {
  from {
    transform: rotate(0deg) scale(0.98);
  }
  to {
    transform: rotate(360deg) scale(1.02);
  }
}

@media (max-height: 900px) and (min-width: 981px) {
  .hero {
    gap: 1.75rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  h1 {
    font-size: clamp(3rem, 6vw, 5rem);
  }

  .lede {
    font-size: 0.98rem;
    line-height: 1.5;
    max-width: 31rem;
  }

  .signal-strip {
    margin: 1rem 0 1.1rem;
  }

  .signal-strip span {
    padding: 0.5rem 0.72rem;
    font-size: 0.78rem;
  }

  .newsletter {
    padding: 0.65rem;
  }

  .newsletter input,
  .newsletter button {
    padding-top: 0.82rem;
    padding-bottom: 0.82rem;
  }

  .hero-visual {
    width: min(100%, 24rem);
  }

  .visual-caption {
    margin-top: 0.8rem;
  }
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }

  .hero-visual {
    justify-self: center;
    width: min(100%, 22rem);
  }
}

@media (max-width: 640px) {
  .hero {
    gap: 2rem;
    padding: 4rem 1.15rem 2.5rem;
  }

  .hero-copy,
  .hero-visual {
    width: 100%;
    max-width: 100%;
  }

  h1 {
    max-width: none;
    font-size: clamp(3.25rem, 18vw, 4.8rem);
  }

  .newsletter {
    flex-direction: column;
  }

  .newsletter button,
  .newsletter input {
    width: 100%;
  }

  .signal-strip span {
    font-size: 0.84rem;
  }

  .hero-visual {
    width: min(100%, 18.5rem);
  }
}

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