:root {
  color-scheme: dark;
  --bg-deep: #010711;
  --bg-navy: #031735;
  --blue: #1d7fff;
  --blue-soft: #7ecbff;
  --blue-dim: #0e4aa0;
  --white: #f7fbff;
  --muted: #b7c6dc;
  --line: rgba(92, 173, 255, 0.28);
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--bg-deep);
  color: var(--white);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 72% 18%, rgba(16, 105, 230, 0.28), transparent 31%),
    radial-gradient(circle at 18% 72%, rgba(0, 139, 255, 0.3), transparent 29%),
    radial-gradient(circle at 50% 55%, rgba(8, 30, 68, 0.68), transparent 42%),
    linear-gradient(123deg, #010711 0%, #04142d 43%, #021026 72%, #01050e 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 7, 17, 0.72), transparent 31%, transparent 68%, rgba(1, 7, 17, 0.74)),
    radial-gradient(circle at 50% 46%, transparent 0 16%, rgba(1, 7, 17, 0.12) 50%, rgba(1, 7, 17, 0.58) 100%);
}

#scene-canvas {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
}

.ambient-grid,
.noise-layer,
.blue-orb,
.circuit-field,
.data-rings,
.signal-panel,
.metric-stack {
  position: absolute;
  pointer-events: none;
}

.ambient-grid {
  inset: -8rem;
  z-index: -2;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(60, 151, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 151, 255, 0.11) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 58% 54%, #000, transparent 72%);
  animation: gridDrift 56s linear infinite;
}

.noise-layer {
  inset: -20%;
  z-index: -1;
  opacity: 0.14;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(29, 127, 255, 0.62) 0 1px, transparent 1.6px);
  background-position: 0 0, 31px 47px;
  background-size: 91px 91px, 57px 57px;
  animation: particleDrift 76s linear infinite;
}

.blue-orb {
  z-index: -2;
  width: 44vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(58px);
  opacity: 0.28;
  background: radial-gradient(circle, rgba(27, 133, 255, 0.64), transparent 67%);
}

.blue-orb-left {
  left: -24vmax;
  bottom: -16vmax;
}

.blue-orb-right {
  right: -18vmax;
  top: -22vmax;
}

.circuit-field {
  top: 7vh;
  right: 2vw;
  z-index: -1;
  width: min(34rem, 40vw);
  height: min(31rem, 46vh);
  opacity: 0.42;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(91, 174, 255, 0.46) 11.2% 11.6%, transparent 11.8% 100%),
    linear-gradient(0deg, transparent 0 23%, rgba(91, 174, 255, 0.28) 23.2% 23.5%, transparent 23.8% 100%),
    linear-gradient(90deg, transparent 0 48%, rgba(91, 174, 255, 0.34) 48.2% 48.6%, transparent 48.8% 100%),
    linear-gradient(0deg, transparent 0 64%, rgba(91, 174, 255, 0.3) 64.2% 64.5%, transparent 64.8% 100%),
    radial-gradient(circle at 12% 23%, rgba(126, 203, 255, 0.9) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 64%, rgba(29, 127, 255, 0.95) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 38%, rgba(126, 203, 255, 0.75) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 76%, rgba(29, 127, 255, 0.88) 0 4px, transparent 5px);
  background-size: 100% 100%;
  mask-image: radial-gradient(circle at 68% 44%, #000 0 58%, transparent 82%);
  animation: hudPulse 10.8s ease-in-out infinite;
}

.circuit-field::before,
.circuit-field::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(126, 203, 255, 0.34);
  box-shadow: 0 0 24px rgba(29, 127, 255, 0.14);
}

.circuit-field::before {
  right: 8%;
  top: 9%;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 22% 100%, 22% 58%, 50% 58%);
  animation: rotateSlow 44s linear infinite;
}

.circuit-field::after {
  right: 20%;
  bottom: 8%;
  width: 8rem;
  height: 4.8rem;
  background:
    linear-gradient(to top, rgba(29, 127, 255, 0.5) 0 22%, transparent 22%),
    linear-gradient(to top, rgba(29, 127, 255, 0.38) 0 42%, transparent 42%),
    linear-gradient(to top, rgba(29, 127, 255, 0.7) 0 68%, transparent 68%);
  background-size: 18% 100%;
  background-repeat: no-repeat;
  background-position: 18% 0, 48% 0, 78% 0;
}

.data-rings {
  right: clamp(1rem, 4vw, 4rem);
  bottom: 15vh;
  z-index: -1;
  width: clamp(9rem, 16vw, 15rem);
  aspect-ratio: 1;
  opacity: 0.38;
}

