:root {
  color-scheme: dark;
  --bg: #070d1b;
  --accent: #2eaee4;
  --text: #f8f8f8;
  --muted: rgba(248, 248, 248, 0.72);
  --line: rgba(46, 174, 228, 0.32);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  overflow: hidden;
}

body.cursor-custom,
body.cursor-custom a {
  cursor: var(--custom-cursor, auto), auto;
}

body,
button,
input,
textarea,
select {
  letter-spacing: 0;
}

a {
  color: var(--text);
  text-decoration-color: rgba(46, 174, 228, 0.72);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

a:hover,
a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

a:focus-visible {
  outline: 2px solid rgba(46, 174, 228, 0.85);
  outline-offset: 5px;
}

.maintenance-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 46%, rgba(46, 174, 228, 0.1), transparent 42%),
    radial-gradient(circle at 50% 52%, transparent 0 48%, rgba(7, 13, 27, 0.72) 82%, var(--bg) 100%),
    linear-gradient(135deg, rgba(248, 248, 248, 0.025), transparent 40%),
    var(--bg);
}

.ambient-grid {
  position: absolute;
  inset: -120px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.46;
  background-image:
    linear-gradient(rgba(46, 174, 228, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 174, 228, 0.15) 1px, transparent 1px),
    linear-gradient(rgba(248, 248, 248, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 248, 248, 0.045) 1px, transparent 1px);
  background-size: 84px 84px, 84px 84px, 21px 21px, 21px 21px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  -webkit-mask-image:
    radial-gradient(circle at 50% 48%, black 0 48%, rgba(0, 0, 0, 0.68) 62%, transparent 86%);
  mask-image:
    radial-gradient(circle at 50% 48%, black 0 48%, rgba(0, 0, 0, 0.68) 62%, transparent 86%);
}

.cursor-halo {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      460px circle at var(--cursor-x, 50vw) var(--cursor-y, 50vh),
      rgba(46, 174, 228, 0.13),
      rgba(46, 174, 228, 0.055) 25%,
      rgba(46, 174, 228, 0.022) 48%,
      transparent 72%
    );
  mix-blend-mode: screen;
  transition: opacity 320ms ease;
}

body.cursor-active .cursor-halo {
  opacity: 0.78;
}

.signal-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.signal-line,
.signal-point {
  position: absolute;
  display: block;
}

.signal-line {
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(46, 174, 228, 0.2), transparent);
  opacity: 0.38;
}

.signal-line-a {
  top: 27%;
  left: 9%;
  width: min(36vw, 520px);
  transform: rotate(-8deg);
}

.signal-line-b {
  right: 8%;
  bottom: 29%;
  width: min(32vw, 460px);
  transform: rotate(13deg);
}

.signal-line-c {
  top: 62%;
  left: 14%;
  width: min(28vw, 390px);
  transform: rotate(24deg);
  opacity: 0.42;
}

.signal-point {
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 4px rgba(46, 174, 228, 0.07),
    0 0 16px rgba(46, 174, 228, 0.26);
  opacity: 0.36;
  animation:
    signalPulse 7.4s ease-in-out infinite,
    signalFloat 11s ease-in-out infinite;
}

.signal-point-a {
  top: 24%;
  left: 15%;
}

.signal-point-b {
  top: 31%;
  right: 18%;
  animation-delay: -1.2s, -2.4s;
}

.signal-point-c {
  bottom: 24%;
  left: 21%;
  animation-delay: -2.1s, -0.8s;
}

.signal-point-d {
  right: 14%;
  bottom: 36%;
  animation-delay: -3s, -4.1s;
}

.signal-point-e {
  top: 62%;
  right: 31%;
  animation-delay: -0.6s, -3.3s;
}

.calibration-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(76vw, 780px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0.68;
}

.calibration-stage::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1px solid rgba(248, 248, 248, 0.075);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(46, 174, 228, 0.14) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(46, 174, 228, 0.11) 50%, transparent 50.2%);
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: drop-shadow(0 0 14px rgba(46, 174, 228, 0.12));
}

.ring::before,
.ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.ring-outer {
  animation: ringRotate 64s linear infinite;
}

.ring-outer::before {
  background:
    conic-gradient(
      from 18deg,
      transparent 0deg 22deg,
      rgba(46, 174, 228, 0.42) 22deg 42deg,
      transparent 46deg 138deg,
      rgba(248, 248, 248, 0.18) 138deg 154deg,
      transparent 157deg 252deg,
      rgba(46, 174, 228, 0.34) 252deg 272deg,
      transparent 276deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 59%, black 60% 63%, transparent 64%);
  mask: radial-gradient(circle, transparent 59%, black 60% 63%, transparent 64%);
}

.ring-outer::after {
  inset: 7%;
  border: 1px solid rgba(46, 174, 228, 0.14);
  border-left-color: rgba(248, 248, 248, 0.13);
  border-bottom-color: transparent;
}

.ring-middle {
  inset: 12%;
  animation: ringReverse 48s linear infinite;
}

.ring-middle::before {
  background:
    conic-gradient(
      from 92deg,
      rgba(248, 248, 248, 0.16) 0deg 15deg,
      transparent 16deg 76deg,
      rgba(46, 174, 228, 0.4) 76deg 98deg,
      transparent 101deg 203deg,
      rgba(46, 174, 228, 0.28) 203deg 219deg,
      transparent 221deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 58%, black 59% 62%, transparent 63%);
  mask: radial-gradient(circle, transparent 58%, black 59% 62%, transparent 63%);
}

.ring-inner {
  inset: 27%;
  animation: ringRotate 34s linear infinite reverse;
}

