@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700&family=Unbounded:wght@500;700;800&display=swap');

:root {
  --font-display: 'Unbounded', 'Segoe UI', sans-serif;
  --font-body: 'Onest', 'Segoe UI', sans-serif;
  --landing-bg: #07070e;
  --landing-surface: rgba(12, 12, 26, 0.92);
  --landing-card: #10101f;
  --landing-card-subtle: #0c0c1a;
  --landing-border: rgba(255, 255, 255, 0.08);
  --landing-border-strong: rgba(255, 255, 255, 0.14);
  --landing-text: #eeeeff;
  --landing-text-soft: #b4b4c9;
  --landing-text-muted: #5f5f74;
  --landing-accent: #00c96a;
  --landing-accent-strong: #18b5ff;
  --landing-accent-soft: rgba(0, 201, 106, 0.12);
  --button-primary-bg: #0284c7;
  --button-primary-hover: #0369a1;
  --button-primary-text: #ffffff;
  --button-primary-border: #0284c7;
  --button-secondary-bg: #ffffff;
  --button-secondary-hover: #f8fafc;
  --button-secondary-text: #334155;
  --button-secondary-border: #e2e8f0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--landing-text);
  background: var(--landing-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

.font-display {
  font-family: var(--font-display);
}

.landing-dark {
  --landing-bg: #07070e;
  --landing-surface: rgba(12, 12, 26, 0.92);
  --landing-card: #10101f;
  --landing-card-subtle: #0c0c1a;
  --landing-border: rgba(255, 255, 255, 0.08);
  --landing-border-strong: rgba(255, 255, 255, 0.14);
  --landing-text: #eeeeff;
  --landing-text-soft: #b4b4c9;
  --landing-text-muted: #5f5f74;
  --landing-accent: #00c96a;
  --landing-accent-strong: #18b5ff;
  --landing-accent-soft: rgba(0, 201, 106, 0.12);
}

@keyframes radar-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes radar-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

@keyframes radar-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.radar-shell::before {
  content: '';
  position: absolute;
  inset: 7%;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 201, 106, 0.05),
    inset 0 0 50px rgba(24, 181, 255, 0.05);
}

.radar-grid {
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 30px rgba(24, 181, 255, 0.03);
}

.radar-sweep {
  animation: radar-rotate 12s linear infinite;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 295deg,
    rgba(24, 181, 255, 0.12) 332deg,
    rgba(0, 201, 106, 0.45) 350deg,
    rgba(0, 201, 106, 0.72) 360deg
  );
  mask-image: radial-gradient(circle at center, transparent 0 10%, black 22% 100%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 0 10%, black 22% 100%);
  opacity: 0.95;
}

.radar-blip {
  animation: radar-pulse 3.8s ease-in-out infinite;
}

.radar-label {
  animation: radar-float 5.5s ease-in-out infinite;
  box-shadow: 0 18px 48px -26px rgba(0, 0, 0, 0.95);
}