.landing-page {
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.landing-network {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.landing-network::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgba(162, 162, 162, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(162, 162, 162, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 65% 50% at 50% 50%, black, transparent 78%);
}

.landing-network::after {
  content: "";
  width: min(74vw, 920px);
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(162, 162, 162, .10);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: api-network-orbit 42s linear infinite;
}

.api-request {
  width: min(36vw, 460px);
  height: 1px;
  position: absolute;
  display: block;
  border-top: 1px dashed rgba(162, 162, 162, .22);
  background: radial-gradient(circle at 100% 50%, rgba(162, 162, 162, .68) 0 3px, transparent 3.5px) no-repeat right center / 8px 8px;
}

.api-request::before,
.api-request::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}

.api-request::before {
  left: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(162, 162, 162, .45);
  background: var(--bg);
}

.api-request::after {
  left: 0;
  width: 35px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(105, 199, 237, .55);
  background: #1d2529;
  color: #8cdbf7;
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .04em;
  content: "GET";
  animation: api-request-flow 6s cubic-bezier(.45, .05, .15, .95) infinite;
}

.request-one { top: 26%; left: -7%; transform: rotate(12deg); }
.request-two { top: 68%; right: -6%; transform: rotate(-14deg); }
.request-three { top: 48%; left: -17%; width: min(29vw, 360px); transform: rotate(-22deg); opacity: .55; }
.request-four { top: 17%; right: -9%; width: min(26vw, 320px); transform: rotate(-18deg); opacity: .48; }
.request-five { top: 82%; left: 7%; width: min(24vw, 300px); transform: rotate(9deg); opacity: .42; }
.request-six { top: 43%; right: -15%; width: min(27vw, 340px); transform: rotate(24deg); opacity: .38; }
.request-two::after { content: "POST"; width: 40px; border-color: rgba(205, 137, 246, .55); background: #241d2a; color: #dba6fa; animation-delay: 2.1s; }
.request-three::after { content: "200"; width: 35px; border-color: rgba(105, 199, 143, .55); background: #1c2820; color: #9adbab; animation-delay: 4s; }
.request-four::after { content: "AUTH"; width: 40px; border-color: rgba(241, 185, 102, .55); background: #292317; color: #f5ca85; animation-delay: 1.1s; animation-duration: 7s; }
.request-five::after { content: "SQL"; width: 35px; border-color: rgba(105, 199, 143, .55); background: #1c2820; color: #9adbab; animation-delay: 3.2s; animation-duration: 7.5s; }
.request-six::after { content: "JSON"; width: 42px; border-color: rgba(105, 199, 237, .45); background: #1d2529; color: #8cdbf7; animation-delay: 5.1s; animation-duration: 8s; }

@keyframes api-request-flow {
  0%, 10% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  74% { left: calc(100% - 35px); opacity: 1; }
  84%, 100% { left: calc(100% - 35px); opacity: 0; }
}

@keyframes api-network-orbit {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.landing-shell {
  width: min(100% - 48px, 1040px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 0 32px;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  z-index: 1;
}

.landing-content {
  width: min(100%, 680px);
  place-self: center;
  text-align: center;
}

.landing-logo {
  width: 124px;
  min-height: 124px;
  margin: 0 auto 30px;
  padding: 16px 14px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
}

.landing-logo img {
  width: 58px;
  height: 58px;
  display: block;
}

.landing-logo span {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}

.landing-eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font: 700 11px "JetBrains Mono", monospace;
  letter-spacing: .14em;
}

.landing-content h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(38px, 5.7vw, 62px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.08;
}

.landing-description {
  max-width: 490px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.landing-shell footer {
  color: var(--faint);
  font-size: 13px;
  text-align: center;
}

.landing-shell footer a {
  color: var(--muted);
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

.landing-shell a:hover { color: var(--text); }

.landing-shell a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (max-width: 560px) {
  .landing-shell { width: min(100% - 32px, 1040px); padding: 22px 0 26px; }
  .landing-logo { width: 108px; min-height: 108px; margin-bottom: 24px; border-radius: 20px; }
  .landing-logo img { width: 48px; height: 48px; }
  .landing-content h1 { font-size: 42px; letter-spacing: -1.5px; }
  .landing-description { font-size: 16px; }
  .request-three, .request-four, .request-six { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .api-request::after, .landing-network::after { animation: none; opacity: .55; }
}