.ring-inner::before {
  background:
    conic-gradient(
      from 224deg,
      transparent 0deg 36deg,
      rgba(46, 174, 228, 0.36) 36deg 56deg,
      transparent 60deg 156deg,
      rgba(248, 248, 248, 0.19) 156deg 172deg,
      transparent 176deg 292deg,
      rgba(46, 174, 228, 0.3) 292deg 307deg,
      transparent 309deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 52%, black 53% 58%, transparent 59%);
  mask: radial-gradient(circle, transparent 52%, black 53% 58%, transparent 59%);
}

.calibration-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(248, 248, 248, 0.18), transparent);
  transform: translate(-50%, -50%);
}

.axis-horizontal {
  width: 58%;
  height: 1px;
}

.axis-vertical {
  width: 48%;
  height: 1px;
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0.46;
}

.calibration-needle {
  position: absolute;
  left: 50%;
  top: 15%;
  width: 2px;
  height: 70%;
  opacity: 0.5;
  transform: translateX(-50%) rotate(var(--needle-angle, -14deg));
  transform-origin: 50% 50%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(46, 174, 228, 0.34) 18%,
    rgba(248, 248, 248, 0.26) 50%,
    rgba(46, 174, 228, 0.28) 82%,
    transparent
  );
  box-shadow: 0 0 14px rgba(46, 174, 228, 0.18);
  will-change: transform;
}

.calibration-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(248, 248, 248, 0.82);
  box-shadow:
    0 0 0 7px rgba(46, 174, 228, 0.08),
    0 0 22px rgba(46, 174, 228, 0.22);
  transform: translate(-50%, -50%);
}

.page-content {
  position: relative;
  z-index: 5;
  display: grid;
  align-content: center;
  width: min(760px, calc(100% - 48px));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(32px, 7vh, 80px) 0;
  text-align: center;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(82px, 10vw, 124px);
  margin: 0 auto clamp(30px, 5.6vh, 52px);
  isolation: isolate;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(46, 174, 228, 0.2), rgba(46, 174, 228, 0.08) 42%, transparent 72%);
  filter: blur(16px);
  opacity: 0.58;
  transform: scale(0.95);
  animation: logoGlowBreathe 8.5s ease-in-out infinite;
}

.brand-logo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 18px rgba(7, 13, 27, 0.92))
    drop-shadow(0 0 22px rgba(46, 174, 228, 0.2));
}

h1 {
  max-width: 11ch;
  margin: 0 auto;
  color: var(--text);
  font-size: clamp(3rem, 8.6vw, 6.8rem);
  font-weight: 640;
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
}

.subheadline {
  max-width: 680px;
  margin: clamp(22px, 4vh, 34px) auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.1vw, 1.24rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.contact-line {
  margin: clamp(28px, 5vh, 44px) auto 0;
  color: rgba(248, 248, 248, 0.76);
  font-size: clamp(0.92rem, 1.7vw, 1.02rem);
  line-height: 1.7;
}

body.debug-motion .cursor-halo {
  opacity: 1;
  background:
    radial-gradient(
      520px circle at var(--cursor-x, 50vw) var(--cursor-y, 50vh),
      rgba(46, 174, 228, 0.18),
      rgba(46, 174, 228, 0.08) 28%,
      rgba(46, 174, 228, 0.032) 50%,
      transparent 74%
    );
}

body.debug-motion .ambient-grid {
  opacity: 0.58;
}

body.debug-motion .ring-outer {
  animation-duration: 28s;
}

body.debug-motion .ring-middle {
  animation-duration: 22s;
}

body.debug-motion .ring-inner {
  animation-duration: 18s;
}

body.debug-motion .signal-point {
  animation-duration: 3.8s, 6s;
}

@keyframes logoGlowBreathe {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.94);
  }

  52% {
    opacity: 0.66;
    transform: scale(1.03);
  }
}

@keyframes ringRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ringReverse {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes signalPulse {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.92);
  }

  45% {
    opacity: 0.62;
    transform: scale(1.16);
  }

  68% {
    opacity: 0.46;
    transform: scale(1.02);
  }
}

@keyframes signalFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 5px -6px;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .maintenance-page {
    min-height: 100svh;
  }

  .ambient-grid {
    inset: -80px;
    background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
    -webkit-mask-image:
      radial-gradient(circle at 50% 46%, black 0 52%, rgba(0, 0, 0, 0.6) 68%, transparent 90%);
    mask-image:
      radial-gradient(circle at 50% 46%, black 0 52%, rgba(0, 0, 0, 0.6) 68%, transparent 90%);
  }

  .signal-line-a,
  .signal-line-c {
    left: -8%;
    width: 54vw;
  }

  .signal-line-b {
    right: -10%;
    width: 58vw;
  }

  .signal-point-b,
  .signal-point-d {
    right: 8%;
  }

  .calibration-stage {
    width: min(112vw, 520px);
    top: 47%;
    opacity: 0.74;
  }

  .page-content {
    width: min(100% - 34px, 680px);
    padding-block: 30px;
  }

  h1 {
    max-width: 10.8ch;
    font-size: clamp(2.74rem, 15vw, 4.9rem);
  }

  .subheadline {
    max-width: 36rem;
    line-height: 1.55;
  }
}

@media (max-width: 430px) {
  .brand-mark {
    width: 72px;
    margin-bottom: 26px;
  }

  .contact-line a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (hover: none), (pointer: coarse) {
  body.cursor-custom,
  body.cursor-custom a {
    cursor: auto;
  }

  .cursor-halo {
    display: none !important;
  }
}

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

  .cursor-halo {
    display: none !important;
    opacity: 0 !important;
  }

  .brand-mark::before {
    animation: none !important;
    opacity: 0.46;
  }
}