:root {
  color-scheme: dark;
  --background: #050713;
  --text: #f5f6ff;
  --muted: #9ca6c8;
  --violet: #773cff70;
  --blue: #249cff70;
}

* {
  box-sizing: border-box;
}

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

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

.soon {
  font-size: 12px;
  margin: 0 0 20px 0;
}

.landing {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, rgba(74, 67, 196, 0.13), #00000000 28%),
    linear-gradient(150deg, #020206 0%, #020206 52%, #020206 100%);
}

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

.background > span:not(.light) {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glow {
  width: 42vw;
  height: 42vw;
  min-width: 360px;
  min-height: 360px;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.2;
  animation: drift 12s ease-in-out infinite alternate;
}

.glow-left {
  inset: auto auto 2% -15%;
  background: var(--violet);
}

.glow-right {
  inset: 0 -15% auto auto;
  background: var(--blue);
  animation-delay: -4s;
}

.glow-center {
  width: 32vw;
  height: 32vw;
  inset: 50% auto auto 50%;
  translate: -50% -40%;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  opacity: 0.13;
  animation-delay: -8s;
}

.grid {
  top: auto !important;
  height: 38% !important;
  opacity: 0.18;
  transform: perspective(620px) rotateX(68deg) scale(1.45);
  transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(99, 104, 190, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 104, 190, 0.2) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 82%);
  mask-image: linear-gradient(to top, #000, transparent 82%);
}

.noise {
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* Aufsteigende Lichtpunkte im Hintergrund */
.light {
  --scale: 1;

  position: absolute;
  top: 100%;
  bottom: auto;
  right: auto;

  width: 3px;
  filter: blur(5px);
  height: 180px;
  mix-blend-mode: screen;

  border-radius: 999px;

  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(180, 165, 255, 0.18) 20%,
    rgba(255, 255, 255, 0.8) 70%,
    rgba(255, 255, 255, 0)
  );

  box-shadow:
    0 0 8px 2px rgba(255, 255, 255, 0.28),
    0 0 18px 6px rgba(126, 112, 255, 0.22),
    0 0 34px 12px rgba(36, 156, 255, 0.1);

  opacity: 0;
  z-index: 1;
  pointer-events: none;

  transform-origin: center center;

  will-change: transform, opacity;

  animation-name: floatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.x1 {
  left: 50%;
  --scale: 1;
  height: 130px;
  animation-duration: 6s;
  animation-delay: -1s;
}

.x2 {
  left: 65%;
  --scale: 1.15;
  height: 220px;
  animation-duration: 9s;
  animation-delay: -3s;
}

.x3 {
  left: 35%;
  --scale: 0.7;
  height: 100px;
  animation-duration: 5s;
  animation-delay: -1.5s;
}

.x4 {
  left: 18%;
  --scale: 1;
  height: 250px;
  animation-duration: 7.5s;
  animation-delay: -5s;
}

.x5 {
  left: 7%;
  --scale: 1.15;
  height: 320px;
  animation-duration: 11s;
  animation-delay: -7s;
}

.x6 {
  left: 28%;
  --scale: 0.85;
  height: 150px;
  animation-duration: 6.5s;
  animation-delay: -4s;
}

.x7 {
  left: 72%;
  --scale: 1.2;
  height: 280px;
  animation-duration: 10s;
  animation-delay: -2s;
}

.x8 {
  left: 86%;
  --scale: 1;
  height: 200px;
  animation-duration: 8s;
  animation-delay: -6s;
}

.x9 {
  left: 94%;
  --scale: 0.8;
  height: 120px;
  animation-duration: 7s;
  animation-delay: -2.5s;
}

.brand {
  position: relative;
  z-index: 2;
  width: min(90vw, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: reveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.logo-wrap {
  position: relative;
  width: clamp(140px, 22vw, 240px);
  display: grid;
  place-items: center;
}

.logo-aura {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(54px);
  opacity: 0.26;
  animation: pulse 4s ease-in-out infinite;
}

.logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 26px rgba(111, 61, 255, 0.24)) drop-shadow(0 0 42px rgba(36, 156, 255, 0.4));
}

/* =========================================================
   HERO-ILLUSTRATION
   ========================================================= */

.hero-illustration {
  position: relative;
  width: clamp(170px, 30vw, 300px);
  width: 280px;
  margin: 20px auto clamp(8px, 1.5vh, 16px);
  opacity: 0.6;
  filter: saturate(0.62) brightness(0.85) drop-shadow(0 0 22px rgba(111, 61, 255, 0.16))
    drop-shadow(0 0 36px rgba(36, 156, 255, 0.12));
}

.hover {
  width: 100%;
  animation: hover 5s ease-in-out infinite;
  animation-fill-mode: forwards;
}

.illustration {
  display: none;
  width: 100%;
  height: auto;
}

@keyframes hover {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-3px);
  }

  75% {
    transform: translateY(3px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Aufsteigende Zahlen-Bubbles */

.number-one,
.number-two,
.number-three,
.number-four,
.number-five,
.number-six,
.number-seven,
.number-eight,
.number-nine,
.number-ten,
.number-eleven,
.number-twelve,
.number-thirteen {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.number-one {
  transform: translateY(-10px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-10;
  animation-duration: 3200ms;
  animation-delay: 200ms;
}
.number-two {
  transform: translateY(-20px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-20;
  animation-duration: 4600ms;
  animation-delay: 1400ms;
}
.number-three {
  transform: translateY(-30px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-30;
  animation-duration: 2800ms;
  animation-delay: 2600ms;
}
.number-four {
  transform: translateY(-50px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-50;
  animation-duration: 5200ms;
  animation-delay: 800ms;
}
.number-five {
  transform: translateY(-60px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-60;
  animation-duration: 3700ms;
  animation-delay: 3400ms;
}
.number-six {
  transform: translateY(-70px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-70;
  animation-duration: 4900ms;
  animation-delay: 1900ms;
}
.number-seven {
  transform: translateY(-80px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-80;
  animation-duration: 2400ms;
  animation-delay: 4200ms;
}
.number-eight {
  transform: translateY(-90px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-90;
  animation-duration: 5600ms;
  animation-delay: 600ms;
}
.number-nine {
  transform: translateY(-100px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-100;
  animation-duration: 3300ms;
  animation-delay: 2900ms;
}
.number-ten {
  transform: translateY(-110px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-110;
  animation-duration: 4100ms;
  animation-delay: 3800ms;
}
.number-eleven {
  transform: translateY(-120px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-120;
  animation-duration: 2900ms;
  animation-delay: 1100ms;
}
.number-twelve {
  transform: translateY(-150px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-150;
  animation-duration: 5300ms;
  animation-delay: 4700ms;
}
.number-thirteen {
  transform: translateY(-160px) translateZ(0);
  opacity: 0;
  animation-name: fadeNumberDown-160;
  animation-duration: 3800ms;
  animation-delay: 2100ms;
}

@keyframes fadeNumberDown-10 {
  0% {
    transform: translateY(-10px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(140px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-20 {
  0% {
    transform: translateY(-20px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(140px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-30 {
  0% {
    transform: translateY(-30px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(130px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-50 {
  0% {
    transform: translateY(-50px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(110px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-60 {
  0% {
    transform: translateY(-60px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(90px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-70 {
  0% {
    transform: translateY(-70px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(80px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-80 {
  0% {
    transform: translateY(-80px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(80px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-90 {
  0% {
    transform: translateY(-90px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(60px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-100 {
  0% {
    transform: translateY(-100px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(60px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-110 {
  0% {
    transform: translateY(-110px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(30px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-120 {
  0% {
    transform: translateY(-120px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(20px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-150 {
  0% {
    transform: translateY(-150px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(10px) translateZ(0);
    opacity: 0;
  }
}

@keyframes fadeNumberDown-160 {
  0% {
    transform: translateY(-160px) translateZ(0);
    opacity: 0;
  }
  40%,
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(10px) translateZ(0);
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .hero-illustration {
    width: clamp(150px, 42vw, 220px);
    width: 250px;
  }
}

h1 {
  margin: clamp(24px, 4vh, 42px) 0 0;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  font-weight: 500;
  letter-spacing: clamp(0.42em, 1.2vw, 0.72em);
  text-indent: clamp(0.42em, 1.2vw, 0.72em);
  color: rgba(248, 249, 255, 0.96);
  text-shadow: 0 0 32px rgba(118, 107, 255, 0.22);
}

p {
  margin: clamp(18px, 3vh, 30px) 0 0;
  font-size: clamp(0.82rem, 1.4vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  color: var(--muted);
  animation: breathe 3s ease-in-out infinite;
}

.contact {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 48px);
  z-index: 2;
  margin: 0;
  translate: -50% 0;
  letter-spacing: 1px;
  text-indent: 0;
  white-space: nowrap;
  font-size: 12px;
}

@keyframes floatUp {
  0% {
    transform: translate3d(0, 12vh, 0) scale(var(--scale));
    opacity: 0;
  }

  12% {
    opacity: 0.95;
  }

  55% {
    opacity: 0.8;
  }

  88% {
    opacity: 0.45;
  }

  100% {
    transform: translate3d(0, -125vh, 0) scale(var(--scale));
    opacity: 0;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

  50% {
    opacity: 0.34;
    transform: scale(1.08);
  }
}

@keyframes drift {
  from {
    transform: translate3d(-2%, -2%, 0) scale(0.95);
  }

  to {
    transform: translate3d(4%, 4%, 0) scale(1.08);
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .brand {
    width: calc(100% - 36px);
  }

  .logo-wrap {
    width: clamp(170px, 45vw, 230px);
  }

  h1 {
    letter-spacing: 0.34em;
    text-indent: 0.34em;
  }

  p {
    letter-spacing: 0.42em;
    text-indent: 0.42em;
  }

  .grid {
    opacity: 0.12;
  }
}

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

/* =========================================================
   ADVANCES AI LEARNING
   ========================================================= */

.ai-learning {
  position: relative;
  width: min(560px, 82vw);
  margin-top: clamp(24px, 3.5vh, 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* DATA STREAM */

.data-window {
  position: relative;
  width: 100%;
  height: 46px;

  overflow: hidden;

  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);

  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);

  opacity: 0.72;
}

.data-track {
  position: absolute;

  top: 50%;
  left: 0;

  display: flex;
  align-items: center;

  gap: 28px;

  width: max-content;

  transform: translateY(-50%);

  animation: dataFlow 18s linear infinite;

  will-change: transform;
}

.data-track span {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  font-size: 12px;
  font-weight: 400;

  letter-spacing: 0.24em;

  color: rgba(157, 164, 215, 0.52);

  text-shadow: 0 0 12px rgba(119, 60, 255, 0.12);
}

/* einzelne Werte etwas unterschiedlich */

.data-track span:nth-child(3n) {
  color: rgba(99, 177, 255, 0.58);
}

.data-track span:nth-child(4n) {
  opacity: 0.48;
}

.data-track span:nth-child(5n) {
  color: rgba(176, 150, 255, 0.55);
}

/* leichte Mittellinie */

.data-window::after {
  content: "";

  position: absolute;

  left: 18%;
  right: 18%;
  bottom: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(122, 111, 255, 0.18), rgba(91, 168, 255, 0.24), transparent);
}

/* STATUS */

.learning-status {
  margin-top: 12px;

  display: flex;
  align-items: center;

  min-height: 18px;

  color: rgba(171, 179, 211, 0.72);
}

.status-dot {
  width: 4px;
  height: 4px;

  margin-right: 10px;

  border-radius: 50%;

  background: rgba(132, 145, 255, 0.9);

  box-shadow: 0 0 7px rgba(119, 91, 255, 0.75);

  animation: statusPulse 1.8s ease-in-out infinite;
}

.learning-text {
  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.24em;

  text-indent: 0;

  color: rgba(171, 179, 211, 0.72);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.learning-text.changing {
  opacity: 0;
  transform: translateY(3px);
}

/* 3 animierte Punkte */

.status-dots {
  display: flex;

  gap: 3px;

  margin-left: 5px;
}

.status-dots i {
  width: 2px;
  height: 2px;

  border-radius: 50%;

  background: currentColor;

  opacity: 0.22;

  animation: loadingDot 1.4s ease-in-out infinite;
}

.status-dots i:nth-child(2) {
  animation-delay: 0.2s;
}

.status-dots i:nth-child(3) {
  animation-delay: 0.4s;
}

/* =========================================================
   AI ANIMATIONS
   ========================================================= */

@keyframes dataFlow {
  from {
    transform: translate3d(0, -50%, 0);
  }

  to {
    transform: translate3d(-50%, -50%, 0);
  }
}

@keyframes statusPulse {
  0%,
  100% {
    opacity: 0.35;

    transform: scale(0.8);
  }

  50% {
    opacity: 1;

    transform: scale(1.25);
  }
}

@keyframes loadingDot {
  0%,
  100% {
    opacity: 0.18;
  }

  50% {
    opacity: 0.9;
  }
}