.data-rings span {
  position: absolute;
  inset: calc(var(--i, 0) * 1.5rem);
  border: 1px solid rgba(126, 203, 255, 0.36);
  border-radius: 50%;
  border-top-color: rgba(29, 127, 255, 0.9);
  border-right-color: transparent;
  animation: rotateSlow 36s linear infinite;
}

.data-rings span:nth-child(1) {
  --i: 0;
}

.data-rings span:nth-child(2) {
  --i: 1;
  animation-duration: 26s;
  animation-direction: reverse;
}

.data-rings span:nth-child(3) {
  --i: 2;
  animation-duration: 18s;
}

.signal-panel {
  top: clamp(1.2rem, 7vh, 4.8rem);
  right: clamp(1rem, 5.5vw, 5rem);
  z-index: -1;
  width: clamp(11rem, 18vw, 18rem);
  height: clamp(8rem, 15vw, 14rem);
  opacity: 0.54;
  border-top: 1px solid rgba(126, 203, 255, 0.2);
  border-right: 1px solid rgba(126, 203, 255, 0.14);
  background:
    linear-gradient(90deg, transparent, rgba(126, 203, 255, 0.2), transparent) 0 22% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(29, 127, 255, 0.28), transparent) 0 54% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(126, 203, 255, 0.18), transparent) 0 82% / 100% 1px no-repeat;
  mask-image: linear-gradient(110deg, transparent 0, #000 22%, #000 84%, transparent);
}

.signal-panel::before,
.signal-panel::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(126, 203, 255, 0.24);
  opacity: 0.85;
}

.signal-panel::before {
  top: 8%;
  left: 9%;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  animation: rotateSlow 24s linear infinite;
}

.signal-panel::after {
  right: 8%;
  bottom: 7%;
  width: 6.2rem;
  height: 3.9rem;
  background:
    linear-gradient(to top, rgba(29, 127, 255, 0.45) 0 32%, transparent 32%),
    linear-gradient(to top, rgba(126, 203, 255, 0.35) 0 58%, transparent 58%),
    linear-gradient(to top, rgba(29, 127, 255, 0.58) 0 76%, transparent 76%);
  background-size: 16% 100%;
  background-repeat: no-repeat;
  background-position: 18% 0, 50% 0, 82% 0;
  animation: barsFlow 4.8s ease-in-out infinite;
}

.signal-panel span {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(126, 203, 255, 0.9);
  box-shadow: 0 0 14px rgba(29, 127, 255, 0.9);
  animation: nodePulse 4.4s ease-in-out infinite;
}

.signal-panel span:nth-child(1) {
  left: 14%;
  top: 64%;
}

.signal-panel span:nth-child(2) {
  left: 44%;
  top: 34%;
  animation-delay: -1.5s;
}

.signal-panel span:nth-child(3) {
  right: 16%;
  top: 48%;
  animation-delay: -2.7s;
}

.signal-panel i {
  position: absolute;
  height: 1px;
  width: 42%;
  transform-origin: left;
  background: linear-gradient(90deg, rgba(126, 203, 255, 0), rgba(126, 203, 255, 0.58), rgba(126, 203, 255, 0));
  animation: lineBreathe 5.6s ease-in-out infinite;
}

.signal-panel i:nth-of-type(1) {
  left: 16%;
  top: 64%;
  transform: rotate(-29deg);
}

.signal-panel i:nth-of-type(2) {
  left: 45%;
  top: 36%;
  width: 31%;
  transform: rotate(19deg);
  animation-delay: -1.8s;
}

.signal-panel i:nth-of-type(3) {
  left: 27%;
  top: 76%;
  width: 58%;
  transform: rotate(-9deg);
  animation-delay: -3.2s;
}

.metric-stack {
  left: clamp(1rem, 3vw, 3.2rem);
  bottom: 18vh;
  z-index: -1;
  display: grid;
  gap: 0.75rem;
  color: rgba(186, 223, 255, 0.68);
  font: 700 clamp(0.62rem, 0.9vw, 0.8rem) / 1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.14em;
}

.metric-stack span {
  position: relative;
  padding-left: 5.2rem;
}

.metric-stack span::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  color: rgba(29, 127, 255, 0.78);
}

.code-panel {
  position: absolute;
  top: clamp(1.6rem, 7vh, 5.2rem);
  left: clamp(1.1rem, 4vw, 4rem);
  max-width: min(33rem, 52vw);
  color: rgba(87, 157, 255, 0.18);
  font: 500 clamp(0.64rem, 0.9vw, 0.98rem) / 1.72 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.03em;
  animation: codeFlicker 16s ease-in-out infinite, codeFloat 22s ease-in-out infinite;
}

.code-panel::after {
  content: none;
}

.code-panel pre {
  margin: 0;
  white-space: pre-wrap;
}

