* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #000;
}

body::selection { background: rgba(0, 153, 255, .35); color: #fff; }

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

.logo-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-block;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0 8%, transparent 9%),
    radial-gradient(circle at 40% 32%, #5bd0ff 0 18%, #0099ff 38%, #003cff 70%, #001122 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 36px rgba(0,153,255,.7);
}

.step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(0,153,255,.24), rgba(255,255,255,.04));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
}

.first-step {
  box-shadow:
    0 0 0 1px rgba(0,153,255,.28),
    0 24px 110px rgba(0,153,255,.18),
    0 22px 80px rgba(0,0,0,.7);
}

.step-number {
  text-shadow: 0 0 20px rgba(0,153,255,.7);
}

.arrow-orb {
  color: #9bddff;
  box-shadow: 0 0 0 1px rgba(0,153,255,.18), 0 0 38px rgba(0,153,255,.25);
  animation: floatArrow 2.2s ease-in-out infinite;
}

@keyframes floatArrow {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(5px); }
}

@media (max-width: 640px) {
  .step-card { border-radius: 24px; }
}