.brand {
  position: relative;
  z-index: 2;
  width: min(48rem, 92vw);
  margin-top: -5vh;
  display: grid;
  justify-items: center;
  text-align: center;
}

.logo-shell {
  position: relative;
  width: clamp(8.4rem, 14.4vw, 14.6rem);
  margin-bottom: clamp(1.15rem, 2.2vw, 1.75rem);
}

.logo-halo {
  position: absolute;
  inset: -62% -82% -54%;
  border-radius: 38% 62% 48% 52% / 58% 36% 64% 42%;
  opacity: 0.28;
  filter: blur(46px);
  background:
    radial-gradient(ellipse at 44% 48%, rgba(255, 255, 255, 0.08), transparent 42%),
    radial-gradient(ellipse at 58% 60%, rgba(29, 127, 255, 0.12), transparent 58%),
    radial-gradient(ellipse at 36% 38%, rgba(126, 203, 255, 0.07), transparent 52%);
  transform: rotate(-8deg);
  animation: haloPulse 9.6s ease-in-out infinite;
}

.logo-sweep {
  position: absolute;
  inset: -18% -14%;
  z-index: 2;
  overflow: hidden;
  border-radius: 0;
  filter: blur(8px);
  pointer-events: none;
}

.logo-sweep::after {
  content: "";
  position: absolute;
  top: -18%;
  left: -78%;
  width: 38%;
  height: 138%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: rotate(21deg);
  animation: logoSweep 14s ease-in-out infinite;
}

.e-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.logo-fallback {
  display: none;
}

.logo-missing {
  min-height: clamp(7rem, 12vw, 11rem);
  display: grid;
  place-items: center;
  border: 1px dashed rgba(126, 203, 255, 0.45);
  border-radius: 12px;
  background: rgba(2, 16, 38, 0.42);
}

.logo-missing .e-logo {
  display: none;
}

.logo-missing .logo-fallback {
  position: relative;
  z-index: 3;
  display: block;
  color: rgba(190, 228, 255, 0.72);
  font: 700 0.68rem / 1.7 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.12em;
  text-align: center;
}

.wordmark {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: clamp(0.38rem, 1vw, 0.82rem);
  color: var(--white);
  font-size: clamp(3.2rem, 7.6vw, 7.8rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: clamp(0.12em, 1.1vw, 0.2em);
  text-indent: clamp(0.12em, 1.1vw, 0.2em);
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.2),
    0 0 42px rgba(29, 127, 255, 0.12);
}

.wordmark span {
  position: relative;
  display: inline-block;
  background: linear-gradient(105deg, #ffffff 0%, #d7eaff 28%, #ffffff 46%, #7ecbff 56%, #ffffff 70%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: letterShimmer 11.6s ease-in-out infinite;
}

.wordmark span:last-child {
  background-image: linear-gradient(105deg, #56adff 0%, #1d7fff 34%, #bfe8ff 50%, #2d8dff 68%, #56adff 100%);
  text-shadow: 0 0 28px rgba(29, 127, 255, 0.64);
}

.wordmark::after,
.tagline::after {
  content: "";
  position: absolute;
  top: -24%;
  bottom: -24%;
  left: -30%;
  width: 22%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  filter: blur(2px);
  animation: textSweep 12.8s ease-in-out infinite;
  pointer-events: none;
}

.tagline {
  position: relative;
  margin: clamp(1rem, 1.7vw, 1.4rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.62rem, 1.3vw, 1.05rem);
  color: #eef7ff;
  font-size: clamp(1rem, 1.8vw, 1.82rem);
  font-weight: 500;
  letter-spacing: clamp(0.13em, 0.9vw, 0.25em);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}

.tagline span:nth-child(2) {
  color: var(--blue);
  text-shadow: 0 0 22px rgba(29, 127, 255, 0.62);
}

.feature-strip {
  position: absolute;
  left: 50%;
  bottom: clamp(3.9rem, 8.5vh, 6.2rem);
  z-index: 2;
  width: min(52rem, 90vw);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(126, 203, 255, 0.13);
  border-bottom: 1px solid rgba(126, 203, 255, 0.1);
  background: linear-gradient(90deg, transparent, rgba(3, 23, 53, 0.28), transparent);
  backdrop-filter: blur(4px);
}

.feature {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.62rem, 1.3vw, 0.95rem);
  padding: clamp(0.82rem, 1.8vw, 1.15rem) clamp(0.55rem, 1.5vw, 1.2rem);
}

.feature + .feature {
  border-left: 1px solid rgba(126, 203, 255, 0.24);
}

.feature svg {
  flex: 0 0 auto;
  width: clamp(1.45rem, 2.5vw, 2rem);
  color: var(--blue-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(29, 127, 255, 0.58));
}

.feature h2,
.feature p {
  margin: 0;
  line-height: 1.05;
}

.feature h2 {
  font-size: clamp(0.78rem, 1.25vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.feature p {
  margin-top: 0.32rem;
  color: var(--muted);
  font-size: clamp(0.76rem, 1.15vw, 0.92rem);
}

.footer-line {
  position: absolute;
  left: 50%;
  bottom: clamp(1.05rem, 3.1vh, 2rem);
  z-index: 2;
  width: min(92vw, 48rem);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(233, 244, 255, 0.72);
  font-size: clamp(0.68rem, 1.1vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.29em;
  text-align: center;
  text-indent: 0.29em;
}

.footer-line strong {
  color: var(--blue-soft);
  font-weight: 800;
  text-shadow: 0 0 18px rgba(29, 127, 255, 0.72);
}

@keyframes gridDrift {
  to {
    transform: translate3d(68px, 68px, 0);
  }
}

@keyframes particleDrift {
  to {
    transform: translate3d(-91px, 57px, 0);
  }
}

@keyframes hudPulse {
  50% {
    opacity: 0.7;
    filter: drop-shadow(0 0 18px rgba(29, 127, 255, 0.22));
  }
}

@keyframes rotateSlow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes barsFlow {
  0%,
  100% {
    opacity: 0.62;
    filter: brightness(0.9);
  }
  50% {
    opacity: 0.95;
    filter: brightness(1.25);
  }
}

@keyframes nodePulse {
  50% {
    opacity: 0.55;
    transform: scale(1.75);
  }
}

@keyframes lineBreathe {
  0%,
  100% {
    opacity: 0.24;
    clip-path: inset(0 100% 0 0);
  }
  48%,
  68% {
    opacity: 0.78;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes scanline {
  0%,
  38% {
    transform: translateY(-120%);
    opacity: 0;
  }
  48% {
    opacity: 0.55;
  }
  67%,
  100% {
    transform: translateY(120%);
    opacity: 0;
  }
}

@keyframes codeFlicker {
  0%,
  100% {
    opacity: 0.88;
  }
  32% {
    opacity: 0.8;
  }
  58% {
    opacity: 0.72;
  }
}

@keyframes codeFloat {
  50% {
    transform: translate3d(0.55rem, -0.36rem, 0);
  }
}

@keyframes haloPulse {
  50% {
    opacity: 0.2;
    transform: rotate(-8deg) scale(1.16);
  }
}

@keyframes logoSweep {
  0%,
  52% {
    left: -78%;
    opacity: 0;
  }
  62% {
    opacity: 0.85;
  }
  77%,
  100% {
    left: 128%;
    opacity: 0;
  }
}

@keyframes letterShimmer {
  0%,
  18% {
    background-position: 170% 50%;
  }
  58%,
  100% {
    background-position: -45% 50%;
  }
}

@keyframes textSweep {
  0%,
  45% {
    left: -32%;
    opacity: 0;
  }
  56% {
    opacity: 0.9;
  }
  76%,
  100% {
    left: 112%;
    opacity: 0;
  }
}

@media (max-width: 840px) {
  body {
    overflow: auto;
  }

  .hero {
    min-height: 100svh;
    padding-block: 2rem 1rem;
  }

  .code-panel {
    max-width: 64vw;
    opacity: 0.7;
  }

  .brand {
    margin-top: -10vh;
  }

  .feature-strip {
    width: min(33rem, 91vw);
    bottom: clamp(3.5rem, 7vh, 4.8rem);
  }

  .circuit-field {
    width: 64vw;
    opacity: 0.25;
  }

  .metric-stack {
    display: none;
  }

  .feature {
    flex-direction: column;
    text-align: center;
    gap: 0.48rem;
  }
}

@media (max-width: 560px) {
  .code-panel {
    top: 1.2rem;
    max-width: 88vw;
    font-size: 0.58rem;
    opacity: 0.42;
  }

  .brand {
    margin-top: -8vh;
  }

  .logo-shell {
    width: clamp(7rem, 34vw, 9.4rem);
  }

  .wordmark {
    font-size: clamp(2.15rem, 12vw, 3.5rem);
    letter-spacing: 0.08em;
    text-indent: 0.08em;
  }

  .tagline {
    max-width: 18rem;
    font-size: 0.88rem;
    line-height: 1.7;
  }

  .feature-strip {
    grid-template-columns: 1fr;
    width: min(18rem, 82vw);
  }

  .feature {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding-inline: 1.1rem;
  }

  .feature + .feature {
    border-left: 0;
    border-top: 1px solid rgba(126, 203, 255, 0.18);
  }

  .footer-line {
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }
}

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